/*
Theme Name: Hello Elementor Child
Theme URI: https://bizbods.com
Description: Child theme for Hello Elementor, customized for Biz Bods. Implements PP Neue Montreal typography lock and Biz Bods design tokens (colors, container widths, breakpoints, spacing).
Author: Biz Bods
Author URI: https://bizbods.com
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* BIZ BODS CHANGE - 2026-05-17: PP Neue Montreal @font-face declarations
   What this does: Registers the three licensed weights (Light 300, Regular 400, Semibold 600) of the brand typeface, sourced from /fonts/ at the document root.
   Why we need it: design.md §1 typography lock — PP Neue Montreal is the only typeface allowed on Biz Bods. No italics, no Bold 700 — those weights are not licensed.
   Why /fonts/ root: Hostinger applies CORS / permission restrictions to /wp-content/themes/ that have blocked font loads on this server, and Media Library paths are date-stamped and fragile. /public_html/fonts/ (served as /fonts/) is the only verified-working path on this host. See design.md §1. */
@font-face {
    font-family: "PP Neue Montreal";
    src: url("/fonts/PPNeueMontreal-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PP Neue Montreal";
    src: url("/fonts/PPNeueMontreal-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PP Neue Montreal";
    src: url("/fonts/PPNeueMontreal-Semibold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* BIZ BODS CHANGE - 2026-05-17: Body typography defaults
   What this does: Sets PP Neue Montreal as the body font with system fallbacks for FOIT/FOUT safety. Disables font synthesis so browsers never fake italic or bold weights we haven't licensed.
   Why we need it: design.md §1 canonical body CSS plus the no-faux-italic/no-faux-bold rule from the typography lock. */
body {
    font-family: "PP Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    font-synthesis: none;
    overflow-x: clip;
}

/* BIZ BODS CHANGE - 2026-05-17: Brand color and layout tokens
   What this does: Exposes the Biz Bods palette, container widths, padding scale, vertical rhythm, and breakpoints as CSS custom properties for use anywhere on the site.
   Why we need it: Single source of truth for design.md §2 (color system) and §11 (layout tokens). Any Elementor Custom CSS, child theme rule, or future component can reference var(--name) instead of hard-coding values. */
:root {
    /* Brand palette */
    --cerise: #CF1A72;
    --vermilion: #EF4537;
    --orange: #F9A01F;
    --slate-grey: #424242;
    --primary-text: #000000;
    --surface: #FFFFFF;

    /* Container widths */
    --bb-container-max: 1280px;
    --bb-reading-max: 720px;
    --bb-narrow-max: 960px;

    /* Responsive side padding */
    --bb-pad-mobile: 20px;
    --bb-pad-tablet: 32px;
    --bb-pad-desktop: 64px;

    /* Vertical rhythm */
    --bb-section-space: clamp(64px, 8vw, 128px);

    /* Breakpoints — mirror Elementor's active_breakpoints */
    --bb-bp-mobile: 767px;
    --bb-bp-tablet: 991px;
    --bb-bp-laptop: 1199px;
    --bb-bp-desktop: 1200px;
}

/* BIZ BODS CHANGE - 2026-05-17: Dark mode palette swap
   What this does: Re-points the same brand token names to their dark-mode variants when the user's OS is set to dark.
   Why we need it: design.md §2 dark mode palette. Components reference --cerise, --primary-text, etc. — they automatically adapt without per-component overrides. */
@media (prefers-color-scheme: dark) {
    :root {
        --cerise: #E83B89;
        --vermilion: #FF5B47;
        --orange: #FFB347;
        --slate-grey: #A0A0A0;
        --primary-text: #FFFFFF;
        --surface: #000000;
    }
}

/* BIZ BODS CHANGE - 2026-05-17: Canonical .bb-container utility
   What this does: Provides a reusable wrapper class that caps width at 1280px, applies the responsive side-padding scale (20/32/64px), and centers horizontally. Modifier classes narrow the cap for reading columns (720px) and forms (960px).
   Why we need it: design.md §11 canonical class. Used anywhere we need consistent gutters without re-doing the math in every Elementor container. */
.bb-container {
    width: 100%;
    max-width: var(--bb-container-max);
    margin-inline: auto;
    padding-inline: var(--bb-pad-mobile);
}

@media (min-width: 768px) {
    .bb-container {
        padding-inline: var(--bb-pad-tablet);
    }
}

@media (min-width: 1200px) {
    .bb-container {
        padding-inline: var(--bb-pad-desktop);
    }
}

.bb-container--reading {
    max-width: var(--bb-reading-max);
}

.bb-container--narrow {
    max-width: var(--bb-narrow-max);
}