/* ============================================================================
   Ushapo — presentation layer for the Forge homepage documents.

   The section markup carries the comp's exact inline styles (they survive
   wp_kses_post, so layout is pixel-verbatim). This sheet restores only what KSES
   strips from inline styles — inline <svg>, backdrop-filter, transition,
   animation, text-wrap — plus hover states, the mobile menu, and the mobile
   optimisations the brief calls for. Colour/spacing that already lives inline is
   never re-declared here.
   ========================================================================== */

/* ---- global cosmetics KSES drops from inline ---------------------------- */
body { text-wrap: pretty; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ush-doc img { max-width: 100%; }
/* The comp's global `a{text-decoration:none}` lived in a <style> block KSES
   strips — restore it so links and buttons aren't browser-underlined. */
.gf-root a, .ush-flyout a { text-decoration: none; }

/* The Forge root container defaults to `flex-direction:column; flex-wrap:wrap`.
   A wrapping column flex with auto height makes the browser reserve phantom
   vertical space on some section nodes (a footer with no margins still inflated
   ~561px). Our sections are full-width blocks that stack perfectly on their own,
   so drop the flex entirely on the front end — no gap, no wrap, no phantom. */
.gf-root.gf-container { display: block !important; }

/* ---- icons: line glyphs as recolourable masks --------------------------- */
.ush-ico {
	display: inline-block; width: 26px; height: 26px; flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-size: contain; mask-size: contain;
}
.ush-ico--calendar     { -webkit-mask-image: url(../icons/calendar.svg);     mask-image: url(../icons/calendar.svg); }
.ush-ico--grid         { -webkit-mask-image: url(../icons/grid.svg);         mask-image: url(../icons/grid.svg); }
.ush-ico--map-pin      { -webkit-mask-image: url(../icons/map-pin.svg);      mask-image: url(../icons/map-pin.svg); }
.ush-ico--shield-check { -webkit-mask-image: url(../icons/shield-check.svg); mask-image: url(../icons/shield-check.svg); }
.ush-ico--award        { -webkit-mask-image: url(../icons/award.svg);        mask-image: url(../icons/award.svg); }
.ush-ico--sliders      { -webkit-mask-image: url(../icons/sliders.svg);      mask-image: url(../icons/sliders.svg); }
.ush-ico--badge-check  { -webkit-mask-image: url(../icons/badge-check.svg);  mask-image: url(../icons/badge-check.svg); }
.ush-ico--truck        { -webkit-mask-image: url(../icons/truck.svg);        mask-image: url(../icons/truck.svg); }
.ush-ico--menu         { -webkit-mask-image: url(../icons/menu.svg);         mask-image: url(../icons/menu.svg); }
.ush-ico--close        { -webkit-mask-image: url(../icons/close.svg);        mask-image: url(../icons/close.svg); }

/* ---- hero entrance (comp: animation:riseIn …) --------------------------- */
@keyframes ushRiseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.ush-rise   { animation: ushRiseIn .8s cubic-bezier(.16,1,.3,1) both; }
.ush-rise-2 { animation: ushRiseIn 1s cubic-bezier(.16,1,.3,1) both; animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .ush-rise, .ush-rise-2 { animation: none; } }

/* ---- header: blur + scroll crossfade (home) ----------------------------- */
.ush-nav { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: background .3s ease, box-shadow .3s ease; }
.ush-nav--home { background: transparent; box-shadow: none; }
.ush-nav--home.is-scrolled { background: rgba(255,255,255,.92); box-shadow: 0 6px 24px rgba(32,36,42,.08); }
.ush-nav__link  { transition: color .2s ease; }
.ush-nav--home .ush-nav__link { color: rgba(255,255,255,.92); }
.ush-nav--home.is-scrolled .ush-nav__link { color: rgba(32,36,42,.72); }
.ush-nav__link:hover { color: #E1251B; }
.ush-nav--home:not(.is-scrolled) .ush-nav__link:hover { color: #fff; }
.ush-nav--inner .ush-nav__link { color: rgba(32,36,42,.66); }
.ush-nav--inner .ush-nav__link.is-current { color: #20242A; }
.ush-logo { grid-area: 1/1; transition: opacity .3s ease; }
/* Crossfade must beat the per-img inline opacity (initial-state guard against FOUC),
   so the stylesheet owns both states: white over the dark hero, dark once the nav
   goes solid white on scroll — otherwise the white logo drowns on the white bar. */
.ush-nav--home .ush-logo-w { opacity: 1 !important; }
.ush-nav--home .ush-logo-d { opacity: 0 !important; }
.ush-nav--home.is-scrolled .ush-logo-w { opacity: 0 !important; }
.ush-nav--home.is-scrolled .ush-logo-d { opacity: 1 !important; }

/* ---- buttons: hover states (base look is inline) ------------------------ */
.ush-btn { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.ush-btn--red:hover    { background: #C41E17 !important; }
.ush-btn--dark:hover   { background: #E1251B !important; }
.ush-btn--white:hover  { background: #ECEAE6 !important; }
.ush-btn--outline:hover { background: #F4F3F1 !important; border-color: #20242A !important; }
.ush-btn--outline-red:hover { background: #E1251B !important; border-color: #E1251B !important; color: #fff !important; }
.ush-btn--ghost:hover  { background: rgba(255,255,255,.12) !important; border-color: #fff !important; }

/* ---- cards: lift on hover ----------------------------------------------- */
.ush-card { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.ush-card:hover { transform: translateY(-6px); box-shadow: 0 26px 48px rgba(32,36,42,.14); }
.ush-rescard { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.ush-rescard:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(32,36,42,.16); }

/* ---- text links that shift to red on hover ------------------------------ */
.ush-flink, .ush-rangelink, .ush-inlink { transition: color .2s ease; }
.ush-flink:hover, .ush-rangelink:hover, .ush-inlink:hover { color: #E1251B !important; }

/* ---- hero crossfade transitions (opacity set inline/JS) ----------------- */
.ush-hero__slide, .ush-hero__cardimg { transition: opacity 1.1s ease; }
.ush-hero__dot { transition: background .3s ease; }

/* ---- form: focus ring (base border is inline) --------------------------- */
.ush-input:focus { border-color: #E1251B !important; outline: none; box-shadow: 0 0 0 3px rgba(225,37,38,.12); }

/* ---- static map (replaces the KSES-stripped iframe) --------------------- */
.ush-map { display: block; overflow: hidden; border-radius: 24px; box-shadow: 0 18px 40px rgba(32,36,42,.12); }
.ush-map img { width: 100%; height: 360px; object-fit: cover; display: block; transition: transform .5s ease; }
.ush-map:hover img { transform: scale(1.03); }

/* ============================================================================
   Mobile menu + optimisations (brief M1–M6). Desktop nav ≥900px; burger below.
   ========================================================================== */
.ush-burger { display: none; }
.ush-flyout { display: none; }

@media (max-width: 900px) {
	.ush-nav__links, .ush-nav__cta { display: none !important; }
	.ush-burger {
		display: inline-flex; align-items: center; justify-content: center;
		margin-left: auto; width: 46px; height: 46px; padding: 0;
		border: 0; background: transparent; cursor: pointer; color: #20242A;
	}
	.ush-nav--home:not(.is-scrolled) .ush-burger { color: #fff; }
	.ush-burger .ush-ico { width: 26px; height: 26px; }

	/* Flyout: full-screen panel */
	.ush-flyout {
		display: block; position: fixed; inset: 0; z-index: 200;
		background: #FFFFFF; padding: 22px clamp(20px,6vw,40px);
		transform: translateX(100%); transition: transform .32s cubic-bezier(.16,1,.3,1);
		overflow-y: auto; visibility: hidden;
	}
	.ush-flyout.is-open { transform: none; visibility: visible; }
	.ush-flyout__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
	.ush-flyout__top img { height: 34px; width: auto; }
	.ush-flyout__close { width: 46px; height: 46px; border: 0; background: #F4F3F1; border-radius: 50%; cursor: pointer; color: #20242A; display: inline-flex; align-items: center; justify-content: center; }
	.ush-flyout__nav { display: flex; flex-direction: column; gap: 4px; }
	.ush-flyout__nav a {
		font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 26px;
		letter-spacing: -.01em; color: #20242A; padding: 12px 0; border-bottom: 1px solid rgba(32,36,42,.08);
		opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease;
	}
	.ush-flyout.is-open .ush-flyout__nav a { opacity: 1; transform: none; }
	.ush-flyout__nav a:nth-child(1){transition-delay:.06s}.ush-flyout__nav a:nth-child(2){transition-delay:.10s}
	.ush-flyout__nav a:nth-child(3){transition-delay:.14s}.ush-flyout__nav a:nth-child(4){transition-delay:.18s}
	.ush-flyout__nav a:nth-child(5){transition-delay:.22s}.ush-flyout__nav a:nth-child(6){transition-delay:.26s}
	.ush-flyout__cta {
		display: block; margin-top: 26px; text-align: center; background: #E1251B; color: #fff;
		font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; padding: 16px 24px; border-radius: 999px;
	}
	.ush-flyout__meta { display: block; margin-top: 22px; font-family: 'Inter', sans-serif; font-size: 14px; color: rgba(32,36,42,.6); line-height: 1.7; }
	body.ush-lock { overflow: hidden; }

	/* M1 — no iOS zoom: every text-entry control ≥16px */
	.ush-input, input[type="text"], input[type="email"], input[type="tel"], textarea { font-size: 16px !important; }
	/* M2 — tap targets ≥44px */
	.ush-btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.ush-flyout, .ush-flyout__nav a { transition: none; }
}