/* ─────────────────────────────────────────────────────────────────────────
   EverStay — main.css

   Loaded by templates/partials/head.php on every page.

   The :root brand tokens below are verified against BRAND.md §5–7 and
   should match the current live index.html. The COMPONENT CSS (nav, hero,
   audience cards, spectrum, featured property, footer, forms, etc.) needs
   to be extracted from the current index.html <style> block during the
   chassis bootstrap session — see TODO note below.

   ─── BOOTSTRAP SESSION TODO (Claude Code) ────────────────────────────────
   The current /home/intlogio/public_html/everstay.io/index.html contains
   all CSS inline in a single <style> block.

   1. Read the current index.html.
   2. Extract everything inside <style>...</style>.
   3. Replace the placeholder section at the bottom of this file with the
      extracted CSS.
   4. Verify the :root block in the extracted CSS matches the tokens already
      declared below; if it matches, delete the duplicate :root from the
      extracted block. If it differs, FLAG the discrepancy to Ryan rather
      than silently overwriting either side — BRAND.md is the source of
      truth per AI Rule 8 / D17.
   5. Remove the <style> block from templates/home/index.php during the
      migration (it's now centralized here).
   ───────────────────────────────────────────────────────────────────────── */


/* ─── Brand tokens (verified, BRAND.md §5–7) ───────────────────────────── */
:root {
    /* Colors */
    --pine:       #114B3F;
    --pine-deep: #0B352D;
    --pine-tint: #EAF2EE;
    --sage:      #F4F7F5;
    --ink:       #1C2420;
    --ink-soft:  #54635C;
    --line:      #DCE5E0;
    --amber:     #D99A3D;
    --white:     #FFFFFF;

    /* Typography */
    --display: 'Bricolage Grotesque', system-ui, sans-serif;
    --body:    'Public Sans',         system-ui, sans-serif;

    /* Structural */
    --radius: 14px;
}


/* ─── Reset + base ─────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--body);
    color: var(--ink);
    background: var(--white);
    line-height: 1.5;
    font-weight: 400;
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}


/* ─── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ─── COMPONENT CSS — migrated from live index.html <style> (P1-30) ─────────
   Extracted verbatim from the inline <style> block. The duplicate :root token
   block was removed (it matched the brand tokens above exactly). The reset/base
   rules below intentionally re-state and win over the chassis base via cascade
   order, reproducing the live render faithfully. */

  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
  }
  body{
    font-family:var(--body);
    color:var(--ink);
    background:var(--white);
    line-height:1.65;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block}
  a{color:var(--pine)}
  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
    outline:3px solid var(--amber);outline-offset:2px;border-radius:4px;
  }
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;letter-spacing:-0.01em}
  h2{font-size:clamp(26px,3.4vw,34px);margin-bottom:12px}
  .kicker{
    font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--pine);margin-bottom:10px;
  }
  .lede{color:var(--ink-soft);font-size:17px;max-width:60ch}
  section{padding:72px 0}
  .btn{
    display:inline-block;font-family:var(--body);font-weight:600;font-size:15px;
    padding:13px 26px;border-radius:999px;border:2px solid var(--pine);
    cursor:pointer;text-decoration:none;transition:background .15s,color .15s,transform .1s;
  }
  .btn:active{transform:scale(.98)}
  .btn-solid{background:var(--pine);color:#fff}
  .btn-solid:hover{background:var(--pine-deep);border-color:var(--pine-deep)}
  .btn-ghost{background:transparent;color:var(--pine)}
  .btn-ghost:hover{background:var(--pine-tint)}

  /* ---------- Header ---------- */
  header{
    position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:68px}
  .brand{
    font-family:var(--display);font-weight:600;font-size:21px;color:var(--ink);
    text-decoration:none;display:flex;align-items:center;gap:9px;
  }
  .brand-mark{
    width:30px;height:30px;border-radius:9px;background:var(--pine);
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .brand-mark svg{width:16px;height:16px}
  .nav-links{display:flex;align-items:center;gap:26px;list-style:none}
  .nav-links a{
    text-decoration:none;color:var(--ink-soft);font-size:15px;font-weight:500;
  }
  .nav-links a:hover{color:var(--pine)}
  .nav-phone{
    background:var(--pine-tint);color:var(--pine-deep);font-weight:600;font-size:14px;
    padding:8px 16px;border-radius:999px;text-decoration:none;white-space:nowrap;
  }
  @media (max-width:760px){
    .nav-links li.hide-m{display:none}
  }

  /* ---------- Hero ---------- */
  .hero{padding:84px 0 64px}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .hero h1{font-size:clamp(34px,5vw,52px);margin-bottom:18px}
  .hero h1 em{font-style:normal;color:var(--pine)}
  .hero .lede{margin-bottom:28px}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
  .hero-photo{
    aspect-ratio:4/3.2;border-radius:var(--radius);background:var(--sage);
    border:2px dashed var(--line);display:flex;flex-direction:column;gap:8px;
    align-items:center;justify-content:center;color:var(--ink-soft);font-size:14px;text-align:center;padding:20px;
  }
  .hero-photo strong{font-weight:600;color:var(--ink)}
  @media (max-width:860px){
    .hero{padding:56px 0 48px}
    .hero-grid{grid-template-columns:1fr;gap:36px}
  }

  /* ---------- Signature: stay spectrum ---------- */
  .spectrum{margin-top:48px}
  .spectrum-label{
    font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:14px;
  }
  .spectrum-bar{
    position:relative;height:14px;border-radius:999px;background:var(--sage);
    border:1px solid var(--line);
  }
  .spectrum-zone{
    position:absolute;left:22%;width:50%;top:-1px;bottom:-1px;border-radius:999px;
    background:var(--pine);
  }
  .spectrum-zone::after{
    content:"";position:absolute;inset:3px;border-radius:999px;
    background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(255,255,255,.14) 6px 12px);
  }
  .spectrum-ticks{
    display:flex;justify-content:space-between;margin-top:10px;
    font-size:13px;color:var(--ink-soft);
  }
  .spectrum-callout{
    position:absolute;left:47%;top:-44px;transform:translateX(-50%);
    background:var(--amber);color:#3A2708;font-weight:600;font-size:13px;
    padding:6px 14px;border-radius:999px;white-space:nowrap;
  }
  .spectrum-callout::after{
    content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
    border:6px solid transparent;border-top-color:var(--amber);border-bottom:0;
  }
  @media (max-width:560px){
    .spectrum-callout{font-size:12px;padding:5px 10px}
  }

  /* ---------- Audience cards ---------- */
  .band{background:var(--sage)}
  .cards{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;margin-top:36px;
  }
  .card{
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
    padding:26px 24px;
  }
  .card .icon{
    width:42px;height:42px;border-radius:12px;background:var(--pine-tint);
    display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  }
  .card .icon svg{width:22px;height:22px;stroke:var(--pine)}
  .card h3{font-size:18px;margin-bottom:6px}
  .card p{font-size:14.5px;color:var(--ink-soft)}

  /* ---------- Included ---------- */
  .included-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:12px 32px;margin-top:32px;
  }
  .inc{
    display:flex;gap:12px;align-items:flex-start;font-size:15.5px;
  }
  .inc svg{width:20px;height:20px;flex-shrink:0;stroke:var(--pine);margin-top:3px}
  .inc strong{display:block;font-weight:600}
  .inc span{color:var(--ink-soft);font-size:14px}

  /* ---------- Property ---------- */
  .prop-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .prop-soon{font-size:14px;color:var(--ink-soft)}
  .prop{
    margin-top:32px;display:grid;grid-template-columns:1.1fr 1fr;
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white);
  }
  .prop-photo{
    background:var(--sage);min-height:320px;border-right:1px solid var(--line);
    display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;
    color:var(--ink-soft);font-size:14px;text-align:center;padding:20px;
  }
  .prop-body{padding:32px}
  .badge{
    display:inline-block;background:var(--pine-tint);color:var(--pine-deep);
    font-size:12.5px;font-weight:600;padding:5px 14px;border-radius:999px;margin-bottom:14px;
  }
  .prop-body h3{font-size:23px;margin-bottom:6px}
  .prop-meta{color:var(--ink-soft);font-size:15px;margin-bottom:18px}
  .prop-price{font-family:var(--display);font-size:30px;font-weight:600;margin-bottom:4px}
  .prop-price span{font-family:var(--body);font-size:14px;font-weight:500;color:var(--ink-soft)}
  .prop-note{font-size:13.5px;color:var(--ink-soft);margin-bottom:22px}
  @media (max-width:820px){
    .prop{grid-template-columns:1fr}
    .prop-photo{min-height:220px;border-right:none;border-bottom:1px solid var(--line)}
  }
  .property-photo-grid{
    display:grid;
    gap:4px;
    margin-bottom:1.5rem;
    border-radius:10px;
    overflow:hidden;
  }
  .property-photo-grid > img{
    width:100%;
    height:280px;
    object-fit:cover;
    display:block;
  }
  .property-photo-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
  }
  .property-photo-strip img{
    width:100%;
    height:150px;
    object-fit:cover;
    display:block;
  }
  @media (max-width:600px){
    .property-photo-grid > img{height:220px}
    .property-photo-strip img{height:110px}
  }

  /* ---------- Local + steps ---------- */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .steps{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:18px}
  .steps li{display:flex;gap:16px;align-items:flex-start}
  .step-n{
    width:32px;height:32px;border-radius:50%;background:var(--pine);color:#fff;
    font-family:var(--display);font-weight:600;font-size:15px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
  }
  .steps strong{display:block;font-weight:600}
  .steps span{color:var(--ink-soft);font-size:14.5px}
  @media (max-width:820px){.split{grid-template-columns:1fr;gap:44px}}

  /* ---------- Form ---------- */
  .form-card{
    margin-top:36px;background:var(--white);border:1px solid var(--line);
    border-radius:var(--radius);padding:36px;
  }
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .field{display:flex;flex-direction:column;gap:6px}
  .field.full{grid-column:1/-1}
  label{font-size:14px;font-weight:600}
  input,textarea{
    font-family:var(--body);font-size:15px;color:var(--ink);
    padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--white);
  }
  input:hover,textarea:hover{border-color:#B9C7C0}
  textarea{min-height:110px;resize:vertical}
  .form-foot{
    display:flex;justify-content:space-between;align-items:center;gap:16px;
    flex-wrap:wrap;margin-top:24px;
  }
  .form-contact{font-size:14.5px;color:var(--ink-soft)}
  .form-contact a{font-weight:600;text-decoration:none}
  .form-status{margin-top:14px;font-size:14.5px;font-weight:600;color:var(--pine);display:none}
  @media (max-width:640px){.form-grid{grid-template-columns:1fr}}

  /* ---------- Footer ---------- */
  footer{
    background:var(--pine-deep);color:#CFE0D8;padding:40px 0;font-size:14px;
  }
  .foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
  footer a{color:#fff;text-decoration:none;font-weight:500}
  footer a:hover{text-decoration:underline}

  /* ============================================================
     Property page (P1-23) — appended; no existing rules modified.
     Brand tokens only, no shadows (BRAND.md §7); depth via 1px --line.
     ============================================================ */

  /* Homepage featured-block secondary link */
  .prop-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .prop-details-link{
    font-weight:600;font-size:15px;color:var(--pine);text-decoration:none;
  }
  .prop-details-link:hover{text-decoration:underline}

  /* ---------- 1 · Hero ---------- */
  .property-hero{padding:0 0 8px}
  .property-hero__media{
    width:100%;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line);
  }
  .property-hero__media img{width:100%;height:100%;object-fit:cover}
  .property-hero__body{padding-top:32px}
  .property-hero__name{font-size:clamp(30px,4.5vw,46px);margin-bottom:8px}
  .property-hero__headline{color:var(--ink-soft);font-size:18px;margin-bottom:14px}
  .property-hero__specs{font-family:var(--display);font-weight:600;font-size:18px;margin-bottom:10px}
  .property-hero__features{color:var(--ink-soft);font-size:15px;margin-bottom:16px}
  .property-hero__pricing{font-family:var(--display);font-size:26px;font-weight:600;margin-bottom:8px}
  .property-hero__availability{margin-bottom:18px}
  .property-hero__cta{margin-top:4px}

  /* ---------- 2 · Narrative ---------- */
  .property-narrative .wrap{max-width:760px}
  .property-narrative p{font-size:17px;color:var(--ink);margin-bottom:18px;line-height:1.7}
  .property-narrative p:last-child{margin-bottom:0}

  /* ---------- 3 · Gallery ---------- */
  .property-gallery-section .kicker{margin-bottom:18px}
  .property-gallery{display:grid;gap:12px}
  .property-gallery--count1{grid-template-columns:1fr}
  .property-gallery--count2{grid-template-columns:repeat(2,1fr)}
  .property-gallery--grid{grid-template-columns:repeat(2,1fr)}
  @media (min-width:760px){
    .property-gallery--grid{grid-template-columns:repeat(3,1fr)}
  }
  .property-gallery__tile{
    padding:0;border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;background:var(--sage);cursor:pointer;aspect-ratio:4/3;
    transition:transform .12s ease;
  }
  .property-gallery__tile:hover{transform:scale(.99)}
  .property-gallery__tile img{width:100%;height:100%;object-fit:cover}

  /* ---------- 4 · Amenities (native <details> accordion) ---------- */
  .property-amenities h2{margin-bottom:18px}
  .property-amenities details{
    border:1px solid var(--line);border-radius:var(--radius);
    margin-bottom:10px;background:var(--white);overflow:hidden;
  }
  .property-amenities summary{
    list-style:none;cursor:pointer;padding:16px 20px;font-family:var(--display);
    font-weight:600;font-size:16px;display:flex;justify-content:space-between;align-items:center;
  }
  .property-amenities summary::-webkit-details-marker{display:none}
  .property-amenities summary::after{
    content:"+";font-size:20px;color:var(--pine);font-weight:400;line-height:1;
  }
  .property-amenities details[open] summary::after{content:"–"}
  .property-amenities ul{
    list-style:none;margin:0;padding:0 20px 18px;
    display:grid;grid-template-columns:1fr;gap:8px;
  }
  @media (min-width:560px){.property-amenities ul{grid-template-columns:1fr 1fr}}
  .property-amenities li{
    font-size:14.5px;color:var(--ink-soft);padding-left:20px;position:relative;
  }
  .property-amenities li::before{
    content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
    border-radius:50%;background:var(--pine);
  }

  /* ---------- 5 · Location ---------- */
  .property-location h2{margin-bottom:12px}
  .property-location__area{font-family:var(--display);font-weight:600;font-size:20px;margin-bottom:6px}
  .property-location__type{color:var(--ink-soft);font-size:15px;margin-bottom:16px}
  .property-location__proximity{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
  .property-location__proximity li{
    background:var(--white);border:1px solid var(--line);border-radius:999px;
    padding:7px 16px;font-size:14px;color:var(--ink);
  }

  /* ---------- 6 · Audience cross-links ---------- */
  .property-audiences .kicker{margin-bottom:14px}
  .property-audiences__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
  .property-audiences__link{
    display:inline-block;border:1px solid var(--line);border-radius:999px;
    padding:9px 18px;font-weight:600;font-size:14.5px;color:var(--pine);text-decoration:none;
    transition:background .12s,border-color .12s;
  }
  .property-audiences__link:hover{background:var(--pine-tint);border-color:var(--pine-tint)}

  /* ---------- 7 · Inquiry ---------- */
  .property-inquiry .inquiry-form{max-width:640px;margin-top:8px}
  .property-inquiry .form-contact{margin-top:16px}

  /* ---------- Lightbox ---------- */
  .lightbox{
    position:fixed;inset:0;z-index:100;background:rgba(11,53,45,.94);
    display:flex;align-items:center;justify-content:center;padding:24px;
  }
  .lightbox[hidden]{display:none}
  .lightbox__figure{margin:0;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:12px}
  .lightbox__image{max-width:92vw;max-height:78vh;object-fit:contain;border-radius:var(--radius);background:var(--ink)}
  .lightbox__caption{color:#CFE0D8;font-size:14.5px;text-align:center;max-width:60ch}
  .lightbox__caption[hidden]{display:none}
  .lightbox__close{
    position:absolute;top:16px;right:20px;background:transparent;border:none;
    color:#fff;font-size:34px;line-height:1;cursor:pointer;padding:6px 12px;
  }
  .lightbox__nav{
    position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);
    border:none;color:#fff;font-size:30px;line-height:1;cursor:pointer;
    width:52px;height:52px;border-radius:50%;
  }
  .lightbox__nav:hover{background:rgba(255,255,255,.22)}
  .lightbox__nav--prev{left:16px}
  .lightbox__nav--next{right:16px}
  .lightbox__counter{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#CFE0D8;font-size:14px}

  @media (max-width:640px){
    .property-hero__media{aspect-ratio:3/2}
    .lightbox__nav{width:44px;height:44px;font-size:26px}
  }