/* Design tokens a theme sets in style.css :root (neutral fallbacks otherwise): --oranj-ink-rgb (shadows, "r, g, b"), --oranj-primary-rgb (hover tints), --oranj-bar-bg (mobile action bar). */
/* Motion + interaction polish. Everything that animates is inside prefers-reduced-motion: no-preference. */

/* ---------- Sticky header (no layout shift: only paint properties change on scroll) ---------- */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
/* The header background lives on a pseudo-element (a blur filter directly on the header would trap the fixed mobile-menu overlay). It is solid white so there is no visible seam against the browser's status-bar area. */
.oranj-header-wrap { position: relative; isolation: isolate; background: transparent !important; }
.oranj-header-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--wp--preset--color--base); } /* solid, so it matches the page and the status-bar strip above it exactly */
.oranj-header-wrap .wp-block-site-logo { transform-origin: left center; }
.is-scrolled .oranj-header-wrap { box-shadow: 0 10px 30px -22px rgba(var(--oranj-ink-rgb, 0, 0, 0), .55); }

/* ---------- Icon badges on linked cards (services, conditions) ---------- */
.oranj-arrow { padding-left: 5.4rem; }
.oranj-arrow::before { content: ""; position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background-color: var(--wp--preset--color--base); background-repeat: no-repeat; background-position: center; background-size: 24px; background-image: var(--oranj-icon, none); }

/* ---------- Mobile sticky "Book Now" bar ---------- */
.oranj-mobile-bar.oranj-mobile-bar { display: none !important; } /* WP's .is-layout-flex would otherwise win */
@media (max-width: 781px) {
	.oranj-mobile-bar.oranj-mobile-bar { display: flex !important; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: var(--oranj-bar-bg, rgba(255, 255, 255, .95)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -12px 30px -20px rgba(var(--oranj-ink-rgb, 0, 0, 0), .55); transform: translateY(115%); visibility: hidden; margin: 0 !important; }
	.oranj-bar-on .oranj-mobile-bar { transform: none; visibility: visible; }
	.oranj-mobile-bar .wp-block-buttons { display: flex; gap: .6rem; width: 100%; }
	.oranj-mobile-bar .wp-block-button { flex: 1 1 0; }
	.oranj-mobile-bar .wp-block-button__link { width: 100%; text-align: center; padding-block: .7em; }
	.oranj-footer { padding-bottom: 6rem; }
}

/* ---------- Slider: progress bar + disabled arrows ---------- */
.oranj-slider-progress { height: 4px; border-radius: 99px; background: var(--oranj-tint); overflow: hidden; margin: .25rem .25rem 0; }
.oranj-slider-progress > span { display: block; height: 100%; width: 30%; background: var(--wp--preset--color--primary); border-radius: 99px; will-change: transform; }
.oranj-slider-nav button:disabled { opacity: .35; cursor: default; }
.oranj-slider-nav button:disabled:hover { background: var(--oranj-mint); color: var(--wp--preset--color--primary); }

/* ---------- Page transitions (cross-document View Transitions) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.oranj-lang a.is-current { view-transition-name: oranj-lang-pill; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
::view-transition-group(oranj-lang-pill) { animation-duration: .35s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }

@media (prefers-reduced-motion: no-preference) {
	.oranj-header-wrap { transition: box-shadow .3s; }
	.oranj-header-wrap .wp-block-site-logo { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
	.is-scrolled .oranj-header-wrap .wp-block-site-logo { transform: scale(.8); }
	.oranj-mobile-bar { transition: transform .4s cubic-bezier(.2, .7, .2, 1), visibility 0s .4s; }
	.oranj-bar-on .oranj-mobile-bar { transition: transform .4s cubic-bezier(.2, .7, .2, 1), visibility 0s; }

	/* --- keyframes --- */
	@keyframes oranj-rise { from { opacity: 0; transform: translateY(24px); } }
	@keyframes oranj-rise-lg { from { opacity: 0; transform: translateY(48px); } }
	@keyframes oranj-pop { from { opacity: 0; transform: translateY(12px) scale(.88); } }
	@keyframes oranj-grow { from { opacity: 0; transform: translateX(-50%) scale(.55); } }
	@keyframes oranj-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

	/* --- hero entrance (CSS only: no flash, no JS dependency) --- */
	.oranj-hero-wrap .oranj-eyebrow { animation: oranj-rise .7s .05s cubic-bezier(.2, .7, .2, 1) backwards; }
	.oranj-hero-wrap h1 { animation: oranj-rise .85s .15s cubic-bezier(.2, .7, .2, 1) backwards; }
	.oranj-hero-wrap .wp-block-column p:not(.oranj-eyebrow):not(.oranj-float) { animation: oranj-rise .85s .3s cubic-bezier(.2, .7, .2, 1) backwards; }
	.oranj-hero-wrap .wp-block-buttons { animation: oranj-rise .85s .45s cubic-bezier(.2, .7, .2, 1) backwards; }
	.oranj-hero-visual::before { animation: oranj-grow 1.1s .1s cubic-bezier(.2, .8, .2, 1) backwards; }
	.oranj-hero-visual img { animation: oranj-rise-lg 1.1s .3s cubic-bezier(.2, .8, .2, 1) backwards; }
	.oranj-float--b { animation: oranj-pop .6s .95s cubic-bezier(.2, .8, .2, 1) backwards, oranj-float 7s 1.6s ease-in-out infinite; }
	.oranj-float--a { animation: oranj-pop .6s 1.1s cubic-bezier(.2, .8, .2, 1) backwards, oranj-float 8s 2s ease-in-out infinite reverse; }

	/* --- inner-page title banners --- */
	.oranj-glow.oranj-section:not(.oranj-hero-wrap) > * { animation: oranj-rise .8s cubic-bezier(.2, .7, .2, 1) backwards; }
	.oranj-glow.oranj-section:not(.oranj-hero-wrap) > :nth-child(2) { animation-delay: .1s; }
	.oranj-glow.oranj-section:not(.oranj-hero-wrap) > :nth-child(3) { animation-delay: .2s; }
	.oranj-glow.oranj-section:not(.oranj-hero-wrap) > :nth-child(n+4) { animation-delay: .3s; }

	/* --- scroll reveals: hidden only while .oranj-js is set (inline head script) and not yet .is-in --- */
	.oranj-js :is(.oranj-section > h2, .oranj-section > .wp-block-quote, .oranj-card:not(li .oranj-card), .oranj-slider, .wp-block-query:not(.oranj-slider) > .wp-block-post-template > li):not(.is-in) { opacity: 0; }
	.oranj-js :is(.oranj-section > h2, .oranj-section > .wp-block-quote, .oranj-card:not(li .oranj-card), .oranj-slider, .wp-block-query:not(.oranj-slider) > .wp-block-post-template > li).is-in { animation: oranj-rise .8s cubic-bezier(.2, .7, .2, 1) var(--oranj-delay, 0ms) backwards; }

	/* --- hover / press polish --- */
	.oranj-arrow { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
	.oranj-arrow:hover { transform: translateY(-5px); box-shadow: 0 22px 36px -24px rgba(var(--oranj-ink-rgb, 0, 0, 0), .5); }
	.oranj-arrow::after { transition: transform .3s, background .2s, color .2s; }
	.wp-block-button__link { transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, background-color .2s, opacity .2s; }
	.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgba(var(--oranj-ink-rgb, 0, 0, 0), .6); }
	.wp-block-button__link:active { transform: translateY(0) scale(.97); box-shadow: none; }
	.oranj-lang a { transition: background-color .2s, color .2s; }
	.fluentform .ff-el-form-control { transition: border-color .2s, box-shadow .2s, background-color .2s; }
}

/* Outline buttons: soft fill on hover (light and dark backgrounds) */
.wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: rgba(var(--oranj-primary-rgb, 0, 0, 0), .08); }
.oranj-card--dark .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: rgba(255, 255, 255, .14); }

/* Nav: underline slides in on hover and marks the current page */
.oranj-header .wp-block-navigation-item__content { position: relative; text-decoration: none !important; }
.oranj-header .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.25em; height: 2px; border-radius: 2px; background: var(--wp--preset--color--primary); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.oranj-header .wp-block-navigation-item__content:hover::after, .oranj-header .wp-block-navigation-item__content[aria-current]::after { transform: scaleX(1); }
@media (max-width: 781px) { .oranj-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; } }
.oranj-lang a:not(.is-current):hover { background-color: rgba(var(--oranj-primary-rgb, 0, 0, 0), .1); }
.oranj-lang a { min-width: 2.5rem; text-align: center; }

/* Form focus ring */
.fluentform .ff-el-form-control:focus { box-shadow: 0 0 0 4px rgba(var(--oranj-primary-rgb, 0, 0, 0), .12); outline: none; }
.fluentform .ff-el-form-control:hover { border-color: var(--wp--preset--color--border-dark); }

/* Visible keyboard focus everywhere */
:where(a, button, .wp-block-button__link):focus-visible { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 3px; border-radius: 8px; }

/* Mobile header: one compact row (the sticky bottom bar carries Book Now / Call) */
@media (max-width: 781px) {
	.oranj-header { flex-wrap: nowrap !important; padding-top: .55rem; padding-bottom: .55rem; gap: .5rem; }
	.oranj-header .wp-block-site-logo img { width: 84px !important; height: auto !important; }
	.oranj-header > .wp-block-group { flex-wrap: nowrap !important; gap: .6rem; }
	.oranj-header .wp-block-buttons { display: none; }
	.oranj-header .wp-block-navigation { order: 2; }
	.oranj-header .oranj-lang { order: 1; }
}

@media (max-width: 781px) { .oranj-eyebrow { font-size: .7rem; letter-spacing: .1em; } }

/* Mobile menu: brand tint for the current item (Ollie default is gray) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current] { background: var(--oranj-tint); border-radius: 12px; }

/* Logged-in preview: under 601px WordPress's admin bar scrolls away (it is not fixed), so the sticky header must pin to the very top. */
@media (max-width: 600px) { .admin-bar header.wp-block-template-part { top: 0; } }

/* Anchor/scroll-to-error targets must clear the sticky header */
html { scroll-padding-top: 8rem; }

/* Mobile menu panel (logged-in preview): under 601px the admin bar scrolls away, so don't offset the panel by its height. */
@media (max-width: 600px) { .admin-bar .wp-block-navigation__responsive-container.is-menu-open { top: 0 !important; } }
/* Mobile menu items: focus ring stays inside the row, and the current item gets the brand tint (beats Ollie's gray). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible { outline-offset: -3px; border-radius: 12px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current] { background: var(--oranj-tint) !important; border-radius: 12px; }

/* ---------- Edge-to-edge on notched phones (iPhone Dynamic Island / notch) ----------
   With viewport-fit=cover the page can paint behind the status bar. The header grows by the inset so its
   translucent background runs up under the island while the logo and menu stay clear of it. env() is 0 on
   devices without a notch, so nothing changes there. */
html { background: var(--wp--preset--color--base); }
.oranj-header-wrap { padding-top: env(safe-area-inset-top, 0px); }
.wp-block-navigation__responsive-container.is-menu-open { padding-top: max(1.5rem, env(safe-area-inset-top, 0px)) !important; } /* 1.5rem = core's own value, so non-notch phones are unchanged */

/* Visually hidden text for screen readers (e.g. "opens in a new tab") */
.oranj-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }