/**
 * Custom Elementor Shop — Main Stylesheet
 *
 * Theme-level styles that complement the reset in style.css.
 * All Elementor-controlled sections should NOT be styled here.
 * Use Elementor's own style controls for widgets and sections.
 *
 * CSS custom properties defined here act as global defaults
 * that Elementor Global Colors / Typography will override.
 */

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Light.otf') format('opentype');
    font-weight: 400; /* Map normal text to Light as fallback */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-ExtraBold.otf') format('opentype');
    font-weight: 700; /* Map bold to ExtraBold */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-ExtraBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* =========================================================
   CSS Custom Properties (Design Tokens)
   ========================================================= */
:root {
    /* Typography */
    --ces-font-family-base:    'Gilroy', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-base:               var(--ces-font-family-base); /* Backwards compatibility for components */
    --ces-font-size-base:      16px;
    --ces-line-height-base:    1.6;

    /* Spacing */
    --ces-spacing-xs:          0.25rem;
    --ces-spacing-sm:          0.5rem;
    --ces-spacing-md:          1rem;
    --ces-spacing-lg:          1.5rem;
    --ces-spacing-xl:          2rem;
    --ces-spacing-xxl:         3rem;

    /* Layout */
    --ces-content-max-width:   1200px;
    --ces-content-padding:     1.5rem;

    /* Colors — intentionally empty to defer to Elementor Global Colors */
    --ces-color-text:          #1a1a1a;
    --ces-color-bg:            #ffffff;
    --ces-color-border:        #e0e0e0;
    --ces-color-muted:         #6b6b6b;

    /* Override Elementor Global Fonts */
    --e-global-typography-primary-font-family: 'Gilroy', sans-serif !important;
    --e-global-typography-secondary-font-family: 'Gilroy', sans-serif !important;
    --e-global-typography-text-font-family: 'Gilroy', sans-serif !important;
    --e-global-typography-accent-font-family: 'Gilroy', sans-serif !important;
}

/* =========================================================
   Base Typography (applied only outside Elementor sections)
   ========================================================= */
body {
    font-family:  var(--ces-font-family-base) !important;
    font-size:    var(--ces-font-size-base);
    line-height:  var(--ces-line-height-base);
    color:        var(--ces-color-text);
    background:   var(--ces-color-bg);
}

/* =========================================================
   Aggressive Global Font Override
   Forces Gilroy on all elements that aren't icons
   ========================================================= */
*:not(i):not([class*="icon"]):not([class*="fa"]):not([class*="eicon"]):not([class*="dashicons"]) {
    font-family: var(--ces-font-family-base) !important;
}

/* =========================================================
   Skip Link (Accessibility)
   ========================================================= */
.skip-link {
    position:        absolute;
    left:            -9999px;
    top:             0;
    z-index:         99999;
    padding:         0.75rem 1rem;
    background:      #000;
    color:           #fff;
    font-size:       0.875rem;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* =========================================================
   Fallback Layout Containers
   (Only visible when Elementor has NOT replaced header/footer)
   ========================================================= */
.ces-fallback-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--ces-spacing-md) var(--ces-content-padding);
    border-bottom:   1px solid var(--ces-color-border);
    background:      var(--ces-color-bg);
}

.ces-fallback-header .site-branding {
    font-weight: 700;
    font-size:   1.25rem;
}

.ces-fallback-nav ul {
    display:     flex;
    gap:         var(--ces-spacing-lg);
    list-style:  none;
    margin:      0;
    padding:     0;
}

.ces-fallback-footer {
    padding:         var(--ces-spacing-xl) var(--ces-content-padding);
    border-top:      1px solid var(--ces-color-border);
    text-align:      center;
    color:           var(--ces-color-muted);
    font-size:       0.875rem;
    background:      var(--ces-color-bg);
}

/* =========================================================
   Site Content Wrapper (applies when NOT on Elementor canvas)
   ========================================================= */
.ces-site-content {
    width:     100%;
    max-width: var(--ces-content-max-width);
    margin:    0 auto;
    padding:   var(--ces-content-padding);
}

.ces-main-content {
    width: 100%;
}

/* =========================================================
   WooCommerce Overrides
   (Minimal — keep Elementor-compatible)
   ========================================================= */
.ces-woo-content {
    width:   100%;
    padding: var(--ces-content-padding);
}

/* Ensure WooCommerce form fields don't break Elementor grid */
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count {
    float: none;
}

/* Product grid responsive defaults */
.woocommerce ul.products {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   var(--ces-spacing-lg);
    list-style:            none;
    margin:                0;
    padding:               0;
}

.woocommerce ul.products li.product {
    margin: 0;
}

/* =========================================================
   Accessibility — Focus styles
   ========================================================= */
:focus-visible {
    outline:        2px solid #0073aa;
    outline-offset: 2px;
}

/* =========================================================
   Screen reader text utility
   ========================================================= */
.screen-reader-text {
    clip:      rect(1px, 1px, 1px, 1px);
    height:    1px;
    overflow:  hidden;
    position:  absolute;
    width:     1px;
    word-wrap: normal !important;
}