/* Blog Shared Critical CSS — Task 54B. * Blog Bar shell (category navigation, search form/autocomplete/suggestions, * mobile open/closed panel) plus the Single-Post-only Blog Bar container * (`.vlz-blog-single-nav`). Extracted verbatim from blog-archive.css so the * shared component this theme renders on Blog Home, Category/Tag/Author/ * Search, and Single Post has one owner instead of Single Post depending on * the full Archive stylesheet for it. Loaded blocking on every Blog-family * surface (see vlz_blog_should_enqueue_card_assets()) and on Single Post. * No rule content changed; only file placement and (for the one native * comma-selector split noted at the end of this file) the comma-list split * into its constituent selectors, each kept in exactly one file. See * report 56 (Task 54B) for the full ownership/split rationale. */ .vlz-blog-search-form { display: flex; gap: var(--vlz-space-sm); max-width: 42rem; } .vlz-blog-search-form input { min-width: 0; flex: 1; border: 1px solid var(--vlz-color-border-strong); border-radius: 0; padding: .8rem 1rem; color: var(--vlz-color-text); background: var(--vlz-color-surface); font: inherit; } .vlz-blog-search-form input:focus-visible { outline: 3px solid var(--vlz-color-focus); outline-offset: 2px; } .vlz-blog-search-form button { border: 0; padding: .8rem 1.2rem; color: #fff; background: var(--vlz-color-primary); font: inherit; font-weight: 700; cursor: pointer; } .vlz-blog-search-form button:focus-visible { outline: 3px solid var(--vlz-color-focus); outline-offset: 3px; } .vlz-blog-search-autocomplete { position: relative; max-width: 42rem; } .vlz-blog-search-suggestions { position: absolute; inset-inline: 0; top: 100%; z-index: 20; margin: .35rem 0 0; padding: .35rem 0; list-style: none; border: 1px solid var(--vlz-color-border-strong); background: var(--vlz-color-surface); box-shadow: 0 12px 28px rgba(0, 0, 0, .12); max-height: 60vh; overflow-y: auto; max-width: 100%; } .vlz-blog-search-suggestions__item a { display: flex; flex-direction: column; gap: .15rem; padding: .65rem 1rem; color: var(--vlz-color-text); text-decoration: none; overflow-wrap: break-word; } .vlz-blog-search-suggestions__item.is-active, .vlz-blog-search-suggestions__item a:hover { background: var(--vlz-color-surface-alt); } .vlz-blog-search-suggestions__title { font-weight: 600; color: var(--vlz-color-heading); } .vlz-blog-search-suggestions__meta { font-size: .85em; color: var(--vlz-color-text-muted); } .vlz-blog-search-suggestions__empty { padding: .65rem 1rem; color: var(--vlz-color-text-muted); } .vlz-blog-category-nav { display: flex; flex-wrap: wrap; gap: .65rem 1.35rem; align-items: center; margin-block-start: var(--vlz-space-lg); } .vlz-blog-category-nav a, .vlz-blog-category-nav summary { display: inline-flex; align-items: center; color: var(--vlz-color-text); font-weight: 600; text-decoration: none; line-height: 1.3; padding-block: .2rem; border-block-end: 2px solid transparent; cursor: pointer; list-style: none; transition: color .15s ease, border-color .15s ease; } .vlz-blog-category-nav summary::-webkit-details-marker { display: none; } .vlz-blog-category-nav a:hover, .vlz-blog-category-nav summary:hover { color: var(--vlz-color-primary); } .vlz-blog-category-nav a:focus-visible, .vlz-blog-category-nav summary:focus-visible { outline: 3px solid var(--vlz-color-focus); outline-offset: 3px; border-radius: .2rem; } .vlz-blog-category-nav a[aria-current="page"], .vlz-blog-category-nav summary[aria-current="page"] { color: var(--vlz-color-primary); font-weight: 700; border-block-end-color: var(--vlz-color-primary); } .vlz-blog-category-nav details { position: relative; } .vlz-blog-category-nav details[open] > summary { color: var(--vlz-color-primary); } .vlz-blog-category-nav details > div { position: absolute; z-index: 2; display: grid; gap: .5rem; min-width: 13rem; margin-block-start: .5rem; padding: 1rem; background: var(--vlz-color-surface); border: 1px solid var(--vlz-color-border); box-shadow: 0 12px 28px rgba(0, 0, 0, .1); } .vlz-blog-category-nav details > div a { border-block-end: 0; padding-block: .1rem; } @media (max-width: 480px) { .vlz-blog-category-nav { gap: .55rem 1rem; } } /* Owner Correction Round 5 — Blog Bar: one shared wrapper, rendered by the same `vlz_blog_render_category_navigation()` on all six Blog surfaces. Desktop: the category nav above is visually unchanged; this only adds the existing, reused `vlz_blog_render_search_form()` compact to its start, wrapping to its own line if the row runs out of room (Tablet). Mobile: the very same nav + search markup (no duplication) collapses into a closed context bar and is repositioned by CSS alone into a stacked panel when `.is-open` is toggled by `blog-nav-panel.js`. */ .vlz-blog-bar .vlz-blog-category-nav { margin-block-start: 0; } .vlz-blog-bar__row { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1.35rem; } /* Owner Correction — Blog Nav final micro-correction §Desktop Search Position: Desktop/Tablet only (this file's `@media (max-width: 767.98px)` block below re-orders both for Mobile independently either way) — categories at the nav's main-start (right, this RTL site) via the lower `order`, search at main-end (left) via the higher one. `flex:1 1 auto` on the nav already makes it consume the remaining row width, so the search pill lands at the far edge instead of sitting centred or flush against the categories. */ .vlz-blog-bar .vlz-blog-category-nav { flex: 1 1 auto; order: 1; } .vlz-blog-bar__context { display: none; } .vlz-blog-bar__search { order: 3; flex: 0 1 20rem; min-width: 13rem; max-width: 100%; } .vlz-blog-bar__search .vlz-blog-search-autocomplete { max-width: none; } .vlz-blog-bar__search .vlz-blog-search-form { position: relative; max-width: none; gap: 0; } /* Owner Correction Round 6 — Blog Bar visual: the compact search field (this selector only — the Search page's own large header/no-results forms reuse the same `vlz_blog_render_search_form()` markup but are NOT `.vlz-blog-bar__search` and are intentionally untouched) becomes a rounded pill with the submit button turned into a small icon inside it, instead of the full-width blue "بحث" button. No markup change — button text is visually hidden, an icon is drawn with a CSS mask on ::before. */ /* BLOG BAR — FINAL CORRECTION + CLOSURE §8/§9: the compact search field needs a genuinely visible border on every surface/viewport, not contrast from the dark band alone. Resting border is now the existing `--vlz-color-border-strong` slate/muted-blue token (was `--vlz-color-border`, the near-invisible pale token, previously left this field with no real edge below the old Desktop- only 768px override) unconditionally — Desktop, Tablet, and the Mobile open-panel copy of this same input all resolve to one consistent 1px border, no new hex introduced. */ .vlz-blog-bar__search .vlz-blog-search-form input { padding: .55rem 2.5rem .55rem .9rem; border-radius: 999px; border: 1px solid var(--vlz-color-border-strong); background: var(--vlz-color-surface); box-shadow: none; } .vlz-blog-bar__search .vlz-blog-search-form input:focus-visible { border-color: var(--vlz-color-primary); outline-offset: 1px; } .vlz-blog-bar__search .vlz-blog-search-form button[type="submit"] { position: absolute; inset-inline-end: .2rem; inset-block: .2rem; inline-size: 2.1rem; block-size: 2.1rem; padding: 0; border-radius: 50%; background: transparent; color: var(--vlz-color-text-muted); font-size: 0; line-height: 0; } .vlz-blog-bar__search .vlz-blog-search-form button[type="submit"]:hover, .vlz-blog-bar__search .vlz-blog-search-form button[type="submit"]:focus-visible { color: var(--vlz-color-primary); background: var(--vlz-color-primary-soft); } .vlz-blog-bar__search .vlz-blog-search-form button[type="submit"]::before { content: ""; display: block; inline-size: 1.05rem; block-size: 1.05rem; margin: auto; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm9 16-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm9 16-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat; } .vlz-blog-bar__toggle { display: none; } /* Legacy-Referenced Visual Correction (Blog Bar task): live-inspected on `legacy.vlinzza.com` (Blog Home + Category, Desktop 1440x900) via Playwright — the Blog Bar there is a dark navy band (`rgb(42, 57, 83)`) with white nav text and a thin white underline marking the active item. `#2a3953` (`--vlz-color-ink-soft`) is an EXACT match for that sampled colour — already an existing VLINZZA dark-surface token, not a new value — so no literal hex is introduced here. Legacy itself renders this as a full-bleed Elementor section; Rebuild keeps its own existing contained 1240px shell (`.vlz-blog-archive`/`.vlz-blog-index`/`.vlz-blog-single-nav`, all untouched) and turns `.vlz-blog-bar` into a self-contained rounded band inside it instead — visual colour/contrast result only, no Elementor markup/classes copied, no layout/grid change (§16 DO NOT TOUCH). */ .vlz-blog-bar { background: var(--vlz-color-ink-soft); border-radius: .75rem; } .vlz-blog-bar__row { padding: .85rem 1.25rem; } .vlz-blog-bar .vlz-blog-category-nav a, .vlz-blog-bar .vlz-blog-category-nav summary { color: var(--vlz-color-text-invert); } .vlz-blog-bar .vlz-blog-category-nav a:hover, .vlz-blog-bar .vlz-blog-category-nav summary:hover { color: var(--vlz-color-accent); } .vlz-blog-bar .vlz-blog-category-nav a:focus-visible, .vlz-blog-bar .vlz-blog-category-nav summary:focus-visible { outline-color: var(--vlz-color-focus-invert); } .vlz-blog-bar .vlz-blog-category-nav details[open] > summary { color: var(--vlz-color-accent); } /* Active state: Legacy marks the active item with a thin white underline at regular (400) weight, not a bold/coloured label — matched here with the same `--vlz-color-text-invert` token instead of a new colour. */ .vlz-blog-bar .vlz-blog-category-nav a[aria-current="page"], .vlz-blog-bar .vlz-blog-category-nav summary[aria-current="page"] { color: var(--vlz-color-text-invert); font-weight: 400; border-block-end-color: var(--vlz-color-text-invert); } /* The "كل الموضوعات" dropdown panel (`details > div`) keeps its own existing white surface (line 46 above) — it is a separate popover, not part of the dark band's own text colour contract. Bug fix (2026-09-11): the popover links are still `.vlz-blog-category-nav a` descendants, so the dark-band rule directly above (`--vlz-color-text-invert`, white) was winning on them too — white text on the popover's own white surface (line 46). These four rules re-scope just `details > div a` back to the same dark-on-light colour contract the non-Bar popover already uses (lines 39/41-43/47 above), at (0,2,3) specificity — one type more than the (0,2,1)/(0,3,1) dark-band rules above and below, so no `!important` is needed. */ .vlz-blog-bar .vlz-blog-category-nav details > div a { color: var(--vlz-color-text); } .vlz-blog-bar .vlz-blog-category-nav details > div a:hover { color: var(--vlz-color-primary); } .vlz-blog-bar .vlz-blog-category-nav details > div a:focus-visible { outline-color: var(--vlz-color-focus); } .vlz-blog-bar .vlz-blog-category-nav details > div a[aria-current="page"] { color: var(--vlz-color-primary); font-weight: 700; } @media (max-width: 767.98px) { .vlz-blog-bar__row { gap: 0; min-block-size: 2.75rem; } .vlz-blog-bar__context { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; font-size: var(--vlz-text-sm, .95rem); } /* Owner Correction — Blog Nav final micro-correction §Mobile Context Label: the context label is now a real link (see index.php) where a safe destination exists (Blog Home, Category, Single Post's own category) — plain text otherwise (unchanged). No colour/size change from the previous text-only version; only the default anchor underline is reset and a hover/focus state added to match the rest of the Blog Bar nav. Legacy-Referenced Visual Correction: colour retargeted from `--vlz-color-heading` to `--vlz-color-text-invert`/`--vlz-color-accent`/ `--vlz-color-focus-invert` because the closed Mobile bar now sits on the same dark `--vlz-color-ink-soft` band as Desktop (previously transparent, so the dark heading colour still read against the page). FULL CANONICAL LOCAL/APP THEME PARITY CLOSURE (2026-09-06): the resting colour is qualified with the `.vlz-blog-bar` ancestor (0,2,0) — same pattern already used on the 404 Services links and Single Post TOC — because when this label renders as an `` (a real link target exists), the sitewide Elementor kit's `.elementor-kit-9 a` rule ((0,1,1), a class + a type selector) out-specifies a bare `.vlz-blog-bar__context` color declaration ((0,1,0)) and overwrites the inverted colour with Elementor's own link colour on Mobile only (the `` fallback, used when no link target exists, was never affected). No `!important`, no Elementor edit, no markup change. */ .vlz-blog-bar .vlz-blog-bar__context { color: var(--vlz-color-text-invert); } .vlz-blog-bar__context { text-decoration: none; } .vlz-blog-bar .vlz-blog-bar__context:hover, .vlz-blog-bar .vlz-blog-bar__context:focus-visible { color: var(--vlz-color-accent); } .vlz-blog-bar__context:focus-visible { outline: 3px solid var(--vlz-color-focus-invert); outline-offset: 3px; border-radius: .2rem; } .vlz-blog-bar .vlz-blog-category-nav, .vlz-blog-bar__search { display: none; order: 3; flex-basis: 100%; } .vlz-blog-bar__search { order: 1; } .vlz-blog-bar__toggle { display: inline-flex; align-items: center; justify-content: center; order: 2; flex: 0 0 auto; inline-size: 2.5rem; block-size: 2.5rem; border: 0; border-radius: 50%; background: transparent; color: var(--vlz-color-text-invert); padding: 0; cursor: pointer; } .vlz-blog-bar__toggle:focus-visible { outline: 3px solid var(--vlz-color-focus-invert); outline-offset: 2px; } .vlz-blog-bar__icon-close { display: none; } .vlz-blog-bar__toggle[aria-expanded="true"] .vlz-blog-bar__icon-search { display: none; } .vlz-blog-bar__toggle[aria-expanded="true"] .vlz-blog-bar__icon-close { display: block; } /* Owner Correction Round 6 — Blog Bar visual: the open panel gets a branded background (the existing `--vlz-color-primary-soft` token, already used elsewhere as a brand tint) so it reads as a distinct panel over the Blog Bar, not a second copy of the page/site Header. Updated by the Legacy-Referenced Visual Correction: the closed bar no longer stays plain/transparent — it now carries its own dark `--vlz-color-ink-soft` band (see the rule above this media query) — so this light open-panel background stays a deliberate, distinct light panel over a dark closed bar, not a light-over-light non-change. */ .vlz-blog-bar.is-open .vlz-blog-bar__row { align-items: flex-start; background: var(--vlz-color-primary-soft); border-radius: 1rem; padding: .75rem .85rem; } .vlz-blog-bar.is-open .vlz-blog-bar__context { display: none; } .vlz-blog-bar.is-open .vlz-blog-bar__search { display: block; order: 1; flex: 1 1 0; min-width: 0; margin-block-end: .6rem; } .vlz-blog-bar.is-open .vlz-blog-bar__toggle { order: 2; margin-inline-start: .4rem; margin-block-end: .6rem; } .vlz-blog-bar.is-open .vlz-blog-category-nav { display: flex; flex-direction: column; align-items: stretch; order: 3; flex-basis: 100%; gap: .1rem; max-height: 55vh; overflow-y: auto; } /* Legacy-Referenced Visual Correction: the open panel keeps its own pre-existing light `--vlz-color-primary-soft` background (unchanged, see the `.is-open .vlz-blog-bar__row` rule above) even though the closed bar is now dark — so its nav links need their own dark-on-light colour contract here, overriding the new dark-band default above via the higher `.is-open` specificity. */ .vlz-blog-bar.is-open .vlz-blog-category-nav a, .vlz-blog-bar.is-open .vlz-blog-category-nav summary { min-block-size: 2.75rem; padding-block: .6rem; padding-inline: .25rem; border-block-end: 0; color: var(--vlz-color-text); } .vlz-blog-bar.is-open .vlz-blog-category-nav a:hover, .vlz-blog-bar.is-open .vlz-blog-category-nav summary:hover { color: var(--vlz-color-primary); } .vlz-blog-bar.is-open .vlz-blog-category-nav a:focus-visible, .vlz-blog-bar.is-open .vlz-blog-category-nav summary:focus-visible { outline-color: var(--vlz-color-focus); } .vlz-blog-bar.is-open .vlz-blog-category-nav a[aria-current="page"], .vlz-blog-bar.is-open .vlz-blog-category-nav summary[aria-current="page"] { border-block-end: 0; background: var(--vlz-color-surface); border-radius: .5rem; color: var(--vlz-color-primary); font-weight: 700; } .vlz-blog-bar.is-open .vlz-blog-category-nav details > div { position: static; margin-block-start: 0; padding-inline-start: 1rem; border: 0; box-shadow: none; background: transparent; } /* While typing, the reused Autocomplete results replace the category list in the same panel; clearing the query restores it. Pure CSS — `blog-search-autocomplete.js` already owns `[hidden]` on the list. */ .vlz-blog-bar.is-open .vlz-blog-bar__row:has(.vlz-blog-search-suggestions:not([hidden])) .vlz-blog-category-nav { display: none; } .vlz-blog-bar.is-open .vlz-blog-search-suggestions { position: static; margin-block-start: .5rem; max-height: 50vh; border: 0; background: var(--vlz-color-surface); border-radius: .75rem; box-shadow: none; } } /* Visual Correction Round 1 (2026-09-05): root cause of the Single Post Blog Bar looking near-full-page-width next to Blog Home/Category's own visibly contained bar — `vlz_blog_render_single_post_navigation()` echoes this wrapper directly onto `generate_before_main_content`, never inside the `.vlz-blog-archive`/`.vlz-blog-index` shell (each `max-width:1240px; margin-inline:auto;`, see above) that wraps the other five surfaces' own `.vlz-blog-archive__nav`/`.vlz-blog-bar`. Single Post has no such shell, so this wrapper's own `max-width:100%` resolved to the full unconstrained `
` width. Fix: give this wrapper the identical container contract (same literal 1240px + margin-inline:auto + the same inline gutter already used by `.vlz-blog-archive`/`.vlz-blog-index`) so Single Post's Blog Bar matches their width/alignment exactly — Blog Home/Category/Tag/Author/ Search are untouched, this selector is Single-Post-only. See the task report for whether the shared `.vlz-blog-bar .vlz-blog-category-nav` flex rule needed a follow-up change after this container fix. */ /* Legacy-Referenced Visual Correction: the `border-block-end` + trailing `padding-block-end` this wrapper used to carry were compensating for a borderless/transparent `.vlz-blog-bar` — now that the bar itself is a self-contained rounded dark band (see blog-bar background rules above), an outer border here would double the separation the band already provides on its own, so both are dropped; the bottom margin (spacing to the entry header that follows) is kept unchanged. */ .vlz-blog-single-nav { max-width: 1240px; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); margin-block: 0 clamp(1.5rem, 3vw, 2.5rem); } .vlz-blog-single-nav .vlz-blog-category-nav { margin-block-start: 0; } @media (max-width: 600px) { .vlz-blog-search-form { align-items: stretch; flex-direction: column; } }