/*
Theme Name:  SCL Watersports
Description: Child theme of SCL Master (Sage Roots) for the Watersports site.
Template:    scl-master-sageroots
Version:     1.0.0
Author:      Cornerstone
Author URI:  https://cornerstonedm.co.uk/
Text Domain: scl-watersports
*/

/* ── Watersports brand palette ────────────────────────────────────────────── */
:root {
	--color-watersports-red:  #B31F21;
	--color-watersports-navy: #213D4C;

	/* Override the parent palette's magenta so every hardcoded
	 * bg-leisure-magenta / text-leisure-magenta on the watersports site
	 * renders as the watersports red. This re-tints surfaces the parent owns
	 * (accordion-icon circle, CTA arrows, hover/focus states, news card
	 * headings, etc.) without having to fork the parent composer or blades.
	 * The "Magenta" choice is also hidden from ACF dropdowns — see the
	 * heading_colour / background_colour load_field filters in functions.php.
	 */
	--color-leisure-magenta: #B31F21;

	/* Override leisure-black so every text-leisure-black / border-leisure-black
	 * inherits the watersports navy by default — i.e. body copy is navy site-
	 * wide without us having to override individual utilities. Keeping the
	 * variable-driven approach (rather than re-defining `.text-leisure-black`
	 * directly) is important: it lets Tailwind's hover utilities like
	 * `hover:text-white` win on hover via normal specificity within
	 * @layer utilities, instead of being beaten by an unlayered class override.
	 *
	 * The matching `bg-leisure-black` utility is forced back to true black
	 * below so the "Leisure Black" background choice still renders as expected.
	 */
	--color-leisure-black: #2b2b2b;
}

/* Preserve true black for the `bg-leisure-black` utility despite the variable
 * override above. !important defeats Tailwind's utility-layer rule. Opacity
 * variants like `bg-leisure-black/95` are intentionally left to track the
 * variable (= navy at 95%) because they're used for darkened overlays where
 * the slight hue shift is fine. */
.bg-leisure-black { background-color: #2B2B2B !important; }

/* ── Watersports colour utility classes ───────────────────────────────────── *
 * The parent theme exposes Tailwind utilities (bg-leisure-magenta, etc.) via
 * its @theme block. Because this child theme does not compile its own Tailwind
 * pass, the watersports palette is provided as hand-written utility classes so
 * they can be used identically inside Blade views and ACF colour selects.
 */
.bg-watersports-red    { background-color: var(--color-watersports-red); }
.bg-watersports-navy   { background-color: var(--color-watersports-navy); }
.text-watersports-red  { color: var(--color-watersports-red); }
.text-watersports-navy { color: var(--color-watersports-navy); }
.border-watersports-red  { border-color: var(--color-watersports-red); }
.border-watersports-navy { border-color: var(--color-watersports-navy); }

/* SVG fill helpers — use on <svg fill="currentColor"> children or on the svg
 * itself when paths inherit via fill="currentColor". */
.fill-watersports-red  { color: var(--color-watersports-red); }
.fill-watersports-navy { color: var(--color-watersports-navy); }

/* ── Hover / focus variants ───────────────────────────────────────────────── *
 * The parent theme's compiled Tailwind generates `hover:bg-leisure-magenta`
 * etc. for its own palette tokens, but this child theme doesn't run a Tailwind
 * pass, so any `hover:`/`focus:` variant of the watersports tokens has to be
 * declared by hand. Mirrors Tailwind's `:hover` / `:focus` selectors. */
.hover\:bg-watersports-red:hover      { background-color: var(--color-watersports-red); }
.hover\:bg-watersports-navy:hover     { background-color: var(--color-watersports-navy); }
.hover\:text-watersports-red:hover    { color: var(--color-watersports-red); }
.hover\:text-watersports-navy:hover   { color: var(--color-watersports-navy); }
.hover\:border-watersports-red:hover  { border-color: var(--color-watersports-red); }
.hover\:border-watersports-navy:hover { border-color: var(--color-watersports-navy); }
.hover\:fill-watersports-red:hover    { color: var(--color-watersports-red); }
.hover\:fill-watersports-navy:hover   { color: var(--color-watersports-navy); }

.focus\:bg-watersports-red:focus      { background-color: var(--color-watersports-red); }
.focus\:bg-watersports-navy:focus     { background-color: var(--color-watersports-navy); }
.focus\:text-watersports-red:focus    { color: var(--color-watersports-red); }
.focus\:text-watersports-navy:focus   { color: var(--color-watersports-navy); }
.focus\:border-watersports-red:focus  { border-color: var(--color-watersports-red); }
.focus\:border-watersports-navy:focus { border-color: var(--color-watersports-navy); }

/* ── Button hover behaviour ───────────────────────────────────────────────── *
 * All red CTAs on watersports hover to the dark navy with white text.
 * Targets:
 *   - watersports-red CTAs (e.g. Book Activity in the header)
 *   - parent-theme buttons that use bg-leisure-magenta as their resting state
 *     (now rendering red via the variable override above, but inheriting the
 *     parent's hover:bg-leisure-black behaviour which we want to replace)
 *
 * Scoped to anchor/button elements so the announcement bar and other non-
 * interactive bg-leisure-magenta surfaces are unaffected. The element+class+
 * pseudo specificity (0,2,1) beats Tailwind's hover utilities (0,2,0), and
 * unlayered CSS beats @layer utilities outright.
 */
a.bg-watersports-red:hover,
button.bg-watersports-red:hover,
a.bg-leisure-magenta:hover,
button.bg-leisure-magenta:hover {
	background-color: var(--color-watersports-navy) !important;
	color: #fff !important;
	opacity: 1 !important;
}

/* Contextual override: inside a `.bg-watersports-navy` container, hovering a
 * red (or legacy magenta) button to navy is invisible. Force black hover in
 * that context only — everywhere else the default red → navy rebrand above
 * still applies. The descendant selector adds specificity to win over the
 * global rule. */
.bg-watersports-navy a.bg-watersports-red:hover,
.bg-watersports-navy a.bg-leisure-magenta:hover,
.bg-watersports-navy button.bg-watersports-red:hover,
.bg-watersports-navy button.bg-leisure-magenta:hover {
	background-color: var(--color-leisure-black) !important;
}

/* ── `before:` pseudo-element bg utilities for the watersports palette ───── *
 * Tailwind v4's `before:` prefix auto-generates compound utilities only for
 * colours it knows about (i.e. those in the parent's @theme). Because
 * bg-watersports-navy / bg-watersports-red are hand-written in this file, the
 * compound `before:bg-watersports-*` classes don't exist yet — provide them
 * manually so the hero-with-carousel section can use them for its top-half
 * pseudo overlay.
 */
.before\:bg-watersports-navy::before { background-color: var(--color-watersports-navy); }
.before\:bg-watersports-red::before  { background-color: var(--color-watersports-red); }

/* ── Hand-written arbitrary-value utilities ──────────────────────────────── *
 * The parent's Tailwind build only scans its own resources/views and app/
 * directories (see @source directives in scl-master-sageroots/resources/css/
 * app.css). Arbitrary-value classes used exclusively in watersports views
 * (e.g. `text-[80px]`, `leading-[1.05]`) therefore never appear in the parent
 * bundle and silently no-op. Each such utility is hand-written here.
 *
 * Long-term fix is to add `@source "../../scl-watersports/resources/views/"`
 * to the parent's app.css and rebuild — but that requires touching the master
 * theme, so we hand-write the ones we need until that's done.
 */
/* Force plain (non-prefixed) `text-6xl` to apply across all viewports.
 * The base `.text-6xl` was being overridden by some higher-cascade rule
 * (WP block-library / theme.json / etc.) so we re-declare it with !important.
 * MUST sit BEFORE any responsive font-size overrides below — when two rules
 * carry !important and the same specificity, the later one in source order
 * wins. Keeping this rule first lets `xl:text-[80px]`, `lg:text-9xl`, etc.
 * below correctly override at their breakpoints. */
.text-6xl { font-size: 3.75rem !important; line-height: 1.3 !important; }

@media (min-width: 64rem) { /* Tailwind lg breakpoint = 64rem = 1024px */
	.lg\:text-\[80px\]     { font-size: 80px !important; }
	.lg\:text-\[128px\]    { font-size: 128px !important; }
	.lg\:text-9xl          { font-size: 8rem !important; line-height: 1 !important; }
}

@media (min-width: 80rem) { /* Tailwind xl breakpoint = 80rem = 1280px */
	.xl\:text-\[80px\]     { font-size: 80px !important; }
	.xl\:leading-\[1\.05\] { line-height: 1.05; }
}

/* Hero with carousel — chevron block sizing. The container is fixed at the
 * SVG's natural size so the chevron silhouettes are pinned to the right edge
 * and `overflow-hidden` clips them at the section bottom. */
.w-\[1053px\]      { width: 1053px; }
.h-\[733px\]       { height: 733px; }
.max-w-\[1053px\]  { max-width: 1053px; }
.bottom-\[-320px\] { bottom: -320px; }

/* Responsive display utilities. `sm:hidden` hides at ≥640px; `max-sm:hidden`
 * hides below 640px. !important needed so these win against Swiper's bundled
 * `.swiper-button-prev/next { display: flex }`, which loads after style.css. */
@media (min-width: 40rem) { /* sm breakpoint */
	.sm\:hidden { display: none !important; }
}
@media (max-width: 39.9999rem) {
	.max-sm\:hidden { display: none !important; }
}

/* Announcement marquee scrolls at all breakpoints, matching the main site and
 * the other subsites — it uses the parent theme's default
 * `.announcement__track { animation: marquee-scroll 18s linear infinite }`
 * (plus the per-instance `animation-duration` set by app.js's initialiser).
 * The previous lg+ override that froze it to a static centred line has been
 * removed so the banner scrolls on desktop too. */

/* Standard Tailwind spacing / alignment / typography utilities missing from
 * the parent's bundle (parent's @source globs don't scan watersports views).
 * Add more here as you hit other "X works but lg:X doesn't" cases. */
.mb-20         { margin-bottom: 5rem; }
.mt-0          { margin-top: 0; }
.mt-5          { margin-top: 1.25rem; }
.pt-12         { padding-top: 3rem; }
.self-end      { align-self: flex-end; }
.text-\[11px\] { font-size: 11px; }
.underline     { text-decoration-line: underline; }

@media (min-width: 64rem) { /* lg breakpoint */
	.lg\:self-end    { align-self: flex-end; }
	.lg\:self-center { align-self: center; }
	.lg\:mt-12       { margin-top: 3rem; }
	.lg\:pb-10       { padding-bottom: 2.5rem !important; }
	.lg\:pt-16       { padding-top: 4rem; }
}

@media (min-width: 64rem) { /* Tailwind lg breakpoint = 64rem = 1024px */
	.lg\:pt-20 { padding-top: 5rem; }
	.lg\:pb-20 { padding-bottom: 5rem; }
	.lg\:pb-40 { padding-bottom: 10rem; }
}

/* ── Flex-block heading size bump for the Headline font ───────────────────── *
 * The shared flexible-content composer outputs `text-3xl lg:text-4xl` on most
 * block headings (see App\View\Composers\Flexible::with()). Watersports wants
 * headings using the Headline font to scale up to text-6xl at lg+ instead.
 *
 * Selecting both classes raises specificity above Tailwind's `.lg\:text-4xl`
 * utility (which is also at @layer utilities); !important is added so we win
 * regardless of cascade-layer ordering with the parent bundle.
 */
@media (min-width: 64rem) { /* Tailwind lg breakpoint = 64rem = 1024px */
	.font-headline.lg\:text-4xl {
		font-size: 3.75rem !important; /* text-6xl */
	}
}

/* ── Body copy default ────────────────────────────────────────────────────── *
 * `body` sets the inherited default for any text without an explicit class.
 * Elements with `.text-leisure-black` follow automatically because we override
 * the `--color-leisure-black` CSS variable in :root above — Tailwind hover
 * utilities such as `hover:text-white` then win on hover via normal cascade.
 */
body { color: var(--color-watersports-navy); }

/* ── Button styles (for ACF "primary_cta_background_colour" etc.) ─────────── *
 * The ACF button-colour selects on watersports offer five options. Three are
 * solid fills (bg-watersports-navy, bg-watersports-red, btn-fill-white) and
 * two are outlines. The parent blade templates hardcode `text-white` after
 * the chosen class, so each style here uses `!important` to defeat that.
 *
 * Hover behaviour:
 *   • Fill options flip to navy fill / white text (handled by the global
 *     a.bg-watersports-red:hover rule above, plus matching :hover rules below).
 *   • Outlines invert — empty outline becomes solid on hover.
 */
.btn-fill-white {
	background-color: #fff !important;
	color: var(--color-watersports-navy) !important;
	border: 2px solid #fff !important;
}
.btn-fill-white:hover {
	background-color: var(--color-watersports-navy) !important;
	color: #fff !important;
	border-color: var(--color-watersports-navy) !important;
}

.btn-outline-white {
	background-color: transparent !important;
	color: #fff !important;
	border: 2px solid #fff !important;
}
.btn-outline-white:hover {
	background-color: #fff !important;
	color: var(--color-watersports-navy) !important;
}

.btn-outline-watersports-navy {
	background-color: transparent !important;
	color: var(--color-watersports-navy) !important;
	border: 2px solid var(--color-watersports-navy) !important;
}
.btn-outline-watersports-navy:hover {
	background-color: var(--color-watersports-navy) !important;
	color: #fff !important;
}

/* ── Hero with Carousel: primary CTA hover override ───────────────────────── *
 * The hero block's primary CTA defaults to bg-watersports-red, which would
 * normally pick up the global red-button hover (→ navy fill + white text).
 * The design calls for the hero CTA specifically to invert to a white fill
 * with navy text instead. Targeted by section id so it wins over the global
 * rule on specificity (id raises us above the bare class selector).
 */
#hero-with-carousel a.hero-primary-cta:hover,
#hero-with-carousel a.hero-primary-cta:focus-visible {
	background-color: #fff !important;
	color: var(--color-watersports-navy) !important;
}

/* ── Hero with Carousel: GET INVOLVED carousel-card CTA hover override ───── *
 * The carousel beneath the hero lives in a separate <section> (no id) so the
 * #hero-with-carousel scope above doesn't catch it. Marker class + element
 * tag gives us (0,2,1) specificity to beat the global a.bg-watersports-red
 * rule, with !important to defeat the global rule's own !important.
 */
a.hero-carousel-card-cta:hover,
a.hero-carousel-card-cta:focus-visible {
	background-color: #fff !important;
	color: var(--color-leisure-black) !important;
}

/* ── Page Header: red chevron block (mirrors hero-with-carousel) ──────────── *
 * Absolute-positioned strip at the bottom of the page-header section. Sized
 * to ~half the chevron's natural height so the chevron is clipped at the same
 * point the hero block's next-section overlap would cover it — gives the
 * "chevrons emerging at the bottom of the header" look without the chevron
 * growing the section vertically.
 *
 * SVG keeps its natural aspect ratio (width/height attrs preserved), is
 * constrained to 48% of the section width via max-width, and is anchored to
 * the right. overflow-hidden on the container clips the bottom half of the
 * SVG that would otherwise extend below.
 */
.page-header-chevron-block {
	display: none;
}

@media (min-width: 64rem) { /* Tailwind lg breakpoint = 64rem = 1024px */
	/* Section padding-bottom adds breathing room below the image and chevron.
	 * isolation: isolate creates a stacking context on the section so the
	 * chevron's negative z-index can't escape and slip behind the section
	 * background or other page content above/below. */
	.page-header-has-watersports-chevron {
		padding-bottom: 5rem;
		isolation: isolate;
	}

	/* Chevron strip is lifted off the section bottom so its bottom edge sits
	 * above the image's bottom edge — the visible chevron tails appear
	 * partially behind the image rather than dangling below it. */
	.page-header-chevron-block {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 2rem;
		height: 15rem;
		overflow: hidden;
		pointer-events: none;
		text-align: right;
		z-index: -1; /* sits behind the image (within isolated section context) */
	}

	.page-header-chevron-block svg {
		display: inline-block;
		max-width: 48%;
		height: auto;
		vertical-align: top;
	}
}

/* ── Page Header: primary CTA hover override ──────────────────────────────── *
 * Same pattern as the hero CTA above — the page header's first button uses
 * bg-leisure-magenta (rendered red via the variable override) and would
 * otherwise inherit the global red-button hover (navy fill + white text).
 * Watersports design calls for white fill + navy text on this one button
 * specifically. Scoped by .page-header so it wins on specificity over the
 * bare a.bg-leisure-magenta:hover rule defined globally above.
 */
.page-header a.bg-leisure-magenta:hover,
.page-header a.bg-leisure-magenta:focus-visible {
	background-color: #fff !important;
	color: var(--color-watersports-navy) !important;
}

/* ── Team Carousel — themed controls (red arrows + dot pagination) ────────── *
 * Mirrors the news-carousel pattern in the parent: keep the pagination
 * compact (Swiper otherwise sets width:100% which pushes the prev/next
 * buttons to the container edges) and recolour the arrow circles via the
 * --carousel-theme variable that the blade sets inline.
 */
.team-carousel-controls .swiper-nav-prev,
.team-carousel-controls .swiper-nav-next {
	background-color: var(--carousel-theme, var(--color-watersports-red));
	flex: 0 0 auto;
}

.team-carousel-controls .swiper-nav-prev:hover,
.team-carousel-controls .swiper-nav-next:hover {
	background-color: var(--color-watersports-navy);
	opacity: 1;
}

.team-carousel-controls .team-carousel-pagination {
	position: static !important;
	width: auto !important;
	flex: 0 0 auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
}

.team-carousel-pagination .swiper-pagination-bullet {
	background-color: var(--color-light-grey, #d1d5db);
	opacity: 1;
}

.team-carousel-pagination .swiper-pagination-bullet-active {
	background-color: var(--carousel-theme, var(--color-watersports-red));
	opacity: 1;
}

.underline {
  text-decoration-line: underline !important;
}