/* purgecss start ignore */

/**
 * TAR Logo Responsive Switching & Optimization
 *
 * Implements:
 * - Responsive logo switching (compact monogram <768px, full lockup ≥768px)
 * - Color consistency enforcement (#3D3937 Graphite)
 * - Performance optimization
 *
 * Optimized variants:
 * - tar-compact-monogram.svg: 556 bytes (mobile, <768px)
 * - tar-full-lockup.svg: 7.8KB (desktop, ≥768px)
 */

/* ===== BASE LOGO STYLES (Hybrid Approach) ===== */

/* Header Logo - Fluid responsive sizing with clamp() */
.tar-navigation__logo {
    /* Hybrid approach: clamp() with design tokens */
    height: clamp(
        var(--logo-size-desktop-min),
        /* Min: 48px */ var(--logo-size-fluid),
        /* Preferred: 5vh (fluid scaling) */ var(--logo-size-desktop-max) /* Max: 52px */
    );
    width: auto;
    display: block;
    object-fit: contain;
    transition:
        opacity 0.3s ease,
        height 0.3s ease;
}

/* Scrolled State - Reduce logo for more content visibility */
.tar-navigation.scrolled .tar-navigation__logo {
    height: var(--logo-size-desktop-min); /* 48px (scrolled) */
}

/* ===== TABLET BREAKPOINT (≤768px) ===== */
@media (width <= 768px) {
    .tar-navigation__logo {
        /* Tablet: Hybrid clamp() approach */
        height: clamp(
            var(--logo-size-tablet-min),
            /* Min: 44px */ var(--logo-size-fluid),
            /* Preferred: 5vh */ var(--logo-size-tablet-max) /* Max: 48px */
        );
    }

    .tar-navigation.scrolled .tar-navigation__logo {
        height: var(--logo-size-tablet-min); /* 44px (scrolled) */
    }
}

/* ===== MOBILE BREAKPOINT (≤480px) ===== */
@media (width <= 480px) {
    .tar-navigation__logo {
        /* Mobile: Hybrid clamp() approach */
        height: clamp(
            var(--logo-size-mobile-min),
            /* Min: 38px */ var(--logo-size-fluid),
            /* Preferred: 5vh */ var(--logo-size-mobile-max) /* Max: 42px */
        );
    }

    .tar-navigation.scrolled .tar-navigation__logo {
        height: var(--logo-size-mobile-min); /* 38px (scrolled) */
    }
}

/* ===== FOOTER LOGO (Fixed Responsive Sizing) ===== */

/* Footer Logo - Responsive sizing using design tokens */
.footer-logo-icon {
    height: var(--logo-size-footer-desktop); /* 72px (Desktop default) */
    width: auto;
    display: block;
    object-fit: contain;
}

/* Tablet: Reduce footer logo to 56px */
@media (width <= 768px) {
    .footer-logo-icon {
        height: var(--logo-size-footer-tablet); /* 56px */
    }
}

/* Mobile: Reduce footer logo to 48px */
@media (width <= 480px) {
    .footer-logo-icon {
        height: var(--logo-size-footer-mobile); /* 48px */
    }
}

/* ===== COLOR CONSISTENCY ENFORCEMENT ===== */

/* Enforce #3D3937 (Graphite) for all logo instances on light backgrounds */

/* WCAG Contrast: 10.2:1 on Cream, 10.5:1 on White (AAA) */
.tar-navigation__logo,
.footer-logo-icon {
    /* This filter converts any color to #3D3937 (Graphite) */
    filter: brightness(0) saturate(100%) invert(22%) sepia(10%) saturate(718%) hue-rotate(346deg)
        brightness(94%) contrast(92%);
}

/* Override filter for footer - new SVG has embedded graphite background */
.footer-logo-icon {
    filter: none !important;
}

/* ===== RESPONSIVE LOGO SWITCHING ===== */

/* NOTE: CSS content: url() DOES NOT WORK on <img> elements.
   Logo switching is implemented via JavaScript (tar-logo-switcher.js) which
   dynamically swaps the src attribute based on container width (280px threshold).

   Mobile: Compact Monogram (default) - tar-compact-monogram.svg
   Desktop: Full Lockup (≥768px) - tar-full-lockup.svg

   The CSS approach was attempted but removed as it's fundamentally incompatible
   with <img> tags. Only works on pseudo-elements (::before, ::after). */

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Prevent layout shift during logo load */
.tar-navigation__brand {
    display: flex;
    align-items: center;
    min-height: 48px;
}

/* Smooth transitions for responsive switching */
@media (prefers-reduced-motion: no-preference) {
    .tar-navigation__logo {
        transition:
            opacity 0.3s ease,
            filter 0.2s ease;
    }
}

/* ===== DARK MODE OVERRIDE ===== */

/* Dark mode logo inversion is handled in accessibility.css */

/* This ensures color filter doesn't conflict with dark mode */
@media (prefers-color-scheme: dark) {
    .tar-navigation__logo,
    .footer-logo-icon {
        /* Override color filter with simple inversion for dark mode */
        filter: brightness(0) invert(1) !important;
    }
}

/* ===== ACCESSIBILITY ===== */

/* Ensure logo is not announced by screen readers (decorative) */

/* Alt text should be "TAR" (compact) or "Trusted Advisors Realty" (full) */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .tar-navigation__logo,
    .footer-logo-icon {
        filter: none !important; /* Use original SVG colors in high contrast */
        opacity: 1;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .tar-navigation__logo {
        height: 32px;
        filter: none; /* Use original colors for print */
    }
}

/* ===== V3 LOGO SYSTEM (Graphite + Brown Hover) ===== */

.tar-navigation__brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    min-height: 55px;
}

.tar-navigation__brand:focus-visible {
    outline: 2px solid var(--tar-brown-80, #73574a);
    outline-offset: 4px;
}

.tar-navigation__logo-box {
    position: relative;
    width: clamp(48px, 5vh, 55px);
    height: clamp(48px, 5vh, 55px);
    flex-shrink: 0;
    overflow: hidden;
}

.tar-navigation.scrolled .tar-navigation__logo-box {
    width: 48px;
    height: 48px;
}

.tar-navigation__logo-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
    filter: none;
}

.tar-navigation__logo-icon--default {
    opacity: 1;
}
.tar-navigation__logo-icon--hover {
    opacity: 0;
}

.tar-navigation__brand:hover .tar-navigation__logo-icon--default,
.tar-navigation__brand:focus .tar-navigation__logo-icon--default {
    opacity: 0;
}

.tar-navigation__brand:hover .tar-navigation__logo-icon--hover,
.tar-navigation__brand:focus .tar-navigation__logo-icon--hover {
    opacity: 1;
}

.tar-navigation__wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.tar-navigation__wordmark-primary {
    font-family: Jost, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tar-graphite, #3d3937);
}

.tar-navigation__wordmark-secondary {
    font-family: Jost, sans-serif;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tar-brown-70, #8b6f5f);
}

@media (width <= 1024px) {
    .tar-navigation__logo-box {
        width: clamp(44px, 5vh, 50px);
        height: clamp(44px, 5vh, 50px);
    }
}

@media (width <= 768px) {
    .tar-navigation__wordmark {
        display: none;
    }

    .tar-navigation__logo-box {
        width: clamp(40px, 5vh, 46px);
        height: clamp(40px, 5vh, 46px);
    }
    .tar-navigation__brand {
        gap: 0;
        min-height: 44px;
    }
}

@media (width <= 480px) {
    .tar-navigation__logo-box {
        width: 38px;
        height: 38px;
    }
}

@media (prefers-color-scheme: dark) {
    .tar-navigation__wordmark-primary {
        color: var(--tar-dark-text, #e8e6e3);
    }
    .tar-navigation__wordmark-secondary {
        color: var(--tar-dark-accent, #a89285);
    }
    .tar-navigation__logo-icon {
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tar-navigation__logo-icon {
        transition: none;
    }
}

/* ===== LOGO VISIBILITY FIX ===== */

/* Defensive fix: Ensure logo images are always visible after language switch */

/* This prevents logo disappearing due to browser caching/BFCache issues */
.tar-navigation__logo-box img,
.tar-footer__logo-container img {
    display: block !important;
    visibility: visible !important;
}

/* purgecss end ignore */