/* ============================================================
   style.css — Spanish Study Portal
   Dracula Theme — Shared Styles
   ============================================================ */

/* ---- Dracula colour variables ---- */
:root {
  color-scheme: light dark;
  --background: #282a36;
  --current-line: #5b6078;
  --foreground: #f8f8f2;
  --comment: #6272a4;
  --cyan: #8be9fd;
  --green: #50fa7b;
  --orange: #ffb86c;
  --pink: #ff79c6;
  --purple: #bd93f9;
  --red: #ff5555;
  --yellow: #f1fa8c;
  --selection: #44475a;
  /* Shared border shorthands */
  --border: 1px solid var(--current-line);
  --border-accent: 2px solid var(--pink);
  /* Spacing scale — 4px steps */
  --space-0: 0.06rem; /*  1px */
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem; /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.5rem; /* 24px */
  --space-6: 2rem; /* 32px */
  --space-7: 3rem; /* 48px */
  /* Font-size scale */
  --text-1: 0.9rem; /* micro — badges, counts */
  --text-2: 1rem; /* small — footer, captions */
  --text-3: 1.15rem; /* compact — topbar, tables */
  --text-4: 1.25rem; /* base body */
  --text-5: 1.45rem; /* medium — subtitles, labels */
  --text-6: 1.75rem; /* large — section heads, buttons */
  --text-7: 2rem; /* display — h1 */
  --line-height: 1.4;
  /* Font weights */
  --fw-4: 400; /* normal */
  --fw-6: 600; /* semi-bold */
  --fw-7: 700; /* bold */
}

/* ---- Box-sizing reset ---- */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

/* ---- Base ---- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-7);
}
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
  margin: 0;
  padding: 0;
  line-height: var(--line-height);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-size: var(--text-4);
}
a {
  color: var(--cyan);
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: underline;
}

/* ============================================================
   TOP NAVIGATION BAR
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--background);
  border-bottom: var(--border);
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: 0 2px 8px color-mix(in srgb, black 40%, transparent);
}

/* Dropdown toggle arrow */
.topbar-dropdown-toggle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: var(--border);
  background: color-mix(in srgb, var(--selection) 30%, transparent);
  color: var(--foreground);
  border-radius: 6px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-3);
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.3s;
}
.topbar-dropdown-toggle:hover,
.topbar-dropdown-toggle:focus {
  background: color-mix(in srgb, var(--purple) 35%, transparent);
  border-color: var(--purple);
}
.topbar-dropdown-toggle[aria-expanded='true'] {
  transform: translateX(-50%) rotate(180deg);
  border-color: var(--purple);
}

/* Dropdown panel */
.topbar-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--background);
  border-bottom: var(--border);
  box-shadow: 0 4px 12px color-mix(in srgb, black 50%, transparent);
  padding: var(--space-3) var(--space-4);
  z-index: 99;
  max-height: 60vh;
  overflow-y: auto;
}
.topbar-dropdown.is-open {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

/* Grid variant for single-letter links (vocab) — many items per row */
.topbar-dropdown--grid.is-open {
  gap: var(--space-1);
}
.topbar-dropdown--grid .topbar-letters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

/* List variant for longer links (phrases, stories, verb sections) — one per row */
.topbar-dropdown--list.is-open {
  flex-direction: column;
  gap: var(--space-1);
  align-items: center;
}
.topbar-dropdown--list a {
  width: min(calc(100vw - 2 * var(--space-6)), 500px);
  text-align: center;
}

.topbar-letters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.topbar a.disabled {
  opacity: 0.35;
  pointer-events: none;
}

.topbar .find-btn {
  border: var(--border);
  background: color-mix(in srgb, var(--selection) 30%, transparent);
  color: var(--foreground);
  border-radius: 8px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-4);
  font-weight: var(--fw-6);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
}
.topbar .find-btn:hover,
.topbar .find-btn:focus {
  background: color-mix(in srgb, var(--purple) 35%, transparent);
  border-color: var(--purple);
  transform: translateY(-1px);
}
.topbar .find-btn.has-filter {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--yellow) 35%, transparent);
}

/* Plain <a> inside topbar — used by vocab, phrases, tenses */
.topbar a {
  color: var(--green);
  font-weight: var(--fw-6);
  font-size: var(--text-3);
  padding: var(--space-1) var(--space-2);
  border-radius: 3px;
  background: color-mix(in srgb, var(--green) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
  transition:
    background 0.15s,
    border-color 0.15s;
  text-decoration: none;
}
.topbar a:hover,
.topbar a:focus {
  background: color-mix(in srgb, var(--green) 22%, transparent);
  border-color: var(--green);
  text-decoration: none;
}

/* Home link — used by verb detail pages */
.topbar .home-link {
  color: var(--cyan);
  font-weight: var(--fw-7);
  font-size: var(--text-4);
  margin-right: var(--space-2);
  background: none;
  border: none;
  padding: 0;
}
.topbar .home-link:hover {
  text-decoration: underline;
}

/* Anchor links — used by verb detail pages */
.topbar .anchor-link {
  font-size: var(--text-3);
}

/* Separator glyph — hidden when dropdown is used, kept for verb-index */
.topbar .sep {
  color: var(--current-line);
  user-select: none;
}

/* Entry count badge */
.topbar .count {
  color: var(--comment);
  font-size: var(--text-1);
  margin-left: auto;
  white-space: nowrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  margin-top: auto;
  padding: var(--space-4) var(--space-6);
  border-top: var(--border);
  color: var(--comment);
  font-size: var(--text-2);
  text-align: center;
}
footer a {
  color: var(--cyan);
}

/* ============================================================
   COMMON PAGE STRUCTURE
   ============================================================ */
h1 {
  color: var(--purple);
  font-size: var(--text-7);
  margin: 0;
}
header h1 {
  margin-bottom: var(--space-1);
}

.subtitle {
  color: var(--comment);
  font-size: var(--text-4`);
  padding: 0;
  margin: 0;
}

header {
  text-align: left;
  margin-bottom: var(--space-5);
  border-bottom: var(--border);
  padding-bottom: var(--space-4);
}

.content {
  padding: var(--space-4) var(--space-6) var(--space-7) var(--space-6);
}

/* ============================================================
   LANDING / INDEX PAGE LAYOUTS
   (index.html, top-irregular.html)
   ============================================================ */

/* Centred landing-page wrappers — grow to fill body's flex column */
.container,
.page-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  gap: var(--space-5);
}

/* Vertical button stack (index.html) */
.button-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  max-width: 360px;
  justify-content: center;
  align-items: stretch;
}

/* Wrapping button grid (top-irregular.html) */
.button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  max-width: 860px;
  width: 100%;
}

/* ---- Entry button ---- */
.entry-btn {
  background: var(--green);
  color: var(--background);
  border: none;
  border-radius: 8px;
  font-size: var(--text-6);
  font-weight: var(--fw-7);
  cursor: pointer;
  box-shadow: 0 2px 8px color-mix(in srgb, black 30%, transparent);
  text-align: center;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-3) var(--space-5);
}
.entry-btn:hover,
.entry-btn:focus {
  background: var(--pink);
  color: var(--foreground);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--green) 20%, transparent);
  text-decoration: none;
}

/* ============================================================
   VERB DETAIL PAGES
   (hacer.html, ser.html, …)
   ============================================================ */

/* Verb meaning subtitle under h1 */
.definition {
  color: var(--yellow);
  font-size: var(--text-5);
  font-style: italic;
  margin: 0;
}

/* Prose notes between h1 and first section */
.prose {
  margin: var(--space-4) 0 var(--space-5) 0;
  color: var(--foreground);
}
.prose ul {
  padding-left: var(--space-5);
  margin: var(--space-2) 0;
}
.prose li {
  margin: var(--space-1) 0;
}
.prose em {
  color: var(--cyan);
  font-style: italic;
}

/* Section heading (h2) */
.section-title {
  color: var(--pink);
  font-size: var(--text-6);
  font-weight: var(--fw-7);
  margin: var(--space-6) 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: var(--border-accent);
}

/* Conjugation table wrapper */
.conj-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

/* Tables inside .conj-table-wrap (verb conjugation tables) */
.conj-table-wrap table {
  border-collapse: collapse;
  width: auto;
  min-width: 100%;
}
.conj-table-wrap thead th {
  font-weight: var(--fw-7);
  text-align: left;
  padding: var(--space-1) var(--space-3);
  border-bottom: 2px solid var(--current-line);
  white-space: nowrap;
  background: color-mix(in srgb, var(--selection) 50%, transparent);
}
.conj-table-wrap tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--selection) 25%, transparent);
}
.conj-table-wrap tbody tr:hover {
  background: color-mix(in srgb, var(--selection) 55%, transparent);
}
.conj-table-wrap td {
  padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--current-line) 30%, transparent);
  white-space: nowrap;
  vertical-align: middle;
  font-weight: var(--fw-2);
}
.conj-table-wrap td:first-child {
  font-weight: var(--fw-7);
}

/* Inline irregular-form highlight */
span.highlight {
  color: var(--pink) !important;
  font-weight: var(--fw-7);
  border-top: 1px dotted var(--pink);
  border-bottom: 1px dotted var(--pink);
  background-color: color-mix(in srgb, var(--pink) 10%, transparent);
}

/* ============================================================
   CARD-BASED PAGES
   (vocab.html, phrases.html, tenses.html)
   ============================================================ */

/* Multi-column grid */
.grid {
  column-count: 3;
  column-gap: 1em;
  margin-top: var(--space-4);
}

/* Individual card */
.card {
  background: color-mix(in srgb, var(--selection) 30%, transparent);
  border: var(--border);
  border-radius: 6px;
  padding: var(--space-2) var(--space-3);
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--space-3);
  break-inside: avoid;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
}
.card:hover {
  border-color: var(--comment);
}
.card em {
  color: var(--purple);
  font-style: italic;
}
.card b,
.card strong {
  color: var(--yellow);
}

/* Notice / tip block inside a card */
.notice {
  background: color-mix(in srgb, var(--comment) 15%, transparent);
  border-left: 3px solid var(--comment);
  color: var(--cyan);
  font-size: var(--text-4);
  padding: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
  border-radius: 0 4px 4px 0;
  line-height: var(--line-height);
}

/* Tables INSIDE cards (phrases, tenses, vocab with tables) */
.card table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-2);
}
.card thead th {
  background: var(--comment);
  color: var(--background);
  padding: var(--space-1) var(--space-2);
  text-align: left;
  font-size: var(--text-3);
  font-weight: var(--fw-7);
}
.card thead th:first-child {
  border-radius: 3px 0 0 0;
}
.card thead th:last-child {
  border-radius: 0 3px 0 0;
}
.card tbody tr {
  border-bottom: 1px solid color-mix(in srgb, var(--current-line) 30%, transparent);
}
.card tbody tr:last-child {
  border-bottom: none;
}
.card tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--selection) 15%, transparent);
}
.card tbody tr:hover {
  background: color-mix(in srgb, var(--comment) 12%, transparent);
}
.card tbody td {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-4);
  vertical-align: top;
  line-height: var(--line-height);
}
.card tbody td:first-child {
  color: var(--green);
  font-weight: var(--fw-7);
  width: 45%;
}
.card tbody td:last-child {
  color: var(--foreground);
}
.card tbody td em {
  color: var(--purple);
  font-style: italic;
}
.card tbody td strong {
  color: var(--yellow);
}
.card tbody td code {
  background: color-mix(in srgb, var(--selection) 60%, transparent);
  color: var(--cyan);
  padding: var(--space-0) var(--space-1);
  border-radius: 3px;
  font-size: var(--text-3);
}

/* Back-to-top button */
.back-to-top {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  background: var(--purple);
  color: var(--background);
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--text-6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px color-mix(in srgb, black 40%, transparent);
  opacity: 0.7;
  transition: opacity 0.2s;
  text-decoration: none;
}
.back-to-top:hover {
  opacity: 1;
  text-decoration: none;
}

/* ============================================================
   VOCABULARY PAGE  (vocab.html)
   ============================================================ */
.letter-header,
.section-header {
  color: var(--pink);
  font-size: var(--text-6);
  font-weight: var(--fw-7);
  margin: var(--space-6) 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: var(--border-accent);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.letter-header {
  text-transform: uppercase;
}
.letter-header .letter-count {
  font-size: var(--text-2);
  color: var(--comment);
  font-weight: var(--fw-4);
}

/* Vocab/tense card primary label */
.term,
.tense-title {
  color: var(--green);
  font-weight: var(--fw-7);
  font-size: var(--text-6);
}
/* Translation / description line — shared by vocab and tense cards */
.card-trans,
.tense-desc {
  color: var(--orange);
  font-size: var(--text-5);
  margin-top: var(--space-1);
}

.examples {
  margin-top: var(--space-2);
  padding: 0;
  list-style: none;
}
.examples li {
  font-size: var(--text-4);
  color: var(--foreground);
  opacity: 0.85;
  padding: var(--space-1) 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--current-line) 40%, transparent);
  line-height: var(--line-height);
}
.examples li:last-child {
  border-bottom: none;
}

/* ============================================================
   SEARCH DIALOG / FILTER (vocab)
   ============================================================ */
.search-dialog {
  /* Pin to top of the screen so the dialog stays visible when the soft
     keyboard opens on iOS.  Both the layout- and visual-viewport share the
     same origin at the top, so a fixed top-offset is stable regardless of
     keyboard state.  margin:0 overrides the UA "auto-centering" that would
     otherwise re-centre whenever card reflow changes document height. */
  position: fixed;
  top: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: min(720px, 92vw);
  /* Cap height so the dialog never extends under the keyboard; 100dvh shrinks
     when the keyboard is open in browsers that support dynamic viewport units. */
  max-height: calc(100dvh - var(--space-7));
  overflow-y: auto;
  /* Prevent touch-scroll inside the dialog from bleeding into the body and
     causing the backdrop / page to bounce (the classic iOS overscroll jump). */
  overscroll-behavior: contain;
  border: var(--border);
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--selection) 75%, transparent) 0%, color-mix(in srgb, var(--background) 85%, transparent) 100%);
  color: var(--foreground);
  padding: var(--space-4);
  box-shadow: 0 18px 48px color-mix(in srgb, black 70%, transparent);
}

.search-dialog::backdrop {
  background: color-mix(in srgb, black 80%, transparent);
  backdrop-filter: blur(2px);
}

.search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.search-header h2 {
  margin: 0;
  font-size: var(--text-6);
  color: var(--cyan);
}

.search-hint {
  margin: 0 0 var(--space-3) 0;
  color: var(--comment);
  font-size: var(--text-3);
}

.search-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

#search-input {
  flex: 1;
  min-width: 240px;
  padding: var(--space-2) var(--space-3);
  border-radius: 8px;
  border: var(--border);
  background: color-mix(in srgb, var(--selection) 40%, transparent);
  color: var(--foreground);
  font-size: var(--text-4);
  outline: none;
}

#search-input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple) 30%, transparent);
}

.ghost-btn,
.icon-btn {
  border: var(--border);
  background: color-mix(in srgb, var(--selection) 30%, transparent);
  color: var(--foreground);
  border-radius: 8px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-4);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
}

.ghost-btn:hover,
.ghost-btn:focus,
.icon-btn:hover,
.icon-btn:focus {
  background: color-mix(in srgb, var(--purple) 35%, transparent);
  border-color: var(--purple);
  transform: translateY(-1px);
}

.icon-btn {
  line-height: 1;
}

.search-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  color: var(--comment);
  font-size: var(--text-3);
}

.search-tip {
  color: var(--green);
  font-weight: var(--fw-6);
}

.card.is-hidden {
  display: none !important;
}
.letter-group.is-hidden {
  display: none;
}

/* ============================================================
   PHRASES PAGE  (phrases.html)
   ============================================================ */
.card-title {
  color: var(--pink);
  font-size: var(--text-5);
  font-weight: var(--fw-7);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid color-mix(in srgb, var(--pink) 35%, transparent);
}
.card-count {
  font-size: var(--text-1);
  color: var(--comment);
  font-weight: var(--fw-4);
  margin-left: var(--space-1);
}

/* ============================================================
   TENSES PAGE  (tenses.html)
   ============================================================ */

/* Important / featured tense card */
.card.important-tense {
  border: 3px solid color-mix(in srgb, var(--pink) 70%, transparent);
  box-shadow: 0 0 12px 0 color-mix(in srgb, var(--yellow) 15%, transparent);
  /*background: linear-gradient(180deg, color-mix(var(--pink) 8%, transparent) 0%, color-mix(var(--selection) 50%, transparent) 100%);*/
}

/* .tense-title and .tense-desc share rules with .term and .card-trans — see vocab section */

/* ============================================================
   DRACULA LIGHT THEME  (prefers-color-scheme: light)
   Background/foreground swap; accent colours stay vibrant.
   ============================================================ */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --background: #f8f8f2;
    --current-line: #d0d4e2;
    --foreground: #282a36;
    --comment: #6272a4;
    --cyan: #0891b2;
    --green: #059669;
    --orange: #d97706;
    --pink: #db2777;
    --purple: #7c3aed;
    --red: #dc2626;
    --yellow: #ca8a04;
    --selection: #d8dced;
  }

  /* Buttons with accent bg need light text (--background is now white) */
  .entry-btn:hover,
  .entry-btn:focus {
    color: var(--background);
  }

  /* Table headers: comment bg (#6272a4) needs dark text, not white */
  .card thead th {
    color: #fff;
  }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Large screens: 3 → 2 columns for grids */
@media (max-width: 1440px) {
  .grid {
    column-count: 2;
  }
}

/* Medium screens and below */
@media (max-width: 900px) {
  .grid {
    column-count: 1;
  }
  .content {
    padding: var(--space-3) var(--space-4) var(--space-6) var(--space-4);
  }
  .card tbody td:first-child {
    width: 40%;
  }
}

/* Mobile */
@media (max-width: 600px) {
  h1 {
    font-size: var(--text-6);
  }
  .conj-table-wrap td,
  .conj-table-wrap thead th {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-2);
  }
  .entry-btn {
    font-size: var(--text-4);
    padding: var(--space-3) var(--space-4);
  }
}