/*
 * The site's header and footer on a page of the site that is NOT a builder page (the public blog,
 * resources/views/public/partials/site-chrome/head.blade.php links this file).
 *
 * The header and footer are builder sections: they need the builder's utility classes and the
 * reset the builder page gets from the full Tailwind build (resources/views/public/funnel.blade.php).
 * That reset would restyle the HOST page too (headings, lists, margins everywhere), so the host
 * loads vendor/tailwind/tailwind-noreset.min.css and this file applies Tailwind's reset ONLY inside
 * the two containers and the popup their buttons open (public/partials/site-chrome/popup.blade.php),
 * at zero specificity (`:where`), so every builder rule and every Site CSS rule wins over it. Keep
 * the values in step with Tailwind's preflight.
 */

/* The page body as the builder page has it (Tailwind's base). Linked BEFORE the Site CSS, so a
   site's own `body { font-family: ... }` still wins and reaches the header and footer. */
body {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.5;
}

:where(#funnel-header, #funnel-footer, [data-kq-site-popup]),
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) *,
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) *::before,
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) *::before,
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) *::after { --tw-content: ''; }
/* The builder page's body is `antialiased`. */
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(hr) { height: 0; color: inherit; border-top-width: 1px; }
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(a) { color: inherit; text-decoration: inherit; }
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(b, strong) { font-weight: bolder; }
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(small) { font-size: 80%; }
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(table) { text-indent: 0; border-color: inherit; border-collapse: collapse; }
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(button, input, optgroup, select, textarea) {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(button, select) { text-transform: none; }
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(button, input[type=button], input[type=reset], input[type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: 0; }
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(fieldset, legend) { padding: 0; }
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(ol, ul, menu) { list-style: none; margin: 0; padding: 0; }
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(textarea) { resize: vertical; }
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(input, textarea)::placeholder { opacity: 1; color: #9ca3af; }
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(button, [role=button]) { cursor: pointer; }
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(img, svg, video, canvas, audio, iframe, embed, object) { display: block; vertical-align: middle; }
:where(#funnel-header, #funnel-footer, [data-kq-site-popup]) :where(img, video) { max-width: 100%; height: auto; }

/* The popup a button in the site's header or footer opens: the builder page's overlay and card
   (funnel.blade.php, "Popup Modal Styles"), and its close button (Tailwind utilities there:
   sticky top-4 right-4 float-right z-10 bg-white rounded-full p-2 shadow-lg hover:bg-gray-100,
   an icon w-6 h-6 text-gray-600). */
.popup-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.popup-overlay[hidden] { display: none; }
.popup-content {
    background: transparent;
    border-radius: 0.5rem;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
}
#popup-content {
    background: white;
    border-radius: 0.5rem;
    min-height: 200px;
    position: relative;
}
.popup-content::-webkit-scrollbar { width: 10px; }
.popup-content::-webkit-scrollbar-track { background: #f1f1f1; }
.popup-content::-webkit-scrollbar-thumb { background: #888; border-radius: 5px; }
.popup-content::-webkit-scrollbar-thumb:hover { background: #555; }
.kq-site-popup-close {
    position: sticky;
    top: 1rem;
    right: 1rem;
    float: right;
    z-index: 10;
    display: block;
    background-color: #fff;
    border-radius: 9999px;
    padding: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    color: #4b5563;
    line-height: 0;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.kq-site-popup-close:hover { background-color: #f3f4f6; }
.kq-site-popup-close svg { width: 1.5rem; height: 1.5rem; }
/* The builder page fades the overlay in and scales the card from 95% (Alpine x-transition, 200ms). */
.popup-overlay.is-open { animation: kq-site-popup-fade 0.2s ease-out; }
.popup-overlay.is-open .popup-content { animation: kq-site-popup-in 0.2s ease-out; }
@keyframes kq-site-popup-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kq-site-popup-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .popup-overlay.is-open,
    .popup-overlay.is-open .popup-content { animation: none; }
}

/* Hide on specific devices: the builder's breakpoints (funnel.blade.php). */
@media (min-width: 1025px) { .hide-on-desktop { display: none !important; } }
@media (min-width: 641px) and (max-width: 1024px) { .hide-on-tablet { display: none !important; } }
@media (max-width: 640px) { .hide-on-mobile { display: none !important; } }