/* ==========================================================================
   Legacy grid + utility layer (Bootstrap 3 class-compatible)
   Modernized: CSS Grid instead of float/negative-margin, logical properties
   for RTL-safety, container queries left out on purpose (see note below).
   Same class names as before so no markup changes are needed anywhere else
   in the theme. Load order: after $parent_style, before specia-style.
   ========================================================================== */

/* ---- Local tokens ----------------------------------------------------
   These are NOT the same scale as --wp--preset--spacing--* in theme.json.
   That scale starts at 0.25rem/"10" and tops out at 6rem/"100" — different
   numbers, different values. Keeping this legacy scale separate avoids
   silently changing the size of every .padding-top-* / .padding-bottom-*
   already in use across templates. Values match the old hardcoded px 1:1,
   just expressed in rem so they scale with user font-size settings.
   ------------------------------------------------------------------------ */
:root {
  --legacy-gutter: 1.875rem; /* 30px — replaces BS3's 15px+15px gutter */
  --legacy-pad-20: 1.25rem; /* 20px */
  --legacy-pad-40: 2.5rem; /* 40px */
  --legacy-pad-60: 3.75rem; /* 60px */
}

/* ---- Container ---- */
.container {
  width: 100%;
  padding-inline: calc(var(--legacy-gutter) / 2);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

/* ---- Row / Columns, as a 12-track CSS Grid ----------------------------
   Replaces float + negative-margin + padding gutters with `gap`. No more
   box-sizing overrides needed — grid tracks don't leak like floated
   percentage columns did.
   Columns default to spanning all 12 tracks (xs behaviour) and only take
   an explicit span once a breakpoint's class is present, same cascade
   Bootstrap 3 had (mobile-first, later breakpoints override earlier ones).
   ------------------------------------------------------------------------ */
.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--legacy-gutter);
}

[class^="col-"],
[class*=" col-"] {
  grid-column: span 12 / span 12;
  min-width: 0; /* grid's answer to overflow issues float columns didn't have */
}

/* Bare col-1..col-12 (xs tier, unprefixed — e.g. class="col-lg-6 col-12")
   alias col-xs-*. MUST stay before the sm/md/lg breakpoints below: it has
   the same specificity as .col-lg-6 etc, so if it came later in the file
   it would win the cascade at every breakpoint and silently cancel any
   responsive override on elements carrying both classes together. */
.col-1,
.col-xs-1 {
  grid-column: span 1;
}
.col-2,
.col-xs-2 {
  grid-column: span 2;
}
.col-3,
.col-xs-3 {
  grid-column: span 3;
}
.col-4,
.col-xs-4 {
  grid-column: span 4;
}
.col-5,
.col-xs-5 {
  grid-column: span 5;
}
.col-6,
.col-xs-6 {
  grid-column: span 6;
}
.col-7,
.col-xs-7 {
  grid-column: span 7;
}
.col-8,
.col-xs-8 {
  grid-column: span 8;
}
.col-9,
.col-xs-9 {
  grid-column: span 9;
}
.col-10,
.col-xs-10 {
  grid-column: span 10;
}
.col-11,
.col-xs-11 {
  grid-column: span 11;
}
.col-12,
.col-xs-12 {
  grid-column: span 12;
}

@media (min-width: 768px) {
  .col-sm-1 {
    grid-column: span 1;
  }
  .col-sm-2 {
    grid-column: span 2;
  }
  .col-sm-3 {
    grid-column: span 3;
  }
  .col-sm-4 {
    grid-column: span 4;
  }
  .col-sm-5 {
    grid-column: span 5;
  }
  .col-sm-6 {
    grid-column: span 6;
  }
  .col-sm-7 {
    grid-column: span 7;
  }
  .col-sm-8 {
    grid-column: span 8;
  }
  .col-sm-9 {
    grid-column: span 9;
  }
  .col-sm-10 {
    grid-column: span 10;
  }
  .col-sm-11 {
    grid-column: span 11;
  }
  .col-sm-12 {
    grid-column: span 12;
  }
}

@media (min-width: 992px) {
  .col-md-1 {
    grid-column: span 1;
  }
  .col-md-2 {
    grid-column: span 2;
  }
  .col-md-3 {
    grid-column: span 3;
  }
  .col-md-4 {
    grid-column: span 4;
  }
  .col-md-5 {
    grid-column: span 5;
  }
  .col-md-6 {
    grid-column: span 6;
  }
  .col-md-7 {
    grid-column: span 7;
  }
  .col-md-8 {
    grid-column: span 8;
  }
  .col-md-9 {
    grid-column: span 9;
  }
  .col-md-10 {
    grid-column: span 10;
  }
  .col-md-11 {
    grid-column: span 11;
  }
  .col-md-12 {
    grid-column: span 12;
  }
}

@media (min-width: 1200px) {
  .col-lg-1 {
    grid-column: span 1;
  }
  .col-lg-2 {
    grid-column: span 2;
  }
  .col-lg-3 {
    grid-column: span 3;
  }
  .col-lg-4 {
    grid-column: span 4;
  }
  .col-lg-5 {
    grid-column: span 5;
  }
  .col-lg-6 {
    grid-column: span 6;
  }
  .col-lg-7 {
    grid-column: span 7;
  }
  .col-lg-8 {
    grid-column: span 8;
  }
  .col-lg-9 {
    grid-column: span 9;
  }
  .col-lg-10 {
    grid-column: span 10;
  }
  .col-lg-11 {
    grid-column: span 11;
  }
  .col-lg-12 {
    grid-column: span 12;
  }
}

/* ---- Display utilities ---- */
.d-none {
  display: none !important;
}
.d-block {
  display: block !important;
}

@media (min-width: 1200px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }
}

/* ---- Text alignment (logical, RTL-safe) ---- */
.text-left {
  text-align: start !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: end !important;
}

@media (min-width: 1200px) {
  .text-lg-left {
    text-align: start !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
  .text-lg-right {
    text-align: end !important;
  }
}

/* ---- Flex/grid item alignment ---- */
.my-auto {
  margin-block: auto !important;
}

/* ---- Legacy spacing utilities (see token note at top of file) ---- */
.padding-top-20 {
  padding-top: var(--legacy-pad-20);
}
.padding-top-40 {
  padding-top: var(--legacy-pad-40);
}
.padding-top-60 {
  padding-top: var(--legacy-pad-60);
}
.padding-bottom-20 {
  padding-bottom: var(--legacy-pad-20);
}
.padding-bottom-40 {
  padding-bottom: var(--legacy-pad-40);
}
.padding-bottom-60 {
  padding-bottom: var(--legacy-pad-60);
}

/* ---- Clearfix ----------------------------------------------------------
   Still used directly in template markup (e.g. `<div class="clearfix">`
   after the header and footer sections) independent of the grid system
   above, so it stays even though the grid itself no longer needs it.
   ------------------------------------------------------------------------ */
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

/* ---- Screen-reader-only text ---- */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  display: block;
  inset-block-start: 5px;
  inset-inline-start: 5px;
  width: auto;
  height: auto;
  padding: 15px 23px 14px;
  clip-path: none;
  z-index: 100000;
}