/* Montserrat font for all headings with system font fallback */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Consistent font weight for all headings */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-weight: 700;
}

/* Ensure prose headings also use Montserrat with fallback */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.bg-tan-50 {
    background-color: rgba(201, 71, 24, 0.05);
}
.bg-tan-100 {
    background-color: rgba(201, 71, 24, 0.1);
}
/* Orange triangle list markers - uses accent color for visual emphasis */
.orange-triangle {
    padding-left: 18px;
}
.orange-triangle > li:before {
    position: relative;
    content: '\203A';
    font-size: 140%;
    color: #c94718; /* Accent color - OK for visual emphasis on list markers */
    left: -20px;
}
body.boxes-page-10 div[data-box="75"] > .container {
    max-width: none !important;
}
body.boxes-page-10 div[data-box="86"] > .container {
    max-width: none !important;
}
body.boxes-page-10 div[data-box="81"] > .container,
body.boxes-page-10 div[data-box="81"] > .container > .container,
body.boxes-page-10 div[data-box="81"] > .container > .container > .container {
    max-width: none !important;
}
body.boxes-page-17 div[data-box="146"] > .container > .container {
    padding-bottom: 1rem !important;
}
.prose *:not(i) {
    color: inherit;
}
/*body.boxes-page-15 div[data-box="506"] {*/
/*    margin-top: 80px;*/
/*}*/
/*body.boxes-page-13 div[data-box="508"] {*/
/*    margin-top: 80px;*/
/*}*/
/*body.boxes-page-14 div[data-box="511"] {*/
/*    margin-top: 80px;*/
/*}*/
/*body.boxes-page-16 div[data-box="510"] {*/
/*    margin-top: 80px;*/
/*}*/
/*body.boxes-page-21 div[data-box="204"] {*/
/*    margin-top: 80px;*/
/*}*/
/*body.boxes-page-23 div[data-box="229"] {*/
/*    margin-top: 80px;*/
/*}*/
/*body.boxes-page-23 div[data-box="227"] {*/
/*    margin-top: 80px;*/
/*}*/

/* Custom button variants */
.btn-primary {
    background-color: #552988;
    border-color: #552988;
    color: white;
}

.btn-primary:hover {
    background-color: #442070;
    border-color: #442070;
    color: white;
}

.btn-accent {
    background-color: #c94718;
    border-color: #c94718;
    color: white;
}

.btn-accent:hover {
    background-color: #a73a14;
    border-color: #a73a14;
}

.btn-complement {
    background-color: #714d9c;
    border-color: #714d9c;
    color: white;
}

.btn-complement:hover {
    background-color: #5a3d7f;
    border-color: #5a3d7f;
}

.btn-outline.btn-primary {
    background-color: transparent;
    border-color: #552988;
    color: #552988;
}

.btn-outline.btn-primary:hover {
    background-color: #552988;
    border-color: #552988;
    color: white;
}

.btn-outline.btn-accent {
    background-color: transparent;
    border-color: #c94718;
    color: #c94718;
}

.btn-outline.btn-accent:hover {
    background-color: #c94718;
    border-color: #c94718;
    color: white;
}

.btn-outline.btn-complement {
    background-color: transparent;
    border-color: #714d9c;
    color: #714d9c;
}

.btn-outline.btn-complement:hover {
    background-color: #714d9c;
    border-color: #714d9c;
    color: white;
}

/* Ensure button text stays white on hover in header */
header .btn:hover,
header .btn-primary:hover,
header .btn-accent:hover,
header .btn-complement:hover {
    color: white !important;
}

/* Disable button animation on load */
.btn {
    animation: none !important;
}

/* CTA Button hover colors */
.hover\:bg-primary-dark:hover {
    background-color: #442070;
}

.hover\:bg-accent-dark:hover {
    background-color: #a73a14;
}

/* Timeline section styles */
.timeline-start {
    padding-right: 16px;
    text-align: right;
}

.timeline-end {
    padding-left: 16px;
    text-align: left;
}

/* Mobile Header Styles */
@media (max-width: 1023px) {
    /* Ensure header dropdowns are properly positioned */
    header .container {
        position: relative;
    }
    
    /* Mobile menu and search dropdown styles */
    .mobile-header-universal-search,
    header [x-show="mobileMenu"],
    header [x-show="search"] {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
    
    /* Smooth scrolling for mobile dropdowns */
    .mobile-header-universal-search::-webkit-scrollbar,
    header [x-show="mobileMenu"]::-webkit-scrollbar {
        width: 6px;
    }
    
    .mobile-header-universal-search::-webkit-scrollbar-track,
    header [x-show="mobileMenu"]::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .mobile-header-universal-search::-webkit-scrollbar-thumb,
    header [x-show="mobileMenu"]::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }
    
    /* Ensure mobile search input is properly styled */
    .mobile-header-universal-search .universal-search-input {
        width: 100%;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Mobile menu link styles */
    header nav a {
        -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
    }
    
    /* Ensure buttons and icons are easily tappable */
    header button {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Mobile menu items should be full width on small screens */
    header [x-show="mobileMenu"] .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Alpine.js transition classes for smooth animations */
[x-cloak] { 
    display: none !important; 
}

/* Ensure proper z-index layering */
header {
    z-index: 50;
}

header .mobile-header-universal-search {
    z-index: 60;
}

header [x-show="mobileMenu"] {
    z-index: 55;
}

/* Optional: Add backdrop for better UX */
.mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 45;
}