/* ============================================================
   Scavenger Quest — shared site styles
   Light sea-blue direction, taken directly from the app:
     #45A0CE → #4DBED2  pill gradient (hunts_dashboard.dart)
     #4B9293 @ 50%      the teal-tinted card shadow
     #EFF8FC / #F5F8FA  pale surfaces
     #2A2A2A            body ink
     #FF9100            the one warm accent, reserved for reward
   Committed to a single bright world — the app has no dark mode
   on these screens — so every colour is painted explicitly.

   Everything every page needs lives here: reset, tokens, type,
   buttons, nav, bands, footer. Page sheets add only their own parts.
   ============================================================ */

/* baseline reset. The [hidden] rule is load-bearing: several panels set
   display:flex on a class and rely on it to stay hidden. */
*, *::before, *::after{ box-sizing: border-box; }
html{ color-scheme: light; }
body{ margin: 0; }
img{ max-width: 100%; }
[hidden]{ display: none !important; }

:root{
  --ground:     #EFF8FC;
  --ground-2:   #F5F8FA;
  --surface:    #FFFFFF;

  --sea:        #45A0CE;
  --sea-deep:   #2E7FA8;
  --aqua:       #4DBED2;
  --teal:       #60BEC0;
  --teal-deep:  #4B9293;

  --ink:        #2A2A2A;
  --ink-2:      #5A6B78;
  --ink-3:      #93A7B4;
  --night:      #1D3A4A;   /* deep scrim behind photography */

  --line:       #DBEAF3;
  --line-soft:  #E9F3F8;

  /* the treasure colour — used sparingly, never for structure */
  --sun:        #FF9100;
  --sun-deep:   #D97400;
  --sun-soft:   #FFF4E6;

  /* semantic, for success states only */
  --ok:         #1F9D74;
  --ok-soft:    #E4F6EF;

  /* difficulty, matched to the app's green / orange / red */
  --t-easy:     #1F9D74;
  --t-medium:   #D97400;
  --t-hard:     #C4472F;

  /* the app's signature: white cards on a teal-tinted shadow */
  --lift:       0 26px 22px -14px rgba(75,146,147,.30);
  --lift-sm:    0 14px 16px -12px rgba(75,146,147,.26);

  --measure: 1180px;
  --r-card: 20px;
  --r-sm: 12px;

  --f-display: "Platypi", Georgia, "Times New Roman", serif;
  --f-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* label / data role — same family as body, separated by case, tracking and weight */
  --f-label: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  color-scheme: light;
}

body{
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sky{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 78% -10%, rgba(77,190,210,.20), transparent 64%),
    radial-gradient(700px 460px at 6% 4%,   rgba(69,160,206,.13), transparent 62%);
}
.page{ position: relative; z-index: 1; }

.wrap{
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 28px;
}

/* ---------- type ---------- */

.eyebrow{
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 600;        /* Nunito needs the weight to carry wide tracking at 11px */
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sea-deep);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content: "";
  width: 20px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sea), var(--aqua));
  flex: none;
}
/* for eyebrows sitting on photography or a sea-blue band */
.eyebrow-light{ color: #CFEFF6; }
.eyebrow-light::before{ background: linear-gradient(90deg, #BFE9F3, #FFFFFF); }

h1, h2, h3{
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--ink);
  margin: 0;
}
h1{ font-size: clamp(42px, 5.9vw, 72px); font-weight: 800; }
h2{ font-size: clamp(30px, 3.7vw, 44px); }
h3{ font-size: 20px; line-height: 1.24; letter-spacing: -0.005em; }

p{ margin: 0; }

/* ---------- controls ---------- */

.btn{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 999px;              /* the app's StadiumBorder */
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn-primary{
  background: linear-gradient(100deg, var(--sea), var(--aqua));
  color: #FFFFFF;
  box-shadow: 0 12px 22px -10px rgba(69,160,206,.85);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 28px -12px rgba(69,160,206,.9); }
.btn-ghost{
  background: var(--surface);
  color: var(--sea-deep);
  border-color: var(--line);
  box-shadow: var(--lift-sm);
}
.btn-ghost:hover{ transform: translateY(-2px); border-color: var(--sea); }
/* on photography */
.btn-glass{
  background: rgba(255,255,255,.14);
  color: #FFFFFF;
  border-color: rgba(255,255,255,.42);
  backdrop-filter: blur(6px);
}
.btn-glass:hover{ transform: translateY(-2px); background: rgba(255,255,255,.22); }
/* on a sea-blue band */
.btn-light{ background: #FFFFFF; color: var(--sea-deep); box-shadow: var(--lift-sm); }
.btn-light:hover{ transform: translateY(-2px); }
.btn svg{ flex: none; }

:focus-visible{
  outline: 3px solid var(--sea);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- nav ---------- */

.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
}
.nav-links{ display: flex; align-items: center; gap: 28px; }
.nav-links a{
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
}
.nav-links a:hover{ color: var(--sea-deep); }

/* ---------- bands ---------- */

.band{ padding-block: clamp(56px, 7vw, 92px); }
.band-head{ max-width: 60ch; margin-bottom: 40px; }
.band-head p{ margin-top: 14px; color: var(--ink-2); font-size: 17px; }

/* ---------- footer ---------- */

.foot{
  padding-block: 40px 20px;
  display: flex; flex-wrap: wrap; gap: 22px;
  align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line);
}
.foot .brand{ font-size: 17px; }
.foot-links{ display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a{ color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 600; }
.foot-links a:hover{ color: var(--sea-deep); }
.fineprint{ padding-bottom: 44px; }
.fineprint p{
  font-family: var(--f-label); font-size: 11px; font-weight: 600; color: var(--ink-3);
  letter-spacing: .03em; line-height: 1.7; max-width: 84ch;
}

/* ---------- responsive ---------- */

@media (max-width: 960px){
  .nav-links a:not(.hl){ display: none; }
}
@media (max-width: 560px){
  .wrap{ padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}