/* Cornerstones Curriculum Audit — frontend styles
   Lato is loaded via wp_enqueue_style in class-shortcode.php (no @import needed). */

/* ── Custom properties ── */
#cca-app {
  --cca-pink:        #af4d76;
  --cca-pink-dark:   #943f64;
  --cca-orange:      #f99d31;
  --cca-green:       #3a9a6a;   /* darkened slightly for legibility on light paper */
  --cca-cream:       #f8f7f5;
  --cca-text:        #1e2d3d;   /* near-black body text */
  --cca-muted:       #5a6e7a;
  --cca-border:      #dde3e6;
  --cca-white:       #ffffff;
  --cca-font:        'Lato', sans-serif;
  --cca-radius:      6px;
  --cca-radius-pill: 9999px;

  /* Paper texture — two SVG noise layers (fine grain + coarse crumple) stacked
     with radial gradients for uneven lighting. Pure CSS, crisp at any resolution. */
  --cca-paper-color: #eceae5;
  --cca-paper-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.70' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.025 0.09' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23c)' opacity='0.32'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 18% 28%, rgba(255,255,255,0.55) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 68%, rgba(185,178,165,0.45) 0%, transparent 46%),
    radial-gradient(ellipse at 48% 5%,  rgba(255,255,255,0.30) 0%, transparent 38%),
    radial-gradient(ellipse at 8%  82%, rgba(200,193,182,0.30) 0%, transparent 34%);
  --cca-paper-size:   250px 250px, 600px 600px, cover, cover, cover, cover;
  --cca-paper-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* ── Scoped reset ── */
#cca-app,
#cca-app * {
  box-sizing: border-box;
  font-family: var(--cca-font);
}

#cca-app {
  /* Full-width breakout — escapes Gutenberg's is-layout-constrained wrapper.
     max-width: none overrides the theme's max-width: 800px rule (ID selector
     beats class selector on specificity).
     margin !important overrides WordPress core's generated
     "margin-left: auto !important; margin-right: auto !important" which
     would otherwise re-centre this element at 800px width on laptop viewports.
     JS also removes overflow:hidden from ancestors at runtime. */
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  color: var(--cca-text);
  line-height: 1.6;
}

/* ── Screen management + hidden override (some themes reset [hidden]) ── */
.cca-screen[hidden]  { display: none !important; }
#cca-app [hidden]    { display: none !important; }

/* ── Paper texture — applied to every surface that was dark teal ── */
.cca-screen--dark,
.cca-overlay-context {
  background-color:  var(--cca-paper-color);
  background-image:  var(--cca-paper-image);
  background-size:   var(--cca-paper-size);
  background-repeat: var(--cca-paper-repeat);
  color: var(--cca-text);
}

.cca-screen--dark { min-height: 70vh; }

/* ── Shared buttons ── */
.cca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.75rem;
  border-radius: var(--cca-radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  font-family: var(--cca-font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.cca-btn:focus-visible {
  outline: 3px solid var(--cca-pink);
  outline-offset: 3px;
}

.cca-btn-primary {
  background: var(--cca-pink);
  color: var(--cca-white);
  border-color: var(--cca-pink);
}
.cca-btn-primary:hover { background: var(--cca-pink-dark); border-color: var(--cca-pink-dark); }

/* Ghost button — now on a light paper background */
.cca-btn-ghost-light {
  background: rgba(0,0,0,0.06);
  color: var(--cca-text);
  border-color: rgba(0,0,0,0.18);
}
.cca-btn-ghost-light:hover { background: rgba(0,0,0,0.10); }

.cca-btn-back {
  background: transparent;
  color: var(--cca-muted);
  border-color: transparent;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 0.9rem;
}
.cca-btn-back:hover { color: var(--cca-text); }

.cca-btn-lg   { padding: 0.85rem 2.25rem; font-size: 1.05rem; }
.cca-btn-full { width: 100%; }

/* Spinner */
.cca-btn-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: var(--cca-white);
  border-radius: 50%;
  animation: cca-spin 0.65s linear infinite;
  display: inline-block;
}
[hidden].cca-btn-spinner { display: none !important; }
@keyframes cca-spin { to { transform: rotate(360deg); } }

/* ── INTRO SCREEN ── */
.cca-intro-inner {
  max-width: 680px;
  padding: 5rem 2rem;
  margin: 0 auto;
}

.cca-intro-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cca-orange);
  margin: 0 0 1.25rem;
}

.cca-intro-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--cca-text);
  line-height: 1.15;
  margin: 0 0 1.25rem;
}

.cca-intro-desc {
  font-size: 1.05rem;
  color: var(--cca-muted);
  max-width: 480px;
  margin: 0 0 2.5rem;
  line-height: 1.7;
}

/* Resume card */
.cca-resume-card {
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: var(--cca-radius);
  padding: 1.25rem 1.5rem;
  margin-top: 2rem;
  max-width: 460px;
}
.cca-resume-label {
  font-weight: 700;
  color: var(--cca-pink);
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
}
.cca-resume-meta {
  font-size: 0.875rem;
  color: var(--cca-muted);
  margin: 0 0 1rem;
}
.cca-resume-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ── PROGRESS BAR STRIP ── */
/*  Matches the international site layout:
    [Step label] ——progress fill—— [Category]
    All inline, 64 px tall, progress fill grows left→right.           */
.cca-q-bar {
  display: flex;
  align-items: center;
  height: 64px;
  gap: 1.5rem;
  /* Align text to the same left/right edge as the site's content container */
  padding: 0 max(1.5rem, var(--cca-site-left, 1.5rem));
  font-size: 0.82rem;
  background: var(--cca-pink);
  color: #ffffff;
}

/* "Question X of 12" — muted/secondary so the category stands out */
.cca-q-bar-left {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Category label — bright orange, bold */
.cca-q-bar-category {
  color: #f99d31 !important;
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Fill bar stretches between step and category */
.cca-progress-track {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  overflow: hidden;
}
.cca-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--cca-orange);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

/* ── QUESTION SCREEN ── */
.cca-question-inner {
  /* Left edge aligns to the site container, detected in JS at page load */
  padding: 3.5rem 2rem 3rem max(1.5rem, var(--cca-site-left, 1.5rem));
  max-width: calc(var(--cca-site-left, 0px) + 720px);
}

.cca-q-text {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--cca-text);
  line-height: 1.4;
  margin: 0 0 2.5rem;
}

.cca-answer-row { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Yes / No buttons */
.cca-answer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.75rem;
  background: rgba(30,45,61,0.04);
  border: 1.5px solid var(--cca-border);
  border-radius: var(--cca-radius);
  font-family: var(--cca-font);
  font-size: 1rem;
  font-weight: 400;
  color: var(--cca-text);
  cursor: pointer;
  min-width: 120px;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.cca-answer-btn:hover {
  border-color: var(--cca-text);
  background: rgba(30,45,61,0.07);
}
.cca-answer-btn__radio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--cca-border);
  flex-shrink: 0;
  transition: border-color 0.18s, background 0.18s;
  font-size: 0px;   /* hide any stray text; symbol added via ::after */
}

/* YES selected — green circle with white tick */
.cca-answer-btn[data-answer="yes"].cca-selected {
  border-color: #4DBB86;
  color: #4DBB86;
}
.cca-answer-btn[data-answer="yes"].cca-selected .cca-answer-btn__radio {
  background: #4DBB86;
  border-color: #4DBB86;
}
.cca-answer-btn[data-answer="yes"].cca-selected .cca-answer-btn__radio::after {
  content: '✓';
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

/* NO selected — coral circle with white × */
.cca-answer-btn[data-answer="no"].cca-selected {
  border-color: #E87372;
  color: #E87372;
}
.cca-answer-btn[data-answer="no"].cca-selected .cca-answer-btn__radio {
  background: #E87372;
  border-color: #E87372;
}
.cca-answer-btn[data-answer="no"].cca-selected .cca-answer-btn__radio::after {
  content: '✕';
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

/* ── OVERLAY SCREEN — split layout ── */
#cca-screen-overlay { display: flex; flex-direction: column; }
#cca-screen-overlay[hidden] { display: none !important; }

.cca-overlay-split {
  display: flex;
  flex: 1;
  min-height: 60vh;
}

/* Left panel — paper texture, statement + feedback */
.cca-overlay-context {
  flex: 0 0 42%;
  padding: 4rem 3rem 3rem max(1.5rem, var(--cca-site-left, 1.5rem));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.cca-overlay-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.8rem;
  border-radius: var(--cca-radius-pill);
  margin-bottom: 1.5rem;
  align-self: flex-start;
}
.cca-overlay-tag.yes { background: rgba(58,154,106,0.12);  color: var(--cca-green); }
.cca-overlay-tag.no  { background: rgba(175,77,118,0.12);  color: var(--cca-pink); }

/* Scope under #cca-app (ID specificity) to beat theme p/paragraph rules.
   font-size also carries !important as a safety net against ID-level theme rules. */
#cca-app .cca-overlay-statement {
  font-size: 1.8rem !important;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 2.5rem;
}
#cca-app .cca-overlay-statement.yes { color: #4DBB86; }
#cca-app .cca-overlay-statement.no  { color: #E87372; }

#cca-app .cca-overlay-feedback {
  font-size: 1.1rem !important;
  color: var(--cca-text);
  line-height: 1.75;
  margin: 0;
}

/* Right panel — cream, form fields.
   Right padding mirrors --cca-site-left so the content's right edge
   aligns with the site container's right boundary. */
.cca-overlay-workspace {
  flex: 1;
  background: var(--cca-cream);
  padding: 2.5rem max(2rem, var(--cca-site-left, 2rem)) 2.5rem 3rem;
  display: flex;
  flex-direction: column;
}

.cca-workspace-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cca-text);
  margin: 0 0 1.25rem;
}

.cca-overlay-fields { display: flex; flex-direction: column; gap: 1.1rem; flex: 1; }

.cca-field-wrap { display: flex; flex-direction: column; gap: 0.3rem; }

.cca-field-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cca-text);
}

.cca-char-count {
  font-size: 0.775rem;
  color: var(--cca-muted);
  text-align: right;
}

.cca-textarea,
.cca-input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1.5px solid var(--cca-border);
  border-radius: var(--cca-radius);
  font-family: var(--cca-font);
  font-size: 0.9rem;
  color: var(--cca-text);
  background: var(--cca-white);
  outline: none;
  transition: border-color 0.18s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.cca-textarea { resize: vertical; min-height: 72px; }
.cca-textarea:focus,
.cca-input:focus { border-color: var(--cca-pink); }

.cca-overlay-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cca-border);
}

/* ── PREVIEW SCREEN ── */
.cca-preview-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
  text-align: center;
}
.cca-preview-title { font-size: 1.75rem; font-weight: 700; color: var(--cca-text); margin: 0 0 0.75rem; }
.cca-preview-desc  { color: var(--cca-muted); margin: 0 0 2rem; }
.cca-gate-form     { display: flex; flex-direction: column; gap: 1rem; text-align: left; margin-bottom: 1.25rem; }
.cca-required      { color: var(--cca-pink); }
.cca-form-error {
  background: #fff0f4;
  border: 1px solid var(--cca-pink);
  color: var(--cca-pink);
  border-radius: var(--cca-radius);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}
.cca-form-error[hidden] { display: none; }

/* ── SCORE WHEEL ── */
.cca-wheel-wrap    { display: flex; justify-content: center; margin-bottom: 2rem; }
.cca-wheel-wrap svg { width: 160px; height: 160px; }
.cca-wheel-blurred  { filter: blur(10px); pointer-events: none; user-select: none; }
.cca-wheel-arc      { transition: stroke-dashoffset 1.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* ── THANK YOU SCREEN ── */
.cca-thankyou-inner {
  text-align: center;
  padding: 5rem 2rem 3rem;
  max-width: 560px;
  margin: 0 auto;
}

/* Wheel on paper — use pink arc, near-black score text, subtle track */
#cca-screen-thankyou .cca-wheel-arc          { stroke: var(--cca-pink); }
#cca-screen-thankyou .cca-wheel-score-text   { fill: var(--cca-text) !important; }
#cca-screen-thankyou circle:first-child      { stroke: rgba(0,0,0,0.10); }

.cca-thankyou-title { font-size: 2rem; font-weight: 700; color: var(--cca-text); margin: 0 0 1rem; }
.cca-thankyou-desc  { font-size: 1.05rem; color: var(--cca-muted); line-height: 1.7; }

/* ── Screen transitions ── */
/*
  Leave  : quick fade + tiny rise + microscopic shrink  (200 ms, ease)
  Forward: spring fade-up from 24 px below              (480 ms, spring ease)
  Back   : spring fade-down from 24 px above            (480 ms, spring ease)
  cubic-bezier(0.22, 1, 0.36, 1) = iOS-style spring — fast start, smooth settle
*/
.cca-leaving {
  pointer-events: none;
  animation: cca-leave 0.2s ease forwards;
}
.cca-entering-fwd {
  animation: cca-enter-fwd 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.cca-entering-back {
  animation: cca-enter-back 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cca-leave {
  /* Pure fade — no translateY so content never drifts into the persistent bar */
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes cca-enter-fwd {
  from { opacity: 0; transform: translateY(26px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
@keyframes cca-enter-back {
  from { opacity: 0; transform: translateY(-26px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .cca-leaving,
  .cca-entering-fwd,
  .cca-entering-back { animation-duration: 1ms !important; }
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .cca-overlay-split      { flex-direction: column; }
  .cca-overlay-context    { flex: none; padding: 2rem 1.25rem; justify-content: flex-start; }
  .cca-overlay-workspace  { padding: 1.5rem 1.25rem; }
  .cca-q-bar              { height: auto; padding: 0.7rem 1.25rem; flex-wrap: wrap; gap: 0.5rem 1rem; }
  .cca-q-bar-category     { order: -1; }       /* category first on small screens */
  .cca-progress-track     { flex-basis: 100%; order: 1; } /* full-width bar row below */
  .cca-question-inner     { padding: 2rem 1.25rem; }
  .cca-intro-inner        { padding: 3rem 1.25rem; }
  .cca-preview-inner      { padding: 2.5rem 1.25rem; }
}

/* ── Hide theme breadcrumbs on audit pages ── */
/* Covers the most common breadcrumb plugins/themes: Yoast, RankMath,
   Genesis, Divi, Astra, Avada, SEOPress, plain .breadcrumbs etc.     */
.breadcrumbs,
.breadcrumb,
#breadcrumbs,
#breadcrumb,
.breadcrumb-trail,
.yoast-breadcrumb,
.rank-math-breadcrumb,
.woocommerce-breadcrumb,
nav.breadcrumbs,
nav[aria-label="Breadcrumb"],
nav[aria-label="breadcrumb"],
.site-breadcrumb,
.et_pb_breadcrumbs,
.ast-breadcrumbs-wrapper,
.seopress-breadcrumbs-wrapper,
.schema-breadcrumb {
  display: none !important;
}