/*
Theme Name: LB Clearances
Theme URI:
Author: Harry Marah
Author URI:
Description: Custom FSE block theme for LB Clearances.
Version: 1.0.4
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lb-clearances
*/

/*
 * style.css is for genuine edge cases only.
 * All design tokens live in theme.json.
 * All layout and component styles live in theme.json or block patterns.
 */

/* -----------------------------------------------------------------------
 * Header — logo true-centring
 *
 * Switch the inner row from flex to a 1fr / auto / 1fr grid so the logo
 * column is always at the geometric centre regardless of nav item count.
 * The nav blocks already carry inline justify-content from block attrs,
 * so their links stay flush against the logo on each side.
 * ----------------------------------------------------------------------- */
.lbc-header__inner {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* -----------------------------------------------------------------------
 * Container width block styles — core/group only
 *
 * These override the CSS variable that WordPress's constrained layout
 * system uses for inner content width. The block background stays full
 * width; only the content INSIDE the group is capped at the chosen size.
 *
 * Usage: add a Group block, set its Layout to "Constrained" (the
 * "Inner blocks use content width" toggle), then pick a style preset
 * from the Styles panel in the sidebar.
 *
 * Do NOT apply these to Cover blocks — Cover width is controlled by
 * the alignment toolbar (full / wide / default).
 * ----------------------------------------------------------------------- */
.wp-block-group.is-layout-constrained.is-style-container-xl {
  --wp--style--global--content-size: var(--wp--custom--size--container-xl);
  --wp--style--global--wide-size: var(--wp--custom--size--container-xl);
}

.wp-block-group.is-layout-constrained.is-style-container {
  --wp--style--global--content-size: var(--wp--custom--size--container);
  --wp--style--global--wide-size: var(--wp--custom--size--container);
}

.wp-block-group.is-layout-constrained.is-style-container-s {
  --wp--style--global--content-size: var(--wp--custom--size--container-s);
  --wp--style--global--wide-size: var(--wp--custom--size--container-s);
}

/* -----------------------------------------------------------------------
 * About section — CSS grid 50/50 split, bypasses WP flex columns entirely
 * ----------------------------------------------------------------------- */
.lbc-about > .wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 0 !important;
  align-items: stretch;
}
.lbc-about .wp-block-columns > .wp-block-column {
  min-width: 0;
}
.lbc-about .wp-block-cover {
  min-height: 100% !important;
}

/* On screens wider than 1440px, grow the right padding so the text
   stays within the 1440px content boundary — same offset formula
   used by the services and testimonials grids. */
.lbc-about .wp-block-columns > .wp-block-column:last-child {
  padding-right: max(
    var(--wp--preset--spacing--800),
    calc((100vw - 1440px) / 2 + var(--wp--preset--spacing--800))
  ) !important;
}

/* -----------------------------------------------------------------------
 * Services, Testimonials, Locations — CSS grid layouts
 * These sections use spanning tiles that can't be expressed via block
 * settings alone. All blocks inside are direct grid children.
 * ----------------------------------------------------------------------- */

.lbc-services-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 400px;
  padding-inline: max(0px, calc((100vw - 1440px) / 2));
}
.lbc-services-header {
  grid-column: span 2;
}

/* Tile flex centering — replaces removed block layout attribute */
.lbc-services-grid > .wp-block-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Service icon images — enforce consistent size regardless of SVG dimensions */
.lbc-services-grid .lbc-service-icon {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto !important;
}
.lbc-services-grid .lbc-service-icon img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
}

/* -----------------------------------------------------------------------
 * Service tile hover — description reveal
 * Description paragraphs are always hidden in flow; on pointer devices
 * they expand on hover as the icon fades and the flex centering naturally
 * shifts the content group upward.
 * ----------------------------------------------------------------------- */

/* Base: description collapsed and invisible on all devices */
.lbc-service-desc {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0 !important;
  font-weight: 300 !important;
  font-size: 1rem !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.55 !important;
}

/* Tiles need overflow:hidden to clip during transition */
.lbc-services-grid > .wp-block-group:not(.lbc-services-header) {
  overflow: hidden;
}

/* Hover reveal — pointer devices only */
@media (hover: hover) and (pointer: fine) {
  .lbc-services-grid
    > .wp-block-group:not(.lbc-services-header)
    .lbc-service-icon {
    transition:
      transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.45s ease;
  }

  .lbc-services-grid
    > .wp-block-group:not(.lbc-services-header):hover
    .lbc-service-icon {
    transform: scale(0.55);
    opacity: 0.9;
  }

  .lbc-service-desc {
    transition:
      max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.35s ease 0.1s,
      margin-top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .lbc-services-grid
    > .wp-block-group:not(.lbc-services-header):hover
    .lbc-service-desc {
    max-height: 140px;
    opacity: 1;
    margin-top: var(--wp--preset--spacing--400) !important;
  }
}

.lbc-testimonials-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(400px, auto);
  padding-inline: max(0px, calc((100vw - 1440px) / 2));
}
.lbc-testimonials-header {
  grid-column: span 2;
  grid-row: span 2;
}

/* Tile flex centering — replaces removed block layout attribute */
.lbc-testimonials-grid > .wp-block-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* -----------------------------------------------------------------------
 * Testimonials full-page grid
 * ----------------------------------------------------------------------- */
.lbc-testimonials-full {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-inline: max(0px, calc((100vw - 1440px) / 2));
}

.lbc-testimonials-full > .wp-block-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lbc-testimonials-full .lbc-testimonials-wide {
  grid-column: span 2;
  align-items: flex-start;
}

.lbc-locations-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 600px;
}
.lbc-locations-map,
.lbc-locations-text {
  grid-column: span 2;
}

/* Image block fills its grid cell */
.lbc-locations-map {
  overflow: hidden;
  display: flex;
}
.lbc-locations-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Text panel flex centering — replaces removed block layout attribute */
.lbc-locations-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-right: max(
    var(--wp--preset--spacing--800),
    calc((100vw - 1440px) / 2 + var(--wp--preset--spacing--800))
  ) !important;
}

/* -----------------------------------------------------------------------
 * Service Detail — labelled row layout (name left, description right)
 * ----------------------------------------------------------------------- */
.lbc-service-detail {
  padding-inline: max(
    var(--wp--preset--spacing--800),
    calc((100vw - 1440px) / 2 + var(--wp--preset--spacing--800))
  );
}

.lbc-service-detail__intro {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--wp--preset--spacing--700);
}

.lbc-service-detail__item {
  display: grid !important;
  grid-template-columns: 1fr 2fr;
  gap: var(--wp--preset--spacing--700);
  align-items: baseline;
  border-top: 1px solid rgba(0, 43, 91, 0.15);
  padding-block: var(--wp--preset--spacing--600);
}

.lbc-service-detail__items > .wp-block-group:last-child {
  border-bottom: 1px solid rgba(0, 43, 91, 0.15);
}

@media (max-width: 768px) {
  .lbc-service-detail__item {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--300);
  }
}

/* -----------------------------------------------------------------------
 * Service Links — 2×2 card grid linking to service sub-pages
 * ----------------------------------------------------------------------- */

.lbc-service-links {
  padding-inline: max(
    var(--wp--preset--spacing--800),
    calc((100vw - 1440px) / 2 + var(--wp--preset--spacing--800))
  );
}

.lbc-service-links__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--600);
}

.lbc-service-links__card {
  display: flex !important;
  flex-direction: column;
  border-top: 3px solid #ffc700;
  transition: box-shadow 0.25s ease;
}

.lbc-service-links__card:hover {
  box-shadow: 0 8px 32px rgba(0, 43, 91, 0.1);
}

.lbc-service-links__cta a {
  position: relative;
  display: inline-block;
  transition:
    letter-spacing 0.25s ease,
    color 0.2s ease;
}

.lbc-service-links__cta a:hover {
  color: #ffc700 !important;
  letter-spacing: 2.5px;
}

@media (max-width: 768px) {
  .lbc-service-links__grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------
 * Commitments — three-column grid
 * ----------------------------------------------------------------------- */
.lbc-commitments {
  padding-inline: max(
    var(--wp--preset--spacing--800),
    calc((100vw - 1440px) / 2 + var(--wp--preset--spacing--800))
  );
}

.lbc-commitments__header {
  text-align: center;
}

.lbc-commitments__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--500);
}

.lbc-commitments__tile {
  border-top: 3px solid #ffc700;
}

@media (max-width: 900px) {
  .lbc-commitments__grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------
 * Values — About page editorial 2×2 grid
 * ----------------------------------------------------------------------- */

.lbc-values {
  padding-inline: max(
    var(--wp--preset--spacing--800),
    calc((100vw - 1440px) / 2 + var(--wp--preset--spacing--800))
  );
}

.lbc-values__header {
  text-align: center;
}

.lbc-values__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--700) var(--wp--preset--spacing--800);
}

.lbc-values__item {
  border-top: 1px solid rgba(0, 43, 91, 0.15);
  padding-top: var(--wp--preset--spacing--600);
}

@media (max-width: 768px) {
  .lbc-values__grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------
 * Contact split — details left, form right
 * ----------------------------------------------------------------------- */

.lbc-contact {
  padding-inline: max(
    var(--wp--preset--spacing--800),
    calc((100vw - 1440px) / 2 + var(--wp--preset--spacing--800))
  );
}

.lbc-contact__inner {
  display: grid !important;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--wp--preset--spacing--800);
  align-items: start;
}

/* Form panel — navy with gold top accent, matches header/footer brand treatment */
.lbc-contact__form {
  background-color: #002b5b !important;
  border-top: 3px solid #ffc700;
}

/* "Enquiry Form" overline — muted on dark background */
.lbc-contact__form > p.has-text-color {
  color: rgba(245, 245, 245, 0.5) !important;
}

/* WP constrained layout can apply max-width to shortcode blocks — break out */
.lbc-contact__form .wp-block-shortcode,
.lbc-contact__form .wpcf7 {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/*
 * CF7 puts ALL fields inside ONE <p>, separated by <br /> tags:
 *   form > p > span.wrap + br + span.wrap + br + ... + input[submit]
 *
 * Grid goes on the <p>. The <br> tags must be hidden — as grid items
 * they consume column slots and break the pairing.
 */
.lbc-contact__form .wpcf7 form > p {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  align-items: start;
  margin: 0;
}

.lbc-contact__form .wpcf7 form > p > br {
  display: none;
}

/* control-wrap is an inline <span> — force block so width: 100% fills the cell */
.lbc-contact__form .wpcf7 .wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
  margin: 0;
}

/* date and textarea: full width across both columns */
.lbc-contact__form .wpcf7 .wpcf7-form-control-wrap:has(input[type='date']),
.lbc-contact__form .wpcf7 .wpcf7-form-control-wrap:has(textarea) {
  grid-column: 1 / -1;
}

/* submit sits directly inside <p>, not in a wrap — also full width */
.lbc-contact__form .wpcf7 form > p > input[type='submit'] {
  grid-column: 1 / -1;
}

/* Reset <p> margin (browser default adds top/bottom space) */
.lbc-contact__form .wpcf7 form p {
  margin: 0;
}

/* All inputs, select, textarea — white on navy */
.lbc-contact__form .wpcf7 input[type='text'],
.lbc-contact__form .wpcf7 input[type='email'],
.lbc-contact__form .wpcf7 input[type='tel'],
.lbc-contact__form .wpcf7 input[type='date'],
.lbc-contact__form .wpcf7 select,
.lbc-contact__form .wpcf7 textarea {
  width: 100% !important;
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 0.8rem 1rem;
  font-family: inherit;
  font-size: 15px;
  font-weight: 300;
  color: #333333;
  outline: none;
  box-sizing: border-box;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Focus — gold border + soft gold glow */
.lbc-contact__form .wpcf7 input:focus,
.lbc-contact__form .wpcf7 select:focus,
.lbc-contact__form .wpcf7 textarea:focus {
  border-color: #ffc700;
  box-shadow: 0 0 0 3px rgba(255, 199, 0, 0.2);
}

/* Select — custom chevron to replace OS arrow removed by appearance:none */
.lbc-contact__form .wpcf7 select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23002b5b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Date picker — style the calendar icon to feel intentional */
.lbc-contact__form
  .wpcf7
  input[type='date']::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
}
.lbc-contact__form
  .wpcf7
  input[type='date']::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.lbc-contact__form .wpcf7 textarea {
  min-height: 140px;
  resize: vertical;
}

/* Submit — gold, inverts to outlined on hover */
.lbc-contact__form .wpcf7 input[type='submit'] {
  background-color: #ffc700;
  color: #002b5b;
  border: 2px solid #ffc700;
  padding: 0.85rem 2rem;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  margin-top: 0.5rem;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.lbc-contact__form .wpcf7 input[type='submit']:hover {
  background-color: transparent;
  color: #ffc700;
}

/* CF7 validation — visible on dark background */
.lbc-contact__form .wpcf7-not-valid-tip {
  color: #ff8a80;
  font-size: 12px;
  margin-top: 0.3rem;
}

.lbc-contact__form .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  font-size: 13px;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: rgba(245, 245, 245, 0.75);
}

.lbc-contact__form .wpcf7-mail-sent-ok {
  border-color: #ffc700 !important;
  color: #ffc700 !important;
}

@media (max-width: 900px) {
  .lbc-contact__inner {
    grid-template-columns: 1fr;
  }
}

/* Mid-size screens: 3-column grid */
@media (max-width: 1200px) {
  .lbc-services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lbc-services-header {
    grid-column: span 2;
  }
  /* Reorder tiles so no two same-colour tiles share an edge.
     Visual sequence: Header → Clearances(N) → Storage(N→col3) → Logistics(G) → Overseas(Y) → Valuations(G) → Waste(N)
     Row 1: Header(2-col) | Clearances(N)
     Row 2: Storage(N)    | Logistics(G) | Overseas(Y)
     Row 3: Valuations(G) | Waste(N) */
  .lbc-services-grid > :nth-child(1) { order: 1; } /* header */
  .lbc-services-grid > :nth-child(2) { order: 2; } /* clearances */
  .lbc-services-grid > :nth-child(3) { order: 4; } /* logistics */
  .lbc-services-grid > :nth-child(4) { order: 6; } /* valuations */
  .lbc-services-grid > :nth-child(5) { order: 3; } /* storage */
  .lbc-services-grid > :nth-child(6) { order: 5; } /* overseas */
  .lbc-services-grid > :nth-child(7) { order: 7; } /* waste */
}

/* Tablet / mobile: 2-column grid */
@media (max-width: 900px) {
  .lbc-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 300px;
  }
  /* Reorder to break navy+navy vertical stack in right column.
     Visual sequence: Header → Logistics(G) → Clearances(N) → Storage(N) → Valuations(G) → Overseas(Y) → Waste(N)
     Row 2: Logistics(G)  | Clearances(N)
     Row 3: Storage(N)    | Valuations(G)
     Row 4: Overseas(Y)   | Waste(N) */
  .lbc-services-grid > :nth-child(1) { order: 1; } /* header */
  .lbc-services-grid > :nth-child(2) { order: 3; } /* clearances */
  .lbc-services-grid > :nth-child(3) { order: 2; } /* logistics */
  .lbc-services-grid > :nth-child(4) { order: 5; } /* valuations */
  .lbc-services-grid > :nth-child(5) { order: 4; } /* storage */
  .lbc-services-grid > :nth-child(6) { order: 6; } /* overseas */
  .lbc-services-grid > :nth-child(7) { order: 7; } /* waste */
  .lbc-testimonials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .lbc-testimonials-header {
    grid-column: span 2;
    grid-row: span 1;
  }
  .lbc-testimonials-full {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lbc-testimonials-full .lbc-testimonials-wide {
    grid-column: span 2;
  }
  .lbc-locations-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .lbc-locations-map,
  .lbc-locations-text {
    grid-column: span 1;
    min-height: 350px;
  }
}

/* Large phones (≤430px): services drops to 2 columns */
@media (max-width: 430px) {
  .lbc-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 300px;
  }
  .lbc-services-grid .has-heading-font-size {
    font-size: 15px !important;
    letter-spacing: 3px !important;
  }
}

/* Super-small phones (≤360px): services drops to 1 column */
@media (max-width: 360px) {
  .lbc-services-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
  .lbc-services-header {
    grid-column: span 1;
  }
}

/* Mobile: single column */
@media (max-width: 600px) {
  .lbc-testimonials-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .lbc-testimonials-header {
    grid-column: span 1;
  }
  .lbc-testimonials-full {
    grid-template-columns: minmax(0, 1fr);
  }
  .lbc-testimonials-full .lbc-testimonials-wide {
    grid-column: span 1;
  }
}

/* -----------------------------------------------------------------------
 * Responsive font sizes — override preset custom properties at breakpoints
 * ----------------------------------------------------------------------- */
@media (max-width: 1279px) {
  :root {
    --wp--preset--font-size--display-xl: 80px;
    --wp--preset--font-size--display: 64px;
    --wp--preset--font-size--display-s: 48px;
    --wp--preset--font-size--heading: 32px;
  }
}

@media (max-width: 980px) {
  :root {
    --wp--preset--font-size--display-xl: 64px;
    --wp--preset--font-size--display: 48px;
    --wp--preset--font-size--display-s: 40px;
    --wp--preset--font-size--heading: 28px;
    --wp--preset--font-size--heading-s: 26px;
    --wp--preset--font-size--body-l: 22px;
  }
}

@media (max-width: 640px) {
  :root {
    --wp--preset--font-size--display-xl: 48px;
    --wp--preset--font-size--display: 40px;
    --wp--preset--font-size--display-s: 32px;
    --wp--preset--font-size--heading: 24px;
    --wp--preset--font-size--heading-s: 22px;
    --wp--preset--font-size--body-l: 20px;
    --wp--preset--font-size--body: 18px;
  }
}

/* -----------------------------------------------------------------------
 * Responsive spacing — override named spacing aliases at breakpoints
 * ----------------------------------------------------------------------- */
@media (max-width: 1279px) {
  :root {
    --wp--custom--spacing--container-x-padding: var(--wp--preset--spacing--700);
    --wp--custom--spacing--container-y-padding: var(--wp--preset--spacing--900);
    --wp--custom--spacing--hero-y-padding: var(--wp--preset--spacing--800);
    --wp--custom--spacing--divided-content-x-spacing: var(
      --wp--preset--spacing--800
    );
    --wp--custom--spacing--g2-block-margin: var(--wp--preset--spacing--700);
    --wp--custom--spacing--card-padding-spacious: var(
      --wp--preset--spacing--600
    );
    --wp--custom--spacing--grid-spacious: var(--wp--preset--spacing--700);
    --wp--custom--spacing--h-medium-margin: var(--wp--preset--spacing--600);
  }
}

@media (max-width: 980px) {
  :root {
    --wp--custom--spacing--container-x-padding: var(--wp--preset--spacing--600);
    --wp--custom--spacing--container-y-padding: var(--wp--preset--spacing--800);
    --wp--custom--spacing--hero-y-padding: var(--wp--preset--spacing--700);
    --wp--custom--spacing--divided-content-x-spacing: var(
      --wp--preset--spacing--700
    );
    --wp--custom--spacing--g2-block-margin: var(--wp--preset--spacing--600);
    --wp--custom--spacing--card-padding-spacious: var(
      --wp--preset--spacing--500
    );
    --wp--custom--spacing--card-padding-default: var(
      --wp--preset--spacing--400
    );
    --wp--custom--spacing--grid-spacious: var(--wp--preset--spacing--600);
    --wp--custom--spacing--grid-default: var(--wp--preset--spacing--500);
    --wp--custom--spacing--h-medium-margin: var(--wp--preset--spacing--500);
    --wp--custom--spacing--h-small-margin: var(--wp--preset--spacing--400);
  }
}

@media (max-width: 640px) {
  :root {
    --wp--custom--spacing--container-x-padding: var(--wp--preset--spacing--400);
    --wp--custom--spacing--container-y-padding: var(--wp--preset--spacing--700);
    --wp--custom--spacing--hero-y-padding: var(--wp--preset--spacing--600);
    --wp--custom--spacing--divided-content-x-spacing: var(
      --wp--preset--spacing--500
    );
    --wp--custom--spacing--g2-block-margin: var(--wp--preset--spacing--500);
    --wp--custom--spacing--card-padding-spacious: var(
      --wp--preset--spacing--400
    );
    --wp--custom--spacing--card-padding-default: var(
      --wp--preset--spacing--300
    );
    --wp--custom--spacing--card-padding-compact: var(
      --wp--preset--spacing--300
    );
    --wp--custom--spacing--grid-spacious: var(--wp--preset--spacing--500);
    --wp--custom--spacing--grid-default: var(--wp--preset--spacing--400);
    --wp--custom--spacing--h-medium-margin: var(--wp--preset--spacing--400);
    --wp--custom--spacing--h-small-margin: var(--wp--preset--spacing--300);
    --wp--custom--spacing--image-margin: var(--wp--preset--spacing--300);
  }
}

/* -----------------------------------------------------------------------
 * Header — sticky + scroll-shrink logo
 *
 * position:sticky on .lbc-header itself won't work because WordPress wraps
 * template parts in a short .wp-block-template-part div (same height as the
 * header). We target that wrapper with :has() so the full-page containing
 * block is used instead.
 * ----------------------------------------------------------------------- */
.wp-block-template-part:has(.lbc-header) {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Remove WP's inline border-bottom — replaced by the ::after scroll indicator */
.lbc-header {
  position: relative;
  border-bottom: none !important;
}

/* Scroll progress bar — gold fills from left, barely-visible white is the track */
.lbc-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    #ffc700 var(--lbc-scroll-pct, 0%),
    rgba(255, 255, 255, 0.2) var(--lbc-scroll-pct, 0%)
  );
  pointer-events: none;
}

/* Header inner — override WP's tight inline padding and add a transition
   so the header compresses smoothly when the page is scrolled */
.lbc-header__inner {
  padding-block: 20px !important;
  transition: padding-block 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lbc-header.is-scrolled .lbc-header__inner {
  padding-block: 10px !important;
}

/* Logo — enforce size via CSS so block attribute / DB template can't override.
   Transition on both the wrapper and the img so WP's inline style is animated. */
.lbc-header .wp-block-site-logo {
  width: 110px !important;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lbc-header .wp-block-site-logo img {
  width: 110px !important;
  height: auto !important;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrolled state — logo and nav shrink */
.lbc-header.is-scrolled .wp-block-site-logo,
.lbc-header.is-scrolled .wp-block-site-logo img {
  width: 80px !important;
}
.lbc-header .wp-block-navigation-item__content {
  font-size: 18px;
  transition: font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lbc-header.is-scrolled .wp-block-navigation-item__content {
  font-size: 15px !important;
}

/* Admin bar — offset the sticky header so it doesn't sit behind the WP toolbar */
.admin-bar .wp-block-template-part:has(.lbc-header) {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .wp-block-template-part:has(.lbc-header) {
    top: 46px;
  }
}

/* Header nav — center-out underline
 * A 2px gold line starts at zero width from the centre of each link
 * and expands symmetrically outward to full width on hover.
 * ----------------------------------------------------------------------- */
.lbc-header .wp-block-navigation-item__content {
  position: relative;
}
.lbc-header .wp-block-navigation-item__content::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffc700;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1; /* paint above the dropdown panel which is later in DOM order */
}
.lbc-header .wp-block-navigation-item__content:hover::before {
  transform: scaleX(1);
}

/* Services item: suppress the a-level underline and replace with one on
   the li itself so it spans text + chevron.
   bottom:-2px places the strip's top edge at li.bottom = panel top:100%,
   so the gold strip and the panel's border-top sit at the exact same y. */
.lbc-header
  .wp-block-navigation-submenu
  > .wp-block-navigation-item__content::before {
  display: none !important;
}
.lbc-header .wp-block-navigation-submenu::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffc700;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3; /* above WP's z-index:2 on the panel body */
}
.lbc-header .wp-block-navigation-submenu:hover::after,
.lbc-header .wp-block-navigation-submenu:focus-within::after {
  transform: scaleX(1);
}

/* -----------------------------------------------------------------------
 * Header — desktop nav: gap between top-level items
 * ----------------------------------------------------------------------- */
.lbc-header .wp-block-navigation .wp-block-navigation__container {
  gap: 2rem !important;
}

/* Anchor the submenu to its parent li (not the header), and centre the chevron */
.lbc-header .wp-block-navigation-item.has-child {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

/* -----------------------------------------------------------------------
 * Header — Services submenu dropdown (desktop)
 * Navy panel, full-opacity white text, gold left-bar accent on hover.
 * ----------------------------------------------------------------------- */

/* Navy background override — WP's block stylesheet defaults to a light bg */
.lbc-header
  .wp-block-navigation-item.has-child
  .wp-block-navigation__submenu-container {
  position: absolute !important; /* ensure it's not in normal flow */
  width: max-content !important; /* shrink to widest item */
  max-width: 260px !important; /* hard cap — WP's items-justified-right sets right:0 which can stretch the panel */
  background: #002b5b !important;
  border: none !important;
  border-top: 2px solid #ffc700 !important;
  border-radius: 0 !important;
  min-width: 0 !important; /* cancel WP's min-width:200px on the visible state */
  padding: 0.35rem 0 0.6rem !important;
  left: 0 !important;
  right: auto !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28) !important;
  transform: translateY(-4px);
  /* Exit: fade + slide out quickly, no delay */
  transition:
    opacity 0.15s ease,
    visibility 0s linear 0.15s,
    transform 0.15s ease !important;
}

.lbc-header
  .wp-block-navigation-item.has-child:hover
  .wp-block-navigation__submenu-container,
.lbc-header
  .wp-block-navigation-item.has-child:focus-within
  .wp-block-navigation__submenu-container {
  transform: translateY(0) !important;
  /* Entrance: wait for the underline animation (0.35s) to finish first */
  transition:
    opacity 0.2s ease 0.35s,
    visibility 0s linear 0.35s,
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s !important;
}

/* Left gold bar per row — reserved space avoids layout shift on hover */
.lbc-header
  .wp-block-navigation__submenu-container
  > .wp-block-navigation-item {
  border-left: 2px solid transparent;
  transition: border-left-color 0.18s ease;
}

.lbc-header
  .wp-block-navigation__submenu-container
  > .wp-block-navigation-item:hover {
  border-left-color: #ffc700;
}

/* Sub-item link text */
.lbc-header
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  display: block !important;
  padding: 0.7rem 1.4rem !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  color: #f5f5f5 !important;
  white-space: nowrap;
  transition: color 0.18s ease !important;
}

.lbc-header.is-scrolled
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  font-size: 11px !important;
}

.lbc-header
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover {
  color: #ffc700 !important;
}

/* Suppress the top-level center-out underline for sub-items */
.lbc-header
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content::before {
  display: none !important;
}

/* Chevron toggle — gold, vertically centred alongside the link text */
.lbc-header .wp-block-navigation-submenu__toggle {
  color: var(--wp--preset--color--gold);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 2px 0 6px;
  display: flex;
  align-items: center;
  align-self: center;
  line-height: 1;
  flex-shrink: 0;
}

/* WP sizes the icon at 0.6em (~9px) — increase to a legible size */
.lbc-header .wp-block-navigation__submenu-icon {
  width: 20px !important;
  height: 20px !important;
}
.lbc-header .wp-block-navigation__submenu-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2px; /* thicker stroke so the chevron reads clearly */
}

/* -----------------------------------------------------------------------
 * Header — hamburger button
 * Hidden on desktop; revealed in the mobile media query below.
 * ----------------------------------------------------------------------- */
.lbc-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.lbc-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #f5f5f5;
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease;
}

/* Bars rotate into an X when the menu is open */
.lbc-header.menu-open .lbc-hamburger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.lbc-header.menu-open .lbc-hamburger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.lbc-header.menu-open .lbc-hamburger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* -----------------------------------------------------------------------
 * Header — mobile menu panel (curtain drop)
 * position:absolute anchors it to .lbc-header (which has position:relative).
 * clip-path drives the curtain reveal — top edge is always flush with the
 * header bottom; the visible area grows downward as bottom-clip → 0.
 * ----------------------------------------------------------------------- */
.lbc-mobile-menu {
  display: none; /* shown only inside the mobile media query */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #002b5b;
  border-top: 1px solid rgba(255, 199, 0, 0.25);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.lbc-header.menu-open .lbc-mobile-menu {
  clip-path: inset(0 0 0% 0);
}

/* Links list */
.lbc-mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 1.75rem 1.5rem 2.25rem;
  display: flex;
  flex-direction: column;
}

/* Each item fades+slides in with a stagger on open; collapses instantly on close */
.lbc-mobile-menu li {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.lbc-header.menu-open .lbc-mobile-menu li {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.3s ease calc(var(--i) * 0.07s),
    transform 0.3s ease calc(var(--i) * 0.07s);
}

.lbc-mobile-menu a {
  display: block;
  padding: 0.9rem 0;
  color: #f5f5f5;
  text-decoration: none;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    color 0.25s ease,
    letter-spacing 0.25s ease;
}

.lbc-mobile-menu li:last-child a {
  border-bottom: none;
}

.lbc-mobile-menu a:hover {
  color: #ffc700;
  letter-spacing: 0.2em;
}

/* Sub-items (service sub-pages) — indented with dimmed label */
.lbc-mobile-menu .lbc-mobile-menu__sub a {
  padding-left: 1.5rem;
  font-size: 0.85rem;
  color: rgba(245, 245, 245, 0.65);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.lbc-mobile-menu .lbc-mobile-menu__sub a:hover {
  color: #ffc700;
}

/* -----------------------------------------------------------------------
 * Footer — single horizontal strip
 *
 * CSS grid on the strip bypasses WordPress's block flex system entirely,
 * giving a perfectly balanced three-column layout regardless of content.
 * ----------------------------------------------------------------------- */

/* Three-column grid: [brand 1fr] [nav 2fr] [contact 1fr] */
.lbc-footer__strip {
  display: grid !important;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: var(--wp--preset--spacing--700); /* 64px */
}

/* ── Brand (left) ── */
.lbc-footer .wp-block-site-logo,
.lbc-footer .wp-block-site-logo img {
  width: 70px !important;
  height: auto !important;
}
.lbc-footer__tagline {
  font-size: 11px !important;
  line-height: 1.7 !important;
}

/* ── Nav (centre) ──
 * WordPress's generated layout stylesheet forces the nav <ul> to
 * flex-direction:column — override with !important to win. */
.lbc-footer__nav,
.lbc-footer__nav .wp-block-navigation__container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1.75rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Prevent individual items stretching to full width */
.lbc-footer__nav .wp-block-navigation-item {
  width: auto !important;
  flex: 0 0 auto !important;
}

.lbc-footer__nav .wp-block-navigation-item__content {
  font-size: 12px !important;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #f5f5f5;
  text-decoration: none;
  position: relative;
  padding: 0;
}

/* Centre-out underline — same as header nav */
.lbc-footer__nav .wp-block-navigation-item__content::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #ffc700;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.lbc-footer__nav .wp-block-navigation-item__content:hover::before {
  transform: scaleX(1);
}

/* ── Contact (right) ── */
.lbc-footer__contact {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.35rem !important;
}
.lbc-footer__contact p {
  font-size: 12px !important;
  text-align: right;
  margin: 0;
}
.lbc-footer__contact a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
.lbc-footer__contact a:hover {
  color: #ffc700;
}

/* ── Charity partners ── */
.lbc-footer__charities {
  border-top: 1px solid rgba(255, 199, 0, 0.3);
  margin-top: var(--wp--preset--spacing--400);
  padding-top: var(--wp--preset--spacing--500);
  padding-bottom: var(--wp--preset--spacing--300);
  text-align: center;
}
.lbc-footer__charities p {
  font-size: 14px !important;
  margin-bottom: 0.35rem !important;
}
.lbc-footer__charities .wp-block-image {
  max-width: 480px;
  margin-inline: auto;
}
.lbc-footer__charities .wp-block-image img {
  max-width: 100%;
  height: auto;
}

/* ── Copyright ── */
.lbc-footer__copyright {
  font-size: 11px !important;
  opacity: 0.5;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--wp--preset--spacing--400);
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .lbc-footer__strip {
    grid-template-columns: 1fr !important;
    gap: var(--wp--preset--spacing--500) !important;
    text-align: center;
  }
  .lbc-footer__brand {
    align-items: center;
  }
  .lbc-footer__nav,
  .lbc-footer__nav .wp-block-navigation__container {
    justify-content: center !important;
  }
  .lbc-footer__contact {
    align-items: center !important;
  }
  .lbc-footer__contact p {
    text-align: center;
  }
}

/* -----------------------------------------------------------------------
 * Button hover — fill from left
 *
 * Fill colour and inverted text colour are set as custom properties on
 * each section context. The animation itself is declared once and
 * inherited by all button variants.
 * ----------------------------------------------------------------------- */

/* Gold buttons — hero, image-break */
.wp-block-cover .wp-block-button__link {
  --btn-fill: #ffc700;
  --btn-fill-text: #002b5b;
}

/* Dark buttons — about */
.lbc-about .wp-block-button__link {
  --btn-fill: #333333;
  --btn-fill-text: #f5f5f5;
}

/* Off-white buttons — testimonials, locations, carousel */
.lbc-testimonials-header .wp-block-button__link,
.lbc-locations-text .wp-block-button__link,
.lbc-carousel .wp-block-button__link {
  --btn-fill: #f5f5f5;
  --btn-fill-text: #002b5b;
}

/* Universal animation */
.wp-block-button__link {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s ease;
}
.wp-block-button__link::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--btn-fill, currentColor);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}
.wp-block-button__link:hover {
  color: var(--btn-fill-text, inherit) !important;
}
.wp-block-button__link:hover::before {
  transform: scaleX(1);
}

/* -----------------------------------------------------------------------
 * Call button — floating FAB, top right
 * ----------------------------------------------------------------------- */
.lbc-call-btn {
  position: fixed;
  bottom: 3rem;
  right: 2rem;
  z-index: 90;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;

  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 100px;

  background: #ffc700;
  color: #002b5b;

  box-shadow: 0 4px 16px rgba(0, 43, 91, 0.2);

  /* Hidden until JS adds .is-visible */
  opacity: 0;
  transform: scale(0);
  pointer-events: none;

  /* Exit transition + hover expand transition */
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    gap 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s ease;
}

.lbc-call-btn.is-visible {
  pointer-events: auto;
  animation: lbc-call-in 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

.lbc-call-btn.is-hiding {
  pointer-events: none;
  animation: lbc-call-out 0.3s ease-in forwards;
}

@keyframes lbc-call-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.08);
  }
  80% {
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lbc-call-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  20% {
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

.lbc-call-btn:hover,
.lbc-call-btn:focus-visible,
.lbc-call-btn.is-touch-expanded {
  width: 130px;
  padding: 0 1.125rem;
  gap: 0.5rem;
  box-shadow: 0 6px 24px rgba(0, 43, 91, 0.28);
  outline: none;
}

.lbc-call-btn::before {
  content: '\f095';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 1rem;
  flex-shrink: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lbc-call-btn__text {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition:
    max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s 0.1s ease;
}

.lbc-call-btn:hover .lbc-call-btn__text,
.lbc-call-btn:focus-visible .lbc-call-btn__text,
.lbc-call-btn.is-touch-expanded .lbc-call-btn__text {
  max-width: 80px;
  opacity: 1;
}

/* -----------------------------------------------------------------------
 * Responsive — mobile
 * ----------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
 * Image Carousel — horizontal sliding panel
 *
 * The .lbc-carousel outer group clips the track; .lbc-carousel__track is
 * the flex strip that JS translates. Controls (prev/next, dots) are
 * injected by carousel.js so they don't appear in the block editor.
 * ----------------------------------------------------------------------- */
.lbc-carousel {
  position: relative;
  overflow: hidden;
}

.lbc-carousel__track {
  display: flex !important;
  flex-wrap: nowrap !important;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Cover blocks are the slides; reset WP's default width/margin */
.lbc-carousel__slide.wp-block-cover {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Prev / Next buttons */
.lbc-carousel__prev,
.lbc-carousel__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  background: rgba(0, 43, 91, 0.65);
  border: 1px solid rgba(255, 199, 0, 0.45);
  border-radius: 0;
  color: #ffc700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}

.lbc-carousel__prev { left: 1.25rem; }
.lbc-carousel__next { right: 1.25rem; }

.lbc-carousel__prev:hover,
.lbc-carousel__next:hover {
  background: #002b5b;
  border-color: #ffc700;
}

.lbc-carousel__prev svg,
.lbc-carousel__next svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* Dot indicators */
.lbc-carousel__dots {
  position: absolute;
  bottom: 1.25rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  z-index: 10;
}

.lbc-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(245, 245, 245, 0.4);
  border: 1px solid rgba(245, 245, 245, 0.6);
  cursor: pointer;
  padding: 0;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.lbc-carousel__dot.is-active {
  background: #ffc700;
  border-color: #ffc700;
  transform: scale(1.3);
}

/* On the off-white slide the dots need a dark fallback — handled by
   keeping a semi-opaque navy ring on inactive dots */

@media (max-width: 768px) {
  .lbc-carousel__prev,
  .lbc-carousel__next {
    width: 40px;
    height: 40px;
  }
  .lbc-carousel__prev { left: 0.75rem; }
  .lbc-carousel__next { right: 0.75rem; }
}

/* -----------------------------------------------------------------------
 * Responsive — mobile
 * ----------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* About — stack columns vertically */
  .lbc-about > .wp-block-columns {
    grid-template-columns: 1fr;
  }

  /* Header — mobile layout: hide desktop nav, centre logo, show hamburger.
     Switch grid → flex so the logo centres correctly once nav children
     are display:none (hidden grid children vacate their columns, shifting
     the logo left if we keep the 1fr/auto/1fr grid). */
  .lbc-header .wp-block-navigation {
    display: none !important;
  }
  .lbc-header__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  .lbc-header__inner .wp-block-site-logo {
    order: 0;
    width: auto;
    text-align: center;
  }
  .lbc-hamburger {
    display: flex;
  }
  .lbc-mobile-menu {
    display: block;
  }
}