/*
 * Functional baseline only. Fonts, colors, spacing should be finished
 * in Divi's Theme Customizer / the child theme's style.css so they stay
 * in sync with the rest of arianegoodwin.com. These rules exist so the
 * wizard is usable before that pass happens.
 */
.myca-app { max-width: 100%; margin: 0 auto; padding: 2rem 1rem; }
.myca-app, .myca-results { font-size: 17px; line-height: 1.6; font-weight: 450 !important; }
.myca-app strong, .myca-results strong,
.myca-app b, .myca-results b,
.myca-app h1, .myca-app h2, .myca-app h3, .myca-app h4,
.myca-results h1, .myca-results h2, .myca-results h3, .myca-results h4 { font-weight: 700 !important; }
.myca-screen p, .myca-results p { margin: 0 0 1.1em; }
.myca-screen ul, .myca-results ul { margin: 0 0 1.1em; padding-left: 2rem; list-style: none; }
.myca-screen li, .myca-results li { margin-bottom: 0.4em; position: relative; }
.myca-screen li::before, .myca-results li::before { content: "\2192"; position: absolute; left: -1.3em; }
.myca-zone-groups { margin-left: 2rem; }
p.myca-zone-list { margin: 0 0 1.1em 2rem; }
p.myca-numbered-step { margin-left: 2rem; margin-bottom: 0.4em !important; display: flex !important; }
p.myca-numbered-step .myca-num { flex: 0 0 1.6em; font-weight: 700; }
p.myca-numbered-step .myca-num-content { flex: 1; min-width: 0; }
.myca-numbered-heading { padding-left: 1.5em !important; text-indent: -1.5em !important; }
.myca-pattern-block ul { padding-left: 2.5em !important; }
.myca-indent { margin-left: 2rem; }
@media (max-width: 640px) {
	.myca-zone-groups, .myca-indent { margin-left: 1rem; }
	p.myca-zone-list, p.myca-numbered-step { margin-left: 1rem; }
	.myca-screen ul, .myca-results ul { padding-left: 1.4em; }
}
.myca-screen h1, .myca-screen h2 { margin-bottom: 0.5rem; }
.myca-sub { font-style: italic; font-weight: 700; }
.myca-emphasis { font-style: italic; text-align: center; color: #c00000; }
.myca-btn {
	display: inline-block; margin-top: 1.5rem; padding: 0.75rem 1.5rem;
	border: none; border-radius: 4px; cursor: pointer; font-size: 1rem;
	background: #1A1A1A; color: #fff; text-decoration: none;
}
.myca-field-frame { border: 1px solid #ddd; border-radius: 6px; padding: 1rem; margin: 1rem 0; }
.myca-field-frame input {
	display: block !important; width: 100% !important; box-sizing: border-box !important;
	margin-bottom: 1rem !important; padding: 0.9rem 1rem !important;
	border: 1px solid #ccc !important; border-radius: 4px !important;
}
.myca-fine-print { font-size: 0.85rem; color: #666; }
.myca-error { color: #b3261e; min-height: 1.2em; }
.myca-rating-input { font-size: 1.5rem; width: 5rem; padding: 0.5rem; text-align: center; }
.myca-screen label { display: inline-block; margin-right: 0.75rem; }
.myca-radio, .myca-checkbox { display: block !important; width: 100% !important; float: none !important; margin: 0.5rem 0 !important; }
.myca-pattern-block { margin: 1.5rem 0; padding: 1rem 0; border-top: 1px solid #eee; }
.myca-pattern-block--signature { border-top: 2px solid #1A1A1A; }
.myca-wheel { width: 100%; max-width: 100%; height: auto; display: block; }
/* Phones: the wheel shrinks to ~340px wide, which made its zone labels ~7px.
   Enlarge only the external labels (not the wedge numbers); their line
   spacing is in em, so lines stay evenly spaced. overflow:visible + the
   bottom margin give the larger labels room without clipping. */
.myca-wheel { overflow: visible; }
@media (max-width: 640px) {
	.myca-wheel text.myca-wheel-label { font-size: 20px !important; } /* SVG units: about 13px on a phone screen */
	.myca-wheel { margin-bottom: 14px !important; }
}
.myca-wheel-wrap svg { width: 100%; max-width: 100%; display: block; margin: 0.4rem auto; }
.myca-wheel-wrap--reference svg { opacity: 0.9; }
.myca-zone-select { margin-right: 1rem; margin-bottom: 0.5rem; }
.myca-results__wheel { max-width: 100%; }
.myca-static-diagram { width: 100%; max-width: 100%; display: block; margin: 1.5rem auto; }
textarea#myca-reflections, textarea#myca-profile-reflections, textarea#myca-zone5-reflection {
	width: 100%; min-height: 6rem; margin: 1rem 0; padding: 0.5rem;
	font: inherit; overflow: hidden; resize: none;
}

/* ---- Page 16 (single continuous page) ---- */
.myca-p16-heading { margin-top: 2.5rem !important; padding-left: 1.6em !important; text-indent: -1.6em !important; }
.myca-p16-heading .myca-p16-num { display: inline-block; width: 1.6em; text-indent: 0; }
ul.myca-map-summary { margin-bottom: 1.5em !important; }
p.myca-field-label { margin: 1.5rem 0 0.25rem !important; }
p.myca-field-label label { display: inline !important; margin: 0 !important; }
textarea#myca-profile-reflections { margin-top: 0.25rem !important; box-sizing: border-box !important; border: 1px solid #ccc !important; border-radius: 4px !important; padding: 0.75rem !important; }
.myca-save-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.75rem; }
.myca-btn.myca-btn--save { margin-top: 0 !important; padding: 0.55rem 1.1rem !important; font-size: 0.95rem !important; }
.myca-btn[disabled] { opacity: 0.6 !important; cursor: default !important; }
.myca-save-status { font-size: 0.95rem; color: #2e7d32; }
.myca-url-box {
	display: flex !important; align-items: center; gap: 0.75rem; flex-wrap: wrap;
	margin: 0 0 2rem !important; padding: 0.75rem 1rem !important;
	border: 1px solid #ddd !important; border-radius: 6px !important; background: #fafafa !important;
}
.myca-url-box__link { flex: 1 1 260px; min-width: 0; word-break: break-all; overflow-wrap: anywhere; font-size: 0.95rem; }
.myca-url-box__copy {
	flex: 0 0 auto; cursor: pointer; margin: 0 !important;
	padding: 0.45rem 0.9rem !important; font-size: 0.9rem !important; line-height: 1.3 !important;
	background: #fff !important; color: #1A1A1A !important;
	border: 1px solid #1A1A1A !important; border-radius: 4px !important;
}
p.myca-tracker-download a, p.myca-tracker-download span { text-decoration: underline !important; }
a.myca-btn, a.myca-btn:hover, a.myca-btn:visited { color: #fff !important; text-decoration: none !important; }
@media (max-width: 640px) {
	.myca-url-box { padding: 0.6rem 0.75rem !important; }
	.myca-url-box__copy { width: 100%; }
}

/* results page — /myca-results/{token}/ served on the chosen Results page.
   Hide that page's own title (e.g. "myca_results") that Divi prints above content. */
body.myca-results-page h1.entry-title,
body.myca-results-page h1.main_title,
body.myca-results-page .et_post_meta_wrapper > h1 { display: none !important; }
/* Same side spacing as the quiz pages, which sit inside a standard Divi row
   (80% of the screen, max 1080px, centered). min() keeps this from ever
   making the results narrower than whatever container Divi already gives it. */
body.myca-results-page .myca-results {
	width: 100% !important; max-width: min(80vw, 1080px) !important;
	margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important;
}
/* results page (templates/results-page.php) */
.myca-results { max-width: 100%; margin: 0 auto; padding: 2rem 1rem; }
.myca-results__tiers { display: flex; gap: 1rem; flex-wrap: wrap; }
.myca-tier { flex: 1 1 160px; }
.myca-tier--brighter h3 { color: #b8860b; }
.myca-tier--flickering h3 { color: #607d8b; }
.myca-tier--dimming h3 { color: #3d3b4e; }

@media print {
	.myca-results__next, header, footer, nav { display: none !important; }
}

/* Manual line breaks that mirror the source doc's line layout.
   On mobile these collapse so text flows naturally instead of breaking mid-sentence. */
@media (max-width: 640px) {
	br.myca-lb { display: none; }
}

/* PHASE labels: always bold (Divi can lighten <p>). */
p.myca-phase-label, p.myca-phase-label * { font-weight: 700 !important; }

/* ---------- Journey header & footer (quiz page only) ---------- */
.myca-journey-header {
	display: grid !important; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 1rem;
	padding: 14px 4% !important; margin: 0 !important; background: #fff !important;
	border-bottom: 1px solid rgba(0,0,0,0.06); box-sizing: border-box !important; width: 100%;
	position: relative; z-index: 10;
}
.myca-journey-header__left { justify-self: start; display: flex; align-items: center; min-width: 0; align-self: stretch; }
.myca-journey-header__right { justify-self: end; display: flex; align-items: center; min-width: 0; }
.myca-journey-header__title {
	justify-self: center; text-align: center; font-size: 1.25rem !important; line-height: 1.3 !important;
	font-weight: 600 !important; color: #1A1A1A !important;
}
/* Design detail: flush to the header's bottom-left corner, full header height (mirrors the site header, where it sits in the bottom-right). */
.myca-journey-header__deco { position: absolute !important; left: 0 !important; bottom: 0 !important; top: auto !important; height: 100% !important; max-height: none !important; width: auto !important; max-width: 30% !important; object-fit: contain; object-position: left bottom; margin: 0 !important; display: block; pointer-events: none; }
.myca-journey-header__text { font-size: 0.95rem !important; color: #444 !important; white-space: nowrap; }
.myca-journey-header__logo { display: block; line-height: 0; }
.myca-journey-header__logo img { display: block; max-height: 90px !important; width: auto !important; max-width: 100% !important; }
.myca-journey-header__logo:not([href]) { cursor: default; pointer-events: none; }
.myca-journey-footer { padding: 18px 4% !important; margin: 0 !important; text-align: center; background: #fff !important; border-top: 1px solid rgba(0,0,0,0.06); }
.myca-journey-footer p { margin: 0 !important; padding: 0 !important; font-size: 0.85rem !important; color: #555 !important; }
@media (max-width: 640px) {
	.myca-journey-header { grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,1fr); gap: 0.5rem; padding: 10px 12px !important; }
	.myca-journey-header__title { font-size: 0.9rem !important; line-height: 1.25 !important; }
	.myca-journey-header__logo img { max-height: 54px !important; }
	.myca-journey-header__text { font-size: 0.75rem !important; white-space: normal; }
}

/* ---------- Click / Tap to enlarge (same look as the About You page) ---------- */
.myca-enlarge { margin: 0 0 1.25rem !important; }
.myca-enlarge img.myca-static-diagram { cursor: zoom-in; }
p.myca-map-hint {
	cursor: pointer; text-transform: uppercase; margin: 0 0 8px !important; padding: 0 !important;
	font-family: Montserrat, Arial, sans-serif !important; font-weight: 500 !important; font-size: 13px !important; line-height: 20px !important;
	color: #7A5DAF !important; letter-spacing: 0.02em;
}
p.myca-map-hint::before {
	content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -3px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5DAF' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.8v5.4M7.8 10.5h5.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
p.myca-map-hint:hover, p.myca-map-hint:focus-visible { opacity: .75; }
p.myca-map-hint .myca-hint-click { display: inline !important; }
p.myca-map-hint .myca-hint-tap { display: none !important; }
@media (max-width: 980px) {
	p.myca-map-hint .myca-hint-click { display: none !important; }
	p.myca-map-hint .myca-hint-tap { display: inline !important; }
}
/* the zoom viewer */
html.myca-mv-lock, html.myca-mv-lock body { overflow: hidden !important; }
.myca-mv { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; background: rgba(28,22,38,.96); display: none; touch-action: none; -webkit-user-select: none; user-select: none; }
.myca-mv.is-open { display: block; }
.myca-mv-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; touch-action: none; cursor: grab; }
.myca-mv-stage:active { cursor: grabbing; }
.myca-mv-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none !important; max-height: none !important; will-change: transform; background: #fff; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.myca-mv-bar { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; display: flex; gap: 10px; z-index: 2; }
.myca-mv-btn { width: 46px !important; height: 46px !important; border-radius: 50% !important; border: 1.5px solid #D5B549 !important; background: rgba(255,255,255,.96) !important; color: #5B4A86 !important; font: 400 28px/1 Montserrat, Arial, sans-serif !important; cursor: pointer; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; margin: 0 !important; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.myca-mv-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.myca-mv-hint { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); color: #fff; font: 400 13px/1.3 Montserrat, Arial, sans-serif; background: rgba(0,0,0,.4); padding: 7px 14px; border-radius: 20px; white-space: nowrap; pointer-events: none; }

/* ---------- Tracker: Download / Print ---------- */
.myca-tracker-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.25rem 0 0.5rem; }
a.myca-btn.myca-btn--small { margin: 0 !important; padding: 0.6rem 1.4rem !important; font-size: 0.95rem !important; }
a.myca-btn.myca-btn--outline, a.myca-btn.myca-btn--outline:visited, a.myca-btn.myca-btn--outline:hover {
	background: #fff !important; color: #1A1A1A !important; border: 1px solid #1A1A1A !important;
}
p.myca-tracker-download { overflow-wrap: anywhere; }
@media (min-width: 981px) { p.myca-tracker-note { display: none !important; } }
p.myca-tracker-note { font-size: 0.9rem !important; color: #555 !important; margin-top: 0 !important; }