/* Only what theme.json cannot express. Tokens: design-system/jane-giles/MASTER.md */

/* Visible keyboard focus everywhere (3px sea teal). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-2);
	outline-offset: 3px;
}

/* Tap targets >= 44px for buttons and navigation links. */
.wp-element-button,
.wp-block-navigation-item__content {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Links stay readable on dark brand backgrounds — also on hover/focus: the global link hover colour is
   primary-dark (#0F3F73), which disappeared on the blue footer/CTA bands. Hover = thicker underline instead. */
:is(.has-primary-dark-background-color, .has-accent-3-background-color, .jg-hero) a:not(.wp-element-button),
:is(.has-primary-dark-background-color, .has-accent-3-background-color, .jg-hero) a:not(.wp-element-button):is(:hover, :focus) {
	color: var(--wp--preset--color--base);
}
:is(.has-primary-dark-background-color, .has-accent-3-background-color, .jg-hero) a:not(.wp-element-button):hover {
	text-decoration: underline;
	text-decoration-thickness: 2px !important;   /* parent theme sets 1px !important on all links */
}
/* Light cards inside a dark band (e.g. the MP3 form on /free-audios/) keep normal blue links. */
:is(.has-primary-dark-background-color, .has-accent-3-background-color) :is(.has-base-background-color, .has-accent-5-background-color) a:not(.wp-element-button) {
	color: var(--wp--preset--color--accent-3);
}

/* Header on phones: "Start your course today" doesn't fit next to the logo and would push the menu
   to a second row; the menu has "Online courses" and every page ends with the same CTA. */
@media (max-width: 600px) {
	header .wp-block-buttons { display: none; }
}

/* Hover transitions without layout shift. */
.wp-element-button,
a {
	transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* Align submenu toggle ("Issues") with the other menu items. */
.wp-block-navigation .wp-block-navigation__container {
	align-items: center;
}

/* Navigation: submenu toggle sits on the same baseline as other items. */
.wp-block-navigation .wp-block-navigation-item {
	align-items: center;
}
.wp-block-navigation .wp-block-navigation-submenu__toggle {
	padding-top: 0;
	padding-bottom: 0;
	line-height: inherit;
}

/* ---------- Home ---------- */

/* Hero: background photo + brand gradient; text stays >= 4.5:1 on the dark side. */
.jg-hero { overflow: hidden; }
.jg-hero__overlay { min-height: clamp(380px, 32vw, 480px); display: flex; flex-direction: column; justify-content: center; } /* ~ native aspect of the 1920x561 panorama: no upscaling blur */
.jg-hero__overlay > * { width: 100%; } /* flex + auto margins would shrink the content to 620px and centre it */
.jg-hero h1 { color: var(--wp--preset--color--base); }
.jg-eyebrow { text-transform: uppercase; font-size: 0.875rem; margin: 0; }
/* Phones/tablets portrait: the photo gets its own clear strip at the top (Jane: "lighten it enough to
   see the image"), text sits below on solid brand blue so it stays >= 4.5:1. A lighter overlay over the
   whole photo would drop white text to ~3.5:1 over the bright sky and sand. */
@media (max-width: 781px) {
	.jg-hero {
		background-size: auto 250px !important;
		background-position: 80% 0 !important;
		background-repeat: no-repeat !important;
		background-color: #0F3F73;
	}
	.jg-hero__overlay {
		background: linear-gradient(180deg, rgba(15,63,115,0) 0, rgba(15,63,115,0) 150px, #0F3F73 240px) !important;
		padding-top: 215px !important;
	}
}

/* Outline buttons = same outer size as filled ones (theme.json button padding 0.85rem/1.75rem, no border):
   the parent theme's outline variation uses 1rem/2.25rem, which made every second button look bigger. */
.wp-block-button.is-style-outline .wp-block-button__link,
.jg-btn-on-dark .wp-block-button__link {
	padding: calc(0.85rem - 2px) calc(1.75rem - 2px);
}

/* Outline button variant on dark backgrounds. */
.jg-btn-on-dark .wp-block-button__link,
.is-style-outline.jg-btn-on-dark .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--base);
	background: transparent;
}
.jg-btn-on-dark .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-dark);
}
/* Outline buttons on light backgrounds use brand blue. */
.wp-block-button.is-style-outline:not(.jg-btn-on-dark) .wp-block-button__link {
	color: var(--wp--preset--color--accent-3);
	border: 2px solid var(--wp--preset--color--accent-3);
	background: transparent;
}
.wp-block-button.is-style-outline:not(.jg-btn-on-dark) .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
}

.jg-portrait img,
.jg-book img { border-radius: 16px; box-shadow: var(--wp--preset--shadow--card); }

/* Issue cards: whole card is one link (the heading link is stretched); hover lifts, no scale. */
.jg-card {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--card);
	transition: box-shadow 200ms ease;
}
.jg-card:hover,
.jg-card:focus-within { box-shadow: var(--wp--preset--shadow--lifted); }
.jg-card .wp-block-image { margin: 0; }
.jg-card .wp-block-image img { width: 100%; display: block; }
.jg-card__body { padding: 1.25rem 1.5rem 1.5rem; }
.jg-card__body h3 { margin: 0 0 0.4rem; font-size: var(--wp--preset--font-size--large); }
.jg-card__body p { margin: 0; color: var(--wp--preset--color--accent-4); }
.jg-card h3 a { text-decoration: none; color: var(--wp--preset--color--primary-dark); }
.jg-card h3 a::after { content: ""; position: absolute; inset: 0; }
.jg-card h3 a:focus-visible { outline: none; }
.jg-card:focus-within { outline: 3px solid var(--wp--preset--color--accent-2); outline-offset: 3px; }

/* Steps */
.jg-step__num {
	width: 2.75rem; height: 2.75rem; border-radius: 50%;
	display: grid; place-items: center; margin: 0 0 0.75rem;
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--lora); font-weight: 700; font-size: 1.25rem;
}

/* Testimonials */
.jg-testimonial { border-radius: 16px; padding: 1.75rem; box-shadow: var(--wp--preset--shadow--card); }
.jg-quote { margin: 0; }
.jg-quote cite { display: block; margin-top: 0.75rem; font-family: var(--wp--preset--font-family--open-sans); font-style: normal; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-4); }

/* "More" links: comfortable tap target (>= 44px). */
.jg-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Compact cards on small screens (2 per row). */
@media (max-width: 600px) {
	.jg-card__body { padding: 0.9rem 1rem 1.1rem; }
	.jg-card__body h3 { font-size: 1.05rem; }
	.jg-card__body p { font-size: 0.9rem; }
}

/* Card grid: 4 → 3 → 2 columns (explicit, so phones never get 1 long column or 4 squeezed ones). */
.wp-block-group.jg-cards { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1024px) { .wp-block-group.jg-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 781px)  { .wp-block-group.jg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.9rem !important; } }

/* No block gap between card image and card body. */
.jg-card > * + * { margin-block-start: 0 !important; }

/* Core sets nav links to display:block with higher specificity; centre the label vertically
   so links line up with the submenu <button> ("Issues"). */
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
}

/* Submenu ("Issues"): compact items (~44px), soft card style. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: 0 !important;
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--lifted);
	padding: 0.4rem 0;
	min-width: 220px !important;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
	padding: 0.35rem 1.25rem;
	min-height: 44px;
	width: 100%;
}
/* Hover highlight only for real pointers (on touch screens :hover "sticks" after a tap); rounded, inset. */
@media (hover: hover) {
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background: var(--wp--preset--color--accent-5);
		color: var(--wp--preset--color--primary-dark);
		border-radius: 8px;
		text-decoration: none;
	}
}
header .wp-block-navigation:not(:has(.is-menu-open)) .wp-block-navigation__submenu-container { padding: 0.4rem !important; }
/* min-height must include padding, otherwise items grow to 44 + padding. */
.wp-block-navigation .wp-block-navigation-item__content { box-sizing: border-box; }

/* Hero on phones: drop the long eyebrow and tighten the heading so the hero is ~half a screen. */
@media (max-width: 600px) {
	.jg-hero .jg-eyebrow { display: none; }
	.jg-hero h1 { font-size: 2rem; }
	.jg-hero .has-large-font-size { font-size: 1.1rem !important; }
}

/* ---------- Inner pages ---------- */
.jg-page-header h1 { margin-top: 0.25rem; }
.jg-page-header .jg-eyebrow a { text-decoration: none; color: inherit; }
.jg-page-header__img img { border-radius: 16px; box-shadow: var(--wp--preset--shadow--card); width: 100%; }
.jg-prose h2 { margin-top: 2.5rem; font-size: var(--wp--preset--font-size--x-large); }
.jg-prose .wp-block-list li { margin-bottom: 0.35rem; }
.jg-prose .jg-quote { margin: 2rem 0; padding: 1.5rem 1.75rem; background: var(--wp--preset--color--accent-5); border-radius: 16px; }
.jg-testimonial-band .jg-quote { padding: 1.75rem; background: var(--wp--preset--color--accent-5); border-radius: 16px; }
@media (max-width: 781px) {
	.jg-page-header .wp-block-columns { flex-direction: column-reverse; }
	/* Course area: the welcome text first, then the "Start here" video. */
	.jg-page-header .wp-block-columns:has(.wp-block-video) { flex-direction: column; }
}

/* Full-width sections touch the header/footer: no root block gap around <main>. */
.wp-site-blocks > footer,
.wp-site-blocks > main { margin-block-start: 0; }
main > .wp-block-group:last-child,
main .entry-content > :last-child { margin-block-end: 0; }

/* Contact + Fees */
.jg-contact-card { border-radius: 16px; padding: 1.75rem; }
.jg-contact-card h3 { font-size: 1.05rem; margin: 1.25rem 0 0.25rem; font-family: var(--wp--preset--font-family--open-sans); font-weight: 700; color: var(--wp--preset--color--accent-4); text-transform: uppercase; letter-spacing: 0.04em; }
.jg-contact-card h3:first-child { margin-top: 0; }
.jg-contact-card p { margin: 0; font-size: var(--wp--preset--font-size--large); }
.jg-price-list { list-style: none; padding-left: 0; }
.jg-price-list li { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--wp--preset--color--accent-6); }
.jg-page-header__img--natural img { aspect-ratio: auto; max-height: 420px; width: auto; margin-inline: auto; display: block; }

/* Kadence Advanced Form → design system (MASTER.md: inputs 48px, radius 8px, coral CTA). */
.kb-advanced-form .kb-adv-form-field > label { font-weight: 600; color: var(--wp--preset--color--contrast); }
.kb-advanced-form :is(.kb-text-field, .kb-email-field, .kb-tel-field, .kb-textarea-field) {
	min-height: 48px; padding: 0.75rem 1rem !important; font-size: 1.0625rem !important;
	border: 1px solid #C9C1B4 !important; border-radius: 8px !important; background: #fff !important;
}
.kb-advanced-form :is(.kb-text-field, .kb-email-field, .kb-tel-field, .kb-textarea-field):focus-visible {
	border-color: var(--wp--preset--color--accent-3) !important;
	box-shadow: 0 0 0 3px rgba(21, 88, 160, 0.25); outline: none;
}
.kb-advanced-form .kb-textarea-field { min-height: 140px; }
.kb-advanced-form .kb-adv-form-submit-button {
	background: var(--wp--preset--color--accent-1) !important; color: #fff !important;
	border: 0 !important; border-radius: 8px !important; padding: 0.85rem 1.75rem !important;
	min-height: 48px; font-weight: 600; font-size: 1.0625rem; font-family: var(--wp--preset--font-family--open-sans);
}
.kb-advanced-form .kb-adv-form-submit-button:hover { background: #943B25 !important; }
/* Consent: checkbox + its own <label> (text from the field description) on one line, 24px box. */
.kb-advanced-form .wp-block-kadence-advanced-form-accept .kb-radio-check-item-wrap { border: 0; padding: 0; margin: 0; }
.kb-advanced-form .wp-block-kadence-advanced-form-accept .kb-radio-check-item { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0; }
.kb-advanced-form .wp-block-kadence-advanced-form-accept .kb-radio-check-item label { margin: 0; font-weight: 400; }
.kb-advanced-form input.kb-accept-field {
	width: 24px !important; height: 24px !important; margin: 0 !important; flex: 0 0 auto;
	accent-color: var(--wp--preset--color--accent-3);
}

/* Long URLs (e.g. press links on IBS) must wrap instead of causing horizontal scroll on phones. */
.jg-prose, .jg-prose a { overflow-wrap: anywhere; }

/* Form feedback: on-brand message boxes (error / success) and character counter. */
.kb-adv-form-message {
	font-family: var(--wp--preset--font-family--open-sans) !important;
	font-size: 1rem !important; font-weight: 600; line-height: 1.5;
	padding: 0.9rem 1.1rem !important; margin: 0 0 1.25rem !important;
	border: 0 !important; border-left: 4px solid currentColor !important; border-radius: 8px !important;
}
.kb-adv-form-warning { background: #FDECEA !important; color: #8A1C12 !important; }   /* 8.1:1 */
.kb-adv-form-success { background: #E7F2EE !important; color: #1E5631 !important; }   /* 7.5:1 */
/* After a successful send the form is removed (form setting submitHide, 08-contact-form.sh) and the success message
   becomes a thank-you card (assets/js/contact-form.js adds the "Thank you, <name>" heading): a check mark — the
   universal "done" sign, read before any text — then the heading and the form's own message. Fades in. */
.wp-block-kadence-advanced-form:not(:has(form)) .kb-adv-form-success {
	display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center;
	padding: 2.75rem 2rem !important; margin: 0 !important; border: 0 !important; border-radius: 16px !important;
	background: var(--wp--preset--color--accent-5) !important; color: var(--wp--preset--color--contrast) !important;
	font-size: 1.05rem !important; font-weight: 400; line-height: 1.6;
	animation: jg-thanks-in 500ms ease-out both;
}
.wp-block-kadence-advanced-form:not(:has(form)) .kb-adv-form-success::before {
	content: ""; width: 64px; height: 64px; flex-shrink: 0; margin-bottom: 0.5rem; border-radius: 50%;
	background: var(--wp--preset--color--accent-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 34px no-repeat;
}
.kb-adv-form-success .jg-thanks__title {
	margin: 0 !important; font-family: var(--wp--preset--font-family--lora) !important; font-weight: 700;
	font-size: 1.6rem !important; line-height: 1.25; color: var(--wp--preset--color--primary-dark) !important;
}
.kb-adv-form-success .jg-thanks__text { margin: 0 !important; max-width: 34rem; font-weight: 400; }
@keyframes jg-thanks-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wp-block-kadence-advanced-form:not(:has(form)) .kb-adv-form-success { animation: none; } }
.kb-adv-form-message * { font-family: inherit !important; font-size: inherit !important; color: inherit !important; margin: 0; }
.kb-adv-form-message .kb-adv-form-error-title { font-weight: 700 !important; margin: 0 0 0.4rem !important; line-height: 1.4; }
.kb-adv-form-message ul { margin: 0 !important; padding-left: 1.2rem !important; font-weight: 400; }
.kb-adv-form-message a { text-decoration: underline; }
/* role="alert" box receives programmatic focus so screen readers announce it; no visual focus ring needed. */
.kb-adv-form-message[tabindex="-1"]:focus { outline: none; }
.jg-char-counter { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--wp--preset--color--accent-4); text-align: right; }
.jg-char-counter.is-near-limit { color: #8A5A00; font-weight: 600; }   /* amber, 5.9:1 */
.jg-char-counter.is-at-limit { color: #8A1C12; font-weight: 600; }

/* Field-level errors: light inline text under the field (the boxed style is for form-level messages). */
.kb-advanced-form .kb-adv-form-error-msg.kb-adv-form-message {
	background: none !important; border: 0 !important; padding: 0.35rem 0 0 !important; margin: 0 !important;
	color: #8A1C12 !important; font-size: 0.9375rem !important; font-weight: 600;
}
.kb-advanced-form .kb-adv-form-error-msg::before { content: "⚠ "; speak: never; }
.kb-advanced-form .has-error { border-color: #8A1C12 !important; }
.kb-advanced-form .has-error:focus-visible { box-shadow: 0 0 0 3px rgba(138, 28, 18, 0.2) !important; }

/* Form controls: keyboard focus as a neat brand ring (2px white gap + 2px logo blue, 7.2:1 on white)
   instead of the heavy 3px outline, which looked almost black around the checkbox in Safari. */
.kb-advanced-form :is(input, textarea, select, button):focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp--preset--color--accent-3) !important;
}
.kb-advanced-form input.kb-accept-field { border-radius: 4px; }
.kb-advanced-form input.kb-accept-field:focus:not(:focus-visible) { outline: none; box-shadow: none !important; }

/* Books */
.jg-book-meta { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; color: var(--wp--preset--color--accent-4); font-size: 0.95rem; }
.jg-books-more { border-radius: 16px; padding: 1.75rem 2rem; }
.jg-books-more h3 { margin-top: 0; }

/* Header: core navigation only collapses below 600px; logo + 7 items + CTA need ~1180px of row
   (viewport ~1230px), so use the hamburger up to 1239px (tablets / small laptops). */
@media (max-width: 1239px) {
	header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex; }
}

/* Full-screen (hamburger) menu: left-aligned, larger items; "Issues" as an indented list, not a dropdown card. */
header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem 1.5rem 2rem !important;
	background: var(--wp--preset--color--base) !important;
}
header .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start !important; padding-top: 2.5rem !important; }
header .is-menu-open .wp-block-navigation__container { align-items: flex-start !important; gap: 0.25rem !important; width: 100%; }
header .is-menu-open .wp-block-navigation-item { width: 100%; align-items: flex-start !important; flex-direction: column; }
header .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-size: 1.25rem; padding: 0.5rem 0 !important; min-height: 48px; width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}
header .is-menu-open .wp-block-navigation__submenu-container {
	position: static !important; box-shadow: none !important; border-radius: 0; padding: 0 0 0 1.25rem !important;
	min-width: 0 !important; width: 100%; background: transparent !important;
}
header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-size: 1.05rem; font-weight: 400; border-bottom: 0; min-height: 44px; padding: 0.35rem 0 !important;
}
header .is-menu-open .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon { display: none; }

/* ---------- Online courses ---------- */
/* Tick lists (benefits, "you will learn", what's included). */
.jg-ticks { list-style: none; padding-left: 0; }
.jg-ticks li { position: relative; padding-left: 2rem; margin-bottom: 0.6rem; }
.jg-ticks li::before {
	content: ""; position: absolute; left: 0; top: 0.3em; width: 1.25rem; height: 1.25rem; border-radius: 50%;
	background: var(--wp--preset--color--accent-5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%230F3F73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.has-accent-5-background-color .jg-ticks li::before, .jg-price-card .jg-ticks li::before { background-color: #fff; box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-6); }

/* Course card status line: open course in coral, "Coming soon" muted. */
.jg-card__body .jg-card__status { margin-top: 0.5rem; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; }
.jg-card__body .jg-card__status.is-open { color: var(--wp--preset--color--accent-1); }
/* Courses not open yet (status without .is-open): muted photo under a sand veil, status as a pill, no hover lift
   (the card isn't a link). Title stays full contrast for readability. */
.jg-card:has(.jg-card__status:not(.is-open)) .wp-block-image { position: relative; }
.jg-card:has(.jg-card__status:not(.is-open)) .wp-block-image img { filter: grayscale(0.7); }
.jg-card:has(.jg-card__status:not(.is-open)) .wp-block-image::after {
	content: ""; position: absolute; inset: 0;
	background: rgba(247, 243, 236, 0.55);
}
.jg-card:has(.jg-card__status:not(.is-open)):hover { box-shadow: var(--wp--preset--shadow--card); }
.jg-card__body .jg-card__status:not(.is-open) {
	display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px;
	background: var(--wp--preset--color--accent-6); color: var(--wp--preset--color--accent-4);
}

/* Fear of Flying: session cards. */
.jg-session { border-radius: 16px; padding: 1.5rem 1.75rem; box-shadow: var(--wp--preset--shadow--card); }
.jg-session > * { margin-block: 0; }
.jg-session > * + * { margin-block-start: 0.6rem; }
.jg-session h3 { font-size: var(--wp--preset--font-size--large); }
.jg-session .jg-session__label {
	display: inline-block; padding: 0.2rem 0.75rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
	letter-spacing: 0.04em; text-transform: uppercase; background: var(--wp--preset--color--accent-5); color: var(--wp--preset--color--primary-dark);
}
.jg-session.is-bonus { box-shadow: inset 0 0 0 2px var(--wp--preset--color--gold), var(--wp--preset--shadow--card); }
.jg-session.is-bonus .jg-session__label { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--contrast); }

/* Price + register. */
.jg-price-line { font-size: 1.05rem; color: var(--wp--preset--color--accent-4); }
.jg-price-line strong { font-size: 1.35rem; color: var(--wp--preset--color--primary-dark); }
.jg-price-card, .jg-form-card { border-radius: 16px; padding: 1.75rem 2rem !important; box-shadow: var(--wp--preset--shadow--card); }
.jg-price-card > *, .jg-form-card > * { margin-block: 0; }
.jg-price-card > * + *, .jg-form-card > * + * { margin-block-start: 0.75rem; }
.jg-price { font-family: var(--wp--preset--font-family--lora); font-size: 3rem; font-weight: 700; line-height: 1; color: var(--wp--preset--color--primary-dark); }
.jg-price span { font-family: var(--wp--preset--font-family--open-sans); font-size: 1rem; font-weight: 600; color: var(--wp--preset--color--accent-4); }
@media (max-width: 600px) { .jg-price-card, .jg-form-card { padding: 1.25rem 1.25rem !important; } }

/* FAQ (core Details block). */
.jg-faq .wp-block-details { border-bottom: 1px solid var(--wp--preset--color--accent-6); padding: 0; margin: 0; }
.jg-faq .wp-block-details summary {
	cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	min-height: 48px; padding: 0.9rem 0; font-weight: 600; color: var(--wp--preset--color--primary-dark);
}
.jg-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.jg-faq .wp-block-details summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--wp--preset--color--accent-3); flex: 0 0 auto; }
.jg-faq .wp-block-details[open] summary::after { content: "−"; }
.jg-faq .wp-block-details summary:focus-visible { outline: 3px solid var(--wp--preset--color--accent-2); outline-offset: 2px; }
.jg-faq .wp-block-details > :not(summary) { margin: 0 0 1rem; }

/* Testimonials page: cards in a masonry grid (CSS columns keep each card whole; order runs down each column).
   Jane adds a testimonial by inserting a Quote block inside the grid group. */
.jg-testimonial-grid { columns: 2 22rem; column-gap: 2rem; }
.jg-testimonial-grid > .jg-quote {
	break-inside: avoid; display: block; margin: 0 0 2rem !important;
	padding: 1.75rem; background: var(--wp--preset--color--accent-5); border-radius: 16px;
}
.jg-testimonial-grid > .jg-quote p { margin: 0 0 0.75rem; }
.jg-testimonial-note { margin-top: var(--wp--preset--spacing--40); }
@media (max-width: 600px) { .jg-testimonial-grid > .jg-quote { padding: 1.25rem; margin-bottom: 1.25rem !important; } }

/* Inner pages: reading column + sticky sidebar (synced pattern "Sidebar – Courses & call"). */
.jg-with-aside .jg-prose > :first-child { margin-top: 0; }
.jg-aside__inner { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.jg-aside__inner > * { margin: 0 !important; }
.jg-aside-card { border-radius: 16px; padding: 1.5rem 1.6rem; }
.jg-aside-card > * { margin-block: 0; }
.jg-aside-card > * + * { margin-block-start: 0.75rem; }
.jg-aside-card h2 { margin-top: 0.25rem; }
.jg-aside-card .wp-block-buttons { margin-top: 1.1rem; }
.jg-aside-card.is-plain { box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-6); }
.admin-bar .jg-aside__inner { top: calc(32px + 1.5rem); }
/* Below 960px the columns get cramped and the sidebar would only repeat the CTA band at the end of every page:
   hide it and give the text the full width (capped at a comfortable line length). */
@media (max-width: 959px) {
	.jg-with-aside .jg-aside { display: none; }
	.jg-with-aside .jg-prose { flex-basis: 100% !important; max-width: 720px; }
}
/* Issue pages: the same sidebar pattern inline after the text, only where the sidebar is hidden (Jane's request). */
.jg-aside-inline { margin-block: var(--wp--preset--spacing--60) !important; }
.jg-aside-inline .jg-aside__inner { position: static; }
@media (min-width: 960px) { .jg-aside-inline { display: none; } }

/* ---------- Free audios: YouTube cover + play button (player loads on click) ---------- */
.wp-block-embed.is-provider-youtube { margin: 0; }
.wp-block-embed.is-provider-youtube .wp-block-embed__wrapper {
	position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--wp--preset--color--primary-dark);
	box-shadow: var(--wp--preset--shadow--card);
}
.wp-block-embed.is-provider-youtube .wp-block-embed__wrapper::before { display: none; }   /* core's padding-top ratio hack */
.wp-block-embed.is-provider-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jg-yt { all: unset; position: absolute; inset: 0; cursor: pointer; display: block; }
.jg-yt img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms ease; }
.jg-yt:hover img { transform: scale(1.03); }
.jg-yt__play {
	position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
	background: var(--wp--preset--color--accent-1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); transition: transform 200ms ease;
}
.jg-yt__play::after {
	content: ""; position: absolute; left: 26px; top: 20px;
	border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff;
}
.jg-yt:hover .jg-yt__play { transform: scale(1.08); }
.jg-yt:focus-visible { outline: 3px solid var(--wp--preset--color--accent-2); outline-offset: -3px; }
.wp-block-embed.is-provider-youtube figcaption { margin: 0.6rem 0 0; text-align: left; font-weight: 600; font-size: 0.95rem; color: var(--wp--preset--color--primary-dark); }
@media (prefers-reduced-motion: reduce) { .jg-yt img, .jg-yt__play { transition: none; } .jg-yt:hover img { transform: none; } }

/* Audio grids: 3 → 2 → 1 columns on the Free audios page; 2 → 1 inside issue pages. */
.jg-audio-grid { align-items: start; }
/* Free audios: one track = player (title above it) + a short description. */
.jg-track .wp-block-audio { margin-block: 0 0.75rem; }
.jg-track p { margin: 0; color: var(--wp--preset--color--accent-4); }
.jg-audio-box { border-radius: 16px; padding: 1.75rem 2rem; margin-top: 2.5rem !important; }
.jg-audio-box h2 { margin-top: 0 !important; }
.jg-audio-links { margin-top: 1rem; }
.jg-audio-links a { font-weight: 600; }
.has-accent-5-background-color .jg-audio-grid { --wp--preset--shadow--card: none; }
@media (max-width: 600px) { .jg-audio-box { padding: 1.25rem; } }

/* ---------- Header navigation (UX review 2026-10-09) ----------
   Brand vs menu: the gap to the menu (3rem) is 3× the gap between items, so "Jane Giles" no longer reads
   as a menu item; the CTA gets its own breathing space. Current page: blue text + 2px bar; hover: thin underline. */
header .jg-header-row { column-gap: 3rem; }
header .jg-header-nav { gap: 2rem; }
header .wp-block-navigation .wp-block-navigation__container { gap: 1rem; }
header .jg-header-nav .wp-element-button { padding-inline: 1.5rem; font-size: 1rem; }
header .wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content,
header .wp-block-navigation .wp-block-navigation-submenu__toggle { position: relative; }
@media (hover: hover) {
	header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
	header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle:hover {
		text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.4em; color: var(--wp--preset--color--primary-dark);
	}
	header .is-menu-open .wp-block-navigation-item__content:hover { text-decoration: none; }
}
header .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
header .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-submenu__toggle,
header .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-3); text-decoration: none;
}
header .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after,
header .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-submenu__toggle::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 2px; background: currentColor;
}
/* Inside the open dropdown / hamburger menu: current page in blue, no bar. */
header .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--accent-3); font-weight: 700; }
header .is-menu-open .current-menu-item > .wp-block-navigation-item__content::after,
header .is-menu-open .current-menu-ancestor > .wp-block-navigation-submenu__toggle::after { display: none; }

/* Menu focus & touch feedback (mobile review 2026-10-09).
   - Focus ring only for keyboard users (:focus-visible). WordPress moves focus to the first item when the
     full-screen menu opens, and theme.json/TT5 outline every :focus — that drew a teal/black frame on tap.
   - Touch: no grey iOS tap flash and no sticky hover; a short rounded light-blue press state instead. */
header .wp-block-navigation :focus:not(:focus-visible) { outline: none !important; }
header .wp-block-navigation :is(a, button):focus-visible { outline: 3px solid var(--wp--preset--color--accent-2); outline-offset: 2px; border-radius: 6px; }
header .wp-block-navigation :is(a, button) { -webkit-tap-highlight-color: transparent; }
header .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content:active {
	background: rgba(21, 88, 160, 0.08);
	box-shadow: 0 0 0 0.5rem rgba(21, 88, 160, 0.08);
	border-radius: 8px;
}
@media (hover: hover) {
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:active { background: rgba(21, 88, 160, 0.12); border-radius: 8px; }
}

/* Home "Two ways to work with me": courses (featured, sand) and one-to-one sessions (outlined) as two offer
   cards of equal height, actions pinned to the bottom; stacked on phones. */
.jg-offers > .wp-block-column { display: flex; }
.jg-offer { flex: 1; display: flex; flex-direction: column; gap: 0; border-radius: 16px; padding: 2.25rem 2.25rem 2rem; }
.jg-offer > * { margin-block: 0 !important; }
.jg-offer.is-plain { box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-6); }
.jg-offer.is-featured { box-shadow: inset 0 4px 0 var(--wp--preset--color--accent-2); }
.jg-offer > h3 { margin: 0.35rem 0 1.5rem !important; font-size: var(--wp--preset--font-size--x-large); }
.jg-offer__step { gap: 1rem !important; margin-bottom: 1.25rem !important; }
.jg-offer__step .jg-step__num { flex-shrink: 0; margin: 0; width: 2.5rem; height: 2.5rem; font-size: 1.1rem; }
.jg-offer.is-plain .jg-step__num { background: var(--wp--preset--color--accent-5); }
.jg-offer.is-featured .jg-step__num { background: var(--wp--preset--color--base); }
.jg-offer__step h4 { margin: 0.35rem 0 0.25rem; font-size: 1.15rem; color: var(--wp--preset--color--primary-dark); }
.jg-offer__step p { margin: 0; }
.jg-offer__actions { margin-top: auto !important; padding-top: 0.75rem; }
@media (max-width: 600px) {
	.jg-offer { padding: 1.5rem 1.25rem; }
	.jg-offer__step { gap: 0.75rem !important; }
	.jg-offer__step .jg-step__num { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
}

/* Audio block → Video.js player (functions.php, assets/js/audio-player.js). Track title (caption) sits above the
   player; the browser's own player is the fallback and is hidden once the skin is defined. */
.wp-block-audio { display: flex; flex-direction: column; gap: 0.6rem; margin-block: 1.5rem; }
.wp-block-audio audio { width: 100%; }
.wp-block-audio figcaption {
	order: -1; margin: 0; text-align: left;
	font-family: var(--wp--preset--font-family--lora); font-weight: 700; font-size: 1.15rem;
	color: var(--wp--preset--color--primary-dark);
}
.jg-player {
	display: block;
	--media-accent-color: var(--wp--preset--color--primary-dark);
	--media-font-family: var(--wp--preset--font-family--open-sans);
	--media-scale-unit: 1rem;
}
audio-skin:defined audio { display: none; }
.jg-audio-note { color: var(--wp--preset--color--accent-4); margin-top: 0.5rem !important; }

/* ---------- Course video + course area (mock-up until the course plugin, part 2) ---------- */
/* Video block → Video.js player (functions.php). The player clips to the rounded corners itself (Safari's own
   controls didn't); the plain <video> rule is the no-JS fallback and keeps 16:9 before the poster loads. */
.wp-block-video { margin-inline: 0; margin-block-end: 0; }   /* keep the block gap above (heading → video) */
.wp-block-video video {
	display: block; width: 100%; aspect-ratio: auto 16 / 9; background: #000; border-radius: 16px;
}
.jg-video-player video-skin, .wp-block-video > video:only-child { box-shadow: var(--wp--preset--shadow--card); }
.jg-video-player video-skin {
	display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #000;
	--media-border-radius: 16px;
	--media-font-family: var(--wp--preset--font-family--open-sans);
}
.jg-video-player video-skin video { border-radius: 0; }
.jg-video-label {
	margin: 0 0 0.6rem; font-family: var(--wp--preset--font-family--lora); font-weight: 700;
	font-size: 1.15rem; color: var(--wp--preset--color--primary-dark);
}

/* Session list in the private course area: number · label/title/contents · status. The open session is
   one link (heading link stretched over the row); sessions not ready yet are muted. */
.jg-lesson {
	position: relative; gap: 1.25rem !important; padding: 1.1rem 1.5rem; border-radius: 16px;
	background: var(--wp--preset--color--base); box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-6);
}
.jg-lesson .jg-step__num { flex-shrink: 0; margin: 0; }
.jg-lesson__body { flex: 1; min-width: 0; }
.jg-lesson__body > * { margin-block: 0 !important; }
.jg-lesson__body > * + * { margin-block-start: 0.2rem !important; }
.jg-lesson h3 { font-size: var(--wp--preset--font-size--large); }
.jg-lesson h3 a { color: var(--wp--preset--color--primary-dark); text-decoration: none; }
.jg-lesson h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.jg-lesson h3 a:focus-visible { outline: none; }
.jg-lesson:focus-within { outline: 3px solid var(--wp--preset--color--accent-2); outline-offset: 3px; }
.jg-lesson__label, .jg-lesson__meta { font-size: 0.875rem; color: var(--wp--preset--color--accent-4); }
.jg-lesson__label { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.jg-lesson__status { flex-shrink: 0; margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--wp--preset--color--accent-4); }
.jg-lesson.is-open { box-shadow: inset 4px 0 0 var(--wp--preset--color--accent-2), var(--wp--preset--shadow--card); }
.jg-lesson.is-open .jg-lesson__status { color: var(--wp--preset--color--accent-1); }
.jg-lesson.is-open .jg-lesson__status::after { content: " →"; }
.jg-lesson.is-bonus .jg-step__num { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--contrast); }
@media (hover: hover) {
	.jg-lesson.is-open { transition: box-shadow 200ms ease, transform 200ms ease; }
	.jg-lesson.is-open:hover { box-shadow: inset 4px 0 0 var(--wp--preset--color--accent-2), var(--wp--preset--shadow--lifted); transform: translateY(-2px); }
}
@media (max-width: 600px) {
	.jg-lesson { padding: 1rem; gap: 0.9rem !important; align-items: flex-start !important; }
	.jg-lesson .jg-step__num { width: 2.25rem; height: 2.25rem; font-size: 1.05rem; }
	.jg-lesson__status { display: none; }   /* the muted row / arrow-less title already says it */
}
.jg-page-header .jg-lesson__label { margin: 0.5rem 0 0; }
.jg-page-header .jg-lesson__meta { margin-top: 1rem; }

/* Session page: numbered steps (Jane's instructions, in order), each with its video / audio / PDF. */
.jg-session-step { gap: 1.25rem !important; }
.jg-session-step .jg-step__num { flex-shrink: 0; margin: 0; }
.jg-session-step__body { flex: 1; min-width: 0; }
.jg-session-step__body > * { margin-block: 0 !important; }
.jg-session-step__body > * + * { margin-block-start: 0.75rem !important; }
.jg-session-step__body h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 0.3rem !important; }
.jg-session-step__body .wp-block-audio, .jg-session-step__body .wp-block-video { margin-block-start: 1.25rem !important; }
.jg-video-soon {
	aspect-ratio: 16 / 9; border-radius: 16px; background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--accent-4); text-align: center; padding: 1rem;
}
@media (max-width: 600px) {
	.jg-session-step { gap: 0.9rem !important; }
	.jg-session-step .jg-step__num { width: 2.25rem; height: 2.25rem; font-size: 1.05rem; }
}

/* File block (PDFs): one row — document name (opens in the browser) + Download button. */
.wp-block-file {
	display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap;
	padding: 0.9rem 1rem 0.9rem 1.25rem; border-radius: 12px; background: var(--wp--preset--color--accent-5);
}
.wp-block-file:not(.wp-element-button) { font-size: 1rem; }   /* core: 0.8em */
.wp-block-file a:not(.wp-block-file__button) { font-weight: 600; }
.wp-block-file .wp-block-file__button { margin: 0 !important; padding: 0.6rem 1.25rem; font-size: 0.95rem; }

/* 404 (templates/404.html): the page-header band on its own, with clear next steps instead of search. */
.jg-404 { text-align: center; }
.jg-404 .wp-block-buttons { justify-content: center; }
.jg-404 .jg-404__help { margin-top: var(--wp--preset--spacing--50); color: var(--wp--preset--color--accent-4); }
.jg-404 .jg-404__help a { font-weight: 600; }