/* ===========================================================
   טל טבת - added features (loaded after styles.css)
   progress bar · social links · 404 · ADHD self-check ·
   breathing widget · brain map · printable toolkit
   All rules use the design tokens from styles.css, so they
   theme automatically per [data-ui] and light/dark.
   =========================================================== */

/* slim scroll-progress indicator (RTL: fills from the right) */
.scroll-progress{position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:120;background:linear-gradient(90deg,var(--coral),var(--coral-deep));transform:scaleX(0);transform-origin:right center;transition:transform .1s linear;pointer-events:none}

/* social icon button (header) */
.social-link{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--blue);transition:background .2s ease,color .2s ease,border-color .2s ease}
.social-link:hover,.social-link:focus-visible{background:var(--coral-soft);color:var(--coral-deep);border-color:transparent;text-decoration:none}
.social-link svg{width:20px;height:20px;fill:currentColor}

/* social icons (footer) */
.footer-social{display:flex;justify-content:center;gap:12px;margin-bottom:20px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.18);color:#fff;transition:background .2s ease,transform .2s ease,border-color .2s ease}
.footer-social a:hover,.footer-social a:focus-visible{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);transform:translateY(-2px);text-decoration:none}
.footer-social svg{width:22px;height:22px;fill:currentColor}

/* 404 page actions */
.error-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:30px}

/* ---------- ADHD self-check quiz ---------- */
.quiz{max-width:760px;margin-inline:auto}
.quiz-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.quiz-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-sm)}
.quiz-q{font-weight:600;color:var(--blue-deep);margin-bottom:14px}
.quiz-num{color:var(--coral-deep);font-weight:700;margin-inline-end:6px}
.quiz-opts{display:flex;flex-wrap:wrap;gap:8px}
.quiz-opts label{position:relative;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:var(--radius-pill);padding:7px 14px;cursor:pointer;font-size:.96rem;color:var(--ink);transition:background .15s ease,border-color .15s ease,color .15s ease}
.quiz-opts label:hover{border-color:var(--coral);color:var(--coral-deep)}
.quiz-opts input{position:absolute;opacity:0;width:1px;height:1px}
.quiz-opts label.is-selected,.quiz-opts label:has(input:checked){background:var(--coral);border-color:var(--coral-deep);color:#fff}
.quiz-opts input:focus-visible + span{outline:3px solid var(--coral);outline-offset:4px;border-radius:4px}
[data-theme="dark"] .quiz-opts label.is-selected,[data-theme="dark"] .quiz-opts label:has(input:checked){color:#13201C}
.quiz-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:24px}
.quiz-result{margin-top:24px;padding:24px 26px;border-radius:var(--radius);border:1px solid var(--line);background:var(--coral-soft);text-align:center}
.quiz-result h3{color:var(--blue-deep);font-size:1.4rem;margin-bottom:10px}
.quiz-result p{color:var(--ink);margin-bottom:16px}
.quiz-disclaimer{margin-top:20px;font-size:.9rem;color:var(--muted);text-align:center;line-height:1.6}

/* ---------- breathing / regulation widget ---------- */
.breath{max-width:520px;margin-inline:auto;text-align:center}
.breath-stage{display:flex;align-items:center;justify-content:center;height:300px}
.breath-circle{width:160px;height:160px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 38%,var(--coral),var(--coral-deep));color:#fff;font-family:var(--font-head);font-weight:700;font-size:1.2rem;box-shadow:0 18px 50px rgba(201,122,99,.32);transform:scale(.72);transition:transform 4s ease-in-out}
.breath-circle.is-inhale{transform:scale(1.18)}
.breath-circle.is-exhale{transform:scale(.72)}
/* inviting idle state - the circle gently breathes on its own and reacts to hover */
.breath-circle.is-idle{animation:breatheIdle 6s ease-in-out infinite;cursor:pointer}
.breath-circle.is-idle:hover,.breath-circle.is-idle:focus-visible{filter:brightness(1.07);box-shadow:0 22px 64px rgba(201,122,99,.5);outline:none}
@keyframes breatheIdle{0%,100%{transform:scale(.74)}50%{transform:scale(.92)}}
.breath-count{min-height:1.4em;font-size:clamp(2.4rem,5vw,3.2rem);font-weight:800;line-height:1;color:var(--coral-deep);margin-bottom:18px;font-family:var(--font-head)}
.breath-help{color:var(--muted);font-size:.96rem;margin-top:20px;max-width:430px;margin-inline:auto;line-height:1.6}
.breath-sound{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:transparent;border:1px solid var(--line);border-radius:var(--radius-pill);padding:7px 16px;font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--muted);cursor:pointer;transition:border-color .15s ease,color .15s ease}
.breath-sound:hover,.breath-sound:focus-visible{border-color:var(--coral);color:var(--coral-deep)}
[data-theme="dark"] .breath-circle{color:#13201C}

/* ---------- interactive brain map ---------- */
.brainmap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,48px);align-items:center;max-width:980px;margin-inline:auto}
.brainmap-stage{position:relative}
.brain-photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line);background:#fff;line-height:0}
.brain-photo img{display:block;width:100%;height:auto}
.region-hot{position:absolute;width:30px;height:30px;margin:0;padding:0;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #fff;background:rgba(201,122,99,.5);cursor:pointer;box-shadow:0 0 0 2px rgba(181,97,74,.7),0 2px 8px rgba(0,0,0,.35);transition:background .18s ease,transform .18s ease}
.region-hot::after{content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none;animation:hotpulse 2.6s ease-out infinite}
.region-hot:hover,.region-hot.is-active{background:rgba(201,122,99,.95);transform:translate(-50%,-50%) scale(1.15)}
.region-hot:focus-visible{outline:3px solid #fff;outline-offset:2px}
@keyframes hotpulse{0%{box-shadow:0 0 0 0 rgba(201,122,99,.55)}70%{box-shadow:0 0 0 16px rgba(201,122,99,0)}100%{box-shadow:0 0 0 0 rgba(201,122,99,0)}}
@media (prefers-reduced-motion: reduce){.region-hot::after{animation:none}}
.brain-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;justify-content:center}
.region-chip{font-family:var(--font-body);font-weight:700;font-size:.95rem;border:1px solid var(--line);background:var(--surface);color:var(--blue);border-radius:var(--radius-pill);padding:9px 18px;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.region-chip:hover,.region-chip:focus-visible{border-color:var(--coral);color:var(--coral-deep)}
.region-chip.is-active{background:var(--coral);border-color:var(--coral-deep);color:#fff}
[data-theme="dark"] .region-chip.is-active{color:#13201C}
.brainmap-info{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 30px;box-shadow:var(--shadow-sm);min-height:210px}
.brainmap-info h3{color:var(--coral-deep);font-size:1.4rem;margin-bottom:10px}
.brainmap-info h3 .sci{display:block;font-family:var(--font-body);font-weight:600;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.brainmap-info p{color:var(--ink);line-height:1.75}

/* ---------- emotion ↔ regulation matching game ---------- */
.matchgame{max-width:760px;margin-inline:auto}
.matchgame-board{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,30px)}
.match-col h3{text-align:center;font-size:1rem;letter-spacing:.04em;color:var(--muted);font-family:var(--font-body);font-weight:700;margin-bottom:14px}
.match-cards{display:flex;flex-direction:column;gap:12px}
.match-card{width:100%;text-align:center;font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1.4;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 14px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;box-shadow:var(--shadow-sm)}
.match-card:hover:not(:disabled){border-color:var(--coral);color:var(--coral-deep)}
.match-card.is-selected{background:var(--coral);border-color:var(--coral-deep);color:#fff}
[data-theme="dark"] .match-card.is-selected{color:#13201C}
.match-card.is-matched{background:var(--coral-soft);border-color:var(--coral);color:var(--coral-deep);cursor:default;opacity:.9}
.match-card.is-wrong{animation:matchshake .4s ease}
.match-card:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
@keyframes matchshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.matchgame-status{text-align:center;margin-top:22px;font-weight:700;color:var(--coral-deep);min-height:1.5em}
.matchgame-result{margin-top:18px;padding:24px 26px;border-radius:var(--radius);border:1px solid var(--line);background:var(--coral-soft);text-align:center}
.matchgame-result h3{color:var(--blue-deep);font-size:1.4rem;margin-bottom:10px}
.matchgame-result ul{text-align:start;max-width:560px;margin:14px auto 18px;padding-inline-start:20px;color:var(--ink)}
.matchgame-result li{margin-bottom:8px;line-height:1.65}
.matchgame-result li strong{color:var(--coral-deep)}
.matchgame-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
@media (prefers-reduced-motion:reduce){.match-card.is-wrong{animation:none}}
@media (max-width:520px){.matchgame-board{gap:12px}.match-card{padding:13px 10px;font-size:.92rem}}

/* ---------- printable toolkit ---------- */
.toolkit{max-width:900px;margin-inline:auto}
.toolkit-actions{display:flex;justify-content:center;margin-bottom:30px}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.guide{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 26px;box-shadow:var(--shadow-sm)}
.guide h3{color:var(--blue-deep);font-size:1.25rem;margin-bottom:4px}
.guide .guide-sub{display:block;color:var(--coral-deep);font-weight:600;font-size:.92rem;margin-bottom:14px}
.guide ol,.guide ul{margin:0;padding-inline-start:20px;color:var(--ink)}
.guide li{margin-bottom:9px;line-height:1.6}
.print-note{margin-top:26px;font-size:.9rem;color:var(--muted);text-align:center}

@media (max-width:760px){
  .brainmap{grid-template-columns:1fr}
}

/* print: keep only the toolkit guides */
@media print{
  .site-header,.site-footer,.float-wa,.scroll-contact-bar,.scroll-progress,.page-hero,#sec-breath,#sec-brain,#sec-match,.toolkit-actions,.skip-link{display:none !important}
  body{background:#fff;color:#000}
  #sec-toolkit{padding:0}
  .guide{break-inside:avoid;box-shadow:none;border:1px solid #bbb}
}

@media (prefers-reduced-motion:reduce){
  .scroll-progress{transition:none}
  .breath-circle{transition:none;transform:none}
  .breath-circle.is-idle{animation:none}
}

/* ---------- remove decorative numbering (all designs) ---------- */
/* !important so it beats the per-design [data-ui="b"|"c"] .num rules */
.spec-card .num,
.lecture-card .ln,
.quiz-num{display:none !important}
/* the lecture number held the first grid column - collapse to one */
.lecture-card{grid-template-columns:1fr}

/* ---------- FAQ accordion (ADHD page) ---------- */
.faq{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.faq-item{
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq-item:hover{ border-color:var(--coral); box-shadow:var(--shadow); }
.faq-item[open]{ border-color:var(--coral); box-shadow:var(--shadow); }
.faq-item > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 24px;
  font-family:'Frank Ruhl Libre',serif;
  font-size:1.18rem;
  font-weight:700;
  color:var(--blue);
  transition:color .2s ease, background .2s ease;
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary:hover{ color:var(--coral-deep); background:var(--coral-tint); }
.faq-item[open] > summary{ color:var(--coral-deep); }
/* round +/× toggle - signals clearly that the row opens an answer */
.faq-item > summary::after{
  content:"";
  margin-inline-start:auto;
  flex:none;
  width:34px;
  height:34px;
  border-radius:50%;
  background-color:var(--coral-soft);
  background-image:
    linear-gradient(var(--coral-deep),var(--coral-deep)),
    linear-gradient(var(--coral-deep),var(--coral-deep));
  background-size:13px 2.6px, 2.6px 13px;
  background-position:center, center;
  background-repeat:no-repeat;
  transition:transform .25s ease, background-color .2s ease;
}
.faq-item > summary:hover::after{ background-color:var(--coral); }
.faq-item[open] > summary::after{ transform:rotate(135deg); background-color:var(--coral); }
.faq-item > summary:focus-visible{
  outline:2px solid var(--coral);
  outline-offset:-3px;
  border-radius:var(--radius);
}
.faq-item > p{
  margin:0;
  padding:2px 24px 22px;
  color:var(--ink);
  line-height:1.85;
}
@media (prefers-reduced-motion:reduce){
  .faq-item, .faq-item > summary, .faq-item > summary::after{ transition:none; }
}