/*! ReefDudes brand bundle — auto-generated, do not edit. */
/*! Hash: 1932916531  Generated: 2026-04-29 07:44:09 UTC */

/* ============================================================
   assets/css/brand-tokens.css
   ============================================================ */
/* =================================================================
   ReefDudes — Brand Tokens
   Shared palette across all ReefDudes surfaces. Hex values are the
   contract; CSS variables are the convenient handle.
   -----------------------------------------------------------------
   CONVENTION: every decorative-color token has a paired -text token.

   Brand colors play two distinct roles. They look the same, but the
   accessibility math is very different:

     Decorative role  → atmospheric surfaces
       buttons, gradients, focus rings, halos, large display type,
       backgrounds, borders, badges, badges-on-color
       Bright, saturated, brand-true. Looks like the brand.
       Examples: --accent, --logo-cyan, --actinic, --coral

     Text role        → content on light surfaces
       body links, eyebrows, small labels, ghost-button text,
       inline emphasis, anything < ~24px on white/near-white
       Darkened so it passes WCAG AA contrast at body sizes.
       Examples: --accent-text, --logo-cyan-text

   Why both: a saturated brand blue (#3a8ee0) on white renders ~3.6:1
   — fine for atmosphere, fails AA for body text. We can't lower the
   brand blue's saturation without dulling buttons and gradients, so
   we ship a darker partner token specifically for text.

   RULE: when introducing a new brand-decorative color, also introduce:
       --<name>-text       AA-pass on white at body sizes (≥4.5:1)
       --<name>-text-soft  AAA or hover/emphasis variant (≥7:1)
   Pick the darkness so the hue stays recognizable but contrast clears.

   Use the decorative token for: backgrounds, gradients, large bold
     display type (≥24px regular OR ≥18.66px bold), focus glow, badges
     where the colored surface IS the contrast.
   Use the text token for: body links, eyebrows, small labels (<24px),
     ghost-button text, any inline color text on light surfaces.

   When in doubt: contrast ratio. <4.5:1 → use the -text variant.
   ================================================================= */

:root {
	color-scheme: light;

	/* Surfaces — lightened to feel sunnier and friendlier.
	   The previous --bg / --bg-2 were a bit cool/dim and made the page
	   read as overcast. New values are closer to white-with-a-hint. */
	--bg:               #f5f9fd;
	--bg-2:             #e8f0f9;
	--panel:            #ffffff;
	--panel-2:          #f7fafd;

	/* Header */
	--header:           #3a8ee0;
	--header-text:      #ffffff;

	/* Ink */
	--text:             #1c3344;
	--text-2:           #46586a;
	--muted:            #7a8a96;
	--border:           #cdd8e2;
	--border-strong:    #a8b6c4;

	/* Brand accent */
	--accent:           #3a8ee0;
	--accent-hover:     #4ea0ea;
	--accent-soft:      #e8f1fb;
	--actinic:          #5aa6e8;
	--coral:            #ff7e62;

	/* Accessibility-safe accent for text contexts. --accent (#3a8ee0)
	   is ~3.6:1 on white — fine for large/heavy type and atmospheric
	   surfaces (buttons, gradients, focus rings) but FAILS WCAG AA for
	   normal-weight body links. Use --accent-text wherever brand-blue
	   text appears at body size on a light surface. */
	--accent-text:      #1f5da0;   /* ~6.3:1 on white, AA-pass */
	--accent-text-soft: #1a4f8a;   /* ~7.8:1 on white, AAA-pass */

	/* Logo-cyan: introduced after the illustrated logo upload added
	   a more cyan-shifted "Reef" wordmark. Used where surfaces want
	   to rhyme with the logo (e.g., footer wordmark, decorative
	   waves) without replacing the primary --accent token.

	   Like --accent, the bright --logo-cyan is too light for text on
	   white/near-white surfaces (~1.9:1 on --bg-2). Use --logo-cyan-text
	   and --logo-cyan-text-soft for any text application. */
	--logo-cyan:           #3fb8c8;   /* bright — decoration only (waves, halos) */
	--logo-cyan-hover:     #4ec8d6;   /* even brighter — decoration hover */
	--logo-cyan-soft:      rgba(63, 184, 200, 0.18);
	--logo-cyan-text:      #1f6a78;   /* AA-safe for body/large text on light surfaces (~5.1:1 on white) */
	--logo-cyan-text-soft: #175363;   /* hover variant — darker for emphasis on light bg (~7.1:1 on white) */

	/* Semantic — universal, do not rebrand */
	--good:             #2d8e6f;
	--warn:             #c47a1c;
	--error:            #c44a4a;
	--info:             #3a8ee0;
	--focus-ring:       rgba(58, 142, 224, 0.30);

	/* Gradients */
	--grad-header:      linear-gradient(180deg, #4ea0ea 0%, #2c7bc7 100%);
	--grad-button:      linear-gradient(180deg, #4ea0ea 0%, #3a8ee0 100%);
	--grad-page:        linear-gradient(180deg, #f8fbfe 0%, #ecf3fa 100%);

	/* Shadows */
	--shadow-button:    0 1px 2px rgba(28, 75, 130, 0.18);
	--shadow-card:      0 1px 3px rgba(28, 75, 130, 0.06), 0 4px 12px rgba(28, 75, 130, 0.04);
}

/* =================================================================
   Page wash — applied to <body> behind Uncode's box-wrapper.
   Subtle atmospheric gradient, never aggressive.
   ================================================================= */
body.theme-uncode {
	background: var(--grad-page);
	color: var(--text);
}

body.theme-uncode .style-light-bg,
body.theme-uncode .style-light {
	color: var(--text);
}

/* Body text never lives on pure white in headings, but does in cards.
   Override Uncode's default near-black to brand ink. */
body.theme-uncode .h1,
body.theme-uncode .h2,
body.theme-uncode .h3,
body.theme-uncode .h4,
body.theme-uncode .h5,
body.theme-uncode .h6,
body.theme-uncode h1,
body.theme-uncode h2,
body.theme-uncode h3,
body.theme-uncode h4,
body.theme-uncode h5,
body.theme-uncode h6 {
	color: var(--text);
}

/* Override the legacy wp-custom-css `.h1{color:white!important}` rule
   that was forcing every .h1 to white. Restrict to elements that are
   explicitly inside a dark-skin container (where white is correct). */
body.theme-uncode .style-dark .h1,
body.theme-uncode .style-dark-bg .h1,
body.theme-uncode [class*="overlay-bg"] .h1 {
	color: #ffffff;
}

/* Links pick up the brand. --accent-text is AA-safe for body text
   on white; hover lightens to the visual brand --accent (still
   readable on hover when users have already located the link). */
body.theme-uncode a {
	color: var(--accent-text);
	transition: color 120ms ease;
}
body.theme-uncode a:hover,
body.theme-uncode a:focus {
	color: var(--accent);
}

/* Selection uses the soft brand tint */
body.theme-uncode ::selection {
	background: var(--accent-soft);
	color: var(--text);
}

/* Focus ring — globally consistent */
body.theme-uncode a:focus-visible,
body.theme-uncode button:focus-visible,
body.theme-uncode input:focus-visible,
body.theme-uncode select:focus-visible,
body.theme-uncode textarea:focus-visible,
body.theme-uncode [role="button"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--focus-ring);
	border-radius: 3px;
}

/* =================================================================
   Native form widgets — light-mode hints
   ================================================================= */

body.theme-uncode select {
	background-color: var(--panel);
	color: var(--text);
	border: 1px solid var(--border);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237a8a96' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 28px;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}

body.theme-uncode option {
	background: #ffffff;
	color: var(--text);
}
body.theme-uncode option:checked {
	background: var(--accent-soft);
	color: var(--accent);
}
body.theme-uncode optgroup {
	background: #f0f6f8;
	color: var(--accent);
	font-weight: 600;
}

/* Checkboxes / radios pick up brand on checked */
body.theme-uncode input[type="checkbox"]:checked,
body.theme-uncode input[type="radio"]:checked {
	accent-color: var(--accent);
}

/* =================================================================
   Pills (semantic) — universal hue, ~0.18 alpha bg, ~0.45 alpha border
   Use these classes inside any tool/widget that needs status pills.
   ================================================================= */

.rd-pill {
	display: inline-block;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	border-radius: 999px;
	border: 1px solid transparent;
	letter-spacing: 0.01em;
}
.rd-pill--good  { background: rgba(45,142,111,0.18);  color: #1f6b53; border-color: rgba(45,142,111,0.45); }
.rd-pill--warn  { background: rgba(196,122,28,0.18);  color: #8a5413; border-color: rgba(196,122,28,0.45); }
.rd-pill--error { background: rgba(196,74,74,0.18);   color: #8a2d2d; border-color: rgba(196,74,74,0.45); }
.rd-pill--info  { background: rgba(58,142,224,0.18);  color: #1f5da0; border-color: rgba(58,142,224,0.45); }
.rd-pill--coral { background: rgba(255,126,98,0.18);  color: #a3422d; border-color: rgba(255,126,98,0.45); }


/* ============================================================
   assets/css/brand-typography.css
   ============================================================ */
/* =================================================================
   ReefDudes — Typography
   Two faces only. Poppins does almost everything; Playfair Display
   is reserved for occasional editorial moments (long-form post
   titles, blockquotes). System UI fallbacks keep first paint fast.
   ================================================================= */

:root {
	--font-ui:        "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display:   "Playfair Display", "Iowan Old Style", "Apple Garamond", Georgia, "Times New Roman", serif;
	--font-mono:      "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

body.theme-uncode,
body.theme-uncode .menu-container,
body.theme-uncode input,
body.theme-uncode select,
body.theme-uncode textarea,
body.theme-uncode button {
	font-family: var(--font-ui);
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

body.theme-uncode {
	font-size: 16px;
	line-height: 1.55;
	letter-spacing: -0.005em;
	color: var(--text);
}

/* Headings — Poppins by default. Reserve Playfair for explicitly
   tagged editorial / blog title surfaces via .rd-display. */
body.theme-uncode h1,
body.theme-uncode h2,
body.theme-uncode h3,
body.theme-uncode h4,
body.theme-uncode h5,
body.theme-uncode h6,
body.theme-uncode .h1,
body.theme-uncode .h2,
body.theme-uncode .h3,
body.theme-uncode .h4,
body.theme-uncode .h5,
body.theme-uncode .h6 {
	font-family: var(--font-ui);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-wrap: balance;
}

body.theme-uncode .rd-display,
body.theme-uncode .single-post .post-title,
body.theme-uncode article.type-post h1.entry-title {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

/* Small section labels — the ONE place all-caps + tracking is OK.
   Color uses --accent-text (AA-pass at 12px) instead of --accent
   which fails contrast at this small size. */
body.theme-uncode .eyebrow,
body.theme-uncode .rd-eyebrow,
body.theme-uncode .section-label {
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-text);
}

/* Body copy in long-form posts gets a slightly looser line-height */
body.theme-uncode article .post-content,
body.theme-uncode .entry-content {
	line-height: 1.65;
}

/* Code keeps the mono stack */
body.theme-uncode code,
body.theme-uncode pre,
body.theme-uncode kbd,
body.theme-uncode samp {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

/* Reduce the font-loading flash by hiding text only briefly */
@font-face {
	font-display: swap;
}


/* ============================================================
   assets/css/brand-uncode.css
   ============================================================ */
/* =================================================================
   ReefDudes — Uncode component overrides
   Targets the specific Uncode theme classes/IDs visible on
   reefdudes.com so the brand palette wins without !important spam.
   The parent's compiled style-custom.css runs first; this file is
   enqueued AFTER it in functions.php.
   ================================================================= */

/* -------------------------------------------------------
   Header / primary navigation
   The live site uses .style-color-xsdn-bg on the menu container
   (mapped to #ffffff in the Uncode skin). We replace that white
   menu chrome with the brand gradient + white text.
   ------------------------------------------------------- */

body.theme-uncode .menu-container.style-color-xsdn-bg,
body.theme-uncode .menu-wrapper.menu-sticky .menu-container {
	background: var(--grad-header);
	border-bottom: 1px solid #2168b0;
	box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 2px 6px rgba(28,75,130,0.18);
}

/* -------------------------------------------------------
   Logo plate — gives the white-bg wordmark PNG its own
   identity surface on the blue header band, so the
   sky-blue "Reef" doesn't ghost into the band hue and
   the warm-gray "Dudes" reads at full saturation.
   When you re-cut the logo as transparent SVG with white
   text, add the `.has-svg-logo` class to <body> to drop
   this plate (or just delete the rule).
   ------------------------------------------------------- */

body.theme-uncode #main-logo .navbar-brand {
	display: inline-flex;
	align-items: center;
	background: #ffffff;
	border-radius: 8px;
	padding: 6px 14px;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.50) inset,
		0 2px 8px rgba(28,75,130,0.18),
		0 0 0 1px rgba(33,104,176,0.30);
	position: relative;
	transition: transform 160ms ease, box-shadow 160ms ease;
}
body.theme-uncode #main-logo .navbar-brand:hover {
	transform: translateY(-1px);
	box-shadow:
		0 1px 0 rgba(255,255,255,0.60) inset,
		0 4px 12px rgba(28,75,130,0.24),
		0 0 0 1px rgba(33,104,176,0.45);
}

/* Subtle actinic accent strip across the top of the plate so it
   reads as part of the brand family, not a pasted-in card. */
body.theme-uncode #main-logo .navbar-brand::before {
	content: "";
	position: absolute;
	top: 0;
	left: 8px;
	right: 8px;
	height: 2px;
	background: var(--actinic);
	border-radius: 0 0 2px 2px;
	opacity: 0.85;
}

/* Tighten the inner image so the plate doesn't look oversized */
body.theme-uncode #main-logo .navbar-brand .logo-image {
	margin: 0;
	display: block;
}

/* When `has-svg-logo` is on the body (set in functions.php), drop
   the plate entirely. Uncode wraps the logo image in two different
   containers depending on which admin field was used:
     - Theme Options → Logo:                <div class="logo-image">
     - WP Customizer → Site Identity Logo:  <div class="logo-customizer">
   We hit both so it works regardless of how the logo was uploaded. */

body.theme-uncode.has-svg-logo #main-logo .navbar-brand {
	background: transparent;
	box-shadow: none;
	padding: 0;
}
body.theme-uncode.has-svg-logo #main-logo .navbar-brand::before {
	display: none;
}

/* Customizer path (current case for ReefDudes — transparent PNG with
   the illustrated reef artwork). The PNG is already transparent so
   no white-knockout is needed. A tiny saturation/contrast boost
   makes the corals and fish read better at small header sizes
   without flattening the artwork. */
body.theme-uncode.has-svg-logo #main-logo .logo-customizer img,
body.theme-uncode.has-svg-logo #main-logo .navbar-brand .logo-customizer img {
	filter: saturate(1.10) contrast(1.05) drop-shadow(0 1px 2px rgba(8,28,55,0.35));
	transition: filter 160ms ease, transform 160ms ease;
}
body.theme-uncode.has-svg-logo #main-logo .navbar-brand:hover .logo-customizer img {
	filter: saturate(1.20) contrast(1.08) drop-shadow(0 2px 4px rgba(8,28,55,0.45));
	transform: translateY(-1px);
}

/* Theme-Options path (legacy; still works as a knockout fallback if
   a future logo with a white background gets uploaded that way). */
body.theme-uncode.has-svg-logo #main-logo .navbar-brand .logo-image img {
	mix-blend-mode: multiply;
	filter: brightness(1.45) saturate(1.6) contrast(1.15);
}
body.theme-uncode.has-svg-logo #main-logo .navbar-brand:hover .logo-image img {
	filter: brightness(1.6) saturate(1.7) contrast(1.15);
}

/* Bump the logo size — the new illustrated logo carries fish and
   coral details that get lost at small sizes. 80px desktop / 56px
   mobile gives the artwork room to read while keeping the header
   band proportional to the menu items. */
body.theme-uncode.has-svg-logo #main-logo .logo-customizer,
body.theme-uncode.has-svg-logo #main-logo .navbar-brand .logo-customizer {
	max-height: 80px;
}
body.theme-uncode.has-svg-logo #main-logo .logo-customizer img {
	max-height: 80px;
	width: auto;
	height: auto;
}
@media (max-width: 600px) {
	body.theme-uncode.has-svg-logo #main-logo .logo-customizer,
	body.theme-uncode.has-svg-logo #main-logo .navbar-brand .logo-customizer {
		max-height: 56px;
	}
	body.theme-uncode.has-svg-logo #main-logo .logo-customizer img {
		max-height: 56px;
	}
}

/* Mobile: tighten plate padding so the touch target stays compact */
@media (max-width: 600px) {
	body.theme-uncode #main-logo .navbar-brand {
		padding: 4px 10px;
		border-radius: 6px;
	}
}

/* Menu links — white on blue, with the soft hover lift */
body.theme-uncode .menu-container .menu-primary-inner > li > a,
body.theme-uncode .menu-container .navbar-extra-icons > ul > li > a {
	color: var(--header-text);
	transition: background-color 140ms ease, color 140ms ease;
}
body.theme-uncode .menu-container .menu-primary-inner > li:hover > a,
body.theme-uncode .menu-container .menu-primary-inner > li.dropdown.show > a,
body.theme-uncode .menu-container .menu-primary-inner > li > a:focus,
body.theme-uncode .menu-container .navbar-extra-icons > ul > li:hover > a {
	color: #ffffff;
	background-color: rgba(255,255,255,0.10);
}
body.theme-uncode .menu-container .menu-primary-inner > li.current-menu-item > a,
body.theme-uncode .menu-container .menu-primary-inner > li.current-menu-ancestor > a {
	color: #ffffff;
	box-shadow: inset 0 -2px 0 var(--actinic);
}

/* Search and cart icons in the header */
body.theme-uncode .menu-container .navbar-extra-icons .fa,
body.theme-uncode .menu-container .navbar-extra-icons i {
	color: var(--header-text);
}

/* Icon-only header items (search, cart) — without horizontal padding
   on the <a>, the hover background paints only behind the glyph and
   reads as a tiny off-center swatch. Pad the link the same way the
   text items are padded so the highlight rectangle is uniform with
   "Reef School", "Video", etc. and the icon sits centered inside. */
@media (min-width: 960px) {
	body.theme-uncode .menu-container .navbar-extra-icons > ul > li > a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		padding: 0 14px;
		border-radius: 4px;
	}
}

/* Mobile menu toggle bars */
body.theme-uncode .mobile-menu-button-light .lines,
body.theme-uncode .mobile-menu-button-light .lines::before,
body.theme-uncode .mobile-menu-button-light .lines::after {
	background: var(--header-text);
}

/* Dropdown submenus drop on white (legible against the blue header) */
body.theme-uncode .menu-container .drop-menu,
body.theme-uncode .menu-container .un-submenu {
	background: var(--panel);
	border: 1px solid var(--border);
	border-top: 2px solid var(--accent);
	box-shadow: var(--shadow-card);
	border-radius: 0 0 6px 6px;
}
body.theme-uncode .menu-container .drop-menu li > a {
	color: var(--text);
}
body.theme-uncode .menu-container .drop-menu li > a:hover,
body.theme-uncode .menu-container .drop-menu li.current-menu-item > a {
	background: var(--accent-soft);
	color: var(--accent-text);
}

/* Menu sticky shadow when scrolled */
body.theme-uncode .menu-sticky-fix .menu-sticky.scrolled .menu-container {
	box-shadow: 0 2px 16px rgba(28,75,130,0.18);
}

/* -------------------------------------------------------
   Buttons — primary CTA gradient, secondary outline, ghost
   ------------------------------------------------------- */

body.theme-uncode .btn:not(.btn-link):not(.btn-text-skin),
body.theme-uncode .vc_btn3:not(.vc_btn3-style-text):not(.vc_btn3-style-outline),
body.theme-uncode button[type="submit"]:not(.btn-link),
body.theme-uncode input[type="submit"]:not(.btn-link),
body.theme-uncode .wp-block-button__link,
body.theme-uncode .woocommerce a.button,
body.theme-uncode .woocommerce button.button,
body.theme-uncode .woocommerce input.button {
	background: var(--grad-button);
	background-color: var(--accent);
	color: #ffffff;
	border: 1px solid #2872c0;
	border-radius: 4px;
	box-shadow: var(--shadow-button);
	transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
body.theme-uncode .btn:not(.btn-link):not(.btn-text-skin):hover,
body.theme-uncode .vc_btn3:not(.vc_btn3-style-text):not(.vc_btn3-style-outline):hover,
body.theme-uncode button[type="submit"]:not(.btn-link):hover,
body.theme-uncode input[type="submit"]:not(.btn-link):hover,
body.theme-uncode .wp-block-button__link:hover,
body.theme-uncode .woocommerce a.button:hover,
body.theme-uncode .woocommerce button.button:hover,
body.theme-uncode .woocommerce input.button:hover {
	filter: brightness(1.06);
	color: #ffffff;
	box-shadow: 0 2px 6px rgba(28,75,130,0.24);
}
body.theme-uncode .btn:not(.btn-link):not(.btn-text-skin):active,
body.theme-uncode .vc_btn3:not(.vc_btn3-style-text):not(.vc_btn3-style-outline):active {
	transform: translateY(1px);
	filter: brightness(0.96);
}

/* Outlined / secondary — ghost on white, fills with soft tint on hover.
   Text uses --accent-text for AA contrast at body size; border can keep
   the brand --accent for the visual atmosphere. */
body.theme-uncode .btn-outline,
body.theme-uncode .vc_btn3-style-outline {
	background: transparent;
	color: var(--accent-text);
	border: 1px solid var(--accent);
	box-shadow: none;
}
body.theme-uncode .btn-outline:hover,
body.theme-uncode .vc_btn3-style-outline:hover {
	background: var(--accent-soft);
	color: var(--accent-text-soft);
	border-color: var(--accent);
}

/* WooCommerce add-to-cart inherits the primary treatment automatically */

/* -------------------------------------------------------
   Form controls
   ------------------------------------------------------- */

body.theme-uncode input[type="text"],
body.theme-uncode input[type="email"],
body.theme-uncode input[type="number"],
body.theme-uncode input[type="search"],
body.theme-uncode input[type="tel"],
body.theme-uncode input[type="url"],
body.theme-uncode input[type="password"],
body.theme-uncode textarea,
body.theme-uncode .form-control {
	background: var(--panel);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 4px;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
body.theme-uncode input[type="text"]:focus,
body.theme-uncode input[type="email"]:focus,
body.theme-uncode input[type="number"]:focus,
body.theme-uncode input[type="search"]:focus,
body.theme-uncode input[type="tel"]:focus,
body.theme-uncode input[type="url"]:focus,
body.theme-uncode input[type="password"]:focus,
body.theme-uncode textarea:focus,
body.theme-uncode .form-control:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--focus-ring);
	outline: none;
}

/* Search overlay — full-screen search activated by the magnifier
   icon. Default Uncode renders this as a slate-dark slab; we keep
   the dark backdrop (it's a focused-attention surface) but bring
   the brand in via gradient + actinic accents. */
body.theme-uncode .overlay-search.style-dark-bg,
body.theme-uncode .overlay-search {
	background: linear-gradient(180deg, #0c2848 0%, #1c3a5e 100%);
}
body.theme-uncode .overlay-search .search-field {
	color: #ffffff;
	border-color: rgba(255,255,255,0.45);
	background: transparent;
	font-family: var(--font-ui);
}
body.theme-uncode .overlay-search .search-field::placeholder {
	color: rgba(255,255,255,0.55);
}
body.theme-uncode .overlay-search .search-field:focus {
	border-color: var(--actinic);
	box-shadow: 0 0 0 3px rgba(90,166,232,0.40);
	outline: none;
}
body.theme-uncode .overlay-search .fa-search3 {
	color: var(--actinic);
}
body.theme-uncode .overlay-search .menu-close-search {
	background: rgba(255,255,255,0.08);
	border-radius: 50%;
	transition: background-color 140ms ease;
}
body.theme-uncode .overlay-search .menu-close-search:hover {
	background: rgba(255,255,255,0.16);
}

/* Mobile offcanvas menu — when the hamburger opens, Uncode renders
   the mobile nav inside the existing menu-container. With our
   header gradient, the dropdown subitems already inherit the white
   panel treatment. We just need to make sure the open state on
   mobile reads as part of the brand, not a slate fallback. */
@media (max-width: 960px) {
	body.theme-uncode .menu-container.menu-mobile-open {
		background: var(--grad-header);
	}
	body.theme-uncode .menu-mobile-default .menu-primary-inner {
		background: var(--grad-header);
		padding: 8px 0;
	}
	body.theme-uncode .menu-mobile-default .menu-primary-inner > li {
		border-top: 1px solid rgba(255,255,255,0.10);
	}
	body.theme-uncode .menu-mobile-default .menu-primary-inner > li:first-child {
		border-top: none;
	}
	body.theme-uncode .menu-mobile-default .menu-primary-inner > li > a {
		color: #ffffff;
		padding: 14px 20px;
		font-weight: 600;
	}
	body.theme-uncode .menu-mobile-default .menu-primary-inner > li > a:hover,
	body.theme-uncode .menu-mobile-default .menu-primary-inner > li > a:focus {
		background: rgba(255,255,255,0.10);
		color: #ffffff;
	}
	/* Subitems (Tools dropdown, Shop dropdown) get a white panel
	   nested inside the blue band — easier scan, clearer hierarchy */
	body.theme-uncode .menu-mobile-default .un-submenu,
	body.theme-uncode .menu-mobile-default .drop-menu {
		background: rgba(255,255,255,0.08);
		border: none;
		margin: 0 12px 8px;
		border-radius: 6px;
		box-shadow: none;
	}
	body.theme-uncode .menu-mobile-default .un-submenu li > a,
	body.theme-uncode .menu-mobile-default .drop-menu li > a {
		color: rgba(255,255,255,0.92);
		padding: 10px 16px;
	}
	body.theme-uncode .menu-mobile-default .un-submenu li > a:hover,
	body.theme-uncode .menu-mobile-default .drop-menu li > a:hover {
		background: rgba(255,255,255,0.12);
		color: #ffffff;
	}
}

/* -------------------------------------------------------
   Surfaces & cards
   Uncode renders panels via .vc_row / .uncol / .uncell containers.
   We add a subtle card style for any container marked .style-light-bg
   that's also tagged with our .rd-card helper class.
   ------------------------------------------------------- */

body.theme-uncode .rd-card,
body.theme-uncode .vc_row.rd-card .row-inner,
body.theme-uncode .uncode-info-panel {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: var(--shadow-card);
}

/* Soft "info" panel — for educational callouts, tips, notes */
body.theme-uncode .rd-panel-info {
	background: var(--accent-soft);
	border: 1px solid rgba(58,142,224,0.30);
	border-left: 3px solid var(--accent);
	border-radius: 6px;
	color: var(--text);
	padding: 14px 18px;
}

/* -------------------------------------------------------
   Segmented toggles (active = blue, inactive = white)
   Use class .rd-toggle on any group of buttons.
   ------------------------------------------------------- */

.rd-toggle {
	display: inline-flex;
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden;
	background: var(--panel);
}
.rd-toggle > button,
.rd-toggle > .rd-toggle__item {
	background: var(--panel);
	color: var(--text);
	border: none;
	padding: 6px 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}
.rd-toggle > button:not(:last-child),
.rd-toggle > .rd-toggle__item:not(:last-child) {
	border-right: 1px solid var(--border);
}
.rd-toggle > button:hover,
.rd-toggle > .rd-toggle__item:hover {
	background: var(--accent-soft);
	color: var(--accent-text);
}
.rd-toggle > button.is-active,
.rd-toggle > .rd-toggle__item.is-active,
.rd-toggle > [aria-pressed="true"] {
	background: var(--accent);
	color: #ffffff;
}

/* -------------------------------------------------------
   WooCommerce surfaces
   ------------------------------------------------------- */

body.theme-uncode .woocommerce span.onsale {
	background: var(--coral);
	color: #ffffff;
	border-radius: 999px;
	font-weight: 600;
	padding: 2px 10px;
	min-height: 0;
	min-width: 0;
	line-height: 1.6;
}
body.theme-uncode .woocommerce-info,
body.theme-uncode .woocommerce-message {
	background: var(--accent-soft);
	border-top-color: var(--accent);
	color: var(--text);
}
body.theme-uncode .woocommerce-info::before,
body.theme-uncode .woocommerce-message::before {
	color: var(--accent);
}
body.theme-uncode .woocommerce-error {
	background: rgba(196,74,74,0.10);
	border-top-color: var(--error);
	color: var(--text);
}
body.theme-uncode .woocommerce-error::before {
	color: var(--error);
}

/* Cart badge in the header — coral accent for "you have items" */
body.theme-uncode .uncode-cart .badge {
	background: var(--coral);
	color: #ffffff;
	border: 1.5px solid #ffffff;
}

/* -------------------------------------------------------
   Misc — borders, dividers, code, tables
   ------------------------------------------------------- */

body.theme-uncode hr,
body.theme-uncode .vc_separator .vc_sep_holder .vc_sep_line {
	border-color: var(--border);
}

body.theme-uncode code,
body.theme-uncode pre {
	background: #f6f9fc;
	color: #2c4256;
	border: 1px solid var(--border);
	border-radius: 4px;
}

body.theme-uncode table th {
	background: var(--accent-soft);
	color: var(--accent);
}

/* Text muted utility — matches "Dudes" in the wordmark */
body.theme-uncode .text-muted,
body.theme-uncode .post-meta,
body.theme-uncode .meta {
	color: var(--muted);
}

/* Override the legacy `.post-info{color:white}` hack in wp-custom-css —
   only force white inside dark-skin sections where it makes sense. */
body.theme-uncode .post-info {
	color: var(--muted);
}
body.theme-uncode .style-dark .post-info,
body.theme-uncode .style-dark-bg .post-info {
	color: rgba(255,255,255,0.85);
}
body.theme-uncode .post-info a:link,
body.theme-uncode .post-info a:visited {
	color: var(--accent);
}
body.theme-uncode .style-dark .post-info a:link,
body.theme-uncode .style-dark .post-info a:visited {
	color: var(--actinic);
}


/* ============================================================
   assets/css/brand-hero.css
   ============================================================ */
/* =================================================================
   ReefDudes — Hero
   The live homepage uses TWO separate Visual Composer rows for the
   hero (one tablet/mobile-hidden, one desktop-hidden). This file
   styles a single .rd-hero block that replaces both. The Visual
   Composer markup that pairs with this is delivered separately in
   /docs/homepage-vc.html for you to paste into page-id-308.

   In the meantime, this file ALSO patches the existing dual-row
   layout so it reads cleanly until you swap to the single block.
   ================================================================= */

/* ----- New single-row hero (preferred) ---------------------------- */

.rd-hero {
	position: relative;
	overflow: hidden;
	min-height: clamp(420px, 60vh, 720px);
	display: flex;
	align-items: center;
	color: #ffffff;
	background-color: #1c3344;
}

.rd-hero__bg {
	position: absolute;
	inset: 0;
	background-position: center 30%;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 0;
}

/* -----------------------------------------------------------------
   Subtle bubble atmosphere — 8 bubbles drifting upward at different
   speeds and starting positions. Sits above the photo veil but below
   the headline content. Non-literal: the bubbles are small and slow
   enough to read as "atmosphere" not "overlay graphic". Opacity stays
   low so the photo carries the visual weight.
   pointer-events:none keeps them transparent to clicks.
   ----------------------------------------------------------------- */

.rd-hero__bubbles {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.rd-bubble {
	position: absolute;
	bottom: -80px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 35% 35%,
		rgba(255,255,255,0.55) 0%,
		rgba(180, 220, 255, 0.20) 50%,
		rgba(120, 180, 230, 0.05) 80%
	);
	box-shadow: inset -1px -1px 2px rgba(255,255,255,0.35);
	opacity: 0;
	will-change: transform, opacity;
	animation: rd-bubble-rise linear infinite;
}

@keyframes rd-bubble-rise {
	0%   { transform: translate3d(0, 0, 0) scale(0.85); opacity: 0; }
	8%   { opacity: 0.45; }
	50%  { transform: translate3d(8px, -45vh, 0) scale(0.95); opacity: 0.55; }
	92%  { opacity: 0.30; }
	100% { transform: translate3d(-4px, -110vh, 0) scale(1.05); opacity: 0; }
}

/* Distribute bubbles across the hero — varied size, position, speed,
   delay so they never form a regular pattern. Small numerical
   variation per bubble keeps it alive without looking choreographed. */
.rd-bubble--1 { left:  8%; width: 10px; height: 10px; animation-duration: 14s; animation-delay: 0s;    }
.rd-bubble--2 { left: 18%; width: 18px; height: 18px; animation-duration: 18s; animation-delay: 3.2s;  }
.rd-bubble--3 { left: 28%; width:  8px; height:  8px; animation-duration: 11s; animation-delay: 6.5s;  }
.rd-bubble--4 { left: 42%; width: 12px; height: 12px; animation-duration: 16s; animation-delay: 1.8s;  }
.rd-bubble--5 { left: 58%; width: 22px; height: 22px; animation-duration: 21s; animation-delay: 8.0s;  }
.rd-bubble--6 { left: 72%; width:  9px; height:  9px; animation-duration: 13s; animation-delay: 4.6s;  }
.rd-bubble--7 { left: 84%; width: 15px; height: 15px; animation-duration: 17s; animation-delay: 10.5s; }
.rd-bubble--8 { left: 92%; width: 11px; height: 11px; animation-duration: 15s; animation-delay: 2.4s;  }

@media (prefers-reduced-motion: reduce) {
	.rd-bubble { animation: none; opacity: 0; }
}

/* Tablet/small-laptop crop: at narrower widths the diagonal scrim
   covers most of the visible Mandarin. Shift the bg-position right
   so the fish peeks into frame on the right side of the headline. */
@media (max-width: 900px) {
	.rd-hero__bg {
		background-position: 75% 35%;
	}
}

/* Mobile: pull the fish further right and slightly higher so it
   doesn't get sliced by the CTA buttons. */
@media (max-width: 600px) {
	.rd-hero__bg {
		background-position: 80% 28%;
	}
}

/* Stronger layered veil — the previous version was too subtle.
   The new mix:
   1. Vertical edge fades (top and bottom) to anchor the viewport
   2. A heavy left-side gradient that creates a "reading wall" the
      headline lives against. Hugs the lower-left water/shadow zone
      of the Mandarin photo and extends up the full hero so the type
      sits on a deliberately dark backdrop, not random photo pixels.
   The left edge is dark enough to read as a deliberate composition
   choice ("photo runs to the right of a colored panel"), not a
   photographer mistake. */
.rd-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(12,40,72,0.55) 0%, rgba(12,40,72,0.00) 28%),
		linear-gradient(180deg, rgba(0,0,0,0.00) 50%, rgba(12,40,72,0.65) 100%),
		linear-gradient(95deg, rgba(8,28,55,0.78) 0%, rgba(8,28,55,0.55) 25%, rgba(8,28,55,0.20) 48%, rgba(8,28,55,0.00) 65%);
	z-index: 1;
	pointer-events: none;
}

/* On tablet/mobile the diagonal scrim eats too much photo. Switch to
   a vertical-only scrim that anchors the type but leaves the right
   half of the frame open for the fish. */
@media (max-width: 900px) {
	.rd-hero::after {
		background:
			linear-gradient(180deg, rgba(12,40,72,0.65) 0%, rgba(12,40,72,0.20) 50%, rgba(12,40,72,0.55) 100%);
	}
}

.rd-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(48px, 9vw, 120px) clamp(20px, 5vw, 48px);
}

.rd-hero__eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff;
	background: rgba(58,142,224,0.65);
	border: 1px solid rgba(255,255,255,0.45);
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: clamp(16px, 2vw, 24px);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 2px 8px rgba(8,28,55,0.30);
	text-shadow: 0 1px 1px rgba(8,28,55,0.55);
}

/* Body-prefixed so we win the specificity battle against
   `body.theme-uncode h1 { color: var(--text); }` in brand-typography
   — that rule sets every heading to the dark navy ink token, which on
   the photo hero rendered "Making" and "Easy" in dark teal and made
   them nearly invisible. The .rd-accent ("Reefing") rule wins by
   accident because its selector has two classes; the rest of the
   title needed the same treatment. */
body.theme-uncode .rd-hero__title {
	font-size: clamp(2.6rem, 8vw, 6rem);
	line-height: 0.95;
	font-weight: 900;
	letter-spacing: -0.035em;
	margin: 0 0 clamp(14px, 1.8vw, 24px);
	color: #ffffff;
	text-wrap: balance;
	/* Three-layer shadow stack:
	   1. Tight 1px shadow → crisp letter edges on bright fish patterns
	   2. Mid 4px shadow → physical lift, type feels embossed onto the photo
	   3. Wide 28px halo → atmospheric anchor, ties type to the dark scrim */
	text-shadow:
		0 1px 1px rgba(8,28,55,0.85),
		0 2px 4px rgba(8,28,55,0.65),
		0 6px 28px rgba(8,28,55,0.55);
}

/* "Reefing" — the eye-grabber. Brighter than --actinic with a
   restrained outer glow. Previously was bright enough to outshout
   the Tools grid below; reduced ~30% so the page hierarchy is
   "headline → tools" rather than "headline → blank".

   Set in Playfair Display italic — the brand's reserved editorial
   face. Poppins 900 around it ("Making" / "Easy") provides the
   weight contrast; the serif italic provides the voice. This is
   the single homepage moment that uses the display face, so the
   typographic dual-voice of the brand actually shows up to a
   first-time visitor instead of waiting for an editorial post. */
.rd-hero__title .rd-accent {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 700;
	color: #8ec5f5;
	/* Italic Playfair has thin diagonal strokes — the previous inner
	   glow (14px / 28px) muddied them on the photo. Trade the inner
	   glow for a slightly stronger 2-layer dark shadow that gives the
	   thin strokes legibility, and keep the wide atmospheric anchor. */
	text-shadow:
		0 1px 2px rgba(8,28,55,0.90),
		0 2px 6px rgba(8,28,55,0.70),
		0 6px 28px rgba(8,28,55,0.55);
}

.rd-hero__sub {
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	line-height: 1.5;
	max-width: 38ch;
	color: rgba(255,255,255,0.95);
	margin: 0 0 clamp(24px, 3vw, 36px);
	text-shadow: 0 1px 2px rgba(12,40,72,0.45);
}

.rd-hero__cta {
	display: inline-flex;
	gap: 12px;
	flex-wrap: wrap;
}

.rd-hero__cta .rd-btn-primary {
	background: var(--grad-button);
	color: #ffffff;
	border: 1px solid #2872c0;
	border-radius: 8px;
	padding: 14px 26px;
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.20) inset,
		0 4px 14px rgba(28,75,130,0.35);
	transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.rd-hero__cta .rd-btn-primary:hover {
	filter: brightness(1.08);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow:
		0 1px 0 rgba(255,255,255,0.30) inset,
		0 6px 20px rgba(28,75,130,0.45);
}
.rd-hero__cta .rd-btn-primary:active {
	transform: translateY(1px);
}

.rd-hero__cta .rd-btn-ghost {
	background: rgba(255,255,255,0.12);
	color: #ffffff;
	border: 1px solid rgba(255,255,255,0.55);
	border-radius: 8px;
	padding: 14px 26px;
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color 140ms ease, transform 140ms ease;
}
.rd-hero__cta .rd-btn-ghost:hover {
	background: rgba(255,255,255,0.22);
	color: #ffffff;
	transform: translateY(-1px);
}

/* Scroll-down cue — invites the eye toward the tools grid.
   Softer than the previous version so it complements the heavier
   headline rather than competing with it. */
.rd-hero__scroll-cue {
	position: absolute;
	bottom: clamp(18px, 3vw, 32px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: 22px;
	height: 32px;
	border: 1.5px solid rgba(255,255,255,0.40);
	border-radius: 11px;
	pointer-events: none;
	opacity: 0.75;
}
.rd-hero__scroll-cue::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 50%;
	transform: translateX(-50%);
	width: 3px;
	height: 7px;
	background: rgba(255,255,255,0.70);
	border-radius: 2px;
	animation: rd-hero-scroll-bounce 2.2s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes rd-hero-scroll-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
	60%      { transform: translateX(-50%) translateY(9px); opacity: 0; }
	61%      { transform: translateX(-50%) translateY(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.rd-hero__scroll-cue::after { animation: none; }
}

/* ----- Patch for the current dual-row hero (interim) -------------- */
/* Until you swap in the .rd-hero block above, fix the worst issue:
   the "tablet-hidden mobile-hidden" desktop hero row uses an inline
   95px font-size and white color baked into the page. The 95px is
   too aggressive on smaller laptops. Override.
   The selectors target the existing #row-unique-0 and #row-unique-1
   patterns from page-id-308. */

@media (max-width: 1100px) {
	.theme-uncode #row-unique-0 .h2 span {
		font-size: clamp(2.6rem, 8vw, 5.9rem) !important;
		line-height: 1.05 !important;
	}
}

/* Mobile fallback row gets the same treatment */
.theme-uncode #row-unique-1 p span {
	font-size: clamp(2.4rem, 9vw, 4rem) !important;
	line-height: 1.05 !important;
}

/* NOTE: an earlier version of this file added a brand-tinted gradient
   veil to `#row-unique-0 .row-background::after` and forced its
   parent to `position: relative` to anchor the overlay. That broke
   Uncode's own `.row-background.background-element { position: absolute;
   inset: 0 }` and collapsed the row to 0 height — which made the
   Mandarin goby banner image disappear. Removed.

   The .rd-hero block (top of this file) has the gradient veil baked
   into its own ::after, so the new markup keeps the legibility win
   without touching Uncode's positioning. Once page-id-308 is swapped
   to use .rd-hero, this whole interim section can be deleted. */


/* ============================================================
   assets/css/brand-caustics.css
   ============================================================ */
/* =================================================================
   ReefDudes — Hero caustics + view transitions
   Pairs with brand-caustics.js. The <canvas> sits between the photo
   (.rd-hero__bg, z=0) and the bubbles (.rd-hero__bubbles, z=1).
   `mix-blend-mode: screen` lifts the photo's highlights with the
   shader's bright bands so the effect reads as "sunlight filtering
   through the surface", not "blue overlay".

   Also opts the site into cross-document View Transitions so the
   tool-card → tool-page navigation morphs the icon and title via
   the View Transitions API (Chrome/Edge/Safari). Browsers without
   support fall back to a normal navigation — no error, no flash.
   ================================================================= */

/* ----- Caustics canvas ------------------------------------------- */

.rd-hero__caustics {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	mix-blend-mode: screen;
	opacity: 0.55;
}

/* On reduced-motion, JS bails before touching the canvas; this
   ensures the empty canvas takes no visual space if it ever ships
   un-initialized. */
@media (prefers-reduced-motion: reduce) {
	.rd-hero__caustics { display: none; }
}

/* ----- Cross-document View Transitions --------------------------- */

@view-transition {
	navigation: auto;
}

/* The shared elements. Each tool card carries `view-transition-name`
   on its icon and title so the browser can find the matching pair
   on the destination page and morph between them. The names are
   slug-keyed so each tool can have its own transition without
   colliding. The destination page sets the same name on its header
   icon and title (see brand-tool-page.css). */

.rd-tool-card--reef-calculator       .rd-tool-card__icon  { view-transition-name: rd-tool-icon-reef-calculator; }
.rd-tool-card--reef-calculator       .rd-tool-card__title { view-transition-name: rd-tool-title-reef-calculator; }
.rd-tool-card--par-estimator         .rd-tool-card__icon  { view-transition-name: rd-tool-icon-par-estimator; }
.rd-tool-card--par-estimator         .rd-tool-card__title { view-transition-name: rd-tool-title-par-estimator; }
.rd-tool-card--reef-stocking-planner .rd-tool-card__icon  { view-transition-name: rd-tool-icon-reef-stocking-planner; }
.rd-tool-card--reef-stocking-planner .rd-tool-card__title { view-transition-name: rd-tool-title-reef-stocking-planner; }
.rd-tool-card--dino-id               .rd-tool-card__icon  { view-transition-name: rd-tool-icon-dino-id; }
.rd-tool-card--dino-id               .rd-tool-card__title { view-transition-name: rd-tool-title-dino-id; }
.rd-tool-card--pest-id               .rd-tool-card__icon  { view-transition-name: rd-tool-icon-pest-id; }
.rd-tool-card--pest-id               .rd-tool-card__title { view-transition-name: rd-tool-title-pest-id; }
.rd-tool-card--icp-analyzer          .rd-tool-card__icon  { view-transition-name: rd-tool-icon-icp-analyzer; }
.rd-tool-card--icp-analyzer          .rd-tool-card__title { view-transition-name: rd-tool-title-icp-analyzer; }
.rd-tool-card--neptune-apex-programmer .rd-tool-card__icon  { view-transition-name: rd-tool-icon-neptune-apex-programmer; }
.rd-tool-card--neptune-apex-programmer .rd-tool-card__title { view-transition-name: rd-tool-title-neptune-apex-programmer; }

/* Tune the morph timing — default 250ms feels snappy but cheap. 480ms
   with our standard ease-out-quart reads as deliberate. */
::view-transition-old(rd-tool-icon-reef-calculator),
::view-transition-new(rd-tool-icon-reef-calculator),
::view-transition-old(rd-tool-title-reef-calculator),
::view-transition-new(rd-tool-title-reef-calculator),
::view-transition-old(rd-tool-icon-par-estimator),
::view-transition-new(rd-tool-icon-par-estimator),
::view-transition-old(rd-tool-title-par-estimator),
::view-transition-new(rd-tool-title-par-estimator),
::view-transition-old(rd-tool-icon-reef-stocking-planner),
::view-transition-new(rd-tool-icon-reef-stocking-planner),
::view-transition-old(rd-tool-title-reef-stocking-planner),
::view-transition-new(rd-tool-title-reef-stocking-planner),
::view-transition-old(rd-tool-icon-dino-id),
::view-transition-new(rd-tool-icon-dino-id),
::view-transition-old(rd-tool-title-dino-id),
::view-transition-new(rd-tool-title-dino-id),
::view-transition-old(rd-tool-icon-pest-id),
::view-transition-new(rd-tool-icon-pest-id),
::view-transition-old(rd-tool-title-pest-id),
::view-transition-new(rd-tool-title-pest-id),
::view-transition-old(rd-tool-icon-icp-analyzer),
::view-transition-new(rd-tool-icon-icp-analyzer),
::view-transition-old(rd-tool-title-icp-analyzer),
::view-transition-new(rd-tool-title-icp-analyzer),
::view-transition-old(rd-tool-icon-neptune-apex-programmer),
::view-transition-new(rd-tool-icon-neptune-apex-programmer),
::view-transition-old(rd-tool-title-neptune-apex-programmer),
::view-transition-new(rd-tool-title-neptune-apex-programmer) {
	animation-duration: 480ms;
	animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

/* The default root transition is a hard crossfade. Soften it slightly
   with a faster, lighter blend so the shared elements own the moment. */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 280ms;
	animation-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}


/* ============================================================
   assets/css/brand-tools-grid.css
   ============================================================ */
/* =================================================================
   ReefDudes — Tools Grid (homepage)
   Pairs with the Visual Composer block in
   /docs/homepage-vc.html. Six tool cards on the brand wash.
   ================================================================= */

.rd-tools-section {
	padding: clamp(48px, 8vw, 96px) 20px;
	background: #ffffff;
	position: relative;
}
/* Subtle top border that fades from accent-soft to transparent —
   reads as a gentle handoff from the hero photo to white space. */
.rd-tools-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--accent-soft) 50%, transparent 100%);
	pointer-events: none;
}

.rd-tools-section__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.rd-tools-section__head {
	text-align: center;
	margin-bottom: clamp(28px, 4vw, 48px);
}

.rd-tools-section__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-text);
	margin-bottom: 12px;
	position: relative;
	padding: 0 0 0 28px;
}
/* Default eyebrow rule (solid 20×2px line). Override by adding
   `.rd-eyebrow--wave` for the wave-glyph variant — see brand-motif.css. */
.rd-tools-section__eyebrow:not(.rd-eyebrow--wave)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 2px;
	background: var(--accent);
	border-radius: 2px;
}

.rd-tools-section__title {
	font-size: clamp(1.85rem, 4.2vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	font-weight: 800;
	color: var(--text);
	margin: 0 0 10px;
}

.rd-tools-section__sub {
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	color: var(--text-2);
	max-width: 56ch;
	margin: 0 auto;
}

/* Beginner entry-point pill below the Tools heading.
   Subtle — meant to catch only people who need it, not steal
   attention from the six tool cards below.

   Color: --accent-text (#1f5da0, ~6.3:1 on --accent-soft) instead
   of --accent so contrast meets WCAG AA at this body-size weight.
   Padding: 10px 16px → ≥40px clickable area on mobile. */
.rd-tools-section__newbie {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: clamp(14px, 2vw, 20px);
	padding: 10px 18px;
	background: var(--accent-soft);
	color: var(--accent-text);
	font-size: 0.9375rem;
	font-weight: 600;
	border-radius: 999px;
	border: 1px solid rgba(58, 142, 224, 0.35);
	text-decoration: none;
	transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.rd-tools-section__newbie:hover,
.rd-tools-section__newbie:focus {
	background: rgba(58, 142, 224, 0.16);
	color: var(--accent-text-soft);
	text-decoration: none;
	transform: translateY(-1px);
}
.rd-tools-section__newbie-arrow {
	display: inline-block;
	transition: transform 140ms ease;
}
.rd-tools-section__newbie:hover .rd-tools-section__newbie-arrow {
	transform: translateX(3px);
}

/* Grid

   Six tools, capped at 3 columns on wide screens. The previous
   `repeat(auto-fill, minmax(260px, 1fr))` allowed 4-6 columns on
   wide displays — at 1680px+ all six cards laid out in a single
   thin row, collapsing each tool's footprint and reducing scanability.
   Now: 1 col (mobile) → 2 cols (≥640px) → 3 cols (≥960px). Each
   card gets a fair share at every breakpoint. */
.rd-tools-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
@media (min-width: 640px) {
	.rd-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
	.rd-tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rd-tool-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 24px 22px;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow:
		0 1px 2px rgba(28,75,130,0.04),
		0 8px 24px rgba(28,75,130,0.06);
	color: var(--text);
	text-decoration: none;
	transition: transform 180ms cubic-bezier(0.4,0,0.2,1), box-shadow 180ms ease, border-color 180ms ease;
	position: relative;
	overflow: hidden;
}
.rd-tool-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--grad-button);
	opacity: 0;
	transition: opacity 160ms ease;
}
.rd-tool-card:hover {
	transform: translateY(-3px);
	border-color: var(--accent);
	box-shadow:
		0 2px 4px rgba(28,75,130,0.06),
		0 14px 36px rgba(28,75,130,0.18);
	color: var(--text);
}
.rd-tool-card:hover::before {
	opacity: 1;
}
.rd-tool-card:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-card);
}

.rd-tool-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--grad-button);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-bottom: 8px;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.25) inset,
		0 3px 10px rgba(28,75,130,0.20);
}

/* Bespoke inline-SVG icons (replaces Font Awesome). Stroke + fill
   inherit currentColor from the icon tile (#fff). 24×24 sits comfortably
   inside the 48×48 tile with breathing room. */
.rd-tool-card__icon .rd-svgicon {
	width: 28px;
	height: 28px;
	color: #ffffff;
	display: block;
	overflow: visible;
}

/* On hover the card already lifts -3px, gains an accent border, deepens
   its shadow, and reveals the top stripe — four coordinated motions that
   together read as one "lift". Adding a static scale+rotate to the icon
   tile *plus* a wiggle keyframe to the SVG inside stacked two more
   motions on top of those, and the cumulative effect read as jumpy.
   We keep the wiggle (the personality beat) and drop the static tile
   transform — the wiggle alone makes the icon feel alive without
   competing with the card-level lift. */
.rd-tool-card:hover .rd-tool-card__icon .rd-svgicon {
	animation: rd-icon-wiggle 520ms cubic-bezier(0.4,0,0.2,1);
}
@keyframes rd-icon-wiggle {
	0%   { transform: rotate(0); }
	30%  { transform: rotate(3deg); }
	60%  { transform: rotate(-2deg); }
	100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
	.rd-tool-card:hover .rd-tool-card__icon .rd-svgicon { animation: none; }
}

.rd-tool-card__title {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--text);
	margin: 0;
}

.rd-tool-card__desc {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--text-2);
	margin: 0;
	flex: 1;
}

.rd-tool-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--accent-text);
	margin-top: 6px;
}
.rd-tool-card__cta::after {
	content: "→";
	transition: transform 160ms ease;
}
.rd-tool-card:hover .rd-tool-card__cta::after {
	transform: translateX(3px);
}

/* "New" badge — uses the coral accent (the 10% slot in 60/30/10) */
.rd-tool-card__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgba(255,126,98,0.18);
	color: #a3422d;
	border: 1px solid rgba(255,126,98,0.45);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
}


/* ============================================================
   assets/css/brand-tool-page.css
   ============================================================ */
/* =================================================================
   ReefDudes — Tool page chrome
   Branded shell that wraps each tool's actual UI. The tool itself
   (e.g. the Reef Chemistry Calculator plugin's [reef_calculator]
   shortcode) owns the inside of .rd-tool-body.

   The page header (.rd-tool-header) intentionally MIRRORS the homepage
   tool card structure: same icon tile, same title, same gradient stripe.
   That mirror is what makes the cross-document View Transitions API
   morph cleanly — the browser sees matching `view-transition-name`
   pairs and tweens them.

   `view-transition-name` declarations on the homepage side live in
   brand-caustics.css next to the other VT setup; the destination-side
   declarations are at the bottom of this file.
   ================================================================= */

/* ----- Page shell ------------------------------------------------ */

.rd-tool-page {
	background: #ffffff;
	min-height: 60vh;
	padding: 0 0 clamp(48px, 8vw, 96px);
}

/* ----- Header (the morph target) -------------------------------- */

.rd-tool-header {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #f5f9fd 0%, #e8f1fb 100%);
	padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 48px) clamp(40px, 6vw, 64px);
	border-bottom: 1px solid var(--border, #d8e1eb);
}
.rd-tool-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--grad-button);
}

.rd-tool-header__inner {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: clamp(16px, 3vw, 28px);
}

/* This icon is the View Transitions counterpart of the homepage
   tool card's .rd-tool-card__icon. Sized larger (88px vs 48px) so
   the morph reads as "card grew into header", not "card jumped". */
.rd-tool-header__icon {
	flex: 0 0 auto;
	width: clamp(64px, 8vw, 88px);
	height: clamp(64px, 8vw, 88px);
	border-radius: clamp(18px, 2vw, 22px);
	background: var(--grad-button);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.25) inset,
		0 6px 18px rgba(28, 75, 130, 0.25);
}
.rd-tool-header__icon .rd-svgicon {
	width: clamp(36px, 4.5vw, 50px);
	height: clamp(36px, 4.5vw, 50px);
	display: block;
}

.rd-tool-header__copy {
	flex: 1;
	min-width: 0;
}

/* Back-link + eyebrow share one row above the title. The wrapper is
   robust against any context-specific anchor styles (e.g. when this
   header is injected inside .entry-content on a real WP page —
   Uncode's content-area styles would otherwise turn the back-link
   into a block-level element and stack the two on separate lines). */
.rd-tool-header__topline {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.rd-tool-header__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-text);
}

.rd-tool-header__title {
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--text);
	margin: 0 0 12px;
}

.rd-tool-header__sub {
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.55;
	color: var(--text-2);
	max-width: 60ch;
	margin: 0;
}

/* ----- Body ------------------------------------------------------ */

/* Default 2-column variant, kept for tools that supply a sidebar.
   .rd-tool-body--full collapses to a single full-width column for
   tools (like the Reef Chemistry Calculator plugin) that bring
   their own complete UI and don't want a side rail. */
.rd-tool-body {
	max-width: 1080px;
	margin: 0 auto;
	padding: clamp(32px, 5vw, 56px) clamp(20px, 5vw, 48px) 0;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 36px);
}
@media (max-width: 760px) {
	.rd-tool-body { grid-template-columns: 1fr; }
}
.rd-tool-body--full {
	grid-template-columns: 1fr;
	max-width: 1120px; /* slight breathing room past the plugin's 1080px max */
}

/* Plugin-owned UI lives directly inside .rd-tool-body. Trim its top
   margin since the .rd-tool-header sits flush above and the plugin's
   own outer card already has padding/shadow. */
.rd-tool-body--full > .reef-calc-wrapper {
	margin-top: 0;
}

/* ----- "Back to all tools" link --------------------------------- */

.rd-tool-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--accent-text);
	text-decoration: none;
	padding: 6px 0;
}
/* Defensive: when the header is injected inside .entry-content on a
   real WP page, Uncode's content styles can underline anchors and turn
   them block-level. Keep the back-link inline regardless of context. */
.rd-tool-page--injected-header .rd-tool-back {
	border-bottom: 0;
	text-decoration: none;
}
.rd-tool-back:hover {
	color: var(--accent-text-soft);
	text-decoration: underline;
}
.rd-tool-back::before {
	content: "←";
	display: inline-block;
	transition: transform 140ms ease;
}
.rd-tool-back:hover::before {
	transform: translateX(-3px);
}

/* ----- Plugin-missing fallback ---------------------------------- */

.rd-tool-fallback {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px;
	background: var(--bg-2, #e8f0f9);
	border: 1px solid var(--border, #d8e1eb);
	border-radius: 12px;
	color: var(--text-2);
	font-size: 0.9375rem;
	line-height: 1.5;
	text-align: center;
}

/* ----- Cross-tool footer (back to grid) ------------------------- */

.rd-tool-footer-cta {
	max-width: 1080px;
	margin: clamp(48px, 6vw, 72px) auto 0;
	padding: 0 clamp(20px, 5vw, 48px);
	text-align: center;
}
.rd-tool-footer-cta__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 12px;
}
.rd-tool-footer-cta__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--accent-text);
	font-weight: 600;
	text-decoration: none;
}
.rd-tool-footer-cta__link:hover {
	color: var(--accent-text-soft);
	text-decoration: underline;
}

/* ----- View Transitions destination side ------------------------ */
/* Each tool page sets `view-transition-name` on its header icon and
   title to match the homepage tool card. The body class is added by
   reefdudes_tool_page_body_class() so only the active tool page
   declares the name (multiple destinations with the same name would
   collide and cancel the morph). Names are kept in sync with the
   homepage-side declarations in brand-caustics.css. */

.rd-tool-page--reef-calculator       .rd-tool-header__icon  { view-transition-name: rd-tool-icon-reef-calculator; }
.rd-tool-page--reef-calculator       .rd-tool-header__title { view-transition-name: rd-tool-title-reef-calculator; }
.rd-tool-page--par-estimator         .rd-tool-header__icon  { view-transition-name: rd-tool-icon-par-estimator; }
.rd-tool-page--par-estimator         .rd-tool-header__title { view-transition-name: rd-tool-title-par-estimator; }
.rd-tool-page--reef-stocking-planner .rd-tool-header__icon  { view-transition-name: rd-tool-icon-reef-stocking-planner; }
.rd-tool-page--reef-stocking-planner .rd-tool-header__title { view-transition-name: rd-tool-title-reef-stocking-planner; }
.rd-tool-page--dino-id               .rd-tool-header__icon  { view-transition-name: rd-tool-icon-dino-id; }
.rd-tool-page--dino-id               .rd-tool-header__title { view-transition-name: rd-tool-title-dino-id; }
.rd-tool-page--pest-id               .rd-tool-header__icon  { view-transition-name: rd-tool-icon-pest-id; }
.rd-tool-page--pest-id               .rd-tool-header__title { view-transition-name: rd-tool-title-pest-id; }
.rd-tool-page--icp-analyzer          .rd-tool-header__icon  { view-transition-name: rd-tool-icon-icp-analyzer; }
.rd-tool-page--icp-analyzer          .rd-tool-header__title { view-transition-name: rd-tool-title-icp-analyzer; }
.rd-tool-page--neptune-apex-programmer .rd-tool-header__icon  { view-transition-name: rd-tool-icon-neptune-apex-programmer; }
.rd-tool-page--neptune-apex-programmer .rd-tool-header__title { view-transition-name: rd-tool-title-neptune-apex-programmer; }

/* ----- Injected-header pages -------------------------------------
   Most of the work is done in PHP: reefdudes_strip_uncode_chrome_for_
   injected_header_pages() overrides the post-meta keys that drive
   Uncode's page-header banner, breadcrumb row, and in-content title
   so they never render. These CSS rules are belt-and-suspenders for
   patterns the page author might emit inside post_content itself
   (a leading <h1>, a manual breadcrumb block, etc.) that PHP can't
   reach. Only fires when .rd-tool-page--injected-header is on body. */

/* If post_content begins with the page's own title as a plain h1,
   suppress it — our injected header above already provides the title. */
.rd-tool-page--injected-header .entry-content > h1:first-child,
.rd-tool-page--injected-header .post-content > h1:first-child {
	display: none;
}

/* The injected .rd-tool-header lands at the very top of post_content.
   Strip any default top margin so it aligns flush with the menu strip
   the same way it does on virtual-route tool pages. */
.rd-tool-page--injected-header .rd-tool-header {
	margin-top: 0;
}

/* The injected header is full-bleed by design (has its own gradient
   background and padding). When it lands inside Uncode's content-area
   container with side padding, that padding squeezes the gradient.
   Use negative margins to break out to the row's edges, scoped to
   the injected case so virtual-route pages aren't affected. */
.rd-tool-page--injected-header .rd-tool-header {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ----- Preview body (tools without a shipping calculator) ------- */
/* Two-column layout that mirrors the calculator page rhythm: a primary
   "what it'll do" card on the left, a sidebar of cross-links on the
   right. Collapses to a single column under 760px. */

.rd-tool-preview-grid {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 32px);
}
@media (max-width: 760px) {
	.rd-tool-preview-grid { grid-template-columns: 1fr; }
}

.rd-tool-preview {
	background: var(--panel, #ffffff);
	border: 1px solid var(--border, #d8e1eb);
	border-radius: 16px;
	padding: clamp(24px, 3.5vw, 36px);
	box-shadow:
		0 1px 2px rgba(28, 75, 130, 0.04),
		0 8px 24px rgba(28, 75, 130, 0.06);
}

.rd-tool-preview__pill {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-text);
	background: var(--accent-soft);
	border: 1px solid rgba(58, 142, 224, 0.32);
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 16px;
}

.rd-tool-preview__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	font-weight: 800;
	color: var(--text);
	margin: 0 0 10px;
}

.rd-tool-preview__lede {
	font-size: clamp(1rem, 1.4vw, 1.0625rem);
	line-height: 1.55;
	color: var(--text-2);
	margin: 0 0 24px;
}

.rd-tool-preview__features {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rd-tool-preview__feature {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.rd-tool-preview__check {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	color: var(--accent);
	margin-top: 2px;
}

.rd-tool-preview__feature-copy { flex: 1; }

.rd-tool-preview__feature-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 3px;
	letter-spacing: -0.005em;
}

.rd-tool-preview__feature-desc {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--text-2);
	margin: 0;
}

.rd-tool-preview__cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	padding-top: 8px;
	border-top: 1px solid var(--bg-2, #e8f0f9);
	padding-top: 22px;
}

/* Re-use .rd-btn-primary from brand-uncode.css (same as hero CTA). */

.rd-tool-preview__sec {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--accent-text);
	text-decoration: none;
}
.rd-tool-preview__sec:hover {
	color: var(--accent-text-soft);
	text-decoration: underline;
}

/* Sidebar cross-link cards */

.rd-tool-preview-aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rd-tool-preview-side-card {
	background: linear-gradient(180deg, var(--bg, #f5f9fd) 0%, var(--bg-2, #e8f0f9) 100%);
	border: 1px solid var(--border, #d8e1eb);
	border-radius: 14px;
	padding: 22px 24px;
}

.rd-tool-preview-side-card__title {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent-text);
	margin: 0 0 10px;
}

.rd-tool-preview-side-card__copy {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--text-2);
	margin: 0 0 14px;
}

.rd-tool-preview-side-card__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--accent-text);
	text-decoration: none;
}
.rd-tool-preview-side-card__link:hover {
	color: var(--accent-text-soft);
	text-decoration: underline;
}


/* ============================================================
   assets/css/brand-support-page.css
   ============================================================ */
/* =================================================================
   ReefDudes — Support page
   Renders via page-support.php. Two sections styled here:
     rd-page-hero   light "personal letter" hero with the Patreon CTA
     rd-affiliates  partner-link card grid grouped by country tier

   Design intent: bolder than rd-help-strip, calmer than rd-hero.
   Editorial Playfair on the H1 with a coral underline curl beneath
   the brand-name word, and an asymmetric two-column grid that lets
   the octopus illustration breathe instead of floating into copy.
   ================================================================= */

/* -----------------------------------------------------------------
   rd-page-hero — light hero, dark text, illustration on the right.
   Reusable: same component will fit /ask, /contact, etc.
   ----------------------------------------------------------------- */

.rd-page-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(
		135deg,
		var(--accent-soft) 0%,
		rgba(232, 241, 251, 0.55) 55%,
		var(--bg) 100%
	);
	padding: clamp(28px, 4vw, 48px) 20px clamp(32px, 4.5vw, 56px);
	border-bottom: 1px solid var(--border);
}

/* Soft brand-tinted halo behind the illustration. Decorative only.
   --accent-soft is already AA-safe as a tint; the radial keeps it
   well below text contrast so the lede can sit on top if it wraps. */
.rd-page-hero::before {
	content: "";
	position: absolute;
	top: -10%;
	right: -8%;
	width: 60%;
	height: 140%;
	background: radial-gradient(
		ellipse at 60% 50%,
		var(--accent-soft) 0%,
		rgba(232, 241, 251, 0) 65%
	);
	pointer-events: none;
	z-index: 0;
}

.rd-page-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 64px);
	align-items: center;
}

@media (max-width: 720px) {
	.rd-page-hero__inner {
		grid-template-columns: 1fr;
		text-align: left;
	}
}

.rd-page-hero__copy {
	min-width: 0; /* allow grid item to shrink so long words wrap */
}

/* Eyebrow uses the existing wave glyph for brand continuity. */
.rd-page-hero__eyebrow {
	display: inline-block;
	margin-bottom: clamp(12px, 2vw, 18px);
}

/* H1 — editorial Playfair, dramatic scale jump from the eyebrow.
   line-height 0.98 lets the word stack tightly so the headline
   reads as one composed mark instead of three lines of text. */
.rd-page-hero__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.25rem, 5.5vw, 4rem);
	line-height: 1.02;
	letter-spacing: -0.015em;
	color: var(--text);
	margin: 0 0 clamp(14px, 2.4vw, 22px);
	text-wrap: balance;
}

/* The brand name word inside the title — Playfair italic in the
   logo-cyan ink. One bold typographic gesture instead of all-caps,
   gradient text, or three different fonts. */
.rd-page-hero__title-mark {
	font-style: italic;
	color: var(--logo-cyan-text);
	position: relative;
	white-space: nowrap;
}

/* Coral underline curl beneath the brand-name word. SVG curl, not
   a flat border, so the gesture reads as hand-drawn warmth.
   --coral is reserved for "warm accent" moments per the brand 60/30/10;
   this is the one place on the support page it earns its slot. */
.rd-page-hero__title-mark::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.16em;
	height: 0.18em;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 8' preserveAspectRatio='none'><path d='M2 5 Q 30 1 60 5 T 120 5 T 180 5 T 238 5' fill='none' stroke='%23ff7e62' stroke-width='2.4' stroke-linecap='round'/></svg>");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* Personal letter paragraph — lives directly under the H1 in the
   hero copy column. Body weight (not the airier Poppins 300 used for
   short ledes), comfortable reading width, slightly longer line-height
   so the 3-sentence founder note breathes inside the hero band. */
.rd-page-hero__letter {
	font-size: clamp(1rem, 1.35vw, 1.125rem);
	line-height: 1.6;
	color: var(--text-2);
	max-width: 52ch;
	margin: 0;
	font-weight: 400;
}

/* CTA row in the hero — primary Patreon button plus a small secondary
   jump-link to the affiliates grid below. The button uses .rd-patron__btn
   so the visual treatment stays identical anywhere else on the site that
   needs the same primary action. */
.rd-page-hero__cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(14px, 2vw, 22px);
	margin-top: clamp(20px, 2.6vw, 28px);
}

.rd-page-hero__cta-secondary {
	color: var(--accent-text);
	font-weight: 600;
	font-size: 0.9375rem;
	padding: 6px 8px;
	margin: -6px -8px;
	border-radius: 4px;
	text-decoration: underline;
	text-decoration-color: rgba(58, 142, 224, 0.40);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
	transition:
		color 140ms ease,
		background-color 140ms ease,
		text-decoration-color 140ms ease;
}

.rd-page-hero__cta-secondary:hover,
.rd-page-hero__cta-secondary:focus-visible {
	color: var(--accent-text-soft);
	background-color: rgba(58, 142, 224, 0.08);
	text-decoration-color: var(--accent-text-soft);
}

@media (max-width: 720px) {
	.rd-page-hero__cta {
		gap: 12px;
	}
}

/* Right column — octopus illustration. Tilted, soft-shadowed,
   sized so it dominates its column without crowding the headline. */
.rd-page-hero__art {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 0;
}

.rd-page-hero__octo {
	display: block;
	width: clamp(160px, 18vw, 220px);
	height: auto;
	transform: rotate(-4deg);
	filter: drop-shadow(0 18px 28px rgba(28, 75, 130, 0.18))
	        drop-shadow(0 4px 8px rgba(28, 75, 130, 0.10));
	transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Tiny lift on hover so the octopus reads as friendly, not static.
   The intent is "hello", not "swimming animation". */
.rd-page-hero__art:hover .rd-page-hero__octo {
	transform: rotate(-2deg) translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
	.rd-page-hero__octo,
	.rd-page-hero__art:hover .rd-page-hero__octo {
		transition: none;
		transform: rotate(-4deg);
	}
}

/* Mobile: octopus drops below the headline at a smaller size so the
   first thing a thumb-scroller sees is the H1, not 70% of an octopus. */
@media (max-width: 720px) {
	.rd-page-hero__art {
		justify-content: flex-start;
		margin-top: 8px;
	}
	.rd-page-hero__octo {
		width: clamp(140px, 40vw, 180px);
	}
}

/* -----------------------------------------------------------------
   rd-patron__btn — primary Patreon CTA. Bigger and more emphatic
   than the rd-help-strip button so it owns the support hero. The
   rd-patron prefix is intentional so any page that wants the same
   "support the channel" button can reuse this without renaming. */
.rd-patron__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: 0.005em;
	color: #ffffff;
	background: var(--grad-button);
	border: 1px solid #2872c0;
	border-radius: 10px;
	box-shadow: var(--shadow-button), 0 0 0 0 rgba(58, 142, 224, 0);
	text-decoration: none;
	transition:
		filter 160ms ease,
		transform 160ms ease,
		box-shadow 220ms ease;
}

.rd-patron__btn:hover {
	filter: brightness(1.06);
	transform: translateY(-2px);
	box-shadow: var(--shadow-button), 0 0 0 6px rgba(58, 142, 224, 0.16);
}

.rd-patron__btn:active {
	transform: translateY(0);
	filter: brightness(0.98);
}

@media (prefers-reduced-motion: reduce) {
	.rd-patron__btn {
		transition: none;
	}
	.rd-patron__btn:hover {
		transform: none;
	}
}

@media (max-width: 720px) {
	.rd-patron__btn {
		width: 100%;
	}
}

/* Patreon glyph — the encircled P. Inline SVG inherits currentColor
   so it stays white inside the button without a separate file. */
.rd-patron__btn-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.rd-patron__btn-arrow {
	font-size: 0.95em;
	margin-left: 2px;
	transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rd-patron__btn:hover .rd-patron__btn-arrow {
	transform: translateX(3px);
}

/* -----------------------------------------------------------------
   rd-affiliates — partner-link card grid grouped by country tier.
   White surface so the cards (also white) read as actionable tiles
   via border + shadow rather than colored fill, which would compete
   with the Patreon CTA in the hero above.
   ----------------------------------------------------------------- */

.rd-affiliates {
	background: #ffffff;
	padding: clamp(36px, 5vw, 56px) 20px clamp(40px, 6vw, 64px);
}

.rd-affiliates__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.rd-affiliates__head {
	max-width: 56ch;
	margin: 0 0 clamp(28px, 4vw, 44px);
}

.rd-affiliates__eyebrow {
	display: inline-block;
	margin-bottom: clamp(10px, 1.6vw, 14px);
}

.rd-affiliates__title {
	font-family: var(--font-ui);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--text);
	margin: 0 0 clamp(8px, 1.2vw, 12px);
	text-wrap: balance;
}

.rd-affiliates__lede {
	font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
	line-height: 1.55;
	color: var(--text-2);
	margin: 0;
}

/* FTC affiliate disclosure — required to be clear and conspicuous,
   so we render it as a visible row right below the lede in a soft
   accent panel rather than buried in fine print. The info icon
   pulls the eye without making the row feel like an error/warning,
   which a yellow or red treatment would. */
.rd-affiliates__disclosure {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: clamp(14px, 1.6vw, 18px) 0 0;
	padding: 12px 16px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--text-2);
	background: var(--accent-soft);
	border: 1px solid rgba(58, 142, 224, 0.25);
	border-radius: 8px;
}

.rd-affiliates__disclosure strong {
	color: var(--accent-text);
	font-weight: 700;
	margin-right: 4px;
}

.rd-affiliates__disclosure-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--accent-text);
}

.rd-affiliates__tier {
	margin-top: clamp(20px, 3vw, 32px);
}

.rd-affiliates__tier-label {
	font-family: var(--font-ui);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border);
}

/* Partner-card grid. Cards collapse from 3 columns → 2 → 1 as the
   viewport narrows. minmax(240px, 1fr) keeps each card readable; if
   only one card fits per row we let it stretch full-width so the
   single-column mobile layout doesn't look orphaned. */
.rd-affiliates__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: clamp(12px, 1.4vw, 18px);
}

/* Whole card is the link surface. White panel on the section's white
   background — gets visual lift purely from a soft border + shadow,
   not a colored fill, so cards read as "actionable surface" rather
   than a colored CTA tile (which would compete with the patron CTA
   in the hero above). */
.rd-affiliates__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(16px, 1.6vw, 22px);
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow-card);
	color: var(--text);
	text-decoration: none;
	transition:
		transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
		border-color 180ms ease,
		box-shadow 220ms ease;
}

.rd-affiliates__card:hover,
.rd-affiliates__card:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(58, 142, 224, 0.45);
	box-shadow:
		0 1px 3px rgba(28, 75, 130, 0.08),
		0 10px 24px rgba(28, 75, 130, 0.10);
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.rd-affiliates__card {
		transition: border-color 180ms ease, box-shadow 220ms ease;
	}
	.rd-affiliates__card:hover,
	.rd-affiliates__card:focus-visible {
		transform: none;
	}
}

/* Card heading row — vendor name + optional abbreviation chip. The
   chip uses --accent-soft so it reads as "this is the brand's short
   name" rather than as a status pill. */
.rd-affiliates__card-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.rd-affiliates__card-name {
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--text);
}

.rd-affiliates__card-short {
	display: inline-block;
	padding: 1px 8px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--accent-text);
	background: var(--accent-soft);
	border: 1px solid rgba(58, 142, 224, 0.30);
	border-radius: 999px;
}

.rd-affiliates__card-context {
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--text-2);
	margin: 0;
	flex: 1; /* push the CTA to the bottom on uneven card heights */
}

/* Pill-button treatment for the "Shop now" call-to-action. The whole
   card is the link surface (the <a> wraps everything) so this is a
   visual cue, not an independent click target — but mobile users
   without hover need the explicit "this is the action" affordance.
   align-self:flex-start prevents the pill from stretching to fill
   the card column when card content above is short. */
.rd-affiliates__card-cta {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 6px 14px;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.005em;
	color: var(--accent-text);
	background: var(--accent-soft);
	border: 1px solid rgba(58, 142, 224, 0.25);
	border-radius: 999px;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease;
}

.rd-affiliates__card-cta-arrow {
	transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rd-affiliates__card:hover .rd-affiliates__card-cta-arrow,
.rd-affiliates__card:focus-visible .rd-affiliates__card-cta-arrow {
	transform: translateX(3px);
}

.rd-affiliates__card:hover .rd-affiliates__card-cta,
.rd-affiliates__card:focus-visible .rd-affiliates__card-cta {
	background: rgba(58, 142, 224, 0.16);
	border-color: rgba(58, 142, 224, 0.45);
	color: var(--accent-text-soft);
}

@media (prefers-reduced-motion: reduce) {
	.rd-affiliates__card-cta-arrow {
		transition: none;
	}
	.rd-affiliates__card:hover .rd-affiliates__card-cta-arrow {
		transform: none;
	}
}


/* ============================================================
   assets/css/brand-archive.css
   ============================================================ */
/* =================================================================
   ReefDudes — Category archive
   Pairs with category.php. The hero re-uses .rd-page-hero (defined
   in brand-support-page.css) so the editorial Playfair / wave
   eyebrow rhythm matches the support page exactly. The grid below
   is its own component because archive cards have different
   structure (image-on-top + excerpt + meta) than partner cards.
   ================================================================= */

/* The single-column hero: same gradient background and Playfair
   title as the support page, but the inner grid collapses to one
   column (no octopus illustration, copy is the whole hero). */
.rd-archive-hero__inner {
	grid-template-columns: 1fr;
	max-width: 880px;
}

.rd-archive-hero__title {
	max-width: 22ch;
}

.rd-archive-hero__lede {
	max-width: 56ch;
}

/* "12 posts" meta — small, muted, sits below the lede. Acts as a
   wayfinding cue ("how much is here?") without competing with the
   eyebrow or title. */
.rd-archive-hero__meta {
	margin: clamp(12px, 2vw, 16px) 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
}

/* -----------------------------------------------------------------
   rd-archive-grid-section — white surface holding the post grid.
   Mirrors rd-affiliates so the page rhythm stays consistent across
   /support and /category/* archives.
   ----------------------------------------------------------------- */

.rd-archive-grid-section {
	background: #ffffff;
	padding: clamp(36px, 5vw, 56px) 20px clamp(48px, 7vw, 80px);
}

.rd-archive-grid-section__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.rd-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(18px, 2vw, 28px);
}

.rd-archive-card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition:
		transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
		border-color 200ms ease,
		box-shadow 240ms ease;
}

.rd-archive-card:hover,
.rd-archive-card:focus-within {
	transform: translateY(-3px);
	border-color: rgba(58, 142, 224, 0.45);
	box-shadow:
		0 1px 3px rgba(28, 75, 130, 0.08),
		0 14px 30px rgba(28, 75, 130, 0.12);
}

@media (prefers-reduced-motion: reduce) {
	.rd-archive-card {
		transition: border-color 200ms ease, box-shadow 240ms ease;
	}
	.rd-archive-card:hover,
	.rd-archive-card:focus-within {
		transform: none;
	}
}

.rd-archive-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--text);
	text-decoration: none;
}
.rd-archive-card__link:hover,
.rd-archive-card__link:focus {
	text-decoration: none;
	color: var(--text);
}

/* 16:9 media well so cards line up regardless of source image
   aspect. Falls back gracefully if no featured image — the body
   pads to fill the same total card height via flex on the link. */
.rd-archive-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--bg-2);
	overflow: hidden;
}

.rd-archive-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rd-archive-card:hover .rd-archive-card__img,
.rd-archive-card:focus-within .rd-archive-card__img {
	transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
	.rd-archive-card__img,
	.rd-archive-card:hover .rd-archive-card__img,
	.rd-archive-card:focus-within .rd-archive-card__img {
		transition: none;
		transform: none;
	}
}

.rd-archive-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
	padding: clamp(16px, 1.6vw, 22px);
}

.rd-archive-card__title {
	font-family: var(--font-ui);
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.012em;
	color: var(--text);
	margin: 0;
	text-wrap: balance;
}

.rd-archive-card__excerpt {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--text-2);
	margin: 0;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rd-archive-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
	font-size: 0.8125rem;
	color: var(--muted);
	font-weight: 500;
}

.rd-archive-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 700;
	color: var(--accent-text);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.75rem;
}

.rd-archive-card__cta-arrow {
	transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rd-archive-card:hover .rd-archive-card__cta-arrow,
.rd-archive-card:focus-within .rd-archive-card__cta-arrow {
	transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
	.rd-archive-card__cta-arrow,
	.rd-archive-card:hover .rd-archive-card__cta-arrow,
	.rd-archive-card:focus-within .rd-archive-card__cta-arrow {
		transition: none;
		transform: none;
	}
}

/* -----------------------------------------------------------------
   rd-archive-pagination — pill-shaped numeric pages with prev/next.
   Reuses the accent-soft pill treatment from .rd-404__popular-list
   so a returning visitor recognizes the surface as "recoverable
   navigation" rather than a unique pattern.
   ----------------------------------------------------------------- */

.rd-archive-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 8px;
	margin-top: clamp(28px, 4vw, 40px);
}

.rd-archive-pagination__item .page-numbers {
	display: inline-flex;
	align-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--accent-text);
	background: var(--accent-soft);
	border: 1px solid rgba(58, 142, 224, 0.25);
	border-radius: 999px;
	text-decoration: none;
	transition:
		background-color 140ms ease,
		border-color 140ms ease,
		color 140ms ease;
}

.rd-archive-pagination__item .page-numbers:hover,
.rd-archive-pagination__item .page-numbers:focus-visible {
	background: rgba(58, 142, 224, 0.16);
	border-color: rgba(58, 142, 224, 0.45);
	color: var(--accent-text-soft);
	text-decoration: none;
}

.rd-archive-pagination__item .page-numbers.current {
	background: var(--accent);
	color: #ffffff;
	border-color: #2872c0;
	box-shadow: var(--shadow-button);
}

.rd-archive-pagination__item .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	color: var(--muted);
	pointer-events: none;
}

/* -----------------------------------------------------------------
   rd-archive-empty — friendly "no posts yet" surface.
   ----------------------------------------------------------------- */

.rd-archive-empty {
	max-width: 480px;
	margin: 0 auto;
	padding: clamp(24px, 3vw, 36px);
	text-align: center;
	color: var(--text-2);
	font-size: 1rem;
	line-height: 1.55;
}

.rd-archive-empty p {
	margin: 0 0 clamp(14px, 2vw, 20px);
}

.rd-archive-empty .rd-btn-ghost-dark {
	display: inline-block;
	padding: 10px 22px;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--accent-text);
	background: var(--panel);
	border: 1px solid var(--accent);
	border-radius: 8px;
	text-decoration: none;
	transition: background-color 140ms ease, color 140ms ease;
}
.rd-archive-empty .rd-btn-ghost-dark:hover {
	background: var(--accent-soft);
	color: var(--accent-text-soft);
}

/* -----------------------------------------------------------------
   rd-search-empty — used by search.php when a query returns no
   posts. The retry search field reuses the .rd-404__search* shells
   from brand-404.css, but the surrounding layout (max-width, gap,
   tool-grid spacing) is search-specific so it doesn't visually
   compete with the centered 404.
   ----------------------------------------------------------------- */

/* Search query inside the hero H1. Italic + logo-cyan ink so the
   user's term reads as "this is what you searched for" without
   borrowing the .rd-page-hero__title-mark coral curl — that flourish
   is reserved for the brand-name word on /support and would feel
   cheapened sitting under arbitrary user input. */
.rd-search-hero__query {
	font-style: italic;
	color: var(--logo-cyan-text);
	white-space: normal;
	word-break: break-word;
}

.rd-search-empty {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	color: var(--text-2);
}

.rd-search-empty__lede {
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.55;
	color: var(--text-2);
	margin: 0 0 clamp(20px, 3vw, 28px);
}

.rd-search-empty__lede strong {
	color: var(--text);
	font-weight: 700;
}

/* The retry form reuses .rd-404__search shells. Override only the
   wrapper margins so the field sits flush with the empty-state
   layout instead of inheriting the 404's spacing. */
.rd-search-empty__form {
	margin-bottom: clamp(28px, 4vw, 36px);
}

.rd-search-empty__or {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 clamp(14px, 2vw, 18px);
}

/* Constrain the tool grid in the search-empty state to the same
   reading-width frame as the lede above it; the 404 lets it spread
   to 880px because the 404 has no narrow copy column to align with. */
.rd-search-empty__tools {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}


/* ============================================================
   assets/css/brand-article.css
   ============================================================ */
/* =================================================================
   ReefDudes — Single article (long-form post)
   Pairs with single.php. Three concerns:

     1. rd-article-hero       reuses .rd-page-hero shell, text-only
                              variant with byline + date + read-time
     2. rd-article-feature    full-bleed featured image between
                              hero and body
     3. rd-article            reading column with long-form
                              typography on .rd-article__content
     4. rd-article-readnext   "More from {category}" footer block

   Reading column width: 680px max (~62ch at 18px body type, lands
   in the 45–75ch sweet spot for long-form). Wider full-bleed media
   inside the body uses Gutenberg's .alignwide / .alignfull classes
   to break out to the container or viewport edges.
   ================================================================= */

/* -----------------------------------------------------------------
   rd-article-hero — Playfair title + byline meta. Inherits
   .rd-page-hero gradient/padding so this surface visually matches
   /support and /category/* archives.
   ----------------------------------------------------------------- */

.rd-article-hero__inner {
	grid-template-columns: 1fr;
	max-width: 880px;
}

.rd-article-hero__copy {
	max-width: 720px;
}

.rd-article-hero__title {
	max-width: 22ch;
	margin-bottom: clamp(12px, 1.8vw, 18px);
}

/* Eyebrow on a single post is a link to the category archive — we
   want it to be visibly clickable without losing its "section
   label" character. Keep the uppercase-tracked styling but add a
   subtle color shift on hover so the affordance reads. */
a.rd-article-hero__eyebrow {
	text-decoration: none;
	transition: color 140ms ease;
}
a.rd-article-hero__eyebrow:hover,
a.rd-article-hero__eyebrow:focus-visible {
	color: var(--accent-text-soft);
}

.rd-article-hero__lede {
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.5;
	color: var(--text-2);
	max-width: 56ch;
	margin: 0 0 clamp(18px, 2.4vw, 24px);
	font-weight: 400;
}

/* Meta row — byline, date, read-time. Small caps + muted gray so
   they read as supporting metadata, not competing headlines. */
.rd-article-hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--muted);
	letter-spacing: 0.01em;
}

.rd-article-hero__byline {
	color: var(--text-2);
	font-weight: 700;
}

.rd-article-hero__sep {
	color: var(--border-strong);
	font-weight: 700;
}

@media (max-width: 540px) {
	.rd-article-hero__meta {
		font-size: 0.8125rem;
	}
}

/* -----------------------------------------------------------------
   rd-article-feature — full-bleed featured image. Uses a 16:9
   aspect-ratio crop so post-to-post layout stays predictable; the
   image fills the box via object-fit: cover. Container caps at
   1200px so we don't stretch a 720×405 image to 2400px wide.
   ----------------------------------------------------------------- */

/* Pull the featured image up slightly into the hero's lower padding
   so the photo and headline read as one composed arrival rather
   than a hero followed by a separate image card. The pull-up grows
   on wider viewports where the hero padding is more generous. */
.rd-article-feature {
	max-width: 1200px;
	margin: -16px auto 0;
	padding: 0 20px;
}
@media (min-width: 720px) {
	.rd-article-feature {
		margin-top: -32px;
	}
}

.rd-article-feature__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 14px;
	box-shadow:
		0 1px 3px rgba(28, 75, 130, 0.10),
		0 12px 28px rgba(28, 75, 130, 0.12);
}

/* -----------------------------------------------------------------
   rd-article — the reading column.
   ----------------------------------------------------------------- */

.rd-article {
	padding: clamp(36px, 5vw, 64px) 20px clamp(32px, 5vw, 56px);
}

.rd-article__inner {
	max-width: 680px;
	margin: 0 auto;
}

/* The content surface itself — every selector below is scoped to
   .rd-article__content so we don't accidentally restyle archive
   excerpts or unrelated post lists. */
.rd-article__content {
	color: var(--text);
	font-family: var(--font-ui);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.rd-article__content > * + * {
	margin-top: 1.1em;
}

.rd-article__content p {
	margin: 0;
}

/* First paragraph slightly larger so the reader's eye lands and
   commits before the body type takes over. No drop cap — that's
   stage-magic territory; this is just a calm typographic lead-in. */
.rd-article__content > p:first-of-type {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--text);
}

/* Headings — keep the brand hierarchy but space them generously so
   long sections breathe. h2 is the de-facto section break inside
   articles; h3 is a sub-section. h4+ rarely appears in blog content. */
.rd-article__content h2 {
	font-family: var(--font-ui);
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.2;
	color: var(--text);
	margin-top: clamp(36px, 5vw, 56px);
	margin-bottom: clamp(10px, 1.4vw, 14px);
	text-wrap: balance;
}

.rd-article__content h3 {
	font-family: var(--font-ui);
	font-size: clamp(1.1875rem, 1.8vw, 1.375rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--text);
	margin-top: clamp(28px, 4vw, 40px);
	margin-bottom: 8px;
}

.rd-article__content h4 {
	font-family: var(--font-ui);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--text);
	margin-top: clamp(24px, 3vw, 32px);
	margin-bottom: 6px;
}

/* Links inside body copy — brand-text accent with an underline that
   thickens on hover. We keep the underline visible at rest because
   removing it on body links is a known a11y regression. */
.rd-article__content a {
	color: var(--accent-text);
	text-decoration: underline;
	text-decoration-color: rgba(58, 142, 224, 0.40);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition:
		color 140ms ease,
		text-decoration-color 140ms ease,
		text-decoration-thickness 140ms ease;
}
.rd-article__content a:hover,
.rd-article__content a:focus-visible {
	color: var(--accent-text-soft);
	text-decoration-color: var(--accent-text-soft);
	text-decoration-thickness: 2px;
}

/* Lists — comfortable indent, slightly tighter line-height than body
   so multi-line list items don't feel airy. */
.rd-article__content ul,
.rd-article__content ol {
	padding-left: 1.4em;
	margin: 0;
}

.rd-article__content ul li,
.rd-article__content ol li {
	margin: 0;
	padding-left: 0.4em;
	line-height: 1.6;
}

.rd-article__content ul li + li,
.rd-article__content ol li + li {
	margin-top: 0.5em;
}

.rd-article__content ul li::marker {
	color: var(--accent);
}

.rd-article__content ol li::marker {
	color: var(--accent-text);
	font-weight: 700;
}

/* Blockquote — coral left rule + slight inset. Coral over cyan
   here because blockquotes are the "warm voice" moment in an
   article (the author cited, the reader paused) and coral is the
   brand's warmth color. */
.rd-article__content blockquote {
	margin: clamp(20px, 3vw, 28px) 0;
	padding: 4px 0 4px clamp(18px, 2vw, 22px);
	border-left: 4px solid var(--coral);
	font-style: italic;
	color: var(--text-2);
	font-size: 1.125rem;
	line-height: 1.55;
}

.rd-article__content blockquote p {
	margin: 0;
}

.rd-article__content blockquote p + p {
	margin-top: 0.8em;
}

.rd-article__content blockquote cite {
	display: block;
	margin-top: 8px;
	font-style: normal;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--muted);
	letter-spacing: 0.02em;
}

/* Inline code + code blocks. Pre-blocks get a soft surface tint
   instead of pure white so they read as "code" without a heavy
   border around them. */
.rd-article__content code {
	font-family: var(--font-mono);
	font-size: 0.9375em;
	padding: 2px 6px;
	background: var(--bg-2);
	border: 1px solid var(--border);
	border-radius: 4px;
	color: var(--text);
}

.rd-article__content pre {
	font-family: var(--font-mono);
	font-size: 0.9375rem;
	line-height: 1.55;
	padding: clamp(14px, 2vw, 18px);
	background: var(--bg-2);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow-x: auto;
	color: var(--text);
}

.rd-article__content pre code {
	background: transparent;
	border: none;
	padding: 0;
	font-size: inherit;
}

/* Inline images and figures — full column width by default, with
   Gutenberg .alignwide / .alignfull breaking out wider. The full
   bleed hits the viewport edges on desktop and falls back to the
   column on narrow viewports. */
.rd-article__content img,
.rd-article__content figure {
	max-width: 100%;
	height: auto;
}

.rd-article__content figure {
	margin: clamp(20px, 3vw, 28px) 0;
}

.rd-article__content figcaption,
.rd-article__content figure figcaption {
	margin-top: 8px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--muted);
	text-align: center;
	font-style: italic;
}

.rd-article__content > .alignwide {
	margin-left: calc(50% - min(50vw, 600px) + 0px);
	margin-right: calc(50% - min(50vw, 600px) + 0px);
	max-width: min(1200px, 100vw - 40px);
}

.rd-article__content > .alignfull {
	margin-left: calc(50% - 50vw + 0px);
	margin-right: calc(50% - 50vw + 0px);
	max-width: 100vw;
}

@media (max-width: 720px) {
	.rd-article__content > .alignwide,
	.rd-article__content > .alignfull {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}
}

/* HR — soft brand divider, not a hard line. */
.rd-article__content hr {
	border: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--border) 30%,
		var(--border) 70%,
		transparent
	);
	margin: clamp(28px, 4vw, 40px) 0;
}

/* Tables — straightforward two-tone rows, brand header. */
.rd-article__content table {
	width: 100%;
	border-collapse: collapse;
	margin: clamp(20px, 3vw, 28px) 0;
	font-size: 0.9375rem;
}
.rd-article__content table th,
.rd-article__content table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	text-align: left;
}
.rd-article__content table th {
	background: var(--accent-soft);
	color: var(--accent-text);
	font-weight: 700;
}

/* -----------------------------------------------------------------
   rd-article__tags — small pills below the body.
   ----------------------------------------------------------------- */

.rd-article__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: clamp(36px, 5vw, 48px);
	padding-top: clamp(20px, 3vw, 28px);
	border-top: 1px solid var(--border);
}

.rd-article__tags-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-right: 4px;
}

.rd-article__tag {
	display: inline-block;
	padding: 6px 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--accent-text);
	background: var(--accent-soft);
	border: 1px solid rgba(58, 142, 224, 0.25);
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.rd-article__tag:hover,
.rd-article__tag:focus-visible {
	background: rgba(58, 142, 224, 0.16);
	border-color: rgba(58, 142, 224, 0.45);
	color: var(--accent-text-soft);
	text-decoration: none;
}

/* -----------------------------------------------------------------
   rd-article-readnext — "More from {category}" footer.
   White surface so it visually separates from the reading column
   above and reads as a navigational moment, not a continuation of
   the article body.
   ----------------------------------------------------------------- */

.rd-article-readnext {
	background: #ffffff;
	padding: clamp(40px, 6vw, 64px) 20px clamp(48px, 7vw, 80px);
	border-top: 1px solid var(--border);
}

.rd-article-readnext__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.rd-article-readnext__head {
	margin-bottom: clamp(20px, 3vw, 28px);
}

.rd-article-readnext__head .rd-eyebrow {
	display: inline-block;
	margin-bottom: clamp(8px, 1.4vw, 12px);
}

.rd-article-readnext__title {
	font-family: var(--font-ui);
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.012em;
	color: var(--text);
	margin: 0;
	text-wrap: balance;
}


/* ============================================================
   assets/css/brand-community.css
   ============================================================ */
/* =================================================================
   ReefDudes — Community CTA section (front-page.php)
   Sits below the tools grid as the "what's happening on the
   YouTube/Instagram side" entry point. Uses the deeper page
   wash so it visually anchors the bottom of the homepage.
   ================================================================= */

.rd-community {
	background: var(--bg);
	padding: clamp(56px, 9vw, 96px) 20px;
	border-top: 1px solid rgba(205, 216, 226, 0.6);
	position: relative;
}

.rd-community__inner {
	/* Widened from 720px so the IG band can show 6 tiles at a comfortable
	   size. The centered intro (title + sub) keeps its narrow feel via its
	   own max-width — only the bands use the full inner width. */
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
}

.rd-community__title {
	font-size: clamp(1.65rem, 3.8vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	font-weight: 800;
	color: var(--text);
	margin: 10px 0 14px;
	max-width: 22ch;
	margin-left: auto;
	margin-right: auto;
	text-wrap: balance;
}

.rd-community__sub {
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	color: var(--text-2);
	margin: 0 0 clamp(28px, 4vw, 40px);
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
}

/* ----- Content bands (IG + YouTube) ------------------------------
   Two stacked surfaces inside .rd-community__inner. Each band has a
   small eyebrow label so visitors know which network they're seeing.
   Both bands hide silently if their data source is empty. */

.rd-community__band {
	margin: 0 auto clamp(28px, 4vw, 44px);
	text-align: left;
}

.rd-community__band:last-of-type {
	/* Band immediately before the CTA pair gets a bit more breathing
	   room so the CTAs read as a closing action, not a third band. */
	margin-bottom: clamp(28px, 4vw, 44px);
}

.rd-community__band-label {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-text);
	margin: 0 0 14px;
}

/* Instagram strip: a row of square tiles. The SBI plugin wraps each
   image in its own anchor; we just constrain the grid behavior. */

.rd-community__ig {
	/* Reset the SBI plugin's default header/button styling — we already
	   render our own band label and the section's footer CTAs cover the
	   "see more" affordance. */
}
.rd-community__ig #sb_instagram .sb_instagram_header,
.rd-community__ig #sb_instagram #sbi_load { display: none !important; }
.rd-community__ig #sb_instagram { padding: 0 !important; }
.rd-community__ig #sbi_images {
	gap: 8px;
}

/* YouTube video row.

   Six videos by default (see reefdudes_fetch_youtube_uploads in
   functions.php). Capped at 3 columns on desktop so the row reads as
   two rhythmic rows of three rather than 4+2 or 6×narrow. Same
   1→2→3 cap pattern as the homepage tools grid. */
.rd-community__videos {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(12px, 1.6vw, 18px);
}
@media (min-width: 640px) {
	.rd-community__videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
	.rd-community__videos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rd-community__video {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--text);
	text-decoration: none;
	border-radius: 12px;
	transition: transform 180ms cubic-bezier(0.4,0,0.2,1);
}
.rd-community__video:hover {
	color: var(--text);
	transform: translateY(-2px);
}
.rd-community__video:hover .rd-community__video-thumb {
	box-shadow:
		0 2px 4px rgba(28,75,130,0.06),
		0 14px 36px rgba(28,75,130,0.18);
}
.rd-community__video:focus-visible {
	outline: none;
}
.rd-community__video:focus-visible .rd-community__video-thumb {
	box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-card);
}

.rd-community__video-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 12px;
	aspect-ratio: 16 / 9;
	background: var(--bg-2);
	box-shadow: var(--shadow-card);
	transition: box-shadow 180ms ease;
}
.rd-community__video-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rd-community__video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(28,52,72,0.55);
	color: #ffffff;
	font-size: 18px;
	padding-left: 4px; /* optical centering of the ▶ glyph */
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	transition: background-color 160ms ease, transform 160ms ease;
}
.rd-community__video:hover .rd-community__video-play {
	background: rgba(58,142,224,0.85);
	transform: translate(-50%, -50%) scale(1.06);
}

.rd-community__video-duration {
	position: absolute;
	right: 10px;
	bottom: 10px;
	background: rgba(8,28,55,0.78);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	letter-spacing: 0.02em;
}

.rd-community__video-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
	.rd-community__video,
	.rd-community__video-play {
		transition: none;
	}
	.rd-community__video:hover {
		transform: none;
	}
	.rd-community__video:hover .rd-community__video-play {
		transform: translate(-50%, -50%);
	}
}

.rd-community__cta {
	display: inline-flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

.rd-community__cta .rd-btn-primary {
	background: var(--grad-button);
	color: #ffffff;
	border: 1px solid #2872c0;
	border-radius: 6px;
	padding: 12px 22px;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	box-shadow: var(--shadow-button);
	transition: filter 120ms ease, transform 120ms ease;
}
.rd-community__cta .rd-btn-primary:hover {
	filter: brightness(1.06);
	color: #ffffff;
}
.rd-community__cta .rd-btn-primary:active {
	transform: translateY(1px);
}

/* Dark-on-light ghost button (for use OUTSIDE the photo hero).
   Uses --accent-text for AA-pass contrast at body size on white. */
.rd-community__cta .rd-btn-ghost-dark {
	background: var(--panel);
	color: var(--accent-text);
	border: 1px solid var(--accent);
	border-radius: 6px;
	padding: 12px 22px;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	transition: background-color 120ms ease, color 120ms ease;
}
.rd-community__cta .rd-btn-ghost-dark:hover {
	background: var(--accent-soft);
	color: var(--accent-text-soft);
}


/* ============================================================
   assets/css/brand-motif.css
   ============================================================ */
/* =================================================================
   ReefDudes — Wave motif
   A small marine flourish that echoes the new illustrated logo's
   vocabulary without literal repetition. Used as a section divider
   at the top of the Tools and Community sections, and as a
   replacement for the rule-mark on section eyebrows.
   ================================================================= */

/* Wavy section divider — three soft waves in actinic blue.
   Embedded as inline SVG via data-URI so there's no extra HTTP
   request. Width auto-tiles via background-size. */

.rd-wave-divider {
	width: 100%;
	height: 18px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'><path d='M0 9 Q 15 0 30 9 T 60 9 T 90 9 T 120 9' fill='none' stroke='%233a8ee0' stroke-width='1.5' stroke-linecap='round' opacity='0.55'/><path d='M0 13 Q 15 4 30 13 T 60 13 T 90 13 T 120 13' fill='none' stroke='%233fb8c8' stroke-width='1.2' stroke-linecap='round' opacity='0.40'/></svg>");
	background-repeat: repeat-x;
	background-size: 120px 18px;
	background-position: center;
	pointer-events: none;
}

/* On small screens the wave reads better at a tighter scale. */
@media (max-width: 600px) {
	.rd-wave-divider {
		height: 14px;
		background-size: 80px 14px;
	}
}

/* When placed inside a section, it should sit at the very top edge
   so it reads as a hand-off from the previous surface. Use negative
   margins instead of transform so the wave's bounding box can never
   leave a 1px sub-pixel gap above the section edge at certain widths. */
.rd-wave-divider--top {
	position: absolute;
	top: -9px;
	left: 0;
	right: 0;
	z-index: 2;
}
@media (max-width: 600px) {
	.rd-wave-divider--top {
		top: -7px;
	}
}

/* Eyebrow flourish — a tiny wave glyph standing in for the rule mark.
   Apply by adding `.rd-eyebrow--wave` next to `.rd-eyebrow` (or to
   the section's eyebrow class). Replaces the existing 20×2px line. */

.rd-eyebrow--wave {
	position: relative;
	display: inline-block;
	padding-left: 30px;
}

/* When the eyebrow lives in a text-centered section (community),
   the wave still sits flush-left of the text. Inline-block above
   ensures the padded box hugs the text width. */

.rd-tools-section__eyebrow.rd-eyebrow--wave::before,
.rd-eyebrow--wave::before {
	content: "";
	width: 22px;
	height: 8px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'><path d='M1 4 Q 5 0 9 4 T 17 4 T 22 4' fill='none' stroke='%233a8ee0' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat center;
	background-size: 22px 8px;
	display: inline-block;
	vertical-align: middle;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
}


/* ============================================================
   assets/css/brand-footer.css
   ============================================================ */
/* =================================================================
   ReefDudes — Footer
   3-column layout with wordmark echo, columned nav, and a thin
   legal strip. Light surface (--bg-2) so it reads as a deliberate
   end of the page rather than a heavy dark slab.
   ================================================================= */

.rd-footer {
	background: var(--bg-2);
	border-top: 1px solid var(--border);
	color: var(--text);
	padding: clamp(40px, 6vw, 72px) 20px clamp(20px, 3vw, 32px);
	font-family: var(--font-ui);
}

.rd-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: clamp(24px, 4vw, 56px);
}

@media (max-width: 860px) {
	.rd-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 540px) {
	.rd-footer__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* Brand column */

.rd-footer__brand {
	max-width: 36ch;
}

.rd-footer__wordmark {
	display: inline-block;
	font-family: var(--font-ui);
	font-weight: 800;
	font-size: 1.875rem;
	letter-spacing: -0.015em;
	text-decoration: none;
	margin: 0 0 14px;
	line-height: 1;
}
.rd-footer__wordmark:hover { text-decoration: none; }
/* Match the new illustrated logo's cyan-shifted "Reef" so the footer
   visually rhymes with the header. We use --logo-cyan-text (a darker
   cyan in the same hue family) instead of the bright --logo-cyan so
   the wordmark passes WCAG AA on the light footer surface. "Dudes"
   stays muted gray — at 30px bold weight it qualifies as large text
   and clears the 3:1 large-text bar. */
.rd-footer__wordmark-reef  { color: var(--logo-cyan-text); }
.rd-footer__wordmark-dudes { color: var(--muted); }
.rd-footer__wordmark:hover .rd-footer__wordmark-reef  { color: var(--logo-cyan-text-soft); }
.rd-footer__wordmark:hover .rd-footer__wordmark-dudes { color: var(--text-2); }

.rd-footer__tagline {
	font-size: 0.9375rem;
	line-height: 1.55;
	/* --text-2 (#46586a) on --bg-2 (#e8f0f9) ~ 5.7:1, AA-pass.
	   Previously --muted, which fails AA contrast at body sizes. */
	color: var(--text-2);
	margin: 0;
}

/* Nav columns */

.rd-footer__heading {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-text);
	margin: 0 0 14px;
}

.rd-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rd-footer__list a {
	/* --text-2 (#46586a) on --bg-2 (#e8f0f9) ~ 5.7:1, AA-pass.
	   Previously --muted, which fails AA contrast. */
	color: var(--text-2);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	transition: color 120ms ease, background-color 120ms ease;
	display: block;
	/* Touch target: ~40px tall click area (was ~22px before).
	   Inset padding so the visual list still looks tight. */
	padding: 8px 8px;
	margin: 0 -8px;
	border-radius: 4px;
}
.rd-footer__list a:hover,
.rd-footer__list a:focus {
	color: var(--accent-text);
	background-color: rgba(58, 142, 224, 0.06);
	text-decoration: none;
}

/* Legal strip */

.rd-footer__legal {
	max-width: 1200px;
	margin: clamp(28px, 4vw, 44px) auto 0;
	padding-top: clamp(16px, 2vw, 22px);
	border-top: 1px solid var(--border);
	font-size: 0.8125rem;
	/* --text-2 instead of --muted — AA-pass at this small size. */
	color: var(--text-2);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

/* Suppress Uncode's parent #colophon .footer-last row. Without this,
   the parent theme renders its own copyright line below ours and the
   page shows a duplicate "© ReefDudes" stack. The matching
   pre_option__uncode_footer_copyright filter in functions.php blanks
   the option text, but the .footer-last wrapper still renders from
   parent footer.php regardless of that option — so we also need CSS
   to drop the row visually. */
.theme-uncode .footer-last {
	display: none !important;
}


/* ============================================================
   assets/css/brand-404.css
   ============================================================ */
/* =================================================================
   ReefDudes — 404 page
   Calm, helpful, on-brand. No big-number "404" — that's a slop
   trope. Lead with copy, then a search field, then escape paths.
   ================================================================= */

.rd-404 {
	padding: clamp(56px, 10vw, 120px) 20px;
	background: var(--bg);
	min-height: 60vh;
	position: relative;
}

.rd-404__inner {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.rd-404 .rd-eyebrow {
	margin-bottom: clamp(14px, 2vw, 20px);
}

.rd-404__title {
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--text);
	margin: 0 0 clamp(14px, 2vw, 20px);
	text-wrap: balance;
}

.rd-404__sub {
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.55;
	color: var(--text-2);
	margin: 0 0 clamp(28px, 4vw, 40px);
}

.rd-404__search {
	display: flex;
	gap: 8px;
	max-width: 480px;
	margin: 0 auto clamp(24px, 3.5vw, 32px);
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: var(--shadow-card);
	padding: 6px;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}
.rd-404__search:focus-within {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

.rd-404__search-field {
	flex: 1;
	border: none;
	background: transparent;
	color: var(--text);
	font-family: var(--font-ui);
	font-size: 1rem;
	padding: 8px 12px;
	min-width: 0;
}
.rd-404__search-field:focus {
	outline: none;
	box-shadow: none;
}

.rd-404__search-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--grad-button);
	color: #ffffff;
	border: 1px solid #2872c0;
	border-radius: 6px;
	padding: 8px 16px;
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: filter 120ms ease;
}
.rd-404__search-btn:hover {
	filter: brightness(1.06);
}

.rd-404__cta-row {
	display: inline-flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: clamp(32px, 5vw, 48px);
}
.rd-404__cta-row .rd-btn-primary,
.rd-404__cta-row .rd-btn-ghost-dark {
	border-radius: 8px;
	padding: 12px 22px;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	transition: filter 140ms ease, transform 140ms ease, background-color 140ms ease;
}
.rd-404__cta-row .rd-btn-primary {
	background: var(--grad-button);
	color: #ffffff;
	border: 1px solid #2872c0;
	box-shadow: var(--shadow-button);
}
.rd-404__cta-row .rd-btn-primary:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}
.rd-404__cta-row .rd-btn-ghost-dark {
	background: var(--panel);
	color: var(--accent-text);
	border: 1px solid var(--accent);
}
.rd-404__cta-row .rd-btn-ghost-dark:hover {
	background: var(--accent-soft);
	color: var(--accent-text-soft);
}

/* Tool-card row sits OUTSIDE .rd-404__inner so it can break out of
   the 640px copy column and use a wider 880px frame for the cards.
   The cards reuse reefdudes_tools_registry() icons so this list and
   the homepage grid never drift apart. */
.rd-404__tools-wrap {
	max-width: 880px;
	margin: clamp(28px, 4vw, 40px) auto 0;
	text-align: center;
}

.rd-404__popular-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: clamp(14px, 2vw, 18px);
}

.rd-404__tool-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: clamp(10px, 1.4vw, 14px);
}

.rd-404__tool-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: var(--shadow-card);
	color: var(--text);
	text-decoration: none;
	transition:
		transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
		border-color 180ms ease,
		box-shadow 220ms ease;
}

.rd-404__tool-card:hover,
.rd-404__tool-card:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(58, 142, 224, 0.45);
	box-shadow:
		0 1px 3px rgba(28, 75, 130, 0.08),
		0 8px 18px rgba(28, 75, 130, 0.10);
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.rd-404__tool-card {
		transition: border-color 180ms ease, box-shadow 220ms ease;
	}
	.rd-404__tool-card:hover,
	.rd-404__tool-card:focus-visible {
		transform: none;
	}
}

.rd-404__tool-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	color: var(--accent-text);
	background: var(--accent-soft);
	border-radius: 8px;
}

.rd-404__tool-icon .rd-svgicon {
	width: 22px;
	height: 22px;
}

.rd-404__tool-name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--text);
	line-height: 1.25;
	text-align: left;
}


/* ============================================================
   assets/css/brand-polish.css
   ============================================================ */
/* =================================================================
   ReefDudes — Final polish
   Small fixes, conflict patches, and quality-of-life details.
   ================================================================= */

/* -------------------------------------------------------
   Body box-wrapper edges
   Uncode renders body-borders even when boxed=false. Hide
   them so the gradient page wash reaches the viewport edge.
   ------------------------------------------------------- */
body.theme-uncode .body-borders { display: none; }

/* -------------------------------------------------------
   Logo container — keep the existing PNG sharp on retina
   until the SVG re-export ships. (See README for details.)
   ------------------------------------------------------- */
body.theme-uncode .navbar-brand .logo-image img {
	image-rendering: -webkit-optimize-contrast;
	max-width: none;
}

/* -------------------------------------------------------
   Scroll-to-top arrow — pick up the brand
   ------------------------------------------------------- */
body.theme-uncode .footer-scroll-top a {
	color: var(--accent);
}
body.theme-uncode .footer-scroll-top a:hover {
	color: var(--accent-hover);
}
body.theme-uncode .footer-scroll-top .btn-default {
	background: var(--panel);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
}

/* -------------------------------------------------------
   Live search results dropdown (Daves WP Live Search)
   ------------------------------------------------------- */
body.theme-uncode .dwls_search_results {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 6px;
	box-shadow: var(--shadow-card);
}
body.theme-uncode .dwls_search_results li a {
	color: var(--text);
}
body.theme-uncode .dwls_search_results li:hover a,
body.theme-uncode .dwls_search_results li.daves-wordpress-live-search_selected a {
	background: var(--accent-soft);
	color: var(--accent);
}

/* -------------------------------------------------------
   Flow-Flow social wall — calmer card chrome, brand link color
   ------------------------------------------------------- */
.ff-stream .ff-item {
	border-radius: 8px !important;
	border: 1px solid var(--border) !important;
	box-shadow: var(--shadow-card) !important;
}
.ff-stream .ff-item-bar a,
.ff-stream .ff-content a {
	color: var(--accent) !important;
}
.ff-stream .ff-item-bar a:hover,
.ff-stream .ff-content a:hover {
	color: var(--accent-hover) !important;
}

/* -------------------------------------------------------
   Print styles — keep brand on print, drop heavy bg
   ------------------------------------------------------- */
@media print {
	body.theme-uncode {
		background: #ffffff !important;
		color: #000000;
	}
	.menu-wrapper,
	.rd-footer,
	.footer-scroll-top {
		display: none !important;
	}
}

/* -------------------------------------------------------
   Reduced motion
   ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body.theme-uncode *,
	body.theme-uncode *::before,
	body.theme-uncode *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ============================================================
   assets/css/brand-final.css
   ============================================================ */
/* =================================================================
   ReefDudes — Final accessibility & utility layer
   Skip link, keyboard hint, help-strip, refined print styles.
   ================================================================= */

/* -------------------------------------------------------
   Skip-to-content link (WCAG 2.4.1 Bypass Blocks)
   ------------------------------------------------------- */

.rd-skip-link {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 100000;
	background: var(--accent);
	color: #ffffff;
	font-family: var(--font-ui);
	font-weight: 700;
	padding: 10px 16px;
	border-radius: 0 0 6px 6px;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(28,75,130,0.30);
	transition: top 160ms cubic-bezier(0.4,0,0.2,1);
}
.rd-skip-link:focus {
	top: 0;
	outline: 3px solid var(--actinic);
	outline-offset: 2px;
}

/* -------------------------------------------------------
   Search keyboard hint — a small "/" kbd badge that lives
   to the right of the search icon on desktop. Tells power
   users the shortcut exists; fades in on header hover so it
   doesn't add visual noise at rest.
   ------------------------------------------------------- */

@media (min-width: 960px) {
	body.theme-uncode .navbar-extra-icons .search-icon {
		position: relative;
	}
	body.theme-uncode .navbar-extra-icons .search-icon > a::after {
		content: "/";
		position: absolute;
		top: 50%;
		right: -2px;
		transform: translateY(-50%);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		font-family: var(--font-mono, monospace);
		font-size: 11px;
		font-weight: 600;
		color: rgba(255,255,255,0.85);
		background: rgba(255,255,255,0.16);
		border: 1px solid rgba(255,255,255,0.30);
		border-radius: 3px;
		opacity: 0;
		pointer-events: none;
		transition: opacity 160ms ease, transform 160ms ease;
	}
	body.theme-uncode .menu-container:hover .navbar-extra-icons .search-icon > a::after,
	body.theme-uncode .navbar-extra-icons .search-icon > a:focus-visible::after {
		opacity: 1;
		transform: translateY(-50%) translateX(22px);
	}
}

/* -------------------------------------------------------
   Help-and-Ask strip — sits above the footer
   ------------------------------------------------------- */

.rd-help-strip {
	background: linear-gradient(135deg, var(--accent-soft) 0%, #ffffff 60%);
	padding: clamp(36px, 5vw, 56px) 20px;
	border-top: 1px solid rgba(58,142,224,0.18);
	border-bottom: 1px solid var(--border);
}

.rd-help-strip__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: clamp(20px, 4vw, 48px);
	flex-wrap: wrap;
	justify-content: space-between;
}

.rd-help-strip__copy {
	flex: 1;
	min-width: 240px;
}

.rd-help-strip__copy .rd-eyebrow {
	margin-bottom: 6px;
}

.rd-help-strip__lede {
	font-size: clamp(1.125rem, 2.2vw, 1.5rem);
	line-height: 1.25;
	font-weight: 700;
	color: var(--text);
	margin: 0;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.rd-help-strip__cta {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.rd-help-strip__cta .rd-btn-primary {
	background: var(--grad-button);
	color: #ffffff;
	border: 1px solid #2872c0;
	border-radius: 8px;
	padding: 12px 22px;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	box-shadow: var(--shadow-button);
	transition: filter 140ms ease, transform 140ms ease;
}
.rd-help-strip__cta .rd-btn-primary:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.rd-help-strip__sec {
	color: var(--accent-text);
	font-weight: 600;
	text-decoration: none;
	font-size: 0.9375rem;
	padding: 6px 8px;
	margin: -6px -8px;
	border-radius: 4px;
	transition: color 140ms ease, background-color 140ms ease;
}
.rd-help-strip__sec:hover {
	color: var(--accent-text-soft);
	background-color: rgba(58, 142, 224, 0.06);
}

/* -------------------------------------------------------
   Refined print stylesheet — print-friendly version of the
   current site. Drops decorative chrome, keeps content,
   makes link URLs explicit (a11y for printed handouts).
   ------------------------------------------------------- */

@media print {
	body.theme-uncode {
		background: #ffffff !important;
		color: #000000;
		font-family: Georgia, "Times New Roman", serif;
	}
	.menu-wrapper,
	.rd-help-strip,
	.rd-footer,
	.rd-hero__bg,
	.rd-hero::after,
	.rd-hero__scroll-cue,
	.rd-wave-divider,
	.footer-scroll-top,
	.body-borders,
	.overlay,
	.rd-skip-link {
		display: none !important;
	}
	.rd-hero {
		min-height: 0 !important;
		background: none !important;
		padding: 0 !important;
	}
	.rd-hero__title,
	.rd-tools-section__title,
	.rd-community__title {
		color: #000000 !important;
		text-shadow: none !important;
	}
	.rd-tool-card {
		break-inside: avoid;
		border: 1px solid #cccccc !important;
		box-shadow: none !important;
	}
	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		color: #444;
		word-break: break-all;
	}
	a[href^="#"]::after,
	a[href^="javascript"]::after {
		content: "";
	}
}

/* -------------------------------------------------------
   Reduced motion — respect user preference site-wide
   (already in brand-polish.css, repeated here as belt-and-
   suspenders since this file ships in the perf bundle).
   ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.rd-skip-link,
	.rd-help-strip__cta .rd-btn-primary,
	.rd-tool-card,
	.rd-tool-card__icon {
		transition: none !important;
		animation: none !important;
	}
}