/* ==========================================================================
   Wilbrook RV Park — site stylesheet
   Design: Option 4 "brochure", chosen 2026-08-14. See README.md.

   Mobile first. No web fonts, no framework, no build step.
   Every rule here answers to docs/design-standards.md:
     20px body minimum · 48px+ touch targets (we use 52-62px) · 7:1 contrast
     · visible focus · no motion · one column on mobile, never 3 on desktop.

   Palette comes from the carved entrance sign. The green is the brand; the tan
   was only the lumber the sign was cut from. Neutrals are tinted GREEN, never
   sand — warm beige fights forest green and turns the page dusty. White carries
   the light, deep green carries the weight, terracotta wakes things up and is
   used sparingly.
   ========================================================================== */

:root{
  --page:#FFFFFF;
  --card:#FFFFFF;
  --band:#F2F7F3;      /* barely-there green-white for alternating sections */
  --rule:#D7E2DA;
  --green:#10402C;
  --green-mid:#1D6B47; /* livelier green for links and small accents */
  --green-dk:#082B1D;
  --accent:#9A4517;    /* terracotta — used sparingly */
  --ink:#14150F;
  --soft:#565F58;
  --clay:#9A4517;
}

/* ===== base ============================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     font-size:20px;line-height:1.7;color:var(--ink);background:var(--page);
     padding-bottom:96px} /* clears the fixed mobile call bar */
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.22;font-weight:700}
h1{font-size:1.95rem}
h2{font-size:1.7rem;margin-bottom:.45em}
h3{font-size:1.2rem;margin-bottom:.3em}
p{max-width:64ch}
a{color:var(--green)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
section{padding:48px 0}
.alt{background:var(--band);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.center{text-align:center}

/* Keyboard access. Never remove these. */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;position:fixed;z-index:99;background:#fff;
            padding:16px 22px;border:3px solid var(--clay)}
a:focus-visible{outline:4px solid var(--clay);outline-offset:3px}

/* Review-phase only. The .draft banner was removed from every page 2026-08-17;
   .tbd stays until the last unconfirmed value is answered, then goes too. */
.tbd{background:#FBEFC9;border-bottom:2px dotted #A07800;padding:0 3px}

/* ===== masthead ========================================================== */

header{background:var(--page);border-bottom:6px solid var(--accent);
       text-align:center;padding:28px 0 24px}
header .mark{width:180px;height:auto;color:var(--green);display:block;margin:0 auto 6px}
header .name{font-family:Georgia,serif;font-size:2.1rem;font-variant:small-caps;
             letter-spacing:.04em;color:var(--green);line-height:1.1}
header .loc{font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;
            color:var(--accent);margin-top:8px;font-weight:700}
/* The phone belongs in the header on EVERY page at EVERY width — the mobile
   call bar is hidden on desktop, so without this the number would not appear
   above the footer. docs/design-standards.md, "Layout & navigation". */
/* display:flex (not inline-flex) on purpose — an inline-level box this tall sits
   on its line by baseline, which pulled it up over .loc above by 9px on narrow
   widths. Block-level + fit-content + auto margins keeps it centered without
   the baseline math. */
header .tel{display:flex;width:fit-content;align-items:center;justify-content:center;
            min-height:52px;margin:14px auto 0;padding:8px 22px;
            font-size:1.15rem;font-weight:700;color:var(--green);
            text-decoration:none;border:3px solid var(--green);border-radius:3px}

/* ===== navigation ======================================================== */
/* Flat, 8 links, no dropdowns, current page marked.
   Mobile: Home and Our Spaces stay on the bar next to a labelled Menu button,
   and the other six sit behind it. Eight links at two per row pushed the top
   of the page most of a screen down; Book is not among the two because the
   call bar already pins "Check Dates" to the bottom of every phone screen.
   docs/design-standards.md asks for a large LABELLED Menu button rather than a
   bare icon, so the word "Menu" is always on it, not just the three bars.
   Desktop: no button, all eight inline, exactly as before.
   The twelve-column grid is the trick that lets the top row be two wide links
   plus a narrow icon (5 + 5 + 2) while the links underneath stay halves
   (span 6). The button gets a sixth of the bar and no more, so Home and Our
   Spaces keep nearly all of it. */

nav{background:var(--green)}
nav ul{display:grid;grid-template-columns:repeat(12,1fr);list-style:none;gap:1px}
nav li{grid-column:span 6}
nav a{display:flex;align-items:center;justify-content:center;padding:15px 8px;
      min-height:52px;color:#EEF2EA;text-decoration:none;font-weight:600;
      font-size:.95rem;text-align:center}
nav a[aria-current="page"]{background:var(--accent);color:#fff}

/* The button ships hidden and nav.js unhides it. With no JS every link stays
   on the bar, two per row, exactly as it was before the button existed. */
.navmenu-item{display:none}
.js-nav .nav-primary{display:block;grid-column:span 5}
.js-nav .navmenu-item{display:block;grid-column:span 2}
.js-nav .more{display:none}
.js-nav.is-open .more{display:block}

.navtoggle{display:flex;align-items:center;justify-content:center;
           width:100%;min-height:52px;padding:12px 2px;
           font-family:inherit;color:#EEF2EA;background:var(--green-dk);
           border:0;cursor:pointer}
/* No word beside it — the bars carry the button alone, so they are drawn
   larger. The accessible name lives in aria-label on the button, because a
   screen reader gets nothing from an icon marked aria-hidden. */
.navtoggle-icon{font-size:1.6rem;line-height:1}
/* The page you are on can be one of the six behind the button, where its mark
   cannot be seen. The button takes the same accent colour a marked link would,
   and nav.js says which page in the button's aria-label — putting the name on
   the button itself made it two lines tall and stole the width back from Home
   and Our Spaces. */
.navtoggle.is-here{background:var(--accent);color:#fff}

/* ===== buttons & calls to action ========================================= */
/* Labels say what happens. No ghost buttons — .btn-line still carries a
   3px border so it reads as a control, not a link. */

.btn{display:flex;align-items:center;justify-content:center;min-height:62px;
     padding:14px 28px;font-weight:700;font-size:1.08rem;text-decoration:none;
     border-radius:3px;border:3px solid var(--green);text-align:center}
.btn-solid{background:var(--green);color:#fff}
.btn-line{background:transparent;color:var(--green)}
.cta{display:grid;gap:12px;margin:28px auto 0;max-width:420px}

/* Fixed bottom bar: the phone is never more than a thumb away on mobile. */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;
         display:grid;grid-template-columns:1fr 1fr;gap:10px;
         padding:12px 14px calc(12px + env(safe-area-inset-bottom));
         background:var(--card);border-top:3px solid var(--accent);
         box-shadow:0 -6px 18px rgba(8,43,29,.12)}
.callbar a{display:flex;align-items:center;justify-content:center;min-height:60px;
           border-radius:3px;font-weight:800;font-size:1.05rem;
           text-decoration:none;text-align:center}
.cb-call{background:var(--card);color:var(--green);border:3px solid var(--green)}
.cb-book{background:var(--green);color:#fff}

/* ===== hero ============================================================== */

.hero{padding:44px 0 48px;text-align:center}
.hero h1{max-width:30ch;margin:0 auto .4em} /* flows in 2-3 lines, never a wall */
.hero .lede{font-size:1.12rem;color:var(--soft);max-width:46ch;margin:0 auto}
.hours{margin-top:16px;color:var(--soft);font-size:1rem}

/* ===== content blocks ==================================================== */

.strip{background:var(--green);color:#fff;text-align:center;padding:34px 0}
.strip h2{color:#fff;margin-bottom:.3em}
.strip p{color:#C8D9CC;margin:0 auto}
/* The default link colour IS this band's background colour, so a link in here
   is invisible until it is given one. Nothing linked from the strip until
   2026-08-23, which is why it never showed. White keeps the 7:1 contrast the
   design standards ask for; the underline stays, so the link is not signalled
   by colour alone. */
.strip a{color:#fff;text-underline-offset:3px}

.icons{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--rule);
       border:1px solid var(--rule);margin-top:28px}
.ico{background:var(--card);padding:22px 12px;text-align:center}
.ico svg{width:40px;height:40px;color:var(--green);margin-bottom:8px}
.ico b{display:block;font-size:1.02rem;line-height:1.3}
.ico span{display:block;font-size:.9rem;color:var(--soft);margin-top:3px}

.rates{display:grid;gap:16px;margin-top:24px}
.rate{background:var(--card);border:1px solid var(--rule);border-top:6px solid var(--green);
      padding:22px;text-align:center}
.rate .amt{font-family:Georgia,serif;font-size:2.5rem;color:var(--green);
           display:block;line-height:1.1}
.rate .per{font-size:.95rem;color:var(--soft);text-transform:uppercase;letter-spacing:.1em}
.rate .who{margin-top:10px;font-size:1rem}
.included{background:var(--green);color:#fff;padding:22px;text-align:center;
          margin-top:18px;border-radius:3px}
.included b{font-size:1.15rem;display:block;margin-bottom:6px}
.included p{color:#C8D9CC;margin:0 auto}

/* Saying plainly what the park is not. Trust costs less than a refund. */
.honest{background:var(--card);border:1px solid var(--rule);
        border-left:7px solid var(--clay);padding:24px;margin-top:26px}

/* The owners in their own words, with their names on it. */
.welcome{background:var(--card);border:1px solid var(--rule);padding:26px;margin-top:26px}
.welcome blockquote{font-family:Georgia,serif;font-size:1.14rem;line-height:1.6}
.welcome cite{display:block;margin-top:16px;font-style:normal;font-weight:700;
              color:var(--green);font-size:1rem}

.reviews{display:grid;gap:18px;margin-top:26px}
.rev{background:var(--card);border:1px solid var(--rule);padding:22px}
.rev p{font-family:Georgia,serif;font-size:1.08rem;line-height:1.6}
.rev .who{display:block;margin-top:14px;font-weight:700;color:var(--green);
          font-family:system-ui,sans-serif;font-size:.98rem}
.rev .src{color:var(--soft);font-weight:400}
.stars{color:var(--accent);letter-spacing:2px;font-size:1.15rem}

.dist{list-style:none;background:var(--card);border:1px solid var(--rule);margin-top:18px}
.dist li{display:flex;justify-content:space-between;gap:14px;padding:14px 18px;
         border-bottom:1px solid var(--rule)}
.dist li:last-child{border-bottom:0}
.dist b{white-space:nowrap}

/* Full-width photo band. width/height are set on the <img> itself so the
   browser reserves the space before the file lands — no jump on a slow
   connection, which matters on 2 bars from the road. */
.banner img{display:block;width:100%;height:auto}

/* Photo placeholder — every one of these is a hole waiting on the owner. */
.ph{background:#E7EFE9;border:2px dashed #A9BFB0;display:flex;align-items:center;
    justify-content:center;text-align:center;padding:22px;color:#4E5C52;
    font-weight:600;font-size:.95rem;min-height:210px}

/* ===== footer ============================================================ */

footer{background:var(--green-dk);color:#C6D2C7;padding:38px 0 30px;text-align:center}
footer a{color:#fff}
footer .mark{width:130px;color:#7E9B84;margin:0 auto 16px;display:block}
footer nav{background:none}
footer nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px;margin-bottom:22px}
footer nav a{display:inline-flex;min-height:48px;padding:10px 12px;color:#fff;
             font-weight:400;font-size:1rem}

/* ===== desktop =========================================================== */

@media (min-width:700px){
  body{padding-bottom:0}
  .callbar{display:none}
  .wrap{padding:0 26px}
  section{padding:64px 0}
  h1{font-size:2.6rem}
  h2{font-size:2rem}
  header .mark{width:230px}
  header .name{font-size:2.7rem}
  nav ul{display:flex;flex-wrap:wrap;gap:0;justify-content:center}
  nav a{padding:15px 22px;font-size:1rem}
  nav a:hover{background:var(--green-dk)}
  /* There is room for all eight here, so the button goes away entirely and
     the six links come back whether or not the menu was left open. */
  .navmenu-item,.js-nav .navmenu-item{display:none}
  .js-nav .more{display:block}
  .cta{display:flex;gap:16px;justify-content:center;max-width:none}
  .btn{display:inline-flex}
  .icons{grid-template-columns:repeat(3,1fr)}
  .rates{grid-template-columns:repeat(3,1fr);gap:20px}
  .reviews{grid-template-columns:1fr 1fr;gap:22px}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
  .ph{min-height:320px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== forms ==============================================================
   Same rules as everything else: 20px minimum, 7:1 contrast, and touch
   targets a 75-year-old can hit on a phone in a truck. Inputs are 60px tall
   and full width — a cramped form is where this audience gives up and calls
   instead, and the whole point of the form is that some of them would rather
   not call.
   ========================================================================== */
.form{max-width:640px;margin:28px auto 0}
.form label{display:block;font-size:1.05rem;font-weight:700;color:var(--green);
            margin:24px 0 8px}
.form input,.form textarea{display:block;width:100%;font:inherit;font-size:20px;
            line-height:1.5;color:var(--ink);background:var(--page);
            border:2px solid var(--rule);border-radius:2px;padding:15px 16px}
.form input{min-height:60px}
.form input:focus,.form textarea:focus{outline:3px solid var(--green-mid);
            outline-offset:2px;border-color:var(--green-mid)}
.form .hint{font-size:1rem;color:var(--soft);margin:8px 0 0}
.form button{margin-top:30px;width:100%}

/* Honeypot: off-screen rather than display:none, because some bots skip
   anything hidden and this way they fill it in. Never focusable. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Form result page — /book/contact.php */
.result{max-width:640px;margin:0 auto;padding:26px 24px;border-left:5px solid var(--green-mid);
        background:var(--band)}
.result.bad{border-left-color:var(--clay)}
.result h2{margin-top:0}
.result ul{margin:12px 0 0 22px}
.result li{margin-bottom:6px}

/* Real photographs, replacing the dashed .ph placeholders as they arrive. */
.shot{margin:0}
.shot img,.shot svg{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.shot figcaption{margin-top:10px;font-size:1rem;line-height:1.5;color:var(--soft)}

/* The aerial under the grounds map. Cropped to the map's own 585:525 ratio, so
   at full width the two stack as a matched pair rather than one dwarfing the
   other. Only spacing to add here. */
.shot.aerial{margin-top:30px}

/* ===== booking flow ======================================================= */

/* "Step 2 of 4" in words, with the bar as decoration only. Somebody who has to
   stop halfway needs to know how much is left, and a bar of segments alone
   does not tell them that. */
.steps{background:var(--band);border-bottom:1px solid var(--rule);padding:14px 0}
.steps p{margin:0 0 8px;font-size:1rem;font-weight:700;color:var(--green);max-width:none}
.steps-bar{height:8px;background:var(--rule);border-radius:4px;overflow:hidden}
.steps-bar span{display:block;height:100%;background:var(--green-mid)}

.form select{display:block;width:100%;min-height:60px;font:inherit;font-size:20px;
             color:var(--ink);background:var(--page);border:2px solid var(--rule);
             border-radius:2px;padding:15px 16px}
.form select:focus{outline:3px solid var(--green-mid);outline-offset:2px}

/* The rules, in a scrollable panel. Deliberately NOT a tiny window — it is
   tall enough to read in, and the whole text is in the page for anyone who
   would rather scroll the page itself or print it. */
.rulesbox{max-width:760px;margin:26px auto 0;padding:24px 26px;background:var(--card);
          border:1px solid var(--rule);border-left:7px solid var(--green-mid);
          max-height:460px;overflow-y:auto}
.rulesbox h2{font-size:1.15rem;color:var(--green);margin:22px 0 8px}
.rulesbox h2:first-child{margin-top:0}
.rulesbox ul{margin:0 0 4px 22px}
.rulesbox li{margin-bottom:10px}
.rulesbox p{margin-bottom:10px}

/* The one clause we ask people to initial. Terracotta, because it is the rule
   most likely to be met with "I did not know". */
.initialbox{max-width:640px;margin:30px auto 0;padding:22px 24px;background:var(--band);
            border-left:5px solid var(--clay)}
.initialbox p{margin-bottom:14px}
.initialbox label{margin-top:0}

/* A checkbox this audience can actually hit, with the label as part of the
   target. 30px is not decorative — it is the difference between ticking it and
   giving up. */
.agreebox{max-width:640px;margin:26px auto 0;padding:20px 22px;border:2px solid var(--green);
          border-radius:3px;display:flex;gap:16px;align-items:flex-start}
.agreebox input[type=checkbox]{width:30px;height:30px;margin-top:2px;flex:0 0 auto;
                               accent-color:var(--green)}
.agreebox label{margin:0;font-size:1.08rem;font-weight:700;color:var(--ink);cursor:pointer}

/* ===== print ============================================================== */
/* The guest's booking page is a travel document. It has to print cleanly on
   one sheet a passenger can hold. */
@media print{
  header .tel,nav,.callbar,.noprint,.steps{display:none!important}
  body{padding-bottom:0;font-size:12pt}
  a{color:#000;text-decoration:none}
  .rulesbox{max-height:none;overflow:visible;page-break-inside:avoid}
  .included{background:#fff!important;color:#000!important;border:2px solid #000}
  .included p{color:#000!important}
  section{padding:12px 0}
}

/* A bookable pad on the grounds map. grounds-map.js wraps every space that is
   still free tonight in a link; the greyed-out ones stay flat. On a pointer the
   hover state has to be unmistakable — nobody in this audience goes hunting for
   clickable things by waving a cursor over a picture. No transition:
   design-standards.md says no motion, and a fade here would only make the
   answer slower. */
.site-link{cursor:pointer}
.site-link .stall{fill:#d7d0c0;stroke:#0b4c93}

/* ⚠️ (hover:hover) and :focus-visible, never a bare :hover or :focus. A finger
   never leaves the pad it tapped, so on a touch screen a hover style is applied
   on the FIRST tap and the link is not followed until the second — the guest
   taps a space, watches it change colour, and nothing happens. Found on a
   Samsung against the live site 2026-08-22. Behind these two queries a phone
   gets no state at all, which is right: the feedback is the booking page
   opening. The keyboard ring comes from the site-wide a:focus-visible. */
@media (hover:hover){
  .site-link:hover .stall{fill:var(--green-dk);stroke:var(--accent);stroke-width:5}
}
.site-link:focus-visible .stall{fill:var(--green-dk);stroke:var(--accent);stroke-width:5}

/* Written by grounds-map.js above the map, never in the HTML: without the
   script the pads are a flat picture and the instruction would be a lie. */
.map-hint{margin:0 auto 14px;color:var(--soft)}

/* Carried onto the dates screen, so a guest who tapped a pad can see that the
   pick made the jump and they are not starting over. */
.picked{max-width:640px;margin:18px auto 0;padding:14px 18px;background:var(--band);
        border:1px solid var(--rule)}

/* The space they tapped on the map, once we know it is free on their dates.
   One decision, one button, at the size of the decision — the other spaces
   stay below it rather than beside it. */
.pickone{max-width:760px;margin:30px auto 0;padding:24px 26px;background:var(--band);
         border:1px solid var(--rule);border-top:6px solid var(--green-mid)}
.pickone h2{font-size:1.4rem;color:var(--green);margin:0 0 8px}
.pickone p{margin-bottom:18px}
.pickone .btn{width:100%;min-height:66px;font-size:1.15rem}

/* Choosing a space: two groups, one explanation each, then the numbers as
   buttons. Fifteen full cards was a wall of identical paragraphs — and ran to
   three columns, which docs/design-standards.md rules out. */
.pickgroup{max-width:760px;margin:30px auto 0;padding:24px 26px;background:var(--card);
           border:1px solid var(--rule);border-top:6px solid var(--green)}
.pickgroup h3{font-size:1.3rem;color:var(--green);margin-bottom:8px}
.pickgroup p{margin-bottom:4px}
/* Grid rather than wrapped flex: with flex, the last button on a row stretches
   to fill the gap, so "Space 5" ended up three times the width of "Space 4"
   and looked like it meant something. Even cells mean the numbers read as a
   set of equal choices, which is exactly what they are. */
.picklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
          gap:12px;margin-top:18px}
.picklist .btn{min-height:60px;font-size:1.05rem}

/* Phone numbers written into a sentence are a 20px line of text — about 34px
   of tappable height, under the 48px this site holds itself to everywhere
   else. Vertical padding on an inline element extends the HIT AREA without
   changing the line box, so the prose still sets normally and the number is
   easier to hit with a thumb. This audience taps phone numbers more than
   anything else on the site.

   ⚠️ Excludes .tel/.btn/.cb-call on purpose. Every tel: button (header .tel,
   the .cta call buttons, .callbar's cb-call) is ALSO an a[href^="tel:"], and
   this rule's own padding/margin was silently overriding theirs at equal
   specificity — that's what sent the header's call button to the top-left
   corner on 2026-08-18. This rule is for numbers written into a sentence;
   anything already styled as a button sets its own padding and margin. */
a[href^="tel:"]:not(.tel):not(.btn):not(.cb-call){padding:9px 2px;margin:-9px 0}

/* Standalone arrow links act as buttons even though they read as links.
   Give them a real target rather than 34px of underlined text. */
p > a[href]:only-child{display:inline-block;padding:8px 0}

/* On the rules PAGE the panel is the whole point, so it is not a scroll window —
   that is only how it behaves inside the booking flow, where it sits above a
   form. Same markup, read differently by context. */
.rulesbox.rulespage{max-height:none;overflow:visible;max-width:760px}