/* ================================
   Global Styles
   Author: Example Dev
   Date: 2025-09-06
   Description: Complex CSS sample
   ================================ */

/* Reset styles (single-line comment style) */
html, body {
  margin: 0; /* remove default margins */
  padding: 0; /* remove default padding */
  font-family: "Segoe UI", Arial, sans-serif;
  background: #f9fafb; /* light gray background */
}

/* 
  Layout Container
  ----------------
  Uses CSS Grid to split sidebar + main content.
*/
.container {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar | content */
  min-height: 100vh;
}

/***********************************
 * Sidebar Navigation
 * Purpose: Display vertical links
 ***********************************/
.sidebar {
  background: #1a202c; /* dark background */
  color: #fff; /* white text */
  padding: 1rem;
}

.sidebar ul {
  list-style: none; /* remove bullets */
  margin: 0; 
  padding: 0;
}

.sidebar li + li {
  margin-top: 0.5rem; /* spacing between links */
}

.sidebar a {
  color: inherit; /* inherit white */
  text-decoration: none;
  padding: 0.5rem 0.75rem; /* internal spacing */
  display: block;
  border-radius: 0.25rem;
}

/* hover/focus states */
.sidebar a:hover,
.sidebar a:focus {
  background: #2d3748;
}

/*----------------------------------
  Main Content
----------------------------------*/
.main {
  padding: 2rem;
}

.main h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  /* Example of inline property comment */
  /* font-weight: bold;  <-- intentionally disabled */
}

.main p {
  margin-bottom: 1rem;
}

/* #################################
   Cards
   ################################# */
.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* smooth hover */
}

/* On hover, cards "lift up" */
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/**
 * Card Headings
 * @selector .card h2
 * @role Sub-title
 */
.card h2 {
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.card p {
  margin: 0;
}

/* Utility: Buttons */
.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  border-radius: 0.375rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Primary button */
.button.primary {
  background: #3182ce;
  color: #fff;
}

.button.primary:hover {
  background: #2b6cb0;
}

/* Secondary button */
.button.secondary {
  background: #e2e8f0;
  color: #2d3748;
}

.button.secondary:hover {
  background: #cbd5e0;
}

/* ###########
   Forms
   ########### */
input[type="text"], textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #cbd5e0;
  border-radius: 0.375rem;
}

/* Focus state: highlight in blue */
input[type="text"]:focus,
textarea:focus {
  border-color: #3182ce;
  outline: none;
  box-shadow: 0 0 0 2px rgba(49,130,206,0.25);
}

/* Decorative pseudo-element */
blockquote {
  position: relative;
  padding-left: 1.5rem;
  color: #555;
  font-style: italic;
}

blockquote::before {
  content: "“"; /* opening quote mark */
  position: absolute;
  left: 0;
  top: -0.25rem;
  font-size: 2rem;
  color: #ccc;
}
