/**
 * PB Framework - Global Design System
 *
 * Pure design tokens, utilities, and base components.
 * NO structural layout (header/footer) defined here.
 *
 * Usage: Automatically loaded for all framework pages
 */

/* Font Imports - Variable Fonts for Performance
 * Playfair Display: Serif font for headings (400-900 weight range)
 * Inter: Sans-serif font for body text and UI (400-900 weight range)
 * Total: ~185KB (much smaller than loading individual font weights)
 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400..900&family=Inter:wght@400..900&display=swap');

/* ==========================================================================
   CANONICAL BREAKPOINTS
   These variables document the site-wide breakpoint system.

   IMPORTANT: CSS custom properties cannot be used inside @media queries.
   Use the literal pixel values below, and mark each media query with the
   corresponding variable name as a comment so the mapping stays explicit.

   Usage pattern:
     @media (max-width: 767px)  { ... } /* bp-mobile  * /
     @media (max-width: 1023px) { ... } /* bp-tablet  * /
     @media (min-width: 1024px) { ... } /* bp-desktop * /

   Tiers:
     bp-mobile   ≤ 767px   — phones, cover screens (Fold closed)
     bp-tablet   ≤ 1023px  — tablets, foldables (Fold open ~830px), small laptops
     bp-desktop  ≥ 1024px  — desktop and above (also the mobile-header threshold)
   ========================================================================== */
:root {
    --bp-mobile:  767px;
    --bp-tablet:  1023px;
    --bp-desktop: 1024px;

    /* Brand colours — global, available everywhere */
    --pb-gold:       #F6A722;   /* PerfectBee gold */
    --pb-navy:       #152f5e;   /* Deep navy */
    --pb-header-bg:  #2c3e5a;  /* Site header / hero nav background */
}

@layer pb-framework {
    /* ===================================
       CSS VARIABLES (Design Tokens)
       =================================== */
    .pb-framework {
        /* ===================================
           COLOR PALETTE REFERENCE
           Use semantic tokens below, not these directly
           Grayscale: ink → charcoal → slate → stone → silver → mist → cloud → fog → snow → white
           =================================== */

        /* Brand Colors (Semantic) */
        --color-primary: #F4C542;              /* Primary brand accent (honey gold) */
        --color-primary-hover: #d4a722;        /* Primary hover state */
        --color-primary-dark: #b8910a;         /* Primary dark variant */

        --color-secondary: #152f5e;            /* Secondary brand (navy blue) */
        --color-tertiary: #44597f;             /* Tertiary brand (light blue) */

        /* Text Colors (Semantic hierarchy) */
        --color-text-primary: #0a0a0a;         /* Headings, primary text (ink) */
        --color-text-secondary: #4a5568;       /* Body text, secondary content (stone) */
        --color-text-tertiary: #737373;        /* Meta, captions, subtle text (silver) */
        --color-text-disabled: #a3a3a3;        /* Disabled states (mist) */

        /* Background Colors */
        --color-bg-primary: #ffffff;           /* Main background (white) */
        --color-bg-secondary: #f5f5f5;         /* Alternate background (snow) */
        --color-bg-tertiary: #e5e5e5;          /* Tertiary background (fog) */
        --color-bg-dark: #1a1a1a;              /* Dark panels, hero sections (charcoal) */
        --color-bg-darker: #0a0a0a;            /* Darkest backgrounds (ink) */

        /* UI Colors */
        --color-border: #e5e7eb;               /* Standard borders, dividers */
        --color-border-light: #d4d4d4;         /* Light borders (cloud) */
        --color-surface: #ffffff;              /* Cards, panels (white) */
        --color-surface-hover: #f5f5f5;        /* Surface hover state (snow) */

        /* Additional Palette Colors (for specific use cases) */
        --color-slate: #2d3748;                /* Dark blue-gray */
        --color-ash: #525252;                  /* Medium gray */

        /* Typography Fonts - Variable Fonts for Performance */
        --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
        --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

        /* Legacy aliases for backward compatibility */
        --pb-font-heading: var(--font-serif);
        --pb-font-body: var(--font-sans);
        --pb-font-meta: var(--font-sans);
        --pb-font-ui: var(--font-ui);

        /* Variable Font Weights (400-900) */
        --weight-light: 400;
        --weight-normal: 450;
        --weight-medium: 500;
        --weight-semibold: 600;
        --weight-bold: 700;
        --weight-extrabold: 800;
        --weight-black: 900;

        /* Contextual Font Weights */
        --heading-xl: 800;                     /* Hero, H1 */
        --heading-lg: 750;                     /* H2 */
        --heading-md: 700;                     /* H3 */
        --heading-sm: 650;                     /* H4, H5 */
        --body-weight: 425;                    /* Body text (slightly heavier for screens) */
        --body-emphasis: 600;                  /* Bold, strong */
        --ui-weight: 600;                      /* Buttons, labels */
        --ui-emphasis: 700;                    /* Primary buttons */

        /* Spacing Scale (Complete 11-step scale) */
        --space-1: 0.25rem;                    /* 4px */
        --space-2: 0.5rem;                     /* 8px */
        --space-3: 0.75rem;                    /* 12px */
        --space-4: 1rem;                       /* 16px */
        --space-5: 1.25rem;                    /* 20px */
        --space-6: 1.5rem;                     /* 24px */
        --space-8: 2rem;                       /* 32px */
        --space-10: 2.5rem;                    /* 40px */
        --space-12: 3rem;                      /* 48px */
        --space-16: 4rem;                      /* 64px */
        --space-20: 5rem;                      /* 80px */
        --space-24: 6rem;                      /* 96px */

        /* Typography Scale (Complete 11-step scale) */
        --text-xs: 0.6875rem;                  /* 11px */
        --text-sm: 0.875rem;                   /* 14px */
        --text-base: 0.9375rem;                /* 15px */
        --text-md: 1rem;                       /* 16px */
        --text-lg: 1.125rem;                   /* 18px */
        --text-xl: 1.25rem;                    /* 20px */
        --text-2xl: 1.375rem;                  /* 22px */
        --text-3xl: 1.5rem;                    /* 24px */
        --text-4xl: 2rem;                      /* 32px */
        --text-5xl: 2.5rem;                    /* 40px */
        --text-6xl: 3rem;                      /* 48px */

        /* Line Heights */
        --leading-tight: 1.2;
        --leading-snug: 1.3;
        --leading-normal: 1.4;
        --leading-relaxed: 1.6;

        /* Border Radius */
        --radius-sm: 4px;
        --radius-md: 6px;
        --radius-lg: 8px;
        --radius-xl: 12px;

        /* Transitions */
        --transition: 200ms ease;
    }

    /* ===================================
       BASE RESET
       =================================== */
    body.pb-framework-isolated {
        margin: 0;
        padding: 0;
        /* Modern CSS: keep browser default font-size (100% = 16px base) */
        /* Framework uses standard rem units: 1rem = 16px */
    }

    .pb-framework * {
        box-sizing: border-box;
    }

    /* Hide Bricks skip links - they're added by wp_body_open() */
    /* Note: body.pb-framework-isolated indicates framework page (pb-framework class is on main wrapper) */
    body.pb-framework-isolated .skip-link,
    .pb-framework .sr-only {
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }

    /* Show skip links when focused (keyboard accessibility) */
    body.pb-framework-isolated .skip-link:focus {
        clip: auto;
        clip-path: none;
        position: fixed;
        top: 10px;
        left: 10px;
        width: auto;
        height: auto;
        padding: 1rem;
        background: var(--color-secondary);
        color: var(--color-bg-primary);
        text-decoration: none;
        border-radius: var(--radius-md);
        z-index: 100000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* ===================================
       BASE TYPOGRAPHY
       =================================== */
    .pb-framework h1,
    .pb-framework h2,
    .pb-framework h3,
    .pb-framework h4,
    .pb-framework h5,
    .pb-framework h6 {
        font-family: var(--font-serif);
        color: var(--color-secondary);
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    .pb-framework h1 {
        font-size: var(--text-4xl);
        font-weight: var(--heading-xl);
        margin-bottom: 1.5rem;
    }

    .pb-framework h2 {
        font-size: var(--text-3xl);
        font-weight: var(--heading-lg);
    }

    .pb-framework h3 {
        font-size: var(--text-2xl);
        font-weight: var(--heading-md);
    }

    .pb-framework h4 {
        font-size: var(--text-xl);
        font-weight: var(--heading-sm);
    }

    .pb-framework h5,
    .pb-framework h6 {
        font-size: var(--text-lg);
        font-weight: var(--heading-sm);
    }

    .pb-framework p,
    .pb-framework li,
    .pb-framework td,
    .pb-framework th {
        font-family: var(--font-sans);
        font-weight: var(--body-weight);
        line-height: 1.6;
    }

    .pb-framework strong,
    .pb-framework b {
        font-weight: var(--body-emphasis);
    }

    /* NO DEFAULT LINK FONT OVERRIDE
     * Removed blanket "a {}" font-family rule to prevent overriding component fonts.
     * Links inside headings should inherit the heading's font (serif or sans-serif).
     * Individual components can explicitly set link fonts if needed.
     * This prevents the same mistake as the color override issue.
     */

    .pb-framework button,
    .pb-framework input,
    .pb-framework select,
    .pb-framework textarea {
        font-family: var(--font-ui);
        font-weight: var(--weight-normal);
    }

    /* ===================================
       LAYOUT CONTAINERS
       =================================== */
    .pb-site {
        max-width: var(--pb-site-container-width, 1400px);
        margin: 0 auto;
        background: #fff;
    }

    .pb-framework .pb-container {
        max-width: var(--pb-site-container-width, 1400px);
        margin: 0 auto;
        padding: 0 clamp(1rem, 3vw, 2rem);
    }

    .pb-framework .pb-container-wide {
        max-width: var(--pb-site-container-width, 1400px);
        margin: 0 auto;
        padding: 0 clamp(1rem, 3vw, 2rem);
    }

    .pb-framework .pb-container-narrow {
        max-width: 800px;
        margin: 0 auto;
        padding: 0 clamp(1rem, 3vw, 2rem);
    }

    /* ===================================
       BUTTON COMPONENTS
       =================================== */
    .pb-framework .pb-btn {
        display: inline-block;
        padding: 1rem 2.5rem;
        font-family: var(--font-ui);
        font-weight: var(--ui-weight);
        font-size: var(--text-base);
        border-radius: var(--radius-md);
        text-decoration: none;
        transition: var(--transition);
        border: none;
        cursor: pointer;
        text-align: center;
        line-height: 1.2;
    }

    .pb-framework .pb-btn-primary {
        background: var(--color-primary);
        color: var(--color-secondary);
        border: 2px solid transparent;
        font-weight: var(--ui-emphasis);
    }

    .pb-framework .pb-btn-primary:hover {
        background: var(--color-primary-hover);
        transform: translateY(-1px);
        color: var(--color-secondary);
    }

    .pb-framework .pb-btn-secondary {
        background: transparent;
        color: var(--color-secondary);
        border: 2px solid var(--color-secondary);
        font-weight: var(--ui-weight);
    }

    .pb-framework .pb-btn-secondary:hover {
        background: var(--color-secondary);
        color: var(--color-bg-primary);
    }

    .pb-framework .pb-btn-group {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* ===================================
       CARD COMPONENTS
       =================================== */
    .pb-framework .pb-card {
        padding: 2rem 1.875rem;
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .pb-framework .pb-card:hover {
        border-color: var(--color-primary);
        box-shadow: 0 4px 16px rgba(21, 47, 94, 0.08);
    }

    /* ===================================
       LINK COMPONENTS
       =================================== */

    /* NO DEFAULT LINK STYLES
     * Removed global "a {}" styles to prevent conflicts.
     * Components should explicitly define their own link colors.
     * This prevents blanket gold color from overriding component-specific styling.
     */

    /* Explicit link utility class (opt-in) */
    .pb-framework .pb-link {
        color: var(--color-primary);
        text-decoration: underline;
        text-decoration-color: rgba(249, 180, 42, 0.3);
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
        transition: all 0.2s ease;
    }

    .pb-framework .pb-link:hover {
        color: var(--color-primary-hover);
        text-decoration-color: var(--color-primary-hover);
    }

    .pb-framework .pb-link:focus {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
        border-radius: 2px;
    }

    /* Subtle link variant - less prominent */
    .pb-framework .pb-link-subtle {
        color: var(--color-text-secondary);
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .pb-framework .pb-link-subtle:hover {
        color: var(--color-primary);
        text-decoration: underline;
        text-decoration-color: var(--color-primary);
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
    }

    /* Bold link variant - more prominent */
    .pb-framework .pb-link-bold {
        color: var(--color-primary);
        font-weight: 600;
        text-decoration: underline;
        text-decoration-color: var(--color-primary);
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
        transition: all 0.2s ease;
    }

    .pb-framework .pb-link-bold:hover {
        color: var(--color-primary-hover);
        text-decoration-color: var(--color-primary-hover);
        transform: translateX(2px);
    }

    /* Light link variant - for dark backgrounds (like header) */
    .pb-framework .pb-link-light {
        color: #fff8ea;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .pb-framework .pb-link-light:hover {
        color: var(--color-primary);
        text-decoration: underline;
        text-decoration-color: var(--color-primary);
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
    }

    /* ===================================
       GRID UTILITIES
       =================================== */
    .pb-framework .pb-grid {
        display: grid;
        gap: 2rem;
    }

    .pb-framework .pb-grid-2 {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .pb-framework .pb-grid-3 {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .pb-framework .pb-grid-4 {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    /* ===================================
       TYPOGRAPHY UTILITIES
       =================================== */
    .pb-framework .pb-heading-1 {
        font-family: var(--font-serif);
        font-size: var(--text-4xl);
        font-weight: var(--heading-xl);
        line-height: 1.2;
        color: var(--color-secondary);
        margin-bottom: 1.5rem;
    }

    .pb-framework .pb-heading-2 {
        font-family: var(--font-serif);
        font-size: var(--text-3xl);
        font-weight: var(--heading-lg);
        line-height: 1.2;
        color: var(--color-secondary);
        margin-bottom: 1rem;
    }

    .pb-framework .pb-heading-3 {
        font-family: var(--font-serif);
        font-size: var(--text-xl);
        font-weight: var(--heading-md);
        color: var(--color-secondary);
        margin-bottom: 1rem;
    }

    .pb-framework .pb-text-center {
        text-align: center;
    }

    .pb-framework .pb-text-left {
        text-align: left;
    }

    .pb-framework .pb-text-right {
        text-align: right;
    }

    .pb-framework .pb-text-large {
        font-size: var(--text-lg);
        line-height: 1.7;
    }

    .pb-framework .pb-text-body {
        font-family: var(--font-sans);
        font-weight: var(--body-weight);
        color: var(--color-text-secondary);
        line-height: 1.7;
        font-size: var(--text-base);
    }

    /* ===================================
       SPACING UTILITIES
       =================================== */
    .pb-framework .pb-mt-sm { margin-top: var(--space-sm); }
    .pb-framework .pb-mt-md { margin-top: var(--space-md); }
    .pb-framework .pb-mt-lg { margin-top: var(--space-lg); }
    .pb-framework .pb-mt-xl { margin-top: var(--space-xl); }

    .pb-framework .pb-mb-sm { margin-bottom: var(--space-sm); }
    .pb-framework .pb-mb-md { margin-bottom: var(--space-md); }
    .pb-framework .pb-mb-lg { margin-bottom: var(--space-lg); }
    .pb-framework .pb-mb-xl { margin-bottom: var(--space-xl); }

    .pb-framework .pb-p-sm { padding: var(--space-sm); }
    .pb-framework .pb-p-md { padding: var(--space-md); }
    .pb-framework .pb-p-lg { padding: var(--space-lg); }
    .pb-framework .pb-p-xl { padding: var(--space-xl); }

    /* ===================================
       FLEX UTILITIES
       =================================== */
    .pb-framework .pb-flex {
        display: flex;
    }

    .pb-framework .pb-flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pb-framework .pb-flex-between {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .pb-framework .pb-flex-column {
        display: flex;
        flex-direction: column;
    }

    /* ===================================
       SVG ICONS
       Pure SVG icons with zero external dependencies
       =================================== */
    .pb-icon {
        display: inline-block;
        width: 1.25em;
        height: 1.25em;
        vertical-align: middle;
        stroke-width: 2;
        fill: none;
        stroke: currentColor;
    }

    /* Filled icons (social media) */
    .pb-icon[fill="currentColor"] {
        fill: currentColor;
        stroke: none;
    }

    /* Icon sizing variants */
    .pb-icon--sm {
        width: 1em;
        height: 1em;
    }

    .pb-icon--lg {
        width: 1.5em;
        height: 1.5em;
    }

    .pb-icon--xl {
        width: 2em;
        height: 2em;
    }

    /* ===================================
       RESPONSIVE UTILITIES
       =================================== */
    @media (max-width: 768px) {
        .pb-framework .pb-grid-2,
        .pb-framework .pb-grid-3,
        .pb-framework .pb-grid-4 {
            grid-template-columns: 1fr;
        }

        .pb-framework .pb-heading-1 {
            font-size: 2rem;
        }

        .pb-framework .pb-heading-2 {
            font-size: 1.75rem;
        }
    }
}