/* ============================================================
   ECM Global Typography & Base Element Styles
   WSS School — warm palette, readable defaults
   ============================================================ */

/* ----------------------------------------------------------
   1. Base Body Typography
   ---------------------------------------------------------- */
/* line-height is 1.5 (--leading-normal), not the 1.6 this file used to set.
   That was the third value in a three-way disagreement: globals.css said 1.6,
   homepage.html's inline <style> said 1.5 for .text-xs/.text-sm and 1.3 for
   .text-2xl, and _event_card_css.html restated Tailwind's 1.333/1.4286/1.333.
   The compiled build's scale (--text-base--line-height: 1.5) is now the only
   one in play, so inheriting from it is what makes the three agree. */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* ----------------------------------------------------------
   2. Headings
   ---------------------------------------------------------- */
/* The size block below is an ELEMENT rule, so it outranks every Tailwind
   size utility: `class="text-2xl font-bold text-stone-100"` on an <h1>
   (7 occurrences, all in base.html / 403 / 404 / 500) still renders at
   2.25rem, because this unlayered `h1` beats `@layer utilities .text-2xl`
   regardless of specificity or source order. custom.css's `.page-title`
   (0,1,0) is the only thing that beats it. Either move the page headings onto
   .page-title / .d-title (which already exist at 1.5rem) or drop these four
   size declarations -- but do not leave `text-2xl` on an h1 believing it
   works. */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  color: #1C1917;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

/* ----------------------------------------------------------
   3. Links
   ---------------------------------------------------------- */
a {
  color: #C2410C;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------
   4. Form Inputs
   ---------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: #fff;
  border: 1px solid #D6D3D1;
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #D97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2);
}

input::placeholder,
textarea::placeholder {
  color: #A8A29E;
}

/* ----------------------------------------------------------
   5. Tables
   ---------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

thead th {
  background-color: #F5F5F4;
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text-muted);
}

tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

tbody tr:hover {
  background-color: #FAFAF9;
}

/* ----------------------------------------------------------
   7. Scrollbar Styling
   ---------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #F5F5F4;
}

::-webkit-scrollbar-thumb {
  background: #D6D3D1;
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: #A8A29E;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #D6D3D1 #F5F5F4;
}

/* ----------------------------------------------------------
   8. Print Styles
   ---------------------------------------------------------- */
@media print {
  nav, aside, .sidebar, footer {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  table {
    page-break-inside: avoid;
  }

  h1, h2, h3, h4 {
    page-break-after: avoid;
  }
}