/* Kokoy Dictionary — standalone tropical palette (deliberately not the
   Design Lady brand system; this project has its own identity).
   Primary:  #0B6B68 (deep ocean teal)
   Secondary:#E85D04 (sunset coral) — used as --coral-dark (#A74202) for any
             text-bearing use, since white-on-#E85D04 only measures 3.50:1
             and fails the 4.5:1 AA floor for normal text. Reserve plain
             --coral for large decorative fills only, never small text.
   Dark:     #072A27 (deep forest night)
   Accent:   #5EEAD4 (mint — dark backgrounds only, mirrors the old cyan's
             role, see focus-ring note below)
   Neutrals: #FFFFFF, #F4F9F8 (warm white), #1D2A2A (charcoal), #4B5B5A (slate)
   All pairs below verified WCAG AA with a contrast-ratio script, not by
   eye. --mint measures ~1.4:1 on white/warmwhite, so it is ONLY used as
   text/UI color on forest or teal backgrounds (10.4:1+), never on light
   ones — same rule that applied to the old --cyan. */

:root {
  --teal: #0B6B68;
  --teal-hover: #08504E;
  --coral: #E85D04;
  --coral-dark: #A74202;
  --coral-dark-hover: #8B3702;
  --forest: #072A27;
  --mint: #5EEAD4;
  --white: #FFFFFF;
  --warmwhite: #F4F9F8;
  --charcoal: #1D2A2A;
  --slate: #4B5B5A;
  --soft-divider: #CBD5D3;
  /* Flat pre-computed 8% teal-over-white, used for chip/tag fills — a
     solid color, not a live rgba() overlay, so its contrast stays fixed
     and verifiable regardless of what's rendered underneath (deliberately
     avoiding the unpredictable-contrast problem true glassmorphism has). */
  --teal-tint: #EBF3F3;

  /* Headings + UI chrome (nav, buttons, chips, labels): Plus Jakarta Sans,
     geometric and clear at small sizes. Definitions/notes/history content:
     Lora, a serif to give word entries an authentic lexicon feel. Both
     fall back to the system stack if the Google Fonts request can't reach
     the network (e.g. offline PWA use before the font's been cached). */
  --font-heading: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(7, 42, 39, 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--warmwhite);
  color: var(--forest);
  line-height: 1.5;
}

/* Skip link for keyboard/screen-reader users */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--white);
  color: var(--teal);
  padding: 0.75rem 1rem;
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visibility — WCAG 2.4.7 / 1.4.11 (non-text contrast, 3:1 minimum).
   Purple-on-cyan and cyan-on-navy both clear contrast; purple-on-navy and
   cyan-on-white do not (1.5:1 / 1.6:1) — so the ring color is scoped to
   the background it actually renders against, not applied globally. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

/* Dark-background containers: swap the ring to cyan so it stays visible. */
header.site-header :focus-visible,
footer :focus-visible,
.donate-card :focus-visible,
.wotd-card :focus-visible {
  outline-color: var(--mint);
}

header.site-header {
  background: var(--forest);
  color: var(--white);
  padding: 1.25rem 1rem;
}

.header-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.brand h1 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.brand .tagline {
  color: var(--mint);
  font-size: 0.85rem;
  margin: 0;
}

nav.site-nav ul {
  list-style: none;
  display: flex;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

nav.site-nav a {
  color: var(--white);
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

nav.site-nav a:hover,
nav.site-nav a:focus-visible {
  border-bottom-color: var(--mint);
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

section {
  margin-bottom: 3rem;
}

section > h2 {
  color: var(--teal);
  font-weight: 700;
  font-size: 1.3rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

section:first-of-type > h2 {
  margin-top: 0;
}

/* Section-level accordion (About, Suggest a Word) — native <details>, so it
   works with zero JS and is keyboard/screen-reader operable by default.
   Styled deliberately bolder than .category-group below: these are site
   sections (structure), not dictionary content, and should read that way
   at a glance rather than blending into the word-browsing list. */
.section-accordion {
  border: 1px solid var(--slate);
  border-top: 4px solid var(--coral);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.section-accordion > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--warmwhite);
}

.section-accordion > summary::-webkit-details-marker { display: none; }

.section-accordion > summary h2 {
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
  font-size: 1.2rem;
}

.section-accordion > summary::after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--coral-dark);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.section-accordion[open] > summary::after {
  content: "\2212"; /* minus sign */
}

.section-accordion .accordion-body {
  padding: 1.25rem;
}

/* Category groups (below, in the Dictionary section) stay deliberately
   plain and flat by contrast — content chunks, not navigation. */

/* Word of the day */
.wotd-card {
  /* Gradient between two already-verified colors (6.33:1 and 9.26:1 for
     white text) rather than introducing an unverified third color — every
     point along the ramp stays comfortably above the 4.5:1 floor. */
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-hover) 100%);
  color: var(--white);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.wotd-card::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--mint);
  opacity: 0.15;
}

.wotd-label {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--mint);
  margin: 0 0 0.4rem;
}

.wotd-word {
  font-size: 2rem;
  margin: 0;
  font-family: var(--font-heading);
  padding-right: 5rem; /* keeps long words from running under the icons */
}

.wotd-actions {
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  display: flex;
  gap: 0.35rem;
  z-index: 2;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  cursor: pointer;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.wotd-status {
  /* White, not mint: mint-on-teal measures 4.28:1 at the gradient's darker
     end, just under the 4.5:1 text floor. White clears 6.33:1/9.26:1
     across the whole gradient, so it's safe regardless of where this text
     sits on the card. */
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
  min-height: 1.1em;
}

.wotd-english {
  font-size: 1.1rem;
  margin: 0.25rem 0 0.75rem;
  color: var(--warmwhite);
  font-family: var(--font-serif);
}

.wotd-pron {
  font-style: italic;
  color: var(--warmwhite);
  opacity: 0.85;
  font-family: var(--font-serif);
}

/* Search */
.search-wrap {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

#search-input {
  flex: 1 1 240px;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  border: 2px solid var(--slate);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--forest);
}

#search-input:focus-visible {
  border-color: var(--teal);
}

/* Category chips — replace the old single-select dropdown. Toggle buttons,
   one active at a time, "All" included. */
.chip-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

/* Shown only once search or a category is active — see renderResults() in
   app.js. While browsing, the accordion headers already list categories. */
.chip-filter--hidden {
  display: none;
}

.chip {
  border: 1px solid transparent;
  background: var(--teal-tint);
  color: var(--teal);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--teal);
}

.chip[aria-pressed="true"] {
  background: var(--teal);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(11, 107, 104, 0.35);
}

.result-count {
  color: var(--slate);
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}

/* Word list */
.word-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.word-card {
  background: var(--white);
  border: 1px solid var(--slate);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}

.word-card summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.word-card summary::-webkit-details-marker { display: none; }

.word-copy-btn {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--teal);
  cursor: pointer;
  flex-shrink: 0;
}

.word-copy-btn:hover {
  background: var(--teal-tint);
}

.word-copy-btn.copied {
  background: var(--teal);
  color: var(--white);
}

.word-kokoy {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--teal);
}

.word-english {
  color: var(--charcoal);
}

.word-tag {
  display: inline-block;
  background: var(--warmwhite);
  color: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

.word-detail {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--soft-divider);
  color: var(--charcoal);
  font-size: 0.95rem;
  font-family: var(--font-serif);
}

.word-detail dt {
  font-weight: 600;
  color: var(--slate);
  margin-top: 0.5rem;
}

.word-detail dd {
  margin: 0.15rem 0 0;
}

.empty-state {
  color: var(--slate);
  padding: 2rem 1rem;
  text-align: center;
}

/* Category groups — collapsed by default in the grouped (browse) view, so
   mobile lands on ~10 tappable rows instead of scrolling 217 words. */
.category-group {
  background: var(--white);
  border: 1px solid var(--slate);
  border-radius: var(--radius);
  overflow: hidden;
}

.category-group > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  font-weight: 700;
  color: var(--teal);
}

.category-group > summary::-webkit-details-marker { display: none; }

.category-group > summary::after {
  content: "+";
  font-size: 1.2rem;
  color: var(--teal);
  flex-shrink: 0;
}

.category-group[open] > summary::after {
  content: "\2212";
}

.category-group .category-count {
  color: var(--slate);
  font-weight: 400;
  font-size: 0.85rem;
  margin-left: 0.4rem;
}

.category-group .word-list {
  padding: 0 0.75rem 0.75rem;
}

.category-group .word-card {
  border-color: var(--warmwhite);
  background: var(--warmwhite);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn-primary {
  background: var(--teal);
  color: var(--white);
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--teal-hover); }

.btn-donate {
  /* White on plain --coral is 3.31:1 (fails AA); pink-dark clears 4.80:1. */
  background: var(--coral-dark);
  color: var(--white);
}
.btn-donate:hover, .btn-donate:focus-visible { background: var(--coral-dark-hover); }

.btn-secondary {
  background: var(--white);
  color: var(--teal);
  border: 2px solid var(--teal);
}
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--warmwhite); }

/* Forms */
label {
  display: block;
  font-weight: 600;
  margin: 0.9rem 0 0.3rem;
  color: var(--charcoal);
}

input[type="text"],
input[type="email"],
textarea,
select {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 2px solid var(--soft-divider);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--forest);
  background: var(--white);
}

textarea { min-height: 90px; resize: vertical; }

.form-hint {
  color: var(--slate);
  font-size: 0.85rem;
  margin: 0.2rem 0 0;
}

.form-actions {
  margin-top: 1.2rem;
}

.form-status {
  margin: 0.75rem 0 0;
  font-weight: 600;
  color: var(--teal);
  min-height: 1.2em;
}

.form-alt {
  margin: 1.25rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--soft-divider);
  color: var(--slate);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Styled as a plain text link, not a button, on purpose: it's a quieter
   secondary path and shouldn't visually compete with the real submit
   button above it. Kept as a <button> element (not <a>) since it triggers
   a JS action, not a navigation, that distinction matters for screen
   reader users even though it reads as a link. */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.link-btn:hover,
.link-btn:focus-visible {
  color: var(--teal-hover);
}

/* About — semantic grid instead of consecutive bolded paragraphs */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin: 0;
}

.about-item {
  background: var(--white);
  border: 1px solid var(--soft-divider);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow);
}

.about-item h3 {
  margin: 0 0 0.4rem;
  color: var(--teal);
  font-size: 1.05rem;
}

.about-item p {
  margin: 0;
  color: var(--charcoal);
  font-family: var(--font-serif);
  line-height: 1.6;
}

@media (min-width: 640px) {
  .about-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Donate section */
.donate-card {
  background: var(--forest);
  color: var(--white);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
}
.donate-card p { color: var(--warmwhite); }

footer {
  background: var(--forest);
  color: var(--warmwhite);
  text-align: center;
  padding: 1.5rem 1rem;
  font-size: 0.85rem;
}

footer a { color: var(--mint); }

.made-by {
  display: inline-block;
  margin-top: 1.1rem;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.made-by:hover,
.made-by:focus-visible {
  opacity: 1;
}

.made-by img {
  display: block;
  height: 32px;
  width: auto;
}

.install-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--mint);
  color: var(--forest);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}
.install-banner.visible { display: flex; }
.install-banner button { flex-shrink: 0; }

@media (max-width: 600px) {
  .brand h1 { font-size: 1.25rem; }
  .wotd-word { font-size: 1.6rem; }
}