/*
 * Glacial Blocks — shared frontend + editor CSS.
 *
 * Blocks ship almost no CSS of their own: css/webflow.css owns the design.
 * This file carries only the cross-cutting option classes (visibility, column
 * order, spacing tokens) and accessibility guardrails.
 *
 * Breakpoints mirror the design's own media queries in css/webflow.css
 * (991 / 767 / 479), NOT generic device widths.
 *
 * Modifier classes are matched STANDALONE (.gl-swipe, never .gl-grid.gl-swipe)
 * so a preset that replaces the base class can't silently kill the modifier,
 * and so they survive the source-order fight with the design stylesheet.
 */

/* ---------------------------------------------------------------- Visibility
 * Classes are emitted only when the toggle is on, so existing saved content
 * is never affected.
 */
@media (min-width: 992px) {
    .gl-hide-desktop {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .gl-hide-tablet {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .gl-hide-mobile {
        display: none !important;
    }
}

/* Keep hidden blocks editable (dimmed) inside the editor canvas. */
.editor-styles-wrapper .gl-hide-desktop,
.editor-styles-wrapper .gl-hide-tablet,
.editor-styles-wrapper .gl-hide-mobile {
    display: revert !important;
    opacity: 0.55;
}

/* -------------------------------------------------------------- Column order
 * 767px is the design's OWN two-column collapse point (.wrap.flex switches to
 * flex-flow: column at max-width 767), so "mobile" here means exactly
 * "while the columns are stacked".
 */
@media (min-width: 768px) {
    .gl-swap-desktop > :first-child {
        order: 2;
    }

    .gl-swap-desktop > :last-child {
        order: 1;
    }
}

@media (max-width: 767px) {
    .gl-swap-mobile > :first-child {
        order: 2;
    }

    .gl-swap-mobile > :last-child {
        order: 1;
    }
}

/* ----------------------------------------------------------- Section spacing
 * Tokens: none / small / default / large. `default` maps to no class and
 * inherits .section's own 5% padding from css/webflow.css.
 */
.gl-space-none {
    padding-top: 0;
    padding-bottom: 0;
}

.gl-space-small {
    padding-top: 2.5%;
    padding-bottom: 2.5%;
}

.gl-space-large {
    padding-top: 8%;
    padding-bottom: 8%;
}

/* ----------------------------------------------------------------- Full bleed
 * Breaks a section out of #main.standard-inner-wrapper (max-width 1350px /
 * width 90%) on inner pages, so tinted/dark bands span the viewport the way
 * they do on the homepage. Deliberately NOT core's `align: full` support —
 * that injects an `alignfull` class whose position in the class string is a
 * core implementation detail, which would break builder/save() parity.
 */
.gl-full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ------------------------------------------------------ Inner-page measure
 * Inner pages were inset TWICE: #main.standard-inner-wrapper is already
 * width:90% / max-width:1350px, and then every .section > .wrap took another
 * 90% of that. Inner content came out at 1166px against the homepage's 1296px
 * at a 1440px viewport, and 1215px against 1728px at 1920px — the pages read
 * as a narrower site than the homepage.
 *
 * .standard-inner-wrapper already IS the page measure, so the wrap inside it
 * spans it fully. .ip-header sits outside that wrapper and keeps its own 90%.
 */
.standard-inner-wrapper .section > .wrap {
    width: 100%;
}

/*
 * The BACKGROUND spans the viewport; the CONTENT must not. A bled band escapes
 * .standard-inner-wrapper, so it cannot inherit that measure — it has to
 * rebuild it, or the dark bands run edge-to-edge while the light sections
 * around them stay on the page grid.
 *
 * 90% + the same cap reproduces .standard-inner-wrapper exactly: at 1440px
 * both come out 1296px, at 1920px both hit the 1350px cap. Needs to outrank
 * the rule above, hence the .standard-inner-wrapper prefix here too.
 *
 * Child selector on purpose: only the band's own wrap, never a nested one.
 */
.standard-inner-wrapper .section.gl-full-bleed > .wrap {
    width: 90%;
    max-width: var(--gl-max-width, 1350px);
}

/*
 * A page ending on a bled band should meet the footer, not float above it.
 * .standard-inner-wrapper's padding-bottom (--gl-inner-pad-bottom, 4rem) is
 * right for a page whose last block is ordinary content, but when that block
 * bleeds edge-to-edge the padding renders as a white stripe between the band
 * and the footer — most visible when both are dark, as on For Builders,
 * Contact Us and Request an Appointment.
 *
 * The band keeps its OWN vertical padding, so the copy still has room; only
 * the container's gap goes. Scoped to :last-child so a bled band mid-page is
 * untouched. Browsers without :has() simply keep the current 4rem gap.
 */
.standard-inner-wrapper:has(> .section.gl-full-bleed:last-child) {
    padding-bottom: 0;
}

/* --------------------------------------------------------------- Grid swipe
 * Horizontal swipe for card grids on small screens. Standalone selector on
 * purpose (see header note).
 */
@media (max-width: 767px) {
    .gl-swipe {
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        grid-template-columns: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .gl-swipe > * {
        scroll-snap-align: start;
    }
}

/* -------------------------------------------------------------- Button row
 * The export never groups buttons, so there is no design class for this.
 * Namespaced gl-* to make clear it belongs to the block system, not webflow.css.
 */
.gl-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

/*
 * .wrap.center is text-align only, which cannot centre a flex row — a centred
 * section would otherwise show centred copy above a left-aligned button row.
 */
.wrap.center .gl-btn-row {
    justify-content: center;
}

/*
 * ._3-dots is display:flex for the same reason, so the rule under a centred
 * heading would otherwise hang off at the left margin. Its own margin-left and
 * the last dot's trailing margin-right are zeroed so the group centres
 * optically rather than 6px to the left.
 */
.wrap.center ._3-dots {
    justify-content: center;
    margin-left: 0;
}

.wrap.center ._3-dots .dot:last-child {
    margin-right: 0;
}

/*
 * .dot is --color-5 (#4a5568), which all but disappears on a --color-3
 * (#2c3340) band. The export never places the rule on a dark section, so
 * webflow.css has no variant for it; brass is the accent the design already
 * uses on dark (the step-number ring), so the rule reads as intended there.
 */
.section.dark ._3-dots .dot {
    background-color: var(--color-6, #c8b99a);
}

/* ------------------------------------------------------- Buttons in .entry
 * Inner pages wrap content in #main.standard-inner-wrapper.entry, and
 * style.css gives `.entry a` the prose link treatment (#437AB2, underlined).
 * That is specificity 0,1,1 and so beats components.css's `.w-button`
 * (0,1,0) — every Glacial button on an inner page renders as blue underlined
 * link text sitting on the button's own background. The homepage has no
 * .entry wrapper, which is why the bug is invisible there.
 *
 * This restores what .w-button already asked for; it is not a new look.
 */
.entry a.button,
.entry a.button:hover,
.entry a.button:focus {
    color: var(--color, #fff);
    text-decoration: none;
}

/*
 * .button.outline is a DARK-BAND control: css/webflow.css gives it a white
 * border over a translucent-dark fill (#1a202c78), which on a light section
 * reads as a washed-out grey box with an invisible border. The export only
 * ever places it on dark, but inner-page CTAs need a secondary button on
 * light too — so invert it there rather than banning the pairing.
 */
.section:not(.dark) a.button.outline {
    border-color: var(--color-5, #4a5568);
    background-color: transparent;
    color: var(--color-5, #4a5568);
}

.section:not(.dark) a.button.outline:hover,
.section:not(.dark) a.button.outline:focus {
    border-color: var(--color-5, #4a5568);
    background-color: var(--color-5, #4a5568);
    color: var(--color, #fff);
}

/* ------------------------------------------------------------- Step cards
 * .three-boxes is a stretch flex row, so each .step-holder-main is already
 * full-height — but .step-div is content-sized inside it, so a row of steps
 * with uneven copy renders as ragged-bottomed cards. Growing the card (not
 * the column) keeps any .vert-line connector pinned below it.
 */
.three-boxes .step-div {
    flex-grow: 1;
}

/* ------------------------------------------------------------ Accessibility
 * Never strip focus outlines — replace them.
 */
.gl-btn:focus-visible,
.glacial-block a:focus-visible,
.glacial-block button:focus-visible {
    outline: 2px solid var(--color-6, #c8b99a);
    outline-offset: 2px;
}

/*
 * Webflow IX2 motion. The homepage ships an initial-state <style> block that
 * sets opacity:0 / transform on every animated [data-w-id]; if the visitor asks
 * for reduced motion we must reveal those elements rather than leave them
 * invisible. !important beats both the pre-hide block and IX2's inline styles.
 */
@media (prefers-reduced-motion: reduce) {
    [data-w-id] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}