/*
 * Hisab Design System v1.1.3 — presentation layer only.
 *
 * Scope: main .entry-content (post/page content) and #root (calculator tool).
 *
 * Hard rules followed in this file:
 * - NOTHING is hidden: no display:none, no visibility:hidden, no zero-height
 *   or opacity tricks. The TOC is scrollable (max-height + overflow-y:auto),
 *   never clipped away. #results / .live-box display is left entirely to
 *   the tool's own JS (it toggles them); this file styles their look only.
 * - Header / footer / admin bar / chat are NOT touched: no selectors for
 *   #masthead, #colophon, #mobile-drawer, .hisab-hf-*, #wpadminbar,
 *   #hoc-chat-toggle appear anywhere here.
 * - The tool's own inline <style> (in <body>, after <head>) wins ties on
 *   equal specificity, so rules that must beat it use higher-specificity
 *   selectors scoped to main .entry-content #root.
 * - RTL-safe: logical properties only (inline-start / inline-end), no
 *   physical left/right, no floats.
 * - !important is used ONLY in the Step 1 alignment section (to beat the
 *   theme's green-pill heading style + the tool's own CSS). Everywhere
 *   else, higher specificity does the job. Inline style="" attributes
 *   are left alone (the export-buttons row keeps its inline flex layout).
 * - v1.1.0: ONE heading style site-wide. The theme gives every Gutenberg
 *   heading a GREEN pill (green-tint background + green border + rounded
 *   corners). v1.0.9 gave H2 the blue accent bar but left H3/H4 on the
 *   green pill — a visible colour mismatch (H2 blue vs H3 green). Now
 *   H2–H6 all get the SAME treatment: no pill background, no rounding,
 *   one blue accent bar. The pill is gone, the hierarchy stays (size).
 * - v1.1.1: Plain article headings (no wp-block-heading class, e.g. the
 *   birth-year H2 written as raw HTML) get the SAME style as Gutenberg
 *   headings. Before, they fell through to the theme's
 *   `h1,h2,h3,h4 { color: #3771A3 }` (blue text, no bar) while Gutenberg
 *   headings were dark + blue bar — a visible colour mismatch.
 * - v1.1.2: ALL tables full width. The tool's JS-rendered results table
 *   (البيان / السنة / الشهر / اليوم) was content-sized (width:auto),
 *   hugging the right edge with empty space on the left. Now every
 *   table in the content (article + tool) is forced to 100% width
 *   with !important (beats the tool's ID rules + any inline width).
 * - v1.1.3: REMOVED `display: block` from tables (the real cause of
 *   narrow tables). `display: block` on a <table> breaks the table
 *   formatting context: the browser generates an anonymous inner table
 *   (width:auto, shrink-to-fit) that hugs the right edge, so the visible
 *   table stayed narrow despite width:100%. Tables are back to natural
 *   `display: table` + width:100%. Wide tables still scroll — via the
 *   <figure class="wp-block-table"> wrapper's overflow-x:auto (WordPress
 *   core already sets it; this file states it explicitly too).
 */

/* ---------- Design tokens (scoped, inherited by content) ---------- */
main .entry-content {
  --hoc-text: #1f2937;
  --hoc-heading: #111827;
  --hoc-muted: #6b7280;
  --hoc-accent: #2563eb;
  --hoc-accent-dark: #1d4ed8;
  --hoc-border: #e5e7eb;
  --hoc-bg-soft: #f8fafc;
  --hoc-bg-blue-soft: #eff6ff;
  --hoc-radius: 12px;
  --hoc-radius-sm: 8px;
  color: var(--hoc-text);
  font-size: 17px;
  line-height: 1.9;
  overflow-wrap: break-word;
  /* v1.0.3: the content column fills its container (which is 1290px,
     see the alignment section below). It no longer sets its own 820px —
     that made the content narrower AND off-centre vs the 1290px header. */
  max-width: 100%;
  margin-inline: 0;
}

/* ---------- Content column: fills the 1290px container ---------- */
main .entry-content #root {
  box-sizing: border-box;
  max-width: 100%;
  margin-inline: 0;
}

/* ---------- Base typography ---------- */
main .entry-content h1 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--hoc-heading);
  margin-block: 8px 20px;
}

main .entry-content h2.wp-block-heading {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.7;
  color: var(--hoc-heading);
  margin-block: 40px 16px;
  /* v1.1.0: kill the theme's green pill (background + rounding + pill
     padding) so H2 matches H3–H6: one blue accent bar, no pill. */
  background: transparent;
  border-radius: 0;
  padding-block: 4px;
  padding-inline-start: 12px;
  padding-inline-end: 0;
  border-inline-start: 4px solid var(--hoc-accent);
  scroll-margin-top: 90px;
}

main .entry-content h3.wp-block-heading {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--hoc-heading);
  margin-block: 28px 12px;
  /* v1.1.0: same as H2 — blue accent bar, no green pill. (Before, H3
     kept the theme's green pill while H2 had the blue bar: mismatch.) */
  background: transparent;
  border-radius: 0;
  padding-block: 4px;
  padding-inline-start: 12px;
  padding-inline-end: 0;
  border-inline-start: 4px solid var(--hoc-accent);
  scroll-margin-top: 90px;
}

/* v1.1.0: H4–H6 get the same single heading style (blue bar, no pill),
   only smaller — so no page can show a green pill at any level. */
main .entry-content h4.wp-block-heading {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--hoc-heading);
  margin-block: 24px 10px;
  background: transparent;
  border-radius: 0;
  padding-block: 4px;
  padding-inline-start: 12px;
  padding-inline-end: 0;
  border-inline-start: 4px solid var(--hoc-accent);
  scroll-margin-top: 90px;
}

main .entry-content h5.wp-block-heading {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--hoc-heading);
  margin-block: 20px 8px;
  background: transparent;
  border-radius: 0;
  padding-block: 4px;
  padding-inline-start: 12px;
  padding-inline-end: 0;
  border-inline-start: 4px solid var(--hoc-accent);
  scroll-margin-top: 90px;
}

main .entry-content h6.wp-block-heading {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--hoc-heading);
  margin-block: 20px 8px;
  background: transparent;
  border-radius: 0;
  padding-block: 4px;
  padding-inline-start: 12px;
  padding-inline-end: 0;
  border-inline-start: 4px solid var(--hoc-accent);
  scroll-margin-top: 90px;
}

/* ---------- v1.1.1: plain article headings (no wp-block-heading) ----- */
/* The birth-year section H2 ("احسب عمر مواليد سنة معينة") is raw HTML,
   not a Gutenberg block, so none of the .wp-block-heading rules above
   reach it. It fell through to the theme's
   `h1,h2,h3,h4 { color: #3771A3 }` — blue text, no accent bar — while
   every Gutenberg heading is dark + blue bar. Give plain headings the
   SAME style. Scoped to direct children of .entry-content + Gutenberg
   group blocks, so the tool's own headings (inside #root, NOT a direct
   child) are NOT touched. */
main .entry-content > h2,
main .entry-content .wp-block-group > h2 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.7;
  color: var(--hoc-heading);
  margin-block: 40px 16px;
  background: transparent;
  border-radius: 0;
  padding-block: 4px;
  padding-inline-start: 12px;
  padding-inline-end: 0;
  border-inline-start: 4px solid var(--hoc-accent);
  text-align: start !important;
  display: block !important;
  scroll-margin-top: 90px;
}

main .entry-content > h3,
main .entry-content .wp-block-group > h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--hoc-heading);
  margin-block: 28px 12px;
  background: transparent;
  border-radius: 0;
  padding-block: 4px;
  padding-inline-start: 12px;
  padding-inline-end: 0;
  border-inline-start: 4px solid var(--hoc-accent);
  text-align: start !important;
  display: block !important;
  scroll-margin-top: 90px;
}

main .entry-content > h4,
main .entry-content .wp-block-group > h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--hoc-heading);
  margin-block: 24px 10px;
  background: transparent;
  border-radius: 0;
  padding-block: 4px;
  padding-inline-start: 12px;
  padding-inline-end: 0;
  border-inline-start: 4px solid var(--hoc-accent);
  text-align: start !important;
  display: block !important;
  scroll-margin-top: 90px;
}

main .entry-content > h5,
main .entry-content .wp-block-group > h5 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--hoc-heading);
  margin-block: 20px 8px;
  background: transparent;
  border-radius: 0;
  padding-block: 4px;
  padding-inline-start: 12px;
  padding-inline-end: 0;
  border-inline-start: 4px solid var(--hoc-accent);
  text-align: start !important;
  display: block !important;
  scroll-margin-top: 90px;
}

main .entry-content > h6,
main .entry-content .wp-block-group > h6 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--hoc-heading);
  margin-block: 20px 8px;
  background: transparent;
  border-radius: 0;
  padding-block: 4px;
  padding-inline-start: 12px;
  padding-inline-end: 0;
  border-inline-start: 4px solid var(--hoc-accent);
  text-align: start !important;
  display: block !important;
  scroll-margin-top: 90px;
}

/* ---------- Step 1: one consistent start alignment (article blocks) -- */
/* The article looked be-dhanga because headings/paragraphs/lists had
   mixed alignment (some centred, some start, two headings sharing one
   line) and the H2 accent bar sat detached from centred text. Force ONE
   alignment — start (right in RTL) — on the article's Gutenberg blocks
   only. Scoped to .wp-block-* so the calculator tool (own classes, own
   centred layout) is NOT touched. display:block puts each heading on
   its own line. */
main .entry-content .wp-block-heading {
  display: block !important;
  text-align: start !important;
}

main .entry-content p.wp-block-paragraph,
main .entry-content ul.wp-block-list,
main .entry-content ol.wp-block-list {
  text-align: start !important;
  display: block !important;
}

/* Option B: list starts on a NEW line under its intro paragraph. */
main .entry-content ul.wp-block-list,
main .entry-content ol.wp-block-list {
  margin-block-start: 12px;
}

/* ---------- Google Translate (Chrome auto-translate) ---------- */
/* When a visitor in an English country gets the page auto-translated,
   Chrome does NOT change dir (it stays rtl) — it only adds
   translated-ltr / translated-rtl to <html> and swaps the text.
   'start' would still resolve to right, but English text must be left.
   So: translated to an LTR language -> force left; to RTL -> force right.
   The translated text sits inside <font> wrappers that inherit text-align
   from these blocks, so the override reaches it. */
html.translated-ltr main .entry-content .wp-block-heading,
html.translated-ltr main .entry-content p.wp-block-paragraph,
html.translated-ltr main .entry-content ul.wp-block-list,
html.translated-ltr main .entry-content ol.wp-block-list {
  text-align: left !important;
}

html.translated-rtl main .entry-content .wp-block-heading,
html.translated-rtl main .entry-content p.wp-block-paragraph,
html.translated-rtl main .entry-content ul.wp-block-list,
html.translated-rtl main .entry-content ol.wp-block-list {
  text-align: right !important;
}

main .entry-content p {
  margin-block: 0 16px;
}

main .entry-content a {
  color: var(--hoc-accent-dark);
  text-decoration: none;
}

main .entry-content a:hover {
  color: var(--hoc-accent-dark);
  text-decoration: underline;
}

main .entry-content a:focus-visible,
main .entry-content button:focus-visible,
main .entry-content select:focus-visible,
main .entry-content input:focus-visible {
  outline: 2px solid var(--hoc-accent);
  outline-offset: 2px;
}

main .entry-content hr {
  border: none;
  border-top: 1px solid var(--hoc-border);
  margin-block: 28px;
}

main .entry-content code {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.9em;
}

main .entry-content pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 16px;
  border-radius: var(--hoc-radius);
  overflow-x: auto;
  direction: ltr;
  text-align: start;
}

/* ---------- Lists ---------- */
main .entry-content ul,
main .entry-content ol {
  margin-block: 0 16px;
  padding-inline-start: 24px;
}

main .entry-content li {
  margin-block: 0 8px;
}

main .entry-content li::marker {
  color: var(--hoc-accent);
}

/* ---------- Tables: full-width, soft header, scrollable if wide ---------- */
/* v1.1.3: NO display:block on tables. (Before, display:block broke the
   table formatting context: the browser generated an anonymous inner
   table with width:auto that shrank to content, so the visible table
   stayed narrow despite width:100%.) Tables stay natural
   display:table + width:100%. Wide tables scroll via the
   <figure class="wp-block-table"> wrapper (overflow-x:auto below). */
main .entry-content table {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--hoc-border);
  border-radius: var(--hoc-radius);
  border-collapse: separate;
  border-spacing: 0;
  margin-block: 20px;
  font-size: 15px;
}

/* Gutenberg table wrapper scrolls wide tables (WP core also sets this;
   stated here so the table itself never needs display:block). */
main .entry-content figure.wp-block-table {
  overflow-x: auto;
}

main .entry-content th {
  background: var(--hoc-bg-blue-soft);
  font-weight: 700;
  color: var(--hoc-heading);
  padding: 12px;
  text-align: start;
  border-bottom: 2px solid var(--hoc-border);
  white-space: nowrap;
}

main .entry-content td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hoc-border);
  text-align: start;
}

main .entry-content tr:last-child td {
  border-bottom: none;
}

/* ---------- v1.1.2: ALL tables full width ---------- */
/* The tool's JS-rendered results table (البيان / السنة / الشهر / اليوم)
   was content-sized (width:auto): it hugged the right edge, leaving
   empty space on the left. The article tables already had width:100%
   but the tool's ID rules (#root / #results) beat that selector. Force
   EVERY table in the content — article, tool, results, personality —
   to the full content width. !important beats the tool's ID selectors
   and any inline width the JS sets. max-width keeps it inside the
   column (no overflow). This is site-wide by design: one table look. */
main .entry-content table,
main .entry-content #root table,
main .entry-content #root #results table,
main .entry-content #root .bday-table,
main .entry-content #root .personality-table,
main .entry-content #ac table {
  width: 100% !important;
  max-width: 100% !important;
}

/* ---------- Figures: example screenshots read as labelled examples ---------- */
main .entry-content figure {
  border: 1px solid var(--hoc-border);
  border-radius: var(--hoc-radius);
  background: var(--hoc-bg-soft);
  padding: 10px;
  margin-block: 24px;
  text-align: center;
}

main .entry-content figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
  border-radius: var(--hoc-radius-sm);
}

main .entry-content figcaption {
  text-align: center;
  font-size: 13px;
  color: var(--hoc-muted);
  margin-top: 8px;
}

main .entry-content img {
  max-width: 100%;
  height: auto;
}

/* ---------- Blockquote / callout ---------- */
main .entry-content blockquote {
  border-inline-start: 4px solid var(--hoc-accent);
  background: var(--hoc-bg-soft);
  padding: 16px 20px;
  border-radius: var(--hoc-radius-sm);
  margin-block: 20px;
}

main .entry-content blockquote p:last-child {
  margin-bottom: 0;
}

/* ---------- Gutenberg / Kadence content buttons ---------- */
main .entry-content a.wp-block-button__link,
main .entry-content a.button {
  display: inline-block;
  background: var(--hoc-accent);
  color: #fff;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}

main .entry-content a.wp-block-button__link:hover,
main .entry-content a.button:hover {
  background: var(--hoc-accent-dark);
  color: #fff;
  text-decoration: none;
}

main .entry-content .is-style-outline a.wp-block-button__link {
  background: transparent;
  color: var(--hoc-accent);
  border: 1px solid var(--hoc-accent);
}

main .entry-content .is-style-outline a.wp-block-button__link:hover {
  background: var(--hoc-bg-blue-soft);
}

/* ================================================================= */
/*  Calculator tool (inside #root)                                    */
/*  Layout (display / flex / grid) is deliberately NOT overridden:    */
/*  the tool's own CSS + JS own it. This file styles look only:       */
/*  colors, borders, radius, padding, type.                           */
/* ================================================================= */

/* Toggle pills (ميلادي / هجري) */
main .entry-content #root .tab {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

main .entry-content #root .tab:hover {
  border-color: var(--hoc-accent);
}

main .entry-content #root .tab.active,
main .entry-content #root .tab[aria-selected="true"],
main .entry-content #root .tab[aria-pressed="true"] {
  background: var(--hoc-accent);
  color: #fff;
  border-color: var(--hoc-accent);
}

/* Inputs area: one clean card holding the dropdowns */
main .entry-content #root #inputsArea {
  background: #fff;
  border: 1px solid var(--hoc-border);
  border-radius: var(--hoc-radius);
  padding: 20px;
  margin-block: 16px;
}

/* Form controls: one consistent height, border, radius */
main .entry-content #root select,
main .entry-content #root input[type="text"],
main .entry-content #root input[type="number"],
main .entry-content #root input[type="date"],
main .entry-content #root .field select,
main .entry-content #root .field input {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding-inline: 12px;
  font-size: 16px;
  background: #fff;
  color: var(--hoc-text);
}

main .entry-content #root .field label {
  font-weight: 600;
  color: var(--hoc-heading);
}

/* Primary action: one consistent blue button */
main .entry-content #root .calc-btn {
  background: var(--hoc-accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

main .entry-content #root .calc-btn:hover {
  background: var(--hoc-accent-dark);
}

/* Results + live box: clean cards. Display is NOT set here: the tool's
   own JS toggles their visibility; this file only styles their look. */
main .entry-content #root #results {
  background: #fff;
  border: 1px solid var(--hoc-border);
  border-radius: var(--hoc-radius);
  padding: 20px;
  margin-top: 20px;
}

main .entry-content #root .live-box {
  background: var(--hoc-bg-blue-soft);
  border: 1px solid #dbeafe;
  border-radius: var(--hoc-radius);
  padding: 16px 20px;
  margin-top: 16px;
}

/* Export buttons: secondary style. Display is NOT set here: the tool's
   own JS shows them (inline style) only after a calculation. */
main .entry-content #root .export-btn {
  background: #fff;
  color: var(--hoc-accent);
  border: 1px solid var(--hoc-accent);
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

main .entry-content #root .export-btn:hover {
  background: var(--hoc-bg-blue-soft);
}

/* ================================================================= */
/*  Birth-year calculators (1995/1996/1999/2000 posts) — <div id="ac">  */
/*  These use a different snippet (#ac, .go-btn, .lang-pill) from the    */
/*  main calculator (#root), so they get the same look here: one card,  */
/*  one primary button, one pill toggle. The fireworks canvas and the   */
/*  tool's JS behaviour are left alone.                                 */
/* ================================================================= */
main .entry-content #ac .input-card {
  background: #fff;
  border: 1px solid var(--hoc-border);
  border-radius: var(--hoc-radius);
  padding: 20px;
  margin-block: 16px;
}

main .entry-content #ac .input-row select,
main .entry-content #ac .input-row input {
  box-sizing: border-box;
  height: 48px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding-inline: 12px;
  font-size: 16px;
  background: #fff;
  color: var(--hoc-text);
}

main .entry-content #ac .go-btn {
  background: var(--hoc-accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

main .entry-content #ac .go-btn:hover {
  background: var(--hoc-accent-dark);
}

main .entry-content #ac .lang-pill {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 20px;
  font-weight: 600;
  cursor: pointer;
}

main .entry-content #ac .lang-pill:hover {
  border-color: var(--hoc-accent);
}

main .entry-content #ac .live-strip {
  background: var(--hoc-bg-blue-soft);
  border: 1px solid #dbeafe;
  border-radius: var(--hoc-radius);
  padding: 16px 20px;
  margin-top: 16px;
}

main .entry-content #ac .hero-title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.7;
  color: var(--hoc-heading);
}

main .entry-content #ac .hero-sub {
  color: var(--hoc-muted);
}

/* ================================================================= */
/*  Site-wide 1290px alignment — header = title = content = footer   */
/*  The custom header (.hisab-hf-header-inner) and footer             */
/*  (.hisab-hf-footer-inner) are both max-width 1290px, centred,     */
/*  padding 0 20px. The content was 820px and shifted right by the    */
/*  empty sidebar layout, so header/title/content/footer all had      */
/*  different edges ("be-dhanga"). These rules put every level on    */
/*  the same 1290px column: container 1290px centred + 20px padding, */
/*  inner blocks fill it (1250px) — exactly like the header's inner  */
/*  content. The page title moves from centred to start-aligned so   */
/*  its edge sits on the same line as the paragraphs (one line).      */
/* ================================================================= */
.content-container.site-container,
.hero-container.site-container {
  max-width: 1290px;
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
}

main .entry-hero .entry-hero-container-inner .entry-header {
  /* Kadence centres the hero title with flexbox on the PARENT
     (display:flex + align-items:center + justify-content:center), so a
     text-align rule on the H1 alone does nothing (v1.0.3 lesson). Override
     the parent: keep vertical centring (justify-content) but move the
     horizontal alignment to the start edge (right in RTL). */
  align-items: flex-start;
  align-items: start;
  text-align: start;
}

main .entry-hero .entry-header .entry-title {
  text-align: start;
  margin-inline: 0;
}

/* ================================================================= */
/*  Table of Contents (TOC+)                                          */
/*  Compact: smaller type, capped height with scroll, clear [hide].   */
/*  The TOC is never hidden by this file — it stays scrollable.       */
/* ================================================================= */
main .entry-content #toc_container {
  box-sizing: border-box;
  width: 100%;
  font-size: 14px;
  line-height: 1.7;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--hoc-border);
  border-radius: var(--hoc-radius);
  background: var(--hoc-bg-soft);
  padding: 16px 18px;
  margin-block: 20px;
}

main .entry-content #toc_container .toc_title {
  font-size: 15px;
  font-weight: 700;
  color: var(--hoc-heading);
  margin-block: 0 8px;
}

main .entry-content #toc_container .toc_toggle a {
  color: var(--hoc-accent);
  font-weight: 600;
}

main .entry-content #toc_container ul {
  margin: 0;
  padding-inline-start: 16px;
  list-style: none;
}

main .entry-content #toc_container > ul.toc_list {
  padding-inline-start: 0;
}

main .entry-content #toc_container li {
  margin-block: 0 4px;
}

main .entry-content #toc_container a {
  color: var(--hoc-text);
}

main .entry-content #toc_container a:hover {
  color: var(--hoc-accent-dark);
}

/* ================================================================= */
/*  Responsive                                                        */
/*  Tool grid stacking is intentionally left to the tool's own CSS   */
/*  (it already stacks its grids under 768px); this file only scales */
/*  type + spacing + the TOC.                                         */
/* ================================================================= */
@media (max-width: 768px) {
  main .entry-content {
    font-size: 16px;
  }

  /* Match the header's mobile padding (12px at <=767px). */
  .content-container.site-container,
  .hero-container.site-container {
    padding-inline: 12px;
  }

  main .entry-content h1 {
    font-size: 26px;
  }

  main .entry-content h2.wp-block-heading {
    font-size: 21px;
    margin-block: 32px 12px;
  }

  main .entry-content h3.wp-block-heading {
    font-size: 18px;
  }

  main .entry-content #toc_container {
    max-height: 320px;
    padding: 12px 14px;
  }

  main .entry-content #root #inputsArea,
  main .entry-content #root #results,
  main .entry-content #root .live-box {
    padding: 14px;
  }

  main .entry-content table {
    font-size: 14px;
  }

  main .entry-content figure {
    padding: 8px;
  }
}

@media (max-width: 480px) {
  main .entry-content {
    font-size: 15px;
    line-height: 1.85;
  }

  main .entry-content h2.wp-block-heading {
    font-size: 19px;
  }

  main .entry-content h3.wp-block-heading {
    font-size: 17px;
  }

  main .entry-content #toc_container {
    padding: 10px 12px;
  }

  main .entry-content #root .calc-btn {
    padding: 12px 20px;
    font-size: 16px;
  }

  main .entry-content #root .export-btn {
    padding: 10px 14px;
  }
}

/* ================================================================= */
/*  v1.1.4: Single posts (blog posts, e.g. /calculate-age-difference/)
    must ALSO use the 1290px column, matching the header.
    Root cause: Kadence adds body.content-width-narrow on single posts
    and its inline <style> sets
      .content-width-narrow .content-container.site-container,
      .content-width-narrow .hero-container.site-container
      { max-width: var(--global-content-narrow-width) }  (= 842px)
    That rule (specificity 0,3,0) beats the base 1290px rule (0,2,0),
    so single-post articles rendered at 842px while the header stayed
    at 1290px. Override here with higher specificity (0,3,1) + !important
    so it wins regardless of load order. Inner blocks fill the container
    (they have no narrow max-width of their own), so the whole article
    lines up with the header edges, like every other page.           */
/* ================================================================= */
body.content-width-narrow .content-container.site-container,
body.content-width-narrow .hero-container.site-container {
  max-width: 1290px !important;
}

/* ================================================================= */
/*  v1.1.5: Single-post featured image (banner) aligns with the
    1290px header + article, instead of sticking out past them.
    Root cause: Kadence gives the banner
      .post-thumbnail.article-post-thumbnail.alignwide
    and its inline <style> sets
      .content-width-narrow .wp-site-blocks .content-container .alignwide
      { margin-left:-130px; margin-right:-130px; width:unset; max-width:unset }
    (specificity 0,4,0), so the banner renders 130px wider than the
    container on EACH side (1550px total) and its edges do NOT line up
    with the header/article (1250px inner). Reset the margins/width so
    the banner fills the container's inner width, exactly like the
    header and the article. Specificity 0,4,0 + !important beats
    Kadence's rule (same specificity, no !important). The image inside
    (.post-thumbnail-inner is absolute-fill; img is cover) fills the
    banner box, so the image edges line up too. The
    kadence-thumbnail-position-behind overlap (margin-bottom:-4.3em)
    is untouched, so the banner still overlaps the article below.   */
/* ================================================================= */
.single-post .post-thumbnail.article-post-thumbnail.alignwide {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

/* ================================================================= */
/*  v1.1.6: Single-post banner image shows FULLY (no crop).
    Root cause: the banner container uses the theme default
      .post-thumbnail { height:0; padding-bottom:66.67%; overflow:hidden }
    (a 3:2 box), while the banner image is 1200x630 (1.9:1, wider).
    The img is height:100% + width:100% + object-fit:cover, so it is
    scaled to fill the 3:2 box and its SIDES get cut off (cover crops
    the wider dimension). Fix: make the banner behave like
    kadence-thumbnail-ratio-inherit — container height:auto (no
    padding-bottom box), inner static (in flow), img height:auto +
    width:100% so the image renders at its NATURAL aspect ratio
    (1250px wide x ~656px tall), fully visible, no crop, no
    letterbox. Specificity 0,4,0 / 0,4,1 / 0,5,0 + !important beats
    the theme rules (0,2,0 / 0,3,0 / 0,3,1). The behind-overlap
    (margin-bottom:-4.3em) is untouched.                           */
/* ================================================================= */
.single-post .post-thumbnail.article-post-thumbnail.alignwide {
  padding-bottom: 0 !important;
  height: auto !important;
}
.single-post .post-thumbnail.article-post-thumbnail.alignwide .post-thumbnail-inner {
  position: static !important;
}
.single-post .post-thumbnail.article-post-thumbnail.alignwide img {
  height: auto !important;
  width: 100% !important;
  object-fit: unset !important;
}

/* ================================================================= */
/*  v1.1.7: Author avatar — show the Hisab logo, not the Gravatar.
    The author (taimoor) has a Gravatar set to an unrelated
    "The Books Mania" logo. The PHP get_avatar filter (below) swaps
    the avatar src to the site logo (136x90, rectangular). Because
    the avatar slot is square (80x80), use object-fit:contain so the
    rectangular logo fits WITHOUT distortion, on a white background,
    with a small radius (not a circle, so the logo is not cropped).  */
/* ================================================================= */
.entry-author-avatar img.avatar {
  object-fit: contain !important;
  background: #fff !important;
  border-radius: 8px !important;
}