/* Farm chrome and presentation only. The engine keeps booking behavior.
   T-1028: the booking header is the home page's header. The booking pages load only this
   stylesheet (not styles.css or visual-refresh.css), so the home page's rendered header values
   are restated here: dark phone strip, logo left, inline menu at desktop, hamburger and
   right-hand drawer at phone width. The menu opens from the details/summary toggle the farm
   projection emits (includes/farm-booking-layout.php): no script, no URL fragment, no history
   step. The engine styles every details element; the .farm-booking-menu rules undo that. */
body { margin:0; padding:0; background:#fffdf8; }
body > header:not(.site-header), body > main { width:min(calc(100% - 2rem),1040px); }
body > main { margin:clamp(1rem,3vw,2rem) auto; }

/* Header frame. Unlike the home page it is not sticky: the booking flow is a long form, and a
   phone screen is better spent on it than on a header that follows the renter down. */
.site-header { max-width:none; width:100%; margin:0; padding:.65rem 0; background:#fffdf5; border:0; border-bottom:1px solid #dcd5c3; border-radius:0; box-shadow:0 1px 0 #173c2a14; color:#1b2b24; }
.site-header .container { box-sizing:border-box; max-width:1180px; margin:0 auto; padding:0 1.5rem; }
.header-phone-bar { position:relative; z-index:1001; background:#123543; color:#fffdf5; }
.header-phone-bar .container { display:flex; justify-content:center; }
.header-phone-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 1rem; font-size:1rem; font-weight:750; color:inherit; text-decoration:underline; text-underline-offset:.2em; }
.header-phone-link:hover { color:#fffdf5; }
.header-phone-link:focus-visible { outline:3px solid #edc56b; outline-offset:3px; }
.header-content { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo { flex:none; }
.logo a { display:inline-block; line-height:0; }
.logo img { display:block; width:180px; max-width:100%; height:64px; object-fit:contain; object-position:left center; }
.main-nav { min-width:0; }
.nav-menu { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem; list-style:none; margin:0; padding:0; }
.nav-menu li { display:flex; align-items:center; min-width:0; margin:0; }
.nav-menu a { box-sizing:border-box; display:flex; align-items:center; max-width:100%; padding:.7rem .6rem; border:0; border-radius:4px; font-size:.93rem; font-weight:600; letter-spacing:.01em; line-height:1.7; color:#1b2b24; text-decoration:none; background:transparent; overflow-wrap:anywhere; }
.nav-menu a:hover { color:#092631; background:#ece8da; }
.nav-menu a.btn-primary { min-height:50px; background:#e8b94f; }
.nav-menu a.btn-primary:hover { background:#f3ca6b; }
.nav-menu li:last-child a { padding-inline:1.2rem; color:#fff; background:#123543; }
.nav-menu li:last-child a:hover { color:#fff; background:#245363; }
.site-header a:focus-visible,
.site-header summary:focus-visible,
.site-footer a:focus-visible { outline:3px solid #bb8530; outline-offset:4px; }

/* The toggle exists only at phone width, as on the home page. */
.farm-booking-menu { display:none; margin:0; padding:0; border:0; border-radius:0; background:none; }
.farm-booking-menu > summary { list-style:none; }
.farm-booking-menu > summary::-webkit-details-marker { display:none; }

.site-footer { max-width:none; width:100%; margin:1.5rem 0 0; padding:2rem 0 1rem; border:0; border-radius:0; background:#0a1b13; color:#e6ece8; text-align:left; }
.site-footer .container { max-width:1100px; margin:0 auto; padding:0 clamp(1rem,3vw,2rem); }
.footer-content { display:grid; grid-template-columns:2fr 1fr; gap:1.5rem; }
.site-footer h3,
.site-footer h4 { color:#fff; margin:0 0 .75rem; }
.site-footer p { color:inherit; margin:.75rem 0; }
.site-footer a { color:#e6ece8; text-decoration:underline; overflow-wrap:anywhere; }
.footer-links ul { list-style:none; margin:0; padding:0; }
.footer-links li { margin:.6rem 0; }
.footer-disclaimer,
.footer-bottom { max-width:1100px; margin:1.5rem auto 0; padding:0 clamp(1rem,3vw,2rem); font-size:.875rem; }
.footer-bottom { text-align:center; }

@media (max-width:768px) {
    .site-header { padding:.45rem 0; }
    .site-header .container { padding:0 1rem; }
    .logo img { width:150px; height:56px; }

    /* The hamburger: the home page's 48 px button and three 28 px lines, an X when open. It
       sits above the drawer, so the same spot closes the menu. */
    .farm-booking-menu { display:block; }
    /* text-align:center and no left on the lines, as on the home page: its button centres text,
       so the top and bottom lines sit at that centred static position, 14 px right of the middle
       one. Same cause here, so the two hamburgers look alike in every browser. */
    .farm-booking-menu > .mobile-menu-toggle { position:relative; z-index:1001; display:flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:48px; min-height:48px; padding:.5rem; text-align:center; cursor:pointer; }
    .hamburger { position:relative; display:block; width:28px; height:3px; border-radius:2px; background:#123543; transition:background-color .3s ease; }
    .hamburger::before,
    .hamburger::after { content:""; position:absolute; width:28px; height:3px; border-radius:2px; background:#123543; transition:transform .3s ease; }
    .hamburger::before { top:-8px; }
    .hamburger::after { top:8px; }
    .farm-booking-menu[open] .hamburger { background-color:transparent; }
    .farm-booking-menu[open] .hamburger::before { transform:rotate(45deg) translate(6px,6px); }
    .farm-booking-menu[open] .hamburger::after { transform:rotate(-45deg) translate(6px,-6px); }
    /* A tap beside the open drawer closes it, as on the home page: this transparent layer
       belongs to the summary, so a tap on it is a tap on the toggle. It stops at the drawer's
       edge, so the drawer's links stay reachable above nothing. */
    .farm-booking-menu[open] > .mobile-menu-toggle::before { content:""; position:fixed; top:0; bottom:0; left:0; right:min(82vw,300px); }
    body:has(.farm-booking-menu[open]) { overflow:hidden; }

    /* The drawer: the home page's right-hand panel. Closed, it is off screen and hidden, so its
       links take no keyboard stop. Without a toggle (an older engine) the menu stays a plain
       visible list. */
    .farm-booking-menu ~ .nav-menu { position:fixed; top:0; right:0; z-index:1000; box-sizing:border-box; width:min(82vw,300px); height:100vh; height:100dvh; overflow-y:auto; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:.2rem; padding:5.5rem 2rem 2rem; background:#fffdf8; box-shadow:0 32px 72px #0a1c132e; visibility:hidden; transform:translateX(100%); transition:transform .3s ease, visibility 0s linear .3s; }
    .farm-booking-menu[open] ~ .nav-menu { visibility:visible; transform:none; transition:transform .3s ease; }
    .farm-booking-menu ~ .nav-menu li { display:block; }
    .farm-booking-menu ~ .nav-menu a { min-height:48px; padding:2rem; font-size:1.125rem; }
    .farm-booking-menu ~ .nav-menu a.btn-primary,
    .farm-booking-menu ~ .nav-menu li:last-child a { justify-content:center; }
    .header-content { flex-wrap:wrap; }

    .footer-content { grid-template-columns:1fr; }
}

/* T-1028: on a phone, upright or turned sideways, the agreement reads in a box at most 40
   percent of the visible screen tall (svh leaves out the browser's own bars; vh where svh is
   unknown), never under 12rem. With the box at the top of the screen its end and the next step
   share that screen, so the renter neither scrolls past ~5,000 px of text to reach the form nor
   meets a box taller than the screen; a swipe beside the box still moves the page, and at either
   end of the box the page takes over (overscroll is left at auto). */
@media (max-width:768px), (max-height:500px) {
    .agreement { max-height:max(12rem,40vh); max-height:max(12rem,40svh); overflow-y:auto; }
}
@media print { .site-header, .site-footer { display:none; } }