/* ==========================================================================
   Brisbane Best Movers — Material 3 depth & elevation layer
   --------------------------------------------------------------------------
   File: assets/css/bbm-depth-layers.css
   Load: after m3.css, m3-expressive-enhancements.css,
         m3-interactions-perf.css, m3-deep-blue-palette.css and any page
         sheet (for example home-form.css). The sheet only changes surface
         treatment: no markup, layout, copy, JS or colour-role definitions.

   Layer scale (low to high)
     0  page canvas      flat warm paper, no shadow
     1  section mats     low tonal bands with a fine rim and inset bevel
     2  cards            service, truck, aside, area, CTA and FAQ surfaces
     3  quote sheet      the form is the highest content surface on the page
     4  floating nav     sticky app bar and mobile bottom dock
     5  menu dialog      navigation sheet above its scrim

   The palette stays deep blue / warm neutral. Shadows are blue-slate, never
   black, and each tier increases both contact darkness and ambient spread so
   the ordering is legible without decorative clutter. No blur or glass.

   Integration (parent-owned head.php):
     <link rel="stylesheet" href="/assets/css/bbm-depth-layers.css">
   Put it last in <head>, after /assets/css/bbm-expressive-v2.css. On the home
   page, home-form.css is injected at the end of <head>; the .page-home
   selectors below are specific enough to win regardless, but loading this
   file after home-form.css is the cleanest order.
   ========================================================================== */

:root {
  /* Blue-slate shadow ink. Kept as channels so each tier can vary alpha. */
  --dl-ink: 16, 31, 48;
  --dl-blue: 35, 78, 120;

  /* Rim colours: a cool hairline that separates a raised plane from paper. */
  --dl-hairline: color-mix(in srgb, var(--primary) 17%, var(--outline-variant) 83%);
  --dl-hairline-strong: color-mix(in srgb, var(--primary) 28%, var(--outline-variant) 72%);
  --dl-field-rim: color-mix(in srgb, var(--outline) 82%, var(--on-surface-variant) 18%);
  --dl-sheen: inset 0 1px 0 rgba(255, 255, 255, .72);
  --dl-sheen-strong: inset 0 1px 0 rgba(255, 255, 255, .92);

  /* 1 — low bands, chips and quiet controls. */
  --dl-elev-1:
    0 1px 2px rgba(var(--dl-ink), .07),
    0 4px 10px -6px rgba(var(--dl-ink), .14);

  /* 2 — cards and secondary panels: visible contact + a soft ambient fall. */
  --dl-elev-2:
    0 1px 2px rgba(var(--dl-ink), .10),
    0 7px 16px -7px rgba(var(--dl-ink), .17),
    0 22px 44px -24px rgba(var(--dl-blue), .36);

  /* 3 — the quote sheet and large feature panels: a deliberate step up. */
  --dl-elev-3:
    0 2px 4px rgba(var(--dl-ink), .10),
    0 12px 28px -12px rgba(var(--dl-ink), .20),
    0 42px 84px -38px rgba(var(--dl-blue), .48);

  /* A close, coloured contact shadow for the hero form against photography. */
  --dl-elev-quote:
    0 2px 4px rgba(var(--dl-ink), .10),
    0 14px 30px -14px rgba(var(--dl-ink), .18),
    0 46px 90px -42px rgba(var(--dl-blue), .52);

  /* 4 — floating navigation. Closer, darker contact so it clears content. */
  --dl-elev-nav:
    0 2px 4px rgba(var(--dl-ink), .10),
    0 14px 28px -14px rgba(var(--dl-ink), .24),
    0 30px 60px -30px rgba(var(--dl-blue), .34);

  /* 5 — modal sheet; the strongest edge in the system. */
  --dl-elev-dialog:
    -1px 0 0 rgba(var(--dl-ink), .10),
    -18px 0 42px -18px rgba(var(--dl-ink), .28),
    -46px 0 92px -42px rgba(var(--dl-blue), .36);

  --dl-transition: 180ms cubic-bezier(.2, 0, 0, 1);
}

/* --------------------------------------------------------------------------
   1. Page canvas
   The page itself stays flat. A hairline scroll padding keeps sticky-header
   height from covering anchored headings or a focused field.
   -------------------------------------------------------------------------- */
html {
  scroll-padding-top: 96px;
  scroll-padding-bottom: 120px;
}

body.page {
  background-color: var(--surface);
}

/* --------------------------------------------------------------------------
   2. Section mats
   Tonal bands become large, slightly inset planes: a cool rim, a lit top
   edge, side shadow and an expressive M3 corner radius. The page canvas
   stays visible around them, so the band reads as a layer above the page
   rather than a flat strip of colour.
   -------------------------------------------------------------------------- */
.section--low,
.section--mint,
.section--peach {
  position: relative;
  margin-inline: clamp(8px, 1.4vw, 20px);
  margin-block: clamp(10px, 1.3vw, 18px);
  border: 1px solid var(--dl-hairline);
  border-radius: clamp(24px, 2.8vw, 36px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .78),
    inset 0 -1px 0 rgba(var(--dl-ink), .05),
    0 1px 2px rgba(var(--dl-ink), .10),
    0 8px 18px -12px rgba(var(--dl-ink), .22),
    0 28px 56px -32px rgba(var(--dl-blue), .46);
}

/* --------------------------------------------------------------------------
   3. Cards and secondary surfaces
   One consistent resting elevation; interactive cards lift one step on
   hover/focus-within. Borders stay hairline-thin so the shadows do the work.
   -------------------------------------------------------------------------- */
body.page .card,
body.page .truck-card,
body.page .aside-card,
body.page .guide-phase,
body.page .editorial-plate,
body.page .area-band,
body.page .legal-index,
body.page .table-wrap {
  border: 1px solid var(--dl-hairline);
  box-shadow: var(--dl-sheen), var(--dl-elev-2);
}

/* Large dark feature panels keep their own colour treatment; only the
   elevation changes. Borders are left exactly as the base design set them. */
body.page .cta-band {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 3px 6px rgba(var(--dl-ink), .12),
    0 18px 38px -18px rgba(var(--dl-ink), .24),
    0 46px 84px -42px rgba(var(--dl-blue), .50);
}

body.page .service-card--feature {
  border-color: transparent;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .12) inset,
    0 3px 6px rgba(var(--dl-ink), .12),
    0 18px 38px -18px rgba(var(--dl-ink), .28),
    0 44px 80px -38px rgba(var(--dl-blue), .50);
}

body.page .service-card--wide {
  border-color: color-mix(in srgb, var(--tertiary) 20%, var(--surface-lowest));
}

.card,
.truck-card {
  transition:
    transform var(--dl-transition),
    box-shadow var(--dl-transition),
    border-color var(--dl-transition),
    border-radius var(--dl-transition);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.page .card:hover,
  body.page .truck-card:hover,
  body.page .service-card:hover {
    border-color: var(--dl-hairline-strong);
    box-shadow: var(--dl-sheen), var(--dl-elev-3);
  }
}

/* Keyboard users get the lift too, but without movement. The global 3 px
   copper focus ring remains untouched. */
body.page .card:focus-within,
body.page .truck-card:focus-within,
html.js body.page .card:focus-within,
html.js body.page .truck-card:focus-within {
  border-color: var(--dl-hairline-strong);
  box-shadow: var(--dl-sheen), var(--dl-elev-3);
}

.card__icon {
  box-shadow:
    var(--dl-sheen-strong),
    0 2px 4px rgba(var(--dl-ink), .10),
    0 9px 18px -12px rgba(var(--dl-ink), .45);
}

.service-card__art {
  box-shadow:
    inset 0 0 0 1px rgba(var(--dl-ink), .12),
    inset 0 1px 0 rgba(255, 255, 255, .38);
}

/* Open FAQ rows are small raised panels; closed rows stay quiet list rules. */
.faq-item[open] {
  border: 1px solid var(--dl-hairline);
  box-shadow: var(--dl-sheen), var(--dl-elev-1);
}

/* Chips are the smallest raised objects; a single contact shadow is enough. */
.chip,
.hero__meta li,
.split__badge,
.service-row__num,
.step__num,
.truck-card__tag {
  box-shadow: var(--dl-sheen), var(--dl-elev-1);
}

/* Large media is a framed plate rather than a card. */
.split__media,
.area-band__media,
.service-row__media {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .50),
    var(--dl-elev-2);
}

/* --------------------------------------------------------------------------
   4. Quote sheet — the primary conversion surface
   The form must read as the most important raised sheet, with fields visibly
   recessed inside it. Nothing here moves or fades on scroll.
   -------------------------------------------------------------------------- */
.quote-card,
body.page-home .hero--scene .home-quote-card,
body.page .hero--scene .home-quote-card {
  border: 1px solid var(--dl-hairline-strong);
  box-shadow:
    var(--dl-sheen-strong),
    var(--dl-elev-quote);
}

/* The tilted backing sheet behind the hero form is a layer, not a glass
   pane: make it opaque so it reads as a deliberate sheet below the form. */
body.page-home .hero__visual--quote::after {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--outline-variant) 82%);
  background: linear-gradient(160deg, var(--primary-container), var(--surface-lowest) 74%);
}

.quote-card::before {
  box-shadow: 0 2px 6px -3px rgba(var(--dl-blue), .45);
}

/* The form's own panel: a quiet inset well below the sheet, not a second card. */
.quote-form,
.page-home .home-quote-form {
  position: relative;
}

/* Recessed fields: darker top edge, cool rim, pale blue control fill. The
   1.5 px border is kept from the base sheet but pulled to a 3:1+ slate. */
.field input,
.field select,
.field textarea,
.page-home .home-quote-form .field input {
  border-color: var(--dl-field-rim);
  background-color: color-mix(in srgb, var(--surface-lowest) 86%, var(--primary-container) 14%);
  box-shadow:
    inset 0 2px 5px -2px rgba(var(--dl-ink), .20),
    inset 0 1px 0 rgba(var(--dl-ink), .05);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--on-surface-variant);
}

/* Strong, stable focus: a white gap keeps the primary ring readable against
   both the field fill and the white card. No layout shift, no scroll effect. */
.field input:focus,
.field select:focus,
.field textarea:focus,
.page-home .home-quote-form .field input:focus {
  border-color: var(--primary);
  background-color: var(--surface-lowest);
  box-shadow:
    0 0 0 2px var(--surface-lowest),
    0 0 0 4px var(--primary),
    inset 0 1px 2px rgba(var(--dl-ink), .05);
}

.field input.invalid:focus,
.field select.invalid:focus,
.field textarea.invalid:focus,
.page-home .home-quote-form .field input.invalid:focus {
  border-color: var(--error);
  box-shadow:
    0 0 0 2px var(--surface-lowest),
    0 0 0 4px var(--error),
    inset 0 1px 2px rgba(var(--dl-ink), .05);
}

/* The home form's master selector is more specific than the shared invalid
   rule, so repeat the error rim here. All empty required fields must read as
   failed, not only the one that received focus. */
.page-home .home-quote-form .field input.invalid {
  border-color: var(--error);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--field-placeholder, var(--on-surface-variant));
  opacity: 1;
}

/* Keep a focused control clear of the sticky header and the mobile dock. */
.field input,
.field select,
.field textarea {
  scroll-margin-block: 120px;
}

/* Status and legal notices stay fully opaque and read as raised slips. */
.form-status,
.preview-callout,
.legal-note {
  border: 1px solid color-mix(in srgb, var(--tertiary) 35%, transparent);
  border-left: 4px solid var(--tertiary);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 1px 2px rgba(var(--dl-ink), .06),
    0 8px 18px -14px rgba(var(--dl-ink), .30);
}

/* Primary actions sit on the sheet, so they get a short, coloured contact
   shadow. Outlined and ghost actions stay flat by design. */
.btn--filled,
.btn--tonal,
.btn--mint {
  box-shadow:
    0 1px 2px rgba(var(--dl-ink), .10),
    0 7px 16px -10px rgba(var(--dl-blue), .55),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn--outline,
.btn--ghost {
  box-shadow: none;
}

@media (hover: hover) {
  .btn--filled:hover,
  .btn--tonal:hover,
  .btn--mint:hover {
    box-shadow:
      0 2px 4px rgba(var(--dl-ink), .12),
      0 10px 22px -12px rgba(var(--dl-blue), .60),
      inset 0 1px 0 rgba(255, 255, 255, .20);
  }
}

.btn--filled:active,
.btn--tonal:active,
.btn--mint:active {
  box-shadow:
    0 1px 1px rgba(var(--dl-ink), .12),
    inset 0 1px 2px rgba(var(--dl-ink), .10);
}

/* --------------------------------------------------------------------------
   5. Floating navigation
   The sticky bar is a thin raised rail; the phone dock is a true floating
   object. Both are opaque — no glass, no backdrop filter.
   -------------------------------------------------------------------------- */
.app-bar {
  background: color-mix(in srgb, var(--surface-lowest) 92%, var(--primary-container) 8%);
  border-bottom: 1px solid var(--dl-hairline);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .65) inset,
    0 1px 2px rgba(var(--dl-ink), .10),
    0 6px 14px -8px rgba(var(--dl-ink), .18),
    0 18px 34px -26px rgba(var(--dl-ink), .30);
}

.app-bar.is-scrolled {
  border-bottom-color: var(--dl-hairline-strong);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .65) inset,
    0 3px 6px rgba(var(--dl-ink), .10),
    0 14px 28px -14px rgba(var(--dl-ink), .24),
    0 26px 48px -30px rgba(var(--dl-ink), .30);
}

.app-bar__cta {
  box-shadow:
    0 1px 2px rgba(var(--dl-ink), .12),
    0 7px 14px -9px rgba(var(--dl-blue), .50);
}

.bottom-nav {
  background: var(--surface-lowest);
  border: 1px solid var(--dl-hairline-strong);
  box-shadow:
    var(--dl-sheen),
    0 -2px 6px rgba(var(--dl-ink), .06),
    var(--dl-elev-nav);
}

.bottom-nav a.is-active {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .60);
}

.bottom-nav__quote-icon {
  box-shadow:
    0 2px 4px rgba(var(--dl-ink), .16),
    0 10px 20px -8px rgba(var(--dl-blue), .52),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* --------------------------------------------------------------------------
   6. Menu dialog
   Deepest layer in the system. The scrim is a flat, opaque-enough wash; the
   sheet has a crisp leading edge plus a long falloff so it visibly sits above
   the page rather than blending into it.
   -------------------------------------------------------------------------- */
.nav-scrim {
  background: rgba(14, 25, 40, .54);
}

.nav-sheet {
  background: var(--surface-lowest);
  border-left: 1px solid var(--dl-hairline-strong);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, .80),
    var(--dl-elev-dialog);
}

.nav-sheet__head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--dl-hairline);
}

.nav-sheet__foot {
  border-top: 1px solid var(--dl-hairline);
}

/* On phones the dialog still floats: a narrow scrim gutter and all-round
   radius keep the menu legible as a sheet above the page, not a new page. */
@media (max-width: 520px) {
  .nav-sheet {
    top: 10px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 8px;
    width: auto;
    gap: 14px;
    padding: 14px 18px 16px;
    border: 1px solid var(--dl-hairline-strong);
    border-radius: 26px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .80),
      0 0 0 1px rgba(255, 255, 255, .10),
      var(--dl-elev-dialog),
      0 30px 80px -40px rgba(0, 0, 0, .55);
  }

  .nav-sheet__links a {
    min-height: 52px;
  }

  .nav-sheet__foot {
    gap: 10px;
  }
}

/* A quote page is a single-task screen: the floating dock would cover the
   form at narrow heights, so keep the conversion surface unobstructed. The
   header menu remains available for navigation. */
@media (max-width: 760px) {
  .page-quote .bottom-nav {
    display: none;
  }

  body.page-quote {
    padding-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   7. Preference and output guards
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.page .card,
  body.page .truck-card,
  .service-card,
  .btn,
  .bottom-nav,
  .nav-sheet {
    transition: none !important;
  }

  body.page .card:hover,
  body.page .truck-card:hover,
  .service-card:hover {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  .section--low,
  .section--mint,
  .section--peach,
  .card,
  .truck-card,
  .aside-card,
  .guide-phase,
  .editorial-plate,
  .area-band,
  .cta-band,
  .legal-index,
  .table-wrap,
  .quote-card,
  .page-home .home-quote-card {
    border: 2px solid var(--outline);
  }

  .field input,
  .field select,
  .field textarea {
    border-width: 2px;
  }

  .app-bar,
  .bottom-nav {
    border-bottom-width: 2px;
  }
}

@media (forced-colors: active) {
  /* System colours replace the tonal/mid shadows. Keep every layer edge
     explicit so regions and controls do not collapse into one another. */
  .app-bar,
  .bottom-nav,
  .nav-sheet,
  .section--low,
  .section--mint,
  .section--peach,
  .card,
  .truck-card,
  .aside-card,
  .guide-phase,
  .editorial-plate,
  .area-band,
  .legal-index,
  .table-wrap,
  .quote-card,
  .page-home .home-quote-card,
  .faq-item[open],
  .form-status,
  .preview-callout,
  .legal-note {
    border: 1px solid CanvasText;
    box-shadow: none;
  }

  .service-card--feature,
  .cta-band {
    border: 2px solid CanvasText;
    box-shadow: none;
  }

  .field input,
  .field select,
  .field textarea {
    border: 1px solid CanvasText;
    background: Field;
    color: FieldText;
    box-shadow: none;
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    outline: 3px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  .nav-scrim {
    background: Canvas;
  }

  .btn--filled,
  .btn--tonal,
  .btn--mint {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
  }
}

@media print {
  .card,
  .truck-card,
  .aside-card,
  .guide-phase,
  .editorial-plate,
  .area-band,
  .cta-band,
  .legal-index,
  .table-wrap,
  .quote-card,
  .page-home .home-quote-card,
  .app-bar,
  .bottom-nav,
  .nav-sheet {
    box-shadow: none !important;
  }
}