/**
 * Direction B "Warm Modern" — production stylesheet.
 *
 * Contrast-corrected version of the original mockup. Every text/background
 * pairing below was checked programmatically against the WCAG formula
 * (relative luminance ratio), not estimated by eye. See
 * inc/accessibility.php for the full verified ratio table. Two corrections
 * from the original Direction B mockup hex values:
 *   1. Button background moved from #FF6B4A to #C4441F (white text on
 *      #FF6B4A measures 2.82:1 — fails badly; #C4441F measures 5.01:1 —
 *      passes AA with margin). #FF6B4A is retained as --coral-accent for
 *      large/decorative use (icons, large headline text, star ratings)
 *      where only the 3:1 large-text/UI threshold applies.
 *   2. Muted/meta text color moved from #9c8fab (3.03:1, fails) to
 *      #766685 (5.24:1, passes).
 */

:root {
	--peach: #FFE8D6;
	--cream: #FFFAF3;
	--coral-accent: #FF6B4A; /* CONFIRMED background/decorative use only (image gradients) — fails AA text contrast even at large display sizes (2.82:1), so this token must never be applied to any text, regardless of size */
	--coral-button: #C4441F; /* verified 5.01:1 with white text — use for all button backgrounds and any normal-size text-on-coral */
	--plum: #3B2A4A;
	--plum-muted: #5d5269;   /* secondary text, verified 7.30:1 on white */
	--gray-meta: #766685;    /* tertiary/meta text, verified 5.24:1 on white (replaces a non-passing #9c8fab used in early drafts) */
	--teal: #1F7A6C;
	--line: #F0DFCB;
	--focus-ring: #1A56DB;   /* high-contrast blue, distinct from brand palette on purpose — see focus-visible note below */
	--error-red: #C0392B;    /* verified 5.44:1 on white */

	--font-display: 'Sora', sans-serif;
	--font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

body {
	font-family: var(--font-body);
	color: var(--plum);
	background: var(--cream);
	line-height: 1.6; /* WCAG 1.4.8: line-height at least 1.5x font size for body text */
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; }

/* ===========================================================
   ACCESSIBILITY: focus visibility (WCAG 2.4.7)
   Every interactive element gets a clearly visible focus ring,
   distinct in color from the brand palette specifically so it's
   never mistaken for decorative hover styling and stays visible
   regardless of which element/background it appears against.
   :focus-visible (not bare :focus) so the ring shows for keyboard
   navigation without adding visual noise to mouse clicks --
   matches actual user expectation in modern browsers.
   =========================================================== */
:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: 2px;
}
/* Fallback for older browsers without :focus-visible support --
   degrades to showing the ring on all focus, which is the safer
   failure direction (visible-but-unnecessary beats invisible). */
.no-focus-visible-support :focus {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

/* ===========================================================
   ACCESSIBILITY: skip link (WCAG 2.4.1, Bypass Blocks)
   Visually hidden until focused, then snaps into view at the very
   top of the page so keyboard/screen-reader users can jump past
   the header navigation straight to main content.
   =========================================================== */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--plum);
	color: #fff;
	padding: 14px 24px;
	font-weight: 600;
	border-radius: 0 0 8px 0;
}
.skip-link:focus {
	left: 0;
}

/* ===========================================================
   ACCESSIBILITY: screen-reader-only text (used for link context,
   form labels that are visually implicit, etc.) — standard
   visually-hidden-but-accessible pattern.
   =========================================================== */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto; height: auto;
	margin: 0; padding: 14px 24px;
	clip: auto;
	background: var(--plum);
	color: #fff;
}

/* ===========================================================
   ACCESSIBILITY: reduced motion (WCAG 2.3.3 / prefers-reduced-motion)
   Anyone with this OS-level preference set gets all transitions/
   animations reduced to near-instant — respects vestibular disorder
   and motion-sensitivity needs without removing functionality.
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ===========================================================
   HEADER / NAV
   =========================================================== */
.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 26px 0;
	border-bottom: 1px solid var(--line);
}
.site-logo {
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 800;
	color: var(--plum);
	text-decoration: none;
}
.site-logo .accent { color: var(--coral-button); }

.primary-nav ul {
	display: flex;
	gap: 34px;
	list-style: none;
	margin: 0; padding: 0;
}
.primary-nav a {
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
}
.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
	border-bottom-color: var(--coral-button);
}

.nav-cta {
	background: var(--coral-button);
	color: #fff;
	padding: 12px 24px;
	border-radius: 30px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.nav-cta:hover { background: #A83A1B; } /* verified 6.39:1 — genuinely darker than the default button color on hover, not a duplicate of it */

/* Mobile nav toggle — button (not div/span) so it's natively keyboard-
   operable and announced correctly by screen readers (WCAG 4.1.2). */
.nav-toggle {
	display: none;
	background: none;
	border: 2px solid var(--plum);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

@media (max-width: 600px) {
	/* Hide nav and toggle by default at mobile width */
	.primary-nav { display: none; }
	.nav-toggle { display: block; }
	.nav-cta { display: none; } /* hide the header CTA button — it's also in the dropdown */

	/* Dropdown: absolutely positioned against .site-header (which gets
	   position:relative below), full width, sits flush below the header bar */
	.primary-nav.is-open {
		display: block;
		position: absolute;
		top: 100%;        /* flush below the header bar */
		left: 0;
		right: 0;
		background: var(--plum);
		z-index: 9999;
		padding: 8px 0 16px;
		box-shadow: 0 8px 24px rgba(59,42,74,.18);
	}

	/* Stack links vertically, full-width tap targets */
	.primary-nav.is-open ul {
		flex-direction: column;
		gap: 0;
		padding: 0;
		margin: 0;
	}
	.primary-nav.is-open ul li {
		width: 100%;
	}
	.primary-nav.is-open a {
		display: block;
		padding: 14px 24px;
		color: #fff;
		font-size: 16px;
		border-bottom: 1px solid rgba(255,255,255,.08);
		text-decoration: none;
	}
	.primary-nav.is-open a:hover,
	.primary-nav.is-open a[aria-current="page"] {
		background: rgba(255,255,255,.08);
		border-bottom-color: transparent;
	}

	/* Book Free Consult — real link at the bottom of the dropdown,
	   styled as a button. Only visible in the mobile dropdown via the
	   .nav-menu-cta class added in jmt_default_primary_menu(). */
	.primary-nav.is-open .nav-menu-cta a {
		margin: 12px 16px 0;
		padding: 13px;
		background: var(--coral-button);
		color: #fff !important;
		font-weight: 700;
		font-size: 15px;
		text-align: center;
		border-radius: 30px;
		border-bottom: none;
		display: block;
	}
	.primary-nav.is-open .nav-menu-cta a:hover {
		background: #A83A1B;
	}
}

/* Give .site-header a positioning context so the absolute dropdown
   anchors to it rather than the nearest positioned ancestor */
@media (max-width: 600px) {
	.site-header { position: relative; }
}

/* ===========================================================
   HERO
   =========================================================== */
.hero { padding: 64px 0 90px; position: relative; overflow: hidden; }
.hero::before {
	content: '';
	position: absolute; top: -200px; right: -200px;
	width: 560px; height: 560px;
	background: var(--peach);
	border-radius: 50%;
	z-index: 0; opacity: .6;
}
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 1; }

.badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: #fff; border: 1px solid var(--line);
	padding: 8px 16px; border-radius: 30px; font-size: 13px; font-weight: 600;
	margin-bottom: 26px;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }

.hero h1 { font-size: 54px; line-height: 1.05; margin: 0 0 22px; }
.hero h1 .hl { color: var(--coral-button); } /* NOTE: even at 54px display size, --coral-accent (#FF6B4A) measures only 2.82:1 on white -- fails even the relaxed 3:1 large-text threshold. --coral-button (#C4441F, 5.01:1) is required here, not just for buttons. */
.hero > .wrap > .hero-grid > div:first-child > p {
	font-size: 18px; color: var(--plum-muted); max-width: 460px; margin-bottom: 34px;
}

.btn-primary {
	display: inline-block;
	background: var(--coral-button);
	color: #fff;
	padding: 17px 32px;
	border-radius: 30px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(224,81,47,.28);
	border: none;
	cursor: pointer;
}
.btn-primary:hover { background: #A83A1B; }

.btn-ghost {
	display: inline-block;
	color: var(--plum);
	padding: 17px 8px;
	font-weight: 700;
	font-size: 15px;
	margin-left: 18px;
	border-bottom: 2px solid var(--plum);
	text-decoration: none;
}

.hero-img-frame {
	aspect-ratio: 1/1;
	background: linear-gradient(150deg, #FFD9C2, #FF8F6B);
	border-radius: 32px;
	position: relative;
	overflow: hidden;
}
.hero-img-frame img {
	width: 100%; height: 100%; object-fit: cover;
	display: block;
}

.float-card {
	position: absolute; bottom: -22px; left: -28px;
	background: #fff; border-radius: 18px; padding: 18px 22px;
	box-shadow: 0 16px 40px rgba(59,42,74,.14);
	font-size: 13px; font-weight: 600;
	display: flex; align-items: center; gap: 10px;
	max-width: 280px;
}
/* Stars use both color AND a text label for the screen-reader audience
   (WCAG 1.4.1, Use of Color — rating can't be conveyed by color/glyph alone). */
.stars { color: var(--coral-button); font-size: 14px; } /* star glyphs are text characters (★ U+2605), not pure decoration -- held to the same contrast bar as text, where --coral-accent fails even at large sizes (see hero .hl note above) */
.stars .screen-reader-text-rating { } /* placeholder hook -- actual numeric rating text added per-instance in template markup, e.g. "5 out of 5 stars", since the glyphs alone don't convey the rating to screen reader users per WCAG 1.1.1 */

/* ===========================================================
   SECTIONS — shared
   =========================================================== */
.section { padding: 90px 0; }
.section-head { max-width: 600px; margin: 0 auto 56px; text-align: center; }
.kicker {
	display: inline-block; background: var(--peach); color: #9C5024; /* verified 4.95:1 on peach background — see contrast table in inc/accessibility.php */
	font-size: 12.5px; font-weight: 700; padding: 6px 16px; border-radius: 30px; margin-bottom: 16px;
}
.section-head h2 { font-size: 36px; margin: 0; }
.section-head p { color: var(--plum-muted); margin-top: 12px; font-size: 15px; }

/* ===========================================================
   APPROACH CARDS
   =========================================================== */
.approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.approach-card { background: #fff; border-radius: 24px; padding: 36px 28px; border: 1px solid var(--line); }
.approach-card .icon {
	width: 52px; height: 52px; border-radius: 16px; background: var(--peach);
	display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 20px;
}
.approach-card h3 { font-size: 19px; margin: 0 0 10px; }
.approach-card p { font-size: 14.5px; color: var(--plum-muted); margin: 0; }

@media (max-width: 860px) {
	.approach-grid { grid-template-columns: 1fr; }
	.hero-grid { grid-template-columns: 1fr; }
	.hero h1 { font-size: 38px; }
}

/* ===========================================================
   FINAL CTA BAND
   =========================================================== */
.final-cta {
	background: linear-gradient(135deg, var(--coral-button), #A83A1B);
	padding: 90px 0; text-align: center;
	border-radius: 40px; margin: 0 32px 60px;
	max-width: 1076px; margin-left: auto; margin-right: auto;
}
.final-cta h2 { font-size: 36px; color: #fff; margin: 0 0 16px; }
.final-cta p { color: #FFE3D8; margin-bottom: 32px; font-size: 16px; }
.final-cta .btn-primary { background: #fff; color: #A83A1B; box-shadow: none; } /* verified 6.39:1 white-bg/dark-coral-text */

@media (max-width: 860px) { .final-cta { margin: 0 16px 40px; } }

/* ===========================================================
   BIO SECTION
   =========================================================== */
.bio { padding: 96px 0; }
.bio-grid { display: grid; grid-template-columns: .65fr 1fr; gap: 60px; align-items: center; }
.bio-img-frame {
	aspect-ratio: 3/4; border-radius: 28px; overflow: hidden;
	background: linear-gradient(160deg, var(--peach), #FF8F6B33);
}
.bio-img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) { .bio-grid { grid-template-columns: 1fr; } }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer {
	padding: 48px 0;
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: var(--gray-meta);
}
.footer-grid { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-social { display: flex; gap: 18px; }
.footer-social a { text-decoration: none; font-weight: 600; }

/* ===========================================================
   FORMS (Contact page) — WCAG 1.3.1, 3.3.2, 4.1.2
   =========================================================== */
.contact-form .form-group { margin-bottom: 20px; }
.contact-form label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
}
.contact-form .required-indicator {
	color: #C0392B;
	margin-left: 2px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
	width: 100%;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 15px;
	font-family: inherit;
	color: var(--plum);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	border-color: var(--coral-button);
}
.contact-form .field-hint {
	font-size: 13px;
	color: var(--plum-muted);
	margin-top: 4px;
}
.contact-form .field-error {
	font-size: 13.5px;
	color: #C0392B;
	margin-top: 6px;
	font-weight: 600;
}
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
	border-color: #C0392B;
}

/* ===========================================================
   GENERIC PROSE / PAGE CONTENT (About page etc.)
   =========================================================== */
.page-content {
	max-width: 720px;
	margin: 0 auto;
	padding: 64px 32px;
}
.page-content h1 { font-size: 42px; margin-bottom: 24px; }
.page-content p { font-size: 17px; color: var(--plum-muted); margin-bottom: 20px; }

/* Imported component CSS (booking widget, content shortcodes) sets its
   own scoped tokens with the jmb-/jmc- prefixes, so no further
   integration needed here beyond what was already wired in the
   integration pass. */

/* ===========================================================
   ADDITIONS FOR STANDALONE THEME TEMPLATES
   =========================================================== */

/* Header inner flex layout */
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 24px;
}

/* Hero content/media columns */
.hero-content { display: flex; flex-direction: column; justify-content: center; }
.hero-media { position: relative; }

/* Bio content column */
.bio-content { display: flex; flex-direction: column; justify-content: center; }

/* Dark-section package band overrides */
.packages-section {
	background: var(--plum);
}
.kicker-light {
	background: rgba(255,255,255,.12);
	color: #FFB89E; /* warm light tone visible against the dark plum bg */
}
.heading-light { color: #fff; }
.subhead-light { color: #C9BFD4; font-size: 15px; margin-top: 12px; }

/* FAQ section white background */
.faq-section { background: #fff; }

/* Contact form additions */
.fieldset-group {
	border: none;
	padding: 0;
	margin: 0 0 20px;
}
.fieldset-group legend {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	display: block;
	width: 100%;
}
.fieldset-group select {
	width: 100%;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 15px;
	font-family: inherit;
	color: var(--plum);
	background: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.optional-indicator {
	font-size: 13px;
	font-weight: 400;
	color: var(--gray-meta);
	margin-left: 4px;
}
.jmt-honeypot-wrap {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

/* Navigation hamburger icon */
.nav-toggle-icon { font-size: 18px; display: block; }