/* Choosing Memento Vivere — Ivory & Navy design tokens  v1.0  (2026-10-27)
   Palette chosen by Dr. Jonathan E. Procter in six either/or rounds (see outputs/landing-palette-spec.md).
   Scheme: navy-anchored split-complementary (navy 221° · rust 9° · gold 38°) + analogous teal (176°)
   on warm neutrals (ivory, white, charcoal). Every text pairing below meets WCAG 2.2 AA.
   Layer 1: tokens.  Layer 2: aliases for the plugin templates' own variables.
   Layer 3: overrides for rules that hard-code the old sage / cream / tan palette.
   Layer 4: Astra theme chrome (header, menu, phone drawer, content, buttons, footer).
   Mirrors the structure of the Empathos tokens file so the two sites stay maintainable together. */

/* ---------- Layer 1: tokens ---------- */
:root {
  --jp-navy:         #1F2B45;  /* headings, primary buttons, step numbers. 14.1:1 on white, 12.6:1 on ivory */
  --jp-navy-hover:   #2B3A5C;  /* button hover. white text 11.3:1 */
  --jp-navy-pressed: #18223A;  /* button pressed */
  --jp-ivory:        #F5F2E9;  /* page background */
  --jp-white:        #FFFFFF;  /* cards, inputs, first-step panel */
  --jp-hairline:     #E2DDD0;  /* decorative borders and dividers only */
  --jp-control:      #8E887B;  /* input / control borders, 3.5:1 on white (non-text needs 3:1) */
  --jp-rust:         #B3432F;  /* signature accent: headline phrase, link underlines, focus. 5.6:1 white, 5.0:1 ivory */
  --jp-rust-deep:    #8F3424;  /* link hover text. 7.8:1 white, 7.0:1 ivory */
  --jp-charcoal:     #252932;  /* footer band */
  --jp-gold:         #D39C3B;  /* accents on charcoal only (6.0:1). Never text on light surfaces */
  --jp-gold-deep:    #A97A24;  /* gold icons on light surfaces (3.8:1 on white) */
  --jp-teal:         #2F8A84;  /* Assessments marker: dots, bars, icons. Never text */
  --jp-ink:          #2B2F38;  /* body copy. 13.4:1 white, 12.0:1 ivory */
  --jp-muted:        #5E636B;  /* secondary copy. 6.1:1 white, 5.4:1 ivory */
  --jp-footer-muted: #B8BCC4;  /* secondary text on charcoal. 7.7:1 */

  --jp-navy-tint:    #E9EBF0;  /* selected answer, nav hover */
  --jp-soft:         #EFEBE1;  /* tags, counts, quiet fills (navy text 11.8:1) */
  --jp-rust-tint:    #F7E9E5;  /* guidance / attention surfaces, ink text on top */
  --jp-teal-tint:    #E6F0EF;  /* success / info surfaces */

  --jp-success:      #1F6B4A;  /* 6.4:1 on white */
  --jp-danger:       #9E2B25;  /* 7.4:1 on white; deeper than rust so it never reads as the accent */
  --jp-danger-tint:  #FBEAE8;

  --jp-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --jp-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --jp-radius: 10px;
  --jp-radius-card: 12px;
  --jp-shadow: 0 1px 2px rgba(31,43,69,.06), 0 4px 16px rgba(31,43,69,.06);
}

/* ---------- Layer 2: aliases (html:root outranks the templates' own :root blocks) ---------- */
html:root {
  --primary: var(--jp-navy);        --primary-dk: var(--jp-navy-hover);
  --accent: var(--jp-rust);         --gold: var(--jp-gold-deep);
  --bg: var(--jp-ivory);            --card: var(--jp-white);
  --border: var(--jp-hairline);     --text: var(--jp-ink);    --ink: var(--jp-ink);
  --muted: var(--jp-muted);         --text-soft: var(--jp-muted);  --danger: var(--jp-danger);
  --blue: var(--jp-navy);           --blue-d: var(--jp-navy-hover); --line: var(--jp-control);
}

/* Per-assessment palettes in assessment-page.php (slate: anger-styles, attachment-insight, core-beliefs,
   inner-critic; stop: assertiveness) keep their rules but draw every colour from the brand. */
html body.cmv-slate-palette {
  --sl-primary-deep: var(--jp-navy-pressed); --sl-primary: var(--jp-navy); --sl-primary-soft: var(--jp-navy-hover);
  --sl-accent: var(--jp-rust);               --sl-accent-soft: var(--jp-rust-tint);
  --sl-warm-sand: var(--jp-ivory);           --sl-warm-paper: var(--jp-white); --sl-muted-surface: var(--jp-soft);
  --sl-ink: var(--jp-ink);                   --sl-body: var(--jp-ink);         --sl-muted: var(--jp-muted);
  --sl-border: var(--jp-control);            --sl-light-border: var(--jp-hairline); --sl-selected: var(--jp-navy-tint);
}
html body.cmv-stop-palette {
  --cmv-coral: var(--jp-navy);     --cmv-coral-dark: var(--jp-navy-hover); --cmv-coral-deep: var(--jp-navy-pressed);
  --cmv-sky: var(--jp-teal-tint);  --cmv-sky-dark: var(--jp-teal);         --cmv-yellow: var(--jp-gold);
  --cmv-forest: var(--jp-navy);    --cmv-orange: var(--jp-rust);
  --cmv-page: var(--jp-ivory);     --cmv-surface: var(--jp-white);
  --cmv-text: var(--jp-ink);       --cmv-text-secondary: var(--jp-ink);    --cmv-text-muted: var(--jp-muted);
  --cmv-border: var(--jp-hairline); --cmv-control-border: var(--jp-control);
  --cmv-selected: var(--jp-navy-tint); --cmv-hover: var(--jp-soft);
}

/* ---------- Focus: visible everywhere. Rust on light surfaces, gold on charcoal / navy ---------- */
html :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--jp-rust);
  outline-offset: 2px;
}
html :where(.site-footer, .jp-on-dark) :where(a, button, input, [tabindex]):focus-visible { outline-color: var(--jp-gold); }

.jp-visually-hidden,
html .cmv-option input {                       /* was display:none — now focusable but invisible */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; display: block;
}
html .cmv-option { position: relative; }
html .cmv-option:focus-within { outline: 3px solid var(--jp-rust); outline-offset: 2px; }

/* ---------- Layer 3: overrides for hard-coded sage / cream / tan ---------- */
/* Assessment pages */
html body { background: var(--jp-ivory); color: var(--jp-ink); }
html .cmv-header { background: var(--jp-white); border-bottom-color: var(--jp-hairline); }
html .cmv-header h1, html .cmv-completion h2 { color: var(--jp-navy); }
html .cmv-assessment-title, html .cmv-insight-heading, html .cmv-feedback-section h3, html .cmv-insight-block h4 { color: var(--jp-navy); }
html .cmv-assessment-desc, html .cmv-question-number, html .cmv-subscale-desc { color: var(--jp-muted); }
html .cmv-instructions, html .cmv-question, html .cmv-client-info, html .cmv-insight { border-color: var(--jp-hairline); }
html .cmv-question.answered { border-color: var(--jp-navy); }
html .cmv-progress { background: var(--jp-soft); }
html .cmv-progress-bar { background: var(--jp-navy); }
html .cmv-option { border-color: var(--jp-control); }
html .cmv-option:hover { background: var(--jp-soft); border-color: var(--jp-navy); }
html .cmv-option.selected, html .cmv-option:has(input:checked) { background: var(--jp-navy-tint); border-color: var(--jp-navy); }
html .cmv-option-dot { border-color: var(--jp-control); }
html .cmv-option.selected .cmv-option-dot, html .cmv-option:has(input:checked) .cmv-option-dot { border-color: var(--jp-navy); background: var(--jp-navy); }
html .cmv-option.selected .cmv-option-dot::after { background: var(--jp-white); }
html .cmv-text-input, html .cmv-client-info input { border-color: var(--jp-control); }
html .cmv-text-input:focus, html .cmv-client-info input:focus { border-color: var(--jp-navy); box-shadow: 0 0 0 3px rgba(179,67,47,.18); }
html .cmv-submit-btn, html .cmv-tos-page-button, html .cmv-tos-actions button { background: var(--jp-navy); border-color: var(--jp-navy); color: #fff; border-radius: var(--jp-radius); }
html .cmv-submit-btn:hover, html .cmv-tos-page-button:hover, html .cmv-tos-actions button:hover { background: var(--jp-navy-hover); }
html .cmv-submit-btn:active { background: var(--jp-navy-pressed); }
html .cmv-submit-btn:disabled { background: var(--jp-hairline); color: var(--jp-muted); }
html .cmv-subscale-bar, html .cmv-score-bar-fill, html .mmpi-bar-fill, html .cmv-tos-dim-track span,
html .cmv-tos-score-row.is-top .cmv-tos-score-track span { background: var(--jp-navy); }
html .cmv-subscale-value, html .cmv-question-number { color: var(--jp-navy); }
html .cmv-feedback-section summary, html .cmv-insight-block a, html .cmv-feedback-section a { color: var(--jp-navy); text-decoration-color: var(--jp-rust); }
html .cmv-guidance, html .cmv-tos-storage-notice, html .cmv-scoring-setup { background: var(--jp-rust-tint); border-color: var(--jp-rust); color: var(--jp-ink); }
html .cmv-tos-profile { border-color: var(--jp-hairline); background: var(--jp-white); }

/* Tools & Assessments directory (fallback grid + legacy cards; the v3 template carries its own palette) */
html .cmv-category-header { border-bottom-color: var(--jp-hairline); }
html .cmv-category-title { color: var(--jp-navy); font-family: var(--jp-font-display); }
html .cmv-category-desc, html .cmv-card-desc { color: var(--jp-muted); }
html .cmv-card-meta { color: var(--jp-muted); font-size: 13px; }
html .cmv-card { border-color: var(--jp-hairline); background: var(--jp-white); }
html .cmv-card:hover { border-color: var(--jp-navy); box-shadow: var(--jp-shadow); }
html .cmv-card-title { color: var(--jp-navy); }
html .cmv-card-badge { background: var(--jp-soft); color: var(--jp-navy); border: 1px solid var(--jp-hairline); font-size: 12px; }
html .cmv-card-btn-primary { background: var(--jp-navy); color: #fff; }
html .cmv-card-btn-primary:hover { background: var(--jp-navy-hover); color: #fff; }
html .cmv-card-btn-secondary { background: var(--jp-white); color: var(--jp-navy); border: 1.5px solid var(--jp-navy); }
html .cmv-card-btn-secondary:hover { background: var(--jp-navy); color: #fff; }
html .cmv-category-dot { background: var(--jp-teal) !important; }

/* Clinician dashboard: PIN card and header */
html .pin-card h1, html .dash-header .brand { color: var(--jp-navy); }
html .pin-card input[type="password"]:focus, html .client-search:focus { border-color: var(--jp-navy); box-shadow: 0 0 0 3px rgba(179,67,47,.18); }
html .pin-card button { background: var(--jp-navy); }
html .pin-card button:hover { background: var(--jp-navy-hover); }
html .btn-logout:hover { border-color: var(--jp-navy); color: var(--jp-navy); }

/* Site gate (standalone page; used only if the access-key gate is switched on) */
html .go { background: var(--jp-navy); }
html .go:hover { background: var(--jp-navy-hover); }
html .toggle, html .foot a { color: var(--jp-navy); text-decoration-color: var(--jp-rust); }
html input#code { border-color: var(--jp-control); }
html input#code:focus { border-color: var(--jp-navy); box-shadow: 0 0 0 3px rgba(179,67,47,.2); }

/* ---------- Layer 4: Astra theme chrome ---------- */
html body, html .site, html .site-content, html .ast-plain-container, html .ast-page-builder-template,
html .ast-separate-container { background-color: var(--jp-ivory); }
html body, html button, html input, html select, html textarea { font-family: var(--jp-font-body); }
html body { color: var(--jp-ink); -webkit-font-smoothing: antialiased; }
html :where(h1, h2, h3, h4, .entry-title, .site-title) { font-family: var(--jp-font-display); color: var(--jp-navy); }
html .entry-content :where(p, li) { color: var(--jp-ink); }

/* Header */
html .site-header .ast-primary-header-bar, html .site-header .main-header-bar,
html .ast-mobile-header-wrap .ast-primary-header-bar { background: var(--jp-white); border-bottom: 1px solid var(--jp-hairline); }
html .site-header .site-title a, html .site-header .site-title a:visited { color: var(--jp-navy); font-family: var(--jp-font-display); font-weight: 600; letter-spacing: -.005em; }
html .site-header .site-description { color: var(--jp-muted); }
html .main-header-menu .menu-item > .menu-link { color: var(--jp-muted); font-weight: 500; font-size: .9375rem; }
html .main-header-menu .menu-item > .menu-link:hover,
html .main-header-menu .menu-item:hover > .menu-link { color: var(--jp-navy); }
html .ast-desktop .main-header-menu .current-menu-item > .menu-link,
html .ast-desktop .main-header-menu .current_page_item > .menu-link {
  color: var(--jp-navy); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--jp-rust); text-decoration-thickness: 2px; text-underline-offset: 8px;
}
/* The last menu item reads as an outline button on desktop (preview: "Contact") */
html .ast-desktop .main-header-menu > .menu-item.jp-menu-cta > .menu-link {
  border: 1.5px solid var(--jp-navy); border-radius: var(--jp-radius); color: var(--jp-navy); font-weight: 600;
  padding: 0 18px; min-height: 44px; height: 44px; line-height: 1.2; display: inline-flex; align-items: center;
  margin: 0 0 0 8px; text-decoration: none; white-space: nowrap;
}
html .ast-desktop .main-header-menu > .menu-item.jp-menu-cta { display: flex; align-items: center; }
html .ast-desktop .main-header-menu > .menu-item.jp-menu-cta > .menu-link:hover { background: var(--jp-navy); color: #fff; }
html .ast-mobile-menu-trigger-minimal, html .menu-toggle.main-header-menu-toggle {
  color: var(--jp-navy) !important; background: var(--jp-white) !important; border: 1.5px solid var(--jp-hairline) !important;
  border-radius: 8px; min-width: 44px; min-height: 44px;
}
html .menu-toggle .ast-mobile-svg, html .menu-toggle svg, html .ast-mobile-popup-drawer .menu-toggle-close svg { fill: var(--jp-navy) !important; color: var(--jp-navy) !important; }
html #ast-scroll-top { background-color: var(--jp-navy) !important; color: #fff !important; border-radius: 10px; }
html #ast-scroll-top:hover { background-color: var(--jp-navy-hover) !important; }
html #ast-scroll-top .ast-icon svg { fill: #fff !important; }

/* Pages built around a full directory or library start with their own greeting/intro (as on Empathos), so the
   theme's page title above them is redundant. */
html body:has(#cmvDirectory) .entry-header,
html body.home .entry-header { display: none; }

/* Phone menu drawer: off-canvas panel with depth (same treatment as Empathos) */
html .ast-mobile-popup-drawer .ast-mobile-popup-inner { background: var(--jp-white); box-shadow: -16px 0 48px rgba(31,43,69,.28); border-left: 1px solid var(--jp-hairline); }
html .ast-mobile-popup-drawer.active .ast-mobile-popup-overlay { background: rgba(24,28,36,.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
html .ast-mobile-popup-drawer .ast-mobile-popup-header { border-bottom: 1px solid var(--jp-hairline); padding: max(10px, env(safe-area-inset-top)) 12px 10px; }
html .ast-mobile-popup-drawer .menu-toggle-close { color: var(--jp-navy); background: var(--jp-soft); border: 1px solid var(--jp-hairline); border-radius: 10px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
html .ast-mobile-popup-drawer .ast-mobile-popup-content .main-header-menu { padding: 8px 0; }
html .ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link { min-height: 52px; padding: 0 20px; font-size: 1.0625rem; font-weight: 500; color: var(--jp-ink); border-bottom: 1px solid #F1EDE3; display: flex; align-items: center; }
html .ast-mobile-popup-drawer .main-header-menu .menu-item:last-child > .menu-link { border-bottom: 0; }
html .ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link:hover,
html .ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link:focus-visible { background: var(--jp-ivory); color: var(--jp-navy); }
html .ast-mobile-popup-drawer .main-header-menu .current-menu-item > .menu-link { color: var(--jp-navy); font-weight: 650; box-shadow: inset 3px 0 0 var(--jp-rust); background: var(--jp-ivory); }
html .ast-mobile-popup-drawer .ast-mobile-popup-content { padding-bottom: env(safe-area-inset-bottom); }

/* Content links: navy text, rust underline, deep-rust on hover */
html .entry-content a:where(:not(.wp-block-button__link):not(.wp-element-button):not(.cmv-card-btn):not(.btn):not([class*="button"])) {
  color: var(--jp-navy); text-decoration: underline; text-decoration-color: var(--jp-rust);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
html .entry-content a:where(:not(.wp-block-button__link):not(.wp-element-button):not(.cmv-card-btn):not(.btn):not([class*="button"])):hover {
  color: var(--jp-rust-deep); text-decoration-thickness: 2px;
}

/* Buttons: navy, 10px radius, 52px tap height, lighter on hover, darker when pressed */
html .wp-block-button .wp-block-button__link, html .wp-element-button, html .ast-button, html .ast-custom-button,
html .entry-content .button, html input[type="submit"], html button.wpforms-submit, html .wpforms-container .wpforms-submit {
  background: var(--jp-navy); color: #fff; border: 1.5px solid var(--jp-navy); border-radius: var(--jp-radius);
  font-family: var(--jp-font-body); font-weight: 600; min-height: 52px; padding: 0 26px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  box-shadow: none; transition: background-color .15s ease, border-color .15s ease;
}
html .wp-block-button .wp-block-button__link:hover, html .wp-element-button:hover, html .ast-button:hover,
html .entry-content .button:hover, html input[type="submit"]:hover, html .wpforms-container .wpforms-submit:hover {
  background: var(--jp-navy-hover); border-color: var(--jp-navy-hover); color: #fff;
}
html .wp-block-button .wp-block-button__link:active, html .wp-element-button:active { background: var(--jp-navy-pressed); }
html .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--jp-navy); border-color: var(--jp-navy); }
html .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--jp-navy); color: #fff; }
/* Block presets (e.g. has-luminous-vivid-amber-background-color) ship with !important and inline styles;
   one button colour site-wide keeps the palette's 60-30-10 balance. */
html .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background,
html .wp-block-button:not(.is-style-outline) .wp-block-button__link[style*="background"] { background-color: var(--jp-navy) !important; }
html .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:hover,
html .wp-block-button:not(.is-style-outline) .wp-block-button__link[style*="background"]:hover { background-color: var(--jp-navy-hover) !important; }
html .wp-block-button .wp-block-button__link.has-text-color, html .wp-block-button .wp-block-button__link[style*="color:"] { color: #fff !important; }
html .wp-block-button.is-style-outline .wp-block-button__link.has-text-color { color: var(--jp-navy) !important; }
html .wp-block-button .wp-block-button__link[style*="border-radius"] { border-radius: var(--jp-radius) !important; }

/* Form fields: no iOS zoom (16px), visible control borders */
html .entry-content :where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], select, textarea) {
  font-size: 16px; border: 1px solid var(--jp-control); border-radius: 8px; background: var(--jp-white); color: var(--jp-ink);
}

/* Footer band: charcoal with ivory text and gold accents */
html .site-footer, html .site-footer .site-primary-footer-wrap, html .site-footer .site-below-footer-wrap,
html .site-footer .site-above-footer-wrap, html .ast-small-footer { background: var(--jp-charcoal) !important; color: var(--jp-ivory); border-top: 0; }
html .site-footer :where(p, span, div, li, .ast-footer-copyright) { color: var(--jp-footer-muted); }
html .site-footer a { color: var(--jp-ivory); text-decoration-color: var(--jp-gold); }
html .site-footer a:hover { color: var(--jp-gold); }

/* Long words wrap instead of overflowing on phones */
html .entry-content { overflow-wrap: anywhere; }
@media (max-width: 543px) {
  html .wp-block-button { width: 100%; }
  html .wp-block-button .wp-block-button__link { width: 100%; }
}

/* 2026-10-28 · Phone menu (Astra drop-down variant): same calm treatment as the drawer; current page = navy with a rust bar, never Astra blue */
html .ast-mobile-header-content .main-header-menu .menu-item > .menu-link { color: var(--jp-ink); background: transparent; font-weight: 500; }
html .ast-mobile-header-content .main-header-menu .menu-item > .menu-link:hover,
html .ast-mobile-header-content .main-header-menu .menu-item > .menu-link:focus-visible { background: var(--jp-ivory); color: var(--jp-navy); }
html .ast-mobile-header-content .main-header-menu .current-menu-item > .menu-link,
html .ast-mobile-header-content .main-header-menu .current_page_item > .menu-link { color: var(--jp-navy) !important; background: var(--jp-ivory) !important; font-weight: 600; box-shadow: inset 3px 0 0 var(--jp-rust); }
/* Studio phone tab bar (52px + home indicator): lift Astra's scroll-to-top button clear of it */
@media (max-width: 743px) and (pointer: coarse) and (min-height: 501px) {
  html body.cmv-has-tabbar #ast-scroll-top { bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
}