/* ============================================================
   Optimax — Bold "Verge-style" theme  ·  Blue + Coral  ·  2026-07-20
   Site header accents + narrow bold single-article template.
   Homepage layout styles live inline in front-page.php.
   ============================================================ */
:root{
  --omx-blue:#16305a; --omx-blue2:#2c5aa0; --omx-coral:#2E3238;
  --omx-coral-dk:#1C2026; --omx-ink:#10192b; --omx-soft:rgba(46,50,56,.10);
  --omx-paper:#f3f5f9;
  /* nav accent for the DARK navy header. charcoal is unreadable there - see 2026-08-03 */
  --omx-navlight:#9cc3ff;
}

/* ---------- site header: charcoal topline + bold nav (light on navy bg) ---------- */
.td-header-wrap,.td-header-template-wrap{border-top:5px solid var(--omx-coral)!important}
.td-logo-text-wrap .td-logo-text,.td-logo-text-wrap h1.td-logo-text,.td-logo-text-wrap a,
.td-logo-text-wrap .td-description,.td-header-sp-logo .td-logo-text{color:#ffffff!important}
.td-header-menu-wrap .sf-menu > li > a{color:#e8eef8!important}
.td-header-menu-wrap .sf-menu > li > a,.td-header-menu-wrap .sf-menu > .current-menu-item > a{
  font-weight:800!important;letter-spacing:-.01em}
/* hover + active state: light blue, NOT charcoal. On the navy header charcoal #2E3238
   scored ~1.3:1 and the active item was invisible (found 2026-08-03 when the nav menu
   was first created). #9cc3ff on the navy gradient is ~5.5:1. */
.td-header-menu-wrap .sf-menu > li > a:hover,
.td-header-menu-wrap .sf-menu > .current-menu-item > a,
.td-header-menu-wrap .sf-menu > .current-menu-ancestor > a,
.td-header-menu-wrap .sf-menu > .current-category-ancestor > a,
.td-header-menu-wrap .sf-menu > .current-menu-parent > a{color:var(--omx-navlight)!important}
.sf-menu > .current-menu-item > a:after,
.sf-menu > .current-menu-ancestor > a:after,
.sf-menu > .current-category-ancestor > a:after{background:var(--omx-navlight)!important}

/* ---------- static pages: white reading sheet on the navy background ----------
   The theme's `page` template was never styled because the site had no pages at all
   until 2026-08-03. Straight out of the box the content rendered #222 on the navy
   gradient, unreadable. Scoped to .td-ss-main-content so the breadcrumb, which lives
   in .td-crumb-container and is coloured for the navy, keeps its own styling. */
body.page .td-ss-main-content{background:#fff;padding:34px 30px 42px;box-shadow:4px 4px 0 var(--omx-coral)}
body.page .td-ss-main-content .td-page-title,
body.page .td-page-content h2{color:var(--omx-ink)}
body.page .td-page-content,
body.page .td-page-content p,
body.page .td-page-content li{color:#333}
body.page .td-page-content a{color:var(--omx-blue2);text-decoration:underline}
body.page .td-page-content a:hover{color:var(--omx-blue)}

/* ---------- accessibility, from A11Y-AUDIT-2026-07-21 (fixed 2026-08-03) ----------
   B4: the PARENT theme kills the focus outline in six places, so keyboard users had
   no indicator anywhere. :focus-visible so mouse clicks stay clean. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--omx-navlight)!important;outline-offset:2px!important}
/* light blue is only 1.8:1 on white and would fail 1.4.11 there - dark blue on sheets */
.td-post-content a:focus-visible,.td-page-content a:focus-visible,
body.page .td-ss-main-content a:focus-visible,
.td-main-content-wrap .td-block-span12 a:focus-visible{outline-color:var(--omx-blue)!important}
/* B8: prev/next labels were #c1c1c1 on white = 1.80:1, now 7.46:1 */
.td-post-next-prev-content span{color:#555!important}

/* ---------- FAQ accordion: make the open state actually open ----------
   Pre-existing bug found 2026-08-03. Clicking a question toggled the `open` class
   and rotated the chevron, but the answer never appeared - omx-faq.php's own
   `.open` rule was not winning the cascade, so the panel stayed max-height:0.
   Answers were invisible to readers on all 10 articles since launch (they were
   always in the DOM, so the FAQPage schema was never affected).
   The real fix belongs inside omx-faq.php; this forces the state from here. */
.omx-faq-a.open,
.single-post .td-post-content p.omx-faq-a.open,
.single-post .td-post-content.tagdiv-type p.omx-faq-a.open{
  max-height:1500px!important;opacity:1!important;margin:6px 0 16px!important}

/* hide the theme's duplicate <h3> post-header title (our bold H1 is the visible title).
   Scoped to .td-post-title so related-post module titles are unaffected. */
.single-post .td-post-title .entry-title.td-module-title{display:none}

/* ---------- SINGLE ARTICLE — narrow bold reading column ---------- */
.single-post .td-post-header,
.single-post .omx-post-title,
.single-post .td-post-content.tagdiv-type{
  max-width:720px;margin-left:auto;margin-right:auto;float:none}
.single-post .td-post-featured-image,
.single-post .td-post-content.tagdiv-type .wp-block-image,
.single-post .td-post-content.tagdiv-type img{max-width:900px;margin-inline:auto}

/* coral category kicker (emitted by omx-post-title.php) */
.omx-kicker{max-width:720px;margin:0 auto 6px;color:var(--omx-coral);font-weight:900;
  font-size:15px;letter-spacing:2px;text-transform:uppercase}
.omx-post-title{font-size:clamp(30px,4.2vw,52px)!important;font-weight:900!important;
  line-height:1.08!important;letter-spacing:-1px;color:var(--omx-ink)!important;margin:0 auto 18px!important}

/* body copy: bigger, airier, readable measure */
.single-post .td-post-content.tagdiv-type p{
  font-size:19px;line-height:1.8;color:#26324a;margin:16px 0}

/* section headings with coral bar */
.single-post .td-post-content.tagdiv-type h2{
  font-size:29px;font-weight:900;letter-spacing:-.5px;color:var(--omx-ink);
  margin:38px 0 12px;padding-right:16px;border-right:6px solid var(--omx-coral)}

/* TL;DR = first h2 ("בקצרה (TL;DR)") + its paragraph → blue callout box */
.single-post .td-post-content.tagdiv-type h2:first-of-type{
  border:0;padding:0;margin:8px 0 0;font-size:14px;letter-spacing:2px;text-transform:uppercase;
  color:var(--omx-coral);max-width:720px;margin-inline:auto}
.single-post .td-post-content.tagdiv-type h2:first-of-type + p{
  background:var(--omx-blue);color:#fff;font-size:19px!important;line-height:1.65;
  padding:22px 26px;border-radius:2px;margin:10px auto 26px;max-width:720px}

/* FAQ questions (h3 only appear in the FAQ block) */
.single-post .td-post-content.tagdiv-type h3{
  font-size:20px;font-weight:800;color:var(--omx-blue);margin:24px 0 6px;
  padding-right:14px;border-right:4px solid var(--omx-coral)}

/* in-content links: blue (readable, colored) */
.single-post .td-post-content.tagdiv-type a{color:var(--omx-blue2);font-weight:700;
  text-decoration:underline;text-underline-offset:3px}

/* lists */
.single-post .td-post-content.tagdiv-type ul li,
.single-post .td-post-content.tagdiv-type ol li{font-size:19px;line-height:1.7;margin:6px 0}
.single-post .td-post-content.tagdiv-type li::marker{color:var(--omx-coral)}

/* auto TOC box (mu-plugin) — bold + coral edge */
.single-post .ae-toc{max-width:720px;margin:20px auto!important;border:2px solid var(--omx-ink)!important;
  box-shadow:3px 3px 0 #454c56,6px 6px 0 #2E3238,9px 9px 0 #171a1f;border-radius:0!important;background:#fff!important}

/* category archive: coral tags */
.td_module_wrap .td-post-category,.td-category a{background:var(--omx-blue)!important}
.td_module_wrap .td-post-category:hover,.td-category a:hover{background:var(--omx-coral)!important}

/* ===== teal-gradient theme (ronizaken-style): white content sheets on dark bg ===== */
/* single article = a white sheet floating on the teal grid */
.single-post .td-post-content.tagdiv-type{background:#fff!important;padding:32px 40px 44px;border-radius:2px}
/* --- B1 a11y fix, 2026-07-21 (WCAG 1.4.3 contrast) ------------------------------
   In Newspaper 12.7.6 `.td-post-content` is a CHILD of `.td-post-header`, so the old
   blanket `.single-post .td-post-header a` rule bled #e6f1f2 into the white article
   sheet: in-content links and the WhatsApp CTA rendered at 1.15:1 (invisible).
   Verified against the live DOM: only the breadcrumbs and the category chip actually
   sit on the navy background — the meta block sits on the WHITE card. Scoped to match.
   In-content links intentionally fall through to the existing rule above (#2c5aa0,
   6.8:1); the TOC keeps its own #16305a override below. ------------------------- */

/* these DO sit on the navy page background → keep light (#e6f1f2 = 11.6:1) */
.single-post .entry-crumbs,.single-post .entry-crumbs a,.single-post .entry-crumbs span,
.single-post .td-post-header .td-category a{color:#e6f1f2!important}

/* meta block (date/author) sits on the WHITE card → charcoal ink (12.4:1) */
.single-post .td-post-header .td-module-meta-info,
.single-post .td-post-header .td-module-meta-info a,
.single-post .td-post-header .td-post-date,
.single-post .td-post-header .td-post-views span{color:var(--omx-coral)!important}
/* archive / category / search / blog listings → white sheet so text stays readable */
.archive .td-ss-main-content,.search .td-ss-main-content,.blog .td-ss-main-content,
.category .td-ss-main-content{background:#fff!important;padding:24px;border-radius:2px}

/* TOC readability: force dark navy on links + numbers (was rendering too light) */
.single-post .ae-toc a,.single-post .ae-toc li,.single-post .ae-toc ol,
.single-post .ae-toc ol li,.single-post .ae-toc-title{color:#16305a!important}
.single-post .ae-toc ol li::marker{color:#16305a!important}

/* hide comments area + comment-count meta on single posts */
.single-post #comments,.single-post .td-post-comments,.single-post .comments,
.single-post .td-icon-comments{display:none!important}

/* footer credit visible (light) on the dark footer */
.td-sub-footer-copy,.td-sub-footer-copy a,.td-subfooter-menu a{color:#cdd9ec!important}
.td-sub-footer-copy a:hover{color:#ffffff!important}