/* guide-read.css — reading layer for the 14 premium guides (22.10.26).
 *
 * The premium guides (dirug-ashrai-madrich, hisachon-lekol-yeled, bituach-leumi-meshuchrar,
 * tashlem-kodem-leatzmecha, credit-week-2026/*, pension-week-2026/*) share one DNA but carry it in
 * three copies: an embedded <style> in four pages, credit-guide.css and pension-guide.css.
 * This file loads LAST in all 14 and overrides layout and type only. Content is untouched.
 *
 * Layout rules live under @media screen so the pages' own print rules (A4 PDF) keep winning.
 * New hooks are prefixed gr- and are created by js/guide-read.js.
 */

/* ===== reading column + type ===== */
@media screen{
  body{font-size:18px;line-height:1.8;}
  .wrap{max-width:772px;}
  p{font-size:18px;line-height:1.8;margin-bottom:16px;}
  strong{color:var(--navy);}

  /* .lead (the bottom lead form) leaks background, radius and shadow onto every p.lead */
  p.lead{background:none;box-shadow:none;border-radius:0;font-size:20px;font-weight:400;color:#323a4a;line-height:1.7;
    border-right:3px solid var(--teal);padding:2px 18px 2px 0;margin:2px 0 26px;}

  ul.plain li{font-size:17px;line-height:1.65;}
  h3.mini{font-size:21px;margin:30px 0 10px;}

  /* chapter heads: the 46px number square becomes a "פרק 3" label, the title gets the full width */
  section.block{padding:46px 0 26px;scroll-margin-top:0;}
  .loan{scroll-margin-top:0;}
  .sec-head{display:block;margin-bottom:18px;}
  .sec-num{display:inline-flex;width:auto;height:auto;padding:4px 12px;margin-bottom:10px;border-radius:999px;
    background:#e6f4f3;color:#17716d;box-shadow:none;font-size:13.5px;font-weight:800;letter-spacing:.02em;line-height:1.4;}
  .sec-num::before{content:"פרק\00a0";}
  .sec-head h2{font-size:clamp(26px,3.2vw,33px);line-height:1.2;}
  .sec-head .kick{font-size:17.5px;font-weight:500;color:#4f5869;margin-top:6px;line-height:1.5;}

  /* cards: a step up in size now that the column is narrow */
  .note,.note p{font-size:16.5px;line-height:1.65;}
  .redbox p{font-size:17px;}
  .pill-card li{font-size:16.5px;}
  .stat .tx{font-size:16.5px;}
  .pull p{font-size:20px;}
  .loan .lc-how{font-size:16.5px;line-height:1.7;}
  .loan .lc-col li{font-size:15.5px;line-height:1.55;}
  .step h4{font-size:18px;}
  .step p{font-size:16.5px;line-height:1.7;}
  .myth .m-a p{font-size:16.5px;line-height:1.7;}
  .myth .m-do{font-size:16px;line-height:1.65;}
  table{font-size:15px;}
  .task .tx h4{font-size:17px;}
  .task .tx p{font-size:15.5px;}

  /* hero: one solid accent (site rule: no gradient on Hebrew text), tighter top */
  .hero{padding:40px 22px 28px;}
  .hero .logo{width:170px;margin-bottom:22px;}
  .hero h1{font-size:clamp(32px,5.4vw,56px);line-height:1.12;}
  .hero h1 .accent{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#1f8f8b;}
  .hero .sub{max-width:640px;font-size:clamp(17.5px,2.2vw,20px);line-height:1.65;}
  .gr-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:14.5px;font-weight:700;color:#4f5869;}
  .gr-meta span{display:inline-flex;align-items:center;gap:7px;}
  .gr-meta span + span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);margin-left:11px;}

  /* top lead form: three fields in a row, consent + notice on full rows, full-width button */
  @media (min-width:761px){
    .tc-form{grid-template-columns:repeat(3,minmax(0,1fr));}
    .tc-form button{grid-column:1/-1;padding:14px 24px;}
  }
  .topcta .lk-consent{margin:4px 0 0;}
  .topcta .lk-notice{margin:0;color:#c6d0e2;opacity:.85;}
  /* bottom form: .lead label{display:block;font-weight:700} flattens the consent row */
  .lead .lk-consent{display:flex;font-weight:400;font-size:13.5px;color:var(--ink);margin:14px 0 4px;}
  .lead .lk-consent input{width:18px;height:18px;padding:0;border:0;flex:none;}

  .toc a{font-size:16px;}

  /* tables that scroll sideways get a hint (added by JS only when they overflow) */
  .gr-swipe{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 -10px;}

  /* myths: question + verdict visible, explanation on tap */
  .gr-myth .m-q{display:grid;grid-template-columns:auto 1fr;column-gap:13px;row-gap:10px;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:background .15s;}
  .gr-myth .m-q:hover{background:#f8e7e3;}
  .gr-myth .m-q:focus-visible{outline:3px solid var(--teal);outline-offset:-3px;border-radius:22px 22px 0 0;}
  .gr-myth:not(.gr-open) .m-q{border-bottom:none;}
  .gr-myth:not(.gr-open) .m-a{display:none;}
  .gr-myth .m-a > .verdict{display:none;}
  .gr-mrow{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;}
  .gr-mrow .verdict{display:inline-flex;align-items:center;font-size:13px;font-weight:800;letter-spacing:.02em;line-height:1.45;
    border-radius:12px;padding:5px 12px;margin:0;background:#fff;box-shadow:0 0 0 1px rgba(27,40,69,.08);}
  .gr-more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:800;color:var(--navy);white-space:nowrap;}
  .gr-more::after{content:"";width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(-45deg);transition:transform .2s;}
  .gr-open .gr-more::after{transform:translateY(2px) rotate(135deg);}

  /* calmer reveal: a fast scroll should not show empty blocks */
  .reveal{transform:translateY(10px);transition:opacity .4s ease,transform .4s ease;}

  /* ===== chapter navigation (built by js/guide-read.js) ===== */
  html{scroll-padding-top:var(--gr-top,90px);}

  .gr-bar{position:fixed;right:0;left:0;top:var(--gr-tb,58px);z-index:109;background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--line);box-shadow:0 6px 18px -14px rgba(27,40,69,.5);
    transform:translateY(-110%);opacity:0;visibility:hidden;transition:transform .25s ease,opacity .25s ease,visibility .25s;}
  .gr-bar.gr-on{transform:none;opacity:1;visibility:visible;}
  .gr-bar-btn{display:flex;align-items:center;gap:10px;width:100%;max-width:772px;margin:0 auto;padding:10px 20px;min-height:46px;
    background:none;border:0;font-family:inherit;color:var(--navy);cursor:pointer;text-align:right;}
  .gr-bar-n{flex:none;font-size:12.5px;font-weight:800;color:#17716d;background:#e6f4f3;border-radius:999px;padding:3px 10px;
    font-variant-numeric:tabular-nums;}
  .gr-bar-t{flex:1;min-width:0;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gr-bar-ic{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--muted);}
  .gr-bar-ic::after{content:"";width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(-45deg);}

  .gr-sheet{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-end;justify-content:center;
    background:rgba(14,20,36,.45);}
  .gr-sheet[hidden]{display:none;}
  .gr-sheet-panel{width:100%;max-width:560px;max-height:82vh;display:flex;flex-direction:column;background:#fff;
    border-radius:22px 22px 0 0;box-shadow:0 -12px 40px rgba(14,20,36,.25);padding-bottom:env(safe-area-inset-bottom);
    animation:gr-up .22s ease;}
  @keyframes gr-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
  .gr-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 10px;border-bottom:1px solid var(--line-soft);}
  .gr-sheet-head b{font-size:16px;font-weight:800;color:var(--navy);}
  .gr-x{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--navy);
    font-size:18px;line-height:1;cursor:pointer;font-family:inherit;}
  .gr-sheet ol,.gr-rail ol{list-style:none;margin:0;padding:0;}
  .gr-sheet ol{overflow-y:auto;padding:8px 10px 14px;overscroll-behavior:contain;}
  .gr-sheet a{display:flex;gap:12px;align-items:baseline;padding:12px 12px;border-radius:12px;text-decoration:none;
    font-size:16px;font-weight:600;color:var(--ink);line-height:1.4;}
  .gr-sheet a span{flex:none;width:24px;font-size:13px;font-weight:800;color:var(--teal);font-variant-numeric:tabular-nums;}
  .gr-sheet a[aria-current="true"]{background:#e6f4f3;color:var(--navy);}

  .gr-rail{display:none;}
  @media (min-width:1220px){
    .gr-bar{display:none;}
    .gr-rail{display:block;position:fixed;top:calc(var(--gr-tb,58px) + 34px);right:calc(50% - 594px);width:206px;
      max-height:calc(100vh - var(--gr-tb,58px) - 70px);overflow-y:auto;z-index:20;
      opacity:0;visibility:hidden;transform:translateX(8px);transition:opacity .25s,transform .25s,visibility .25s;}
    .gr-rail.gr-on{opacity:1;visibility:visible;transform:none;}
    .gr-rail-h{font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--muted);margin:0 12px 8px 0;}
    .gr-rail ol{border-right:2px solid var(--line);}
    .gr-rail a{display:flex;gap:8px;align-items:baseline;margin-right:-2px;padding:6px 12px 6px 4px;border-right:2px solid transparent;
      text-decoration:none;font-size:14px;font-weight:500;line-height:1.4;color:var(--muted);transition:color .15s,border-color .15s;}
    .gr-rail a span{flex:none;font-size:11.5px;font-weight:800;color:var(--teal);font-variant-numeric:tabular-nums;opacity:.8;}
    .gr-rail a:hover{color:var(--navy);}
    .gr-rail a[aria-current="true"]{color:var(--navy);font-weight:800;border-right-color:var(--teal);}
  }

  /* ===== phones ===== */
  @media (max-width:600px){
    body{font-size:17px;}
    .wrap{padding:0 20px;}
    p{font-size:17px;line-height:1.75;}
    p.lead{font-size:18.5px;padding-right:14px;margin-bottom:22px;}
    ul.plain li{font-size:16.5px;}
    section.block{padding:32px 0 14px;}
    .sec-head h2{font-size:25px;}
    .sec-head .kick{font-size:16.5px;}

    .hero{padding:22px 20px 18px;}
    .hero .logo{width:118px;margin-bottom:16px;}
    .hero h1{font-size:31px;}
    .hero .sub{font-size:17px;margin-top:14px;}
    .gr-meta{font-size:13.5px;margin-top:12px;}
    .hero .badges{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:16px -20px 0;padding:2px 20px 6px;
      scrollbar-width:none;-webkit-mask-image:linear-gradient(to left,#000 88%,transparent);mask-image:linear-gradient(to left,#000 88%,transparent);}
    .hero .badges::-webkit-scrollbar{display:none;}
    .hero .badges span{flex:none;font-size:13px;padding:6px 13px;}
    .hero .byline{margin-top:20px;}

    .topcta{padding:24px 20px;}

    .loan{padding:20px 18px;border-radius:20px;}
    .loan .lc-head{flex-wrap:wrap;gap:8px 12px;margin-bottom:14px;}
    .loan .lc-ic{width:44px;height:44px;font-size:22px;border-radius:13px;}
    .loan .lc-head > div:not(.lc-ic){flex:1 1 calc(100% - 56px);min-width:0;}
    .loan .lc-head h3{font-size:20px;line-height:1.25;}
    .loan .lc-rank{order:3;margin-right:56px;}
    .loan .lc-how{font-size:16px;}
    .loan .lc-col li{font-size:15.5px;}
    /* one compact row per fact instead of three tall boxes */
    .loan .lc-stats{grid-template-columns:1fr;gap:6px;}
    .loan .lc-stat{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 14px;}
    .loan .lc-stat .k{flex:none;margin:0;font-size:12.5px;}
    .loan .lc-stat .v{text-align:left;font-size:15.5px;}

    .step{padding:16px 16px 16px 16px;padding-right:60px;}
    .step::before{right:14px;top:16px;width:32px;height:32px;font-size:16px;border-radius:10px;}
    .step h4{font-size:17px;}
    .step p{font-size:16px;}

    .myth .m-q{padding:16px 18px;}
    .myth .m-a{padding:16px 18px;}
    /* the "מיתוס" label sits above the question so the question gets the full width */
    .gr-myth .m-q{grid-template-columns:1fr;row-gap:8px;}
    .gr-myth .m-q .lab{justify-self:start;margin-top:0;}
    .gr-mrow{grid-column:1;}
    .myth .m-q p{font-size:16.5px;}
    .myth .m-a p{font-size:16px;}

    .note{padding:14px 16px;gap:10px;}
    .note,.note p{font-size:16px;}
    .redbox{padding:16px 18px;}
    .redbox p{font-size:16px;}
    .pill-card{padding:18px;}
    .pill-card li{font-size:16px;}
    .stat{padding:18px;}
    .stat .tx{font-size:16px;}
    .pull{padding:24px 22px;}
    .pull p{font-size:18px;}
    .calc{padding:22px 18px;}
    .calc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;align-items:end;}
    .calc label{font-size:12.5px;line-height:1.35;}
    .calc-out{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .co{padding:12px 14px;}
    .co .v{font-size:19px;}
    .toc{padding:18px 16px;}
    .sources{padding:18px 16px;}
    .task{padding:13px 12px;}
    .cta{padding:30px 20px;}
  }
}

/* ===== print: everything open, no floating navigation ===== */
@media print{
  .gr-bar,.gr-rail,.gr-sheet,.gr-more,.gr-swipe{display:none!important;}
  .gr-myth .m-a{display:block!important;}
  .gr-myth .m-a > .verdict{display:inline-flex!important;}
  .gr-mrow .verdict{display:none!important;}
}

@media (prefers-reduced-motion:reduce){
  .gr-bar,.gr-rail,.gr-sheet-panel{transition:none;animation:none;}
}