/**
 * CE Theme: styles for the persona quiz (journeys/quiz.html), loaded by
 * page-quiz.php. Colours are custom properties on :root; text colours meet
 * WCAG AA (4.5:1) on --bg.
 *
 * @since 2.8.6
 * @since 2.10.0 Two-column start screen, modes, native inputs.
 */
/* Self-hosted fonts */
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-300-italic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'CE Hadith'; src: url('../fonts/ce-hadith-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'CE Hadith'; src: url('../fonts/ce-hadith-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'CE Hadith'; src: url('../fonts/ce-hadith-400.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }



*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0d0820;--surface:#150d2c;--line:rgba(242,238,255,0.14);--line-strong:rgba(242,238,255,0.32);
  --text:#f2eeff;--muted:rgba(242,238,255,0.74);--dimmed:rgba(242,238,255,0.62);
  --accent:#0cd4e0;--accent-soft:rgba(12,212,224,0.10);--accent-ink:#0d0820;--brand-red:#e05252;
  --serif:'Playfair Display',serif;--body:'DM Sans',sans-serif;--reading:'Cormorant Garamond',serif;
  --radius:10px;
}
html,body{min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--body);}
body{overflow-x:hidden;line-height:1.5;}
[hidden]{display:none !important;}
a{color:var(--accent);}

.ce-nav{position:fixed;top:0;left:0;right:0;z-index:100;height:60px;display:flex;align-items:center;padding:0 2rem;background:var(--bg);border-bottom:1px solid var(--line);}
.nav-logo{font-family:var(--serif);font-style:italic;font-size:1.1rem;font-weight:700;text-decoration:none;}
.nav-logo-text{display:inline-flex;align-items:baseline;line-height:1;}
.nav-logo-ce{color:var(--brand-red);font-weight:900;}
.nav-logo-ev{color:var(--text);font-weight:700;}

.quiz-wrap{max-width:1040px;margin:0 auto;padding:108px 2rem 4rem;}

/* START */
.quiz-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:4rem;align-items:start;}
.qi-eyebrow,.mode-legend,.q-meta,.res-eyebrow,.res-h{font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--dimmed);font-weight:500;}
.qi-eyebrow{display:block;margin-bottom:1.25rem;}
.qi-title{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.6rem);font-weight:900;line-height:1.05;letter-spacing:-0.02em;margin-bottom:1.5rem;}
.qi-title em{font-style:italic;color:var(--muted);}
.qi-welcome{font-size:1rem;color:var(--accent);margin-bottom:1rem;}
.qi-sub{font-size:1.05rem;color:var(--muted);max-width:34em;margin-bottom:1rem;}
.qi-privacy,.qi-previous{font-size:0.88rem;color:var(--dimmed);max-width:34em;margin-bottom:0.75rem;}
.qi-card{border:1px solid var(--line);border-radius:var(--radius);padding:1.75rem;background:var(--surface);}
.mode-set{border:0;display:grid;gap:0.5rem;margin-bottom:1.25rem;}
.mode-legend{margin-bottom:0.9rem;}
.mode-opt{display:flex;align-items:center;gap:0.75rem;padding:0.85rem 1rem;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;}
.mode-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);}
.mode-name{font-weight:600;flex:1;}
.mode-count{font-size:0.85rem;color:var(--dimmed);}
.mode-note{font-size:0.82rem;color:var(--dimmed);margin-top:1rem;}
input[type=radio],input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px;flex-shrink:0;margin-top:0.15rem;}

/* BUTTONS */
.btn-start,.btn-next,.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;min-height:46px;padding:0.8rem 1.8rem;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);font:600 0.95rem var(--body);cursor:pointer;text-decoration:none;}
.btn-start{width:100%;}
.btn-next:disabled{background:transparent;color:var(--dimmed);border:1px solid var(--line-strong);cursor:not-allowed;}
.btn-prev,.btn-quiet,.btn-resume{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0.7rem 1.3rem;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--text);font:500 0.9rem var(--body);cursor:pointer;text-decoration:none;}
.btn-resume{width:100%;margin-top:0.6rem;}
.btn-prev:hover,.btn-quiet:hover,.btn-resume:hover{border-color:var(--text);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* QUESTIONS */
.quiz-run,.result-screen{max-width:680px;margin:0 auto;}
.quiz-progress{margin-bottom:2.25rem;}
.qp-track{height:2px;background:var(--line);overflow:hidden;margin-bottom:0.6rem;}
.qp-fill{height:100%;width:0;background:var(--accent);transition:width 0.3s ease;}
.qp-label{font-size:0.8rem;color:var(--dimmed);}
.q-block{border:0;}
.q-legend{display:block;width:100%;}
.q-meta{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:0.75rem;}
.q-topic{color:var(--accent);}
.q-text{font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,1.75rem);font-weight:700;line-height:1.3;margin-bottom:0.5rem;}
.q-text:focus{outline:none;}
.q-text:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px;}
.q-hint{font-size:0.95rem;color:var(--muted);margin-bottom:1.5rem;}
.q-options{display:grid;gap:0.6rem;}
.q-option{display:flex;align-items:flex-start;gap:0.85rem;padding:0.95rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;}
.q-option:hover{border-color:var(--line-strong);}
.q-option:has(input:checked){border-color:var(--accent);background:var(--accent-soft);}
.q-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
.q-option input:focus-visible{outline:none;}
.q-skip{border-style:dashed;}
.opt-body{display:flex;flex-direction:column;min-width:0;}
.opt-text{font-size:0.95rem;color:var(--text);overflow-wrap:anywhere;}
.opt-sub{font-size:0.84rem;color:var(--dimmed);margin-top:0.15rem;}
.q-limit{font-size:0.85rem;color:var(--accent);min-height:1.3em;margin-top:0.6rem;}
.q-nav{display:flex;justify-content:space-between;gap:0.75rem;margin-top:1.5rem;}
.q-nav .btn-next{margin-left:auto;}

/* RESULT */
.res-eyebrow{margin-bottom:0.75rem;}
.res-path{font-family:var(--serif);font-size:clamp(2rem,5vw,3rem);font-weight:900;line-height:1.1;letter-spacing:-0.02em;margin-bottom:1rem;}
.res-path:focus{outline:none;}
.res-desc{font-size:1.05rem;color:var(--muted);margin-bottom:1.75rem;}
.res-actions{display:flex;flex-wrap:wrap;gap:0.75rem;margin-bottom:2.5rem;}
.res-block{border-top:1px solid var(--line);padding:1.5rem 0;}
.res-h{margin-bottom:0.75rem;}
.res-links{list-style:none;display:grid;gap:0.5rem;}
.res-link{display:block;padding:0.7rem 0;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line);}
.res-link:hover{text-decoration:underline;}
.res-small{font-size:0.9rem;color:var(--muted);margin-bottom:0.5rem;}
.res-tools{display:flex;flex-wrap:wrap;gap:0.6rem;align-items:center;border-top:1px solid var(--line);padding-top:1.5rem;}
.res-status{font-size:0.85rem;color:var(--dimmed);}

@media (max-width: 860px){
  .quiz-intro{grid-template-columns:1fr;gap:2rem;}
}
@media (max-width: 600px){
  .ce-nav{padding:0 16px;height:56px;}
  .quiz-wrap{padding:84px 16px 3rem;}
  .qi-card{padding:1.25rem;}
  .q-nav{position:sticky;bottom:0;background:var(--bg);padding:0.75rem 0 calc(0.5rem + env(safe-area-inset-bottom,0px));margin-top:1rem;}
  .q-nav button{flex:1;}
  .res-actions > *{width:100%;}
}
@media (prefers-reduced-motion: reduce){ .qp-fill{transition:none;} }

/* WCAG 2.4.11 (2.14.0): a focused option never hides under the fixed
   header or, on phones, under the sticky Back/Next bar. */
html{scroll-padding-top:76px;}
@media (max-width: 600px){ html{scroll-padding-bottom:110px;} }

/* 2.4.1: skip link, off screen until it takes focus. */
.ce-skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1000; padding: 0.75rem 1.25rem; border-radius: 8px; background: #0cd4e0; color: #0d0820; font-weight: 600; text-decoration: none; }
.ce-skip-link:focus { top: 0.75rem; outline: 2px solid #f2eeff; outline-offset: 2px; }
main[tabindex="-1"]:focus { outline: none; }