/**
 * Custom Tailwind CSS utilities and overrides for Zadzooks New theme
 * This file allows us to use Tailwind alongside existing CSS without conflicts
 */

/* Spartan Font Face Declarations */
@font-face {
    font-family: 'Spartan';
    src: url('../fonts/SpartanRegular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spartan';
    src: url('../fonts/SpartanMedium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spartan';
    src: url('../fonts/SpartanSemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spartan';
    src: url('../fonts/SpartanBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Frontend-only Font Application - Avoid WordPress Admin */
body:not(.wp-admin) {
    font-family: 'Spartan', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Frontend headings - Use SpartanSemiBold (600) like original */
body:not(.wp-admin) h1, 
body:not(.wp-admin) h2, 
body:not(.wp-admin) h3, 
body:not(.wp-admin) h4, 
body:not(.wp-admin) h5, 
body:not(.wp-admin) h6 {
    font-family: 'Spartan', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
}

/* Frontend paragraphs and text elements */
body:not(.wp-admin) p, 
body:not(.wp-admin) span, 
body:not(.wp-admin) div, 
body:not(.wp-admin) a, 
body:not(.wp-admin) li, 
body:not(.wp-admin) ul, 
body:not(.wp-admin) ol {
    font-family: 'Spartan', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Frontend navigation */
body:not(.wp-admin) nav a, 
body:not(.wp-admin) nav ul, 
body:not(.wp-admin) nav li {
    font-family: 'Spartan', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
}

/* Spartan font specific optimizations - Frontend only */
body:not(.wp-admin) {
    font-feature-settings: "kern" 1;
    text-rendering: optimizeLegibility;
}

/* Spartan works well with slightly increased letter spacing on smaller text */
.menu-item-has-children .sub-menu a {
    letter-spacing: 0.01em;
}

/* Better line height for Spartan - Frontend only */
body:not(.wp-admin) nav a {
    line-height: 1.2;
}

/* Ensure all top-level navigation items have consistent font size */
#main-header nav ul.flex > li > a {
    font-size: 16px !important;
}

/* Tailwind Reset Overrides - Prevent conflicts with existing styles */
.tw-reset {
    /* Use this class to apply Tailwind styles without affecting existing elements */
}

/* Custom Tailwind Components */
@layer components {
    .btn-brand {
        @apply bg-brand-blue text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors;
    }
    
    .card-modern {
        @apply bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300;
    }
    
    .text-brand {
        @apply text-brand-blue;
    }
    
    .border-brand {
        @apply border-brand-blue;
    }
}

/* Utility classes for gradual migration */
.tw-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.tw-grid-articles {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.tw-flex-center {
    @apply flex items-center justify-center;
}

.tw-flex-between {
    @apply flex items-center justify-between;
}

/* Header specific Tailwind utilities */
.tw-header {
    @apply w-full border-b border-gray-200 bg-white;
}

.tw-header-container {
    @apply max-w-none px-5 mx-auto;
}

.tw-header-layout {
    @apply flex justify-between items-center py-4;
}

.tw-nav-menu {
    @apply flex-1 flex justify-center;
}

.tw-header-tools {
    @apply flex items-center space-x-4;
}

/* Simple Dropdown Menu Styling */
.dropdown-parent {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 0.5rem 0;
    min-width: 12rem;
    z-index: 50;
    display: none;
}

.dropdown-parent.show .dropdown-menu {
    display: block;
}

/* Dark Mode Support */
html.dark {
    color-scheme: dark;
}

/* Dark mode base styles */
html.dark body {
    background-color: #0a0a0a;
    color: #e5e7eb;
}

/* Header dark mode */
html.dark #main-header {
    background-color: #1a1a1a;
    border-color: #374151;
}

html.dark #main-header a {
    color: #e5e7eb;
}

html.dark #main-header a:hover {
    color: #60a5fa;
}

/* Dropdown dark mode */
html.dark .dropdown-menu {
    background-color: #1f2937;
    border-color: #374151;
}

html.dark .dropdown-menu li a {
    color: #e5e7eb !important;
}

html.dark .dropdown-menu li a:hover {
    background-color: #374151 !important;
    color: #60a5fa !important;
}

/* Search bar dark mode */
html.dark #search-bar {
    background-color: #1a1a1a;
    border-color: #374151;
}

html.dark #search-bar input {
    background-color: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

html.dark #search-bar input::placeholder {
    color: #9ca3af;
}

/* Comic background dark mode */
html.dark .comic-background {
    background-color: #111111;
}

/* Cards dark mode */
html.dark .bg-white {
    background-color: #1f2937;
}

html.dark .bg-gray-50 {
    background-color: #111111;
}

html.dark .bg-gray-100 {
    background-color: #1a1a1a;
}

html.dark .bg-gray-200 {
    background-color: #374151;
}

html.dark .bg-gray-800 {
    background-color: #1f2937;
}

html.dark .text-gray-900 {
    color: #f3f4f6;
}

html.dark .text-gray-700 {
    color: #d1d5db;
}

html.dark .text-gray-600 {
    color: #9ca3af;
}

html.dark .text-gray-500 {
    color: #6b7280;
}

html.dark .text-gray-400 {
    color: #9ca3af;
}

html.dark .border-gray-200 {
    border-color: #374151;
}

html.dark .border-gray-300 {
    border-color: #4b5563;
}

html.dark .border-gray-600 {
    border-color: #6b7280;
}

/* Shadows in dark mode */
html.dark .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

html.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* Ad spaces dark mode */
html.dark .bg-gray-800,
html.dark [style*="background-color: #e5e7eb"] {
    background-color: #1f2937 !important;
}

/* Footer dark mode */
html.dark footer {
    background-color: #111111;
    border-color: #374151;
}

html.dark footer .bg-gray-800 {
    background-color: #1f2937;
}

html.dark footer .border-gray-800 {
    border-color: #374151;
}

html.dark footer .text-gray-400 {
    color: #9ca3af;
}

html.dark footer .text-gray-500 {
    color: #6b7280;
}

html.dark footer .text-gray-100 {
    color: #f3f4f6;
}

html.dark footer a:hover {
    color: #60a5fa;
}

/* Support CTA dark mode */
html.dark .bg-gradient-to-r.from-brand-blue.to-blue-700 {
    background: linear-gradient(to right, #1e40af, #1d4ed8);
}

html.dark .text-blue-100 {
    color: #dbeafe;
}

/* Footer logo specific styling - override global image rule */
footer img.footer-logo {
    max-width: none !important;
    width: auto !important;
    height: 20px !important;
    display: block !important;
}

/* Category icon backgrounds dark mode */
html.dark .bg-blue-600 {
    background-color: #2563eb;
}

html.dark .bg-purple-600 {
    background-color: #7c3aed;
}

html.dark .bg-green-600 {
    background-color: #16a34a;
}

html.dark .bg-indigo-600 {
    background-color: #4f46e5;
}

html.dark .bg-orange-600 {
    background-color: #ea580c;
}

/* Hover states dark mode */
html.dark .hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}

html.dark .hover\:bg-gray-50:hover {
    background-color: #374151;
}

/* Mobile menu dark mode */
html.dark #mobile-menu {
    background-color: #1a1a1a;
    border-color: #374151;
}

.dropdown-arrow {
    transition: transform 0.2s ease;
}

.dropdown-parent.show .dropdown-arrow {
    transform: rotate(180deg);
}

/* Hide original theme arrows to prevent duplicates */
.back-menus .has-sub .arrow {
    display: none !important;
}

.back-menus .has-sub .arrow:after,
.back-menus .has-sub .arrow::after {
    display: none !important;
}

/* Hide any other potential arrow sources */
.menu-item-has-children::after,
.menu-item-has-children::before,
.has-sub::after,
.has-sub::before {
    display: none !important;
}

/* Hide Bootstrap dropdown arrows */
.dropdown-toggle::after {
    display: none !important;
}

/* Aggressively hide all pseudo-element arrows except our custom one */
nav a::after,
nav a::before,
.nav a::after,
.nav a::before,
#main-nav a::after,
#main-nav a::before {
    display: none !important;
}

/* Only show our custom arrows */
.custom-arrow {
    display: block !important;
}

/* Nuclear option - hide all menu pseudo-elements */
ul[id*="menu"] a::after,
ul[id*="menu"] a::before,
.menu a::after,
.menu a::before {
    display: none !important;
}

/* WordPress Admin Bar Compatibility - Override Tailwind classes */
#back-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
}

/* When admin bar is present */
body.admin-bar #back-header {
    top: 32px !important;
}

/* Tablet admin bar */
@media screen and (max-width: 782px) {
    body.admin-bar #back-header {
        top: 46px !important;
    }
    
    body.admin-bar .back-wrapper {
        padding-top: 110px; /* 64px header + 46px admin bar */
    }
}

/* Mobile - admin bar is hidden */
@media screen and (max-width: 600px) {
    body.admin-bar #back-header {
        top: 0 !important;
    }
    
    body.admin-bar .back-wrapper {
        padding-top: 64px; /* Just the header height */
    }
}

/* Typography utilities that work with existing styles */
.tw-heading-large {
    @apply text-4xl md:text-5xl font-bold text-gray-900 leading-tight;
}

.tw-heading-medium {
    @apply text-2xl md:text-3xl font-semibold text-gray-900;
}

.tw-text-body {
    @apply text-gray-600 leading-relaxed;
}

/* Button styles that complement existing theme */
.tw-btn-primary {
    @apply bg-brand-blue text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors;
}

.tw-btn-secondary {
    @apply border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-medium hover:bg-gray-50 transition-colors;
}

/* Responsive utilities */
.tw-hide-mobile {
    @apply hidden md:block;
}

.tw-show-mobile {
    @apply block md:hidden;
}

/* Z-index utilities for theme compatibility */
.tw-z-header {
    @apply z-50;
}

.tw-z-dropdown {
    @apply z-40;
}

.tw-z-overlay {
    @apply z-30;
}

/* Dark Mode Styles for Header and Hero Section */
html.back-dark #back-header {
    background-color: #111111 !important;
    border-color: #333333 !important;
}

html.back-dark #back-header .container a,
html.back-dark #back-header .container button {
    color: #ffffff !important;
}

html.back-dark #back-header .back_search:hover,
html.back-dark #back-header .back-dark-light:hover,
html.back-dark #back-header #mobile-menu-toggle:hover {
    color: #0088cb !important;
}

/* Dark mode for navigation menus */
html.back-dark nav a {
    color: #ffffff !important;
}

html.back-dark nav a:hover {
    color: #0088cb !important;
}

html.back-dark .dropdown-menu {
    background-color: #222222 !important;
    border-color: #444444 !important;
}

html.back-dark .dropdown-menu a {
    color: #ffffff !important;
}

html.back-dark .dropdown-menu a:hover {
    color: #0088cb !important;
    background-color: #333333 !important;
}

/* Dark mode for hero section */
html.back-dark .back-wrapper {
    background-color: #0a0a0a !important;
}

/* Dark mode for hero section background */
html.back-dark .back-wrapper > div[style*="background-color: #e7e7e7"] {
    background-color: #1a1a1a !important;
}

/* Dark mode for story cards with white backgrounds */
html.back-dark .back-wrapper article.bg-white {
    background-color: #222222 !important;
}

/* Dark mode for story titles */
html.back-dark .back-wrapper h2 a,
html.back-dark .back-wrapper h3 a,
html.back-dark .back-wrapper h4 a {
    color: #ffffff !important;
}

html.back-dark .back-wrapper h2 a:hover,
html.back-dark .back-wrapper h3 a:hover,
html.back-dark .back-wrapper h4 a:hover {
    color: #0088cb !important;
}

/* Dark mode for story metadata */
html.back-dark .back-wrapper .text-gray-500,
html.back-dark .back-wrapper .text-gray-600,
html.back-dark .back-wrapper .text-gray-700,
html.back-dark .back-wrapper .text-gray-900 {
    color: #cccccc !important;
}

/* Dark mode for overlay stories (keep overlay text white) */
html.back-dark .back-wrapper .text-white {
    color: #ffffff !important;
}

/* Dark mode for mobile menu */
html.back-dark #mobile-menu {
    background-color: #111111 !important;
    border-color: #333333 !important;
}

html.back-dark #mobile-menu a {
    color: #ffffff !important;
}

html.back-dark #mobile-menu a:hover {
    color: #0088cb !important;
    background-color: #333333 !important;
}

/* Dark mode for search form */
html.back-dark .search-form {
    background-color: #222222 !important;
    border-color: #444444 !important;
}

html.back-dark .search-form input {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

html.back-dark .search-form input::placeholder {
    color: #999999 !important;
}

html.back-dark .search-form button {
    background-color: #0088cb !important;
    color: #ffffff !important;
}

/* Dark mode for newsletter signup section */
html.back-dark .bg-white {
    background-color: #0a0a0a !important;
}

html.back-dark .bg-white.bg-opacity-95 {
    background-color: rgba(26, 26, 26, 0.95) !important;
}

html.back-dark .bg-gray-50 {
    background-color: #1a1a1a !important;
}

html.back-dark .text-gray-900 {
    color: #ffffff !important;
}

html.back-dark .text-gray-600 {
    color: #cccccc !important;
}

html.back-dark .text-gray-500 {
    color: #999999 !important;
}

html.back-dark .text-gray-700 {
    color: #e5e5e5 !important;
}

html.back-dark input[type="text"],
html.back-dark input[type="email"] {
    background-color: #333333 !important;
    border-color: #555555 !important;
    color: #ffffff !important;
}

html.back-dark input[type="text"]:focus,
html.back-dark input[type="email"]:focus {
    border-color: #0088cb !important;
    ring-color: #0088cb !important;
}

html.back-dark input[type="checkbox"] {
    background-color: #333333 !important;
    border-color: #555555 !important;
}

html.back-dark input[type="checkbox"]:checked {
    background-color: #0088cb !important;
    border-color: #0088cb !important;
}

/* Comic Book Background for Newsletter Section */
.comic-background {
    background: 
        /* Large dark circles */
        radial-gradient(circle at 15% 25%, #e6730a 8px, transparent 8px),
        radial-gradient(circle at 75% 15%, #e6730a 12px, transparent 12px),
        radial-gradient(circle at 85% 75%, #e6730a 6px, transparent 6px),
        radial-gradient(circle at 25% 85%, #e6730a 10px, transparent 10px),
        radial-gradient(circle at 95% 45%, #e6730a 5px, transparent 5px),
        
        /* Medium dark circles */
        radial-gradient(circle at 45% 35%, #e6730a 4px, transparent 4px),
        radial-gradient(circle at 65% 55%, #e6730a 7px, transparent 7px),
        radial-gradient(circle at 35% 65%, #e6730a 3px, transparent 3px),
        radial-gradient(circle at 55% 85%, #e6730a 5px, transparent 5px),
        radial-gradient(circle at 5% 55%, #e6730a 9px, transparent 9px),
        
        /* Small dark circles */
        radial-gradient(circle at 20% 45%, #e6730a 2px, transparent 2px),
        radial-gradient(circle at 60% 25%, #e6730a 3px, transparent 3px),
        radial-gradient(circle at 80% 35%, #e6730a 2px, transparent 2px),
        radial-gradient(circle at 40% 15%, #e6730a 4px, transparent 4px),
        radial-gradient(circle at 90% 15%, #e6730a 2px, transparent 2px),
        radial-gradient(circle at 10% 75%, #e6730a 3px, transparent 3px),
        radial-gradient(circle at 70% 75%, #e6730a 2px, transparent 2px),
        
        /* Bright yellow-orange base */
        #ffa726;
    
    background-size: 
        120px 120px,
        150px 150px,
        100px 100px,
        130px 130px,
        80px 80px,
        90px 90px,
        110px 110px,
        70px 70px,
        95px 95px,
        140px 140px,
        60px 60px,
        75px 75px,
        65px 65px,
        85px 85px,
        55px 55px,
        90px 90px,
        70px 70px,
        100% 100%;
    
    position: relative;
    overflow: hidden;
}

/* Navy Blue Comic Background for Newsletter */
.comic-background-navy {
    background: 
        /* Large darker navy circles */
        radial-gradient(circle at 15% 25%, #1e3a8a 8px, transparent 8px),
        radial-gradient(circle at 75% 15%, #1e3a8a 12px, transparent 12px),
        radial-gradient(circle at 85% 75%, #1e3a8a 6px, transparent 6px),
        radial-gradient(circle at 25% 85%, #1e3a8a 10px, transparent 10px),
        radial-gradient(circle at 95% 45%, #1e3a8a 5px, transparent 5px),
        
        /* Medium darker navy circles */
        radial-gradient(circle at 45% 35%, #1e3a8a 4px, transparent 4px),
        radial-gradient(circle at 65% 55%, #1e3a8a 7px, transparent 7px),
        radial-gradient(circle at 35% 65%, #1e3a8a 3px, transparent 3px),
        radial-gradient(circle at 55% 85%, #1e3a8a 5px, transparent 5px),
        radial-gradient(circle at 5% 55%, #1e3a8a 9px, transparent 9px),
        
        /* Small darker navy circles */
        radial-gradient(circle at 20% 45%, #1e3a8a 2px, transparent 2px),
        radial-gradient(circle at 60% 25%, #1e3a8a 3px, transparent 3px),
        radial-gradient(circle at 80% 35%, #1e3a8a 2px, transparent 2px),
        radial-gradient(circle at 40% 15%, #1e3a8a 4px, transparent 4px),
        radial-gradient(circle at 90% 15%, #1e3a8a 2px, transparent 2px),
        radial-gradient(circle at 10% 75%, #1e3a8a 3px, transparent 3px),
        radial-gradient(circle at 70% 75%, #1e3a8a 2px, transparent 2px),
        
        /* Rich navy blue base */
        #1e40af;
    
    background-size: 
        120px 120px,
        150px 150px,
        100px 100px,
        130px 130px,
        80px 80px,
        90px 90px,
        110px 110px,
        70px 70px,
        95px 95px,
        140px 140px,
        60px 60px,
        75px 75px,
        65px 65px,
        85px 85px,
        55px 55px,
        90px 90px,
        70px 70px,
        100% 100%;
    
    position: relative;
    overflow: hidden;
}


/* Dark mode for comic background */
html.back-dark .comic-background {
    background: 
        /* Large lighter circles on black background */
        radial-gradient(circle at 15% 25%, #333333 8px, transparent 8px),
        radial-gradient(circle at 75% 15%, #333333 12px, transparent 12px),
        radial-gradient(circle at 85% 75%, #333333 6px, transparent 6px),
        radial-gradient(circle at 25% 85%, #333333 10px, transparent 10px),
        radial-gradient(circle at 95% 45%, #333333 5px, transparent 5px),
        
        /* Medium lighter circles */
        radial-gradient(circle at 45% 35%, #333333 4px, transparent 4px),
        radial-gradient(circle at 65% 55%, #333333 7px, transparent 7px),
        radial-gradient(circle at 35% 65%, #333333 3px, transparent 3px),
        radial-gradient(circle at 55% 85%, #333333 5px, transparent 5px),
        radial-gradient(circle at 5% 55%, #333333 9px, transparent 9px),
        
        /* Small lighter circles */
        radial-gradient(circle at 20% 45%, #333333 2px, transparent 2px),
        radial-gradient(circle at 60% 25%, #333333 3px, transparent 3px),
        radial-gradient(circle at 80% 35%, #333333 2px, transparent 2px),
        radial-gradient(circle at 40% 15%, #333333 4px, transparent 4px),
        radial-gradient(circle at 90% 15%, #333333 2px, transparent 2px),
        radial-gradient(circle at 10% 75%, #333333 3px, transparent 3px),
        radial-gradient(circle at 70% 75%, #333333 2px, transparent 2px),
        
        /* Black base for dark mode */
        #000000;
    
    background-size: 
        120px 120px,
        150px 150px,
        100px 100px,
        130px 130px,
        80px 80px,
        90px 90px,
        110px 110px,
        70px 70px,
        95px 95px,
        140px 140px,
        60px 60px,
        75px 75px,
        65px 65px,
        85px 85px,
        55px 55px,
        90px 90px,
        70px 70px,
        100% 100%;
}

/* Enhanced Travel Section Styling - Version 3 (World Map) */
.travel-premium-section {
    position: relative;
}

/* Travel Stories Background Pattern - Flight Paths */
.travel-premium-section .bg-blue-50 {
    background: 
        /* Flight path lines - various directions and curves */
        linear-gradient(23deg, transparent 30%, rgba(59, 130, 246, 0.12) 30.5%, rgba(59, 130, 246, 0.12) 31.5%, transparent 32%),
        linear-gradient(67deg, transparent 45%, rgba(59, 130, 246, 0.10) 45.5%, rgba(59, 130, 246, 0.10) 46.5%, transparent 47%),
        linear-gradient(-15deg, transparent 60%, rgba(59, 130, 246, 0.08) 60.5%, rgba(59, 130, 246, 0.08) 61.5%, transparent 62%),
        linear-gradient(112deg, transparent 20%, rgba(59, 130, 246, 0.11) 20.5%, rgba(59, 130, 246, 0.11) 21.5%, transparent 22%),
        linear-gradient(-45deg, transparent 35%, rgba(59, 130, 246, 0.09) 35.5%, rgba(59, 130, 246, 0.09) 36.5%, transparent 37%),
        linear-gradient(155deg, transparent 70%, rgba(59, 130, 246, 0.07) 70.5%, rgba(59, 130, 246, 0.07) 71.5%, transparent 72%),
        
        /* Destination dots - airports/cities */
        radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.15) 2px, transparent 3px),
        radial-gradient(circle at 85% 15%, rgba(59, 130, 246, 0.18) 1.5px, transparent 2.5px),
        radial-gradient(circle at 70% 80%, rgba(59, 130, 246, 0.12) 2.5px, transparent 3.5px),
        radial-gradient(circle at 25% 75%, rgba(59, 130, 246, 0.16) 2px, transparent 3px),
        radial-gradient(circle at 90% 60%, rgba(59, 130, 246, 0.14) 1.8px, transparent 2.8px),
        radial-gradient(circle at 40% 30%, rgba(59, 130, 246, 0.13) 2.2px, transparent 3.2px),
        
        /* Base color */
        #f8fafc;
    
    background-size: 
        800px 600px,
        600px 800px,
        700px 500px,
        500px 700px,
        650px 650px,
        750px 400px,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%;
}

/* Dark mode for world map Travel section */
html.back-dark .travel-premium-section .bg-blue-50 {
    background: 
        /* Flight path lines - various directions and curves (dark mode) */
        linear-gradient(23deg, transparent 30%, rgba(14, 165, 233, 0.18) 30.5%, rgba(14, 165, 233, 0.18) 31.5%, transparent 32%),
        linear-gradient(67deg, transparent 45%, rgba(14, 165, 233, 0.15) 45.5%, rgba(14, 165, 233, 0.15) 46.5%, transparent 47%),
        linear-gradient(-15deg, transparent 60%, rgba(14, 165, 233, 0.12) 60.5%, rgba(14, 165, 233, 0.12) 61.5%, transparent 62%),
        linear-gradient(112deg, transparent 20%, rgba(14, 165, 233, 0.16) 20.5%, rgba(14, 165, 233, 0.16) 21.5%, transparent 22%),
        linear-gradient(-45deg, transparent 35%, rgba(14, 165, 233, 0.14) 35.5%, rgba(14, 165, 233, 0.14) 36.5%, transparent 37%),
        linear-gradient(155deg, transparent 70%, rgba(14, 165, 233, 0.11) 70.5%, rgba(14, 165, 233, 0.11) 71.5%, transparent 72%),
        
        /* Destination dots - airports/cities (dark mode) */
        radial-gradient(circle at 15% 25%, rgba(14, 165, 233, 0.22) 2px, transparent 3px),
        radial-gradient(circle at 85% 15%, rgba(14, 165, 233, 0.25) 1.5px, transparent 2.5px),
        radial-gradient(circle at 70% 80%, rgba(14, 165, 233, 0.18) 2.5px, transparent 3.5px),
        radial-gradient(circle at 25% 75%, rgba(14, 165, 233, 0.23) 2px, transparent 3px),
        radial-gradient(circle at 90% 60%, rgba(14, 165, 233, 0.20) 1.8px, transparent 2.8px),
        radial-gradient(circle at 40% 30%, rgba(14, 165, 233, 0.19) 2.2px, transparent 3.2px),
        
        /* Dark base color */
        #1e293b !important;
    
    background-size: 
        800px 600px,
        600px 800px,
        700px 500px,
        500px 700px,
        650px 650px,
        750px 400px,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100% !important;
}

html.back-dark .travel-premium-section .text-blue-900 {
    color: #ffffff !important;
}

html.back-dark .travel-premium-section .text-gray-500 {
    color: #94a3b8 !important;
}

html.back-dark .travel-premium-section .bg-gray-200 {
    background-color: #334155 !important;
}

html.back-dark .travel-premium-section .text-gray-400 {
    color: #64748b !important;
}

html.back-dark .travel-premium-section .border-gray-300 {
    border-color: #475569 !important;
}

html.back-dark .travel-premium-section .bg-blue-600 {
    background-color: #0ea5e9 !important;
}

html.back-dark .travel-premium-section .text-blue-600 {
    color: #0ea5e9 !important;
}

/* Dark mode for Article Detail Page */
html.back-dark .prose {
    color: #e5e7eb !important;
}

html.back-dark .prose h1,
html.back-dark .prose h2,
html.back-dark .prose h3,
html.back-dark .prose h4,
html.back-dark .prose h5,
html.back-dark .prose h6 {
    color: #ffffff !important;
}

html.back-dark .prose a {
    color: #60a5fa !important;
}

html.back-dark .prose a:hover {
    color: #93bbfc !important;
}

html.back-dark .prose strong {
    color: #ffffff !important;
}

html.back-dark .prose code {
    color: #e5e7eb !important;
    background-color: #374151 !important;
}

html.back-dark .prose pre {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
}

html.back-dark .prose blockquote {
    border-left-color: #4b5563 !important;
    color: #d1d5db !important;
}

html.back-dark .bg-gray-50 {
    background-color: #1f2937 !important;
}

html.back-dark .bg-gray-100 {
    background-color: #374151 !important;
}

html.back-dark .border-gray-200 {
    border-color: #4b5563 !important;
}

html.back-dark .border-gray-300 {
    border-color: #6b7280 !important;
}

/* Content images: default to full width (low specificity so alignment overrides in footer win) */
:where(.entry-content, .prose, article) img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}
/* All alignment and wp-caption image overrides are in footer.php <style id="wp-alignment-overrides"> */

/* Ensure hero images with object-cover maintain their height - higher specificity */
img.h-full.object-cover {
    height: 100% !important;
}

/* Category section images should fill their containers properly */
img.category-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Specific rule for hero image in featured story section */
.lg\\:col-span-2 img.wp-post-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Override any Bootstrap or WordPress image classes that force height: auto */
.lg\\:col-span-2 img[width][height] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Header logo specific styles to maintain proper sizing */
.back-logo-dark,
.back-logo-light {
    width: auto !important;
    height: 2rem !important; /* h-8 in Tailwind */
    max-width: none !important;
}

/* Dark mode logo switching */
html.back-dark .back-logo-dark {
    display: none !important;
}

html.back-dark .back-logo-light {
    display: block !important;
}

html:not(.back-dark) .back-logo-dark {
    display: block !important;
}

html:not(.back-dark) .back-logo-light {
    display: none !important;
}

/* Header Dark Mode Styles */
html.back-dark #main-header {
    background-color: #111111 !important;
    border-color: #333333 !important;
}

html.back-dark #main-header a,
html.back-dark #main-header button {
    color: #ffffff !important;
}

html.back-dark #main-header a:hover,
html.back-dark #main-header button:hover {
    color: #0088cb !important;
}

html.back-dark #search-bar {
    background-color: #111111 !important;
    border-color: #333333 !important;
}

html.back-dark #search-bar input {
    background-color: #222222 !important;
    border-color: #444444 !important;
    color: #ffffff !important;
}

html.back-dark #search-bar input::placeholder {
    color: #999999 !important;
}

html.back-dark #search-bar svg {
    color: #999999 !important;
}

html.back-dark #mobile-menu {
    background-color: #111111 !important;
    border-color: #333333 !important;
}

/* WordPress Admin Bar Compatibility */
#main-header {
    top: 0;
}

/* When admin bar is present */
body.admin-bar #main-header {
    top: 32px;
}

/* Tablet admin bar */
@media screen and (max-width: 782px) {
    body.admin-bar #main-header {
        top: 46px;
    }
}

/* Mobile - admin bar is hidden */
@media screen and (max-width: 600px) {
    body.admin-bar #main-header {
        top: 0;
    }
}

/* Content Spacing - Fallback CSS if JavaScript fails */
#header-spacer {
    padding-top: 64px; /* Default header height */
}

/* When admin bar is present - increase spacing */
body.admin-bar #header-spacer {
    padding-top: 96px; /* 32px admin bar + 64px header */
}

/* Tablet admin bar spacing */
@media screen and (max-width: 782px) {
    body.admin-bar #header-spacer {
        padding-top: 110px; /* 46px admin bar + 64px header */
    }
}

/* Mobile - no admin bar, just header */
@media screen and (max-width: 600px) {
    body.admin-bar #header-spacer {
        padding-top: 64px; /* Just header height */
    }
}

/* Dropdown Menu Styles - Mixed Tailwind and CSS for reliability */
.menu-item-has-children {
    position: relative;
}

.menu-item-has-children .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 0.5rem 0;
    min-width: 12rem;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease-out;
    font-family: 'Spartan', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.875rem;
    font-weight: 500;
}

.menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-item-has-children .sub-menu li {
    display: block;
    margin: 0;
    list-style: none;
}

.menu-item-has-children .sub-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: #374151;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
    font-family: 'Spartan', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.875rem;
    font-weight: 500;
}

.menu-item-has-children .sub-menu a:hover {
    background-color: #f9fafb;
    color: #0088cb;
}

/* Dropdown arrow */
.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* Also handle the WordPress default class */
.has-sub > a::after {
    content: '';
    display: inline-block;
    margin-left: 0.5rem;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.has-sub:hover > a::after {
    transform: rotate(180deg);
}

/* Dark mode dropdown styles */
html.back-dark .menu-item-has-children .sub-menu,
html.back-dark .has-sub .sub-menu {
    background-color: #1f2937;
    border-color: #374151;
}

html.back-dark .menu-item-has-children .sub-menu a,
html.back-dark .has-sub .sub-menu a {
    color: #e5e7eb;
}

html.back-dark .menu-item-has-children .sub-menu a:hover,
html.back-dark .has-sub .sub-menu a:hover {
    background-color: #374151;
    color: #0088cb;
}

/* Ensure all navigation text uses proper fonts - Frontend only */
body:not(.wp-admin) nav a, 
body:not(.wp-admin) nav ul, 
body:not(.wp-admin) nav li {
    @apply font-sans font-medium;
}

/* Frontend-only header navigation fonts */
body:not(.wp-admin) #main-header nav,
body:not(.wp-admin) #main-header nav ul,
body:not(.wp-admin) #main-header nav li,
body:not(.wp-admin) #main-header nav a {
    font-family: 'Spartan', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
}

/* Main navigation link styles - frontend only */
body:not(.wp-admin) #main-header nav > ul > li > a {
    color: #374151;
    transition: color 0.2s ease;
    text-decoration: none;
    font-family: 'Spartan', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#main-header nav > ul > li > a:hover {
    color: #0088cb;
}

/* Dark mode main navigation */
html.back-dark #main-header nav > ul > li > a {
    color: #ffffff !important;
}

html.back-dark #main-header nav > ul > li > a:hover {
    color: #0088cb !important;
}


/* Article content typography and spacing */
.entry-content {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75;
    color: #000000 !important;
}

.entry-content p {
    margin-bottom: 1.5rem;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.entry-content h1 {
    font-size: 2.25rem;
}

.entry-content h2 {
    font-size: 1.875rem;
}

.entry-content h3 {
    font-size: 1.5rem;
}

.entry-content h4 {
    font-size: 1.25rem;
}

.entry-content ul,
.entry-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.entry-content ul li,
.entry-content ol li {
    margin-bottom: 0.5rem;
}

.entry-content ul {
    list-style-type: disc;
}

.entry-content ol {
    list-style-type: decimal;
}

.entry-content blockquote {
    margin: 2rem 0;
    padding-left: 1.5rem;
    border-left: 4px solid #e5e7eb;
    font-style: italic;
    color: #6b7280;
}

.entry-content pre {
    margin: 2rem 0;
    padding: 1.5rem;
    background-color: #f3f4f6;
    border-radius: 0.5rem;
    overflow-x: auto;
}

.entry-content code {
    background-color: #f3f4f6;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.entry-content img {
    margin: 2rem 0;
}

.entry-content figure {
    margin: 2rem 0;
}

.entry-content figcaption {
    margin-top: 0.75rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

.entry-content a {
    color: #0088cb;
    text-decoration: underline;
}

.entry-content a:hover {
    color: #0066a0;
}

.entry-content hr {
    margin: 3rem 0;
    border-color: #e5e7eb;
}

.entry-content table {
    margin: 2rem 0;
    width: 100%;
    border-collapse: collapse;
}

.entry-content table th,
.entry-content table td {
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
}

.entry-content table th {
    background-color: #f9fafb;
    font-weight: 600;
}

/* First paragraph after heading should have less top margin */
.entry-content h1 + p,
.entry-content h2 + p,
.entry-content h3 + p,
.entry-content h4 + p,
.entry-content h5 + p,
.entry-content h6 + p {
    margin-top: 0.75rem;
}

/* Dark mode for article content */
html.back-dark .entry-content {
    color: #e5e7eb;
}

html.back-dark .entry-content blockquote {
    border-left-color: #4b5563;
    color: #d1d5db;
}

html.back-dark .entry-content pre {
    background-color: #1f2937;
}

html.back-dark .entry-content code {
    background-color: #374151;
    color: #e5e7eb;
}

html.back-dark .entry-content table th {
    background-color: #1f2937;
}

html.back-dark .entry-content table th,
html.back-dark .entry-content table td {
    border-color: #4b5563;
}

/* Responsive Video Embeds */
.entry-content iframe[src*="youtube.com"],
.entry-content iframe[src*="youtube-nocookie.com"],
.entry-content iframe[src*="vimeo.com"],
.entry-content iframe[src*="dailymotion.com"],
.entry-content iframe[src*="videopress.com"],
.entry-content iframe[src*="wordpress.tv"],
.entry-content iframe[src*="hulu.com"],
.entry-content iframe[src*="twitch.tv"],
.entry-content iframe[src*="facebook.com/plugins/video"],
.entry-content iframe[src*="twitter.com"],
.entry-content iframe[src*="tiktok.com"],
.entry-content iframe[src*="instagram.com"],
.entry-content iframe[src*="spotify.com"],
.entry-content iframe[src*="soundcloud.com"],
.entry-content video,
.entry-content embed,
.entry-content object {
    max-width: 100% !important;
    height: auto;
}

/* Direct iframe embeds with 16:9 aspect ratio */
.entry-content > iframe[src*="youtube.com"],
.entry-content > iframe[src*="youtube-nocookie.com"],
.entry-content > iframe[src*="vimeo.com"],
.entry-content > iframe[src*="dailymotion.com"],
.entry-content > iframe[src*="facebook.com/plugins/video"],
.entry-content p > iframe[src*="youtube.com"],
.entry-content p > iframe[src*="youtube-nocookie.com"],
.entry-content p > iframe[src*="vimeo.com"],
.entry-content p > iframe[src*="dailymotion.com"],
.entry-content p > iframe[src*="facebook.com/plugins/video"],
.entry-content div > iframe[src*="youtube.com"],
.entry-content div > iframe[src*="youtube-nocookie.com"],
.entry-content div > iframe[src*="vimeo.com"],
.entry-content div > iframe[src*="dailymotion.com"],
.entry-content div > iframe[src*="facebook.com/plugins/video"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
}

/* WordPress oEmbed responsive wrapper */
.entry-content .wp-block-embed,
.entry-content .wp-embed-responsive {
    position: relative;
    max-width: 100%;
}

.entry-content .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.entry-content .wp-block-embed__wrapper iframe,
.entry-content .wp-block-embed__wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* WordPress video shortcode */
.entry-content .wp-video,
.entry-content .mejs-container {
    width: 100% !important;
    height: auto !important;
}

.entry-content video.wp-video-shortcode {
    max-width: 100% !important;
    height: auto !important;
}

/* Fallback for any video container */
.entry-content .video-container,
.entry-content .fluid-width-video-wrapper,
.entry-content .responsive-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.entry-content .video-container iframe,
.entry-content .video-container video,
.entry-content .fluid-width-video-wrapper iframe,
.entry-content .fluid-width-video-wrapper video,
.entry-content .responsive-embed iframe,
.entry-content .responsive-embed video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Twitter embeds responsive */
.entry-content .twitter-tweet {
    max-width: 100% !important;
    margin: 1.5rem auto !important;
}

/* Instagram embeds responsive */
.entry-content .instagram-media {
    max-width: 100% !important;
    margin: 1.5rem auto !important;
}

/* TikTok embeds responsive */
.entry-content .tiktok-embed {
    max-width: 100% !important;
    margin: 1.5rem auto !important;
}

/* Ensure all video embeds maintain aspect ratio on resize */
@media (max-width: 768px) {
    .entry-content iframe[src*="youtube.com"],
    .entry-content iframe[src*="youtube-nocookie.com"],
    .entry-content iframe[src*="vimeo.com"],
    .entry-content iframe[src*="dailymotion.com"],
    .entry-content iframe[src*="facebook.com/plugins/video"] {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}

/* Article Page: Remove border-radius from all images */
.entry-content img,
article img,
.prose img {
    border-radius: 0 !important;
}

/* Also remove rounded classes from images */
img.rounded,
img.rounded-sm,
img.rounded-md, 
img.rounded-lg,
img.rounded-xl,
img.rounded-2xl,
img.rounded-3xl,
img.rounded-full {
    border-radius: 0 !important;
}

/* Article Page: Add left-aligned captions under images with 40px padding */
.entry-content img + *:not(img),
.entry-content figure img,
.entry-content .wp-caption img {
    margin-bottom: 0 !important;
}

.entry-content figcaption,
.entry-content .wp-caption-text,
.entry-content .wp-block-image figcaption {
    text-align: left !important;
    margin-top: 8px !important;
    margin-bottom: 40px !important;
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    font-style: italic;
    line-height: 1.4;
}

/* Dark mode caption color */
html.back-dark .entry-content figcaption,
html.back-dark .entry-content .wp-caption-text,
html.back-dark .entry-content .wp-block-image figcaption {
    color: #9ca3af !important;
}

/* Ensure captions appear for images without explicit figure wrapper */
.entry-content img[title]:after {
    content: attr(title);
    display: block;
    text-align: left;
    margin-top: 8px;
    margin-bottom: 20px;
    font-size: 0.875rem;
    color: #6b7280;
    font-style: italic;
    line-height: 1.4;
}