/*
Theme Name: Whale Explorer
Theme URI:
Description: A child theme for Ollie.
Author:
Author URI:
Template: ollie
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: whale-explorer
*/

/* ── Smooth scrolling ────────────────────────────────────────────────────────
   Enables smooth scroll for all anchor links site-wide. No JS required.
   Respects prefers-reduced-motion automatically via the browser. */

html {
	scroll-behavior: smooth;
}

/* ── Cover: Hero style ────────────────────────────────────────────────────────
   Tall minimum height with a 4-beat staggered entrance.

   Actual DOM structure (from inspecting the tour page):

   .wp-block-cover__inner-container
     └── section.wp-block-group          ← padding wrapper — NOT animated
          ├── div.wp-block-group          ← content column: pill + h2 + buttons
          │    ├── [1] div (pill tag)     ← slides up  (0.05s)
          │    ├── [2] h2.wp-block-heading ← dramatic slide up  (0.22s)
          │    └── [3] div.wp-block-buttons ← fades in  (0.40s)
          └── div.wp-block-group          ← stats row  (0.55s, subtle, as unit)

   The outer section is a padding container only — animating it as a unit
   would mean everything appears at once. Instead we target the two groups
   inside it: the content group's children are staggered individually;
   the stats row slides in as a single unit after the content settles.

   animation-fill-mode: both — elements start invisible, no flash pre-play.
   nth-child delays on content children are robust to block reordering. */

@keyframes hero-slide-up {
	from {
		opacity:   0;
		transform: translateY( 2rem );
	}
}

@keyframes hero-slide-up-subtle {
	from {
		opacity:   0;
		transform: translateY( 1rem );
	}
}

@keyframes hero-fade-in {
	from { opacity: 0; }
}

.wp-block-cover.is-style-hero {
	min-height: min( 90vh, 820px );
	position:   relative;
}


/* ── Sticky header: glass effect on scroll ───────────────────────────────────
   The outer template part wrapper is the correct sticky target.
   Ollie's :has() trick requires .is-position-sticky inside, but the DB
   version of the header doesn't carry that class — so we set sticky directly.

   The nav row inside already carries Ollie's is-style-background-blur style
   which applies backdrop-filter: blur(20px). We add a semi-transparent
   background to that row on scroll so the blur becomes visible.

   JS (sticky-header.js) adds .is-scrolled to header.wp-block-template-part. */

header.wp-block-template-part {
	position: sticky;
	top:      calc( 0px + var( --wp-admin--admin-bar--height, 0px ) );
	z-index:  100;
}

header.wp-block-template-part .is-style-background-blur {
	transition:
		background-color 0.35s ease,
		box-shadow       0.35s ease;
}

header.wp-block-template-part.is-scrolled .is-style-background-blur {
	background-color: rgba( 255, 255, 255, 0.78 );
	box-shadow:
		0 1px 0   rgba( 26, 48, 91, 0.08 ),
		0 6px 24px rgba( 26, 48, 91, 0.08 );
}

/* ── SVG logo: scoped fill overrides ────────────────────────────────────────
   Inline SVGs use generic class names (.cls-1 etc) from the vector editor.
   Multiple inline SVGs on the same page bleed into the global cascade — the
   last .cls-1 declared wins. Lock our logomark fills with higher specificity
   so other SVGs on the page cannot override them. */

header.wp-block-template-part .wp-block-outermost-icon-block .cls-1 { fill: #ffffff; }
header.wp-block-template-part .wp-block-outermost-icon-block .cls-2 { fill: #001f3b; }
header.wp-block-template-part .wp-block-outermost-icon-block .cls-3 { fill: #f37021; }

/* ── Content group children: stagger each block individually ── */

.wp-block-cover.is-style-hero .wp-block-cover__inner-container section > .wp-block-group:first-child > * {
	animation: hero-slide-up 0.7s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

.wp-block-cover.is-style-hero .wp-block-cover__inner-container section > .wp-block-group:first-child > *:nth-child(1) { animation-delay: 0.05s; }
.wp-block-cover.is-style-hero .wp-block-cover__inner-container section > .wp-block-group:first-child > *:nth-child(2) { animation-delay: 0.22s; }
.wp-block-cover.is-style-hero .wp-block-cover__inner-container section > .wp-block-group:first-child > *:nth-child(3) { animation-delay: 0.40s; }
.wp-block-cover.is-style-hero .wp-block-cover__inner-container section > .wp-block-group:first-child > *:nth-child(4) { animation-delay: 0.58s; }

/* Heading: longer duration — it's the centrepiece */
.wp-block-cover.is-style-hero .wp-block-cover__inner-container section > .wp-block-group:first-child > .wp-block-heading {
	animation-name:     hero-slide-up;
	animation-duration: 0.9s;
}

/* Buttons: fade only — sliding after the heading has risen looks redundant */
.wp-block-cover.is-style-hero .wp-block-cover__inner-container section > .wp-block-group:first-child > .wp-block-buttons {
	animation-name:     hero-fade-in;
	animation-duration: 0.6s;
}

/* ── Stats row: arrives last as a single unit ── */

.wp-block-cover.is-style-hero .wp-block-cover__inner-container section > .wp-block-group:last-child {
	animation: hero-slide-up-subtle 0.65s cubic-bezier( 0.22, 1, 0.36, 1 ) 0.55s both;
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-cover.is-style-hero .wp-block-cover__inner-container * {
		animation: none !important;
	}
}

/* ── Rezdy Booking block ──────────────────────────────────────────────────────
   Force transparent background on the wrapper and iframe so the block can sit
   over a background image / blurred group without a white box showing through.
   Note: the iframe CONTENT is served by Rezdy — if their widget sets its own
   body background we can't override it from here, but allowtransparency="true"
   on the iframe element signals to the browser to honour transparency. */

.block-rezdy-booking,
.block-rezdy-booking iframe {
	background:       transparent !important;
	background-color: transparent !important;
}

/* ── Buttons: outline style ──────────────────────────────────────────────────
   The fill style is driven by theme.json (orange bg, white text).
   The outline style needs CSS because theme.json only controls the default. */

.wp-block-button.is-style-outline .wp-block-button__link {
	background:    transparent;
	border-color:  var( --wp--preset--color--primary );
	color:         var( --wp--preset--color--primary );
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background:    var( --wp--preset--color--primary );
	border-color:  var( --wp--preset--color--primary );
	color:         var( --wp--preset--color--base );
	text-decoration: none;
}

/* ── Brand corner radius ─────────────────────────────────────────────────────
   Asymmetric radius from the logomark: large on top-right & bottom-left,
   small on top-left & bottom-right (2:1 ratio). Applied to images and the
   media side of media/text blocks. Buttons are handled via theme.json. */

.wp-block-image img,
.wp-block-image figure {
	border-radius: 6px 18px 6px 18px;
}

.wp-block-media-text .wp-block-media-text__media img,
.wp-block-media-text .wp-block-media-text__media video {
	border-radius: 6px 18px 6px 18px;
}

/* ── Group: Animated BG style ────────────────────────────────────────────────
   animate-bg.js fetches WEXP-path-orange-dark.svg, injects it inline as
   .animate-bg__svg, measures each path with getTotalLength(), and primes
   stroke-dashoffset = stroke-dasharray (paths start invisible).

   When 15% of the group enters the viewport, JS adds .animate-bg--visible,
   which triggers the CSS transition and draws the paths.

   NOTE: Requires a stroke-based SVG for the drawing effect. The fill SVG is
   the current placeholder — swap in the stroke version from the designer.
   No CSS or JS changes needed; path lengths are measured automatically.

   Stroke colour inherits from the group's text colour (currentColor).
   Set a custom colour on the group in the editor to control the SVG tint. */

.wp-block-group.is-style-animate-bg {
	position: relative;
	overflow: hidden;
}

/* Injected SVG wrapper — sits behind all block content */
.animate-bg__svg {
	/* Dimensions and position set by JS — this is just a fallback */
	position:       absolute;
	top:            0;
	left:           0;
	pointer-events: none;
	z-index:        0;
}

.animate-bg__svg svg {
	width:    100%;
	height:   100%;
	display:  block;
}

/* Stroke colours and widths come from the SVG's own internal <style> block.
   Transition timing is set per-path by animate-bg.js (proportional to path length). */

/* Trigger: JS adds this class when the group enters the viewport */
.wp-block-group.animate-bg--visible .animate-bg__svg svg path,
.wp-block-group.animate-bg--visible .animate-bg__svg svg polyline,
.wp-block-group.animate-bg--visible .animate-bg__svg svg line {
	stroke-dashoffset: 0;
}

/* Group content sits above the SVG layer */
.wp-block-group.is-style-animate-bg > *:not( .animate-bg__svg ) {
	position: relative;
	z-index:  1;
}

@media ( prefers-reduced-motion: reduce ) {
	.animate-bg__svg svg path,
	.animate-bg__svg svg polyline,
	.animate-bg__svg svg line {
		transition:        none;
		stroke-dashoffset: 0;
	}
}