/* HBE — Site styles
 * @created 2026-04-27
 * @updated 2026-05-11 - A+/A− scales fonts only (not card frame) via --hbe-font-scale
 */

:root {
    /* Adjustable by the bottom-bar A+ / A− buttons. Scales fonts only — card width unaffected. */
    --hbe-font-scale: 1;
}

html, body { overflow-x:hidden; overflow-x:clip; max-width:100%; }
body { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; background:#f5f6f8; margin:0; }

/* Prevent any descendant from forcing horizontal overflow */
.hbe-issue, .hbe-article, .hbe-article-block, .hbe-article-body { max-width:100%; overflow-wrap:break-word; word-wrap:break-word; }
.hbe-article-body p, .hbe-article-body span, .hbe-article-body div, .hbe-article-body li {
    max-width:100%; overflow-wrap:break-word; word-wrap:break-word;
}
.hbe-article-body img { max-width:100%; height:auto; }
.hbe-article-body table { max-width:100%; }

/* ─── Article typography: consistent Frank Ruhl Libre, no parser-imposed bolding ── */
.hbe-article-body {
    font-family: 'Frank Ruhl Libre', 'David', Georgia, serif;
    font-size: calc(17px * var(--hbe-font-scale)); line-height: 1.75; color:#222;
}
/* Font scaling for content frames (.hbe-issue and .hbe-article).
   Heading + w3-large/w3-xlarge sizes overridden so A+/A− scales them but the card width stays put.
   !important is required because W3.CSS sets `.w3-large { font-size:18px!important }` etc. */
.hbe-issue .w3-large,
.hbe-article .w3-large       { font-size: calc(18px * var(--hbe-font-scale)) !important; }
.hbe-issue .w3-xlarge,
.hbe-article .w3-xlarge      { font-size: calc(24px * var(--hbe-font-scale)) !important; }
.hbe-issue h2,
.hbe-article-block h2        { font-size: calc(30px * var(--hbe-font-scale)); }
.hbe-issue h3                { font-size: calc(24px * var(--hbe-font-scale)); }
.hbe-issue h5                { font-size: calc(18px * var(--hbe-font-scale)); }
/* Force consistent font on every descendant — overrides inline font-family declarations */
.hbe-article-body * { font-family: inherit !important; }
/* Parser blanket-bolds every span; flatten back to normal weight */
.hbe-article-body span,
.hbe-article-body p span { font-weight: normal !important; }
.hbe-article-body p     { margin: 0.7em 0; }
/* Titles inside the body block use the same family but bigger + bold (legitimate emphasis) */
.hbe-article-block h2,
.hbe-article-block .w3-text-red {
    font-family: 'Frank Ruhl Libre', 'David', Georgia, serif !important;
}

/* ─── Navbar (sticky at top) ─────────────────────── */
.hbe-navbar          { background:#1abc9c; color:#fff; border-bottom:2px solid #16a085;
                       position:sticky; top:0; z-index:999; width:100%; box-sizing:border-box; }
.hbe-navbar a.w3-bar-item.w3-button { color:#fff!important; }
.hbe-navbar a.w3-bar-item.w3-button:hover { background:#16a085!important; color:#fff!important; }
.hbe-navbar .w3-bar-item { color:#fff; }
.hbe-active          { background:#0e6655!important; color:#fff!important; }

/* ─── Main + Footer ─────────────────────────────── */
.hbe-main            { min-height:calc(100vh - 200px); padding:8px 0 24px; }
.hbe-footer          { background:#1a252f; color:#cfd8dc; padding:8px 0; margin-top:24px; }
.hbe-footer-link     { color:#cfd8dc; text-decoration:none; }
.hbe-footer-link:hover { color:#1abc9c; text-decoration:underline; }

/* ─── Stat circles ──────────────────────────────── */
.hbe-stat-circles    { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:6px 0 8px; }
.hbe-stat-circ       { width:88px; height:88px; padding:0!important; line-height:1.1; font-size:.78em; cursor:default; }
.hbe-stat-circ b     { font-size:1.35em; }
.hbe-stat-circ i     { font-size:1.1em; opacity:.85; }

/* ─── Fixed bottom utility bar ──────────────────── */
.hbe-bottom-bar {
    position:fixed; left:0; right:0; bottom:0; z-index:1000;
    width:100vw;     /* force viewport-wide regardless of body width */
    background:#1abc9c; color:#fff; padding:4px 6px;
    box-shadow:0 -2px 6px rgba(0,0,0,.2);
    text-align:center; line-height:1; white-space:nowrap;
    box-sizing:border-box;
    font-family:'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji',sans-serif;
}
.hbe-bb-btn {
    display:inline-block; min-width:36px; padding:6px 8px;
    color:#fff!important; text-decoration:none; cursor:pointer;
    font-size:1.25em; vertical-align:middle; user-select:none;
}
.hbe-bb-btn.hbe-bb-az { font-size:1em; min-width:28px; padding:6px 6px; }
.hbe-bb-btn:hover { background:#16a085; border-radius:4px; }
.hbe-bb-sep        { display:inline-block; width:1px; height:18px; background:rgba(255,255,255,.4);
                     margin:0 6px; vertical-align:middle; }
body              { padding-bottom:48px; }   /* clear room above fixed bar */
footer.hbe-footer { margin-bottom:0; }

/* ─── Anchor scroll offset (clear sticky navbar + issue bar) ── */
.hbe-article-block { scroll-margin-top:110px; }
.hbe-article       { scroll-margin-top:110px; }
.hbe-issue h2,
.hbe-article-block h2 { scroll-margin-top:110px; }
:target            { background:#ffffcc; transition:background 1.5s; }

/* ─── Right-aligned page content (RTL) ──────────── */
/* Override w3-content's auto-centering for issue browsing pages so the
   reading column hugs the right edge — feels more anchored in Hebrew. */
.hbe-issue, .hbe-article, .hbe-galron, .hbe-author, .hbe-archive {
    margin-right: 0 !important;
    margin-left:  auto !important;
}

/* ─── Sticky issue bar (below navbar) ──────────── */
.hbe-issue-bar {
    position:sticky; top:50px; z-index:998;
    margin: 6px 0 10px auto;            /* right-align in RTL, small spacing */
    background:#dbeaf6;                  /* w3-pale-blue */
    border:1px solid #b7d4e8;
    border-radius:8px;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.hbe-issue-bar-inner {
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding:6px 14px; flex-wrap:wrap;
}
.hbe-issue-bar-meta { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:0; }
.hbe-issue-bar-title { color:#1a6e4e; text-decoration:none; font-size:1.05em; }
.hbe-issue-bar-title:hover { color:#16a085; }
.hbe-issue-bar-num   { color:#16a085; font-weight:700; font-size:1.05em; }
.hbe-issue-bar-en    { color:#555; font-size:.9em; }
.hbe-issue-bar-he    { color:#555; font-size:.9em; }

.hbe-issue-bar-nav   { display:flex; align-items:center; gap:4px; }
.hbe-issue-bar-btn   {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:34px; height:32px; padding:0 8px; border-radius:4px;
    color:#1abc9c!important; text-decoration:none; font-weight:700;
    border:1px solid #cfe5dd; background:#f3fbf9;
}
.hbe-issue-bar-btn:hover { background:#1abc9c; color:#fff!important; border-color:#16a085; }
.hbe-issue-bar-g, .hbe-issue-bar-m { font-family:Georgia,serif; }

@media (max-width:600px) {
    .hbe-issue-bar-inner { padding:4px 8px; gap:6px; }
    .hbe-issue-bar-en, .hbe-issue-bar-he { font-size:.8em; }
}

/* ─── TOC modal ─────────────────────────────────── */
.hbe-toc-modal { display:none; position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,.5); }
.hbe-toc-modal.open { display:flex; align-items:flex-start; justify-content:center; padding-top:70px; }
.hbe-toc-modal-card {
    background:#fff; max-width:640px; width:92%; max-height:80vh; overflow-y:auto;
    border-radius:8px; box-shadow:0 6px 22px rgba(0,0,0,.3);
}
.hbe-toc-modal-head { background:#fefae0; padding:8px 12px; display:flex; align-items:center; justify-content:space-between; }
.hbe-toc-modal-head h3 { margin:0; }
.hbe-toc-modal-list { list-style:none; margin:0; padding:0; }
.hbe-toc-modal-list li {
    padding:10px 14px; border-bottom:1px solid #eee; cursor:pointer; color:#333;
}
.hbe-toc-modal-list li:hover { background:#f0fbf8; color:#1a6e4e; }
.hbe-toc-close-x { cursor:pointer; background:#c0392b; color:#fff; border:none; padding:4px 10px; border-radius:4px; }

/* ─── Archive page ──────────────────────────────── */
.hbe-archive             { padding-bottom:24px; }
.hbe-archive-head        { margin-bottom:10px; }
.hbe-archive-goto input  { font-size:1.1em; }
.hbe-archive-body        { gap:0; }

/* Year sidebar */
.hbe-year-rail           { padding:6px; }
.hbe-year-list           { display:flex; flex-direction:column; max-height:70vh; overflow-y:auto; }
.hbe-year-link           {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px; margin:2px 0; border-radius:6px;
    text-decoration:none; color:#333; cursor:pointer;
    background:#f7f9fa; border-inline-start:4px solid transparent;
    transition:background .15s;
}
.hbe-year-link:hover     { background:#e8f7f2; color:#1a6e4e; }
.hbe-year-link.active    { background:#1abc9c; color:#fff; border-inline-start-color:#0e6655; font-weight:bold; }
.hbe-year-label          { font-size:1.1em; }
.hbe-year-count          { font-size:.85em; opacity:.75; }
.hbe-year-link.active .hbe-year-count { opacity:1; }

/* Issues grid */
.hbe-issue-pane          { padding:6px; }
.hbe-issue-grid          {
    display:grid; gap:8px;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
.hbe-issue-card          {
    position:relative; display:block; text-decoration:none;
    background:#fff; border:1px solid #d8e4e0; border-radius:6px;
    padding:8px 10px; color:#333; transition:transform .15s, box-shadow .15s;
}
.hbe-issue-card:hover    { transform:translateY(-1px); box-shadow:0 2px 8px rgba(26,188,156,.18); border-color:#1abc9c; }
.hbe-issue-num           { font-size:1.15em; font-weight:bold; color:#1abc9c; }
.hbe-issue-en            { font-size:1.05em; margin-top:2px; color:#444; font-weight:600; }
.hbe-issue-he            { font-size:.78em; color:#888; text-align:left; margin-top:1px; }
.hbe-issue-galron-only   { background:#fffaf0; border-color:#f0d6a0; }
.hbe-issue-unavail       {
    background:#f0f1f3; border-color:#dcdfe3; color:#888;
    cursor:not-allowed; pointer-events:none;
}
.hbe-issue-unavail .hbe-issue-num { color:#aaa; }
.hbe-issue-card-wrap     { position:relative; }
.hbe-issue-flag          {
    position:absolute; top:6px; left:6px; z-index:2;
    background:#9b59b6; color:#fff; font-size:.7em; font-weight:bold;
    padding:1px 5px; border-radius:3px;
}
.hbe-issue-flag-link     {
    text-decoration:none; cursor:pointer;
    transition:background .15s, transform .1s;
}
.hbe-issue-flag-link:hover  { background:#7d3c98; transform:scale(1.1); color:#fff; }
.hbe-issue-flag-only     { background:#e67e22; }
.hbe-issue-flag-unavail  { background:#bdc3c7; color:#fff; }
.hbe-date-suspect        { color:#c0392b; }
.hbe-warn                { font-size:.85em; margin-inline-start:4px; }

@media (max-width:600px) {
    .hbe-year-list       { max-height:none; flex-direction:row; flex-wrap:wrap; }
    .hbe-year-link       { flex:0 0 auto; padding:6px 10px; }
    .hbe-year-link .hbe-year-count { display:none; }
}

/* ─── Author profile + cloud ─────────────────────── */
.hbe-author-name         { font-size:1.6em; color:#1a6e4e; margin:0 0 4px; font-weight:bold; }
.hbe-author-meta         { color:#666; font-size:.95em; }
.hbe-author-bio          { line-height:1.6; color:#333; }
.hbe-author-items        { list-style:none; margin:0; padding:0; }
.hbe-author-item         { border-bottom:1px solid #eef1f3; }
.hbe-author-item:last-child { border-bottom:none; }
.hbe-author-item-link    {
    display:flex; flex-direction:column; gap:2px;
    padding:8px 6px; text-decoration:none; color:#222;
    border-radius:4px; transition:background .15s;
}
.hbe-author-item-link:hover { background:#f0fbf8; color:#1a6e4e; }
.hbe-author-item-title   { font-size:1.05em; line-height:1.4; }
.hbe-author-item-meta    { font-size:.82em; color:#888; }
.hbe-author-item-meta .w3-text-grey { margin-inline-start:6px; }

/* Author cloud tags clickable when wrapped in <a> (logged-in only) */
a.hbe-cloud-tag          { text-decoration:none; cursor:pointer; }
a.hbe-cloud-tag:hover    { transform:scale(1.07); filter:brightness(1.15); }

/* ─── Admin dashboard ─────────────────────────────── */
.hbe-admin-card          { margin-bottom:10px; }
.hbe-admin-form          { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.hbe-admin-form label    { margin:0; }
.hbe-admin-output        {
    background:#1e272e; color:#c8d6e5; padding:12px 16px; border-radius:6px;
    margin-top:14px; line-height:1.5; max-height:400px; overflow-y:auto;
    direction:ltr; text-align:left; white-space:pre-wrap; word-break:break-word;
    font-family:'Consolas','Monaco',monospace; font-size:.92em;
}
.hbe-admin-output-error  { background:#641e16; color:#fadbd8; }

/* ─── RCOL (logged-in right sidebar) ─────────────── */
.hbe-rcol                { padding:6px; }

/* Compact one-line items: [icon] [label]: [input] [button?] */
.hbe-rcol-line {
    display:flex; align-items:center; gap:6px; flex-wrap:nowrap; min-width:0;
    background:#fff; border-radius:8px; padding:6px 8px;
    box-shadow:0 1px 3px rgba(0,0,0,.08); margin:0 0 8px;
}
.hbe-rcol-ico            { color:#1abc9c; flex:0 0 auto; }
.hbe-rcol-line label     { font-weight:bold; color:#1a6e4e; white-space:nowrap; margin:0; }
.hbe-rcol-line input     {
    flex:1 1 auto; min-width:0; padding:4px 6px;
    border:1px solid #cfe5dd; border-radius:4px; background:#fff;
}
.hbe-rcol-line input.hbe-rcol-num { flex:0 0 70px; }
.hbe-rcol-line button    { white-space:nowrap; padding:4px 8px !important; flex:0 0 auto; }

.hbe-rcol-results        { max-height:300px; overflow-y:auto; margin:0 0 10px; }
.hbe-rcol-result         {
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 8px; border-radius:4px; text-decoration:none; color:#333;
    border-bottom:1px solid #f0f0f0; background:#fff;
}
.hbe-rcol-result:hover   { background:#e8f7f2; color:#1a6e4e; }
.hbe-rcol-result-qty     { font-size:.8em; color:#999; }

/* ─── Legal pages (terms / privacy) ────────────── */
.hbe-legal h4        { color:#1a6e4e; margin:18px 0 6px; font-size:1.1em; }
.hbe-legal p,
.hbe-legal li        { line-height:1.7; }
.hbe-legal ul        { padding-inline-start:22px; margin:6px 0 12px; }
.hbe-legal hr        { border:none; border-top:1px solid #e0e0e0; margin:24px 0 16px; }

/* ─── Tag clouds ────────────────────────────────── */
.hbe-cloud           { text-align:center; line-height:1.7; padding:6px 4px; }
.hbe-cloud-tag       { display:inline-block; margin:2px 6px; vertical-align:middle; transition:transform .15s; cursor:default; }
.hbe-cloud-tag:hover { transform:scale(1.07); }
.hbe-cloud-more      { color:#999; font-size:1.1em; margin-inline-start:6px; }