/* JM Content Fields — shares Direction B "Warm Modern" tokens with the
   booking widget CSS. Duplicated (not shared via @import) deliberately:
   these are two separate plugins with independent lifecycles, and a
   hard CSS dependency between them would break if one is deactivated
   while the other stays active. */

/* WCAG 1.1.1: screen-reader-only utility class, defined here defensively
   rather than assumed to come from the active theme. Most accessible WP
   themes (including Twenty Twenty-Four / this site's custom child theme)
   already define .screen-reader-text, but this plugin's shortcodes use
   it directly and shouldn't silently break their accessibility if a
   future theme switch removes that definition. Standard WP core pattern,
   matched here for consistency rather than invented fresh. */
.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;
}

:root {
	--jmc-peach: #FFE8D6;
	--jmc-cream: #FFFAF3;
	--jmc-coral-accent: #FF6B4A; /* CONFIRMED background/decorative use only -- 2.82:1 on white, fails AA text contrast even at large sizes. Never used for text in this file. */
	--jmc-coral-dark: #C4441F;   /* verified 5.01:1 with white text -- corrected from an earlier #E0512F (3.90:1, fails AA against white, and 3.30:1 against peach, also failing) */
	--jmc-plum: #3B2A4A;
	--jmc-gray-meta: #766685;    /* verified 5.24:1 on white -- replaces an earlier #9c8fab (3.03:1, fails AA), used twice in this file's original draft */
	--jmc-teal: #1F7A6C;
	--jmc-line: #F0DFCB;
}

/* Packages */
.jmc-pkg-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.jmc-pkg-card {
	background: var(--jmc-plum);
	border-radius: 22px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	border: 1px solid #5B4972;
	font-family: 'Inter', sans-serif;
}
.jmc-pkg-card.featured {
	/* corrected: the original gradient (--jmc-coral-accent → old coral-dark)
	   failed AA with white text at EVERY point along its surface -- even
	   pure white text only reached 3.90:1 against the gradient's darkest
	   stop. Both stops below are independently verified to pass 4.5:1 with
	   white text (5.01:1 and 6.39:1), so the entire gradient surface is
	   safe for white text regardless of where on the card it falls. */
	background: linear-gradient(160deg, var(--jmc-coral-dark), #A83A1B);
	border-color: transparent;
}
.jmc-pkg-tag {
	display: inline-block;
	background: rgba(255,255,255,.2);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 20px;
	margin-bottom: 14px;
	width: fit-content;
}
.jmc-pkg-card h3 {
	color: #fff;
	font-family: 'Sora', sans-serif;
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px;
}
.jmc-pkg-price {
	font-family: 'Sora', sans-serif;
	font-size: 30px;
	font-weight: 700;
	color: #fff;
	margin: 10px 0 14px;
}
.jmc-pkg-price span { font-size: 13px; font-weight: 500; opacity: .7; }
.jmc-pkg-desc { font-size: 13px; color: #D3C8DE; margin-bottom: 8px; flex-grow: 1; } /* verified 8.10:1 against the standard card's solid plum background -- passes comfortably */
.jmc-pkg-card.featured .jmc-pkg-desc { color: #FFFFFF; } /* corrected: the original #FFE3D8 only reaches 4.11:1 against the gradient's lightest stop (fails 4.5:1). Solid white (no opacity reduction) is required -- white at 85-92% opacity blended against this background still measures under 4.5:1 (checked programmatically, not assumed), so opacity is not a safe way to create visual hierarchy here. Use font-size/weight for hierarchy instead if needed. */
.jmc-pkg-fine { font-size: 11.5px; color: var(--jmc-gray-meta); margin-bottom: 20px; } /* corrected from a failing #9C8FAB (3.03:1) */
.jmc-pkg-card.featured .jmc-pkg-fine { color: #FFFFFF; } /* corrected, same reasoning as featured .jmc-pkg-desc above -- solid white required, opacity reduction was checked and fails */

/* The [jmb_booking] widget renders inside each card with its own styling;
   override its outer container so it doesn't fight the card's own
   background/border (the widget normally expects a white page background). */
.jmc-pkg-card .jmb-booking-widget {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	max-width: none;
}

@media (max-width: 600px) {
	.jmc-pkg-grid { grid-template-columns: 1fr; }
}

/* Testimonials */
.jmc-test-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.jmc-test-card {
	background: #fff;
	border-radius: 22px;
	padding: 28px 26px;
	border: 1px solid var(--jmc-line);
	font-family: 'Inter', sans-serif;
}
.jmc-stars { color: var(--jmc-coral-dark); margin-bottom: 14px; font-size: 14px; } /* corrected: was --jmc-coral (2.82:1, fails) -- star glyphs (★) are text characters per WCAG, held to the same contrast bar as any other text */
.jmc-test-card p { font-size: 14.5px; color: #3f3548; margin-bottom: 20px; }
.jmc-test-who { display: flex; align-items: center; gap: 12px; }
.jmc-avatar {
	width: 40px; height: 40px; border-radius: 50%;
	color: #fff; display: flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 700; font-family: 'Sora', sans-serif;
}
.jmc-avatar-coral { background: linear-gradient(150deg, #D14722, var(--jmc-coral-dark)); } /* corrected: original lightest stop #FF8F6B only reached 2.24:1 with white text. #D14722 (4.53:1) and --jmc-coral-dark (5.01:1) both independently pass -- the single-letter initial is real identifying content, not decoration, so its contrast can't depend on exactly where it lands in the gradient */
.jmc-avatar-teal   { background: linear-gradient(150deg, #23816F, var(--jmc-teal)); } /* corrected: original lightest stop #3FA593 only reached 2.99:1. #23816F (4.73:1) and --jmc-teal/#1F7A6C (5.17:1) both pass */
.jmc-avatar-plum   { background: linear-gradient(150deg, #6B5582, var(--jmc-plum)); } /* unchanged -- verified both stops already pass: #6B5582 at 6.47:1, var(--jmc-plum) at 12.99:1 */
.jmc-test-name { font-size: 13.5px; font-weight: 700; color: var(--jmc-plum); }
.jmc-test-tag { font-size: 12px; color: var(--jmc-gray-meta); } /* corrected from a failing #9c8fab (3.03:1) */

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

/* FAQ */
.jmc-faq-list { max-width: 740px; margin: 0 auto; font-family: 'Inter', sans-serif; }
.jmc-faq-item { border-bottom: 1px solid var(--jmc-line); padding: 4px; }
.jmc-faq-q-heading { margin: 0; }

/* .jmc-faq-q is now a real <button> (WCAG 4.1.2 / 2.1.1 fix — previously a
   clickable but non-interactive-semantics <h4>, unreachable by keyboard
   and not announced as a control by screen readers). Full button-reset
   styling below so it keeps Direction B's visual design while gaining
   correct underlying semantics. */
.jmc-faq-q {
	all: unset; /* strip default button chrome (border, background, font) before reapplying our own */
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 20px 4px;
	font-size: 16.5px;
	font-weight: 600;
	color: var(--jmc-plum);
	cursor: pointer;
	font-family: inherit;
}
/* Focus state — buttons reset with `all: unset` lose their default focus
   ring too, so it must be explicitly restored (WCAG 2.4.7). */
.jmc-faq-q:focus-visible {
	outline: 3px solid #1A56DB;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Icon color: the brand coral (#FF6B4A) measures 2.82:1 against white,
   failing even the relaxed 3:1 non-text-UI threshold -- same contrast
   issue identified and fixed for the booking theme's star ratings and
   hero highlight text. Using the verified-passing button color instead. */
.jmc-faq-icon {
	color: var(--jmc-coral-dark); /* verified-passing token, see :root definition */
	font-weight: 800;
	font-size: 18px;
	flex-shrink: 0;
	margin-left: 16px;
	transition: transform 0.2s ease;
}
/* WCAG 1.4.1 (Use of Color): open/closed state is shown by icon ROTATION
   (a shape/position change), not by color alone -- the "+" rotates to
   read as "×" visually, on top of aria-expanded already telling screen
   reader users the actual state. Respects prefers-reduced-motion via the
   global rule in the theme's direction-b.css. */
.jmc-faq-item.open .jmc-faq-icon { transform: rotate(45deg); }

.jmc-faq-a {
	font-size: 14.5px;
	color: #6b6175; /* verified 5.85:1 on white — passes AA, distinct from the unrelated #9c8fab gray that failed elsewhere; don't conflate the two */
	margin: 0 4px 20px;
	padding-top: 0;
	display: none;
}
.jmc-faq-item.open .jmc-faq-a { display: block; }


/* Bio */
.jmc-bio { font-family: 'Inter', sans-serif; }
.jmc-bio p { color: #5d5269; margin-bottom: 16px; font-size: 16px; }
.jmc-pill-row { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.jmc-pill {
	background: var(--jmc-peach); color: #9C5024; /* corrected: var(--jmc-coral-dark) measured 3.30:1 on this peach background (fails AA). #9C5024 is the same verified-passing color (4.95:1) used for the "kicker" labels elsewhere in the design system. */
	font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 30px;
}

/* Free consult CTA — standalone wrapper for the hero/final-cta widget
   instance. No special styling needed beyond what booking.css already
   provides; this class exists as a layout hook for Pagelayer placement
   (e.g. constraining width inside a hero section) without fighting the
   widget's own max-width default. */
.jmc-free-consult-cta { display: inline-block; }