/* journal-upgrade.css — blog posts and index (owner, 2026-10-19: "all blog pages, a lot of UX/UI issues and bugs").
   The generator (blogdesign.go) still writes the 2026-10-07 dark design inline (#bx-css); blogjournal.py turns the
   page into the light journal design but left three dark layers behind, so once a reader scrolled past the header
   the article text (navy) sat on a near-black backdrop and was unreadable. This sheet, linked by blogjournal.py on
   every post and the index, removes those layers and finishes the light reading surface. Brand only. */

/* 1. the dark atmosphere: fixed backdrop, screened noise, and the glass panel behind the article */
body.journal-page main.bx::before,
body.journal-page main.bx::after,
body.journal-page .bx-main::before{content:none}
body.journal-page main.bx{background:#F7F9FC}

/* 2. the in-post contents box and the share buttons. The generator sets their text colours with !important (white,
      for the old dark panel), so these overrides must be !important too. */
body.journal-page #top.bx-post .bl-toc{background:#fff;border:1px solid #DCE2EE;border-radius:20px;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 24px 50px -40px rgba(10,17,40,.45);padding:22px}
body.journal-page #top.bx-post .bl-toc>b{color:#0A1128;border-bottom-color:#DCE2EE}
body.journal-page #top.bx-post .bl-toc a{color:#2B3350!important;font-size:14px;border-bottom-color:#EEF1F7;transition:background-color .15s ease-out,color .15s ease-out}
body.journal-page #top.bx-post .bl-toc a::before{color:#8A93AE}
body.journal-page #top.bx-post .bl-toc a:hover{background:#F4F6FB;color:#0A1128!important}
body.journal-page #top.bx-post .bl-toc a.is-on{background:#FFF3EA;color:#9E4206!important;font-weight:700}
body.journal-page #top.bx-post .bl-toc a.is-on::before{color:#C4500A}
body.journal-page #top.bx-post .bl-toc a:focus-visible{outline:3px solid #C4500A;outline-offset:2px}
body.journal-page #top.bx-post .bx-share :is(a,button){color:#0A1128!important;background:#fff;border-color:#DCE2EE}
body.journal-page #top.bx-post .bx-share :is(a,button):hover{border-color:#C4500A;background:#FFF3EA}
body.journal-page #top.bx-post .bx-share :is(a,button):focus-visible{outline:3px solid #C4500A;outline-offset:2px}

/* bold key words: dark text over a soft orange underline (the generator drew them white) */
body.journal-page #top.bx-post .bl-body strong{color:#0A1128;background:linear-gradient(0deg,rgba(242,118,27,.22),rgba(242,118,27,.22)) 0 88%/100% .42em no-repeat}

/* 3. chapter labels: the generator's 46px badge and the journal's "פרק / 01" text were drawn in the same box */
body.journal-page .bx .bl-body h2::before{display:block;width:auto;height:auto;margin:0 0 12px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;line-height:1.4;color:#9E4206}

/* 4. reading comfort: body text contrast and a measured line */
body.journal-page #top.bx-post .bl-body{color:#2B3350}
body.journal-page #top.bx-post .bl-body :is(h2,h3){color:#0A1128}
body.journal-page #top.bx-post .bl-body a{color:#9E4206;border-bottom-color:#E7B48F}
body.journal-page #top.bx-post .bl-body blockquote{background:#FFF8F2;border-color:#F1DCCB;border-inline-start-color:#C4500A;color:#2B3350;border-radius:14px}

/* 5. the end of a post: previous/next as white cards; the closing call to action as a navy card with the one orange
      button (it was a peach block whose button text, forced dark with !important by the generator, sat on navy) */
body.journal-page #top.bx-post .bx-next a{background:#fff;border:1px solid #DCE2EE;border-radius:20px;color:#0A1128;box-shadow:0 18px 36px -32px rgba(10,17,40,.4);
  transition:border-color .15s ease-out,transform .15s ease-out}
body.journal-page #top.bx-post .bx-next a:hover{background:#fff;border-color:#C4500A;transform:translateY(-2px)}
body.journal-page #top.bx-post .bx-next a:focus-visible{outline:3px solid #C4500A;outline-offset:3px}
body.journal-page #top.bx-post .bx-next small{color:#9E4206}
body.journal-page #top.bx-post .bx-next b{color:#0A1128;font-weight:700}
body.journal-page #top.bx-post .bx-next a::after{color:#C4500A}
body.journal-page #top.bx-post .bl-cta{border:0;border-radius:24px;color:#fff;padding:36px;
  background:radial-gradient(60% 120% at 0% 100%,rgba(242,118,27,.26),transparent 60%),linear-gradient(160deg,#13205A,#0A1128 70%);box-shadow:0 40px 80px -50px rgba(10,17,40,.8)}
body.journal-page #top.bx-post .bl-cta b{color:#fff;font-weight:700}
body.journal-page #top.bx-post .bl-cta div{color:#C3CBDD}
body.journal-page #top.bx-post .bl-cta a{background:#C4500A;color:#fff!important;-webkit-text-fill-color:#fff;border-radius:14px;min-height:52px;display:inline-flex;align-items:center;
  padding:0 26px;font-weight:700;box-shadow:none;transition:background-color .15s ease-out}
body.journal-page #top.bx-post .bl-cta a:hover{background:#A84408;transform:none}
body.journal-page #top.bx-post .bl-cta a:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* 6. the index: cool brand wash instead of beige/sage, white cards and search, readable tags, covers on brand */
body.journal-page #top.bx-index{background:#F4F6FB}
body.journal-page #top.bx-index .journal-library{background:#fff;border:1px solid #DCE2EE;border-radius:24px;box-shadow:0 24px 50px -40px rgba(10,17,40,.4)}
body.journal-page #top.bx-index .journal-library label{color:#4E5A73}
body.journal-page #top.bx-index #blQ{background:#fff;border:1px solid #C3CBDD;border-radius:14px;color:#0A1128;min-height:52px}
body.journal-page #top.bx-index #blQ::placeholder{color:#8A93AE}
body.journal-page #top.bx-index #blQ:focus-visible{outline:none;border-color:#C4500A;box-shadow:0 0 0 3px rgba(196,80,10,.2)}
body.journal-page #top.bx-index .bx-card{background:#fff;border:1px solid #DCE2EE;border-radius:22px;box-shadow:0 18px 36px -32px rgba(10,17,40,.4);
  transition:border-color .15s ease-out,transform .15s ease-out}
body.journal-page #top.bx-index .bx-card:hover{border-color:#C4500A;transform:translateY(-2px)}
body.journal-page #top.bx-index .bx-card{overflow:hidden}
body.journal-page #top.bx-index li:not(.is-feat) .bx-cbody{padding:20px 24px 22px}
body.journal-page #top.bx-index .bx-card:focus-visible{outline:3px solid #C4500A;outline-offset:3px}
body.journal-page #top.bx-index .is-feat .bx-card{background:#fff}
body.journal-page #top.bx-index .bx-card h2{color:#0A1128}
body.journal-page #top.bx-index .bx-card p{color:#4E5A73}
body.journal-page #top.bx-index .bx-ctags i{color:#4E5A73;background:#F4F6FB;border-radius:999px;padding:4px 10px;font-style:normal}
body.journal-page #top.bx-index .bx-ctags .is-new{color:#9E4206;background:#FFF3EA}
body.journal-page #top.bx-index .art-web{background:#E6EAF2}
body.journal-page #top.bx-index .art-web .journal-orbit{border-color:#8A93AE}
body.journal-page #top.bx-index .art-google{background:#13205A}
body.journal-page #top.bx-index .art-leads{background:#C4500A}
body.journal-page #top.bx-index :is(.art-google,.art-leads){color:#fff}

/* 7. two contrast misses found by a measured pass over all 21 pages (contrast.cjs): the hero numbers on the index
      were navy on navy, and the "קריאה נוספת" label on every post was pale orange on white (1.7:1) */
body.journal-page #top .bx-stats b{color:#FF9A45;font-weight:700}
body.journal-page #top .bx-stats li{color:#C3CBDD}
body.journal-page #top.bx-post .bl-rel b{color:#9E4206;font-weight:700}
body.journal-page #top.bx-post .bl-rel a{border-color:#DCE2EE;color:#0A1128}

@media (prefers-reduced-motion:reduce){body.journal-page #top.bx-post :is(.bl-toc a,.bx-next a,.bl-cta a),body.journal-page #top.bx-index .bx-card{transition:none}body.journal-page #top.bx-index .bx-card:hover{transform:none}body.journal-page #top.bx-post .bx-next a:hover{transform:none}}