/**
 * McMyra brand chrome.
 *
 * Scoped to the site header so nothing here can reach the Elementor page content,
 * which is styled entirely through global classes and variables.
 *
 * Colours reference the Elementor global variables where they are available, with
 * the literal token value as a fallback for pages that do not load the Elementor
 * kit CSS (blog, search, 404).
 *
 *   --blue-pale  #dfefff
 *   --blue-deep  #00305e
 *   --ink        #0e2034
 *   --ink-soft   #4a5765
 *   --font-head  Audiowide
 *   --font-body  Exo 2
 */

/* ---------------------------------------------------------------
   0. Brand fonts (site-wide)
      Every face on the built pages resolves through --font-head and
      --font-body, which the Elementor kit defines in its own :root block
      (post-6.css). That block still names the previous pair, so the new
      one is pinned here on html:root - specificity (0,1,1) against the
      kit's (0,1,0), so it wins regardless of stylesheet order. If the kit
      CSS is ever edited, change it there too and drop this block.

      The stacks fall back to the pair they replaced, then to system sans,
      so nothing loses its shape if a webfont fails.
   --------------------------------------------------------------- */

html:root {
	--font-head: "Audiowide", "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-body: "Exo 2", "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Astra renders the nav, footer, blog, search and 404 outside Elementor,
   where it falls back to the system stack. Point those at the same two
   variables. Kept at element-level specificity so any Elementor widget
   rule still outranks it on the built pages. */

body,
button,
input,
select,
textarea {
	font-family: var( --font-body );
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var( --font-head );
}

/* ---------------------------------------------------------------
   1. Header logo
      The design's .brand-mark put the logo on a pale-blue chip; the client
      does not want it, so the logo sits bare on the white header. Only the
      display rule remains, to kill the inline-image baseline gap.
   --------------------------------------------------------------- */

.site-header .site-branding .custom-logo-link img,
.ast-mobile-header-wrap .site-branding .custom-logo-link img {
	display: block;
}

/* ---------------------------------------------------------------
   2. Footer logo chip - design: .footer-mark
      height 68px, background --white, radius 12px, padding 12px 16px
      The logo is dark navy on a --blue-deep footer, so the white chip is
      what makes it legible, not decoration: without it the darkest ink
      sits at 1.28:1 against the background.
   --------------------------------------------------------------- */

.site-footer .mcmyra-footer-mark {
	display: inline-block;
	margin: 0;
	padding: 12px 16px;
	border-radius: 12px;
	background: var( --white, #ffffff );
}

.site-footer .mcmyra-footer-mark img {
	display: block;
}

/* ---------------------------------------------------------------
   3. Brand name and tagline - design: .brand-name / .brand-sub
      Set in the Audiowide / Exo 2 display pair, which echoes the lettering in
      the logo. Each falls back to the page font it replaced.
      Astra free exposes size and colour for these but not font family, and
      its colour picker is a theme mod, so the brand deep blue is pinned here
      to keep it with the rest of the header chrome.
   --------------------------------------------------------------- */

.site-header .site-title,
.site-header .site-title a,
.ast-mobile-header-wrap .site-title,
.ast-mobile-header-wrap .site-title a {
	font-family: var( --font-head );
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var( --blue-deep, #00305e );
}

/* Astra tints the title link on hover; hold the brand colour instead. */
.site-header .site-title a:hover,
.site-header .site-title a:focus,
.ast-mobile-header-wrap .site-title a:hover,
.ast-mobile-header-wrap .site-title a:focus {
	color: var( --blue-deep, #00305e );
}

.site-header .site-description,
.ast-mobile-header-wrap .site-description {
	font-family: var( --font-body );
	font-weight: 700;
	color: var( --blue-deep, #00305e );
}

/* ---------------------------------------------------------------
   4. Floating WhatsApp bubble (site-wide)
      Astra's scroll-to-top also lives bottom-right, so it is lifted
      above the bubble rather than left to overlap it. The lift is
      unscoped because the bubble renders on every page.
   --------------------------------------------------------------- */

.mcmyra-wa-bubble {
	position: fixed;
	inset-block-end: 24px;
	inset-inline-end: 24px;
	z-index: 999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 999px;
	background: #25d366;               /* WhatsApp brand green */
	color: #ffffff;
	box-shadow: 0 6px 20px rgba( 14, 32, 52, 0.28 );
	transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.mcmyra-wa-bubble:hover,
.mcmyra-wa-bubble:focus-visible {
	background: #1da851;
	color: #ffffff;
	transform: translateY( -2px );
	box-shadow: 0 10px 26px rgba( 14, 32, 52, 0.34 );
}

.mcmyra-wa-bubble:focus-visible {
	outline: 3px solid var( --amber, #eca758 );
	outline-offset: 3px;
}

/* keep Astra's back-to-top clear of the bubble */
#ast-scroll-top {
	inset-block-end: 100px;
}

@media (max-width: 767px) {
	.mcmyra-wa-bubble {
		width: 54px;
		height: 54px;
		inset-block-end: 18px;
		inset-inline-end: 18px;
	}

	#ast-scroll-top {
		inset-block-end: 86px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mcmyra-wa-bubble {
		transition: none;
	}

	.mcmyra-wa-bubble:hover,
	.mcmyra-wa-bubble:focus-visible {
		transform: none;
	}
}