/* ============================================================
   CX-digital — מדריך כתיבה למסעות לקוח
   Font: Almoni DL AAA   |   Zero-build static site
   ============================================================ */

/* ---------- Fonts ---------- */
/* Almoni ML v5 AAA — the licensed web-font files (woff2) */
@font-face { font-family:"Almoni"; src:url("../assets/fonts/almoni-light-aaa.woff2") format("woff2"); font-weight:300; font-display:swap; }
@font-face { font-family:"Almoni"; src:url("../assets/fonts/almoni-regular-aaa.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Almoni"; src:url("../assets/fonts/almoni-bold-aaa.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Almoni"; src:url("../assets/fonts/almoni-black-aaa.woff2") format("woff2"); font-weight:800; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  --red:#f04047; --beige:#f0e8e8; --navy:#123861; --pink:#ffb5d6; --gray:#87969e; --green:#78ff52;
  --offwhite:#f0e8e8;   /* matches the map's background so it's uniform to the edges */
  --ink:#15385f; --paper:#fff;

  --accent:var(--navy); --accent-ink:#fff;

  --legend-w: 380px;
  --frame: 18px;            /* uniform off-white margin around legend & content */
  --maxread: 760px;
  --shadow: 0 10px 40px rgba(18,56,97,.14);
  --focus: 0 0 0 3px #fff, 0 0 0 6px var(--red);
  --t: 300ms cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; font-family:"Almoni","Heebo","Arial",sans-serif; font-weight:400;
  color:var(--ink); background:var(--offwhite);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button { font-family:inherit; }
svg,img { display:block; }

.skip-link { position:absolute; right:12px; top:-60px; z-index:999; background:var(--navy); color:#fff; padding:10px 16px; border-radius:10px; text-decoration:none; transition:top var(--t); }
.skip-link:focus { top:12px; }
:focus-visible { outline:none; box-shadow:var(--focus); border-radius:8px; }
/* the stage only receives focus from the script (so screen readers land on the opened text) or from a
   click on the text — it is not a control, so it never shows the focus ring */
#main:focus, #main:focus-visible { outline:none; box-shadow:none; }

/* ============================================================
   Layout — map (right, flexible) + legend (left, fixed)
   ============================================================ */
.app {
  display:grid;
  grid-template-columns: 1fr var(--legend-w);   /* RTL: 1fr=right(map), legend-w=left */
  height:100vh; height:100dvh; overflow:hidden;
  background:var(--offwhite);
}

/* ---------- Legend (left) — white rectangle floating in the off-white ---------- */
.legend {
  background:var(--paper);
  margin:var(--frame);                 /* off-white shows around it on ALL sides */
  margin-left:calc(var(--frame) + 50px);   /* extra 50px gap from the screen's left */
  border-radius:3px;
  display:flex; flex-direction:column; min-height:0;
  overflow:hidden;
}
.legend__logo { flex:0 0 auto; padding:14px 16px 16px; }
.legend__logo svg { width:128px; height:auto; display:block; }
.legend__title {
  margin:0; padding:18px 16px 12px;
  font-weight:800; font-size:32px; color:var(--navy); line-height:1;
}
.toc { flex:1 1 auto; min-height:0; overflow-y:auto; padding:4px 10px 12px; }

/* chapters — matches the SVG legend: "פרק N | title" + colored line swatch */
.toc__chapter { margin:1px 0; }
.toc__chapbtn {
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  background:transparent; border:0; cursor:pointer;
  padding:9px 8px; border-radius:0;               /* square corners */
  text-align:start; color:var(--navy);
  font-weight:400; font-size:15px; line-height:1.25;
  transition:background 120ms ease;
}
.toc__chapbtn:hover { background:transparent; }    /* no hover fill — just the link cursor */
.toc__chapk { font-weight:800; }
.toc__chaptxt { flex:1 1 auto; }
/* the line swatch sits level with the FIRST line of the title (line-height 1.25) */
.toc__swatch { flex:0 0 auto; width:30px; height:8px; margin-top:calc((1.25em - 8px) / 2); }
.toc__swatch--c1 { background:var(--navy); }
.toc__swatch--c2 { background:var(--green); }
.toc__swatch--c4 { background:var(--red); }
.toc__swatch--c5 { background:var(--pink); }
.toc__swatch--c3 { background:linear-gradient(to bottom,var(--navy) 0,var(--navy) 2px,transparent 2px,transparent 6px,var(--navy) 6px,var(--navy) 8px); }
.toc__swatch--c6 { background:linear-gradient(to bottom,var(--red) 0,var(--red) 2px,transparent 2px,transparent 6px,var(--red) 6px,var(--red) 8px); }
.toc__chapter.is-active > .toc__chapbtn { background:transparent; }

/* subchapters (accordion — push down, one chapter open at a time) */
/* the fold animates between 0 and the list's real height (grid 0fr -> 1fr): closing one chapter and
   opening another are mirror images, so the legend never overshoots and no scrollbar flashes */
.toc__fold { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t); }
.toc__chapter.is-open .toc__fold { grid-template-rows:1fr; }
.toc__subs { list-style:none; margin:0; padding:0; overflow:hidden; min-height:0; visibility:hidden; transition:visibility 0s linear 300ms; }
.toc__chapter.is-open .toc__subs { visibility:visible; transition-delay:0s; }
.toc__subbtn {
  width:100%; display:flex; align-items:flex-start; gap:9px;
  background:transparent; border:0; cursor:pointer;
  padding:7px 12px 7px 10px; border-radius:0; text-align:start;
  color:var(--ink); font-size:14px; line-height:1.3; transition:background 120ms ease;
}
.toc__subbtn::before { content:""; flex:0 0 auto; width:8px; height:8px; border-radius:50%; border:2px solid var(--accent); background:#fff; margin-inline-start:18px;
  margin-top:calc((1.3em - 8px) / 2); }   /* level with the first line (line-height 1.3) */
.toc__subbtn:hover { background:#f4f1ef; }
.toc__sub.is-active .toc__subbtn { background:#f0edeb; color:var(--navy); font-weight:700; }
.toc__sub.is-active .toc__subbtn::before { background:var(--accent); border-color:var(--accent); }

/* ============================================================
   Stage (right) — map + sliding content
   ============================================================ */
.stage { position:relative; min-width:0; min-height:0; container-type:inline-size; }

/* map view (contained, always fully visible) */
.map-view {
  position:absolute; inset:var(--frame);
  display:flex; align-items:center; justify-content:center;
  transition:opacity var(--t);
}
.map-container { width:100%; height:100%; }
.map-container svg { width:100%; height:100%; display:block; }
.map-container svg text, .map-container svg tspan { font-family:"Almoni",sans-serif !important; }
/* hide the SVG's inner white backdrop so the map's beige merges seamlessly with the page */
.map-container [id="white_background"] { display:none; }

/* interactive stations */
.station { cursor:pointer; transition:transform 160ms ease; transform-box:fill-box; transform-origin:center; }
.station:hover { transform:scale(1.18); }
.station:focus-visible > * { stroke:var(--red); }
.station.is-active { transform:scale(1.22); }
.station.is-active circle, .station.is-active path { fill:var(--accent); }
.dot-center { fill:var(--accent); opacity:0; pointer-events:none; transition:opacity 140ms ease; }
.station:hover .dot-center, .station.is-active .dot-center { opacity:1; }

.hit { fill:transparent; pointer-events:all; cursor:pointer; }
/* no browser focus rectangle around map items on click; keyboard focus is shown by colour
   (label text turns red, a dot gets a red outline) */
.station:focus, .station-label:focus, .chapter-title:focus { outline:none; }
.chapter-title:focus-visible rect, .chapter-title:focus-visible polygon { stroke:var(--red); stroke-width:3px; }
.station-label { cursor:pointer; }
.station-label path, .station-label text { transition:fill 140ms ease; }
/* live-text labels (js/map-labels.js). The map was drawn in Almoni DL; the web font is
   Almoni ML, ~3.7% wider — this tracking brings the labels back to the designed widths
   (the bold/black chapter titles were only ~1.5% wider, so they get half). */
.map-label text { letter-spacing:-0.015em; user-select:none; -webkit-user-select:none; }
.map-label--title text { letter-spacing:-0.0075em; }
/* hover/active turns label text red — EXCEPT the golden rule, which keeps its
   native red teardrop + white text (white-on-red) */
.station-label:not([data-key="l-4-st-5-golden-rule"]):hover text,
.station-label:not([data-key="l-4-st-5-golden-rule"]):focus-visible text,
.station-label:not([data-key="l-4-st-5-golden-rule"]).is-active text,
.station-label:not([data-key="l-4-st-5-golden-rule"]):hover path,
.station-label:not([data-key="l-4-st-5-golden-rule"]):focus-visible path,
.station-label:not([data-key="l-4-st-5-golden-rule"]).is-active path { fill:var(--red); }

/* golden rule: hover/active = filled red teardrop + white text (white-on-red) */
.station-label[data-key="l-4-st-5-golden-rule"]:hover .gr-shape,
.station-label[data-key="l-4-st-5-golden-rule"]:focus-visible .gr-shape,
.station-label[data-key="l-4-st-5-golden-rule"].is-active .gr-shape { fill:var(--red); }
.station-label[data-key="l-4-st-5-golden-rule"]:hover .gr-text,
.station-label[data-key="l-4-st-5-golden-rule"]:focus-visible .gr-text,
.station-label[data-key="l-4-st-5-golden-rule"].is-active .gr-text { fill:#fff; }

.chapter-title { cursor:pointer; }
/* numbered chapter circles: invert colours on hover (swap circle/number), like station-dots.svg */
.mdot-bg, .mdot-num { transition:fill 140ms ease, stroke 140ms ease; }
.chapter-title[id$="-title-dot"]:hover .mdot-bg,
.chapter-title[id$="-title-dot"]:focus-visible .mdot-bg { fill:var(--dot-num); stroke:var(--dot-bg); stroke-width:2px; }
.chapter-title[id$="-title-dot"]:hover .mdot-num,
.chapter-title[id$="-title-dot"]:focus-visible .mdot-num { fill:var(--dot-bg); }

/* ---------- App modes ---------- */
.app[data-mode="content"] .map-view { opacity:0; pointer-events:none; }

/* ---------- Content panel — a sheet that slides in from the right edge, and back out to the right ---------- */
.content-panel {
  position:absolute; inset:var(--frame);
  background:var(--paper); border-radius:8px; box-shadow:var(--shadow);
  transform:translateX(calc(100% + 60px)); pointer-events:none;      /* parked off-screen to the right */
  transition:transform 460ms cubic-bezier(.22,.61,.36,1);
  overflow:hidden;
}
.app[data-mode="content"] .content-panel { transform:none; pointer-events:auto; }
.panel-scroll { position:absolute; inset:0; overflow-y:auto; container-type:inline-size; }
/* light-grey scrollbars (text and legend) */
.panel-scroll, .toc { scrollbar-width:thin; scrollbar-color:#d9dcdf transparent; }
.panel-scroll::-webkit-scrollbar, .toc::-webkit-scrollbar { width:10px; }
.panel-scroll::-webkit-scrollbar-thumb, .toc::-webkit-scrollbar-thumb { background:#d9dcdf; border-radius:999px; border:2px solid #fff; }
.panel-scroll::-webkit-scrollbar-track, .toc::-webkit-scrollbar-track { background:transparent; }
/* The mini-map (top-right) stays put while the text scrolls, so the text column never runs
   under it: centred when there is room, otherwise pushed just clear of the mini-map's column.
   When the stage is too narrow for that, the mini-map becomes a small "back to the map"
   button in a strip above the text (see the @container rules next to .thumb). */
.panel-inner {
  max-width:var(--maxread); padding:clamp(28px,4vw,56px) clamp(22px,5vw,60px) 110px;
  margin-inline-start:max(calc((100cqw - var(--maxread)) / 2), 272px); margin-inline-end:auto;
}
@container (max-width:964px) { .panel-inner { margin-inline:auto; } }

/* breadcrumb (chapter) */
.panel-eyebrow { display:flex; align-items:center; gap:6px; margin:0 0 12px; color:var(--gray); font-weight:400; font-size:14px; }
#panel-chapter-title::before { content:"›"; margin-inline-end:6px; color:var(--gray); }

.panel-title { margin:0 0 24px; font-weight:700; line-height:1.1; font-size:clamp(28px,3.6vw,42px); color:var(--navy); }
/* thin rule under the heading; the same rule closes the "מה בפרק" opener */
.panel-title::after, .chapter-intro::after { content:""; display:block; width:120px; height:2px; background:var(--accent); margin-top:16px; }
.title-gloss { display:inline-block; }
/* first page of a chapter: chapter heading (with a small "פרק N" above it), the opener, then the part heading */
.panel-eyebrow[hidden] { display:none; }
.panel-title__kicker { display:block; font-size:.45em; font-weight:400; line-height:1.3; margin-bottom:6px; }
.chapter-intro { margin:0 0 30px; }
.chapter-intro__title { font-weight:700; color:var(--navy); margin:0 0 8px !important; }
.chapter-intro ul { margin-bottom:0 !important; }
.chapter-intro::after { margin-top:22px; }

/* body — bold is Almoni Bold (700) everywhere in the reading area; Black (800) is kept for the legend only */
.panel-body { font-size:18px; line-height:1.7; --marker:var(--green); }
.panel-body p { margin:0 0 18px; }
/* headings: no heading is smaller than the running text (18px) */
.panel-body h2 { font-size:26px; font-weight:700; color:var(--navy); line-height:1.25; margin:40px 0 12px; }
.panel-body h3 { font-size:22px; font-weight:700; color:var(--navy); line-height:1.3; margin:32px 0 10px; }
.panel-body h4 { font-size:20px; font-weight:700; color:var(--red); line-height:1.35; margin:30px 0 8px; }
.panel-body h5 { font-size:19px; font-weight:700; color:var(--navy); line-height:1.4; margin:26px 0 6px; }
.panel-body > :first-child { margin-top:0; }
.panel-body ul, .panel-body ol { margin:0 0 20px; padding-inline-start:26px; }
.panel-body ul { list-style:square; }
.panel-body li { margin:0 0 8px; }
.panel-body li > ul, .panel-body li > ol { margin:8px 0 0; }
.panel-body ::marker { color:var(--navy); font-weight:700; }
.panel-body a { color:var(--red); }
/* cross-references inside the guide ("ראו פוקוס 03") read as plain text — regular weight even where the guide had them bold — with a fine underline */
.panel-body a[href^="#/"] { color:var(--ink); font-weight:400; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.panel-body a[href^="#/"]:hover { text-decoration-thickness:2px; }
.panel-body strong { font-weight:700; color:var(--navy); }
.panel-body em { font-style:italic; }
.panel-body mark { background:var(--marker); color:inherit; padding:.14em .15em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.sign { font-weight:700; margin-inline-end:.15em; }
.sign--no { color:var(--red); } .sign--yes { color:#2f9e44; }
/* a short framed remark (e.g. the AI note that opens an appendix) */
.note { border:1.5px solid var(--green); background:#f9fff6; padding:10px 16px; margin:0 0 24px; }

/* ---------- Boxes, as in print: focus (פוקוס) = pink, example (דוגמה) = the map's green ----------
   a white side column — the word, the big number, a rule, the illustration — then title and body.
   Text inside a box is the same size as the text around it. */
.callout {
  --box:var(--pink); --box-bg:#fff7fb; --box-ink:var(--pink);
  display:grid; grid-template-columns:132px 1fr; margin:28px 0;
  background:var(--box-bg); border:1.5px solid var(--box);
}
.callout--example { --box:var(--green); --box-bg:#f9fff6; --box-ink:var(--green); }
.callout.is-target { box-shadow:0 0 0 3px var(--box); transition:box-shadow 300ms ease; }
.callout__side { padding:16px 14px 18px; border-inline-end:1.5px solid var(--box); background:#fff; text-align:center; }
.callout__tag { padding-bottom:8px; border-bottom:1.5px solid var(--box); }
.callout__kind { display:block; font-weight:400; font-size:17px; line-height:1.2; color:var(--navy); }
.callout__num { display:block; font-weight:700; font-size:52px; line-height:1; color:var(--box-ink); letter-spacing:-1px; }
.callout__art { display:block; width:92px; height:auto; margin:14px auto 0; }
.callout__main { padding:18px 22px 20px; min-width:0; }
.callout__title { font-weight:700; font-size:20px; line-height:1.35; margin:0 0 10px; color:var(--navy); }
.callout__body p { margin:0 0 14px; }
.callout__body > :last-child { margin-bottom:0; }
.callout__body ul, .callout__body ol { margin:0 0 14px; padding-inline-start:24px; }
@container (max-width:620px) {
  .callout { grid-template-columns:1fr; }
  .callout__side { display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:start; padding:10px 18px; border-inline-end:0; border-bottom:1.5px solid var(--box); }
  .callout__tag { display:flex; align-items:baseline; gap:10px; border-bottom:0; padding-bottom:0; }
  .callout__num { font-size:36px; } .callout__art { width:54px; margin:0; }
}

/* ---------- Tables: thin navy rules + zebra, like print; scroll sideways when narrow ---------- */
.table-wrap { margin:22px 0; overflow-x:auto; }
.table-wrap table { width:100%; border-collapse:collapse; line-height:1.5; }
.table-wrap th, .table-wrap td { padding:9px 12px; text-align:start; vertical-align:top; border-bottom:1px solid rgba(18,56,97,.35); }
.table-wrap th { font-weight:700; color:var(--navy); border-top:1.5px solid var(--navy); border-bottom:1.5px solid var(--navy); }
.table-wrap th + th, .table-wrap td + td { border-inline-start:1px solid rgba(18,56,97,.35); }
.table-wrap tbody tr:nth-child(even) { background:rgba(18,56,97,.045); }
.callout .table-wrap { margin:12px 0 4px; }

/* ---------- Pictures ---------- */
.figure { margin:24px 0; text-align:center; }
.figure img { max-width:100%; height:auto; margin:0 auto; }
.figure figcaption { font-weight:700; font-size:17px; line-height:1.4; color:var(--navy); margin:0 0 10px; text-align:start; }
.compare { display:grid; gap:22px; grid-template-columns:1fr; margin:24px 0; align-items:start; }
.compare .figure { margin:0; }
.compare .figure img { max-height:460px; }
@container (min-width:620px) { .compare { grid-template-columns:1fr 1fr; } }

/* ---------- Prev / Next: a short button, and the name of where it leads underneath ---------- */
.prevnext { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-top:56px; border-top:1.5px solid rgba(18,56,97,.12); padding-top:24px; }
.prevnext__item { display:flex; flex-direction:column; gap:8px; max-width:46%; }
.prevnext__item--next { align-items:flex-end; text-align:end; margin-inline-start:auto; }
.prevnext__item--prev { align-items:flex-start; text-align:start; }
.prevnext__btn {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  border:1.5px solid var(--navy); border-radius:999px; padding:10px 22px; cursor:pointer;
  font-weight:700; font-size:16px; line-height:1.2;
  transition:background 150ms ease, color 150ms ease, transform 120ms ease;
}
.prevnext__btn--next { background:var(--navy); color:#fff; }
.prevnext__btn--prev { background:transparent; color:var(--navy); }
.prevnext__btn--next::after { content:"←"; font-weight:400; }
.prevnext__btn--prev::before { content:"→"; font-weight:400; }
.prevnext__btn:hover:not(:disabled) { transform:translateY(-1px); }
.prevnext__btn--prev:hover:not(:disabled) { background:rgba(18,56,97,.07); }
.prevnext__btn:disabled { opacity:.35; cursor:default; }
.prevnext__btn--chapter.prevnext__btn--next { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.prevnext__btn--chapter.prevnext__btn--prev { border-color:var(--accent); }
.prevnext__name { margin:0; font-size:14.5px; line-height:1.4; color:var(--gray); }
.prevnext__name:empty { display:none; }

/* ---------- Thumbnail (top-right while reading) ---------- */
.thumb {
  position:absolute; top:calc(var(--frame) + 56px); right:calc(var(--frame) + 56px);
  width:190px; padding:8px; cursor:pointer; z-index:10;
  background:#fff; border:1px solid rgba(18,56,97,.12); border-radius:12px; box-shadow:none;
  transition:transform var(--t);
}
.thumb:hover { transform:translateY(-2px) scale(1.02); }
.thumb__svg svg { width:100%; height:auto; }
.thumb::after { content:"חזרה למפה"; position:absolute; top:-11px; inset-inline-start:12px; background:var(--red); color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; }
/* narrow stage: no room for a mini-map column -> a small button in a strip above the text */
@container (max-width:1000px) {
  .thumb { top:calc(var(--frame) + 9px); right:calc(var(--frame) + 14px); width:auto; padding:0; border:0; background:transparent; }
  .thumb__svg { display:none; }
  .thumb::after { position:static; display:block; font-size:13px; padding:7px 16px; }
  .panel-scroll { top:50px; border-top:1px solid rgba(18,56,97,.1); }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1100px){ :root{ --legend-w:280px; } .legend__title{ font-size:28px; } }

@media (max-width:760px){
  .app { grid-template-columns:1fr; grid-template-rows:auto 1fr; }   /* legend on top */
  .legend { grid-row:1; margin:var(--frame); margin-bottom:0; max-height:42vh; }
  .stage  { grid-row:2; }
  .app[data-mode="content"] .legend { display:none; }
  .content-panel { inset:10px; }
  .thumb { top:19px; right:24px; }
}

@media (prefers-reduced-motion:reduce){
  * { transition:none !important; }
  .station:hover, .station.is-active { transform:none; }
  .content-panel { transform:none; opacity:0; }
  .app[data-mode="content"] .content-panel { opacity:1; }
}