/**
 * Mainsail Visual Skin — Kadence Header/Footer Builder scoped restyling.
 *
 * MAM Phase 3.3 (final visual revision). This file does NOT define any
 * layout, positioning, display, or JavaScript-dependent property (no
 * `display`, `position`, `transform`, `top/left/right/bottom`, `z-index`,
 * `visibility`, or anything Kadence's own JS toggles for sticky/transparent
 * header or the mobile drawer). It restyles color, background, border,
 * spacing, and typography-adjacent properties on Kadence's OWN, real,
 * confirmed CSS classes/IDs — verified by reading the actual supplied
 * Kadence 1.5.2 source (paths cited in each section below) — plus Mainsail
 * Core's own shortcode output classes.
 *
 * Nothing in this file overrides Kadence markup, hooks, or behavior. It is
 * purely a "skin" layered on top of Kadence's unmodified Header/Footer
 * Builder, Customizer, and mobile drawer.
 *
 * COLOR SOURCE: the accent and dark-surface colors below were sampled
 * directly from the two supplied reference screenshots
 * (off_canvass_menu_desktop.png, off_canvass_menu_mobile.png) via pixel
 * analysis — not estimated by eye. Both images independently produced the
 * same dominant clusters, so these are used as real reference values
 * rather than invented brand colors. They are still approximate sRGB
 * averages of a compressed screenshot, not an official brand style guide
 * value — see docs/MAINSAIL-CHILD-THEME.md, "Cannot Safely Be Reproduced
 * Yet" for that caveat.
 */

:root {
	/* Dark surface (off-canvas mobile drawer, footer): sampled dark charcoal
	   cluster (#202020–#282828 range across both reference images). */
	--mainsail-color-dark-surface: #222222;
	--mainsail-color-dark-surface-text: #f2f2f2;
	--mainsail-color-dark-surface-muted: #b8b8b8;
	--mainsail-color-dark-surface-border: rgba(255, 255, 255, 0.14);

	/* Brand accent: sampled bright cyan-blue cluster, consistent across
	   both reference images (#24bef5 primary cluster, #40a2d9 secondary/
	   deeper cluster). */
	--mainsail-color-accent: #24bef5;
	--mainsail-color-accent-deep: #40a2d9;

	/* Optional background photo for the mobile off-canvas drawer, matching
	   the reference design's photo-with-dark-overlay treatment. Left EMPTY
	   by default — see the ".mobile-navigation" section below for why this
	   is opt-in via a data-attribute, not a hardcoded image URL. */
	--mainsail-mobile-nav-bg-image: none;
}

/* ======================================================================
   HEADER — desktop
   Wrapper classes confirmed in:
   inc/template-functions/header-functions.php (row wrapper class builder,
   `'site-' . $row . '-header-wrap site-header-row-container ...'`)
   ====================================================================== */

/* Header row background/border. Kadence's own Customizer already offers
   per-row background color controls — this rule exists only as a
   fallback/accent (a subtle bottom border) that Kadence's color picker
   does not expose on its own, keeping the header visually anchored the
   way the reference design's thin header/hero division reads. Does not
   touch layout, height, or position. */
.site-main-header-wrap {
	border-bottom: 1px solid var(--mainsail-color-dark-surface-border);
}

/* Primary navigation link color/hover accent. Confirmed real classes:
   #site-navigation.main-navigation.header-navigation (desktop). Kadence's
   Customizer already controls base nav color; this adds the brand accent
   specifically on hover/focus, matching the reference's cyan link-hover
   treatment, without touching Kadence's dropdown-toggle JS/classes. */
.main-navigation a:hover,
.main-navigation a:focus {
	color: var(--mainsail-color-accent-deep);
}

/* Header "Button" row (used for the global CTA per docs/MAINSAIL-CHILD-
   THEME.md §6). Confirmed real class: `.button.header-button` built in
   header-functions.php's header_button(). Kadence's own Button Style
   customizer control already sets a base color; this rule provides the
   specific brand-accent fill so the CTA reads as "the same blue" as the
   reference design's phone/CTA treatment, and is scoped ONLY to the
   header-button class — it does not restyle every button on the site. */
.header-button.button-style-standard,
.header-button.button-style-outline {
	background-color: var(--mainsail-color-accent-deep);
	border-color: var(--mainsail-color-accent-deep);
	color: #ffffff;
}

.header-button.button-style-standard:hover,
.header-button.button-style-outline:hover {
	background-color: var(--mainsail-color-accent);
	border-color: var(--mainsail-color-accent);
}

/* ======================================================================
   HEADER — mobile / off-canvas drawer
   Wrapper classes confirmed in:
   inc/template-functions/header-functions.php line ~601:
   `#mobile-site-navigation.mobile-navigation.drawer-navigation`
   and line ~603: `.mobile-menu-container.drawer-menu-container`
   Kadence's own Customizer already has a background COLOR control
   (mobile_navigation_background, confirmed in
   inc/customizer/options/header-mobile-nav-options.php) — that native
   control is the correct place to set a plain dark background color
   (Category A). The rules below add ONLY what Kadence's color picker
   cannot: an optional background PHOTO layer (matching the reference
   design's photo-plus-dark-overlay off-canvas panel) and the specific
   sampled dark tone as a CSS fallback if the admin hasn't set the native
   color control yet.
   ====================================================================== */

.mobile-navigation.drawer-navigation {
	background-color: var(--mainsail-color-dark-surface);
	color: var(--mainsail-color-dark-surface-text);
}

/*
 * Optional background photo layer. Deliberately OFF by default
 * (`--mainsail-mobile-nav-bg-image: none` in :root above) rather than
 * hardcoding a specific image URL in this stylesheet: no reference image
 * file was supplied as an asset to bundle (only screenshots were
 * supplied, which are evidence of the design, not a usable production
 * asset), and hardcoding a guessed/placeholder photo path would break on
 * a real site. To enable this, set the custom property to a real image
 * URL — e.g. in a small snippet or via the Customizer's "Additional CSS"
 * field: :root { --mainsail-mobile-nav-bg-image: url(...); } — no theme
 * file edit required. See docs/MAINSAIL-CHILD-THEME.md.
 */
.mobile-navigation.drawer-navigation {
	background-image: var(--mainsail-mobile-nav-bg-image);
	background-size: cover;
	background-position: center;
}

.mobile-navigation.drawer-navigation .mobile-menu-container a {
	color: var(--mainsail-color-dark-surface-text);
}

.mobile-navigation.drawer-navigation .mobile-menu-container a:hover,
.mobile-navigation.drawer-navigation .mobile-menu-container a:focus {
	color: var(--mainsail-color-accent);
}

/* Mobile HTML row (holds [mainsail_phone]/[mainsail_email]/[mainsail_address]/
   [mainsail_socials] per docs/MAINSAIL-CHILD-THEME.md §1). Confirmed real
   class: `.mobile-html` from header-functions.php::mobile_html(). */
.mobile-navigation .mobile-html,
.mobile-navigation .mobile-html a {
	color: var(--mainsail-color-dark-surface-text);
}

.mobile-navigation .mobile-html a:hover,
.mobile-navigation .mobile-html a:focus {
	color: var(--mainsail-color-accent);
}

/* ======================================================================
   FOOTER
   Row wrapper classes confirmed in:
   template-parts/footer/footer-row.php:
   `.site-{row}-footer-wrap.site-footer-row-container` (row = top/middle/bottom)
   Outer wrapper confirmed in template-parts/footer/base.php:
   `#colophon.site-footer` > `.site-footer-wrap`
   Widget heading class confirmed in footer-functions.php: `.widget-title`
   ====================================================================== */

#colophon.site-footer {
	background-color: var(--mainsail-color-dark-surface);
	color: var(--mainsail-color-dark-surface-muted);
}

#colophon.site-footer a {
	color: var(--mainsail-color-dark-surface-text);
}

#colophon.site-footer a:hover,
#colophon.site-footer a:focus {
	color: var(--mainsail-color-accent);
}

#colophon.site-footer .widget-title {
	color: var(--mainsail-color-dark-surface-text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.9rem;
}

/* Footer HTML row (holds Mainsail Core shortcodes). Confirmed real class:
   `.footer-html` from footer-functions.php::footer_html(). */
.site-footer .footer-html {
	color: var(--mainsail-color-dark-surface-muted);
}

/* ======================================================================
   Mainsail Core shortcode output (theme-agnostic classes owned by the
   Mainsail Core plugin itself — [mainsail_socials]/[mainsail_address] —
   carried over unchanged from the prior integration stylesheet). These
   are NOT Kadence classes; they exist regardless of which theme is
   active, so they are restyled here rather than left to chance default
   browser list styling wherever an admin pastes the shortcode.
   ====================================================================== */

.mainsail-socials {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mainsail-social-item a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.mainsail-social-item a:hover,
.mainsail-social-item a:focus {
	color: var(--mainsail-color-accent);
}

.mainsail-address {
	display: inline-block;
}