/* ==========================================================================
   Dale's Food Products — global.css
   Base reset, fluid typography, reusable components, section utilities.
   Relies on Elementor Global Variables defined in the Elementor panel and
   utility variables declared in style.css — do NOT hardcode hex values here.
   ========================================================================== */


/* ==========================================================================
   1. Reset & Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--e-global-typography-secondary-font-family), sans-serif;
    font-weight: var(--e-global-typography-secondary-font-weight);
    color: var(--e-global-color-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   2. Fluid Typography Scale
   clamp(min, preferred-viewport, max) keeps text legible at every breakpoint.
   ========================================================================== */

h1, h2, h3, h4 {
    font-family: var(--e-global-typography-primary-font-family), serif;
    font-weight: var(--e-global-typography-primary-font-weight);
    margin-top: 0;
}

h1:not(.home-hero-heading) {
    font-size: clamp(2.2rem, 6vw, 3.5rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    line-height: 1.3!important;
    letter-spacing: -0.03em !important;
}

h3 {
    font-size: clamp(1.3rem, 2.5vw, 2rem) !important;
    line-height: 1.3!important;
    letter-spacing: -0.03em !important;
}

h4 {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.03em !important;
}

p {
    font-family: var(--e-global-typography-secondary-font-family), sans-serif !important;
    line-height: 1.6 !important;
    margin-top: 0 !important;
}


/* ==========================================================================
   3. Reusable Button Classes
   ========================================================================== */

/* --- Shared button base --- */
.btn-primary,
.btn-outline,
.btn-outline-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 12px 28px;
    font-family: var(--e-global-typography-accent-font-family), sans-serif;
    font-weight: var(--e-global-typography-accent-font-weight);
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    line-height: 1;
}

/* --- Filled CTA button --- */
.btn-primary {
    background: var(--e-global-color-secondary);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    opacity: 0.88;
    color: #ffffff;
}

/* --- Outlined button (dark context) --- */
.btn-outline {
    background: transparent;
    border: 1px solid rgba(35, 31, 28, 0.3);
    color: var(--e-global-color-primary);
}

.btn-outline:hover,
.btn-outline:focus-visible {
    border-color: var(--e-global-color-text);
    color: var(--e-global-color-text);
}

/* --- Outlined button (light/image context) --- */
.btn-outline-white {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.btn-outline-white:hover,
.btn-outline-white:focus-visible {
    border-color: var(--e-global-color-text);
    color: var(--e-global-color-text);
}


/* ==========================================================================
   4. Section Label
   Small all-caps eyebrow text used above headings.
   ========================================================================== */

.section-label {
    display: block;
    font-family: var(--e-global-typography-accent-font-family), sans-serif;
    font-weight: var(--e-global-typography-accent-font-weight);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--e-global-color-secondary);
    margin-bottom: 1rem;
}


/* ==========================================================================
   5. Elementor Container Override
   Caps the inner content width so text doesn't stretch on ultra-wide screens.
   !important is required to override Elementor's inline max-width styles.
   ========================================================================== */

.elementor-section .elementor-container {
    max-width: 1280px !important;
    margin-inline: auto !important;
}


/* ==========================================================================
   6. Section Background Utilities
   Applied as Elementor CSS Classes on section/container widgets.
   ========================================================================== */

/* Dark — primary brand dark, light text */
.section-dark {
    background-color: var(--e-global-color-primary);
    color: #ffffff;
}

/* Warm cream — main light section background */
.section-cream {
    background-color: var(--e-global-color-accent);
}

/* Slightly darker cream — alternating section rhythm */
.section-cream-dark {
    background-color: var(--dales-cream-dark);
}