/* ===================================
   CUSTOM DESIGN SYSTEM VARIABLES
   Generated for Luxury & Lifestyle
   FIXED: Read more buttons have guaranteed contrast
   NEW: Font size optimization for readability
   =================================== */

:root {
    /* Color Scheme: Sapphire Night */
    --color-primary: #0a1929;
    --color-accent: #0f52ba;
    --color-text: #e3f2fd;
    --color-background: #030810;
    --color-on-accent: #ffffff;  /* computed: readable on accent */
    
    /* Typography with Smart Scaling */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    --heading-scale: 1.02;
    --body-scale: 1.0;
    
    /* Responsive font sizes with minimum guarantees */
    --font-size-h1: calc(2.5rem * var(--heading-scale));
    --font-size-h2: calc(2rem * var(--heading-scale));
    --font-size-h3: calc(1.75rem * var(--heading-scale));
    --font-size-h4: calc(1.5rem * var(--heading-scale));
    --font-size-nav: calc(1rem * var(--body-scale));
    --font-size-body: calc(1rem * var(--body-scale));
    --font-size-small: calc(0.875rem * var(--body-scale));
    
    /* Mobile adjustments */
    --font-size-h1-mobile: calc(2rem * var(--heading-scale));
    --font-size-h2-mobile: calc(1.75rem * var(--heading-scale));
    --font-size-nav-mobile: calc(1.1rem * var(--body-scale));
    
    /* Gradients */
    --hero-gradient: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.8) 100%);
}

/* CRITICAL UI ELEMENTS - GUARANTEED MINIMUM SIZES */

/* Navigation - Must be readable */
nav, nav a, .noble-ember7, header nav a, 
#mobile-menu a, .mobile-menu a {
    font-size: var(--font-size-nav) !important;
    font-family: var(--font-body) !important;
    min-height: 44px; /* Minimum touch target */
    display: flex;
    align-items: center;
}

/* Mobile navigation - slightly larger for touch */
@media (max-width: 768px) {
    nav, nav a, .noble-ember7, header nav a,
    #mobile-menu a, .mobile-menu a {
        font-size: var(--font-size-nav-mobile) !important;
        min-height: 48px !important;
        padding: 0.75rem 1rem !important;
    }
}

/* Hero/Intro Text - Must be prominent and readable */
.hero h1, .intro h1, .maple-slate2 h1,
.hero-title, .intro-title, .main-heading {
    font-size: var(--font-size-h1) !important;
    font-family: var(--font-heading) !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
}

.hero h2, .intro h2, .maple-slate2 h2,
.hero-subtitle, .intro-subtitle {
    font-size: var(--font-size-h2) !important;
    font-family: var(--font-heading) !important;
    line-height: 1.3 !important;
}

.hero p, .intro p, .maple-slate2 p,
.hero-description, .intro-description {
    font-size: calc(var(--font-size-body) * 1.1) !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
}

/* Mobile hero adjustments */
@media (max-width: 768px) {
    .hero h1, .intro h1, .maple-slate2 h1,
    .hero-title, .intro-title, .main-heading {
        font-size: var(--font-size-h1-mobile) !important;
    }
    
    .hero h2, .intro h2, .maple-slate2 h2,
    .hero-subtitle, .intro-subtitle {
        font-size: var(--font-size-h2-mobile) !important;
    }
}

/* FORCE COLOR SCHEME APPLICATION - Override Tailwind classes */
body, body.reed-cove4 {
    background-color: var(--color-background) !important;
    color: var(--color-text) !important;
    font-family: var(--font-body);
    font-size: var(--font-size-body) !important;
}

/* All text elements */
body * {
    color: inherit;
}

/* Heading sizes with font scaling */
h1, .gale-iris6, .text-5xl {
    font-size: var(--font-size-h1) !important;
    font-family: var(--font-heading) !important;
    line-height: 1.2 !important;
}

h2, .zephyr-tor2 {
    font-size: var(--font-size-h2) !important;
    font-family: var(--font-heading) !important;
    line-height: 1.3 !important;
}

h3, .iris-iris2 {
    font-size: var(--font-size-h3) !important;
    font-family: var(--font-heading) !important;
    line-height: 1.4 !important;
}

h4, .bay-dune9 {
    font-size: var(--font-size-h4) !important;
    font-family: var(--font-heading) !important;
}

/* Body text with proper scaling */
p, .iris-maple3, li, span:not(.social-icon) {
    font-size: var(--font-size-body) !important;
    font-family: var(--font-body) !important;
    line-height: 1.6 !important;
}

/* Small text with scaling */
.gale-oak6, .harbor-quill5, small {
    font-size: var(--font-size-small) !important;
    font-family: var(--font-body) !important;
}

/* Header and Navigation */
header, header.kite-zephyr2, .kite-zephyr2 {
    background-color: var(--color-primary) !important;
}

/* Mobile menu */
#mobile-menu {
    background-color: var(--color-primary) !important;
}

/* Cards and Sections */
.arch-quill7, .arch-quill7.fern-iris7, .arch-quill7.iris-arch4,
.aster-wren7, .aster-lark6, .dune-maple2, .card {
    background-color: color-mix(in srgb, var(--color-primary) 85%, black 15%) !important;
    border-color: color-mix(in srgb, var(--color-primary) 70%, white 30%) !important;
}

/* Even darker variant for nested cards */
.reed-cove4, .reed-cove4.iris-arch4 {
    background-color: color-mix(in srgb, var(--color-primary) 60%, black 40%) !important;
}

/* FIXED: Read More Button Specific Styling - High Contrast Guaranteed */
.slate-slate7, 
.aster-lark6 a[href*="blog"][href$=".php"]:last-child,
.aster-lark6 .read-more {
    /* Use inverted colors for maximum contrast */
    background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 80%, white 20%)) !important;
    color: color-mix(in srgb, var(--color-background) 90%, black 10%) !important;
    border: 2px solid var(--color-accent) !important;
    font-weight: 600 !important;
    font-size: calc(var(--font-size-body) * 1.05) !important; /* Slightly larger than body */
    padding: 0.75rem 1.25rem !important; /* More padding for readability */
    border-radius: 0.375rem !important;
    display: inline-block !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 44px !important; /* Minimum touch target */
}

/* Read More Button Hover State - Even more prominent */
.slate-slate7:hover,
.aster-lark6 a[href*="blog"][href$=".php"]:last-child:hover,
.aster-lark6 .read-more:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 120%, white 20%), var(--color-accent)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5), 0 0 20px color-mix(in srgb, var(--color-accent) 50%, transparent 50%) !important;
    border-color: color-mix(in srgb, var(--color-accent) 120%, white 20%) !important;
}

/* Add a shine effect on hover */
.slate-slate7::before,
.aster-lark6 a[href*="blog"][href$=".php"]:last-child::before,
.aster-lark6 .read-more::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s;
}

.slate-slate7:hover::before,
.aster-lark6 a[href*="blog"][href$=".php"]:last-child:hover::before,
.aster-lark6 .read-more:hover::before {
    left: 100%;
}

/* Other Buttons - Primary (Form submits, etc) */
.bg-blue-500:not(.slate-slate7), .cove-cove4, button[type="submit"],
.bg-blue-500:not(:hover):not(.slate-slate7), .btn {
    background-color: var(--color-accent) !important;
    color: var(--color-on-accent) !important;
    border: 1px solid color-mix(in srgb, var(--color-accent) 70%, white 30%) !important;
    font-size: var(--font-size-body) !important;
    min-height: 44px !important;
    padding: 0.75rem 1.25rem !important;
}

.bg-blue-500:hover:not(.slate-slate7), .bg-blue-600:not(.slate-slate7), 
.hover\:bg-blue-600:hover:not(.slate-slate7),
.btn:hover, button[type="submit"]:hover {
    background-color: color-mix(in srgb, var(--color-accent) 80%, white 20%) !important;
    color: var(--color-on-accent) !important;
}

/* Secondary buttons */
.bg-gray-600, .bg-gray-500 {
    background-color: color-mix(in srgb, var(--color-primary) 70%, white 30%) !important;
    font-size: var(--font-size-body) !important;
    min-height: 44px !important;
}

.bg-gray-600:hover, .bg-gray-500:hover, .hover\:bg-gray-700:hover {
    background-color: color-mix(in srgb, var(--color-primary) 60%, white 40%) !important;
}

/* Text Colors - Headings */
.wren-gale4, .tor-wren7, h1, h2, h3, h4, h5, h6,
.gale-iris6, .zephyr-tor2, .iris-iris2, .bay-dune9 {
    color: var(--color-accent) !important;
    font-family: var(--font-heading);
}

/* Regular text */
.dune-noble7, .dune-dune6, .text-white, p, li, span:not(.social-icon) {
    color: color-mix(in srgb, var(--color-text) 90%, black 10%) !important;
}

/* Lighter text variants */
.ember-bay3, .maple-fern4, .gale-oak6 {
    color: color-mix(in srgb, var(--color-text) 70%, black 30%) !important;
}

/* Footer */
footer, footer.arch-quill7 {
    background-color: color-mix(in srgb, var(--color-primary) 70%, black 30%) !important;
}

/* Forms and Inputs */
input, textarea, select, .juno-lark5 {
    background-color: color-mix(in srgb, var(--color-background) 90%, white 10%) !important;
    border: 1px solid color-mix(in srgb, var(--color-primary) 50%, white 50%) !important;
    color: var(--color-text) !important;
    font-size: var(--font-size-body) !important;
    min-height: 44px !important;
    padding: 0.75rem !important;
}

input:focus, textarea:focus, select:focus, .juno-lark5:focus {
    border-color: var(--color-accent) !important;
    outline: 2px solid color-mix(in srgb, var(--color-accent) 50%, transparent 50%) !important;
    outline-offset: 2px;
}

/* Links */
a:not(.btn):not(.social-icon):not(.slate-slate7):not(.bg-blue-500):not(.noble-quill8):not([href*="blog"][href$=".php"]) {
    color: var(--color-accent) !important;
    font-size: inherit !important;
}

a:not(.btn):not(.social-icon):not(.slate-slate7):not(.bg-blue-500):not(.noble-quill8):not([href*="blog"][href$=".php"]):hover {
    color: color-mix(in srgb, var(--color-accent) 70%, white 30%) !important;
}

/* Social Icons - preserve some contrast */
.social-icon {
    color: color-mix(in srgb, var(--color-text) 60%, black 40%) !important;
    font-size: 1.25rem !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.social-icon:hover {
    color: var(--color-accent) !important;
}

/* Newsletter/Contact section background */
#contact, .lark-yarrow8 {
    background-color: color-mix(in srgb, var(--color-background) 95%, var(--color-primary) 5%) !important;
}

/* Mobile banner sections */
.kite-iris2, .juno-aster5 {
    background-color: var(--color-primary) !important;
}

/* Parallax Overlays with custom gradient */
.maple-slate2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--hero-gradient);
    z-index: 1;
}

.maple-slate2 > * {
    position: relative;
    z-index: 2;
}

/* Cookie consent popup */
#cookieConsent {
    background-color: var(--color-primary) !important;
    color: var(--color-text) !important;
    font-size: var(--font-size-body) !important;
}

/* Search forms */
.iris-tor5, #expandable-search {
    background-color: var(--color-primary) !important;
}

/* Back to top button */
#returnToTopButton {
    background-color: var(--color-accent) !important;
    min-width: 48px !important;
    min-height: 48px !important;
}

#returnToTopButton:hover {
    background-color: color-mix(in srgb, var(--color-accent) 80%, white 20%) !important;
}

/* Carousel navigation buttons */
.carousel-nav {
    background-color: var(--color-primary) !important;
    color: var(--color-text) !important;
    min-width: 44px !important;
    min-height: 44px !important;
}

.carousel-nav:hover:not(:disabled) {
    background-color: var(--color-accent) !important;
}

/* Button Hover Effects with Theme Colors */

.btn:hover:not(.slate-slate7), button:hover:not(.slate-slate7), a.btn:hover:not(.slate-slate7) {
    box-shadow: 0 0 20px var(--color-accent), 0 0 40px var(--color-accent);
    transform: translateY(-2px);
    background-color: var(--color-accent) !important;
    transition: all 0.3s ease;
}

/* Card Hover Effects with Theme Colors - NOW APPLIES TO BLOG CARDS TOO */

/* Shadow pop effect - applies to features AND blog cards */
.aster-wren7, .aster-lark6, .card {
    transition: all 0.3s ease;
}
.aster-wren7:hover, .aster-lark6:hover, .card:hover {
    box-shadow: 0 20px 40px color-mix(in srgb, var(--color-accent) 30%, transparent 70%);
    transform: translateY(-10px);
}

/* Section Dividers */


/* Image Filters */

/* Grayscale hover effect for all card images */
.feature-image, .aster-lark6 img, .card img {
    filter: grayscale(100%);
    transition: filter 0.3s;
}
.feature-image:hover, .aster-lark6:hover img, .card:hover img {
    filter: grayscale(0%);
}

/* SIMPLIFIED Blog Layout Style: adaptive_2_3 */

/* ========================================
   ADAPTIVE BLOG LAYOUT SYSTEM
   Intelligently adjusts based on post count
   ======================================== */

/* Base blog card structure - consistent for all layouts */
.aster-lark6 {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: color-mix(in srgb, var(--color-primary) 85%, black 15%);
    border-radius: 0.5rem;
}

.aster-lark6 img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.aster-lark6 .iris-fern6 {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.aster-lark6 h3, .aster-lark6 h4 {
    margin-bottom: 0.75rem;
    font-size: calc(var(--font-size-h4) * 1.1) !important;
    line-height: 1.4;
    color: var(--color-accent);
    font-family: var(--font-heading);
}

.aster-lark6 p {
    margin-bottom: 1rem;
    flex-grow: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: color-mix(in srgb, var(--color-text) 85%, black 15%);
    font-size: var(--font-size-body) !important;
    line-height: 1.6;
}

/* FIXED: Ensure Read More button is always visible and prominent */
.aster-lark6 .read-more,
.aster-lark6 a[href*="blog"][href$=".php"]:last-child {
    /* These styles are handled by the main Read More button styles above */
    margin-top: auto;
    align-self: flex-start;
}

/* Card styling variations for visual interest */
.aster-lark6:nth-child(odd) {
    background: color-mix(in srgb, var(--color-primary) 80%, black 20%);
}

.aster-lark6:nth-child(even) {
    background: color-mix(in srgb, var(--color-primary) 90%, black 10%);
}

/* Subtle gradient overlays on images */
.aster-lark6 img {
    position: relative;
}

.aster-lark6:hover img {
    opacity: 0.9;
}

/* Adaptive 2-3 Layout: Adjusts intelligently based on post count */
@media (min-width: 1024px) {
    .gale-oak7 {
        display: grid;
        gap: 2rem;
    }
    
    /* 5 posts: 2 centered above, 3 below */
    .gale-oak7:has(.aster-lark6:nth-child(5)):not(:has(.aster-lark6:nth-child(6))) {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .gale-oak7:has(.aster-lark6:nth-child(5)):not(:has(.aster-lark6:nth-child(6))) .aster-lark6:nth-child(1) {
        grid-column: 2 / span 2;
    }
    
    .gale-oak7:has(.aster-lark6:nth-child(5)):not(:has(.aster-lark6:nth-child(6))) .aster-lark6:nth-child(2) {
        grid-column: 4 / span 2;
    }
    
    .gale-oak7:has(.aster-lark6:nth-child(5)):not(:has(.aster-lark6:nth-child(6))) .aster-lark6:nth-child(3) {
        grid-column: 1 / span 2;
    }
    
    .gale-oak7:has(.aster-lark6:nth-child(5)):not(:has(.aster-lark6:nth-child(6))) .aster-lark6:nth-child(4) {
        grid-column: 3 / span 2;
    }
    
    .gale-oak7:has(.aster-lark6:nth-child(5)):not(:has(.aster-lark6:nth-child(6))) .aster-lark6:nth-child(5) {
        grid-column: 5 / span 2;
    }
    
    /* 6 posts: 3-3 (two rows of three) */
    .gale-oak7:has(.aster-lark6:nth-child(6)):not(:has(.aster-lark6:nth-child(7))) {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* 7 posts: 3-3-1 (centered last one) */
    .gale-oak7:has(.aster-lark6:nth-child(7)):not(:has(.aster-lark6:nth-child(8))) {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .gale-oak7:has(.aster-lark6:nth-child(7)):not(:has(.aster-lark6:nth-child(8))) .aster-lark6:nth-child(1),
    .gale-oak7:has(.aster-lark6:nth-child(7)):not(:has(.aster-lark6:nth-child(8))) .aster-lark6:nth-child(2),
    .gale-oak7:has(.aster-lark6:nth-child(7)):not(:has(.aster-lark6:nth-child(8))) .aster-lark6:nth-child(3) {
        grid-column: span 2;
    }
    
    .gale-oak7:has(.aster-lark6:nth-child(7)):not(:has(.aster-lark6:nth-child(8))) .aster-lark6:nth-child(4),
    .gale-oak7:has(.aster-lark6:nth-child(7)):not(:has(.aster-lark6:nth-child(8))) .aster-lark6:nth-child(5),
    .gale-oak7:has(.aster-lark6:nth-child(7)):not(:has(.aster-lark6:nth-child(8))) .aster-lark6:nth-child(6) {
        grid-column: span 2;
    }
    
    .gale-oak7:has(.aster-lark6:nth-child(7)):not(:has(.aster-lark6:nth-child(8))) .aster-lark6:nth-child(7) {
        grid-column: 3 / span 2;
    }
    
    /* 8 posts: 3-3-2 (centered last row) */
    .gale-oak7:has(.aster-lark6:nth-child(8)):not(:has(.aster-lark6:nth-child(9))) {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .gale-oak7:has(.aster-lark6:nth-child(8)):not(:has(.aster-lark6:nth-child(9))) .aster-lark6:nth-child(1),
    .gale-oak7:has(.aster-lark6:nth-child(8)):not(:has(.aster-lark6:nth-child(9))) .aster-lark6:nth-child(2),
    .gale-oak7:has(.aster-lark6:nth-child(8)):not(:has(.aster-lark6:nth-child(9))) .aster-lark6:nth-child(3) {
        grid-column: span 2;
    }
    
    .gale-oak7:has(.aster-lark6:nth-child(8)):not(:has(.aster-lark6:nth-child(9))) .aster-lark6:nth-child(4),
    .gale-oak7:has(.aster-lark6:nth-child(8)):not(:has(.aster-lark6:nth-child(9))) .aster-lark6:nth-child(5),
    .gale-oak7:has(.aster-lark6:nth-child(8)):not(:has(.aster-lark6:nth-child(9))) .aster-lark6:nth-child(6) {
        grid-column: span 2;
    }
    
    .gale-oak7:has(.aster-lark6:nth-child(8)):not(:has(.aster-lark6:nth-child(9))) .aster-lark6:nth-child(7) {
        grid-column: 2 / span 2;
    }
    
    .gale-oak7:has(.aster-lark6:nth-child(8)):not(:has(.aster-lark6:nth-child(9))) .aster-lark6:nth-child(8) {
        grid-column: 4 / span 2;
    }
    
    /* 9+ posts: standard 3-column grid */
    .gale-oak7:has(.aster-lark6:nth-child(9)) {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Default for 4 or fewer posts */
    .gale-oak7:not(:has(.aster-lark6:nth-child(5))) {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
        margin: 0 auto;
    }
}

/* Tablet layout */
@media (min-width: 768px) and (max-width: 1023px) {
    .gale-oak7 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* Mobile layout */
@media (max-width: 767px) {
    .gale-oak7 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Additional Mobile Optimizations */
@media (max-width: 768px) {
    /* Ensure all clickable elements are touch-friendly */
    button, a, input, select, textarea {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Increase font sizes slightly on mobile for better readability */
    body {
        font-size: calc(var(--font-size-body) * 1.05) !important;
    }
    
    /* Larger touch targets for navigation */
    nav a, .noble-ember7 {
        padding: 1rem !important;
        min-height: 48px !important;
    }
}