/* ========================================
   Logo Uniformity System v2.0.0
   Ensures consistent logo/branding across all viewports
   
   v2.0.0 Changes (2025-12-27):
   - NEW: High-contrast logo design with white outer ring
   - NEW: Enhanced drop shadow for visual anchoring
   - NEW: Improved branding spacing and margins
   - NEW: Better gap values for breathing room
   
   GUARDRAIL: This file enforces logo visibility rules
   - Logo text MUST NOT be truncated (no ellipsis)
   - Logo SVG sizes scale proportionally
   - Branding area has priority over header actions
   ======================================== */

/* ============ BASE LOGO SVG SIZING ============ */
/* Desktop: 44px (default from header.php) */
.site-logo-svg {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Visual anchoring with drop shadow */
    filter: drop-shadow(0 2px 4px rgba(0, 51, 102, 0.15)) 
            drop-shadow(0 4px 8px rgba(0, 102, 204, 0.1));
}

.site-logo-svg:hover {
    filter: drop-shadow(0 4px 8px rgba(0, 51, 102, 0.2)) 
            drop-shadow(0 6px 12px rgba(0, 102, 204, 0.15));
}

/* ============ BRANDING CONTAINER SPACING ============ */
/* Ensures logo and text have proper breathing room */
.branding {
    display: flex;
    align-items: center;
    gap: 0.875rem; /* 14px - optimal spacing between logo and text */
    padding-left: 0.25rem; /* Small buffer from edge */
}

.branding a {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem; /* Match parent gap */
}

/* ============ BRANDING TITLE: NO TRUNCATION POLICY ============ */
/* CRITICAL: Logo text must always be fully visible */
.branding__title {
    /* Base sizing */
    font-size: 1.3rem !important; /* Slightly larger for more presence */
    font-weight: 800 !important;
    white-space: nowrap;
    letter-spacing: -0.02em; /* Tighter tracking for modern look */
    
    /* GUARDRAIL: These properties are FORBIDDEN on .branding__title */
    /* overflow: hidden;  - NEVER USE */
    /* text-overflow: ellipsis;  - NEVER USE */
    /* max-width: *;  - NEVER USE */
}

/* ============ RESPONSIVE SCALING: UNIFORM RATIOS ============ */

/* Tablet (768px - 959px): Logo 42px, Title 1.2rem */
@media (max-width: 959px) and (min-width: 768px) {
    .site-logo-svg {
        width: 42px;
        height: 42px;
    }
    
    .branding {
        gap: 0.75rem; /* 12px */
        padding-left: 0.5rem;
    }
    
    .branding__title {
        font-size: 1.2rem !important;
        /* NO max-width, NO overflow hidden */
    }
}

/* Mobile (480px - 767px): Logo 38px, Title 1.05rem */
@media (max-width: 767px) and (min-width: 480px) {
    .site-logo-svg {
        width: 38px;
        height: 38px;
    }
    
    .branding {
        gap: 0.625rem; /* 10px */
        padding-left: 0.25rem;
    }
    
    .branding__title {
        font-size: 1.05rem !important;
        /* NO max-width, NO overflow hidden */
    }
}

/* Small Mobile (375px - 479px): Logo 36px, Title 1rem */
@media (max-width: 479px) and (min-width: 375px) {
    .site-logo-svg {
        width: 36px;
        height: 36px;
    }
    
    .branding {
        gap: 0.5rem; /* 8px */
        padding-left: 0;
    }
    
    .branding__title {
        font-size: 1rem !important;
        /* NO max-width, NO overflow hidden */
    }
}

/* Tiny Mobile (320px - 374px): Logo 34px, Title 0.95rem */
@media (max-width: 374px) and (min-width: 320px) {
    .site-logo-svg {
        width: 34px;
        height: 34px;
    }
    
    .branding {
        gap: 0.375rem; /* 6px */
        padding-left: 0;
    }
    
    .branding__title {
        font-size: 0.95rem !important;
        /* NO max-width, NO overflow hidden */
    }
}

/* Ultra Small (< 320px): Logo 32px, Title 0.9rem */
@media (max-width: 319px) {
    .site-logo-svg {
        width: 32px;
        height: 32px;
    }
    
    .branding {
        gap: 0.25rem; /* 4px */
    }
    
    .branding__title {
        font-size: 0.9rem !important;
        /* NO max-width, NO overflow hidden */
    }
}

/* ============ BRANDING AREA PRIORITY ============ */
/* On small screens, branding takes priority over action buttons */
@media (max-width: 479px) {
    .branding {
        flex-shrink: 0;
        min-width: 0;
        flex: 1 1 auto;
    }
    
    .branding__text {
        flex-shrink: 1;
        min-width: 0;
    }
    
    /* Action buttons can shrink if needed */
    .site-header__actions {
        flex-shrink: 1;
    }
    
    /* Reduce action button sizes to give more space to branding */
    .header-search-toggle,
    .newsletter-cta,
    .nav-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
}

/* ============ DARK MODE LOGO CONSISTENCY ============ */
[data-theme="dark"] .site-logo-svg {
    /* Enhanced glow for dark mode */
    filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.3)) 
            drop-shadow(0 4px 12px rgba(0, 102, 204, 0.25));
}

[data-theme="dark"] .site-logo-svg:hover {
    filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.4)) 
            drop-shadow(0 6px 16px rgba(0, 102, 204, 0.3));
}

[data-theme="dark"] .branding__title {
    /* Title uses lighter accent in dark mode */
    color: var(--color-primary-light, #60a5fa) !important;
}

/* ============ PRELOADER LOGO SIZING ============ */
/* Preloader uses larger logo (80px) */
.preloader__logo .site-logo-svg,
.preloader__logo svg {
    width: 80px !important;
    height: 80px !important;
}

/* ============ FOOTER BRANDING ============ */
/* Footer branding uses site name text, not logo */
.site-footer__brand .branding__title {
    font-size: 1.1rem;
    color: var(--color-text-inverse, #ffffff);
}