/*
 * LemonX Templates — frontend safety net.
 *
 * Injected on the public site whenever a Header/Footer template is active.
 * Prevents the three most common third-party CSS collisions that have bitten
 * us in the wild:
 *
 *  1) Themes (Astra, GeneratePress) and Tailwind Preflight set
 *     `svg { display: block; }` on every SVG. When our template markup
 *     includes an icon SVG that only declares `viewBox` (no width/height),
 *     the browser treats it as a replaced element and stretches it to fill
 *     the parent (which is 100vw). This produces a giant phone / envelope
 *     icon eating half the page. We reset to `inline-block` and give
 *     unsized SVGs a 1em fallback via `:where()` (zero specificity, so any
 *     Tailwind `w-*` / `h-*` / `size-*` utility wins).
 *
 *  2) Theme wrappers sometimes cap body children at a `max-width: 1200px`.
 *     A Header template authored to render edge-to-edge will get squeezed.
 *     We force the scope containers to full viewport width using the
 *     classic negative-margin full-bleed trick.
 *
 *  3) Themes set `img { max-width: none; height: auto; }`, or
 *     `img { max-width: 100%; height: unset; }`, either of which can
 *     distort logos. We normalise to the sane default.
 */

[data-lemonx-scope="header"],
[data-lemonx-scope="footer"] {
    display: block;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

[data-lemonx-scope="header"] :where(svg),
[data-lemonx-scope="footer"] :where(svg) {
    display: inline-block;
    vertical-align: middle;
}

/*
 * Fallback dimensions ONLY for SVGs that declare no size whatsoever.
 * `:where()` has zero specificity, so any Tailwind utility
 * (w-*, h-*, size-*) or inline style overrides it.
 */
[data-lemonx-scope="header"] :where(svg:not([width]):not([height]):not([style*="width"]):not([style*="height"]):not([class*="w-"]):not([class*="h-"]):not([class*="size-"])),
[data-lemonx-scope="footer"] :where(svg:not([width]):not([height]):not([style*="width"]):not([style*="height"]):not([class*="w-"]):not([class*="h-"]):not([class*="size-"])) {
    width: 1em;
    height: 1em;
}

[data-lemonx-scope="header"] :where(img),
[data-lemonx-scope="footer"] :where(img) {
    max-width: 100%;
    height: auto;
}