/*
 * Glacial Blocks — shared frontend + editor CSS.
 *
 * Blocks ship almost no CSS of their own: css/webflow.css owns the design,
 * assets/kit.css owns the Kadence-style option utilities (generated), and each
 * kit block has its own style.css. This file carries only the cross-cutting
 * visibility classes, the resets the faithful (Tier-B) sections' accessibility
 * deviations need, and accessibility guardrails.
 *
 * Breakpoints mirror the design's own media queries in css/webflow.css
 * (991 / 767 / 479), NOT generic device widths.
 */

/* ---------------------------------------------------------------- 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;
}

/* ------------------------------------------------------------ Focus states
 * Never strip outlines — replace them. The design's links and buttons sit on
 * white, light blue and dark blue, so the ring carries its own contrast halo.
 */
/* SITE: the design's own link/button classes (EyeHealth Northwest). */
.button:focus-visible,
.link:focus-visible,
.link-block:focus-visible,
.top-item-link:focus-visible,
.service-link:focus-visible,
.tab-link:focus-visible {
    outline: 2px solid var(--gl-c-accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--gl-c-white);
}

/* ---------------------------------------------------------- Reduced motion
 * front-page.php pre-hides the IX2-animated elements (opacity:0) so they can
 * fade in. Visitors who ask for reduced motion get them shown immediately.
 */
@media (prefers-reduced-motion: reduce) {
    html.w-mod-js [data-w-id] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ------------------------------------------------------------ Editor canvas
 * The front end gets its body type from webflow.css's `body {}` rule; in the
 * editor iframe the content root is .editor-styles-wrapper, which core gives
 * its own defaults. Mirror the design's body type there only.
 * SITE: copy the export's `body {}` size, weight and line-height.
 */
.editor-styles-wrapper {
    color: var(--gl-c-text);
    font-family: var(--wp--preset--font-family--body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75em;
}

/* ------------------------------------------------------------ SITE: EyeHealth Northwest
 * The export's hero headline is a div.hero-line; home-hero makes it the page's
 * <h1>. Undo normalize/components' h1 margin so it renders like the div did.
 */
.hero h1.hero-line {
    margin-top: 0;
}

/* ------------------------------------------------- SITE: EHN service pages
 * The service-page designs (html/pediatric-eye-care.html, refractive-lens-
 * exchange.html) layer a card over the edge of a photo, and run numbered
 * steps along a line. Plans add these as a row/column className; everything
 * else (colours, padding, radius) is kit options.
 *
 *   column.ehn-overlap-card       card column after an image column: pulls left over it
 *   column.ehn-overlap-card-first card column before an image column: pulls right over it
 *   row.ehn-steps                 a line through the info-box badges of a steps row
 */
@media (min-width: 992px) {
    .gl-col.ehn-overlap-card {
        position: relative;
        z-index: 2;
        margin-left: -12%;
    }

    .gl-col.ehn-overlap-card-first {
        position: relative;
        z-index: 2;
        margin-right: -12%;
    }

    .ehn-steps > .gl-row-inner {
        position: relative;
    }

    .ehn-steps > .gl-row-inner::before {
        content: "";
        position: absolute;
        top: 24px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--gl-c-soft), color-mix(in srgb, var(--gl-c-soft) 25%, transparent));
    }

    .ehn-steps .gl-ib {
        position: relative;
    }
}


/* Marks where a client form will go (self-test / quiz pages). */
.gl-col.ehn-form-placeholder {
    border: 2px dashed var(--gl-c-primary);
}