/* ==========================================================================
   WordSearchSpot.com — Design tokens
   Cozy / Bold & Easy: thick hand-set outlines, warm paper background,
   pastel sage / honey / sky accents, high-contrast ink text.
   ========================================================================== */

:root {
  --paper: #FFFCF4;
  --paper-dim: #FBF6E9;
  --ink: #2B2A26;
  --ink-soft: #55524A;
  --sage: #7FA593;
  --sage-deep: #4F7A67;
  --honey: #EFB53E;
  --honey-deep: #C98A1B;
  --sky: #7FB3D5;
  --sky-deep: #3E7FA6;
  --line: #2B2A26;
  --radius-card: 1.5rem;
  --shadow-offset: 6px 6px 0px var(--ink);
  --shadow-offset-sm: 4px 4px 0px var(--ink);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3, h4, .display {
  font-family: 'Baloo 2', ui-rounded, system-ui, sans-serif;
  letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--sky-deep);
  outline-offset: 2px;
}

/* ---- Signature element: the "circled word" ----
   A hand-drawn-looking loop around a keyword, echoing the moment
   you circle a found word in a word search. Used sparingly. */
.circled {
  position: relative;
  display: inline-block;
  padding: 0.05em 0.35em 0.12em;
  border: 3px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  transform: rotate(-1.5deg);
}
.circled.sage { border-color: var(--sage-deep); }
.circled.honey { border-color: var(--honey-deep); }
.circled.sky { border-color: var(--sky-deep); }

/* Hero background photo: cozy/niche image + warm tint so the floating
   text card (.bold-card) always reads clearly on top of it. */
.hero-photo {
  background-image:
    linear-gradient(180deg, rgba(255,252,244,0.35), rgba(255,252,244,0.55)),
    url('hero-bg.jpg');
  background-size: cover;
  background-position: center;
  min-height: 26rem;
}

/* Faint letter-grid texture used as background atmosphere (never literal puzzle art) */
.letter-grid-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.letter-grid-bg span {
  position: absolute;
  font-family: 'Baloo 2', sans-serif;
  color: var(--ink);
  opacity: 0.05;
  font-size: 2.25rem;
  font-weight: 700;
}

/* Bold & Easy card: thick outline, no shadow */
.bold-card {
  background: #fff;
  border: 3px solid var(--line);
  border-radius: var(--radius-card);
  transition: border-color 0.15s ease;
}
.bold-card:hover {
  border-color: var(--ink);
}
.bold-card.no-shadow,
.bold-card.no-shadow:hover {
  box-shadow: none;
  transform: none;
}

.btn-bold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  transition: opacity 0.15s ease;
}
.btn-bold:hover {
  opacity: 0.85;
}
.btn-bold:active {
  opacity: 0.7;
}

.btn-honey { background: var(--honey); color: var(--ink); }
.btn-sage  { background: var(--sage);  color: var(--ink); }
.btn-sky   { background: var(--sky);   color: var(--ink); }
.btn-ink   { background: var(--ink);   color: var(--paper); }

/* AdSense placeholder blocks — clearly labelled, dashed to distinguish
   from real content while designing/reviewing */
.ad-slot {
  border: 2px dashed var(--ink-soft);
  border-radius: 0.75rem;
  background: repeating-linear-gradient(
    135deg, var(--paper-dim), var(--paper-dim) 10px, #F3EEDF 10px, #F3EEDF 20px
  );
  color: var(--ink-soft);
  font-family: 'Work Sans', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}

/* Rich text descriptions (written via the admin's Quill editor).
   Quill's own stylesheet only loads in /admin — these rules mirror
   just enough of it so the same formatting renders on the public site. */
.rich-text p { margin-bottom: 0.75em; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text strong, .rich-text b { font-weight: 700; }
.rich-text em, .rich-text i { font-style: italic; }
.rich-text u { text-decoration: underline; }
.rich-text ol, .rich-text ul { margin: 0.5em 0 0.75em 1.5em; }
.rich-text ol { list-style: decimal; }
.rich-text ul { list-style: disc; }
.rich-text .ql-size-small { font-size: 0.75em; }
.rich-text .ql-size-large { font-size: 1.5em; }
.rich-text .ql-size-huge { font-size: 2em; }
.rich-text a {
  color: var(--sky-deep);
  text-decoration: underline;
  font-weight: 600;
}
.rich-text a:hover {
  color: var(--honey-deep);
}

/* Rich text editor (admin only) — gives Quill the same thick-border
   look as the rest of the form, and fixes its toolbar dropdowns
   (size, etc.) floating over fields below with no spacing/z-index. */
.rich-editor-wrap {
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
.rich-editor-wrap .ql-toolbar.ql-snow {
  border: 3px solid var(--ink);
  border-bottom: none;
  border-radius: 1rem 1rem 0 0;
  background: var(--paper-dim);
}
.rich-editor-wrap .ql-container.ql-snow {
  border: 3px solid var(--ink);
  border-radius: 0 0 1rem 1rem;
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
}
.rich-editor-wrap .ql-editor {
  min-height: 140px;
  max-height: 320px;
  overflow-y: auto;
}
.rich-editor-wrap .ql-picker-options {
  z-index: 20;
  background: #fff;
  border: 2px solid var(--ink) !important;
}
.rich-editor-wrap .ql-tooltip {
  z-index: 20;
}

/* Star rating: base layer is dim/empty stars, ::before overlay is clipped
   to --star-fill so a 4.4 rating colors the 5th star ~40% of the way,
   not just full/half/empty. */
/* FAQ accordion: hide Safari's default disclosure triangle so only
   the custom + icon shows */
summary::-webkit-details-marker {
  display: none;
}

.star-rating {
  position: relative;
  display: inline-block;
  color: rgba(43, 42, 38, 0.2);
  line-height: 1;
}
.star-rating::before {
  content: '★★★★★';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--star-fill, 0%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--honey);
}

/* Cookie consent banner */
#cookie-banner {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 100;
  max-width: 56rem;
  margin: 0 auto;
  transform: translateY(150%);
  transition: transform 0.35s ease;
}
#cookie-banner.is-visible { transform: translateY(0); }

/* Mobile nav */
#mobile-menu { display: none; }
#mobile-menu.is-open { display: block; }