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

/* ------------------------------------------------------------ Hero headline
 * The export's headline is a div; the hero block makes it the page's <h1>.
 * Undo the h1 defaults from normalize/components.css so it renders like the div did.
 */
.hero h1.hero-lg-line {
    margin-top: 0;
    font-weight: inherit;
}

/* ----------------------------------------------------- Accordion questions
 * The export's .faq2_question is a div; the patient-education block makes it a
 * real <button> so it is keyboard operable. Strip the UA button styles the div
 * never had — webflow.css still owns colour, padding and type size.
 */
button.faq2_question {
    width: 100%;
    border-style: none;
    font-family: inherit;
    letter-spacing: inherit;
    text-align: left;
}

/* ------------------------------------------------------------ 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.
 */
.button:focus-visible,
.explore-link:focus-visible,
.faq2_question:focus-visible,
.ql:focus-visible {
    outline: 2px solid var(--color-8);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--color);
}

/* ---------------------------------------------------------- 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.
 */
.editor-styles-wrapper {
    color: #333;
    font-family: Lato, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.75em;
}