/* ============================================================================
   Witzzart typography + design-system layer
   Source of truth: Readme.txt
     font-family : 'Poppins', sans-serif
     font-size   : 0.875rem (14px) body, 12px small, 8px micro
     colors      : #ff3131 red, #222222 text, #6A6A6A grey
   Loaded LAST in the shared layout (and in the stand-alone pages), so it only
   fills the gaps: any component class with its own, more specific rule still wins.
   Tokens that already exist in PageCSS/Workshop/Generic.css (--ff-primary, --fs-*,
   --fw-*, --color-*) are reused and given safe fallbacks here.
   ============================================================================ */

/* ---- 1. Self-hosted Poppins ------------------------------------------------
   Served from this site, so text renders the same on a host with no access to
   fonts.googleapis.com (blocked network, ad-blocker, CSP, offline, corporate proxy).
   Weights 300/400/500/700 ship locally; 600/800 still come from the Google
   stylesheet when reachable and otherwise snap to the nearest local weight (700). */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Poppins-Light.woff") format("woff"); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Poppins-Regular.woff") format("woff"); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Poppins-Medium.woff") format("woff"); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Poppins-Bold.woff") format("woff"); }

/* ---- 2. Tokens ------------------------------------------------------------- */
:root {
    --ff-primary: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Readme.txt: base 0.875rem, small 12px, micro 8px */
    --wz-fs-body: 0.875rem;
    --wz-fs-small: 0.75rem;
    --wz-fs-micro: 0.5rem;

    /* Heading scale (fluid between phone and desktop) */
    --wz-fs-h1: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    --wz-fs-h2: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
    --wz-fs-h3: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
    --wz-fs-h4: 1.125rem;
    --wz-fs-h5: 1rem;
    --wz-fs-h6: 0.875rem;

    --wz-fw-body: 400;
    --wz-fw-medium: 500;
    --wz-fw-heading: 600;
    --wz-lh-body: 1.5;
    --wz-lh-heading: 1.25;

    --wz-text: #222222;
    --wz-text-muted: #6A6A6A;
    --wz-red: #ff3131;
}

/* ---- 3. Base --------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    font-family: var(--ff-primary);
    font-size: var(--wz-fs-body);
    font-weight: var(--wz-fw-body);
    line-height: var(--wz-lh-body);
    color: var(--wz-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Form controls and buttons do not inherit the page font by default in browsers. */
button, input, select, textarea, optgroup { font-family: inherit; }

/* ---- 3b. No italics anywhere ------------------------------------------------
   One upright style site-wide: covers <em>, <i> text, <cite>, placeholders, inline
   style="font-style:italic", .fst-italic and component CSS. Icon fonts are unaffected
   (they are glyph fonts, not styled by font-style). Poppins italics are not shipped,
   so without this the browser would fake a slanted style. */
*, *::before, *::after,
em, i, cite, dfn, var, address, blockquote, figcaption, .fst-italic, .fst-italic * { font-style: normal !important; }
::placeholder, ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder { font-style: normal !important; }

/* ---- 4. Headings: one style per level, on every page ------------------------ */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--ff-primary);
    font-weight: var(--wz-fw-heading);
    line-height: var(--wz-lh-heading);
    color: var(--wz-text);
    letter-spacing: normal;
    overflow-wrap: break-word;
}
h1, .h1 { font-size: var(--wz-fs-h1); }
h2, .h2 { font-size: var(--wz-fs-h2); }
h3, .h3 { font-size: var(--wz-fs-h3); }
h4, .h4 { font-size: var(--wz-fs-h4); }
h5, .h5 { font-size: var(--wz-fs-h5); }
h6, .h6 { font-size: var(--wz-fs-h6); }

/* ---- 4b. Heading consistency (enforced) ---------------------------------------
   Page stylesheets give headings their own weights (500/750/800), negative letter-spacing
   (tuned for the old Georgia serif) and sizes. These rules make every heading, and every
   element whose class says "title"/"heading", use one weight and normal tracking, one size
   per level, and one hero style. Colour is deliberately NOT forced (headings on dark cards
   stay readable). */
html body :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
html body :is(h1, h2, h3, h4, h5, h6)[class],
html body [class*="title"]:not([class*="subtitle"]):not([class*="sub-title"]):not([class*="eyebrow"]):not([class*="breadcrumb"]),
html body [class*="heading"]:not([class*="subheading"]) {
    font-family: var(--ff-primary) !important;
    font-weight: var(--wz-fw-heading) !important;
    letter-spacing: normal !important;
    font-style: normal !important;
}
/* Accent words inside headings: upright, same weight, one accent colour (Readme red) */
html body :is(h1, h2, h3) em { font-weight: inherit !important; font-style: normal !important; color: var(--wz-red) !important; }

/* Page title (H1): one size site-wide, including the event/experience title */
html body h1:not(.wz-display),
html body h1[class]:not(.wz-display),
html body .h1:not(.wz-display),
html body .ad-title { font-size: var(--wz-fs-h1) !important; line-height: var(--wz-lh-heading) !important; }

/* Section titles (e.g. "About this event", "What to bring & provided") = H2 size */
html body :is(.ad-section-title, [class*="section-title"], [class*="sec-title"])[class][class]:not(h1) {
    font-size: var(--wz-fs-h2) !important; line-height: var(--wz-lh-heading) !important;
}

/* Hero display headline: the same style on the Experiences home and the Artwork store */
:root { --wz-fs-display: clamp(2.25rem, 1.2rem + 3.6vw, 4.25rem); }
html body .wtz-intro h1,
html body .aw-store-shell .wz30-hero h2,
html body .artist-builder .hero h1 {
    font-size: var(--wz-fs-display) !important;
    line-height: 1.08 !important;
    letter-spacing: -.01em !important;
    color: var(--wz-text);
}

/* ---- 5. Body copy ---------------------------------------------------------- */
p, li, dd, dt, address, blockquote, figcaption { font-family: var(--ff-primary); }
p { font-size: var(--wz-fs-body); line-height: 1.6; overflow-wrap: break-word; }
small, .small { font-size: var(--wz-fs-small); }
.text-muted, .text-body-tertiary, .text-body-secondary { color: var(--wz-text-muted) !important; }
strong, b, .fw-bold { font-weight: 600; }

/* ---- 6. Navigation, buttons, forms, tables, cards, footer, modals ----------- */
.navbar, .nav-link, .navbar-nav .nav-link, .dropdown-menu, .dropdown-item,
.breadcrumb, .pagination, .page-link, .tab-pane, .nav-tabs .nav-link, .nav-pills .nav-link {
    font-family: var(--ff-primary);
}
.nav-link, .dropdown-item, .navbar-nav .nav-link { font-size: var(--wz-fs-body); font-weight: var(--wz-fw-medium); }

.btn, button.btn, a.btn, input[type="submit"], input[type="button"] {
    font-family: var(--ff-primary);
    font-size: var(--wz-fs-body);
    font-weight: var(--wz-fw-medium);
    line-height: 1.4;
    letter-spacing: normal;
}
.btn-sm, .btn-group-sm > .btn { font-size: var(--wz-fs-small); }

.form-control, .form-select, .form-check-label, .input-group-text, .select2-container, .select2-results__option {
    font-family: var(--ff-primary);
    font-size: var(--wz-fs-body);
}
label, .form-label { font-family: var(--ff-primary); font-size: var(--wz-fs-body); font-weight: var(--wz-fw-medium); color: var(--wz-text); }
.form-text, .invalid-feedback, .valid-feedback, .field-validation-error, .text-danger.small { font-size: var(--wz-fs-small); }
::placeholder { font-family: var(--ff-primary); color: var(--wz-text-muted); opacity: .8; }

table, .table, .table th, .table td, .dataTable { font-family: var(--ff-primary); font-size: var(--wz-fs-body); }
.table th { font-weight: 600; color: var(--wz-text); }

.card, .card-body, .card-title, .card-text, .modal, .modal-title, .modal-body, .modal-footer,
.offcanvas, .toast, .badge, .alert, .tooltip, .popover, footer, .footer, .accordion-button {
    font-family: var(--ff-primary);
}
.modal-title, .card-title, .offcanvas-title { font-weight: var(--wz-fw-heading); color: var(--wz-text); }
.badge { font-weight: var(--wz-fw-medium); }
footer, .footer { font-size: var(--wz-fs-body); }
footer a, .footer a { font-weight: var(--wz-fw-body); }

/* ---- 7. Icons: make sure icon fonts are never overridden by the text font ---- */
.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before { font-family: "bootstrap-icons" !important; }

/* ---- 8. Responsive hardening ------------------------------------------------ */
img, video { max-width: 100%; }
img, video { height: auto; }
pre, code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
table { max-width: 100%; }

/* 16px inputs on phones stop iOS Safari zooming the page when a field is focused. */
@media (max-width: 767.98px) {
    input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select { font-size: 16px; }
}

/* ============================================================================
   Page frame: the Experiences home, the Artwork store and Talent now start at the same
   distance below the fixed header and share one content width / side gutter.
   (Before: ~64px of space above the Experiences hero, ~6px above the Artwork hero, and
   different container widths: 1440/1600 and 15px vs 32px gutters.)
   Desktop only (>=992px, where the fixed desktop header is shown); phones keep their layout.
   ============================================================================ */
@media (min-width: 992px) {
    :root {
        --wz-header-h: 72px;                       /* fixed desktop header */
        --wz-page-gap: 24px;                       /* space between header and first block */
        --wz-page-max: 1600px;
        --wz-page-pad: clamp(16px, 2.4vw, 32px);
        --wz-hero-gap-below: 40px;
        --wz-hero-radius: 28px;
    }
    /* One top offset for the three sections. The offset sits INSIDE each section (not on the
       shared #main-content), so each section's own background colour fills the strip under the header. */
    :root { --wz-top: calc(var(--wz-header-h) + var(--wz-page-gap) - 3rem); }   /* 3rem = theme's .pt-7 on #main-content */
    html body .hero-wrapper { padding-top: var(--wz-top) !important; }
    html body .aw-store-shell { padding-top: var(--wz-top) !important; }
    html body .tz47-nav { margin-top: var(--wz-top) !important; }
    html body .hero-wrapper .wtz-intro { margin-top: 0 !important; margin-bottom: var(--wz-hero-gap-below) !important; border-radius: var(--wz-hero-radius) !important; }
    html body .aw-store-shell .aw-store-main,
    html body .aw-store-shell .aw-store-main .wz-gallery-shell { padding-top: 0 !important; }
    html body .aw-store-shell .wz30-hero { margin-top: 0 !important; margin-bottom: var(--wz-hero-gap-below) !important; border-radius: var(--wz-hero-radius) !important; }
    /* Same width and gutter for the Experiences and Artwork pages */
    html body .hero-wrapper .airbnb-full-width-container,
    html body .airbnb-full-width-container.aw-store-main,
    html body .airbnb-full-width-container:has(#desktopEventsGrid) {
        max-width: var(--wz-page-max) !important;
        width: 100% !important;
        margin-inline: auto !important;
        padding-inline: var(--wz-page-pad) !important;
    }
    html body .aw-store-shell .aw-store-main .wz-gallery-shell { padding-inline: 0 !important; max-width: none !important; }
}

/* Phones / tablets: same 12px start below the header on all three sections */
@media (max-width: 991.98px) {
    html body .aw-store-shell .aw-store-main { padding-top: 12px !important; }
    html body .aw-store-shell .aw-store-main .wz-gallery-shell { padding-top: 0 !important; }
    html body .tz47-nav { margin-top: 12px !important; }
}