/*
 * DSB Site System — v0.2.1
 * Reusable utilities for Divi 5.
 * Intentionally class-based: nothing changes unless a dsb-* class is applied.
 */

/* ---------- Core ---------- */
.dsb-hero,
.dsb-section,
.dsb-card,
.dsb-heading-center {
    box-sizing: border-box;
}

/* ---------- Containers ---------- */
/*
 * Do not globally resize Divi rows: the existing DSB pages already contain
 * deliberate row widths/offsets that match the approved mockups.
 * Apply dsb-container only when a row genuinely needs the standard wrapper.
 */
.dsb-container.et_pb_row,
.dsb-container > .et_pb_row {
    width: calc(100% - (var(--dsb-gutter-desktop) * 2)) !important;
    max-width: var(--dsb-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------- Interior page hero ---------- */
/*
 * The approved static prototype uses a fixed header with a 60vh hero. The
 * Divi header currently occupies normal document flow, so we subtract the
 * visual header height to reproduce the same visible hero depth.
 */
.dsb-hero-inner {
    min-height: calc(var(--dsb-inner-hero-height) - var(--dsb-header-compensation)) !important;
    display: flex !important;
    align-items: flex-end !important;
    padding-top: 0 !important;
    padding-bottom: var(--dsb-inner-hero-bottom) !important;
}

/* Preserve the page's existing horizontal row position; remove only Divi's
 * extra vertical row padding/margins so the content sits at the intended
 * bottom position. */
.dsb-hero-inner > .et_pb_row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Homepage hook: intentionally conservative in v0.1. */
.dsb-hero-home {
    position: relative;
}

/* ---------- Standard sections ---------- */
.dsb-section {
    padding-top: var(--dsb-section-desktop) !important;
    padding-bottom: var(--dsb-section-desktop) !important;
}

.dsb-section-tight {
    padding-top: calc(var(--dsb-section-desktop) * .68) !important;
    padding-bottom: calc(var(--dsb-section-desktop) * .68) !important;
}

.dsb-section-no-top {
    padding-top: 0 !important;
}

.dsb-section-no-bottom {
    padding-bottom: 0 !important;
}

/* ---------- Subtle grid background ---------- */
.dsb-section-grid {
    background-image:
        linear-gradient(rgba(10, 26, 47, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 26, 47, .045) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    background-position: center center !important;
}

/* ---------- Headings ---------- */
.dsb-heading-center,
.dsb-heading-center .et_pb_text_inner,
.dsb-heading-center h1,
.dsb-heading-center h2,
.dsb-heading-center h3,
.dsb-heading-center h4,
.dsb-heading-center p {
    text-align: center !important;
}

.dsb-heading-black h1,
.dsb-heading-black h2,
.dsb-heading-black h3,
.dsb-heading-black h4,
.dsb-heading-black h5,
.dsb-heading-black h6 {
    color: var(--dsb-text) !important;
}

.dsb-heading-gold h1,
.dsb-heading-gold h2,
.dsb-heading-gold h3,
.dsb-heading-gold h4,
.dsb-heading-gold h5,
.dsb-heading-gold h6 {
    color: var(--dsb-gold) !important;
}

/* ---------- Cards ---------- */
.dsb-card {
    padding: 34px !important;
}

.dsb-card-compact {
    padding: 26px !important;
}

/* ---------- Buttons: gold wipe left → right ---------- */
.et_pb_button.dsb-wipe-gold,
.dsb-wipe-gold .et_pb_button {
    box-sizing: border-box !important;
    display: inline-block !important;
    position: relative !important;
    vertical-align: middle !important;
    font-family: "Barlow", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.7em !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    padding: 17px 38px !important;
    color: var(--dsb-navy) !important;
    border: 1px solid var(--dsb-navy) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: linear-gradient(90deg, var(--dsb-gold) 0%, var(--dsb-gold) 100%) !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 0% 100% !important;
    transform: none !important;
    transition:
        background-size .55s cubic-bezier(.22,.61,.36,1),
        border-color .35s ease,
        color .35s ease !important;
}

.et_pb_button.dsb-wipe-gold::after,
.dsb-wipe-gold .et_pb_button::after {
    display: none !important;
    content: none !important;
}

.et_pb_button.dsb-wipe-gold:hover,
.dsb-wipe-gold .et_pb_button:hover {
    padding: 17px 38px !important;
    border: 1px solid var(--dsb-gold) !important;
    line-height: 1.7em !important;
    background-color: transparent !important;
    background-image: linear-gradient(90deg, var(--dsb-gold) 0%, var(--dsb-gold) 100%) !important;
    background-position: left center !important;
    background-size: 100% 100% !important;
    color: var(--dsb-navy) !important;
    transform: none !important;
}

/* Button variants */
.dsb-button-on-dark .et_pb_button,
.et_pb_button.dsb-button-on-dark {
    color: #fff !important;
    border-color: var(--dsb-gold) !important;
}

.dsb-button-on-dark .et_pb_button:hover,
.et_pb_button.dsb-button-on-dark:hover {
    color: var(--dsb-navy) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .dsb-container.et_pb_row,
    .dsb-container > .et_pb_row {
        width: calc(100% - (var(--dsb-gutter-desktop) * 2)) !important;
    }

    .dsb-section {
        padding-top: var(--dsb-section-tablet) !important;
        padding-bottom: var(--dsb-section-tablet) !important;
    }

    .dsb-section-tight {
        padding-top: calc(var(--dsb-section-tablet) * .68) !important;
        padding-bottom: calc(var(--dsb-section-tablet) * .68) !important;
    }

    .dsb-hero-inner {
        min-height: auto !important;
        align-items: flex-start !important;
        padding-top: 132px !important;
        padding-bottom: 52px !important;
    }

    .dsb-hero-inner > .et_pb_row {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    .dsb-container.et_pb_row,
    .dsb-container > .et_pb_row {
        width: calc(100% - (var(--dsb-gutter-mobile) * 2)) !important;
    }

    .dsb-section {
        padding-top: var(--dsb-section-mobile) !important;
        padding-bottom: var(--dsb-section-mobile) !important;
    }

    .dsb-section-tight {
        padding-top: calc(var(--dsb-section-mobile) * .68) !important;
        padding-bottom: calc(var(--dsb-section-mobile) * .68) !important;
    }

    .et_pb_button.dsb-wipe-gold,
    .dsb-wipe-gold .et_pb_button,
    .et_pb_button.dsb-wipe-gold:hover,
    .dsb-wipe-gold .et_pb_button:hover {
        padding: 15px 24px !important;
        white-space: normal !important;
        text-align: center !important;
    }
}

/* ==========================================================
 * FAST QA AUTO-HERO — v0.3
 * Applied by site-system.js to the real Divi section that owns
 * the first H1 on internal WordPress Pages. This avoids adding
 * the same Divi Attributes manually to every page.
 * ========================================================== */
.dsb-auto-hero {
    box-sizing: border-box !important;
    min-height: calc(60svh - var(--dsb-live-header-height, 92px)) !important;
    display: flex !important;
    align-items: flex-end !important;
    padding-top: 0 !important;
    padding-bottom: 70px !important;
}

.dsb-auto-hero > .et_pb_row,
.dsb-auto-hero .dsb-auto-hero-row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Match the prototype's reset + explicit spacing:
   .eyebrow margin-bottom:22px; h1 has no default margin;
   hero paragraph margin-top:18px. */
.dsb-auto-hero .dsb-auto-eyebrow-module {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}

.dsb-auto-hero .dsb-auto-title-module {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

.dsb-auto-hero .dsb-auto-copy-module {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.dsb-auto-hero .dsb-auto-title-module h1,
.dsb-auto-hero .dsb-auto-copy-module p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 980px) {
    .dsb-auto-hero {
        min-height: auto !important;
        align-items: flex-start !important;
        padding-top: 72px !important;
        padding-bottom: 52px !important;
    }
}


/* ==========================================================
 * FAST QA GEOMETRY LOCK — v0.4
 * Mirrors the supplied static prototype instead of relying on
 * each Divi page's row width/margins.
 * ========================================================== */
@media (min-width: 981px) {
    /* The static .page-hero is 60vh underneath a fixed header.
       Divi's header is in normal flow, so force the visible hero
       to the same depth rather than allowing Divi min-height/padding
       to make it taller. */
    .dsb-hero-inner,
    .dsb-auto-hero {
        box-sizing: border-box !important;
        height: calc(60svh - var(--dsb-live-header-height, var(--dsb-header-compensation, 92px))) !important;
        min-height: 360px !important;
        max-height: 440px !important;
        padding-top: 0 !important;
        padding-bottom: 70px !important;
        display: flex !important;
        align-items: flex-end !important;
    }

    /* Important: the original static .wrap is a flex item without
       width:100%, so it shrink-wraps around roughly a 560px paragraph
       and sits centred. This is why the approved content begins much
       further in from the left than a normal 1240px Divi row. */
    .dsb-hero-inner > .et_pb_row,
    .dsb-auto-hero > .et_pb_row,
    .dsb-auto-hero .dsb-auto-hero-row {
        width: 600px !important;
        max-width: calc(100% - 80px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Remove per-module Divi spacing so eyebrow → title → copy follows
       the static source exactly: 22px then 18px. */
    .dsb-auto-hero .dsb-auto-eyebrow-module,
    .dsb-auto-hero .dsb-auto-title-module,
    .dsb-auto-hero .dsb-auto-copy-module {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .dsb-auto-hero .dsb-auto-eyebrow-module {
        margin: 0 0 22px 0 !important;
    }
    .dsb-auto-hero .dsb-auto-title-module {
        margin: 0 0 18px 0 !important;
    }
    .dsb-auto-hero .dsb-auto-copy-module {
        margin: 0 !important;
    }

    .dsb-auto-hero .dsb-auto-eyebrow-module .et_pb_text_inner,
    .dsb-auto-hero .dsb-auto-title-module .et_pb_text_inner,
    .dsb-auto-hero .dsb-auto-copy-module .et_pb_text_inner,
    .dsb-auto-hero .dsb-auto-title-module h1,
    .dsb-auto-hero .dsb-auto-copy-module p {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .dsb-auto-hero .dsb-auto-copy-module p {
        max-width: 560px !important;
    }
}


/* ==========================================================
 * HERO CONTENT STACK NORMALISER — v0.4.1
 * Divi 5 can add layout gaps/min-heights at row/column/group level.
 * These rules remove that hidden spacing so the approved static
 * eyebrow → title → copy rhythm is controlled only by our variables.
 * ========================================================== */
@media (min-width: 981px) {
    .dsb-hero-inner > .et_pb_row,
    .dsb-auto-hero > .et_pb_row,
    .dsb-auto-hero .dsb-auto-hero-row,
    .dsb-hero-inner > .et_pb_row > .et_pb_column,
    .dsb-auto-hero .dsb-auto-hero-row > .et_pb_column,
    .dsb-auto-hero .dsb-auto-content-column {
        row-gap: 0 !important;
        column-gap: 0 !important;
        gap: 0 !important;
    }

    .dsb-auto-hero .dsb-auto-content-column {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    .dsb-auto-hero .dsb-auto-content-column > .et_pb_module,
    .dsb-auto-hero .dsb-auto-eyebrow-module,
    .dsb-auto-hero .dsb-auto-title-module,
    .dsb-auto-hero .dsb-auto-copy-module,
    .dsb-auto-hero .dsb-auto-eyebrow-module .et_pb_text_inner,
    .dsb-auto-hero .dsb-auto-title-module .et_pb_text_inner,
    .dsb-auto-hero .dsb-auto-copy-module .et_pb_text_inner {
        min-height: 0 !important;
        height: auto !important;
    }

    /* Kill Divi module spacing first. Re-add only the two approved gaps. */
    .dsb-auto-hero .dsb-auto-content-column > .et_pb_module {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .dsb-auto-hero .dsb-auto-eyebrow-module {
        margin-bottom: var(--dsb-hero-gap-eyebrow-title, 22px) !important;
    }

    .dsb-auto-hero .dsb-auto-title-module {
        margin-bottom: var(--dsb-hero-gap-title-copy, 18px) !important;
    }

    .dsb-auto-hero .dsb-auto-copy-module {
        margin-bottom: 0 !important;
    }

    .dsb-auto-hero .dsb-auto-eyebrow-module p,
    .dsb-auto-hero .dsb-auto-title-module h1,
    .dsb-auto-hero .dsb-auto-copy-module p {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}