/*
Theme Name:   Kossy Child
Theme URI:    https://example.com/kossy-child/
Description:  Child theme for Let's Braai project
Author:       Samuel van Straaten
Template:     kossy
Version:      1.0.0
*/

/* ==========================================================================
   1. LOCAL FONTS (RUBIK)
   ========================================================================== */

/* Rubik Regular (400) */
@font-face {
    font-family: 'Rubik-local';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://letsbraai.co.uk/wp-content/themes/kossy-child/fonts/rubik-v31-latin-regular.woff2') format('woff2'); 
}

/* Rubik Regular Italic (400) */
@font-face {
    font-family: 'Rubik-local';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('https://letsbraai.co.uk/wp-content/themes/kossy-child/fonts/rubik-v31-latin-italic.woff2') format('woff2'); 
}

/* Rubik Bold (700) */
@font-face {
    font-family: 'Rubik-local';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://letsbraai.co.uk/wp-content/themes/kossy-child/fonts/rubik-v31-latin-700.woff2') format('woff2'); 
}

/* Rubik Bold Italic (700) */
@font-face {
    font-family: 'Rubik-local';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('https://letsbraai.co.uk/wp-content/themes/kossy-child/fonts/rubik-v31-latin-700italic.woff2') format('woff2'); 
}

/* Rubik Black (900) */
@font-face {
    font-family: 'Rubik-local';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('https://letsbraai.co.uk/wp-content/themes/kossy-child/fonts/rubik-v31-latin-900.woff2') format('woff2'); 
}

/* Rubik Black Italic (900) */
@font-face {
    font-family: 'Rubik-local';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url('https://letsbraai.co.uk/wp-content/themes/kossy-child/fonts/rubik-v31-latin-900italic.woff2') format('woff2'); 
}

/* ==========================================================================
   2. GLOBAL TYPOGRAPHY
   ========================================================================== */

/* Apply local Rubik to all standard text */
body, p, a, li, span {
    font-family: 'Rubik-local', Arial, sans-serif !important;
}

/* Apply local Rubik, uppercase, tight tracking & leading to global headings */
h1, h2, h3 {
    font-family: 'Rubik-local', Arial, sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important; 
    line-height: 0.98 !important;
}

/* Fluid Font Sizes */
h1 {
    font-size: clamp(3.24rem, 7.2vw + 1.44rem, 5.76rem) !important; 
}

h2 {
    font-size: clamp(2.52rem, 5.76vw + 1.44rem, 4.32rem) !important; 
}

h3 {
    font-size: clamp(2.16rem, 4.32vw + 0.72rem, 3.24rem) !important; 
}

/* ==========================================================================
   3. COMPONENT OVERRIDES
   ========================================================================== */

/* Megamenu Links */
.navbar-nav.megamenu .dropdown-menu li > a {
    color: #69322b !important;
}

/* Global Shipping Banner */
#global-shipping-banner {
    background-color: #f1b51c !important;
    color: #69322b !important;
    text-align: center;
    padding: 30px 20px; 
    font-family: 'Rubik-local', Arial, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.98;
    font-size: 3rem; 
    width: 100%;
    position: relative;
    z-index: 99; 
}

#global-shipping-banner p {
    margin: 0;
    padding: 0;
}


/* Layered, natural drop shadow for white banner text */
.banner-class h1, 
.banner-class h2 {
    color: #ffffff !important;
    text-shadow: 
        0px 2px 4px rgba(0, 0, 0, 0.5),   /* Tight core shadow for sharp contrast */
        0px 8px 16px rgba(0, 0, 0, 0.4),  /* Mid-range ambient spread */
        0px 16px 32px rgba(0, 0, 0, 0.3); /* Deep background diffusion */
}

/* Custom Utility Class: Force Vertical Centering in WPBakery */
.kossy-center-y {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
}

/* Ensure WPBakery's invisible inner wrappers also stretch and center */
.kossy-center-y > .wpb_wrapper,
.kossy-center-y .vc_column-inner > .wpb_wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
}

/* Social Icon Wrapper Layout */
.social-icon-wrapper {
    display: flex;
    gap: 20px; 
    align-items: center;
}

/* Base Icon Styling - The Circle */
.social-icon-wrapper a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80px !important;  
    height: 80px !important; 
    border-radius: 50% !important; 
    background-color: #69322b !important; /* Hardcoded Brand Brown */
    color: #f1b51c !important; /* Hardcoded Brand Yellow */
    text-decoration: none !important; /* Prevents theme from adding underlines */
    transition: all 0.3s ease-in-out;
}

/* Hover Effects */
.social-icon-wrapper a:hover {
    background-color: #f36c24 !important; /* Hardcoded Brand Orange */
    color: #ffffff !important; 
    transform: translateY(-4px); 
}

/* Ensure the SVG scales up to 200% */
.social-icon-wrapper svg {
    width: 48px !important;
    height: 48px !important;
    display: block;
}

/* ==========================================================================
   WOOCOMMERCE PRODUCT GRID OVERRIDES
   ========================================================================= */

/* 1. Product Title: Punchy, balanced size for tall product images */
.product-block h3.name {
    /* Fluid size: 16px (mobile) to 24px (desktop) */
    font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem) !important; 
    line-height: 1.2 !important; 
    font-weight: 700 !important; /* Ensure the Rubik weight stands up to the image size */
    margin-bottom: 8px !important;
}

/* 2. Title Colors: Orange base, Yellow hover */
.product-block h3.name a {
    color: #f36c24 !important; 
    transition: color 0.3s ease-in-out !important;
}

.product-block h3.name a:hover {
    color: #f1b51c !important; 
}

/* 3. Product Price: Scale it up and lock it to brand brown for contrast */
.product-block .price {
    font-size: clamp(1.1rem, 1.5vw + 0.5rem, 1.3rem) !important; /* ~18px to 21px */
    font-weight: 700 !important;
    color: #69322b !important; 
    display: block !important;
    margin-top: 5px !important;
}

/* Optional: Make the "inc. VAT" suffix slightly smaller so the main number pops */
.product-block .price .woocommerce-price-suffix {
    font-size: 0.8em !important;
    font-weight: 400 !important;
    opacity: 0.8;
}