/**
 * Global Styles
 * These styles apply site-wide across all pages
 */

/* Google Fonts loaded via PHP instead of @import for better performance and reliability */

/* ========================================
   ROOT VARIABLES & TYPOGRAPHY
   Essential branding and typography system
   ======================================== */

/* Root Variables for Consistent Branding */
:root {
    --primary-coffee: #8B4513;
    --secondary-coffee: #A0522D;
    --dark-coffee: #654321;
    --light-coffee: #D2B48C;
    --cream: #F5F5DC;
    --warm-white: #FEFBF8;
    --charcoal: #2c2c2c;
    --soft-grey: #666;
    --light-grey: #f9f7f4;
    --luxury-gold: #D4AF37;
    --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ========================================
   PAGE TITLE HIDING
   ======================================== */
/* Hide page titles on homepage and specific pages */
.page-id-15 .entry-title,
.home .entry-title,
.single-product .entry-title,
.woocommerce .entry-title {
    display: none !important;
}

/* Hide page header on specific pages */
.page-header {
    display: none !important;
}

/* Enhanced Typography - Higher specificity to override GeneratePress */
html body, 
body {
    font-family: 'Poppins', sans-serif !important;
    line-height: 1.6;
    color: var(--charcoal);
    overflow-x: hidden;
}

/* Luxury Headings - Higher specificity to override GeneratePress */
html h1, html h2, html h4, html h5, html h6,
h1, h2, h4, h5, h6 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

/* H3 without bottom margin to remove grey underline */
html h3,
h3 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 0;
}

/* ========================================
   UNIFIED TICKER STYLES
   ======================================== */

/* Desktop Ticker */
@media (min-width: 1024px) {
    .ticker-row {
        background: #8B4513 !important;
        width: 100% !important;
        height: 30px !important;
        overflow: hidden !important;
        border-bottom: 1px solid #e0e0e0 !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        z-index: 999 !important;
    }
    
    .ticker-container {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .ticker-content {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .ticker-text {
        color: white !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        white-space: nowrap !important;
        position: absolute !important;
        padding-left: 20px !important;
        display: inline-block !important;
        line-height: 30px !important;
        letter-spacing: 0.3px !important;
    }
    
    .ticker-text a {
        color: white !important;
        text-decoration: underline !important;
    }
    
    .ticker-text a:hover {
        text-decoration: none !important;
    }
}

/* Mobile Ticker styles moved to mobile-ticker.css */

/* Hide desktop ticker on mobile */
@media (max-width: 1023px) {
    .ticker-row {
        display: none !important;
    }
}

/* ========================================
   FOOTER STYLES
   Professional, modern design for sustainable luxury furniture
   ======================================== */

/* Footer styles have been moved to footer.css for better organization */

/* ========================================
   MOBILE FIXES AND RESPONSIVE STYLES
   ======================================== */

/* Mobile Gap Fix - Eliminates unwanted spacing on mobile */
@media (max-width: 768px) {
    /* Remove ALL top spacing from site content area */
    #content.site-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
    }
    
    /* Remove spacing from primary content area */
    #primary.content-area {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Remove spacing from main content */
    #main.site-main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Remove spacing from article container */
    article.post,
    article.page {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Remove spacing from inside article */
    .inside-article {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Remove spacing from entry content */
    .entry-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Remove spacing from first element in entry content */
    .entry-content > *:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Force the hero section to start at top */
    .wp-block-cover:first-child,
    .wp-block-group:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* If using GeneratePress containers */
    .inside-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Target WordPress block containers */
    .wp-site-blocks {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Override GeneratePress default spacing */
    .separate-containers .site-main {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Remove any container padding that might exist */
    .container.grid-container {
        padding-top: 0 !important;
    }
    
    /* Specific fix for trade program page and similar pages */
    .page .site-content,
    .page-id-928 .site-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Remove spacing between header and content */
    body.page #page {
        padding-top: 0 !important;
    }
    
    /* Target the grid container that might have default spacing */
    .grid-container {
        margin-top: 0 !important;
    }
    
    /* Override any default GeneratePress spacing for separate containers */
    body.separate-containers .inside-article,
    body.separate-containers .site-main > * {
        margin-top: 0 !important;
    }
    
    /* Ensure first block group has no top margin or padding */
    .wp-block-group.alignfull:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}



/* Mobile Header styles moved to mobile-header.css */


/* =================================================================
    KRISETTE & CO - FOR PLAY OF HERO VIDEO ON MOBILE
   ================================================================= */


/* Hero Video Mobile Fixes */
@media (max-width: 768px) {
    .wp-block-cover__video-background {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Hero Image Height Control for Mobile */
@media (max-width: 480px) {
    .wp-block-media-text__media {
        height: 400px !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: 34% 35% !important;
    }
}

/* Media Text Stacking for Mobile */
@media (max-width: 781px) {
    .wp-block-media-text.is-stacked-on-mobile {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
    }
    
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
        order: 1 !important;
    }
    
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
        order: 2 !important;
    }
}


/* Mobile header navigation styles moved to mobile-header.css */


/* Remove margins and padding from the Group block */
.wp-block-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove margins and padding from the Cover block */
.wp-block-cover {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove margins from the first and last elements in the group/cover */
.wp-block-group > *:first-child,
.wp-block-cover > *:first-child {
    margin-top: 0 !important;
}

.wp-block-group > *:last-child,
.wp-block-cover > *:last-child {
    margin-bottom: 0 !important;
}

/* Mobile animations moved to mobile-header.css */

/* Page Content Adjustment - FORCE remove gap */
@media (max-width: 768px) {
    body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Hide original header completely */
    .site-header,
    header.site-header,
    .site-header.grid-container {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Target the main page containers */
    .site,
    .site-grid-container,
    .container,
    .hfeed,
    .site-content,
    .content-area,
    #page,
    #content,
    #primary {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Force hero content to start immediately */
    .site-main,
    .site-main > *:first-child,
    .wp-block-cover,
    .hero-section,
    .wp-block-group,
    .entry-content,
    .page-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Ensure header height is exactly 60px */
    .krisette-mobile-header {
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
    }
    
    .mobile-header-container {
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
    }
    
    /* Remove any theme-specific spacing */
    .inside-header,
    .grid-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Force page to start at the very top */
    html {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */
/* Focus styles for better keyboard navigation */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #333;
    outline-offset: 2px;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 999999;
    padding: 8px 16px;
    background: #333;
    color: white;
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus {
    left: 6px;
    top: 7px;
}

/* Mobile menu toggle functionality moved to mobile-header.css */

/* Mobile navigation styles moved to mobile-header.css */

/* Desktop mobile header hiding moved to mobile-header.css */

/* ========================================
   WORDPRESS BLOCK COLUMN FIXES
   ======================================== */

/* Remove all padding from the columns section */
.alignfull {
    padding: 0 !important;
    margin: 0 !important;
}

/* Target the last (right) column only */
.wp-block-columns .wp-block-column:last-child {
    padding-right: 0 !important;
}

.award-winning-design.column-container{
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove column gaps and padding */
.wp-block-columns {
    gap: 0 !important;
}

.wp-block-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ========================================
   ANIMATION KEYFRAMES
   ======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* SCROLL ANIMATIONS */
.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* LOADING ANIMATIONS */
.loading-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--warm-white);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}

.loading-animation.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(139, 69, 19, 0.1);
    border-top: 3px solid var(--primary-coffee);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}