/* Shared site chrome — header, nav, mobile menu, footer.
   ACCENT: brass (#D6BC86 on this navy ground, #A8762E as a fill under dark text). It was a
   bright cyan, which read as software rather than as a detailer. Colours stay hardcoded here
   on purpose — see the note below — so this file is the one place the chrome's accent lives
   and it must be moved in step with the --accent tokens in index.html and booking.html.
   Loaded on every page so the header and footer are identical everywhere.
   Colors are hardcoded (not var()-based) so this renders identically regardless
   of what theme variables the host page itself defines. */

/* Canonical site container width, in one place so it can never drift again.
   1400px (was 1180px): on a 1920px monitor the old cap left the content column at
   just 1068px of live width — 56% of the screen — which is what read as thin and
   under-built. 1400 puts 1288px of live width on screen (67%) without letting the
   long-form copy stretch: prose keeps its own ch-based measure inside this frame.
   Pages whose layout genuinely needs a different frame override --site-max on
   :root rather than editing every container by hand — booking.html does exactly
   that for its wizard + sticky summary. The literal fallback is here so pages that
   load this file without content.css still get the right number. */
:root { --site-max: 1400px; --read-max: 1020px; }
.chrome-wrap { max-width: var(--site-max, 1400px); margin: 0 auto; padding-left: clamp(20px, 5vw, 56px); padding-right: clamp(20px, 5vw, 56px); }

/* Logo */
.logo-img { display: block; width: auto; user-select: none; }
.logo-badge { display: inline-flex; align-items: center; background: #ffffff; border-radius: 10px; line-height: 0; flex: none; }
.logo-badge-nav { padding: 6px 12px; }
.logo-badge-footer { padding: 8px 16px; }
.logo-nav { height: 40px; }
.logo-footer { height: 52px; }

/* Header / Nav */
header.site {
  position: sticky; top: 0; z-index: 60;
  background: rgba(6, 13, 26, 0.9); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(214, 188, 134, 0.14);
}
/* The horizontal padding here is deliberate and load-bearing. This used to be the
   shorthand `padding: 14px 0`, which silently zeroed out .chrome-wrap's own
   left/right padding (same specificity, later in the file) — so on every page the
   header row ran the full width of the container while everything below it sat
   56px in, and on phones and tablets the logo and the burger were pinned flat
   against the screen edges with no margin at all. A slightly tighter inset than the
   body's 56px is intentional: it keeps the header reading as the wider frame it is,
   and it leaves the ten-item menu the room it needs down at 1250px. */
.nav-row { display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(20px, 3vw, 40px); gap: 8px; }
/* 13px gap + 2px of horizontal padding per link, not 6px and none. The homepage's own inline copy
   of this chrome was updated to those numbers a while back and this shared file was not, so every
   page that loads THIS file (booking, services, fleet, area pages, blog) had a visibly tighter,
   more crowded nav than index.html — the words nearly touching. These values are index.html's, so
   this ends the drift rather than inventing a third spacing. */
.nav-links { display: flex; gap: 13px; list-style: none; margin: 0; padding: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.nav-links a { text-decoration: none; color: #eaf2fb; padding: 6px 2px; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a:focus-visible { border-bottom-color: #D6BC86; }
.nav-actions { display: flex; align-items: center; gap: 14px; }

/* Button rules scoped to header/mobile-panel only, so they never fight a page's own .btn styles elsewhere */
header.site .btn, .nav-mobile-panel .btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em;
  text-decoration: none; padding: 14px 26px; border: 2px solid transparent; border-radius: 999px; cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; white-space: nowrap;
}
/* GO — the booking call to action, and only that.
   Brass still owns the header's links, the logo lockup, the footer rules and every price on the
   site. This is the one job that changed: the button that starts a booking. A customer told the
   owner he went looking for a green Book Now and took a while to find the brass one.
   Hardcoded like everything else in this file, on purpose — see the note at the top: the chrome
   must render identically whatever tokens the host page happens to declare. */
header.site .btn-primary, .nav-mobile-panel .btn-primary {
  background: #0C7242; color: #fff; border-color: #3FAE77;
  box-shadow: 0 0 0 3px rgba(12, 114, 66, 0.18);
}
header.site .btn-primary:hover, header.site .btn-primary:focus-visible,
.nav-mobile-panel .btn-primary:hover, .nav-mobile-panel .btn-primary:focus-visible {
  background: #095B34; transform: translateY(-2px);
  /* The brass glow that used to be here would have fired under a green button on every page. */
  box-shadow: 0 0 0 4px rgba(12, 114, 66, 0.26), 0 12px 26px -8px rgba(4, 10, 20, 0.6);
}

.nav-contact { display: none; align-items: center; gap: 16px; font-size: 13.5px; font-weight: 700; }
.nav-contact a { text-decoration: none; color: #EBD9B2; white-space: nowrap; }
.nav-contact a:hover, .nav-contact a:focus-visible { color: #D6BC86; }
.nav-divider { width: 1px; height: 18px; background: rgba(214, 188, 134, 0.14); }

.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 38px; height: 38px; background: none; border: 1px solid rgba(214, 188, 134, 0.14); border-radius: 8px;
  cursor: pointer; padding: 0; flex: none;
}
.nav-burger span { display: block; width: 18px; height: 2px; background: #eaf2fb; margin: 0 auto; transition: transform 160ms ease, opacity 160ms ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-panel {
  display: none; position: fixed; inset: 81px 0 0 0; z-index: 55;
  background: #060d1a; overflow-y: auto; padding: 8px clamp(20px, 6vw, 56px) 40px;
}
.nav-mobile-panel.open { display: block; }
.nav-mobile-panel ul { list-style: none; margin: 0 0 22px; padding: 0; }
.nav-mobile-panel ul a {
  display: block; padding: 16px 2px; font-size: 17px; font-weight: 700; text-decoration: none;
  color: #eaf2fb; border-bottom: 1px solid rgba(214, 188, 134, 0.14);
}
.nav-mobile-contact { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; font-size: 15.5px; font-weight: 700; }
.nav-mobile-contact a { color: #EBD9B2; text-decoration: none; }

/* Now that .nav-row is properly inset, the ten links + logo + Book Now button need about
   1218px of row at 12.5px type, which a 1250px viewport minus its padding no longer gives.
   Rather than push the whole menu behind a burger on 1280- and 1366-wide laptops, drop the
   link type and gap one notch through the band where the container is still viewport-limited;
   from 1401px up the frame is capped at --site-max and there is room to spare, so the full
   12.5px spacing returns. Measured: at 11.5px/11px the row needs ~1141px, which clears 1250. */
@media (max-width: 1400px) {
  .nav-links { font-size: 11.5px; gap: 11px; }
}

/* Desktop nav from 1250px up. index.html's inline copy of this chrome used 1220px, which was
   30px optimistic and is now unified to this same number so the two can no longer disagree.
   Below it the burger menu is the honest answer, not a squeezed row. (booking.html carries an
   eleventh item, "Gift Card", and raises this threshold again in its own stylesheet.) */
@media (max-width: 1249px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}
/* WHY THESE THREE CARRY header.site.

   They did not, and because of that none of them had ever applied to anything. The base rule for
   this button is `header.site .btn, .nav-mobile-panel .btn { padding: 14px 26px; font-size: 14px }`
   -- two classes AND a type selector, so specificity 0,2,1. `.nav-row .btn-primary` is 0,2,0, and
   a media query adds nothing to specificity. Every shrink rule below lost the cascade at every
   width, on every page that uses this shared chrome.

   The symptom was small and easy to miss: a 2px sideways scroll at 320px, a Book Now button
   sitting at its full desktop size on a phone, and the burger pressed against the edge. The
   comment under the 400px block already described the bug it was meant to fix -- it simply never
   fixed it. index.html looked fine throughout, because it carries its own inline copy of this
   chrome and never used these rules.

   Raised to 0,3,1 rather than reaching for !important, so the next rule added here can still win
   it honestly. */
@media (max-width: 560px) {
  header.site .nav-row .btn-primary { padding: 12px 16px; font-size: 12.5px; }
  .logo-nav { height: 30px; }
  .logo-badge-nav { padding: 5px 9px; }
  .nav-mobile-panel { inset: 69px 0 0 0; }
  .nav-actions { gap: 8px; }
  .nav-row { gap: 8px; }
}

/* SMALL PHONES. At 360px the logo, the Book Now button, the burger and the row's own 40px of
   padding add up to more than the screen, and the whole page scrolls sideways — on the booking
   form as much as anywhere, which is the worst place for it. Nothing is hidden: every piece is
   simply sized for the screen it is actually on. */
@media (max-width: 400px) {
  .nav-row { padding: 12px 12px; gap: 6px; }
  .nav-actions { gap: 6px; }
  header.site .nav-row .btn-primary { padding: 11px 13px; font-size: 11.5px; letter-spacing: 0.02em; }
  .logo-nav { height: 26px; }
  .logo-badge-nav { padding: 4px 7px; }
  .nav-mobile-panel { inset: 61px 0 0 0; }
}

/* 320px — an iPhone SE and older Androids. The logo badge is the widest fixed thing in the row, so
   it is allowed to scale with the screen instead of holding its size and pushing the burger off
   the edge. Nothing is removed; everything just fits. */
@media (max-width: 340px) {
  .nav-row { padding: 10px 10px; gap: 5px; }
  .nav-actions { gap: 5px; }
  header.site .nav-row .btn-primary { padding: 10px 11px; font-size: 10.5px; }
  .logo-nav { height: 23px; }
  .logo-badge-nav { padding: 3px 6px; max-width: 46vw; }
  .nav-mobile-panel { inset: 55px 0 0 0; }
}

/* Footer */
footer.site { background: #060d1a; color: #9fb0c7; padding: 52px 0 30px; border-top: 1px solid rgba(214, 188, 134, 0.14); }
.footer-grid { display: grid; grid-template-columns: 0.85fr 1.25fr 1fr 1fr; gap: 32px; padding-bottom: 32px; }
.footer-icon { display: inline-block; vertical-align: -2px; margin-right: 8px; flex: none; }
.footer-hours { display: block; font-size: 12px; color: var(--steel-dim); margin: 3px 0 0 23px; }
.footer-areas { padding: 28px 0 32px; border-top: 1px solid rgba(214, 188, 134, 0.14); border-bottom: 1px solid rgba(214, 188, 134, 0.14); }
.footer-areas h4 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #D6BC86; margin: 0 0 16px; }
/* 5 columns, not 4: 49 city links in a 1288px-wide footer left 300px-wide columns holding
   13-character names, which read as a gap rather than a list. The 160px column-width floor is
   what actually decides the count on phones and tablets, so those are unchanged. */
.footer-areas-list { list-style: none; margin: 0; padding: 0; columns: 5 160px; column-gap: 28px; }
.footer-areas-list li { break-inside: avoid; margin-bottom: 9px; font-size: 13.5px; }
.footer-areas-list a { text-decoration: none; color: #9fb0c7; }
.footer-areas-list a:hover, .footer-areas-list a:focus-visible { color: #D6BC86; }
.footer-col h4 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #D6BC86; margin: 0 0 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; }
.footer-col a { text-decoration: none; color: #eaf2fb; }
.footer-col a:hover, .footer-col a:focus-visible { color: #D6BC86; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 20px; font-size: 13px; color: #6c7c94; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* WORDS THAT DO NOT FIT THEIR BOX.
   Not one file on this site set overflow-wrap or word-break -- 15 pages, both shared
   stylesheets, zero occurrences -- so any unbroken run longer than its container pushed
   straight out of it: a long email address in the order summary, a customer's street on one
   line, a discount code, a package name on a narrow card. That is the "words and sentences do
   not fit in boxes" report.

   break-word, not anywhere: it only breaks a word that CANNOT otherwise fit, so normal text is
   untouched and nothing re-flows. The property is inherited, so declaring it on body covers
   every element on the page, and any component that genuinely wants a word to overflow can
   still override it locally. */
body { overflow-wrap: break-word; }