/* ============================================================
   PURE CSS UTILITY SYSTEM
   - Tokens (sizes, breakpoints, container widths)
   - Container with data-type variants (narrow / wide / full)
   - Section spacing with responsive adjustments
   - Spacing utilities (composable: pick a size + an applicator)
   ============================================================ */

/* ------------------------------------------------------------
   1) TOKENS (CSS Custom Properties)
   ------------------------------------------------------------ */
:root {
  /* Size scale (rem) — matches your SCSS */
  --size-1: 0.25rem;
  /* 4px  */
  --size-2: 0.5rem;
  /* 8px  */
  --size-3: 0.75rem;
  /* 12px */
  --size-4: 1rem;
  /* 16px */
  --size-5: 1.25rem;
  /* 20px */
  --size-6: 1.5rem;
  /* 24px */
  --size-7: 1.75rem;
  /* 28px */
  --size-8: 2rem;
  /* 32px */
  --size-9: 2.5rem;
  /* 40px */
  --size-10: 3rem;
  /* 48px */
  --size-11: 4rem;
  /* 64px */
  --size-12: 5rem;
  /* 80px */
  --size-13: 6rem;
  /* 96px */
  --size-14: 8rem;
  /* 128px */
  --size-15: 10rem;
  /* 160px */

  /* Containers */
  --container-min-margin-inline: var(--size-4);
  --container-max-width: 100%;
  --container-max-width-small: 51rem;
  --container-max-width-narrow: 68rem;
  --container-max-width-wide: 102.5rem;

  /* Default derived tokens */
  --container-padding: calc(var(--container-min-margin-inline) * 2);

  /* Breakpoints (note: media queries can’t read vars reliably, so see below) */
  /* small: 37.5em (600px), medium: 65em (1040px), large: 75em (1200px), xlarge: 112.5em (1800px) */
}

/* ------------------------------------------------------------
   2) CONTAINER (data-type variants: narrow / wide / full)
   ------------------------------------------------------------ */
.container {
  /* NOTE: --container-padding is available if you want inner padding later */
  --max-width: var(--container-max-width);
  width: min(100%, var(--max-width));
  margin-inline: auto;
}

.container[data-type="small"] {
  --max-width: var(--container-max-width-small);
}

.container[data-type="narrow"] {
  --max-width: var(--container-max-width-narrow);
}

.container[data-type="wide"] {
  --max-width: var(--container-max-width-wide);
}

.container[data-type="full-width"] {
  --max-width: 100%;
}

.container[data-type="full"] {
  --max-width: 100%;
}

/* ------------------------------------------------------------
   3) SECTION (responsive paddings)
   ------------------------------------------------------------ */
.section {
  padding-block: 45px;
  padding-inline: 23px;
  position: relative;
}

/* Collapse spacing: any section preceded by another section (except footer) */
.section.section--collapse-top:not(.footer) {
  padding-top: 0;
}

.section.sm-padding {
  @media(width >=998px) {
    padding-top: 0;
  }
}

/* small ≥ 600px (37.5em) */
@media (min-width: 37.5em) {
  .section {
    padding-block: 45px;
    padding-inline: 40px;
  }
}

/* medium ≥ 1040px (65em) */
@media (min-width: 65em) {
  .section {
    padding-block: 122px;
    padding-inline: 140px;
  }
}

/* Small-laptop overlap guard:
   The fixed left sidebar (social icons) appears at ≥981px at left:20px and
   occupies ~58px of the left edge. Section padding only grows to 140px at
   ≥1040px, so in the 981–1039px window the 40px padding lets content slide
   under the icons. Bump the left padding here so content clears the sidebar. */
@media (min-width: 981px) and (max-width: 1039.98px) {
  .section {
    padding-left: 80px;
  }
}

/* Section padding overrides (ACF block settings) */
/* pt-md / pb-md = default section padding — no override needed */
.section.pt-0 {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.section.pb-0 {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* .section.pt-sm {
  padding-top: 20px !important;
  margin-top: 0 !important;
} */

.section.pb-sm {
  padding-bottom: 20px !important;
}

/* .section.pt-lg {
  padding-top: 127px !important;
  margin-top: 0 !important;
} */

/* .section.pb-lg {
  padding-bottom: 127px !important;
} */

@media (min-width: 65em) {
  /* .section.pt-sm {
    padding-top: 48px !important;
  } */

  .section.pb-sm {
    padding-bottom: 48px !important;
  }

  /* .section.pt-lg {
    padding-top: 127px !important;
  } */

  /* .section.pb-lg {
    padding-bottom: 127px !important;
  } */
}

/* ------------------------------------------------------------
   4) LITTLE HELPERS
   ------------------------------------------------------------ */
.mx-auto {
  margin-inline-start: auto;
  margin-inline-end: auto;

  width: fit-content;
}

/* ------------------------------------------------------------
   5) SPACING UTILITIES (COMPOSABLE)
   ------------------------------------------------------------
   HOW IT WORKS:
   - Pick a SIZE setter: .s-1 … .s-15  (sets --space)
   - Pick an APPLICATOR:
       Margin: .m, .m-b, .m-bs, .m-be, .m-i, .m-is, .m-ie
       Padding: .p, .p-b, .p-bs, .p-be, .p-i, .p-is, .p-ie
   EXAMPLE:
     <div class="s-8 m-b p-i">…</div>
     => margin-block: 2rem; padding-inline: 2rem;
   You can also override with inline style: style="--space: 3.5rem"
   ------------------------------------------------------------ */

/* Size setters (set a variable once, apply anywhere) */
.s-1 {
  --space: var(--size-1);
}

.s-2 {
  --space: var(--size-2);
}

.s-3 {
  --space: var(--size-3);
}

.s-4 {
  --space: var(--size-4);
}

.s-5 {
  --space: var(--size-5);
}

.s-6 {
  --space: var(--size-6);
}

.s-7 {
  --space: var(--size-7);
}

.s-8 {
  --space: var(--size-8);
}

.s-9 {
  --space: var(--size-9);
}

.s-10 {
  --space: var(--size-10);
}

.s-11 {
  --space: var(--size-11);
}

.s-12 {
  --space: var(--size-12);
}

.s-13 {
  --space: var(--size-13);
}

.s-14 {
  --space: var(--size-14);
}

.s-15 {
  --space: var(--size-15);
}



/* ------------------------------------------------------------
   6) HEADER (responsive paddings)
   ------------------------------------------------------------ */
.site-header {
  padding-block: var(--size-6);
  padding-inline: 23px;
  position: relative;
}

/* small ≥ 600px (37.5em) */
@media (min-width: 37.5em) {
  .site-header {
    padding-block: var(--size-6);
    padding-inline: var(--size-4);
  }
}

/* medium ≥ 1040px (65em) */
@media (min-width: 65em) {
  .site-header {
    padding-block: var(--size-6);
    padding-inline: var(--size-4);
  }
}


/* ------------------------------------------------------------
   7) EVEN COLUMNS (responsive split layout)
   ------------------------------------------------------------


/* Base: stacked layout on small screens */
.even-columns {
  display: grid;
  gap: var(--grid-gap, 1rem);
}

/* Medium screens (≥ 65em ≈ 1040px): become even columns */
@media (min-width: 65em) {
  .even-columns {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }

  /* 60 / 40 variant */
  .even-columns.is-60-40 {
    grid-auto-flow: initial;
    grid-template-columns: 2fr 1fr;
  }

  /* 40 / 60 variant */
  .even-columns.is-40-60 {
    grid-auto-flow: initial;
    grid-template-columns: 1fr 2fr;
  }
}


.flex-group {
  display: flex;

  &[data-type="column"] {
    flex-direction: column;
  }

  &[data-type="row"] {
    flex-direction: row;
  }

  &[data-justify="center"] {
    justify-content: center;
  }

  &[data-align="center"] {
    align-items: center;
  }

  &[data-justify="between"] {
    justify-content: space-between;
  }

  &[data-justify="space-around"] {
    justify-content: space-around;
  }

  &[align-self="start"] {
    align-self: start;
  }

  &[align-self="end"] {
    align-self: end;
  }

  &[align-self="center"] {
    align-self: center;
  }

  &[justify-self="start"] {
    justify-self: start;
  }

  &[justify-self="end"] {
    justify-self: end;
  }

  &[justify-self="center"] {
    justify-self: center;
  }

  &[data-gap] {
    gap: var(--gap-size, 1rem);
  }
}


.sig-block {
  position: relative;
  border-radius: var(--radius-lg);
}

/* When the mega menu is open, drop sections below it so nothing inside a
   .sig-block (sliders, badges, sticky bits) can stack over the open menu. */
body.mega-menu-open .sig-block {
  z-index: 0;
}

html body main.site-main > section.section.bg-gray,
html body .toc-content > .bg-gray,
.sig-block.bg-gray,
.section.bg-gray {
  background-color: #FAFAFA;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

@media (min-width: 65em) {
  html body main.site-main > section.section.bg-gray,
  html body .toc-content > .bg-gray,
  .sig-block.bg-gray,
  .section.bg-gray {
    padding-top: 110px !important;
    padding-bottom: 110px !important;
  }
}

/* Gap control — negative margins to collapse flex gap on specific sections.
   The !important is needed to win over .section.pt-0 / .section.pb-0 rules
   above (which set margin-top/margin-bottom: 0 !important and would
   otherwise silently neutralize these negative margins). */
body main.site-main > .no-gap-top {
  margin-top: -127px !important;
}

body main.site-main > .no-gap-bottom {
  margin-bottom: -127px !important;
}

body main.site-main > .no-gap-both {
  margin-top: -127px !important;
  margin-bottom: -127px !important;
}

@media (max-width: 981px) {
  body main.site-main > .no-gap-top {
    margin-top: -72px !important;
  }

  body main.site-main > .no-gap-bottom {
    margin-bottom: -72px !important;
  }

  body main.site-main > .no-gap-both {
    margin-top: -72px !important;
    margin-bottom: -72px !important;
  }
}

.sig-block.section.pattern-beige.gallery,
.section.google-reviews {
  margin-top: 0;
}


/* enable when you want the motif */
.sig-block.bg-diag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  /* Two opposing light wedges + soft vertical gradient */
  background:
    linear-gradient(135deg, rgba(186, 174, 146, 0.12), rgba(186, 174, 146, 0.12)) left top / 60% 60% no-repeat,
    linear-gradient(225deg, rgba(186, 174, 146, 0.10), rgba(186, 174, 146, 0.10)) right top / 60% 60% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.0), rgba(36, 61, 88, 0.03));
  pointer-events: none;
}

/* keep content above the motif */
.sig-block>.container {
  position: relative;
  z-index: 3;
}