/*
 * Glacial Blocks — front-end + editor CSS.
 * Interaction styles ported from Webflow and small block-level fixes only.
 * The site design lives in css/webflow.css; do not duplicate it here.
 */

/*
 * Webflow defines grid column recipes on per-page #w-node ids.
 * Blocks can't carry those ids, so the recipes are ported to the
 * grid variant classes used by glacial/layout-grid.
 */
.w-layout-layout.two_columns_grid {
    grid-template-rows: auto;
    grid-template-columns: .75fr 1fr;
}

.w-layout-layout.services_grid,
.w-layout-layout.hearing_grid,
.w-layout-layout.callouts_grid {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
}

.w-layout-layout.what_grid {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
}

/* Generic inner-page column recipes (glacial/layout-grid) */
.w-layout-layout.gl_cols_2 {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
}

.w-layout-layout.gl_cols_3 {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
}

.w-layout-layout.gl_cols_4 {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.w-layout-layout.gl_cols_2_1 {
    grid-template-rows: auto;
    grid-template-columns: 2fr 1fr;
}

.w-layout-layout.gl_cols_1_2 {
    grid-template-rows: auto;
    grid-template-columns: 1fr 2fr;
}

@media screen and (max-width: 991px) {
    .w-layout-layout.two_columns_grid,
    .w-layout-layout.services_grid,
    .w-layout-layout.hearing_grid,
    .w-layout-layout.what_grid,
    .w-layout-layout.gl_cols_2,
    .w-layout-layout.gl_cols_2_1,
    .w-layout-layout.gl_cols_1_2 {
        grid-template-rows: auto;
        grid-template-columns: 1fr;
    }

    .w-layout-layout.gl_cols_3,
    .w-layout-layout.gl_cols_4 {
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 767px) {
    .w-layout-layout.callouts_grid,
    .w-layout-layout.gl_cols_3,
    .w-layout-layout.gl_cols_4 {
        grid-template-rows: auto;
        grid-template-columns: 1fr;
    }
}

/*
 * Optional gap sizes for glacial/layout-grid. Webflow's base .w-layout-layout
 * gap is deliberately asymmetric (100px column / 20px row); these set both axes
 * to one value. No class is emitted for the "Default" choice, so existing grids
 * keep the Webflow gap untouched. The two-class selector outranks the base rule,
 * so the `gap` shorthand wins over its grid-row-gap/grid-column-gap longhands.
 */
.w-layout-layout.gl_gap_sm {
    gap: 20px;
}

.w-layout-layout.gl_gap_md {
    gap: 50px;
}

.w-layout-layout.gl_gap_lg {
    gap: 100px;
}

/* stacked columns don't need a wide gutter */
@media screen and (max-width: 767px) {
    .w-layout-layout.gl_gap_md,
    .w-layout-layout.gl_gap_lg {
        gap: 30px;
    }
}

/*
 * Optional padding for glacial/layout-grid. Webflow's base .w-layout-layout
 * sets padding: 20px, which is the "Default" choice — it emits no class, so
 * existing grids keep it and are unchanged. The two-class selector outranks
 * the single-class base rule, so these win without !important.
 */
.w-layout-layout.gl_pad_lg {
    padding: 50px;
}

.w-layout-layout.gl_pad_none {
    padding: 0;
}

/* 50px each side is too much of a phone's width — fall back to the base inset */
@media screen and (max-width: 767px) {
    .w-layout-layout.gl_pad_lg {
        padding: 20px;
    }
}

/*
 * "Reverse on mobile" for glacial/layout-grid — the usual case being an image
 * column that must not end up above the copy it belongs to once stacked.
 *
 * Deliberately variant-aware: the recipes collapse to ONE column at different
 * widths, and reversing a grid that is still 2-up would just scramble it. So the
 * rule fires per variant at the width where that variant reaches one column —
 * 991px for the two-column recipes, 767px for the 3/4-column ones and callouts.
 *
 * Switching to a reversed flex column is what does the flipping; grid-template-
 * columns is moot at one column, and `gap` works identically in flex, so the
 * gl_gap_* choices still apply.
 */
@media screen and (max-width: 991px) {
    .w-layout-layout.gl_reverse_mobile.two_columns_grid,
    .w-layout-layout.gl_reverse_mobile.services_grid,
    .w-layout-layout.gl_reverse_mobile.hearing_grid,
    .w-layout-layout.gl_reverse_mobile.what_grid,
    .w-layout-layout.gl_reverse_mobile.gl_cols_2,
    .w-layout-layout.gl_reverse_mobile.gl_cols_2_1,
    .w-layout-layout.gl_reverse_mobile.gl_cols_1_2 {
        display: flex;
        flex-direction: column-reverse;
    }
}

@media screen and (max-width: 767px) {
    .w-layout-layout.gl_reverse_mobile.callouts_grid,
    .w-layout-layout.gl_reverse_mobile.gl_cols_3,
    .w-layout-layout.gl_reverse_mobile.gl_cols_4 {
        display: flex;
        flex-direction: column-reverse;
    }
}

/* ---------------------------------------------------------------------------
   glacial/heading — level-correct sizing for .hp_headline.

   .hp_headline IS the h2 treatment (3rem / weight 200; its ≤991px override is
   h2's mobile size). But the block offers h1–h4 and stamps the class on every
   level, and a class beats a bare element selector — so an H3 rendered at 3rem
   instead of the theme's 2.2rem and every level looked identical.

   Restore the element scale for the levels .hp_headline was not designed for,
   keeping its light weight and tighter margin so the brand character survives.
   `h3.hp_headline` is (0,1,1), outranking both `.hp_headline` (0,1,0) and `h3`
   (0,0,1), so load order is irrelevant — which matters, because this file is
   enqueued before css/webflow.css.

   Sizes mirror css/webflow.css exactly, including its ≤767px step-down. These
   base rules also outrank webflow's ≤991px `.hp_headline` override; that is
   deliberate, since 2.4rem is h2's mobile size and must not leak to h1/h3/h4.
   h2 needs no rule here: .hp_headline is already correct at that level.
--------------------------------------------------------------------------- */
h1.hp_headline {
    font-size: 3.6rem;
    line-height: 3.8rem;
}

h3.hp_headline {
    font-size: 2.2rem;
    line-height: 1.4;
}

h4.hp_headline {
    font-size: 1.4rem;
    line-height: 1.5rem;
}

/*
 * Tablet step-down, matching the breakpoint where .hp_headline itself eases off
 * (and where the two-column grid recipes collapse). css/webflow.css defines no
 * 991px values for h1/h3/h4 — only for h2/.hp_headline — so these are even
 * intermediate steps between the desktop and 767px sizes:
 *   h1 3.6 -> 3.3 -> 3     h3 2.2 -> 2 -> 1.8     h4 1.4 -> 1.2 -> 1.1
 *
 * These MUST stay between the base rules above and the 767px block below:
 * all three have the same (0,1,1) specificity, so document order decides.
 */
@media screen and (max-width: 991px) {
    h1.hp_headline {
        font-size: 3.3rem;
        line-height: 3.5rem;
    }

    h3.hp_headline {
        font-size: 2rem;
        line-height: 1.4;
    }

    h4.hp_headline {
        font-size: 1.2rem;
        line-height: 1.3rem;
    }
}

@media screen and (max-width: 767px) {
    h1.hp_headline {
        font-size: 3rem;
        line-height: 3.2rem;
    }

    h3.hp_headline {
        font-size: 1.8rem;
        line-height: 1.9rem;
    }

    h4.hp_headline {
        font-size: 1.1rem;
        line-height: 1.2rem;
    }
}

/*
 * glacial/section — inner-page variant and background options.
 * Brand colors from the Webflow :root palette.
 */
.gl_section {
    padding: 7% 5%;
}

.gl_bg_light {
    background-color: #eef6f6;
}

.gl_bg_green {
    background-color: #007f7b;
}

.gl_bg_dark {
    background-color: #003a38;
}

.gl_bg_green,
.gl_bg_dark,
.gl_bg_green h1, .gl_bg_green h2, .gl_bg_green h3, .gl_bg_green h4, .gl_bg_green p, .gl_bg_green li,
.gl_bg_dark h1, .gl_bg_dark h2, .gl_bg_dark h3, .gl_bg_dark h4, .gl_bg_dark p, .gl_bg_dark li {
    color: #fff;
}

/*
 * glacial/section — "reverse on mobile". Once a section's content stacks, DOM
 * order can be the wrong reading order (a photo landing above the copy it
 * belongs to). Reversing the section into a flex column flips its DIRECT
 * children only — it does not reach inside a Layout Grid's cells.
 *
 * 991px is the breakpoint where the theme's two-column grid recipes collapse to
 * one column, so it is the point at which the order starts to matter.
 *
 * No class is emitted when the option is off, so existing sections keep normal
 * block flow. Flex is scoped to the media query for that reason: it also stops
 * margins collapsing between children, which would subtly reflow every section.
 */
@media screen and (max-width: 991px) {
    /* section.<class> (0,1,1) so load order cannot matter: blocks-frontend.css
       is enqueued BEFORE css/webflow.css, which would otherwise win any
       single-class tie on `display`. */
    section.gl_reverse_mobile {
        display: flex;
        flex-direction: column-reverse;
    }
}

/*
 * Editor-only: no <a> in the canvas may navigate the editor iframe. Blocks bake
 * real href values into their saved markup (and server-side-render previews emit
 * live links), so a stray click would load the site inside the editor. Killing
 * pointer events lets the click fall through to the block wrapper, which selects
 * the block instead. Front end is unaffected.
 *
 * RichText keeps its pointer events — without this you could not place the caret
 * in a paragraph that contains a link. Clicking a link inside contenteditable
 * does not navigate anyway.
 */
.editor-styles-wrapper a {
    pointer-events: none;
}

.editor-styles-wrapper .rich-text a,
.editor-styles-wrapper [contenteditable="true"] a {
    pointer-events: auto;
}

/*
 * Editor-only neutralizers (.editor-styles-wrapper exists only in the
 * canvas). The Webflow JS runtime doesn't run in the editor, so JS-driven
 * markup is laid out statically for editing: testimonial slides stack
 * vertically instead of riding the (dead) slider.
 */
.editor-styles-wrapper .testimonials_slider.w-slider {
    height: auto;
    background: transparent;
}

.editor-styles-wrapper .testimonials_slider .w-slider-mask {
    white-space: normal;
    height: auto;
}

.editor-styles-wrapper .testimonials_slider .testimonials_slide.w-slide {
    display: block;
    width: auto;
    height: auto;
    margin-bottom: 12px;
}

.editor-styles-wrapper .testimonials_slider .w-slider-arrow-left,
.editor-styles-wrapper .testimonials_slider .w-slider-arrow-right,
.editor-styles-wrapper .testimonials_slider .w-slider-nav {
    display: none;
}

/*
 * glacial/image-bubble — the services-section image unit used standalone.
 * .service_five and .service_img_wrapper are absolute stack layers on the
 * homepage; standalone the unit provides its own positioning context and
 * the image keeps its natural height.
 */
.glacial_bubble_unit {
    z-index: 5;
    position: relative;
    display: block;
}

.glacial_bubble_unit .service_img_wrapper {
    position: relative;
    inset: auto;
    height: auto;
}

.glacial_bubble_unit .slide_img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    display: block;
}

/* ---------------------------------------------------------------------------
   glacial/list-cards — a grid of cards, a nicer presentation than a plain
   bulleted list for statements/reasons. Each card is a glacial/list-card
   child holding InnerBlocks, so these rules style arbitrary card content,
   not just a single paragraph.
--------------------------------------------------------------------------- */
.list_cards_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 0 0 1.75rem 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.gl_section.gl_bg_dark {
    margin-bottom: 7%;
}

.gl_section + .gl_section.gl_bg_dark  {
    margin-bottom: 0;
}


.standard-inner-wrapper > *:last-child {
    margin-bottom: 0!important;
}
.list_cards_grid.cols_1 {
    grid-template-columns: 1fr;
}

.list_cards_grid.cols_2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* fixed 3-up, not auto-fit — an odd card count must not reflow into a wider
   column. Collapses on the same breakpoints as .w-layout-layout.gl_cols_3. */
.list_cards_grid.cols_3 {
    grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 991px) {
    .list_cards_grid.cols_3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .list_cards_grid.cols_3 {
        grid-template-columns: 1fr;
    }
}

.list_card {
    background: #fff;
    border: 1px solid rgba(0, 58, 56, .06);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 58, 56, .05);
}

.list_card p {
    margin: 0 0 .7rem;
    color: #1d1d1d;
    line-height: 1.3;
    font-size: 1.12rem;
    font-weight: 600;
}

/*
 * A card is InnerBlocks and may hold several blocks, so its outer edges are
 * flattened here rather than by zeroing every child's margin. The common case
 * — one paragraph, which is what every migrated sidebar card becomes — still
 * renders exactly as it did under the old `p { margin: 0 }` rule.
 */
.list_card > :first-child {
    margin-top: 0;
}

.list_card > :last-child {
    margin-bottom: 0;
}

.list_card h2,
.list_card h3,
.list_card h4 {
    margin: 0 0 .5rem;
    line-height: 1.2;
}

/*
 * list-style is an inherited property, so the `list-style: none` on the grid
 * would strip the markers off a list nested inside a card. Put them back.
 */
.list_card ul,
.list_card ol {
    margin: 0 0 .7rem;
    padding-left: 1.2rem;
}

.list_card ul {
    list-style: disc;
}

.list_card ol {
    list-style: decimal;
}

.list_card li {
    color: #1d1d1d;
    font-size: 1rem;
    line-height: 1.35;
}

.list_card img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* the block appender is a grid child — don't let it stretch a whole row */
.editor-styles-wrapper .list_cards_grid .block-list-appender {
    align-self: start;
}

/* ---------------------------------------------------------------------------
   glacial/accordion — accessible FAQ disclosures on native <details>/<summary>.
   Native keyboard + screen-reader semantics; readable with JS disabled.
--------------------------------------------------------------------------- */
.glacial_accordion {
    margin: 1.75rem 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.accordion_item {
    border: 1px solid rgba(0, 58, 56, .14);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.accordion_q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 1.05rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 1.08rem;
    color: var(--dark-green, #003a38);
    transition: background-color .2s ease;
}

.accordion_q::-webkit-details-marker {
    display: none;
}

/* hide native triangle */
.accordion_q:hover {
    background: #eef6f6;
}

/* visible keyboard focus */
.accordion_item .accordion_q:focus-visible {
    outline: 3px solid var(--green, #007f7b);
    outline-offset: -3px;
}

.accordion_q_text {
    flex: 1 1 auto;
}

/* chevron (decorative — hidden from AT via aria-hidden in markup) */
.accordion_icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-right: 2.5px solid var(--green, #007f7b);
    border-bottom: 2.5px solid var(--green, #007f7b);
    transform: rotate(45deg);
    transition: transform .25s ease;
    margin-right: 4px;
}

.accordion_item[open] .accordion_icon {
    transform: rotate(-135deg);
}

.accordion_panel {
    border-top: 1px solid rgba(0, 58, 56, .1);
}

.accordion_panel_inner {
    padding: 1rem 1.25rem 1.15rem;
}

.accordion_panel_inner p {
    margin: 0 0 .75rem;
    line-height: 1.6;
}

/* answers hold arbitrary blocks — headings and lists need to sit sensibly */
.accordion_panel_inner h2,
.accordion_panel_inner h3,
.accordion_panel_inner h4,
.accordion_panel_inner h5,
.accordion_panel_inner h6 {
    margin: 1.25rem 0 .5rem;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--dark-green, #003a38);
}

.accordion_panel_inner > :first-child {
    margin-top: 0;
}

.accordion_panel_inner ul,
.accordion_panel_inner ol {
    margin: 0 0 .75rem;
    padding-left: 1.35rem;
}

.accordion_panel_inner li {
    margin-bottom: .4rem;
    line-height: 1.6;
}

.accordion_panel_inner li:last-child {
    margin-bottom: 0;
}

.accordion_panel_inner ul ul,
.accordion_panel_inner ol ol,
.accordion_panel_inner ul ol,
.accordion_panel_inner ol ul {
    margin: .4rem 0 0;
}

.accordion_panel_inner > :last-child {
    margin-bottom: 0;
}

/*
 * Editor: each row is a <div class="accordion_item accordion_edit_item">
 * rather than the <details> save() emits, so the panel is always open and
 * editable. .accordion_edit_head stands in for the <summary>.
 */
.glacial_accordion_edit .accordion_edit_head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
    font-weight: 600;
    font-size: 1.08rem;
    color: var(--dark-green, #003a38);
}

.glacial_accordion_edit .accordion_edit_head .accordion_q_text {
    flex: 1 1 auto;
}

.glacial_accordion_edit .accordion_panel {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .accordion_icon, .accordion_q {
        transition: none;
    }
}

.page_title_hero .hero_cover_img {
    margin-left: -159px;
}

.gl_bg_dark a {
    color: #fff!important;
}
/*
 * glacial/fixed-callout — CTA band whose background photo is fixed to the
 * viewport, so the page scrolls over it. A tinted, semi-transparent panel fills
 * one half and holds the block's InnerBlocks.
 *
 * The tint colour lives here; only its alpha comes in inline as --gl-fc-opacity,
 * set from the block's "Tint strength" range control.
 */
.gl_fixed_callout {
    /* Default tint alpha. render.php overrides it inline from the block's
       "Tint strength" control; declaring it here keeps the stylesheet valid on
       its own and documents the fallback. */
    --gl-fc-opacity: 0.85;
    position: relative;
    display: flex;
    /* stretch, not center: the panel is a full-height half of the band, so the
       split reads as one solid half rather than a floating box. */
    align-items: stretch;
    min-height: 520px;
    /* No padding on the section — it would come off the panel's 50% and the two
       halves would no longer be halves. The panel carries its own inset. */
    padding: 0;
    background-color: #003a38;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    /* The whole point: the image stays put while the page scrolls over it. */
    background-attachment: fixed;
    margin-bottom: 7%;
}

.wp-block.button {
    margin-bottom: 30px;
}

.gl_fixed_callout.gl_fc_right {
    justify-content: flex-end;
}

.gl_fixed_callout .gl_fixed_callout_panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 7% 5%;
    background-color: rgba(0, 58, 56, var(--gl-fc-opacity, 0.85));
}

.gl_fixed_callout.gl_fc_light .gl_fixed_callout_panel {
    background-color: rgba(255, 255, 255, var(--gl-fc-opacity, 0.85));
}

/*
 * Dark tint reverses the type. Scoped to the panel so a Light tint keeps the
 * normal palette, and specific enough to outrank webflow.css (which is enqueued
 * after this file).
 */
.gl_fixed_callout.gl_fc_dark .gl_fixed_callout_panel,
.gl_fixed_callout.gl_fc_dark .gl_fixed_callout_panel h1,
.gl_fixed_callout.gl_fc_dark .gl_fixed_callout_panel h2,
.gl_fixed_callout.gl_fc_dark .gl_fixed_callout_panel h3,
.gl_fixed_callout.gl_fc_dark .gl_fixed_callout_panel h4,
.gl_fixed_callout.gl_fc_dark .gl_fixed_callout_panel p,
.gl_fixed_callout.gl_fc_dark .gl_fixed_callout_panel li {
    color: #fff;
}

/* The panel is the last thing in the block; kill the trailing margin. */
.gl_fixed_callout .gl_fixed_callout_panel > *:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 991px) {
    /*
     * background-attachment: fixed is measured against the viewport, which iOS
     * Safari and most mobile browsers either ignore or resolve at the wrong
     * scale — the photo ends up hugely zoomed. Drop back to a normal scrolling
     * cover once the panel goes full width.
     */
    .gl_fixed_callout {
        background-attachment: scroll;
        min-height: 0;
    }

    .gl_fixed_callout .gl_fixed_callout_panel {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .gl_fixed_callout .gl_fixed_callout_panel {
        padding: 30px;
    }
}

/*
 * gl_img_fill — uniform image tiles.
 *
 * For a grid of photos supplied at wildly different aspect ratios (portrait
 * senior pictures next to landscape snapshots), which otherwise leaves ragged
 * rows and big vertical gaps. Crops every image to one ratio instead of letting
 * the tallest source set the row height.
 *
 * Put the class on the core/image block (Advanced → Additional CSS class, or
 * "className" in the block attributes) — it lands on the <figure>.
 *
 * Ratio is overridable from any ancestor without a second class:
 *     .some_section { --gl-img-ratio: 1 / 1; }
 * The var is deliberately NOT declared here, so an ancestor's value wins; the
 * fallback in var() is the default.
 *
 * object-position is top, not center: these are portraits, and a centre crop
 * of a tall source cuts heads off.
 *
 * (0,1,1) beats components.css's bare `img` rule, so load order is irrelevant —
 * which matters, because this file is enqueued before css/webflow.css.
 */
.gl_img_fill img {
    display: block;
    width: 100%;
    aspect-ratio: var(--gl-img-ratio, 3 / 4);
    object-fit: cover;
    object-position: center top;
}

/* The figure is the grid cell's own child; its default margin adds to the gap. */
.gl_img_fill {
    margin-top: 0;
    margin-bottom: 0;
}