/* =========================================================================
   Glacial Blocks — front-end + editor CSS.

   Blocks keep their Webflow classes verbatim and rely on css/webflow.css for
   nearly all styling. This file only holds recipes that Webflow had attached to
   per-page #w-node IDs (which a block can't carry) or to IX2 interactions
   (which we re-express as CSS), plus a few editor-canvas neutralizers.

   Enqueued on the front end and in the editor by blocks/glacial-blocks.php.
   Relative asset URLs resolve from blocks/assets/ → ../../images/.
   ========================================================================= */

/* -------------------------------------------------------------------------
   glacial/stats — Webflow put grid-template-columns on the section's per-page
   #w-node id, not on .stats_grid. The block drops the id, so carry the recipe
   here. (Identical to the export, so the static homepage section is unaffected.)
   ------------------------------------------------------------------------- */
.stats_grid {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

@media (max-width: 479px) {
	.stats_grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   CTA arrow — the gold .btn_circle_div held a theme-asset <img> (arrow-icon.svg).
   Static blocks must not bake theme URLs into saved content, so the block emits
   an empty circle marked .gl-arrow and we paint the arrow from the stylesheet.
   Scoped to .gl-arrow so the static homepage buttons (which keep their <img>)
   never get a double arrow.
   ------------------------------------------------------------------------- */
.btn_circle_div.gl-arrow::after {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: url("../../images/arrow-icon.svg") center / contain no-repeat;
	transition: transform 500ms ease;
}

/* Hover animation — reproduces the Webflow "btn_hover" IX2 interaction (action
   list a-4) in CSS: the arrow rotates -45° and the gold circle turns white over
   500ms, reversing on mouse-out. Scoped to .gl-arrow (only our block emits it),
   so the homepage's faithful buttons — which keep their real <img
   class="arrow_icon"> and the JS-driven IX2 — are untouched. */
.btn_circle_div.gl-arrow {
	transition: background-color 500ms ease;
}

a:hover > .btn_circle_div.gl-arrow {
	background-color: #fff;
}

a:hover > .btn_circle_div.gl-arrow::after {
	transform: rotate(-45deg);
}

/* -------------------------------------------------------------------------
   glacial/buttons — 10px gap between buttons. Webflow's center/hero wrappers
   have no gap (the quiz variant keeps its own 16px). The block has
   supports.className:false, so there's no block-specific class to target;
   instead scope to inner-page content (.standard-inner-wrapper) and the editor
   canvas (.editor-styles-wrapper). The homepage's faithful button rows reuse
   these same webflow classes but render outside .standard-inner-wrapper, so
   they're left untouched.
   ------------------------------------------------------------------------- */
.standard-inner-wrapper .center_btn_wrapper:not(.quiz_btns_wrapper),
.standard-inner-wrapper .hero_btns_wrapper,
.editor-styles-wrapper .center_btn_wrapper:not(.quiz_btns_wrapper),
.editor-styles-wrapper .hero_btns_wrapper {
	gap: 10px;
}

/* -------------------------------------------------------------------------
   glacial/as-seen-in — the logo marquee was a Webflow IX2 interaction. Re-express
   it as a CSS keyframe loop. Two identical .logo_div rows fill the 200%-wide
   .logos_container; translating it -50% scrolls exactly one row, seamlessly.
   Scoped to the block wrapper so the static homepage logos (still IX2-driven)
   are untouched.
   ------------------------------------------------------------------------- */
.gl-marquee .logos_main_wrapper {
	overflow: hidden;
}

.gl-marquee .logos_container {
	display: flex;
	width: 200%;
	animation: gl-marquee 30s linear infinite;
}

@keyframes gl-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* -------------------------------------------------------------------------
   glacial/home-hero — the export's .main_tagline_wrapper is position:absolute and
   was a sibling of the position:static .hero_section, so it anchored to the page.
   In the block both live inside the wrapper; make the wrapper the positioning
   root so the tagline anchors to the block instead of the viewport.
   ------------------------------------------------------------------------- */
.wp-block-glacial-home-hero {
	position: relative;
}

/* -------------------------------------------------------------------------
   glacial/section — generic full-bleed background container. Background colors
   resolved from the Webflow :root palette; dark/brand/blue flip text to white.
   ------------------------------------------------------------------------- */
.gl-section {
	position: relative;
	/* Default vertical rhythm between stacked inner-page sections. 6% of the
	   container width, clamped so it never collapses on mobile or blows out on
	   very wide screens. Homepage faithful sections don't use .gl-section, so
	   they keep their own (0) spacing. Overridable per section via .gl-section--mb-*. */
	margin-bottom: clamp(2rem, 6%, 6rem);
}

/* Padding only when the section paints a color background — a transparent
   (bg: none / white) section sits flush with the page and needs none. The
   padding lives on the INNER wrapper (not the section) so a full-bleed
   (alignfull) colored band keeps its color edge-to-edge while its content stays
   inset consistently with the same colored section at normal width. On mobile
   the padding tightens to a flat 15px. */
.gl-section--light > .gl-section-inner,
.gl-section--brand > .gl-section-inner,
.gl-section--dark > .gl-section-inner,
.gl-section--blue > .gl-section-inner {
	padding: 5%;
}

@media (max-width: 767px) {
	.gl-section--light > .gl-section-inner,
	.gl-section--brand > .gl-section-inner,
	.gl-section--dark > .gl-section-inner,
	.gl-section--blue > .gl-section-inner {
		padding: 15px;
	}
}

.gl-col *:last-child {
	margin-bottom: 0;
}

.gl-section--mb-0 { margin-bottom: 0; }
.gl-section--mb-sm { margin-bottom: clamp(1rem, 3%, 3rem); }
.gl-section--mb-lg { margin-bottom: clamp(3rem, 9%, 8rem); }

.gl-section--light {
	background-color: #fffcf5;
}

.gl-section--brand {
	background-color: var(--lighter_blue_grey, #6b7f92);
}

.gl-section--dark {
	background-color: var(--doc_darkblue, #121e2c);
}

.gl-section--blue {
	background-color: var(--logo-blue, #1e2336);
}

.gl-section--brand,
.gl-section--dark,
.gl-section--blue {
	color: var(--white, #fff);
}

.gl-section--center {
	text-align: center;
}

/* Inner wrapper — caps content at --gl-max-width and centers it, mirroring
   .standard-inner-wrapper (max-width: var(--gl-max-width, 1350px); width: 90%).
   For a normal (non-full) section it's a no-op: the parent .standard-inner-wrapper
   is already narrower than the cap. When the section is alignfull (100vw), the
   width:90% re-creates the gutter so content lines up with the rest of the page. */
.gl-section-inner {
	max-width: var(--gl-max-width, 1350px);
	margin-left: auto;
	margin-right: auto;
}

.gl-section.alignfull > .gl-section-inner {
	width: 90%;
}

/* -------------------------------------------------------------------------
   glacial/eyebrow — uppercase kicker line above a heading. Navy by default;
   carries its own color, so on dark bands it needs .gl-eyebrow--white
   (same as headings — see GOTCHAS #7).
   ------------------------------------------------------------------------- */
.gl-eyebrow {
	margin-bottom: 15px;
	color: var(--doc_darkblue, #121e2c);
	text-transform: uppercase;
}

.gl-eyebrow--white {
	color: var(--white, #fff);
}

/* -------------------------------------------------------------------------
   glacial/heading — color options. webflow.css defines the color classes only
   as compounds of .hp_headline (regular size), so on the .hp_headline_big
   variant gold/yellow/bluegrey have no rule and .white is inverted to black.
   Re-declare them here (this sheet loads after webflow.css) so every color
   option works at both sizes. Equal specificity + later cascade wins.
   ------------------------------------------------------------------------- */
.hp_headline_big.white { color: var(--white, #fff); }
.hp_headline_big.gold,
.hp_headline_big.yellow { color: var(--logo-gold, #ffdc8d); }
.hp_headline_big.blue { color: var(--bluegrey, #475767); }

/* glacial/heading — emphasis (.headline_italic_span) color options. The span
   otherwise inherits the heading color; these modifiers let it differ (e.g. a
   gold italic phrase inside a navy headline). No modifier class → inherits, so
   headings authored before this option are byte-identical. */
.headline_italic_span.gl-emph--gold { color: var(--logo-gold, #ffdc8d); }
.headline_italic_span.gl-emph--white { color: var(--white, #fff); }
.headline_italic_span.gl-emph--bluegrey { color: var(--bluegrey, #475767); }
.headline_italic_span.gl-emph--navy { color: var(--logo-blue, #1e2336); }

/* -------------------------------------------------------------------------
   glacial/grid — Webflow keeps grid-template-columns on per-page #w-node ids,
   which a block can't carry. Port the recipes to column/ratio variant classes.
   ------------------------------------------------------------------------- */
.gl-grid {
	display: grid;
	gap: 30px;
	grid-auto-columns: 1fr;
	align-items: stretch;
}


body:not(.home) .logos_section {
	margin-bottom: 30px;
}

.gl-form-embed {
	width: 100%
}

.entry .services_img_div img {
	border-radius: 30px;
}

.hp_headline.smaller {
	margin-bottom: 20px;
}

.gl-grid.gl-cols-2 { grid-template-columns: repeat(2, 1fr); }
.gl-grid.gl-cols-3 { grid-template-columns: repeat(3, 1fr); }
.gl-grid.gl-cols-4 { grid-template-columns: repeat(4, 1fr); }
.gl-grid.gl-cols-5 { grid-template-columns: repeat(5, 1fr); }
.gl-grid.gl-ratio-3-4 { grid-template-columns: 0.75fr 1fr; }
.gl-grid.gl-ratio-2-1 { grid-template-columns: 2fr 1fr; }
.gl-grid.gl-ratio-1-2 { grid-template-columns: 1fr 2fr; }

@media (max-width: 991px) {
	.gl-grid.gl-cols-2,
	.gl-grid.gl-cols-3,
	.gl-grid.gl-ratio-3-4,
	.gl-grid.gl-ratio-2-1,
	.gl-grid.gl-ratio-1-2 {
		grid-template-columns: 1fr;
	}
	.gl-grid.gl-cols-4,
	.gl-grid.gl-cols-5 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.gl-grid.gl-cols-4,
	.gl-grid.gl-cols-5 {
		grid-template-columns: 1fr;
	}
}

/* Optional mobile horizontal-scroll variant (Webflow's .swipe_row). */
@media (max-width: 767px) {
	.gl-grid.gl-swipe {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		grid-template-columns: none;
	}
	.gl-grid.gl-swipe > * {
		flex: 0 0 80%;
	}
}

/* -------------------------------------------------------------------------
   Tier-2 cards — icon set (theme SVGs as CSS masks, painted in currentColor so
   they inherit the section's text color), star rows.
   ------------------------------------------------------------------------- */
.gl-icon {
	display: inline-block;
	width: 44px;
	height: 44px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.gl-icon--heart { -webkit-mask-image: url("icons/heart.svg"); mask-image: url("icons/heart.svg"); }
.gl-icon--calendar { -webkit-mask-image: url("icons/calendar.svg"); mask-image: url("icons/calendar.svg"); }
.gl-icon--globe { -webkit-mask-image: url("icons/globe.svg"); mask-image: url("icons/globe.svg"); }
.gl-icon--building { -webkit-mask-image: url("icons/building.svg"); mask-image: url("icons/building.svg"); }
.gl-icon--quote { -webkit-mask-image: url("icons/quote.svg"); mask-image: url("icons/quote.svg"); }

.gl-stars {
	color: var(--logo-gold, #ffdc8d);
	font-size: 1.05rem;
	letter-spacing: 3px;
	line-height: 1;
}

.gl-stars::before {
	content: "\2605\2605\2605\2605\2605";
}

/* Testimonial card dark variant — the webflow.css default (#0000001a) is made
   for dark section bands; this one is a solid card for light pages. */
.testimonials_cell.gl-testimonial--dark {
	background-color: #0d1623;
	color: var(--white, #fff);
}

/* Text-align modifiers (heading block toolbar). */
.gl-align--center { text-align: center; }
.gl-align--right { text-align: right; }

/* -------------------------------------------------------------------------
   glacial/image-callout — background-image band with a half-width tinted
   panel of inner blocks. Panel rgba() tint comes from block attributes.
   ------------------------------------------------------------------------- */
.gl-image-callout {
	background-color: var(--doc_darkblue, #121e2c);
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat;
	/* Fixed attachment: the image stays put while the page scrolls over it. */
	background-attachment: fixed;
	padding: 10% 5%;
	margin-bottom: 6%;
}

.mb-0 {
	margin-bottom: 0!important;
}

/* iOS/mobile Safari breaks fixed + cover (zoomed, jittery) — scroll on touch. */
@media (max-width: 991px) {
	.gl-image-callout {
		background-attachment: scroll;
	}
}

.gl-image-callout-inner {
	max-width: var(--gl-max-width, 1350px);
	margin: 0 auto;
	display: flex;
	justify-content: flex-start;
}

.gl-image-callout--right .gl-image-callout-inner {
	justify-content: flex-end;
}

.gl-image-callout-panel {
	width: 50%;
	padding: clamp(24px, 4%, 60px);
	border-radius: 10px;
}

.gl-image-callout-panel.gl-panel--dark {
	color: var(--white, #fff);
}

@media (max-width: 767px) {
	.gl-image-callout-panel {
		width: 100%;
	}
}

/* Quote card — the export's .anchor_wrapper is position:absolute (an overlay on
   the OBS section). As a standalone block it must flow in document. */
.anchor_wrapper.gl-quote {
	position: static;
	inset: auto;
	width: auto;
}

/* Media card — overlay label fades in on hover (the export hid it via a
   front-page-only IX). Inside a block it lives anywhere, so drive it with CSS. */
.media_btn .media_overlay_div {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.media_btn:hover .media_overlay_div {
	opacity: 1;
}

/* No hover on touch — the label is always visible on mobile (!important beats
   any inline opacity webflow.js IX2 puts on the homepage media cards). */
@media (max-width: 991px) {
	.media_btn .media_overlay_div {
		opacity: 1 !important;
		visibility: visible !important;
	}
}

/* Icon cards on a dark section: mirror the export's .callout_section treatment
   (blue-grey card, white text) so the hard-coded dark headline stays legible. */
.gl-section--dark .difference_callout_cell {
	background-color: var(--lighter_blue_grey, #6b7f92);
	border-color: transparent;
}

.gl-section--dark .difference_headline,
.gl-section--dark .difference_callout_text {
	color: var(--white, #fff);
}

/* -------------------------------------------------------------------------
   Tier 3 — column, accordion, tabs, slider, hover-card, offset-gallery.
   ------------------------------------------------------------------------- */
.gl-col {
	display: flex;
	flex-direction: column;
}
.gl-col--center { justify-content: center; }
.gl-col--bottom { justify-content: flex-end; }

/* Accordion (view.js toggles .is-open) */
.gl-accordion { display: flex; flex-direction: column; gap: 12px; }
.gl-accordion-item { background: #fff; border: 1px solid #013e5333; border-radius: 14px; overflow: hidden; }
.gl-accordion--diff .gl-accordion-item { border-radius: 20px; }
.gl-accordion-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; }
.gl-accordion-title { font-weight: 600; letter-spacing: .02em; }
.gl-accordion-icon { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.gl-accordion-icon::before,
.gl-accordion-icon::after { content: ""; position: absolute; background: var(--logo-gold, #ffdc8d); }
.gl-accordion-icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.gl-accordion-icon::after { left: 7px; top: 0; width: 2px; height: 16px; transition: transform .3s ease, opacity .3s ease; }
.gl-accordion-item.is-open .gl-accordion-icon::after { transform: rotate(90deg); opacity: 0; }
.gl-accordion-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.gl-accordion-item.is-open .gl-accordion-body { max-height: 1500px; }
.gl-accordion-inner { padding: 0 24px 20px; }

/* Tabs (view.js builds the menu + toggles .w--tab-active / .w--current) */
.gl-tab-menu { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.gl-tab-link { cursor: pointer; padding: 10px 18px; border-radius: 50px; text-decoration: none; color: inherit; border: 1px solid #ffffff2e; }
.gl-tab-link.w--current { background: var(--logo-gold, #ffdc8d); color: var(--logo-blue, #1e2336); }
.gl-tab { display: none; }
.gl-tab.w--tab-active { display: block; }

/* Slider — native scroll-snap track (swipe / scroll) */
.gl-slider { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }
.gl-slide { flex: 0 0 82%; scroll-snap-align: center; }
@media (min-width: 768px) { .gl-slide { flex-basis: 32%; } }

/* Hover card — reveal content on hover (replaces the export's IX2) */
.gl-hover-card { position: relative; height: 28rem; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 20px -6px #01040759; }
.gl-hover-card .age_img_div, .gl-hover-card .age_img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gl-hover-card .age_img { object-fit: cover; }
.gl-hover-card .age_overlay_div { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 8%; color: #fff; background: linear-gradient(#0000, #000a); }
.gl-hover-card .age_content_div { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .35s ease; }
.gl-hover-card:hover .age_content_div { max-height: 320px; opacity: 1; margin-top: 10px; }

/* Offset gallery */
.gl-offset-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.gl-offset-gallery > *:nth-child(2) { margin-top: 40px; }
.gl-offset-gallery > *:nth-child(3) { margin-top: 80px; }
.gl-offset-gallery img { width: 100%; border-radius: 10px; }
@media (max-width: 600px) {
	.gl-offset-gallery { grid-template-columns: 1fr; }
	.gl-offset-gallery > * { margin-top: 0 !important; }
}

/* =========================================================================
   Editor-canvas neutralizers — webflow.js never runs in the iframe, so tame
   anything that would otherwise animate, hide, or blow out the canvas.
   ========================================================================= */
.editor-styles-wrapper .gl-marquee .logos_container { animation: none; }
.editor-styles-wrapper .wp-block-glacial-home-hero .hero_section { height: 60vh; }

/* Tabs: show every pane stacked + label it (the JS menu isn't built in canvas). */
.editor-styles-wrapper .gl-tab { display: block; margin-bottom: 20px; }
.editor-styles-wrapper .gl-tab::before { content: "Tab: " attr( data-label ); display: block; font-weight: 600; opacity: .6; margin-bottom: 6px; }

/* Accordion / hover-card: reveal collapsed content so it's editable. */
.editor-styles-wrapper .gl-accordion-body { max-height: none; }
.editor-styles-wrapper .gl-hover-card .age_content_div { max-height: none; opacity: 1; }