/* ============================================================
   SUNDROP BEGINNINGS — SEA BREEZE DESIGN SYSTEM
   Centralized tokens: change a value here to restyle the whole site.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Gloock&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Poppins:wght@400;500;600&display=swap');

:root {
  /* -- Color: pulled from the Sea Breeze ebook template -- */
  --teal-deep:      #3f7f78;   /* headline / primary teal */
  --teal:           #6fa39a;   /* mid teal, section bands */
  --teal-soft:      #a9c7c2;   /* soft teal tint */
  --clay:           #c99b7c;   /* terracotta / clay accent */
  --clay-soft:      #e3c4ab;   /* soft clay tint */
  --sand:           #f7f1e8;   /* cream/sand background */
  --sand-deep:      #efe4d4;   /* deeper sand for cards */
  --gold:           #c9a15c;  /* warm gold accent, used sparingly */
  --ink:            #2c3a38;   /* body text, warm near-black */
  --ink-soft:       #5b6b68;   /* secondary text */
  --white:          #ffffff;

  /* -- Digital stage palette (tiles only, for now) -- */
  --stage-start-bg:      #f7f1e8;
  --stage-start-accent:  #c9a15c;
  --stage-choose-bg:     #f6ece3;
  --stage-choose-accent: #c99b7c;
  --stage-create-bg:     #e9f3f3;
  --stage-create-accent: #6fa8ac;
  --stage-launch-bg:     #e8f0ef;
  --stage-launch-accent: #3f7f78;
  --stage-getseen-bg:      #eaeef2;
  --stage-getseen-accent:  #7d94a8;
  --stage-grow-bg:       #eef2ec;
  --stage-grow-accent:   #8ba283;

  /* -- Type -- */
  --font-display: 'Gloock', serif;
  --font-body:    'Lora', serif;
  --font-ui:      'Poppins', sans-serif;

  /* -- Layout -- */
  --max-width: 1120px;
  --radius: 4px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  color: var(--teal-deep);
}

h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 var(--space-2); max-width: 62ch; }

a { color: var(--teal-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--clay);
  font-weight: 600;
  margin: 0 0 var(--space-1);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

section { padding: var(--space-5) 0; }
section.tight { padding: var(--space-4) 0; }

/* ---------- Header / Nav ---------- */
.site-header {
  border-bottom: 1px solid var(--sand-deep);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  max-width: var(--max-width);
  margin: 0 auto;
}
.brand-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--teal-deep);
  white-space: nowrap;
}
.brand span { color: var(--clay); }
.header-flower {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: block;
}
@media (max-width: 760px) {
  .header-flower { display: none; }
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  justify-content: flex-end;
  row-gap: 0.5rem;
  list-style: none;
  margin: 0; padding: 0;
  font-family: var(--font-ui);
  font-size: 0.95rem;
}
.nav-links a { color: var(--ink); }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--teal-deep);
  cursor: pointer;
}

@media (max-width: 760px) {
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--sand-deep);
    display: none;
    gap: var(--space-2);
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--teal-deep); color: var(--white); }
.btn-primary:hover { background: #336a64; }
.btn-secondary { background: transparent; color: var(--teal-deep); border-color: var(--teal-deep); }
.btn-secondary:hover { background: var(--teal-deep); color: var(--white); }
.btn-clay { background: var(--clay); color: var(--white); }
.btn-clay:hover { background: #b6835f; }

/* Placeholder CTA: visibly inert until a real checkout/opt-in URL exists.
   Never styled like a working button — grey, disabled, and labeled. */
.btn-disabled {
  background: #e4e0d8;
  color: #676059;
  border: 1px dashed #b8b0a2;
  cursor: not-allowed;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius);
  min-height: 44px;
}
.btn-disabled:hover { text-decoration: none; }

/* ---------- Hero ---------- */
.hero {
  background: var(--sand);
  padding: var(--space-5) 0;
}
.hero .container { max-width: 780px; text-align: left; }
.hero p.lede { font-size: 1.15rem; color: var(--ink-soft); }
.hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.hero-logo {
  width: 176px;
  height: 176px;
  border-radius: 50%;
  margin-bottom: 1.25rem;
  display: block;
}
@media (max-width: 1024px) {
  .hero-logo { width: 152px; height: 152px; margin-bottom: 1.1rem; }
}
@media (max-width: 760px) {
  .hero-logo { width: 116px; height: 116px; margin-bottom: 0.9rem; }
}

/* Page-scoped two-column hero composition — used only on Home and About.
   Does not alter .hero, .hero-logo, or .hero .container, so every other
   page using those shared rules is unaffected. */
.hero-split {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}
.hero-split-logo {
  flex-shrink: 0;
}
.hero-split-text {
  flex: 1;
  min-width: 0;
}
@media (max-width: 1024px) {
  .hero-split { flex-direction: column; }
}

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}
/* Scoped to the homepage "Five Ways Sundrop Helps" grid only. With five
   cards, .card-grid's own auto-fit columns leave the fifth (Everyday
   Life) card alone at the left edge of row two on desktop. This
   switches just that grid to a centering flex layout at desktop widths
   so a short last row centers itself -- the shared .card-grid rule
   above (used by every other grid on the site) and this grid's own
   mobile stacking are both untouched. Card text alignment is not
   changed here, so text inside the card stays left-aligned. */
@media (min-width: 761px) {
  .five-ways-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
  }
  .five-ways-grid > .card {
    flex: 1 1 240px;
    max-width: calc((100% - 3 * var(--space-3)) / 4);
  }
}
.card {
  border: 1px solid var(--sand-deep);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--white);
}
/* Additive only — bleeds a thumbnail to the card's edges by countering
   the card's own padding, without touching the shared .card rule used
   by ~100 existing plain (imageless) cards sitewide. */
.card-thumb {
  display: block;
  width: calc(100% + 2 * var(--space-3));
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-2);
  border-radius: var(--radius) var(--radius) 0 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* Reel/bundle preview composites are a fixed 4:5 (900x1125) branded
   asset -- a 1:1 crop via .card-thumb would cut off the title/badge.
   This variant bleeds to the card edges at the composite's own ratio
   instead, without altering .card-thumb for the other ~85 products. */
.card-thumb-reel {
  display: block;
  width: calc(100% + 2 * var(--space-3));
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-2);
  border-radius: var(--radius) var(--radius) 0 0;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* One-off, scoped to a single prototype card (Cozy Bookish Vol. 1's
   moving cover). Mirrors .card-thumb's edge-bleed technique but at the
   video's true 4:5 ratio instead of forcing the shared 1:1 crop -- does
   not touch .card-thumb or any other product card. */
/* Non-Reel product/bundle cover art (PDF page-1 extracts, provided
   thumbnails, and spreadsheet previews) is standardized to a 3:4
   portrait ratio distinct from the Reel composites' 4:5 -- "contain"
   rather than "cover" so a cover is NEVER cropped/stretched, since
   these come from real, finalized source documents whose readability
   must be preserved exactly. Scoped to its own class; does not alter
   .card-thumb or .card-thumb-reel for any other product. */
.card-thumb-cover {
  display: block;
  width: calc(100% + 2 * var(--space-3));
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-2);
  border-radius: var(--radius) var(--radius) 0 0;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--sand);
  /* v66: under-filled .card-grid rows (fewer items than fit a full row)
     cause CSS Grid's auto-fit to collapse the empty columns and hand
     their space to the remaining card(s), stretching that card's width
     far past the ~245px reference size -- which this rule's own
     width/aspect-ratio then turns into an oversized image height. This
     cap bounds that height directly (letterboxing via object-fit:
     contain rather than cropping/distorting) without touching
     .card-grid's column logic or any other card's width. A normally
     sized ~245px-wide card renders at ~327px tall already, so this is
     a near no-op there and only constrains the stretched cases. */
  max-height: 320px;
}
/* Compact, non-bleeding cover thumbnail for the two centered
   inline-block CTA-style cards (the Faceless Content "create your
   own" Canva CTA and the Creator Store Canva spotlight) whose custom
   inline padding (1.5rem 2rem) doesn't match the edge-bleed math
   .card-thumb-cover relies on. Scoped to its own class; does not
   alter .card-thumb-cover or redesign either section's layout. */
.card-thumb-cover-compact {
  display: block;
  width: 120px;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--sand);
  border-radius: var(--radius);
  margin: 0 auto var(--space-2);
}
.card-cover-video-wrap {
  position: relative;
  width: calc(100% + 2 * var(--space-3));
  aspect-ratio: 4 / 5;
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-2);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: var(--sand);
}
.card-cover-video-wrap img,
.card-cover-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-cover-video-wrap img { z-index: 2; }
.card-cover-video-wrap video { z-index: 1; }
.card h3 { margin-bottom: 0.4rem; }
/* Additive only — editorial destination banner for the Travel affiliate
   section. Does not touch any shared/global image or card rule. */
.destination-banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.card .meta {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--clay);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.card .price {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--teal-deep);
  margin-top: var(--space-2);
}
.price-intro-label {
  display: block;
  font-size: 0.6em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  opacity: 0.75;
  margin-bottom: 0.2em;
}
.price-was {
  font-size: 0.75em;
  font-weight: 400;
  text-decoration: line-through;
  opacity: 0.6;
  margin-left: 0.3em;
}

/* ---------- Stage strip ---------- */
.stage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--sand-deep);
  border-radius: var(--radius);
  overflow: hidden;
}
.stage-strip a {
  flex: 1 1 150px;
  text-align: center;
  padding: var(--space-2);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink);
  border-right: 1px solid var(--sand-deep);
  background: var(--sand);
}
.stage-strip a:last-child { border-right: none; }
.stage-strip a:hover {
  background: var(--teal-deep);
  color: var(--white);
  text-decoration: none;
}
.stage-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* ---------- Sections with tinted bg ---------- */
.section-sand { background: var(--sand); }
.section-teal { background: var(--teal-deep); color: var(--white); }
.section-teal h2, .section-teal h3 { color: var(--white); }
.section-teal p { color: #e3efed; }

/* ---------- More From Sundrop (quieter) ---------- */
.more-from-sundrop {
  background: var(--sand-deep);
  padding: var(--space-4) 0;
}
.more-from-sundrop h2 { font-size: 1.5rem; }
.mfs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}
.mfs-card {
  background: var(--white);
  padding: var(--space-3);
  border-radius: var(--radius);
}
.mfs-card h3 { font-size: 1.1rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #cfe0dd;
  padding: var(--space-4) 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: 0.9rem;
}
.site-footer a { color: #cfe0dd; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.footer-grid h4 {
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.4rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: var(--space-2);
  font-size: 0.8rem;
  color: #9fb6b2;
}
.footer-flower {
  width: 26px;
  height: 26px;
  vertical-align: middle;
  margin-right: 0.5rem;
}
@media (max-width: 760px) {
  .footer-flower { width: 20px; height: 20px; }
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal-deep);
  margin-bottom: var(--space-1);
}
.badge-clay { background: var(--clay-soft); color: #7a4c30; }
.placeholder-note {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--clay);
  background: #fbf0e6;
  border: 1px dashed var(--clay);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  margin: var(--space-2) 0;
}

.two-col {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 760px) {
  .two-col { grid-template-columns: 1fr; }
  .two-col aside.card { position: static; }
}

.divider {
  border: none;
  border-top: 1px solid var(--sand-deep);
  margin: var(--space-4) 0;
}

.faq-item { border-bottom: 1px solid var(--sand-deep); padding: var(--space-2) 0; }
.faq-item summary { font-family: var(--font-ui); font-weight: 500; cursor: pointer; color: var(--teal-deep); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================
   FREE RESOURCES — permanent anchors + search
   Scoped to the Free Resources page (data-resource-card /
   .fr-* classes only). Nothing here changes cards elsewhere.
   ============================================================ */

/* Anchored cards land below the sticky header. JS sets
   --fr-anchor-offset to the real header height; 7rem is the fallback. */
[data-resource-card] { scroll-margin-top: var(--fr-anchor-offset, 7rem); }

/* Search hides cards/stages with a class, never by rebuilding them. */
.fr-hidden { display: none !important; }
/* .btn sets display:inline-block, which would override the hidden
   attribute — keep hidden search parts genuinely hidden. */
[data-fr-search][hidden],
.fr-search [hidden] { display: none !important; }

.fr-search-section { padding-bottom: 0; }

.fr-search {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-3);
  background: var(--sand);
  border: 1px solid var(--sand-deep);
  border-radius: var(--radius);
}

.fr-search-label {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--teal-deep);
  margin-bottom: 0.35rem;
}

.fr-search-help {
  margin: 0 0 var(--space-2);
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.fr-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.fr-search-input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;              /* 16px keeps iOS from zooming on focus */
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--teal-soft);
  border-radius: var(--radius);
}
.fr-search-input::placeholder { color: var(--ink-soft); opacity: 1; }
.fr-search-input:focus-visible,
.fr-search-clear:focus-visible,
.fr-no-results .btn:focus-visible {
  outline: 2px solid var(--teal-deep);
  outline-offset: 2px;
}

.fr-search-clear { flex: 0 0 auto; }

.fr-search-status {
  margin: 0.6rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.fr-search-status:empty { display: none; }

.fr-no-results {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--sand-deep);
}
.fr-no-results p { margin: 0 0 0.6rem; }
.fr-no-results-title { font-weight: 600; color: var(--ink); }

@media (max-width: 760px) {
  .fr-search { padding: var(--space-2); }
  .fr-search-clear { flex: 1 1 100%; }
}

/* Anchored card highlight — marks which card a /free-resources/#anchor
   link pointed to. Outline + shadow only, so the card never changes size
   or position. Fades back to normal when the class is removed. */
[data-resource-card] {
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color 1.2s ease, box-shadow 1.2s ease;
}
[data-resource-card].fr-anchor-highlight {
  transition: none;             /* appears at once; only the return fades */
  outline-color: var(--teal-deep);
  box-shadow: 0 0 0 6px rgba(63, 127, 120, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  [data-resource-card] { transition: none; }
}