/*!
 * TRC Converter — Baseline framework CSS.
 *
 * Replicates WPBakery framework defaults that disappear when js_composer is
 * dequeued, plus Gutenberg defensive overrides that match live's WPBakery
 * rendering pixel-for-pixel. See wpbakery_converter/__init__.py for the
 * authoring history (v40-v49). Edit there to keep changelog + this file in sync.
 *
 * Enqueued by race-club theme's race_club_scripts() in functions.php.
 */

/* marker (invisible JS hook for vc_row-full-width JS) */
.vc_row-full-width {
    display: block;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* WPBakery .vc_col-sm-N framework default: 15px L/R padding on outer column.
   When a row has gap=N, vc_column-gap-N rule overrides this. */
.vc_col-sm-1, .vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-5,
.vc_col-sm-6, .vc_col-sm-7, .vc_col-sm-8, .vc_col-sm-9, .vc_col-sm-10,
.vc_col-sm-11, .vc_col-sm-12 {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Per-vc_col-sm-N max-width: matches WPBakery's float-based grid, but applied
   to our flex layout so columns don't grow beyond declared percentage. The
   inline `flex-basis:{N}%` on the column gives the size hint; max-width here
   prevents flex-grow from expanding past it. Previously these were inlined
   alongside flex-basis on the column element but that broke core/column block
   validation (Gutenberg expects ONLY flex-basis inline). */
.vc_col-sm-1  { max-width: 8.33333%;  }
.vc_col-sm-2  { max-width: 16.66667%; }
.vc_col-sm-3  { max-width: 25%;       }
.vc_col-sm-4  { max-width: 33.33333%; }
.vc_col-sm-5  { max-width: 41.66667%; }
.vc_col-sm-6  { max-width: 50%;       }
.vc_col-sm-7  { max-width: 58.33333%; }
.vc_col-sm-8  { max-width: 66.66667%; }
.vc_col-sm-9  { max-width: 75%;       }
.vc_col-sm-10 { max-width: 83.33333%; }
.vc_col-sm-11 { max-width: 91.66667%; }
.vc_col-sm-12 { max-width: 100%;      }

/* WPBakery column-inner baseline padding + width:100% (critical for vc_custom
   L/R margins to overflow correctly into adjacent columns). */
.vc_column_container > .vc_column-inner {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Card-style columns (with bg fill) get flex containment to halt margin-collapse. */
.vc_col-has-fill > .vc_column-inner {
    display: flex;
    flex-direction: column;
    padding-top: 35px;
}

/* Filled rows: every child column-inner gets 35px padding-top (live behaviour). */
.vc_row-has-fill > .wpb_column > .vc_column-inner,
.vc_row-has-fill > .vc_column_container > .vc_column-inner {
    padding-top: 35px;
}

/* gap=N row class -> column gets N/2 padding (column-gap visual + margin-collapse halt). */
.vc_column-gap-2  > .vc_column_container { padding: 1px; }
.vc_column-gap-4  > .vc_column_container { padding: 2px; }
.vc_column-gap-10 > .vc_column_container { padding: 5px; }
.vc_column-gap-15 > .vc_column_container { padding: 7.5px; }
.vc_column-gap-20 > .vc_column_container { padding: 10px; }
.vc_column-gap-25 > .vc_column_container { padding: 12.5px; }
.vc_column-gap-30 > .vc_column_container { padding: 15px; }
.vc_column-gap-35 > .vc_column_container { padding: 17.5px; }

/* WPBakery framework default: 35px margin-bottom on every content wrapper. */
.wpb_button,
.wpb_content_element,
ul.wpb_thumbnails-fluid > li {
    margin-bottom: 35px;
}

/* Prevent last-child margin from compounding with wpb_content_element 35px. */
.wpb_text_column > *:last-child,
.wpb_text_column .wpb_wrapper > *:last-child,
.wpb_text_column .wp-block-group__inner-container > *:last-child {
    margin-bottom: 0;
}

/* Vertical block-gap inside text columns: 1em between siblings. Previously
   emitted as `style.spacing.blockGap:"1em"` JSON on the wrapper but
   Gutenberg's core/group validation requires matching inline style; absence
   triggered "invalid content" warnings on every wpb_text_column. Moved here
   keyed on the wrapper class. */
.wpb_text_column > .wp-block-group__inner-container > * + *,
.wpb_text_column > * + * {
    margin-top: 1em;
}

/* Override Gutenberg block-library `table { margin-bottom: 2em }`. */
.wpb_text_column table,
.wpb_content_element table {
    margin: 0;
}

/* Gutenberg's `.wp-block-image figure { margin: 0 }` beats `.wpb_content_element`;
   restore the 35px margin-bottom with higher specificity. */
.wp-block-image figure.wpb_content_element {
    margin-bottom: 35px;
}

/* Zero Gutenberg's default `.wp-block-columns { margin-bottom: 1.75em }`. */
.wp-block-columns {
    margin-bottom: 0;
}

/* WPBakery row gap + alignment: previously inlined on the row element
   (`style="gap:0;align-items:flex-start !important;"`) but inline style
   that doesn't match core/columns save() format triggers Gutenberg's
   "Block contains unexpected or invalid content" warning. Moving here
   keeps the visual behaviour with valid block markup. */
.vc_row.is-layout-flex {
    gap: 0;
    align-items: flex-start;
}

/* WPBakery vc_btn3 defaults: padding/font-size/border-radius/gradient overlay.
   Previously emitted as inline `style="..."` on the `<a>` but a long inline
   style on core/button's `<a>` triggers Gutenberg's invalid-content warning
   (core/button save() emits only color/border via JSON-driven inline style).
   Keyed on `.wpb-btn-lg/.wpb-btn-md/.wpb-btn-sm/.wpb-btn-xs` size classes +
   `.wpb-btn-rounded/.wpb-btn-square/.wpb-btn-round` shape classes +
   `.wpb-btn-icon-left/.wpb-btn-icon-right` for icon side. Converter emits
   these classes on the button's `<a>` element; this CSS applies the defaults. */
.wp-block-button .wpb-btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.33; }
.wp-block-button .wpb-btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.33; }
.wp-block-button .wpb-btn-md { padding: 14px 20px; font-size: 14px; line-height: 1.33; }
.wp-block-button .wpb-btn-lg { padding: 18px 25px; font-size: 16px; line-height: 1.33; }

.wp-block-button .wpb-btn-rounded { border-radius: 5px; }
.wp-block-button .wpb-btn-square  { border-radius: 0; }
.wp-block-button .wpb-btn-round   { border-radius: 50px; }

/* Icon-side padding shift: extra inline padding to make room for the
   absolutely-positioned icon */
.wp-block-button .wpb-btn-icon-left.wpb-btn-xs  { padding-left:  25px; }
.wp-block-button .wpb-btn-icon-left.wpb-btn-sm  { padding-left:  35px; }
.wp-block-button .wpb-btn-icon-left.wpb-btn-md  { padding-left:  48px; }
.wp-block-button .wpb-btn-icon-left.wpb-btn-lg  { padding-left:  60px; }
.wp-block-button .wpb-btn-icon-right.wpb-btn-xs { padding-right: 31px; }
.wp-block-button .wpb-btn-icon-right.wpb-btn-sm { padding-right: 41px; }
.wp-block-button .wpb-btn-icon-right.wpb-btn-md { padding-right: 54px; }
.wp-block-button .wpb-btn-icon-right.wpb-btn-lg { padding-right: 60px; }

/* vc_btn3-style-custom: hover-gradient overlay (the dark-overlay shimmer
   on hover). Applied via class instead of inline style. */
.wp-block-button .wpb-btn-style-custom {
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1));
    background-position: 0 -100%;
    background-repeat: no-repeat;
    background-size: 100% 200%;
    border: none;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    position: relative;
}

/* Icon inside button drawn as ::before pseudo on the <a> -- no inner <i>
   element (which would break core/button validation). The glyph comes from
   icon-font classes (vc-oi-play, fa-angle-right, etc.) applied directly to
   the <a>; CSS rules below pick the font-family + position based on those
   classes. */
.wp-block-button .wp-block-button__link.wpb-btn-icon-left,
.wp-block-button .wp-block-button__link.wpb-btn-icon-right {
    position: relative;
}
.wp-block-button .wp-block-button__link[class*="vc-oi-"]::before {
    font-family: 'vc_openiconic';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
}
.wp-block-button .wpb-btn-icon-left[class*="vc-oi-"]::before  { left:  20px; font-size: 14px; }
.wp-block-button .wpb-btn-icon-right[class*="vc-oi-"]::before { right: 20px; font-size: 14px; }
.wp-block-button .wpb-btn-lg.wpb-btn-icon-left[class*="vc-oi-"]::before  { left:  25px; font-size: 20px; }
.wp-block-button .wpb-btn-lg.wpb-btn-icon-right[class*="vc-oi-"]::before { right: 25px; font-size: 20px; }

/* vc-oi glyph mappings (from vc_openiconic.min.css) -- map each icon class
   to its glyph character so the ::before pseudo renders the right symbol. */
.wp-block-button .wp-block-button__link.vc-oi-play::before          { content: "\e825"; }
.wp-block-button .wp-block-button__link.vc-oi-arrow-right::before   { content: "\e85c"; }
.wp-block-button .wp-block-button__link.vc-oi-arrow-circle-right::before { content: "\e878"; }

/* ============================================================
 * Task 2.10.16 v3 — Button styling parity (2026-07-16)
 *
 * Existing rules above match wpb-btn-* class ON the anchor
 * (.wp-block-button__link). But Gutenberg's `className` attribute
 * puts the class on the OUTER `<div class="wp-block-button">`.
 * These fallback rules match the outer-class placement.
 *
 * Also sets font-weight: 500 (LIVE's vc_btn3 uses 500, Gutenberg
 * default is 400).
 * ============================================================ */

/* Font-weight: LIVE vc_btn3 = 500 */
.wp-block-button.wpb-btn-lg > .wp-block-button__link,
.wp-block-button .wp-block-button__link.wpb-btn-lg {
    font-weight: 500 !important;
}

/* Icon glyph via ::before with outer-class placement (fallback for
   className-on-wrapper Gutenberg pattern) */
.wp-block-button[class*="vc-oi-"] > .wp-block-button__link {
    position: relative;
}
.wp-block-button[class*="vc-oi-"] > .wp-block-button__link::before {
    font-family: 'vc_openiconic';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
}
.wp-block-button.wpb-btn-icon-left[class*="vc-oi-"] > .wp-block-button__link::before {
    left: 20px;
    font-size: 14px;
}
.wp-block-button.wpb-btn-icon-right[class*="vc-oi-"] > .wp-block-button__link::before {
    right: 20px;
    font-size: 14px;
}
.wp-block-button.wpb-btn-lg.wpb-btn-icon-left[class*="vc-oi-"] > .wp-block-button__link::before {
    left: 25px;
    font-size: 20px;
}
.wp-block-button.wpb-btn-lg.wpb-btn-icon-right[class*="vc-oi-"] > .wp-block-button__link::before {
    right: 25px;
    font-size: 20px;
}
/* vc-oi glyph mappings for outer-class pattern */
.wp-block-button.vc-oi-play > .wp-block-button__link::before          { content: "\e825"; }
.wp-block-button.vc-oi-arrow-right > .wp-block-button__link::before   { content: "\e85c"; }
.wp-block-button.vc-oi-arrow-circle-right > .wp-block-button__link::before { content: "\e878"; }

/* Padding: LIVE = 18px 60px 18px 25px (icon-right 60px). Ensure our
   descendant selectors also match if the class ended up on the anchor
   AND on the outer wrapper (our _fix_302286_button.php script puts it
   on both to be safe). */
.wp-block-button.wpb-btn-lg > .wp-block-button__link {
    padding: 18px 25px !important;
    font-size: 16px !important;
    line-height: 1.33 !important;
    border-radius: 5px !important;
}
.wp-block-button.wpb-btn-lg.wpb-btn-icon-right > .wp-block-button__link {
    padding-right: 60px !important;
}
.wp-block-button.wpb-btn-lg.wpb-btn-icon-left > .wp-block-button__link {
    padding-left: 60px !important;
}
/* Style-custom shimmer overlay on outer-class placement */
.wp-block-button.wpb-btn-style-custom > .wp-block-button__link {
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)) !important;
    background-position: 0 -100% !important;
    background-repeat: no-repeat !important;
    background-size: 100% 200% !important;
    border: none !important;
    text-decoration: none !important;
}
/* Block/full-width variant — LIVE's vc_btn3-block */
.wp-block-button.wpb-btn-block,
.wp-block-button.wpb-btn-block > .wp-block-button__link {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

/* ============================================================
 * Task 2.10.16 v4 — Fix parent flex layout + line-height that
 * pushed STG button 23px lower than LIVE and 14px wider.
 *
 * DEEP QA findings:
 * - STG .wp-block-buttons.is-layout-flex had `align-items:center`
 *   + `gap:8px` making parent H=80 (LIVE parent H=57)
 * - Anchor `line-height:21.28` (from wpb-btn-lg) vs LIVE `normal`
 *   caused subtle width differences via font metric baseline
 * - LIVE parent `vc_btn3-container` has `margin-bottom:22px` — STG
 *   parent had margin:0
 * ============================================================ */

/* Reset flex behavior on the wp-block-buttons parent so the anchor
   aligns to top-left (matches LIVE's block-level flow) */
.wp-block-buttons.wp-block-buttons-is-layout-flex:has(> .wp-block-button.wpb-btn-lg),
.wp-block-buttons.is-layout-flex:has(> .wp-block-button.wpb-btn-lg) {
    align-items: flex-start !important;
    gap: 0 !important;
}

/* Reset parent (wp-block-button) to match LIVE's vc_btn3-container:
   inline-block layout, no line-height inflation, margin-bottom 22px */
.wp-block-button.wpb-btn-lg {
    line-height: 0 !important;
    margin-bottom: 22px !important;
    vertical-align: top !important;
}

/* Anchor line-height: match LIVE's `normal` (browser default ~1.2 * 16px)
   instead of wpb-btn-lg's 1.33. LIVE's vc_btn3 uses browser normal.
   Also 1px transparent border matches LIVE's vc_btn3 default border. */
.wp-block-button.wpb-btn-lg > .wp-block-button__link {
    line-height: normal !important;
    vertical-align: baseline !important;
    border: 1px solid transparent !important;
}

/* v5 — Style the inline <i class="vc_btn3-icon vc-oi vc-oi-play"> element
   inside the anchor (mirrors LIVE's DOM exactly). WPBakery's original CSS:
   .vc_btn3.vc_btn3-icon-right .vc_btn3-icon { position:absolute; right:25px; }
   Replicate here. The <i> is inside the anchor, position:absolute so it
   doesn't contribute to inline-block width (fixing the 16px width delta
   from earlier ::before pseudo approach). */
.wp-block-button__link .vc_btn3-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-style: normal !important;
    font-weight: normal !important;
    display: inline-block !important;
    text-decoration: inherit !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: inherit !important;
}
.wpb-btn-icon-left .vc_btn3-icon { left: 20px !important; }
.wpb-btn-icon-right .vc_btn3-icon { right: 20px !important; }
.wpb-btn-lg.wpb-btn-icon-left .vc_btn3-icon { left: 25px !important; font-size: 20px !important; }
.wpb-btn-lg.wpb-btn-icon-right .vc_btn3-icon { right: 25px !important; font-size: 20px !important; }
/* The .vc-oi-play::before glyph selector already exists in trc-icon-fonts.css
   via [class*=" vc-oi-"]:before rule from the vc_openiconic font block. */

/* ============================================================
 * Task 2.10.16 v6 — Card sections parity (Sensor/Video/DVL)
 *
 * LIVE cards have `text-align: center` inline on every <p> and NO
 * icon glyph inside BOOK NOW/LEARN MORE buttons. STG lost inline
 * styles during Gutenberg conversion. Match LIVE exactly.
 *
 * Applies to card rows:
 *   .vc_custom_1741721931222 (Sensor + Video row)
 *   .vc_custom_1741723168136 (DVL Placement row)
 * ============================================================ */

/* Card <p> text alignment: center (LIVE inline style stripped in conversion) */
.wp-block-columns.vc_custom_1741721931222 p,
.wp-block-columns.vc_custom_1741723168136 p {
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
}

/* Card body text uses 22.86px line-height (Bootstrap default). Match LIVE
   which doesn't have Gutenberg's 1.6em body line-height. */
.wp-block-columns.vc_custom_1741721931222 .wpb_text_column p,
.wp-block-columns.vc_custom_1741723168136 .wpb_text_column p {
    line-height: 1.5 !important;
}

/* Card variant — .wpb-btn-card: BOOK NOW/LEARN MORE full-width buttons
   without an icon glyph. Compact 25px padding on both sides (no
   icon-right 60px padding since there's no icon to reserve space for). */
.wp-block-button.wpb-btn-lg.wpb-btn-card > .wp-block-button__link {
    padding: 18px 25px !important;
    text-align: center !important;
}
/* Anuja QA 2026-08-03 v2 — PSS BOOK NOW / LEARN MORE buttons per-viewport
   width parity (delta 0 across 1920/1440/768/375). LIVE measured widths:
     d1920: 772  (widest)
     d1440: 569
     t768:  285
     m375:  277
   STG default renders at 529 desktop / 306 tablet / 298 mobile (uniform). */
body.page-id-302286 .wp-block-buttons:has(> .wp-block-button.wpb-btn-card),
body.postid-302286 .wp-block-buttons:has(> .wp-block-button.wpb-btn-card) {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Container max-width needs +40 because inner .wp-block-button.full-width-btn
   has margin:0 20px which reduces the button by 40px vs container width.
   Target button widths: d1920=772, d1440=569, t768=285, m375=277.
   Container needs: 812, 609, 325, 317. */
@media (min-width: 1600px) {
    body.page-id-302286 .wp-block-buttons:has(> .wp-block-button.wpb-btn-card),
    body.postid-302286 .wp-block-buttons:has(> .wp-block-button.wpb-btn-card) {
        max-width: 812px !important;
    }
}
@media (min-width: 992px) and (max-width: 1599px) {
    body.page-id-302286 .wp-block-buttons:has(> .wp-block-button.wpb-btn-card),
    body.postid-302286 .wp-block-buttons:has(> .wp-block-button.wpb-btn-card) {
        max-width: 609px !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    body.page-id-302286 .wp-block-buttons:has(> .wp-block-button.wpb-btn-card),
    body.postid-302286 .wp-block-buttons:has(> .wp-block-button.wpb-btn-card) {
        max-width: 325px !important;
    }
}
@media (max-width: 767px) {
    body.page-id-302286 .wp-block-buttons:has(> .wp-block-button.wpb-btn-card),
    body.postid-302286 .wp-block-buttons:has(> .wp-block-button.wpb-btn-card) {
        max-width: 317px !important;
    }
}
/* KAAM-33870 v3 — PSS MAXIMIZE YOUR LESSON H3 max-width parity.
   LIVE H3 measured widths: d1920=821, d1440=605, t768=302, m375=281.
   STG H3 stretches to full container (1104/821/650/281). LIVE row uses
   .vc_col-sm-6 (half col) for the H3; STG lost the half-col layout during
   migration and puts the H3 in .vc_col-sm-12 (full col). Constrain the H3
   itself to LIVE widths via row's vc_custom_1741723244560 scope. */
body.page-id-302286 .wp-block-columns.vc_custom_1741723244560 h3.heading-default {
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (min-width: 1600px) {
    body.page-id-302286 .wp-block-columns.vc_custom_1741723244560 h3.heading-default {
        max-width: 821px !important;
    }
}
@media (min-width: 992px) and (max-width: 1599px) {
    body.page-id-302286 .wp-block-columns.vc_custom_1741723244560 h3.heading-default {
        max-width: 605px !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    body.page-id-302286 .wp-block-columns.vc_custom_1741723244560 h3.heading-default {
        max-width: 302px !important;
    }
}
/* m375 already matches at 281px — no override needed. */

/* KAAM-33418 (2026-08-03) — PSS MAXIMIZE YOUR LESSON cards min-height parity.
   LIVE cards at d1440:
     TRC Sensor (vc_custom_1741722949834): 917px
     Video Analysis (vc_custom_1741722973634): 811px
     College Placement (vc_custom_1741722982523): 811px
   STG measured -10px/-1px/-1px shorter due to internal padding/margin variance
   between WPBakery text-columns and Gutenberg wp-block-group. Force exact
   min-height per card so STG matches LIVE pixel-perfect at desktop.
   Only applied at min-width:1200 to avoid breaking mobile stacking. */
@media (min-width: 1200px) {
    body.page-id-302286 .vc_col-sm-6.vc_col-has-fill:has(> .vc_column-inner.vc_custom_1741722949834),
    body.page-id-302286 .vc_col-sm-6.vc_col-has-fill:has(> .wp-block-group.vc_custom_1741722949834) {
        min-height: 917px !important;
    }
    body.page-id-302286 .vc_col-sm-6.vc_col-has-fill:has(> .vc_column-inner.vc_custom_1741722973634),
    body.page-id-302286 .vc_col-sm-6.vc_col-has-fill:has(> .wp-block-group.vc_custom_1741722973634),
    body.page-id-302286 .vc_col-sm-6.vc_col-has-fill:has(> .vc_column-inner.vc_custom_1741722982523),
    body.page-id-302286 .vc_col-sm-6.vc_col-has-fill:has(> .wp-block-group.vc_custom_1741722982523) {
        min-height: 811px !important;
    }
    body.page-id-302286 .vc_column-inner.vc_custom_1741722949834,
    body.page-id-302286 .wp-block-group.vc_column-inner.vc_custom_1741722949834 {
        min-height: 917px !important;
    }
    body.page-id-302286 .vc_column-inner.vc_custom_1741722973634,
    body.page-id-302286 .wp-block-group.vc_column-inner.vc_custom_1741722973634,
    body.page-id-302286 .vc_column-inner.vc_custom_1741722982523,
    body.page-id-302286 .wp-block-group.vc_column-inner.vc_custom_1741722982523 {
        min-height: 811px !important;
    }
}
/* Empty <i class="vc_btn3-icon"> renders as 0x0 — no visible icon.
   Keep the element in DOM (matches LIVE) but zero out its dimensions. */
.wpb-btn-card .vc_btn3-icon:not(.vc-oi):not([class*=" vc-oi-"]) {
    display: none !important;
}

/* v6 — CARD BACKGROUND + LAYOUT: restore WPBakery's per-vc_custom_XXX
   inline CSS that would have been auto-injected by js_composer. Since
   js_composer is deactivated on STG, we must hand-port these rules
   (extracted from postmeta `_wpb_shortcodes_custom_css` on LIVE). */

/* Sensor Testing inner card (left column in Sensor+Video row).
   Higher specificity via .wp-block-column ancestor to override the
   .wp-block-group.vc_column-inner reset rule elsewhere in this file. */
.wp-block-column > .vc_column-inner.vc_custom_1741722949834,
.wp-block-column > .wp-block-group.vc_column-inner.vc_custom_1741722949834 {
    margin-top: 0 !important;
    margin-right: 20px !important;
    margin-left: 0 !important;
    border-width: 0 !important;
    padding: 0 !important;
    background-color: #F8F8F8 !important;
    border-radius: 10px !important;
}
/* Video Analysis inner card (right column in Sensor+Video row) */
.wp-block-column > .vc_column-inner.vc_custom_1741722973634,
.wp-block-column > .wp-block-group.vc_column-inner.vc_custom_1741722973634 {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-left: 20px !important;
    border-width: 0 !important;
    padding: 0 !important;
    background-color: #F8F8F8 !important;
    border-radius: 10px !important;
}
/* DVL Placement inner card (full-width row) */
.wp-block-column > .vc_column-inner.vc_custom_1741722982523,
.wp-block-column > .wp-block-group.vc_column-inner.vc_custom_1741722982523 {
    margin-top: 0 !important;
    margin-right: 20px !important;
    margin-left: 0 !important;
    border-width: 0 !important;
    padding: 0 !important;
    background-color: #F8F8F8 !important;
    border-radius: 10px !important;
}
/* Card button parent container padding (from vc_custom_1771991452482) —
   applies to all 3 cards' button containers. Insets button by 20px
   each side. */
.wp-block-columns.vc_custom_1741721931222 .wp-block-button.wpb-btn-card,
.wp-block-columns.vc_custom_1741723168136 .wp-block-button.wpb-btn-card {
    margin-left: 20px !important;
    margin-right: 20px !important;
    margin-bottom: 20px !important;
}

/* Font Awesome icons: same pattern keyed on .fa-* class. Font family is
   loaded by the theme (Font Awesome already enqueued). */
.wp-block-button .wp-block-button__link[class*="fa-"]::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.wp-block-button .wpb-btn-icon-left[class*="fa-"]::before  { left:  20px; }
.wp-block-button .wpb-btn-icon-right[class*="fa-"]::before { right: 20px; }
.wp-block-button .wp-block-button__link.fa-angle-right::before { content: "\f105"; }

/* Task 2.10.25 — wpb-btn-uppercase: text-transform to match LIVE's
   vc_btn3-style-modern rendering (all caps). LIVE uses letter-spacing
   normal, so this variant intentionally does NOT set letter-spacing. */
.wp-block-button.wpb-btn-uppercase > .wp-block-button__link,
.wp-block-button .wp-block-button__link.wpb-btn-uppercase {
    text-transform: uppercase !important;
}

/* Task 2.10.25 — wpb-btn-style-modern: mirrors LIVE vc_btn3-style-modern.
   Solid color, NO shimmer gradient (that's -style-custom), 1px lighter-
   shade border, line-height normal, vertical-align middle. Border color
   #F4524D is the juicy-pink family lighter shade — if applying to a
   different color scheme, extend with a per-color rule. */
.wp-block-button.wpb-btn-style-modern > .wp-block-button__link,
.wp-block-button .wp-block-button__link.wpb-btn-style-modern {
    background-image: none !important;
    border: 1px solid #F4524D !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    vertical-align: middle !important;
    text-decoration: none !important;
    display: inline-block !important;
    cursor: pointer !important;
    position: relative !important;
}
/* Match LIVE parent .vc_btn3-container display: inline-block + mb22px.
   LIVE's .vc_btn3-container carries a 22px bottom margin to space the
   button from following content — STG's .wp-block-button lacks this. */
.wp-block-button:has(> .wp-block-button__link.wpb-btn-style-modern),
.wp-block-button.wpb-btn-style-modern {
    display: inline-block !important;
    width: auto !important;
    margin-bottom: 22px !important;
}

/* Task 2.10.25 — USMS post 143449 double-padding fix.
   WPBakery-converted rows on this page stack TWO padding-15 layers
   (.wp-block-column.wpb_column has pl:15 pr:15 AND its child
   .wp-block-group.vc_column-inner also has pl:15 pr:15). LIVE has only
   ONE layer (on .vc_column-inner). Remove the outer .wp-block-column
   padding so the single inner layer matches LIVE. Scoped to postid so
   other pages using .wp-block-column padding stay intact. */
body.page-id-143449 .wp-block-column.wpb_column {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Also flatten .wp-block-buttons flex container to block so
   .wp-block-button's inline-block display propagates properly. */
body.page-id-143449 .wp-block-buttons.is-layout-flex {
    display: block !important;
}

/* Task 2.10.25 v3 — Restore LIVE's row negative margin `ml:-15 mr:-15`
   on WPBakery-converted rows. Was zeroed sitewide by Task 2.10.13's
   overflow fix, but on USMS the outer column's padding is already 0
   (via the double-padding fix above), so the .vc_column-inner's 15px
   padding cancels the row's negative margin cleanly (matches LIVE's
   WPBakery-framework layout math). Content column starts at row.x =
   parent.contentX - 15, matching LIVE exactly. */
body.page-id-143449 .wp-block-columns.vc_row.wpb_row {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

/* KAAM-33690 (2026-07-30) — Ticket claimed "body text color differs" but
   diagnostic audit showed color IS at parity. Real issue: STG paragraphs
   have Gutenberg's default `margin-top: 16px` from wp-includes/blocks/
   paragraph/style.css; LIVE's WPBakery reset it to 0. Cumulative ~112-179px
   height gap on USMS from ~7-11 paragraphs × 16px. Same pattern as
   reference_gutenberg_heading_default_margin_top_20px.md but for <p>. */
body.page-id-143449 .entry-content p {
    margin-top: 0 !important;
}

/* Anuja QA 2026-08-03 — USMS H2 "USMS OFFICIAL PARTNERSHIP" (and other H2s)
   LIVE: line-height:normal (~57.6 at 48px), margin-bottom:0
   STG: line-height:52.8px (Gutenberg lh:1.1), margin-bottom:25px
   Root: Gutenberg default heading has explicit line-height + block-gap margin.
   Reset to match LIVE. */
body.page-id-143449 .entry-content h2.wp-block-heading {
    line-height: normal !important;
    margin-bottom: 0 !important;
}

/* Task 2.10.28 — Private Swim Sessions (302286) Specialized Services
   images row `vc_custom_1741721931222` — restore LIVE's tablet-viewport
   side-by-side 2-column layout. Sitewide rule at ~651 forces all
   .vc_col-sm-* to 100% width ≤991px (mobile-first stack). LIVE
   preserves side-by-side at 768-991 for THIS row (Bootstrap 3 sm-6
   breakpoint stays 50% until true mobile <768). Page-scoped override
   restores 50% width at tablet. */
@media (min-width: 768px) and (max-width: 991px) {
    body.page-id-302286 .wp-block-columns.vc_custom_1741721931222 > .wp-block-column.vc_col-sm-6 {
        max-width: 50% !important;
        flex-basis: 50% !important;
        width: 50% !important;
    }
}

/* KAAM-33821 + KAAM-33802 — /private-swim-sessions/ Specialized Services cards.
   TRC Sensor Testing has an extra description paragraph → naturally taller
   than the Video Analysis card. LIVE's WPBakery .vc_row-fluid did NOT stretch
   flex children so cards kept their natural heights (LIVE Video Analysis 843px,
   TRC Sensor 922px). Gutenberg's .wp-block-columns default is align-items:
   stretch which grew Video Analysis to match TRC Sensor's 921px (+78px bloat).
   Fix: match LIVE by pinning both columns' align-self to flex-start. Also
   applies to the sibling College Placement row (vc_custom_1741723168136). */
body.page-id-302286 .wp-block-columns.vc_custom_1741721931222,
body.page-id-302286 .wp-block-columns.vc_custom_1741723168136 {
    align-items: flex-start !important;
}
body.page-id-302286 .wp-block-columns.vc_custom_1741721931222 > .wp-block-column,
body.page-id-302286 .wp-block-columns.vc_custom_1741723168136 > .wp-block-column {
    align-self: flex-start !important;
}

/* KAAM-33873 — /private-swim-sessions/ heading margin-top: LIVE uses
   `.wp-block-heading { margin-top: 0 }` (WPBakery reset), STG picks up
   Gutenberg's default 20px top margin on all headings except first-child.
   Measured d1920: LIVE H4 margin=0/0/25, STG H4 margin=20/0/25 → forces
   headings 20px lower on STG. Fix: unset margin-top on wp-block-heading
   inside all page-scoped wp-block-columns. */
body.page-id-302286 .entry-content .wp-block-heading {
    margin-top: 0 !important;
}

/* User-CSS `.hide-on-desktop/.hide-on-mobile` rules without !important lose to
   Gutenberg's `body .is-layout-flex { display: flex }`. Force the hide. */
@media screen and (min-width: 1076px) {
    .hide-on-desktop { display: none !important; }
}
@media screen and (max-width: 1075px) {
    .hide-on-mobile { display: none !important; }
}

/* WPBakery: filled section + next section after sibling marker -> 35px padding-top. */
.vc_section-has-fill,
.vc_section-has-fill + .vc_section,
.vc_section-has-fill + .vc_row-full-width + .vc_section {
    padding-top: 35px;
}

/* Neutralize Gutenberg's `is-layout-constrained` max-width inside WPBakery wrappers. */
.vc_section > .wp-block-group__inner-container.is-layout-constrained > *,
.vc_column-inner > .wp-block-group__inner-container.is-layout-constrained > *,
.wpb_text_column .wp-block-group__inner-container.is-layout-constrained > * {
    max-width: none !important;
}

/* Theme `.entry-content.container` -> full-width when any vc_section-has-fill is present.
   Mirrors live's WPBakery-active behaviour. */
.entry-content.container:has(.vc_section-has-fill),
.entry-content:has(.vc_section-has-fill) {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* wp-block-embed aspect-ratio rules (Gutenberg block-library style.css omits these
   on dequeued-plugin pages -> YouTube/Vimeo iframes collapse to ~150px tall). */
.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
    position: relative;
}
.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
    content: "";
    display: block;
    padding-top: 50%;
}
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before { padding-top: 56.25%; }
.wp-block-embed.wp-embed-aspect-4-3  .wp-block-embed__wrapper::before { padding-top: 75%; }
.wp-block-embed.wp-embed-aspect-1-1  .wp-block-embed__wrapper::before { padding-top: 100%; }
.wp-block-embed.wp-has-aspect-ratio iframe {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
}

/* vc_tta_accordion -> HTML5 <details> grouped-list panel styling.
   KAAM-33609 (2026-07-27 v3): LIVE is a GROUPED LIST — no gap between panels,
   border-radius ONLY on first-panel-top and last-panel-bottom. Middle panels
   are flat. Uses margin: -1px trick to collapse double-borders. LIVE data:
     panel margin 0 (no gap)
     first-child heading: border-radius 5px 5px 0 0, margin-bottom -1
     middle heading: border-radius 0, margin -1 top and bottom
     last heading: border-radius 0 0 5px 5px, margin-top -1
     borders 1px solid #f0f0f0 always, bg #f8f8f8 always
     icon color rgb(102, 102, 102) */
.vc_tta-container .vc_tta-panel {
    margin: 0;
    background: transparent;
    box-shadow: none;
    border: none;
}
.vc_tta-container .vc_tta-panel summary {
    padding: 14px 20px;
    cursor: pointer;
    font-weight: 500;
    list-style: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    background: #f8f8f8;
    border: 1px solid #f0f0f0;
    border-radius: 0;
    margin: -1px 0;
}
/* First panel — round top corners, no top margin overlap */
.vc_tta-container .vc_tta-panel:first-of-type summary {
    border-radius: 5px 5px 0 0;
    margin-top: 0;
}
/* Last panel — round bottom corners when closed */
.vc_tta-container .vc_tta-panel:last-of-type summary {
    border-radius: 0 0 5px 5px;
    margin-bottom: 0;
}
/* Last panel is OPEN — remove bottom rounding so body handles it */
.vc_tta-container .vc_tta-panel:last-of-type[open] summary {
    border-radius: 0;
    border-bottom: none;
}
.vc_tta-container .vc_tta-panel[open]:not(:last-of-type) summary {
    border-bottom: none;
}
.vc_tta-container .vc_tta-panel summary::-webkit-details-marker {
    display: none;
}
/* KAAM-33209 v4 (2026-08-04): REMOVED legacy character-based +/- icon
   (KAAM-33609). Replaced by snippet `trc-memberships-faq-accordion.php`
   which uses ::before + ::after background bars matching LIVE's Ultimate
   VC .vc_tta-controls-icon-plus (12×12 with 2px horizontal + 2px vertical
   bars at rgb(102,102,102)). Baseline character icon caused DOUBLE-icon
   render on STG. Snippet's rules with `.vc_tta-container` scope + !important
   ARE the icon source of truth now. */
.vc_tta-container .vc_tta-panel-body {
    background: #f8f8f8;
    border: 1px solid #f0f0f0;
    border-top: none;
    border-radius: 0;
    padding: 14px 20px 18px 46px;
    margin-top: -1px;
}
.vc_tta-container .vc_tta-panel:last-of-type .vc_tta-panel-body {
    border-radius: 0 0 5px 5px;
}

/* ===============================================================
 * RESPONSIVE — SURGICAL approach.
 *
 * Lesson from Cycle 2 audit: aggressive `flex-direction: column !important`
 * on .wp-block-columns made mobile heights blow up to 50-80% over live
 * because images become full-width 375px instead of staying smaller.
 *
 * NEW strategy: trust Gutenberg's built-in responsive behavior (it stacks
 * .wp-block-columns at 781px by default). Only fix things that ACTUALLY
 * break: horizontal overflow, oversized form inputs, runaway images.
 *
 * Keep WPBakery .vc_col-sm-N stacking on tablet (those still need it
 * because we dequeued the WPBakery plugin's responsive CSS).
 * =============================================================== */

/* ----- BODY: NEVER allow horizontal overflow ----- */
body {
    overflow-x: hidden;
}

/* KAAM-33977 (2026-07-29) — wp:cover block background dim overlay must NOT
   intercept clicks. Gutenberg's core CSS sets pointer-events:none on this
   span (see wp-includes/blocks/cover/style.css) but the rule wasn't loading
   on STG (theme dequeue removed too much). Symptom: on Memberships mobile,
   tapping "Sign Up Now" hits the cover__background overlay instead of the
   button below, freezing navigation. Restore Gutenberg's default. */
.wp-block-cover__background,
.wp-block-cover__gradient-background {
    pointer-events: none !important;
}

/* ----- ALL VIEWPORTS: form controls + images never exceed container ----- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="url"],
input[type="search"],
select,
textarea,
.wpcf7-form-control,
.wpcf7-form-control-wrap {
    max-width: 100% !important;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* ----- TABLET (< 992px) ----- */
@media (max-width: 991px) {
    /* WPBakery columns stack to full-width on tablet (their default rule).
       Pure-Gutenberg columns left to Gutenberg's own responsive behavior. */
    .vc_col-sm-1, .vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4,
    .vc_col-sm-5, .vc_col-sm-6, .vc_col-sm-7, .vc_col-sm-8,
    .vc_col-sm-9, .vc_col-sm-10, .vc_col-sm-11, .vc_col-sm-12 {
        max-width: 100%;
        flex-basis: 100% !important;
        width: 100%;
    }

    /* Tables in any wrapper: scroll horizontally */
    .wpb_text_column table,
    .wp-block-freeform table {
        max-width: 100%;
        display: block;
        overflow-x: auto;
    }
}

/* ----- MOBILE (< 768px) ----- */
@media (max-width: 767px) {
    /* All columns full-width on mobile, no padding from .vc_col-sm-N */
    .vc_col-sm-1, .vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4,
    .vc_col-sm-5, .vc_col-sm-6, .vc_col-sm-7, .vc_col-sm-8,
    .vc_col-sm-9, .vc_col-sm-10, .vc_col-sm-11, .vc_col-sm-12 {
        padding-left: 0;
        padding-right: 0;
    }

    /* Reduce row margins on mobile (5% -> 4%) for more readable content area */
    .trc-section-intro .wp-block-group__inner-container > .wp-block-columns,
    .trc-section-services .wp-block-group__inner-container > .wp-block-columns,
    .trc-section-testimonial .wp-block-group__inner-container > .wp-block-columns,
    .trc-section-blog .wp-block-group__inner-container > .wp-block-columns {
        margin-left: 4%;
        margin-right: 4%;
    }

    /* Newsletter cover: full-width on mobile (override desktop 80px margin) */
    .trc-section-newsletter {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Newsletter form: stack input + submit vertically */
    .trc-section-newsletter .mc4wp-form {
        flex-direction: column;
        gap: 12px;
    }
    .trc-section-newsletter .mc4wp-form input[type="email"],
    .trc-section-newsletter .mc4wp-form input[type="submit"] {
        min-width: 0;
        width: 100%;
    }
}

/* ===================================================================
   Aqua Notes + Videos CPT — wp:html defensive containment (2026-07-03)
   After batch-migrating from [vc_column_text] to <!-- wp:html --> blocks,
   some author-provided HTML has fixed pixel widths without media queries.
   Contain overflow at the block level so nothing escapes the viewport.
   =================================================================== */
.type-aqua_note .entry-content .wp-block-html,
.type-video .entry-content .wp-block-html,
.type-aqua_note .entry-content > div[style*="max-width"],
.type-video .entry-content > div[style*="max-width"] {
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: anywhere;
}

/* Race Shop CTA covers — reduce min-height on mobile so 3 stacked cards
   don't overshoot the LIVE reference layout (2026-07-03). */
@media (max-width: 768px) {
    .wp-block-cover.trc-cta-cover {
        min-height: 200px !important;
    }
    .trc-cta-heading { font-size: 24px !important; }
    .trc-cta-subhead { font-size: 12px !important; }
}

/* wp-oembed preview iframes are visibility:hidden but position:absolute with
   1920px width causes phantom horizontal overflow (2026-07-03). Contain them. */
iframe.wp-embedded-content {
    max-width: 100% !important;
    left: 0 !important;
    width: 100% !important;
}

/* Universal wp:html containment — pages/posts often have raw HTML with long
   URLs, embedded tables, or fixed-width content that overflows mobile viewport.
   KAAM-33974 (2026-07-29) — removed `word-break: break-word` from the universal
   descendant rule because it broke short-word content like "<strong>Maggie
   MacNeil</strong>" character-by-character on iPhone (393px) inside PSS
   testimonial. `overflow-wrap: anywhere` alone handles long URLs without
   breaking normal words. `word-break: break-word` remains ONLY on long-URL
   anchors below where it's genuinely needed. */
.entry-content .wp-block-html,
.entry-content .wp-block-html * {
    overflow-wrap: anywhere;
    max-width: 100%;
}
.entry-content .wp-block-html a[href^="http"] {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* KAAM-33974 (2026-07-29) — Gutenberg CORE .wp-block-column applies
   `word-break: break-word` sitewide via wp-includes/blocks/column/style.css.
   This cascades to descendants and breaks short names character-by-character
   on narrow mobile columns (concrete case: <strong>Maggie MacNeil</strong>
   testimonial name in a vc_col-sm-8 column at 393px viewport rendered as
   "M / ag / gi / e MacNeil"). LIVE's WPBakery .vc_col-sm-* does not set
   word-break, so children inherit normal wrapping. Neutralize the Gutenberg
   default; keep `min-width:0` and `flex-grow:1` intact via more specific
   overrides in trc-home.css where needed. */
.wp-block-column {
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* KAAM-34062 (2026-07-29) — Bootstrap 3 base CSS uses WebKit-only
   `outline: -webkit-focus-ring-color auto 5px` on :focus. Firefox doesn't
   recognise `-webkit-focus-ring-color` so shows no visible focus ring →
   keyboard-only users lose orientation (WCAG 2.1 SC 2.4.7 fail). Replace
   with a cross-browser focus indicator scoped to :focus-visible so mouse
   clicks don't show it (matches modern accessibility guidance). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
}
/* Preserve Bootstrap's WebKit-native focus ring for browsers that support
   :focus-visible AND -webkit-focus-ring-color — modern Chromium/Safari
   already show the native ring, our rule just adds a fallback for Firefox. */

/* Long URLs in content areas — break-word so they never blow out mobile. */
.entry-content a[href^="http"],
article .entry-content a,
.page-content a[href^="http"] {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ===============================================================
   Universal responsive-overflow fixes (2026-07-03 QA audit)
   =============================================================== */

/* Fix 1: wp-block-cover intrinsic image widths on mobile.
   Smush lazy-load preserves intrinsic width (1440px+) which overflows small
   viewports even when parent is clipped. Force max-width. */
.wp-block-cover__image-background,
.wp-block-cover img.lazyload,
.wp-block-cover img[width] {
    max-width: 100% !important;
    width: 100% !important;
}

/* Fix 2: legacy .vc_row negative margins overflow small viewports.
   Our converted Gutenberg columns kept .vc_row className for CSS parity, but
   the negative -15px margin extends past the mobile edge. Zero on <=576. */
@media (max-width: 576px) {
    .wp-block-columns.vc_row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .wp-block-columns.vc_row > .wp-block-column {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Fix 3: 3-column layouts stack on tablet (768px). WPBakery had `.vc_col-sm-4`
   set width:33.33% at 768+, which our Gutenberg columns dont collapse below.

/* ===============================================================
   Universal responsive-overflow fixes (2026-07-03 QA audit)
   =============================================================== */

/* Fix 1: wp-block-cover intrinsic image widths on mobile.
   Smush lazy-load preserves intrinsic width (1440px+) which overflows small
   viewports even when parent is clipped. Force max-width. */
.wp-block-cover__image-background,
.wp-block-cover img.lazyload,
.wp-block-cover img[width] {
    max-width: 100% !important;
    width: 100% !important;
}

/* Fix 2: legacy .vc_row negative margins overflow small viewports.
   Our converted Gutenberg columns kept .vc_row className for CSS parity, but
   the negative -15px margin extends past the mobile edge. Zero on <=576. */
@media (max-width: 576px) {
    .wp-block-columns.vc_row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .wp-block-columns.vc_row > .wp-block-column {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Fix 3: 3-column layouts stack on tablet (768px). WPBakery had `.vc_col-sm-4`
   set width:33.33% at 768+, which our Gutenberg columns don't collapse below.
   On tablet, flex-wrap so columns stack cleanly when total width overflows. */
@media (max-width: 900px) {
    .wp-block-columns.vc_row {
        flex-wrap: wrap;
    }
}

/* Post 302080 Homepage — .trc-card 3-column .is-not-stacked-on-mobile
   overflows tablet because each column has 20px margins + 33% basis.
   Reduce margins on tablet so total fits 768px viewport. */
@media (max-width: 900px) {
    .wp-block-columns.is-not-stacked-on-mobile.trc-card > .wp-block-column {
        margin-left: 5px !important;
        margin-right: 5px !important;
    }
}

/* CORRECTION: Post 302080 Homepage uses .trc-cards-row (not .trc-card).
   On tablet/mobile, 3 columns with 20px margins overflow because
   .is-not-stacked-on-mobile prevents natural stacking. Override with
   correct selector + force stack below 900px. */
@media (max-width: 900px) {
    .wp-block-columns.is-not-stacked-on-mobile.trc-cards-row {
        flex-wrap: wrap !important;
    }
    .wp-block-columns.is-not-stacked-on-mobile.trc-cards-row > .wp-block-column {
        flex-basis: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }
}

/* Post 302275 Memberships — Strong Testimonials swiper duplicates leak
   scrollWidth up the DOM tree past their overflow:hidden ancestors. Root cause:
   .wp-block-group__inner-container (Gutenberg default) doesn't clip like WPBakery's
   .wpb_wrapper did. Fix: use overflow-x:clip on html to nail scrollWidth propagation
   at the root. Also on entry-content for defense in depth.

   TRADE-OFF (2026-07-27): .entry-content { overflow-x: clip } ALSO clips the
   trc-stretch.js full-width row trick (row set to width:100vw + left:-N to
   escape .container width). On pages that use full-bleed hero rows via
   trc-stretch.js, this creates the "boxed hero" bug (image visible only
   within .container's 1170 width instead of full 1920 viewport).

   Fix: keep the clip on `html` (safe against real scrollbar leaks) but drop
   it from `.entry-content`. Individual pages that need entry-content-level
   clipping (Memberships swiper) get a page-scoped override below. */
html { overflow-x: clip; }
/* Memberships page (302275) — needs entry-content clip for swiper overflow.
   All other pages: allow overflow so full-width hero rows render properly. */
body.page-id-302275 .entry-content { overflow-x: clip; }

/* Zero WPBakery legacy .vc_row negative margins on Gutenberg .wp-block-columns
   at ALL viewports. Original trick was .vc_row {margin:0 -15px} + .vc_column
   {padding:0 15px} which self-cancelled — but Gutenberg's .wp-block-column
   has different padding behavior, so the negative pushes column edges past
   the viewport. Contained via html { overflow-x: clip } but element-level
   overflow persists. This nails it at the source. */
.entry-content > .wp-block-columns.vc_row,
.wp-block-columns.vc_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* PS 302286 desktop — .vc_column-inner has 20px inline margin from postmeta CSS,
   pushes past viewport. Zero on all viewports. */
.wp-block-group.vc_column-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Homepage mobile — MC4WP Mailchimp form fields overflow 5px past 375 viewport
   due to fixed padding. Constrain to viewport. */
.mc4wp-form-fields,
.mc4wp-form-fields > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* KAAM-33558 — MC4WP alert response (success/error) needs top margin +
   centering + white color to render legibly on the dark newsletter
   section background. */
.mc4wp-response .mc4wp-alert {
    margin-top: 10px;
    text-align: center;
    color: #fff;
}

/* ============================================================
 * Task 2.10.13 — Swim Camps page-width parity with LIVE
 * WPBakery's .vc_row.wpb_row on LIVE has implicit max-width via
 * framework CSS (~1701px). STG's Gutenberg hybrid
 * .wp-block-columns.vc_row.vc_row-fluid rows lose that constraint
 * → expand to full viewport (1920px at desktop) → Google Maps card
 * overlay auto-collapses to compact icons-only mode because iframe
 * is 134px wider than LIVE.
 *
 * Fix: restore LIVE's implicit max-width on hybrid rows so the map
 * iframe renders at ~1246px (LIVE match) and Google shows the fuller
 * "Open in Maps" card overlay.
 *
 * Scoped via .vc_custom_1773870905252 (unique WPBakery custom class
 * on the swim-camps map section) to avoid breaking other pages.
 * ============================================================ */
/* Row width: LIVE uses uniform 90% of .vc_section inner-width across ALL
   viewports (verified 2026-08-05 audit — was 88%/83%, drifted ~14px x-position).
   Updated to 90% for LIVE-parity alignment with Sec[1] + Sec[2] rows at x=85.5 (d1440). */
@media (min-width: 768px) {
    .vc_section.vc_custom_1773870905252 .wp-block-columns.vc_row.vc_row-fluid,
    .vc_section.vc_custom_1773870905252 .wp-block-columns.vc_row {
        width: 90% !important;
        max-width: none !important;
        margin-inline: auto !important;
    }
}
@media (max-width: 767px) {
    .vc_section.vc_custom_1773870905252 .wp-block-columns.vc_row.vc_row-fluid,
    .vc_section.vc_custom_1773870905252 .wp-block-columns.vc_row {
        width: 90% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }
}
/* Remove extra 15px L/R padding on the col-sm-9 column that STG has
   but LIVE doesn't. LIVE .wpb_column.vc_col-sm-9 has 0 padding at this
   level (padding is only on .vc_column-inner); STG has 15px both places.
   That extra 30px is why STG iframe was 1216 instead of LIVE 1246. */
.vc_section.vc_custom_1773870905252 .wp-block-column.vc_col-sm-9 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Tablet: force col-sm-9 to stay 75% of row (matching LIVE WPBakery
   behavior). STG defaults to 100% at tablet due to WordPress core
   stacking rule; that's why tablet iframe was 178px wider than LIVE. */
@media (min-width: 768px) and (max-width: 991px) {
    .vc_section.vc_custom_1773870905252 .wp-block-column.vc_col-sm-9 {
        flex: 0 0 75% !important;
        flex-basis: 75% !important;
        max-width: 75% !important;
        width: 75% !important;
    }
}

/* ============================================================
 * Task 2.10.14 — Swim Camps AMENITIES list spacing parity with LIVE
 * STG each amenity item's <p>.text has margin-bottom:25px (from WP
 * core default p margin); LIVE has 0. That extra 25px × N items adds
 * ~125px column height, making list look loose + pushing items below
 * the fold. LIVE items are ~64px tall each, STG were ~89px (25px
 * taller).
 * Scoped via .vc_custom_1773870905252 on the swim-camps location
 * section (contains both map + amenities).
 * ============================================================ */
.vc_section.vc_custom_1773870905252 .wpb_text_column p.text,
.vc_section.vc_custom_1773870905252 .wp-block-group.wpb_text_column p.text {
    margin-bottom: 0 !important;
}

/* ============================================================
 * Task 2.10.15 — Swim Camp Dates section HEADING + ROW width parity with LIVE
 * The `.vc_custom_1743536551817` row wraps the "SWIM CAMP DATES" heading
 * + the Events Calendar shortcode. On LIVE (WPBakery active), the row
 * is 1701px wide with 94.5px auto-margin each side. On STG (Gutenberg
 * hybrid), the row lost the WPBakery implicit width constraint and
 * stretched to full 1920px, making the heading 189px wider + shifted
 * 95px to the left vs LIVE.
 * Same pattern as Task 2.10.13 (map iframe row). Reference:
 * reference_wpbakery_gutenberg_hybrid_row_width_drift.md
 * ============================================================ */
@media (min-width: 768px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1743536551817,
    .wp-block-columns.vc_row.vc_custom_1743536551817 {
        width: 88.6% !important;
        max-width: 1701px !important;
        margin-inline: auto !important;
    }
    /* Zero outer col-sm-12 padding — WordPress core adds 15px each side
       that WPBakery LIVE doesn't (padding only on inner col-inner) */
    .wp-block-columns.vc_custom_1743536551817 > .wp-block-column.vc_col-sm-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (max-width: 767px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1743536551817,
    .wp-block-columns.vc_row.vc_custom_1743536551817 {
        width: 83vw !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }
    .wp-block-columns.vc_custom_1743536551817 > .wp-block-column.vc_col-sm-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================================================
 * Task 2.10.12 — "MAKING YOU A FASTER SWIMMER" section width parity with LIVE
 * The `.vc_custom_1748368290962` row (heading + coach image, 2×col-sm-6)
 * stretched from LIVE's 1701px wide → STG's full-viewport-wide (219px
 * stretch at 1920, 164-171px at 1440/1366). Same WPBakery hybrid row
 * width drift pattern as Tasks 2.10.13 + 2.10.15. Reference:
 * reference_wpbakery_gutenberg_hybrid_row_width_drift.md
 * ============================================================ */
@media (min-width: 768px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1748368290962,
    .wp-block-columns.vc_row.vc_custom_1748368290962 {
        width: 90% !important;                 /* was 88.6% — updated to LIVE's 90% of section-inner */
        max-width: none !important;
        margin-inline: auto !important;
    }
    /* Zero outer col-sm-6 padding — WordPress core adds 15px each side
       that WPBakery LIVE doesn't (padding only on inner col-inner) */
    .wp-block-columns.vc_custom_1748368290962 > .wp-block-column.vc_col-sm-6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (max-width: 767px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1748368290962,
    .wp-block-columns.vc_row.vc_custom_1748368290962 {
        width: 83vw !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }
    .wp-block-columns.vc_custom_1748368290962 > .wp-block-column.vc_col-sm-6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================================================
 * Task 2.10.11 — Swim Camps HERO section width parity + button flex
 * The hero section (.vc_custom_1773870613336) uses WPBakery's
 * "stretch_row" mode on LIVE — 1728px wide with 96px auto-margin
 * each side. On STG this width constraint was lost, plus the two
 * hero buttons (Swim Camp Dates + Client Testimonials) render
 * stacked vertically instead of side-by-side because .wp-block-buttons
 * flex layout is being overridden somewhere in the cascade.
 * Same WPBakery hybrid row width drift pattern as Tasks 2.10.12/13/15
 * plus additional button flex fix. Reference:
 * reference_wpbakery_gutenberg_hybrid_row_width_drift.md
 * ============================================================ */
@media (min-width: 768px) {
    /* Row: 90vw of viewport with 1728px cap — matches LIVE's stretch_row
       ratio (~90% viewport) across 1024/1366/1440/1920 */
    .vc_custom_1773870613336 .wp-block-columns.vc_row.vc_row-fluid,
    section.vc_custom_1773870613336 > .wp-block-group__inner-container > .wp-block-columns.vc_row {
        width: 90% !important;
        max-width: 1728px !important;
        margin-inline: auto !important;
    }
    /* Zero outer col-sm-12 padding (WP core adds 15px) */
    .vc_custom_1773870613336 .wp-block-column.vc_col-sm-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Force hero buttons side-by-side.
       Root cause: the two buttons are in SEPARATE wp-block-buttons
       containers (each holding one button), so at the block level
       they stack. Switch each container to inline-flex so multiple
       containers lay side-by-side in the parent inner-container. */
    .vc_custom_1773870613336 .wp-block-buttons {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        vertical-align: top;
        margin-right: 12px;
    }
    .vc_custom_1773870613336 .wp-block-buttons .wp-block-button {
        flex: 0 0 auto !important;
        width: auto !important;
    }
}
@media (max-width: 767px) {
    /* Mobile: same 90vw ratio matches LIVE's ~10% total left+right
       indent at 375/425. Buttons stack per usual mobile pattern. */
    .vc_custom_1773870613336 .wp-block-columns.vc_row.vc_row-fluid {
        width: 90% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }
    .vc_custom_1773870613336 .wp-block-column.vc_col-sm-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================================================
 * Task 2.10.16 — Private Coaching / /private-swim-sessions/ page
 * 3 rows drifting from LIVE due to WPBakery hybrid row width loss.
 * Same pattern as Tasks 2.10.11/12/13/15. Reference:
 * reference_wpbakery_gutenberg_hybrid_row_width_drift.md
 *
 * Hero  (stretch_row 1728px @ 90vw)  .vc_custom_1764908310978
 * Precision  (standard 1701px @ 88.6vw)  .vc_custom_1741217277221
 * Pricing  (standard 1701px @ 88.6vw)  .vc_custom_1742794343188
 * ============================================================ */

/* Hero — stretch_row mode */
@media (min-width: 768px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1764908310978,
    .wp-block-columns.vc_row.vc_custom_1764908310978 {
        width: 90% !important;
        max-width: 1728px !important;
        margin-inline: auto !important;
        flex-wrap: nowrap !important;
        /* KAAM-33870 v2 (2026-08-03) — LIVE .vc_row uses block+float layout so
           the empty right column collapses to natural 35px. Gutenberg's default
           `align-items: stretch` on `.wp-block-columns` stretches col[1] to
           match col[0]'s content height (371px @ d1440, 538px @ t768), creating
           an invisible-but-real bounding-rect delta. `align-items: flex-start`
           restores LIVE natural-height behavior. */
        align-items: flex-start !important;
    }
    .wp-block-columns.vc_custom_1764908310978 > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
        /* Same reason as above: column should not self-stretch to parent height. */
        align-self: flex-start !important;
    }
    /* KAAM-33870 v2b — LIVE right col has .vc_col-has-fill class → its inner
       gets `padding-top: 35px` from the baseline `.vc_col-has-fill > .vc_column-inner`
       rule at trc-baseline.css:61-65. STG col[1] lost the class during migration
       so its inner has 0 padding-top → col[1] height=0 vs LIVE 35. Restore
       via direct target on the specific inner's vc_custom class. */
    body.page-id-302286 .wp-block-group.vc_column-inner.vc_custom_1764908169738 {
        padding-top: 35px !important;
    }
    /* KAAM-33870 — keep hero 50/50 split at tablet (768-991). Gutenberg's
       default stacks columns at ≤782px; LIVE's WPBakery keeps them
       side-by-side via .vc_col-sm-6 preserving 50% at Bootstrap-3 sm-6
       breakpoint (768-991). Force 50% basis for parity. */
    body.page-id-302286 .wp-block-columns.vc_custom_1764908310978 > .wp-block-column.vc_col-sm-6 {
        max-width: 50% !important;
        flex-basis: 50% !important;
        width: 50% !important;
    }
}
@media (max-width: 767px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1764908310978,
    .wp-block-columns.vc_row.vc_custom_1764908310978 {
        width: 90% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }
    .wp-block-columns.vc_custom_1764908310978 > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Precision Coaching — standard row mode.
   KAAM-33872 rework 2026-07-30: LIVE row widths measured per viewport:
     d1440 = 1269 (88.1vw), t768 = 664 (86.5vw). Was 88.6vw → +7/+16px over.
   Split into 992+ vs 768-991 for precise match. */
@media (min-width: 992px) and (max-width: 1599px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1741217277221,
    .wp-block-columns.vc_row.vc_custom_1741217277221 {
        width: 88.1% !important;
        max-width: 1701px !important;
        margin-inline: auto !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }
}
@media (min-width: 1600px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1741217277221,
    .wp-block-columns.vc_row.vc_custom_1741217277221 {
        width: 88.6% !important;
        max-width: 1701px !important;
        margin-inline: auto !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1741217277221,
    .wp-block-columns.vc_row.vc_custom_1741217277221 {
        width: 86.5% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }
}
@media (min-width: 768px) {
    .wp-block-columns.vc_custom_1741217277221 > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* KAAM-33872 — keep Precision Coaching row 50/50 at tablet (LIVE .vc_col-sm-6 stays 50%) */
    body.page-id-302286 .wp-block-columns.vc_custom_1741217277221 > .wp-block-column.vc_col-sm-6 {
        max-width: 50% !important;
        flex-basis: 50% !important;
        width: 50% !important;
    }
}
@media (max-width: 767px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1741217277221,
    .wp-block-columns.vc_row.vc_custom_1741217277221 {
        width: 83% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }
    .wp-block-columns.vc_custom_1741217277221 > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Pricing and Booking — standard row mode.
   KAAM-33873 rework 2026-07-30: LIVE row widths measured per viewport:
     d1440 = 1269 (88.1vw), t768 = 664 (86.5vw). Was 88.6vw → +7/+16px over.
   Split into 992+ vs 768-991 for precise match. */
@media (min-width: 992px) and (max-width: 1599px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1742794343188,
    .wp-block-columns.vc_row.vc_custom_1742794343188 {
        width: 88.1% !important;
        max-width: 1701px !important;
        margin-inline: auto !important;
        flex-wrap: nowrap !important;
    }
}
@media (min-width: 1600px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1742794343188,
    .wp-block-columns.vc_row.vc_custom_1742794343188 {
        width: 88.6% !important;
        max-width: 1701px !important;
        margin-inline: auto !important;
        flex-wrap: nowrap !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1742794343188,
    .wp-block-columns.vc_row.vc_custom_1742794343188 {
        width: 86.5% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        flex-wrap: nowrap !important;
    }
}
@media (min-width: 768px) {
    .wp-block-columns.vc_custom_1742794343188 > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* KAAM-33873 — keep Pricing and Booking row 50/50 at tablet (LIVE .vc_col-sm-6 stays 50%) */
    body.page-id-302286 .wp-block-columns.vc_custom_1742794343188 > .wp-block-column.vc_col-sm-6 {
        max-width: 50% !important;
        flex-basis: 50% !important;
        width: 50% !important;
    }
}
@media (max-width: 767px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1742794343188,
    .wp-block-columns.vc_row.vc_custom_1742794343188 {
        width: 83% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }
    .wp-block-columns.vc_custom_1742794343188 > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================================================
 * Task 2.10.16 (REFINEMENT 2026-07-16 v2) — 5 additional rows
 * discovered during 3-viewport QA still drifting to 1920px on STG.
 * Same hybrid row width drift pattern. Extending the fix map:
 *
 * "MAXIMIZE YOUR LESSON..."  (standard 1701 @ 88.6vw)  .vc_custom_1741723244560
 * TRC Sensor Testing card    (stretch_row 1728 @ 90vw) .vc_custom_1741721931222
 * Video Analysis card        (stretch_row 1728 @ 90vw) .vc_custom_1741723168136
 * DVL Placement Table        (standard 1701 @ 88.6vw)  .vc_custom_1741219868418
 * Testimonial quote          (standard 1701 @ 88.6vw)  .vc_custom_1742925824104
 * ============================================================ */

/* MAXIMIZE YOUR LESSON — standard row */
@media (min-width: 768px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1741723244560,
    .wp-block-columns.vc_row.vc_custom_1741723244560 {
        width: 88.6% !important;
        max-width: 1701px !important;
        margin-inline: auto !important;
    }
    .wp-block-columns.vc_custom_1741723244560 > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (max-width: 767px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1741723244560,
    .wp-block-columns.vc_row.vc_custom_1741723244560 {
        width: 83% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }
    .wp-block-columns.vc_custom_1741723244560 > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* TRC Sensor Testing card — stretch_row mode */
@media (min-width: 768px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1741721931222,
    .wp-block-columns.vc_row.vc_custom_1741721931222 {
        width: 90% !important;
        max-width: 1728px !important;
        margin-inline: auto !important;
    }
    .wp-block-columns.vc_custom_1741721931222 > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (max-width: 767px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1741721931222,
    .wp-block-columns.vc_row.vc_custom_1741721931222 {
        width: 90% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }
    .wp-block-columns.vc_custom_1741721931222 > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Video Analysis card — stretch_row mode */
@media (min-width: 768px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1741723168136,
    .wp-block-columns.vc_row.vc_custom_1741723168136 {
        width: 90% !important;
        max-width: 1728px !important;
        margin-inline: auto !important;
    }
    .wp-block-columns.vc_custom_1741723168136 > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (max-width: 767px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1741723168136,
    .wp-block-columns.vc_row.vc_custom_1741723168136 {
        width: 90% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }
    .wp-block-columns.vc_custom_1741723168136 > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* DVL Placement Table — standard row */
@media (min-width: 768px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1741219868418,
    .wp-block-columns.vc_row.vc_custom_1741219868418 {
        width: 88.6% !important;
        max-width: 1701px !important;
        margin-inline: auto !important;
    }
    .wp-block-columns.vc_custom_1741219868418 > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (max-width: 767px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1741219868418,
    .wp-block-columns.vc_row.vc_custom_1741219868418 {
        width: 83% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }
    .wp-block-columns.vc_custom_1741219868418 > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Testimonial quote — standard row */
@media (min-width: 768px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1742925824104,
    .wp-block-columns.vc_row.vc_custom_1742925824104 {
        width: 88.6vw !important;
        max-width: 1701px !important;
        margin-inline: auto !important;
    }
    .wp-block-columns.vc_custom_1742925824104 > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (max-width: 767px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1742925824104,
    .wp-block-columns.vc_row.vc_custom_1742925824104 {
        width: 83vw !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }
    .wp-block-columns.vc_custom_1742925824104 > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================================================
 * Task 2.10.17 sub-obs #6 — Private Coaching newsletter section
 *
 * LIVE `.vc_section.vc_custom_1741233735817` computed padding: 30px 15px.
 * STG measured: padding: 30px 0px 135px — 15px missing on left/right,
 * 105px excess on bottom (from Gutenberg block-editor auto-layout).
 *
 * Postmeta only defines padding-top:30 + padding-bottom:30. The 15px
 * left/right on LIVE comes from an ancestor Bootstrap gutter that
 * Gutenberg reset. Force explicit padding to match LIVE exactly.
 * ============================================================ */
.wp-block-group.vc_section.vc_custom_1741233735817,
section.vc_section.vc_custom_1741233735817 {
    padding: 30px 15px !important;
}

/* ============================================================
 * KAAM-33527 (2.10.58) — .body-red utility class
 * LIVE's js_composer emitted this class for red accent text (e.g. "TEAM" in
 * "MEET THE RACE CLUB TEAM"). Class was defined in js_composer / Ultimate VC
 * Addons stylesheet which is now dequeued. Restore sitewide.
 * Brand red matches .trc-red / .body-red rules already in trc-home.css.
 * ============================================================ */
.body-red {
    color: #D43125 !important;
}

/* ============================================================
 * About page — .trc-team-card-photo img border-radius parity
 * LIVE team member photos have border-radius: 10px (rounded corners).
 * STG figures render at 0px (square). Verified at 512x640 dims for all
 * 8 team members (RICHARD HALL, GARY HALL SR, etc.).
 * Scope: .trc-team-card-photo class on the STG <figure> wrapper.
 * ============================================================ */
.trc-team-card-photo img,
.trc-team-card-photo {
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* ============================================================
 * About page — .trc-affiliation-list link underline strip
 * LIVE affiliation list uses <p>...<a>...</a>...</p> markup with theme-
 * default a { text-decoration: none }. STG converter wrapped the list
 * in <ul class="trc-affiliation-list"> which inherits WordPress default
 * a { text-decoration: underline }. Kill underline to match LIVE.
 * Color rgb(73,154,225) is same on both sides.
 * ============================================================ */
.trc-affiliation-list a,
.trc-affiliation-list li a {
    text-decoration: none !important;
}
.trc-affiliation-list a:hover,
.trc-affiliation-list li a:hover {
    text-decoration: underline !important;
}

/* KAAM-33704 (2026-07-28) — Homepage top-bar CTA links rendered at
   font-weight 400 on STG vs LIVE 500. Two containers:
     .center-sidetop     → SWIM CAMPS, PRIVATE COACHING (left side)
     .sign-in            → Sign In, Sign Up, My Account (right side)
   Measured LIVE at 1440: all links 13px 500. Sitewide header rule.
   6b.4.1 (2026-08-18) — extended to the CONTAINERS too: LIVE renders the WHOLE
   announcement-bar text at 500 (measured .center-sidetop + .sign-in = 500 on LIVE,
   400 on STG), but the original rule only covered the <a> links, leaving the
   non-link text ("IN OCEANSIDE DATES ANNOUNCED!", "AVAILABLE") lighter on STG.
   (Also fixed the separate cause: an extra Montserrat 400;500;600;700;800 font call
   from trc-font-optimization.php that LIVE doesn't load — removed there.) */
.center-sidetop,
.center-sidetop a,
.sign-in,
.sign-in a {
    font-weight: 500;
}

/* /swim-camps/ (page 302403) — mobile card width parity with LIVE.
   Measured 2026-08-04 at m375 (Chromium + WebKit both show same delta):
     LIVE: .vc_section pad 15/15, .vc_custom_1743536535283 row margin 17.25/17.25 → col 311px
     STG:  .vc_section pad 0/0,    row margin 0/0 → col 375px (full viewport, overflow)
   Fix: restore LIVE's mobile section padding + row margin only for this page.
   Bug reported: "Card height/width inconsistency on Mac/Safari" — verified
   present in both Chromium AND WebKit (NOT Safari-specific). */
@media (max-width: 767px) {
    body.page-id-302403 .entry-content > .vc_section,
    body.page-id-302403 .entry-content > section.vc_section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    body.page-id-302403 .wp-block-columns.vc_custom_1743536535283 {
        margin-left: 17.25px !important;
        margin-right: 17.25px !important;
    }
    /* Hero button stack — LIVE has 22px vertical gap between "Swim Camp Dates"
       + "Client Testimonials" buttons. Each button on STG is in its OWN
       .wp-block-buttons container (not siblings inside one flex parent), so
       `gap` doesn't apply — need adjacent-sibling margin between containers. */
    body.page-id-302403 .wp-block-buttons + .wp-block-buttons {
        margin-top: 22px !important;
    }
    body.page-id-302403 .wp-block-buttons .wp-block-button__link {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }
}

/* /swim-camps/ Section 2 "The Race Club Swim Camps are unlike…" — desktop+tablet parity.
   Extending the mobile-only block above (mobile parity already ✓).
   Root cause: LIVE row `.vc_custom_1743536535283` uses WPBakery Bootstrap `.container`
   widths per breakpoint; STG's Gutenberg row falls back to full-viewport. Plus LIVE
   `.vc_section { padding: pt:35 pl/pr:15 pb:0 }` default; STG has pl/pr:0 on desktop
   (mobile parity handled at :1927-1935 above).
   Per-breakpoint audit (2026-08-05):
     d1920: LIVE row 1701 = 90% of (1920-30 section-pad) = 0.9 × 1890 ✓
     d1440: LIVE row 1269 = 90% of (1440-30 section-pad) = 0.9 × 1410 ✓
     t768:  LIVE row 664.22 = 90% of (768-30 section-pad) = 0.9 × 738 ✓
   So LIVE row is a uniform 90% of the section-inner width (not viewport %).
   Since STG .vc_section also gets pl/pr:15 restored above, `width: 90%` on the
   row lands identical to LIVE across all desktop/tablet viewports. */
@media (min-width: 768px) {
    body.page-id-302403 .entry-content > .vc_section,
    body.page-id-302403 .entry-content > section.vc_section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    body.page-id-302403 .wp-block-columns.vc_custom_1743536535283 {
        width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: none !important;
    }
}
/* Paragraph mb inside this row — LIVE mb:0, STG Gutenberg default 25px. */
body.page-id-302403 .wp-block-columns.vc_custom_1743536535283 p {
    margin-bottom: 0 !important;
}

/* Nested card row .vc_custom_1741711330381 (Swimmers + Travel insurance cards)
   — Gutenberg .wp-block-column core default adds 15px pl/pr; LIVE .wpb_column
   has pl/pr:0 (padding lives on .vc_column-inner only). Extra 15px on outer
   card block creates the visible "green left padding" on STG.
   Fix: zero pl/pr on the outer .wp-block-column cards, matching Sec[1]'s
   analogous fix at :1455-1458. */
body.page-id-302403 .wp-block-columns.vc_custom_1741711330381 > .wp-block-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* SWIM CAMP DATES section — LIVE-mechanism parity per mobile viewport.
   Measured 2026-08-04 at 3 viewports:
     m375: LIVE row w=310.5 m=17.25/17.25   STG w=311.25 m=16.88/16.88   → parity ✓
     m430: LIVE row w=360   m=20/20         STG w=356.9  m=21.55/21.55   → 3.1px too narrow
     m767: LIVE row w=663.3 m=36.84/36.84   STG w=636.6  m=50.19/50.19   → 26.7px too narrow
   Root cause: at max-width:767 the existing rule at trc-baseline.css:1428 sets
   `width: 83% !important; margin-inline: auto !important` on this row. At
   vp=430, 83vw=356.9 → auto-center → 21.55/21.55 margins. At vp=767, 83vw=636.6
   → auto-center → 50.19/50.19. LIVE uses `.container` fluid width (viewport
   minus 40px total margin), NOT 83vw. Override the 83vw width to calc-based
   so the row fills parent minus LIVE's 20px margin each side. Heading fits
   naturally on 1 line at ≥425px, no forced `nowrap` needed. */
@media (min-width: 425px) and (max-width: 499px) {
    body.page-id-302403 .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1743536551817,
    body.page-id-302403 .wp-block-columns.vc_row.vc_custom_1743536551817 {
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
        margin-inline: 20px !important;
    }
}

/* Ultimate VC Addons .uvc-heading-spacer.line_only replacement.
   LIVE uses <div class="uvc-heading-spacer line_only" style="margin-top:2%;
   margin-bottom:2%; height:1px"><span class="uvc-headings-line"
   style="border-bottom-width:1px; border-color:rgb(25,80,150)"></span></div>
   — a 1px hairline via border-bottom on an inner span.
   STG migration converted to core/separator: <hr class="wp-block-separator
   has-background" style="background-color:#195096"> — a 2px filled bar.
   Measured LIVE (d1440): wrapper 1140×1px, mt/mb 22.7969px (=2% of 1140).
   Map STG hr to render like LIVE: transparent bg + 1px border-bottom + 2% margin.
   Scoped to pages using this pattern only (798 Subscriptions, 143449 USMS).
   Category R (Ultimate VC dependent) in known_failures catalog. */
body.page-id-798 .entry-content hr.wp-block-separator.has-background,
body.page-id-143449 .entry-content hr.wp-block-separator.has-background,
body.page-id-147405 .entry-content hr.wp-block-separator.has-background {
    height: 1px !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgb(25, 80, 150) !important;
    margin-top: 2% !important;
    margin-bottom: 2% !important;
}


/* ============================================================
 * ROW WIDTH BREAKPOINT FIXES — 2026-08-05 post vw→% conversion QA
 * ============================================================
 * QA revealed that these rows had ONLY a min-width:768 rule (=88.6%)
 * which applied incorrectly at d1440 (LIVE=88.13%) and t768 (LIVE=86.5%).
 * Adding per-breakpoint rules to match LIVE per-viewport measurements.
 * ============================================================ */

/* DVL Placement (.vc_custom_1741219868418) — d1440 + t768 */
@media (min-width: 992px) and (max-width: 1919px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1741219868418,
    .wp-block-columns.vc_row.vc_custom_1741219868418 {
        width: 88.13% !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1741219868418,
    .wp-block-columns.vc_row.vc_custom_1741219868418 {
        width: 86.5% !important;
    }
}

/* Swim Camps Dates (.vc_custom_1743536551817) — 90% of section-inner uniform
   (2026-08-05 Nisarg alignment fix — earlier 88.13%/86.5% viewport-relative
   left row 26-27px narrower because .vc_section has pl/pr:15 = 30px shrink). */
@media (min-width: 992px) and (max-width: 1919px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1743536551817,
    .wp-block-columns.vc_row.vc_custom_1743536551817 {
        width: 90% !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1743536551817,
    .wp-block-columns.vc_row.vc_custom_1743536551817 {
        width: 90% !important;
    }
}

/* Swim Camps Making You A Faster Swimmer (.vc_custom_1748368290962) — 90% uniform */
@media (min-width: 992px) and (max-width: 1919px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1748368290962,
    .wp-block-columns.vc_row.vc_custom_1748368290962 {
        width: 90% !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1748368290962,
    .wp-block-columns.vc_row.vc_custom_1748368290962 {
        width: 90% !important;
    }
}

/* Testimonial quote (.vc_custom_1742925824104) — d1440 + t768 breakpoints.
   Uses vw (not %) because STG parent is wp-block-group__inner-container
   which is 30px narrower than viewport — vw insulates against that. */
@media (min-width: 992px) and (max-width: 1919px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1742925824104,
    .wp-block-columns.vc_row.vc_custom_1742925824104 {
        width: 88.13vw !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .wp-block-columns.vc_row.vc_row-fluid.vc_custom_1742925824104,
    .wp-block-columns.vc_row.vc_custom_1742925824104 {
        width: 86.5vw !important;
    }
}

/* ============================================================
 * .heading-white / .sub-heading-white — sitewide utility classes
 * ============================================================
 * LIVE injects these via _wpb_post_custom_css postmeta per page. Since STG
 * dequeues WPBakery, that CSS is lost. Add here as sitewide utility so any
 * page using `<span class="heading-white">` in post_content renders correctly.
 * Values measured from LIVE via CDP getMatchedStylesForNode on Memberships
 * hero H2 span (2026-08-05):
 *   fs 50/700/lh 1.1em, color white, Montserrat.
 *   Mobile (≤767): fs scales down to 30px.
 * ============================================================ */
.heading-white {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.1em !important;
    color: #ffffff !important;
    font-size: 50px !important;
}
.sub-heading-white {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.7em !important;
    color: #ffffff !important;
    font-size: 22px !important;
}
@media (max-width: 767px) {
    .heading-white {
        font-size: 30px !important;
    }
    .sub-heading-white {
        font-size: 18px !important;
    }
}

/* ── TEC 6.17.2 view-selector dropdown fix (KAAM events page) ──────────────
   The Events Calendar 6.17.2 (STG) sets `word-break:break-word` on the view-
   selector list labels, collapsing them to ~15px so "List"/"Month"/"Photo"
   stack vertically ("Li"/"st"). LIVE (TEC 6.15) used `word-break:normal`.
   Restore horizontal labels to match LIVE. !important overrides the plugin CSS
   (3rd-party, can't edit source). Survives cutover (prod upgrades to 6.17.2). */
.tribe-events-c-view-selector__list-item-link,
.tribe-events-c-view-selector__list-item-text {
	word-break: normal !important;
	white-space: nowrap !important;
}
/* TEC 6.17.2 also enlarges the month day-date LINK to 24px/700; LIVE (6.15) = 16px/500.
   Restore to match LIVE (and the non-link date numbers). */
.tribe-events-calendar-month__day-date-link {
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 22.86px !important;
}
/* TEC 6.17.2 datepicker ("Upcoming") renders day/nav cells as <button>, which inherit the
   theme's default gray button background (#e6e6e6) — LIVE (6.15) used <td> (clean white).
   Neutralize the button styling inside .datepicker to match LIVE; preserve the active-day blue. */
.datepicker button {
	background-color: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}
.datepicker button.active,
.datepicker button.active.day,
.datepicker button.focused {
	background-color: #0044cc !important;
	color: #fff !important;
}
/* TEC 6.17.2 wraps each datepicker day in a <button> inside the <td>, so the td's own 5px
   padding stacks on top of the button's 11px → cells ~10px taller (table 402 vs LIVE 332)
   with baseline/inline-block misalignment. LIVE (6.15) put the day directly in the <td>.
   Zero the wrapping td padding + block the button so spacing/alignment match LIVE. */
.datepicker tbody td {
	padding: 0 !important;
}
.datepicker tbody td button {
	display: block !important;
	width: 100% !important;
	vertical-align: middle !important;
}
/* Datepicker header month/year + nav are also <button> on STG (inline-block, ~145px) so they
   don't fill the cell → "August 2026" sits left-of-center vs LIVE's full-width <th>. Block +
   full-width so the header centers like LIVE. */
.datepicker thead th button,
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next {
	display: block !important;
	width: 100% !important;
}

/* 6b.1 KAAM-33781 — footer newsletter (mc4wp form 346930) laid out as a single-row
   control on the dark .subscribe-bar, content centered (Abhinav 2026-08-17). The base
   dark band lives in race-club.css; these rules adapt the shipped mc4wp markup (two
   stacked <p>, a white "Email address:" label, pill input, red button) into one row.
   All theme-side — survives cutover; the DB form's inline styles are LIVE's own and are
   re-imported unchanged at cutover, so this styling stays correct. */
.subscribe-bar .mc4wp-form-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.subscribe-bar .mc4wp-form-fields > p { margin: 0 !important; }
/* Hide the redundant "Email address:" label text (the placeholder already says it) but
   keep the field: font-size:0 collapses the text + <br>, restored on the input. Label
   stays for="email" so it's still screen-reader associated. */
.subscribe-bar .mc4wp-form label { color: #fff; font-size: 0; }
.subscribe-bar .mc4wp-form label input { font-size: 16px; }
.subscribe-bar .mc4wp-form input[type="submit"] {
	padding: 15px 30px;
	border: 0;
	border-radius: 30px;
	cursor: pointer;
	line-height: 1;
}
/* 6b.1 fix (Anuja 2026-08-18) — the mc4wp success/error message must NOT reflow the row.
   The .row is align-items:center on desktop, so a static .mc4wp-response adds ~31px and
   re-centers everything (heading shifted +31px). Take the response OUT OF FLOW on desktop:
   overlay it just below the form so the row height stays constant. Scoped ≥768 only — on
   mobile the stacked/centered layout has no misalignment, so normal flow (message pushes
   footer down slightly) is fine and avoids overlapping the footer columns. */
@media (min-width: 768px) {
	.subscribe-bar .mc4wp-form { position: relative; }
	.subscribe-bar .mc4wp-response {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-top: 6px;
		text-align: center;
	}
}

/* 6b.2.2 KAAM-33829 — T&C (5918) content-width parity. Measured chain (LIVE vs STG,
   all 4 viewports): the ONLY delta is the row — LIVE's .vc_row-fluid breaks out -15px
   to 1170 (net text col 1140), our Gutenberg row stays contained at 1140 (the global
   anti-overflow rule at ~L1133 zeroes .vc_row margins by design). Forcing the breakout
   would refight that rule + reintroduce the h-overflow it prevents. Instead zero the
   .vc_column-inner 15px inset on THIS page only: contained row 1140 + 0 inset = text
   col 1140, left/right edges 150/1290 at 1440 = EXACT LIVE match (width + centering).
   Specificity (0,4,1) beats the global `.vc_column_container > .vc_column-inner` (0,2,0)
   — no !important needed. */
body.page-id-5918 .entry-content .vc_column_container > .vc_column-inner {
	padding-left: 0;
	padding-right: 0;
}

/* KAAM-35852 — /my-account/edit-account/: checkbox + newsletter radios were ~8px
   off from their labels (WC Subscriptions checkbox margin:-2px + display:block;
   Mailchimp radios margin-top:4px + vertical-align:baseline). Align input with the
   label text. Scoped to account content so no sitewide input change. Measured on STG
   (member login); LIVE not directly measurable (member-only page) — target = clean row. */
body.woocommerce-account .woocommerce-MyAccount-content input.input-radio {
	vertical-align: middle;
	margin: 0 6px 0 0;
	position: relative;
	top: -1px;
}
body.woocommerce-account .woocommerce-MyAccount-content .checkbox input.input-checkbox,
body.woocommerce-account .woocommerce-MyAccount-content p.form-row input.input-checkbox {
	vertical-align: top;
	margin-top: 3px;
}

/* KAAM-35852 — /my-account/edit-account/: stack each input BELOW its label (client spec 2026-08-20).
   ROOT CAUSE of the original mess: an UNSCOPED global `.form-row { display:flex; gap:10px }` (Simple
   Custom CSS&JS post 302251, authored for custom `.form-column` layouts) lands on the WooCommerce
   edit-account form, turning each <label>+<input> into flex siblings (label BESIDE input, wrapping,
   misaligned). We must NOT edit the global rule (checkout + other .form-row consumers depend on it —
   check-usage guardrail), so we override display to BLOCK only inside .woocommerce-EditAccountForm:
   label on its own line, input directly beneath. First/Last name keep WooCommerce's 47% float columns
   (side by side, each stacked internally). Spacing per client: label→its field = 6px; field→next label
   = 24px (the label gap is 25% of the group gap). Measured authenticated on STG member 38400, verified
   1920/1440/768/375. Theme CSS → survives the Option-B cutover. */

body.woocommerce-account .woocommerce-EditAccountForm p.form-row {
	display: block;
	margin: 0 0 8px;           /* field->next-label ~14px visual — matches the radio->Save gap (client) */
}
body.woocommerce-account .woocommerce-EditAccountForm p.form-row > label {
	display: block;
	margin: 0 0 -1px;          /* label->field gap reduced ~30% more (Anuja #1); negative pulls the
	                              input up into the label's line-height leading — only affects THIS gap,
	                              not the field->next-label rhythm above the label. */
	padding: 0;
	text-align: left;
	white-space: nowrap;
}
/* Password section dividers (Anuja): NO "Password change" text; a faint line ABOVE and BELOW the
   section with CONSISTENT, symmetric spacing. Both lines live on the fieldset (border-top/bottom) so
   padding controls the inside gap and margin the outside gap — even above & below each line. */
body.woocommerce-account .woocommerce-EditAccountForm fieldset {
	display: block;
	border-top: 1px solid #e5e5e5;      /* line above the password section */
	border-bottom: 1px solid #e5e5e5;   /* line above the newsletter radios */
	/* gaps to a LABEL carry ~3px line-box leading; gaps to an input/border don't — so these
	   asymmetric values yield a symmetric ~14px VISUAL gap above & below each line. */
	/* Gaps that land on a LABEL get -6px because the label's 32px line-height puts its text ~6px
	   below its box; gaps that land on an input/box get no adjustment. Net: the VISIBLE space above
	   and below each line is equal (~15px to the input box above / label text below). */
	padding: 10px 0 16px;               /* top: line->Current label(text)=20; bottom: Confirm input->line=20 */
	margin: 17px 0 14px;                /* top: Email->line=20; bottom: line->Subscribe checkbox text=20 (checkbox label has smaller line-height than the old radio, so +3 vs before) */
}
body.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
	display: none;                      /* remove the "Password change" heading entirely */
}
/* last password row: drop its own margin so the fieldset padding-bottom alone sets the gap to line 2 */
body.woocommerce-account .woocommerce-EditAccountForm fieldset p.form-row:has(#password_2) {
	margin-bottom: 0;
}
/* Password fields (Current / New / Confirm) are full-width, stacked single fields — no side-by-side
   (client). Their long labels stay on ONE line via the base `white-space:nowrap` and may extend past
   the input width on desktop, which the client is fine with; on mobile the media query lets them wrap. */
body.woocommerce-account .woocommerce-EditAccountForm p.form-row > .input-text,
body.woocommerce-account .woocommerce-EditAccountForm .password-input {
	display: block;
	width: 100%;
	margin: 0;
	float: none;
}
/* Password INPUTS half width (client), but the full-width single-line label stays above them.
   Stacked (not side-by-side) so the long labels never collide. Mobile keeps them full width. */
body.woocommerce-account .woocommerce-EditAccountForm p.form-row:has(#password_current) > .password-input,
body.woocommerce-account .woocommerce-EditAccountForm p.form-row:has(#password_1) > .password-input,
body.woocommerce-account .woocommerce-EditAccountForm p.form-row:has(#password_2) > .password-input {
	width: 48%;
}
/* Display name: input full width (100%); the "This will be how…" hint sits ABOVE the input on the
   right, aligned with the label row (client). */
body.woocommerce-account .woocommerce-EditAccountForm p.form-row:has(#account_display_name) {
	position: relative;
}
body.woocommerce-account .woocommerce-EditAccountForm p.form-row:has(#account_display_name) > .input-text {
	float: none;
	width: 100%;
}
body.woocommerce-account .woocommerce-EditAccountForm #account_display_name_description {
	position: absolute;
	top: 3px;              /* align baseline with the "Display name" label (#1, Ravi) */
	right: 0;
	margin: 0;
	font-size: 14px;       /* reduced (Anuja #2 — 15px was imperceptible, now clearly smaller) */
	line-height: 32px;     /* match the label's line box so text baselines line up */
	text-align: right;
	white-space: nowrap;   /* one line, right-aligned above the input (fits right of the label) */
	float: none;
}
/* Newsletter checkboxes (radios→checkboxes, KAAM-35852 #4-8). Two rows: clickable "Subscribe" +
   disabled "Receive Order Updates". Gaps per Anuja: the checkbox↔its-label gap matches the tight
   label→field gap (#7); the vertical gap between the two rows matches the field→next-label rhythm (#8). */
body.woocommerce-account .woocommerce-EditAccountForm .trc-newsletter-checks p.trc-cb-row {
	display: block;                   /* override the global .form-row flex that overlapped the label */
	margin: 0 0 5px;                  /* checkbox row gap (Anuja) */
	padding: 0;
}
body.woocommerce-account .woocommerce-EditAccountForm .trc-newsletter-checks p.trc-cb-row:last-child {
	margin-bottom: 0;
}
body.woocommerce-account .woocommerce-EditAccountForm .trc-newsletter-checks label.checkbox {
	display: inline-block;
	font-weight: 700;                 /* match the option label weight */
	cursor: pointer;
	margin: 0;
}
body.woocommerce-account .woocommerce-EditAccountForm .trc-newsletter-checks label.checkbox input[type="checkbox"] {
	position: static;
	float: none;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0 6px 0 0;                /* #7: checkbox→its label gap ~ the tight label→field gap */
	vertical-align: middle;
}
/* #6: make the disabled "Receive Order Updates" clearly read as disabled — grey the CHECKBOX only
   (Anuja: not the label). Label text stays black; the box itself is a muted grey. */
body.woocommerce-account .woocommerce-EditAccountForm .trc-newsletter-checks input[disabled] {
	cursor: not-allowed;
	accent-color: #b0b0b0;   /* grey box fill + grey check instead of the blue accent */
	opacity: 0.55;
}
/* WooCommerce Subscriptions "Update the Billing Address contact… for all future renewals" checkbox —
   only shown to users with active subscriptions. Style it to match the newsletter checkboxes (Anuja):
   16px box, 6px gap, black label. Uses flex align-items:flex-start so the long wrapping label sits
   beside the box (hanging indent), not under it. */
body.woocommerce-account .woocommerce-EditAccountForm p#update_all_subscriptions_billing_contact_field {
	display: block;                   /* override the global .form-row flex */
	margin: 0 0 20px;
	padding: 0;
}
body.woocommerce-account .woocommerce-EditAccountForm p#update_all_subscriptions_billing_contact_field label.checkbox {
	display: block;                   /* NOT flex — flex turned the <strong>all</strong> + text into
	                                     separate items and scattered the words */
	position: relative;
	padding-left: 22px;               /* 16px box + 6px gap → hanging indent, text wraps beside the box */
	font-weight: 700;
	color: #000;
	margin: 0;
	line-height: 24px;                /* Anuja — for this label only */
	font-size: 15px;                  /* Anuja — fit "…my active subscriptions" on ONE line at desktop
	                                     (16px+no-optional = 757px > 753px avail → still wrapped; 15px = 710px
	                                     fits with margin). Wraps naturally with the hanging indent on mobile. */
	cursor: pointer;
}
/* Remove the WooCommerce "(optional)" suffix on the subscriptions billing-contact checkbox (Anuja). */
body.woocommerce-account .woocommerce-EditAccountForm p#update_all_subscriptions_billing_contact_field .optional {
	display: none;
}
body.woocommerce-account .woocommerce-EditAccountForm p#update_all_subscriptions_billing_contact_field label.checkbox input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 3px;                         /* align with the first text line */
	float: none;
	width: 16px;
	height: 16px;
	margin-top: 2px;                  /* Anuja — nudge to align with the 24px line */
}
/* Newsletter radios: each option is its own <p.form-row>, so the generic 24px field gap opens a
   ~30px space between the three single-line choices. Tighten it (they are one option group, not
   separate fields), then restore breathing room before the Save button. */
body.woocommerce-account .woocommerce-EditAccountForm p.form-row:has(input.input-radio) {
	margin-bottom: 8px;   /* radio->radio gap = 14px, consistent with the field->label gaps (Anuja) */
}
body.woocommerce-account .woocommerce-EditAccountForm p.form-row:has(input.input-radio) > label {
	margin-bottom: 0;
}
body.woocommerce-account .woocommerce-EditAccountForm p:has(> button[name="save_account_details"]) {
	margin-top: 11px;   /* last-radio -> Save button gap = 14px, consistent with the rest (Anuja) */
}

/* Mobile (<=768): First/Last name go full width (47% columns too narrow) + long password labels wrap. */
@media (max-width: 768px) {
	body.woocommerce-account .woocommerce-EditAccountForm p.form-row-first,
	body.woocommerce-account .woocommerce-EditAccountForm p.form-row-last,
	body.woocommerce-account .woocommerce-EditAccountForm p.form-row:has(#password_1),
	body.woocommerce-account .woocommerce-EditAccountForm p.form-row:has(#password_2),
	body.woocommerce-account .woocommerce-EditAccountForm p.form-row:has(#password_current),
	body.woocommerce-account .woocommerce-EditAccountForm p.form-row:has(#account_display_name) > .input-text,
	body.woocommerce-account .woocommerce-EditAccountForm #account_display_name_description,
	body.woocommerce-account .woocommerce-EditAccountForm p.form-row:has(#password_current) > .password-input,
	body.woocommerce-account .woocommerce-EditAccountForm p.form-row:has(#password_1) > .password-input,
	body.woocommerce-account .woocommerce-EditAccountForm p.form-row:has(#password_2) > .password-input {
		float: none;
		width: 100%;
	}
	body.woocommerce-account .woocommerce-EditAccountForm p.form-row > label {
		white-space: normal;
	}
	/* Display-name hint stacks below the input on mobile (no room for the top-right position). */
	body.woocommerce-account .woocommerce-EditAccountForm #account_display_name_description {
		position: static;
		max-width: none;
		text-align: left;
		white-space: normal;   /* wrap on mobile (desktop nowrap would clip) */
		line-height: normal;   /* reset the desktop 32px so wrapped lines aren't loose */
		margin-top: 4px;
	}
}

/* Password show/hide eye — centered inside the (now full-width) field at every viewport. */
body.woocommerce-account .woocommerce-MyAccount-content .password-input {
	position: relative;
}
body.woocommerce-account .woocommerce-MyAccount-content .show-password-input {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

/* KAAM-35851 — footer "Locations" plain-text item ("Oceanside, CA"). It has no <a> (not linked,
   per client), so it inherited default black on the dark footer. Match the sibling menu links. */
#colophon .site-info .menu li.trc-footer-location {
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 25.5px;
	list-style: none;
}