/* =====================================================================
   stacks-site-header.css — the full Stacks logo in the phone header, at rest
   ---------------------------------------------------------------------
   Enqueued on every front-end page by site-header.php. It overrides the
   Divi Theme Builder header, which lives in the WordPress database rather
   than in this repo; this file is the plugin's patch on top of it.

   THE BUG (David, on his phone, 2026-10-22): at the top of every page except
   the homepage, the header showed only the purple speech-bubble mark. The
   "Stacks" wordmark appeared only after scrolling a little.

   HOW THE HEADER SWAPS ITS LOGO (read off the live site, 2026-10-22)
   - Each header row holds two image modules, classed `white-logo` and
     `black-logo`. The Stacks child theme's style.css shows `.white-logo` at
     rest and `.black-logo` once the header has `.menu-shrink`.
   - `.menu-shrink` is added by an inline jQuery handler in the site's <head>
     when the page is scrolled more than 50px, and removed below that. So
     "at rest" means: the header (`.menu-custom`) does NOT have `.menu-shrink`.
   - The header has two rows. The desktop row (`et_pb_row_1_tb_header`) is
     hidden by Divi at ≤980px; the phone row (`et_pb_row_2_tb_header`) is
     hidden at ≥981px. Divi's breakpoint, not ours, so the query below copies
     it exactly.

   THE TWO HEADER LAYOUTS (Theme Builder layout id, from the
   `et-builder-module-design-tb-<id>-…` style tag on each page)
   - Layout 860 — the homepage only. Transparent at rest, over a dark teal
     hero. The white wordmark at rest is INTENDED there: "on the home page it
     starts with white stacks and then turns black on scroll" (David).
     Measured at 375px AND 1440px: wordmark drawn white on the dark hero.
   - Layout 6625 — every other page (checked: both article types, /articles,
     /about-us, /instructions-to-authors/, /peer-review/, /blog, /societies/,
     /special-issues/, /two-pager/, the policy pages, the 404; the search page
     carries no layout id but has the same logo arrangement). It sets
     `.menu-custom.menu-home { background-color: white !important }`, so its
     header is white at rest and scrolled. Its DESKTOP row matches that: the
     black wordmark sits in BOTH slots. Its PHONE row does not: the
     `white-logo` slot still holds the white wordmark (StacksJournal_logo.png,
     wp-image-748), drawn white-on-white. That is the whole bug.

   THE FIX, AND WHAT IT IS KEYED ON
   At ≤980px, at rest, on a header whose `white-logo` slot already holds the
   BLACK wordmark somewhere (layout 6625's desktop row), show `.black-logo`
   instead of `.white-logo` — which is exactly what the theme itself does once
   you scroll. The header is telling us its own background is light; we make
   the phone row agree with the desktop row.

   Rejected alternatives, and why:
   - `body:not(.home)`. Equivalent today (only the homepage uses layout 860),
     but it is a page key: assign the transparent header to a second page with
     a dark hero and that page would get a black wordmark on dark. The `:has()`
     key follows the header, whichever page it is on.
   - Swapping the image inside Divi (wp-admin → Theme Builder → layout 6625 →
     phone row → first image → StacksJournal_black_logo.png). That is the
     real fix and makes this file a harmless no-op. It was out of reach for
     this change: no edits to the live site's Divi settings from a branch.
     If someone makes that edit, this file can be deleted.
   - Keying on `wp-image-822` (the black logo's attachment class) instead of
     the file name. Same effect today; the file name says what it means
     without a lookup in the media library.

   ⚠️ WHAT THIS DOES NOT TOUCH (measured before and after, see the commit)
   - Desktop (≥981px): outside the media query. Byte-for-byte as before.
   - The homepage at any width: its `white-logo` slots hold the white
     wordmark, so `:has()` does not match and nothing here applies.
   - The scrolled state: every rule requires `:not(.menu-shrink)`, so once
     the theme adds `.menu-shrink` its own rules are the only ones in play.
     (On article pages the whole header hides on scroll — the plugin's
     sticky nav on our articles, `.project-template-default .menu-shrink`
     on the legacy ones. That is existing behaviour and is left alone.)

   If `:has()` is unsupported (Safari before 15.4, 2022), the rules are
   dropped whole and the header behaves exactly as it did before.
   ===================================================================== */

@media only screen and (max-width: 980px) {
    /* Specificity: these beat the child theme's
       `.menu-custom.menu-home .white-logo { display: block }` (0,3,0) on
       specificity alone — no !important needed, and none used, so Divi's own
       "hide on phone" switches on these modules would still win. */
    .menu-custom:not(.menu-shrink):has(.white-logo img[src*="StacksJournal_black_logo"]) .white-logo {
        display: none;
    }
    .menu-custom:not(.menu-shrink):has(.white-logo img[src*="StacksJournal_black_logo"]) .black-logo {
        display: block;
    }
}