/* ============================================================
   Your Travel Nanny — landing page styles
   Palette sampled from client's banner + flyer artwork.
   ============================================================ */

:root {
  /* Brand palette */
  --sage:        #7C8C6A;
  --sage-dark:   #667556;
  --forest:      #4F6141;
  --navy:        #1D2B45;
  --navy-soft:   #3A4A63;
  --cream:       #FDF6EE;
  --cream-deep:  #F3E9DC;
  --blush:       #E4D9CE;
  --tan:         #A98B6B;   /* decorative: borders, rules */
  --tan-text:    #7F6244;   /* text-safe tan (AA on cream & white) */
  --white:       #FFFFFF;

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-script:  'Parisienne', cursive;
  --font-body:    'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rhythm */
  --measure: 1140px;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(3.5rem, 9vw, 7rem);
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

/* This design commits to a single light identity — it's the brand.
   Declaring it keeps native widgets (date pickers, selects, scrollbars)
   light too, instead of following a viewer's dark OS setting and
   opening dark panels over the cream form. */
:root { color-scheme: light; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

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

/* Skip link for keyboard users */
.skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: var(--cream);
  padding: .75rem 1.25rem; z-index: 200;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Type ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--forest);
}
h1 { font-size: clamp(2.5rem, 6.5vw, 4.25rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.2rem; font-family: var(--font-body); font-weight: 700;
     letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }

.script { font-family: var(--font-script); font-weight: 400;
          color: var(--sage-dark); text-transform: none; letter-spacing: 0; }

.eyebrow {
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sage-dark); font-weight: 700; margin: 0 0 1rem;
}

.lede { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--navy-soft); max-width: 62ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 1.05rem 2.4rem;
  border: 1px solid var(--sage-dark);
  border-radius: var(--radius);
  background: var(--sage-dark); color: var(--cream);
  text-decoration: none; cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover { background: var(--forest); border-color: var(--forest); transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--tan); outline-offset: 3px; }
.btn--ghost { background: transparent; color: var(--forest); }
.btn--ghost:hover { background: var(--sage-dark); color: var(--cream); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253, 246, 238, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--blush);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .9rem;
}
.brand { text-decoration: none; line-height: 1; display: block; }
.brand__top {
  display: block; font-family: var(--font-display);
  font-size: clamp(.95rem, 2vw, 1.15rem); letter-spacing: .3em;
  text-transform: uppercase; color: var(--navy);
}
.brand__script {
  display: block; font-family: var(--font-script);
  font-size: clamp(1.5rem, 3.5vw, 2rem); color: var(--sage-dark);
  margin-top: -.15em;
}
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.site-nav a {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--navy); text-decoration: none;
  padding-block: .35rem; border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--sage); }
.site-nav a.btn { color: var(--cream); border-bottom: 1px solid var(--sage-dark);
                   padding: .8rem 1.5rem; white-space: nowrap; }
/* Ghost variant must win over the filled nav-button colour above,
   or its label renders cream-on-cream and disappears. */
.site-nav a.btn--ghost { color: var(--forest); border-bottom-color: var(--sage-dark); }
.site-nav a.btn--ghost:hover { color: var(--cream); }
.site-nav a.btn:hover { color: var(--cream); }
@media (max-width: 760px) {
  .site-nav .nav-link { display: none; }
  .site-nav a.btn { padding: .75rem 1.15rem; font-size: .72rem; letter-spacing: .1em; }
}
/* Below ~330px (older small phones, heavy browser zoom) the wordmark and the
   CTA stop fitting side by side. Tighten both rather than let the page
   scroll sideways. */
@media (max-width: 350px) {
  .site-header .wrap { gap: .75rem; }
  .brand { gap: .5rem; }
  .logo-badge { width: 38px; height: 38px; }
  .brand__top { font-size: .82rem; letter-spacing: .2em; }
  .brand__script { font-size: 1.3rem; }
  .site-nav a.btn { padding: .7rem .85rem; font-size: .66rem; letter-spacing: .08em; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 90% 55% at 50% 100%, rgba(124,140,106,.10), transparent 70%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream) 55%, var(--cream-deep) 100%);
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}
.hero__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.15fr .85fr; } }

.hero h1 .script { display: block; font-size: 1.15em; margin-top: .05em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }

.hero__note {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--blush);
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sage-dark); font-weight: 700;
}

/* Decorative type-and-icon panel (no photography) */
.hero__card {
  background: var(--white);
  border: 1px solid var(--blush);
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 2.75rem);
  box-shadow: 0 24px 60px -34px rgba(29,43,69,.4);
  text-align: center;
}
.hero__card .mark { color: var(--sage); margin-inline: auto; }
.hero__card p {
  font-family: var(--font-display); font-size: 1.5rem;
  font-style: italic; color: var(--forest);
  line-height: 1.35; margin: 1.5rem 0 0;
}
.hero__card .rule {
  width: 48px; height: 1px; background: var(--tan);
  margin: 1.5rem auto 0; border: 0;
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
/* Clear the sticky header when jumping to an in-page anchor */
section[id] { scroll-margin-top: 88px; }
.section--alt { background: var(--white); border-block: 1px solid var(--blush); }
.section--sage { background: var(--forest); color: var(--cream); }
.section--sage h2, .section--sage h3 { color: var(--cream); }
/* Sage-dark script is illegible on the forest ground — lift it */
.section--sage .script { color: var(--blush); }
.section--sage .eyebrow { color: var(--blush); }

.section__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }

/* ---------- About ---------- */
.about__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .about__grid { grid-template-columns: .8fr 1.2fr; align-items: start; } }

.about__aside {
  background: var(--white); border: 1px solid var(--blush);
  border-left: 3px solid var(--sage); border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.25rem);
}
.about__aside dl { margin: 0; }
.about__aside dt {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sage-dark); font-weight: 700; margin-top: 1.5rem;
}
.about__aside dt:first-child { margin-top: 0; }
.about__aside dd { margin: .35rem 0 0; font-size: 1rem; color: var(--navy); }


/* ---------- Services ---------- */
.cards { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
         grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.card {
  background: var(--white); border: 1px solid var(--blush);
  border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.25rem);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-3px); border-color: var(--sage);
  box-shadow: 0 20px 44px -30px rgba(29,43,69,.45);
}
.card .mark { color: var(--sage-dark); margin-bottom: 1.25rem; }
.card h3 { margin-bottom: .5rem; }
.card p { margin: 0; color: var(--navy-soft); }

/* ---------- Not included ---------- */
.excluded { display: grid; gap: .85rem 2rem;
            grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
            list-style: none; padding: 0; margin: 0; }
.excluded li {
  position: relative; padding-left: 2rem;
  color: rgba(253,246,238,.88);
}
.excluded li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 12px; height: 1px; background: var(--blush);
}
.section--sage .footnote {
  margin-top: 2.5rem; font-size: .95rem;
  color: rgba(253,246,238,.82); max-width: 62ch;
}

/* ---------- Values / faith ---------- */
.values { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
          grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
          text-align: center; }
.values .mark { color: var(--sage-dark); margin-inline: auto; margin-bottom: 1rem; }
.values h3 { font-size: .82rem; }
.values p { margin: .35rem 0 0; font-size: .98rem; color: var(--navy-soft); }

/* ---------- Form ---------- */
.apply__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 980px) { .apply__grid { grid-template-columns: .75fr 1.25fr; align-items: start; } }

.apply__intro ol { padding-left: 0; list-style: none; margin: 2rem 0 0; counter-reset: step; }
.apply__intro li {
  counter-increment: step; position: relative;
  padding-left: 3rem; margin-bottom: 1.75rem;
}
.apply__intro li::before {
  content: counter(step); position: absolute; left: 0; top: -.1em;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--sage-dark); color: var(--cream);
  display: grid; place-items: center;
  font-size: .85rem; font-weight: 700;
}
.apply__intro li strong { display: block; color: var(--navy); }
.apply__intro li span { color: var(--navy-soft); font-size: .95rem; }

.form-card {
  background: var(--white); border: 1px solid var(--blush);
  border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: 0 24px 60px -40px rgba(29,43,69,.4);
}
.field-row { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }

.field { margin-bottom: 1.25rem; }
.field label, .fieldset legend {
  display: block; font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); margin-bottom: .5rem;
}
.field .hint { display: block; font-size: .85rem; color: var(--navy-soft);
               letter-spacing: 0; text-transform: none; font-weight: 400; margin-top: .2rem; }
.req { color: var(--tan-text); }

.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  color: var(--navy); background: var(--cream);
  border: 1px solid var(--blush); border-radius: var(--radius);
  padding: .85rem 1rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(124,140,106,.22);
}
/* Error styling only after a submit attempt — otherwise empty required
   fields (date inputs especially) render red before the user has typed. */
.was-validated .field input:invalid,
.was-validated .field select:invalid,
.was-validated .field textarea:invalid { border-color: #B4634F; background: rgba(180,99,79,.05); }

.fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.checks { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.check { display: flex; align-items: flex-start; gap: .6rem;
         font-size: .95rem; color: var(--navy-soft); cursor: pointer; }
.check input { width: auto; accent-color: var(--sage-dark); margin-top: .35rem; flex: none; }

.form-footer { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--blush); }
.form-footer .btn { width: 100%; }
.privacy { font-size: .85rem; color: var(--navy-soft); margin: 1rem 0 0; text-align: center; }

/* Honeypot — hidden from humans, catches bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--radius);
               font-size: .95rem; display: none; }
.form-status[data-state="ok"]   { display: block; background: rgba(124,140,106,.15);
                                  border: 1px solid var(--sage); color: var(--forest); }
.form-status[data-state="err"]  { display: block; background: rgba(180,99,79,.1);
                                  border: 1px solid #B4634F; color: #8A4636; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy); color: rgba(253,246,238,.75);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.site-footer .brand__top { color: var(--cream); }
.site-footer .brand__script { color: var(--blush); }
.footer__grid { display: grid; gap: 2.5rem;
                grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.site-footer h3 { color: var(--blush); font-size: .74rem; margin-bottom: 1rem; }
.site-footer a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(228,217,206,.3); }
.site-footer a:hover { border-bottom-color: var(--blush); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .6rem; }
.footer__tag { font-family: var(--font-script); font-size: 1.5rem; color: var(--blush); margin: 1rem 0 0; }
.footer__bottom {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(228,217,206,.2);
  font-size: .82rem; display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between;
}

/* ============================================================
   Brand assets — banner, logo badge, profile photo slot
   ============================================================ */

/* Circular logo badge, CSS-cropped from the square logo render so
   the suitcase mockup in the corner is excluded. Lossless — adjust
   background-position/size if the source art is ever re-exported. */
.logo-badge {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background-image: url('assets/ytn-logo.jpg');
  background-size: 144%;
  background-position: 49.2% 22.9%;
  background-repeat: no-repeat;
  background-color: #FAF4ED;
}
.brand { display: flex; align-items: center; gap: .85rem; }
.site-footer .logo-badge { width: 64px; height: 64px; }

/* Hero banner lockup */
.hero__banner {
  max-width: 900px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.hero__banner img { width: 100%; }
.hero--banner { text-align: center; }
.hero--banner .lede { margin-inline: auto; }
.hero--banner .hero__actions { justify-content: center; }
.hero--banner .hero__note { max-width: 46ch; margin-inline: auto; }

/* Profile photo slot — swap the placeholder div for an <img> when
   Rachele's headshot arrives. Sized 1:1; a 800x800 crop works well. */
.portrait {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream-deep);
  border: 1px solid var(--blush);
  margin-bottom: 2rem;
}
/* The headshot is portrait-orientation, so a centred square crop would cut off
   the top of her head. Bias the crop upward to keep the face framed with
   headroom inside the circle.
   Tuned for the current 700x1146 photo — RE-CHECK this value whenever the
   photo is replaced, since it depends entirely on where the face sits. */
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
/* Shown only when the headshot file is absent */
.portrait__fallback {
  width: 100%; height: 100%;
  display: grid; place-content: center; text-align: center;
  gap: .5rem; padding: 1.5rem;
  border: 2px dashed var(--tan);
  border-radius: 50%;
  background: rgba(169,139,107,.07);
}
.portrait__fallback[hidden] { display: none; }
.portrait__fallback .mark { color: var(--tan-text); margin-inline: auto; }
.portrait__fallback span {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tan-text); font-weight: 700; line-height: 1.5;
}


.prose p { margin: 0 0 1.35em; }
.prose p:last-child { margin-bottom: 0; }
.prose .intro {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.4; color: var(--forest);
}

/* ============================================================
   Review consent block (share-your-experience page)
   ============================================================ */
.consent {
  background: rgba(124,140,106,.08);
  border: 1px solid rgba(124,140,106,.28);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
}
.consent legend {
  padding: 0 .5rem;
  margin-left: -.5rem;
}
.consent .check { align-items: flex-start; color: var(--navy); }
.consent .hint {
  display: block; font-size: .85rem; color: var(--navy-soft);
  letter-spacing: 0; text-transform: none; font-weight: 400;
}
.consent .hint strong { color: var(--forest); }

/* ============================================================
   Testimonials
   ============================================================ */
.quotes {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.quote {
  background: var(--white);
  border: 1px solid var(--blush);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: 1.25rem;
}
.quote__mark {
  font-family: var(--font-display);
  font-size: 3.5rem; line-height: .6;
  color: var(--sage); opacity: .5;
  height: 1.4rem;
}
.quote blockquote {
  margin: 0; flex: 1;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.55; color: var(--navy);
}
.quote figcaption {
  border-top: 1px solid var(--blush);
  padding-top: 1rem;
  font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700;
  color: var(--sage-dark);
}
.quote figcaption span {
  display: block; margin-top: .3rem;
  letter-spacing: .04em; text-transform: none;
  font-weight: 400; color: var(--navy-soft);
}

/* Where else to find reviews */
.review-links {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: center; margin-top: clamp(2.5rem, 5vw, 3.5rem);
}