/**
 * Kings Island Central (KIC) - custom styles
 * ------------------------------------------------------------------
 * This is the intended place for ALL custom CSS for the KIC redesign.
 *
 * Safe to edit from the WordPress admin:
 *   Appearance > Theme File Editor > Hello Elementor Child
 *   > assets/css/custom.css
 *
 * This file is enqueued by functions.php with a filemtime()-based version
 * string, so saved changes appear on the next page load without a cache flush.
 *
 * Do not put styles in style.css - that file only carries the child theme
 * header WordPress needs to recognise the theme.
 * ------------------------------------------------------------------
 */

/* ==================================================================
   TYPOGRAPHY - NO WEBFONT IS ENQUEUED, AND THAT IS DELIBERATE
   ------------------------------------------------------------------
   The Showcase design specifies the system font stack, so no webfont is
   enqueued: no @font-face, no Google Fonts request, zero font bytes and no
   font-swap reflow. Text resolves to the visitor's own system sans.

   You WILL see "Inter" named inside the inherited Elementor font stacks
   (-apple-system, BlinkMacSystemFont, Inter, "Segoe UI", sans-serif) and in
   leftover data-google-font="Inter" attributes. Nothing loads it: Inter sits
   third, behind the two system keywords, so it is only ever consulted if the
   visitor already has it installed. Naming it is harmless.

   Production does serve Inter as a webfont, so type here will not match it
   exactly. That difference is intended and owner-approved (2026-08-09) - it
   is not an oversight. Please do NOT "fix" it by adding an @font-face or a
   Google Fonts enqueue. If Inter is ever genuinely wanted, that needs a fresh
   decision from the owner, not a drive-by change here.
   ================================================================== */

/* ==================================================================
   0. BRAND PALETTE - CANONICAL TOKENS
   ------------------------------------------------------------------
   The designer's five colours, sampled from colorbars.png. These are the
   single source of truth for this layer; the Elementor Global Kit (post
   46835), the kic-gallery plugin and the SvelteKit photo archive all carry
   the same five hexes under parallel names. See scratchpad/palette/PALETTE.md
   for the cross-layer mapping.

   Each --kic-* token below is mirrored by an Elementor global. Prefer the
   Elementor global with a --kic-* fallback in rules that style Elementor
   markup (so an editor colour change still propagates); use the bare --kic-*
   token in rules that style our own markup.

   Contrast, measured (WCAG 2.1 relative luminance):
     ink   #0E0F3B on white .......... 18.26:1   body text OK
     navy  #07407B on white .......... 10.35:1   body text OK  (was 9.32:1)
     navy  #07407B on surface ......... 9.51:1   body text OK  (was 8.56:1)
     white on navy #07407B ........... 10.35:1   button text OK
     sky   #7FCDEE on ink ............ 10.32:1   body text OK
     sky   #7FCDEE on navy ............ 5.85:1   body text OK
     ink   #0E0F3B on orange .......... 7.95:1   CTA label OK

   Two hard limits, both deliberate:
     sky    #7FCDEE on white .......... 1.77:1   NEVER text or a UI border
     orange #F7931E on white .......... 2.30:1   NEVER text or a UI border
   Orange is a FILL that carries dark text, plus small non-load-bearing
   accents. It is never the foreground on a light surface, and an orange
   state indicator is never the *only* signal of that state - pair it with a
   weight or colour change that clears 3:1 on its own.
   ================================================================== */

:root {
	/* --- the five canonical brand colours --- */
	--kic-ink: #0e0f3b; /* deep ink navy - dark surfaces, deepest brand tone */
	--kic-navy: #07407b; /* blue - links, buttons, primary brand blue */
	--kic-sky: #7fcdee; /* sky - accents on DARK surfaces only */
	--kic-orange: #f7931e; /* CTA fill + highlights - dark text only, never on white */
	--kic-white: #ffffff;

	/* --- neutrals that carry the Showcase design (unchanged) --- */
	--kic-heading: #1d1d1f; /* headings / primary ink */
	--kic-text: #6e6e73; /* secondary body text */
	--kic-surface: #f5f5f7; /* tinted surface */
	--kic-muted: #a1a1a6; /* muted grey, on dark only */
	--kic-disabled: #c7c7cc;

	/* --- derived, on-palette --- */
	--kic-cta-fg: var(--kic-ink); /* the only foreground allowed on --kic-orange */
	--kic-line: rgba(0, 0, 0, 0.08);
	--kic-line-2: rgba(0, 0, 0, 0.12);
	--kic-navy-tint: rgba(7, 64, 123, 0.09); /* navy at 9% - hairlines/tracks */
}

/* ==================================================================
   1. STICKY HEADER WITH SHRINK-ON-SCROLL LOGO
   ------------------------------------------------------------------
   Markup comes from the Elementor Theme Builder header template
   "KIC Site Header" (post 46826, display condition: Entire Site):

     <header class="elementor elementor-46826 elementor-location-header">
       <div id="kic-header" class="... kic-header e-con">        <- the bar
         <div class="... kic-header__inner e-con">               <- 1180px row
           <div class="... kic-header__logo elementor-widget-image">
             <a href="/"><img src=".../kic-horizontal-logo.svg"></a>
           </div>
           <div class="... kic-header__nav elementor-widget-nav-menu">...</div>
         </div>
       </div>
     </header>

   Why position:fixed and not position:sticky
   ------------------------------------------
   A sticky element can only travel inside its own containing block. Here
   the containing block is <header class="elementor-location-header">, which
   is exactly as tall as the bar, so `position: sticky` would never move.
   Sticky also stays in normal flow, so shrinking the bar from 80px to 52px
   would pull the whole page up by 28px mid-scroll - a visible content jump.

   position:fixed takes the bar out of flow entirely, and we reserve the
   space with a CONSTANT `body { padding-top: <tall height> }`. That padding
   never changes, so the bar can shrink with exactly zero layout shift (CLS 0)
   and nothing below it ever moves.

   What is animated
   ----------------
   `height` on #kic-header and `height` on the logo <img>. Both live inside a
   position:fixed subtree, so reflow is confined to the bar itself and can
   never touch document layout. Transitioning height (rather than transform:
   scale) keeps the element's layout box honest, which means the nav stays
   vertically centred and hit areas stay correct at every point of the
   animation. The subtree is two elements deep, so the reflow cost is trivial.

   The state class `.kic-header--scrolled` is toggled by
   assets/js/header-scroll.js. ALL sizing lives here in CSS - the JS never
   writes a style.

   Selectors are prefixed with #kic-header on purpose. Elementor's container
   styles (.e-con, .e-con-full, .e-flex) are authored at 0,2,0 specificity and
   are printed in <head> at an order we do not control, so an ID prefix is the
   only reliable way to win without scattering !important.
   ================================================================== */

:root {
	/* Bar height at the top of the page / once scrolled. */
	--kic-header-h: 80px;
	--kic-header-h-scrolled: 52px;

	/* Logo height at the top of the page / once scrolled.
	   The lockup is 5.5:1, so 48px tall renders 264px wide and
	   26px tall renders 143px wide. */
	--kic-logo-h: 48px;
	--kic-logo-h-scrolled: 26px;

	/* Shared motion. ~220ms ease-out feels immediate without snapping. */
	--kic-header-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--kic-header-dur: 220ms;

	/* Page gutter, matches the 1180px content width of the global kit. */
	--kic-header-gutter: 20px;
}

@media (max-width: 1024px) {
	:root {
		--kic-header-h: 68px;
		--kic-header-h-scrolled: 52px;
		--kic-logo-h: 40px;
		--kic-logo-h-scrolled: 24px;
	}
}

@media (max-width: 600px) {
	:root {
		--kic-header-h: 60px;
		--kic-header-h-scrolled: 50px;
		--kic-logo-h: 32px;
		--kic-logo-h-scrolled: 22px;
		--kic-header-gutter: 16px;
	}
}

/* Reserve the bar's TALL height once and never change it -> no layout shift
   when the bar shrinks. Only applied when the Elementor header is actually
   on the page, so a page rendered without the template is unaffected. */
body:has(> .elementor-location-header #kic-header) {
	padding-top: var(--kic-header-h);
}

/* Fallback for browsers without :has() - Elementor's header location always
   renders directly inside <body>, so this is safe. */
@supports not selector(body:has(> *)) {
	body {
		padding-top: var(--kic-header-h);
	}
}

/* In-page anchors must not land underneath the bar. */
html {
	scroll-padding-top: calc(var(--kic-header-h-scrolled) + 8px);
}

/* The Elementor location wrapper collapses to 0 height (its only child is
   fixed). Keep it out of the way but above page content for focus outlines. */
.elementor-location-header {
	position: relative;
	z-index: 999;
}

/* ---- 1.1 The bar ------------------------------------------------- */

#kic-header.kic-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 999;

	height: var(--kic-header-h);
	min-height: 0;
	width: 100%;
	max-width: 100%;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

	/* Neutralise Elementor's container padding/gap custom properties. */
	--padding-top: 0px;
	--padding-right: var(--kic-header-gutter);
	--padding-bottom: 0px;
	--padding-left: var(--kic-header-gutter);
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	padding: 0 var(--kic-header-gutter);
	gap: 0;

	/* Frosted-glass Apple nav. No shadow anywhere - hairline only. */
	background-color: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: none;

	overflow: visible;
	transition: height var(--kic-header-dur) var(--kic-header-ease);
}

/* Browsers without backdrop-filter get a near-opaque bar so text stays
   readable over whatever scrolls beneath it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	#kic-header.kic-header {
		background-color: rgba(255, 255, 255, 0.97);
	}
}

#kic-header.kic-header.kic-header--scrolled {
	height: var(--kic-header-h-scrolled);
}

/* Logged-in users: sit below the WP admin bar instead of under it. */
body.admin-bar #kic-header.kic-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar #kic-header.kic-header {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	/* Below 600px the admin bar is not fixed, so it scrolls away. */
	body.admin-bar #kic-header.kic-header {
		top: 0;
	}
}

/* ---- 1.2 The 1180px row ------------------------------------------ */

#kic-header .kic-header__inner {
	width: 100%;
	max-width: 1180px;
	height: 100%;
	margin: 0 auto;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;

	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 24px;
	--row-gap: 24px;
	--column-gap: 24px;
	padding: 0;
	gap: 24px;

	overflow: visible;
}

/* ---- 1.3 Logo (shrinks on scroll) -------------------------------- */

#kic-header .kic-header__logo {
	flex: 0 0 auto;
	width: auto;
	max-width: 60%;
	line-height: 0;
}

/* Elementor 4.x renders the image widget without a .elementor-widget-container
   wrapper, so the <a> is a direct child of the widget element. */
#kic-header .kic-header__logo a {
	display: block;
	line-height: 0;
}

/*
 * The SVG file declares width="3520" height="640", so it MUST be given an
 * explicit height with width:auto or it lays out 3520px wide. max-width:none
 * defeats the theme's global `img { max-width: 100% }`, which would otherwise
 * cap the 264px lockup on narrow viewports and break the 5.5:1 ratio.
 */
#kic-header .kic-header__logo img {
	display: block;
	height: var(--kic-logo-h);
	width: auto;
	max-width: none;
	object-fit: contain;
	transition: height var(--kic-header-dur) var(--kic-header-ease);
}

#kic-header.kic-header--scrolled .kic-header__logo img {
	height: var(--kic-logo-h-scrolled);
}

/* ---- 1.4 Navigation ----------------------------------------------
 *
 * Two things about the Elementor Pro nav-menu widget drive the rules below.
 *
 * 1. Elementor 4.x renders this widget WITHOUT the usual
 *    .elementor-widget-container wrapper, and instead makes the widget
 *    element itself `display:flex; flex-direction:column` (see
 *    widget-nav-menu.min.css). The desktop <nav>, the burger and the mobile
 *    panel are all direct children of .kic-header__nav.
 *
 * 2. The class `.elementor-nav-menu--dropdown` is on BOTH the desktop
 *    sub-menu <ul>s and the mobile panel <nav>. Mobile-only rules must
 *    therefore be qualified with `nav.` or they leak into the desktop
 *    dropdowns.
 * ------------------------------------------------------------------ */

#kic-header .kic-header__nav {
	flex: 0 1 auto;
	align-self: stretch; /* the nav column is as tall as the bar */
	display: flex;
	flex-direction: column;
	align-items: flex-end; /* desktop nav and burger both sit flush right */
	justify-content: center;
	min-width: 0;
	width: auto;
}

/*
 * Top-level links fill the full height of the bar. Two reasons:
 *   - a 13px link with no padding is a ~16px tall click target; full height
 *     gives a comfortable 80px / 52px one.
 *   - SmartMenus positions each dropdown at the bottom edge of its anchor,
 *     so a full-height anchor makes the panel land exactly on the bar's
 *     hairline instead of overlapping it.
 */
#kic-header .elementor-nav-menu--main {
	height: 100%;
}

#kic-header .elementor-nav-menu--main .elementor-nav-menu {
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 26px;
	margin: 0;
	padding: 0;
}

#kic-header .elementor-nav-menu--main .elementor-nav-menu > li {
	display: flex;
	align-items: stretch;
	position: relative;
}

#kic-header .elementor-nav-menu--main .elementor-nav-menu > li > .elementor-item {
	display: inline-flex;
	align-items: center;
	height: 100%;
	padding: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	white-space: nowrap;
	color: var(--e-global-color-primary, #1d1d1f);
	background: transparent;
	fill: currentColor;
	transition: color 150ms ease-out;
}

#kic-header .elementor-nav-menu--main .elementor-nav-menu > li > .elementor-item:hover,
#kic-header .elementor-nav-menu--main .elementor-nav-menu > li > .elementor-item:focus,
#kic-header .elementor-nav-menu--main .elementor-nav-menu > li > .elementor-item.elementor-item-active,
#kic-header .elementor-nav-menu--main .elementor-nav-menu > li > .elementor-item.highlighted {
	color: var(--e-global-color-kicnavy, #07407b);
	background: transparent;
}

/*
 * A 4px CSS chevron marks the 7 items that have a dropdown.
 *
 * It is drawn inside the <span class="sub-arrow"> that SmartMenus already
 * injects, rather than on an ::after of the link. Two reasons: the widget's
 * own icon control would pull in the entire Font Awesome stylesheet for one
 * glyph, and the sub-arrow span is a real flex child that reserves its own
 * width - an ::after was being squeezed into the link box and printing on
 * top of the label.
 */
#kic-header .elementor-nav-menu--main .sub-arrow {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 9px;
	margin: 0 0 0 3px;
	font-size: 0;
	line-height: 0;
}

#kic-header .elementor-nav-menu--main .sub-arrow::before {
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-1px) rotate(45deg);
	opacity: 0.55;
}

/* The empty <i> Elementor prints inside the sub-arrow must not take space. */
#kic-header .elementor-nav-menu--main .sub-arrow i {
	display: none;
}

/* "Forums" is the last item and reads as a right-aligned utility link:
   set in KIC Navy and separated by a short hairline (a pseudo-element, so
   the rule does not run the full height of the bar). */
#kic-header .elementor-nav-menu--main .elementor-nav-menu > li:last-child {
	margin-left: 4px;
	padding-left: 26px;
}

#kic-header .elementor-nav-menu--main .elementor-nav-menu > li:last-child::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	width: 1px;
	height: 16px;
	margin-top: -8px;
	background-color: rgba(0, 0, 0, 0.14);
}

#kic-header .elementor-nav-menu--main .elementor-nav-menu > li:last-child > .elementor-item {
	color: var(--e-global-color-kicnavy, #07407b);
	font-weight: 600;
}

/* ---- 1.5 Desktop dropdowns ---------------------------------------- */

/*
 * SmartMenus (the library Elementor Pro drives the desktop menu with) writes
 * `min-width: 10em; max-width: 20em` as an INLINE style every time it opens a
 * sub-menu, which is why this one declaration needs !important - a plain
 * stylesheet rule loses to the inline style and the panels come out at
 * inconsistent 137-180px widths as you move across the bar.
 */
#kic-header .elementor-nav-menu--main ul.elementor-nav-menu--dropdown {
	min-width: 200px !important;
	padding: 6px 0;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	/* Solid white, deliberately NOT frosted: the frosting is the bar's job,
	   and a translucent panel leaves a faint ghost of the page showing
	   through the menu labels. Hairline border, no shadow. */
	background-color: #ffffff;
	box-shadow: none;
	overflow: hidden;
}

#kic-header .elementor-nav-menu--main ul.elementor-nav-menu--dropdown .elementor-sub-item {
	display: block;
	padding: 8px 16px;
	border: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	white-space: nowrap;
	color: var(--e-global-color-primary, #1d1d1f);
	background: transparent;
	text-shadow: none;
	transition: color 150ms ease-out, background-color 150ms ease-out;
}

#kic-header .elementor-nav-menu--main ul.elementor-nav-menu--dropdown .elementor-sub-item:hover,
#kic-header .elementor-nav-menu--main ul.elementor-nav-menu--dropdown .elementor-sub-item:focus,
#kic-header .elementor-nav-menu--main ul.elementor-nav-menu--dropdown .elementor-sub-item.highlighted,
#kic-header .elementor-nav-menu--main ul.elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active {
	color: var(--e-global-color-kicnavy, #07407b);
	background-color: var(--e-global-color-kicsurf, #f5f5f7);
}

/* ---- 1.6 Mobile: burger + panel ------------------------------------
 * Below 1024px the widget hides the desktop <nav> and shows the burger plus
 * <nav class="elementor-nav-menu--dropdown">. Elementor leaves that panel in
 * normal flow unless the widget's "Full Width" option is on, which inside a
 * fixed 60px bar means the panel is laid out *inside* the bar and spills out
 * of it. We take it out of flow ourselves and hang it off the bar instead.
 *
 * IMPORTANT: Elementor collapses the closed panel with
 *   .elementor-menu-toggle:not(.elementor-active) + ... { max-height: 0 }
 * so any unconditional max-height here would pin the panel permanently open.
 * The cap below is therefore scoped to the .elementor-active state only.
 * ------------------------------------------------------------------ */

#kic-header .elementor-menu-toggle {
	margin: 0;
	padding: 6px;
	color: var(--e-global-color-primary, #1d1d1f);
	background-color: transparent;
	border-radius: 6px;
}

#kic-header .elementor-menu-toggle svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/*
 * Elementor gives every widget `position: relative`, which would make the
 * 34px-wide nav widget the containing block for the panel below. Below the
 * widget's own 1024px dropdown breakpoint the desktop menu is hidden and
 * nothing else depends on that containing block, so we release it and let
 * the panel resolve against #kic-header - i.e. the full width of the bar.
 */
@media (max-width: 1024px) {
	#kic-header .kic-header__nav {
		position: static;
	}
}

#kic-header nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
	position: absolute;
	/* Absolute offsets resolve against the bar's PADDING box, so the negative
	   inline insets cancel the bar's gutter and make the panel full-bleed;
	   the 1px top margin clears the bar's own bottom hairline instead of
	   doubling it. */
	top: 100%;
	left: calc(var(--kic-header-gutter) * -1);
	right: calc(var(--kic-header-gutter) * -1);
	width: auto;
	margin-top: 1px;
	z-index: 9997;
	border-top: 0;
	/* Solid white - see the desktop dropdown note. */
	background-color: #ffffff;
	box-shadow: none;
}

#kic-header .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu__container {
	max-height: calc(100vh - var(--kic-header-h));
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

#kic-header nav.elementor-nav-menu--dropdown .elementor-item,
#kic-header nav.elementor-nav-menu--dropdown .elementor-sub-item {
	padding: 12px var(--kic-header-gutter);
	border: 0;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--e-global-color-primary, #1d1d1f);
	background: transparent;
	text-shadow: none;
}

#kic-header nav.elementor-nav-menu--dropdown .elementor-sub-item {
	padding-inline-start: calc(var(--kic-header-gutter) + 16px);
	font-size: 14px;
	color: var(--e-global-color-text, #6e6e73);
}

/*
 * The mobile panel is collapsible: tapping the .sub-arrow expands that item's
 * sub-menu. Elementor prints an empty <i> in there, so without this the
 * expander is invisible and only ~10px wide. Same CSS chevron as the desktop
 * bar, but larger and inside a 32px tap target pushed to the trailing edge.
 */
#kic-header nav.elementor-nav-menu--dropdown .sub-arrow {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	align-self: stretch;
	margin-inline-start: auto;
	font-size: 0;
	line-height: 0;
}

#kic-header nav.elementor-nav-menu--dropdown .sub-arrow i {
	display: none;
}

#kic-header nav.elementor-nav-menu--dropdown .sub-arrow::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.5;
	transition: transform 180ms var(--kic-header-ease);
}

/* Flip the chevron while that branch is open. */
#kic-header nav.elementor-nav-menu--dropdown [aria-expanded="true"] .sub-arrow::before {
	transform: translateY(1px) rotate(-135deg);
}

#kic-header nav.elementor-nav-menu--dropdown .elementor-item:hover,
#kic-header nav.elementor-nav-menu--dropdown .elementor-item:focus,
#kic-header nav.elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
#kic-header nav.elementor-nav-menu--dropdown .elementor-sub-item:hover,
#kic-header nav.elementor-nav-menu--dropdown .elementor-sub-item:focus,
#kic-header nav.elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active {
	color: var(--e-global-color-kicnavy, #07407b);
	background-color: var(--e-global-color-kicsurf, #f5f5f7);
}

/* Nothing in the bar may create a horizontal scrollbar. */
#kic-header.kic-header,
#kic-header .kic-header__inner {
	max-width: 100vw;
}

/* ---- 1.7 Reduced motion -------------------------------------------
   Snap between the two states instead of animating. */
@media (prefers-reduced-motion: reduce) {
	#kic-header.kic-header,
	#kic-header .kic-header__logo img,
	#kic-header .elementor-item,
	#kic-header .elementor-sub-item,
	#kic-header nav.elementor-nav-menu__container {
		transition: none !important;
	}
}

/* ==================================================================
   2. CTA / HIGHLIGHT UTILITIES  (the orange)
   ------------------------------------------------------------------
   Orange is the warm note, not the theme. It is a FILL that carries dark
   text, plus small accents - never body text, never a large surface.

   Nothing on the site uses these classes yet: they are opt-in, added so
   that when a primary CTA or an active state is wanted there is one
   correct, measured way to reach for orange instead of ten ad-hoc ones.
   Add `kic-cta` to an Elementor Button widget's CSS Classes field.

   Why the foreground is ink navy and not white:
     #0E0F3B on #F7931E ... 7.95:1   PASS AA
     #FFFFFF on #F7931E ... 2.30:1   FAIL - white is never allowed here
   ================================================================== */

.kic-cta,
.elementor-button.kic-cta,
a.kic-cta {
	background-color: var(--e-global-color-kiccta, #f7931e);
	color: var(--e-global-color-kicink, #0e0f3b);
	/* #F7931E on white is only 2.30:1, so the fill alone cannot be relied on
	   to describe the button's edge. A 1px ink rim gives the control a
	   boundary that clears 3:1 against both the page and the fill. */
	border: 1px solid var(--e-global-color-kicink, #0e0f3b);
}

.kic-cta:hover,
.elementor-button.kic-cta:hover,
a.kic-cta:hover,
.kic-cta:focus-visible,
.elementor-button.kic-cta:focus-visible,
a.kic-cta:focus-visible {
	/* Invert rather than darken the orange: ink fill with white text is
	   18.26:1 and keeps the pair on-palette. */
	background-color: var(--e-global-color-kicink, #0e0f3b);
	color: var(--e-global-color-kicwhit, #ffffff);
}

/* A small highlight accent - the left rule on a pull quote, a "new" tick.
   Decorative only: never the sole carrier of meaning, because orange on
   white is 2.30:1 and cannot meet the 3:1 UI bar on its own. */
.kic-accent-bar {
	border-left: 3px solid var(--e-global-color-kiccta, #f7931e);
	padding-left: 14px;
}

/* Active-state underline, opt-in.
   Deliberately NOT bound to `#kic-header .elementor-item-active`: the live
   header is already-approved design, and restyling it is a design decision
   for the owner, not a side effect of a palette change. Two reasons to keep
   it opt-in beyond that:
     - orange on white is 2.30:1, so the underline can never be the only
       signal of "active" - it must accompany a colour/weight change that
       clears 3:1 by itself;
     - changing font-weight on the active item would reflow the nav row and
       show up as layout shift.
   Applied to a link that is already navy, the underline is pure decoration
   and the navy label (10.35:1 on white) carries the state. */
.kic-nav-active {
	color: var(--e-global-color-kicnavy, #07407b);
	box-shadow: inset 0 -2px 0 0 var(--e-global-color-kiccta, #f7931e);
}