/*
 * Glacial Blocks — front end + editor.
 *
 * Only the utility classes the block options emit. All visual design lives in
 * css/webflow.css; nothing here restyles the design's own classes.
 */

/* ---------- section padding tokens (design default is .innerpage_section{padding:5%}) ---------- */
.innerpage_section.gl-pad-none { padding: 0; }
.innerpage_section.gl-pad-small { padding: 2.5%; }
.innerpage_section.gl-pad-large { padding: 8%; }

/* ---------- section tints, from the webflow.css :root tokens ---------- */
.innerpage_section.gl-tint-light { background-color: var(--light-blue); }
.innerpage_section.gl-tint-dark { background-color: var(--dark-blue); }
.innerpage_section.gl-tint-dark,
.innerpage_section.gl-tint-dark h2,
.innerpage_section.gl-tint-dark h3,
.innerpage_section.gl-tint-dark h4,
.innerpage_section.gl-tint-dark p { color: var(--white); }
.innerpage_section.gl-tint-dark .section_label { color: var(--white); }

/* ---------- lede ---------- */
.gl-lede { font-size: 1.15rem; line-height: 1.6rem; }

/* ---------- image height tokens (design default is .innerpage_img_div{height:450px}) ---------- */
.innerpage_img_div.gl-img-short { height: 300px; }
.innerpage_img_div.gl-img-tall { height: 600px; }

/*
 * ---------- two-column widths ----------
 * The design's .two_columns_grid takes its grid-template-columns from per-page
 * #w-node-* ids, which a reusable block has no way to carry. gl-two-col supplies
 * them, collapsing at the design's own 991px breakpoint.
 */
.two_columns_grid.gl-two-col {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
}

@media (max-width: 991px) {
    .two_columns_grid.gl-two-col { grid-template-columns: 1fr; }
}

/*
 * ---------- column order ----------
 * 991px is the design's OWN collapse point: the #w-node-* rules in webflow.css
 * drop two_columns_grid to a single column at max-width:991px.
 */
@media (min-width: 992px) {
    .gl-swap-desktop > :first-child { order: 2; }
    .gl-swap-desktop > :last-child { order: 1; }
}

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

/*
 * ---------- device visibility ----------
 * Breakpoints match Webflow's medium (991) / small (767).
 */
@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 in the canvas, just dimmed. */
.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 visibility (never strip outlines) ---------- */
.innerpage_section a:focus-visible,
.two_columns_grid a:focus-visible {
    outline: 2px solid var(--dark-blue);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .innerpage_section *,
    .two_columns_grid * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/*
 * ---------- button colour inside the inner-page content wrapper ----------
 *
 * The theme's style.css carries `.entry a { color:#437AB2; text-decoration:underline }`,
 * which outranks webflow.css's `.button` (0,1,1 vs 0,1,0) everywhere inside
 * #main.standard-inner-wrapper.entry. Its exemption list (a.ui-button,
 * a.wp-block-button__link, .entry a.moretag) predates the Glacial design system, so
 * design buttons render as underlined link-blue on a blue fill.
 *
 * Scoped tightly to .button only — prose links inside .entry keep the theme's
 * link colour and underline, which is correct for body copy.
 */
.entry a.button { color: var(--white); text-decoration: none; }
.entry a.button:hover { color: var(--light-blue); }
.entry a.button.outline { color: var(--black); }
.entry a.button.outline:hover { color: var(--white); }