/* ============================================================
   CLIENT SPECIFIC OVERRIDES & COMPONENTS
   ============================================================ */

/* --- Navigation Dropdown --- */
/* Removed. This was a second, parallel dropdown component keyed to
   .nav-item-dropdown / .nav-dropdown-trigger - classes the header partial
   never had, so most of it never matched anything. What did match was its
   .nav-dropdown-menu block, which overrode the real component's surface and
   radius, and its .nav-dropdown-item rules, whose !important on the hover
   BACKGROUND outranked the scrolled skin while the scrolled skin's !important
   on the label COLOUR outranked it back - red text on a red fill, contrast
   1.00. The whole component now lives in main.css under NAV DROPDOWN, skinned
   by tokens. Add nav skins there, not here. */

/* ============================================================
   MOBILE FIXES - site-specific overrides (old-AL site)
   ============================================================ */

/* Issue 2 - removed. These were keyed to .nav-on-dark, which nothing in the
   markup or script.js ever applies, so the fix never ran. The open panel is
   --surface-1 with --ink-1 links from main.css and reads correctly on its own;
   if a dark-bar skin is ever added, skin it in main.css alongside the others. */

/* Issue 1 - homepage hero clears the fixed header on mobile.
   SWAP .homepage-hero FOR THE ACTUAL HERO WRAPPER CLASS. */
@media (max-width: 48rem) {
  .fullbleed-hero { padding-top: calc(var(--header-height) + var(--space-lg)); }
}

/* Issue 3 - shrink + tuck the floating WhatsApp button on mobile.
   Does NOT stop overlap (floating buttons overlay content by design);
   just reduces footprint. Held at 3rem, a comfortable 48px tap target,
   because this one is meant to be pressed. */
@media (max-width: 48rem) {
  .whatsapp-float { width: 3rem; height: 3rem; bottom: var(--space-sm); right: var(--space-sm); }
  .whatsapp-float svg { width: 1.625rem; height: 1.625rem; }
}

/* Issue 4 - removed. The band-aid forced footer link colour with !important
   to hide a stray class that no longer exists: those anchors now carry no
   class or inline colour at all. Its only remaining effect was out-ranking
   the :hover rule in main.css, so the links could never change colour on
   hover. The base colour it was asserting is what main.css already sets. */

/* Center footer items on mobile */
@media (max-width: 48rem) {
  .footer-inner { text-align: center; }
  .footer-left { display: flex; flex-direction: column; align-items: center; }
  .footer-nav-col { align-items: center; }
}

/* ============================================================
   PAGE HEADER - single image variant
   ============================================================ */

/* The range pages pair a narrow detail frame with a wide one. Pizza Ovens
   has a single usable photograph, so it runs the wide frame full width
   rather than repeating one image twice or padding with an accessory
   cut-out on white. Remove this class from the markup the moment a second
   pizza oven photograph exists. */
.gs-pagehead__media--single { grid-template-columns: minmax(0, 1fr); }

/* ============================================================
   HEADING OUTLINE FIXES
   ============================================================ */

/* These scopes had headings tagged for their visual size rather than
   their place in the outline (h1 -> h4, h2 -> h5), which reads to a
   screen reader as missing sections. The tags now follow the outline;
   these remaps hold the visual size each heading had, per the
   token-remap rule in SYSTEM.md, so nothing moves on screen.

   The three scopes and what each heading used to be:
     .h-as-h5  homepage service list and feature cards     h3 shown as h5
     .h-as-h4  about-us value and principle cards          h2 / h3 shown as h4
   (.h-as-h3 for the privacy policy is retired: see .h-legal-sections.) */

.h-as-h5 h3 {
  font-size: var(--text-h5);
  line-height: var(--leading-h5);
  letter-spacing: 0;
}

.h-as-h4 h2,
.h-as-h4 h3 {
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  letter-spacing: 3px;
}

/* ============================================================
   GALLERY GRID (/gallery/)
   ============================================================ */

/* Layout only, on existing tokens. Three columns on desktop, two on tablet,
   one on phone, with every tile locked to 4:3 so rows stay level whatever
   the source aspect. Portrait and banner sources are re-framed per tile with
   a --focus custom property rather than a new class each. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery-grid > li { margin: 0; }

.gallery-grid figure {
  margin: 0;
  overflow: hidden;
  background: var(--surface-3);
  border-radius: var(--radius-ui);
}

.gallery-grid a {
  display: block;
  line-height: 0;
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  display: block;
  transition: transform .3s ease;
}

.gallery-grid a:hover img,
.gallery-grid a:focus-visible img { transform: scale(1.03); }

.gallery-grid a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.gallery-section + .gallery-section { margin-top: var(--space-xl); }

/* Range button under each gallery section: centred, with clear space above
   the last row of photos. */
.gallery-section-foot { margin-top: var(--space-lg); display: flex; justify-content: center; }

@media (max-width: 64rem) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem) {
  .gallery-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-grid img { transition: none; }
  .gallery-grid a:hover img,
  .gallery-grid a:focus-visible img { transform: none; }
}

/* ---------- Gallery lightbox ---------- */

/* Paired with section 9 of script.js. A native <dialog>, so the top layer,
   focus trap and Escape-to-close all come from the platform; this only
   styles it. */
.lightbox {
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  /* Padding must not add to the 100% or the image is pushed past the fold. */
  box-sizing: border-box;
  padding: var(--space-md);
  border: none;
  background: transparent;
  overflow: hidden;
}

/* Centring goes on [open], not on .lightbox: a closed <dialog> is display:none
   from the UA stylesheet, and a bare display:flex here would override that and
   leave the lightbox permanently on screen. */
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.82);
}

.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-ui);
}

.lightbox-close {
  /* Absolute, not fixed: inside a modal <dialog> iOS Safari resolves a fixed
     child against the viewport before the top layer and drops the button off
     screen. The dialog is already fixed and full bleed, so absolute anchors
     to it correctly everywhere. */
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--on-dark);
  background: var(--brand-3);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}

.lightbox-close:hover { background: var(--brand-3-dark); }

.lightbox-close:focus-visible {
  outline: 2px solid var(--on-dark);
  outline-offset: 3px;
}

/* showModal() paints on the top layer but does not stop the page behind it
   scrolling on iOS. Toggled from script.js while the lightbox is open. */
html.lightbox-open,
body.lightbox-open {
  overflow: hidden;
  touch-action: none;
}

/* ---------- /guides/ ---------- */
/* Two columns on desktop, stacked below 62.5rem. Each column is a stack of
   guide blocks. */
.guide-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); align-items: start; }
.guide-columns-center { align-items: center; }
.guide-col { display: flex; flex-direction: column; gap: var(--space-xl); }
.guide-block h2 { color: var(--ink-heading); }
.guide-eyebrow { display: block; color: var(--brand-3); margin-bottom: var(--space-xs); }
.guide-photo { width: 100%; height: auto; margin-bottom: var(--space-md); border-radius: var(--radius-card); }
.guide-heading-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.guide-logo { width: 4.5rem; height: auto; flex: none; border-radius: var(--radius-ui); }

/* Embedded video, 16:9, sized by the column. */
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--surface-3); border-radius: var(--radius-card); overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Red-bordered warning card. */
.guide-warning { border: 2px solid var(--brand-3); padding: var(--space-ml); background: var(--surface-1); }
.guide-warning-link { font-weight: 700; color: var(--brand-3); text-decoration: underline; text-underline-offset: 0.2em; }
.guide-warning-link:hover,
.guide-warning-link:focus-visible { color: var(--brand-3-dark); }

/* Clearance chart: the SVG is decorative and the table beside it carries the
   same data, so both stay in step. */
.guide-clearance { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-xl); align-items: center; }
.guide-clearance-chart { width: 100%; height: auto; font-family: var(--font-body); }
.gc-label { font-size: 15px; font-weight: 700; fill: var(--ink-1); }
.gc-bar { fill: var(--brand-3); }
.gc-value { font-size: 15px; font-weight: 700; fill: var(--ink-1); }
.gc-value-in { fill: var(--on-dark); text-anchor: end; }
.guide-clearance-table { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
.guide-clearance-table caption { text-align: left; font-size: var(--text-body-sm); color: var(--ink-3); margin-bottom: var(--space-sm); }
.guide-clearance-table th,
.guide-clearance-table td { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--border-1); }
.guide-clearance-table th { font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-3); }
.guide-clearance-table td:first-child { font-weight: 700; color: var(--brand-3); white-space: nowrap; }

@media (max-width: 62.5rem) {
  .guide-columns,
  .guide-clearance { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .guide-col { gap: var(--space-lg); }
}
/* .list-bulleted resets its margins after the spacing utilities load, so the
   gap before the next photo is set here. */
.guide-block .list-bulleted { margin-bottom: var(--space-md); }

/* Two heading steps down for long-form legal pages (/terms/): h2 at h4 size,
   h3 at h5 size, on the same 0.7 heading scale as the tags themselves. The
   size-* utilities are the full type scale, so they would go up, not down. */
.h-step-down h2 { font-size: var(--text-h4); line-height: var(--leading-h4); }
.h-step-down h3 { font-size: var(--text-h5); line-height: var(--leading-h5); }
/* /privacy/ has one level of numbered sections, the same kind of heading as the
   /terms/ clauses, so its h2s take the same h5 size. */
.h-legal-sections h2 { font-size: var(--text-h5); line-height: var(--leading-h5); }