/**
 * Laravel Overrides for WordPress Theme
 * This file ensures WordPress styles match Laravel styles from the main site
 */

/* Typography - Override WordPress heading classes to match Laravel _base.scss */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'rift', sans-serif !important;
    font-weight: 400 !important;
    color: #b9e0f2 !important;
}

h2, .h2 {
    font-size: 68px !important;
    line-height: 1.148em !important;
}

h3, .h3 {
    font-size: 64px !important;
    line-height: 1.25em !important;
}

h4, .h4 {
    font-size: 32px !important;
    line-height: 1.25em !important;
}

h5, .h5 {
    font-size: 24px !important;
    line-height: 1.25em !important;
}

h6, .h6 {
    font-size: 22px !important;
}

/* h-color-reverse class for dark headings (like in Laravel nav) */
.h-color-reverse,
.h1.h-color-reverse, .h2.h-color-reverse, .h3.h-color-reverse,
.h4.h-color-reverse, .h5.h-color-reverse, .h6.h-color-reverse {
    color: #0f172a !important;
}

/* Fix widget titles - they should use normal styling, not huge h6 sizes */
#secondary .widget-title,
#secondary .widget h3,
#secondary .widgettitle,
#secondary h3 {
    font-size: 14px !important;
    text-transform: uppercase !important;
    color: #444 !important;
    font-weight: 600 !important;
    margin-bottom: 25px !important;
}

/* Fix WordPress entry titles (blog post titles) - use darker color */
.entry-title,
.entry-title a {
    color: #444 !important;
    font-size: 32px !important;
}

/* Globe button - Remove unwanted hover/highlight states and focus ring */
.sidenavbtn,
.sidenavbtn:hover,
.sidenavbtn:focus,
.sidenavbtn:active,
.sidenavbtn:focus-visible {
    background: transparent !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Fix sidebar alignment - ensure it aligns with main content */
#secondary.widget-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#secondary.widget-area .well {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Fix AddThis widget alignment - remove top spacing */
#secondary .addthis_jumbo_share {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    padding-top: 0 !important;
}

/* Align both columns at the top */
.main-content-area .row {
    align-items: flex-start !important;
}

#primary.content-area,
#secondary.widget-area {
    align-self: flex-start !important;
}

/* Ensure content areas align properly */
.main-content-inner,
#secondary {
    vertical-align: top !important;
}

/* Fix main content area to reduce excessive top space */
#primary.content-area {
    margin-top: 0 !important;
}

/* White container around WordPress content (like membership inquiry page) */
.main-content-area {
    background: #ffffff !important;
    padding: 40px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Breadcrumb styling to match Laravel site exactly */
#breadcrumbs {
    margin-bottom: 5px;
    order: -1;  /* Move breadcrumbs above the title */
    font-size: 15px !important;  /* Match Laravel small text */
}

#breadcrumbs ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    position: relative;
    z-index: 1;
}

#breadcrumbs li {
    padding: 0 !important;
    margin: 0 !important;
    color: #94A9C9 !important;  /* color-gray-500 */
    display: flex !important;
    align-items: center !important;
}

#breadcrumbs li:not(:last-child)::after {
    content: "\f054" !important;  /* FontAwesome chevron-right */
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 0.75rem !important;  /* small */
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
    color: #94A9C9 !important;  /* text-base-color / color-gray-500 */
}

#breadcrumbs a {
    color: #94A9C9 !important;  /* color-gray-500 */
    text-decoration: none !important;
    transition: color 0.2s ease;
}

#breadcrumbs a:hover {
    color: #b9e0f2 !important;  /* Hover to color-linear */
}

/* Ensure titlebar has proper background and spacing to match Laravel page-header */
#titlebar {
    position: relative;
    padding-bottom: 30px !important;
    padding-top: 0 !important;
    margin-top: 106px !important;
    background-size: cover;
    background-position: center;
}

/* Make titlebar container use flexbox to reorder breadcrumbs */
#titlebar .col-md-12 {
    display: flex !important;
    flex-direction: column !important;
}

/* Match titlebar h2 to Laravel h1 styling with color-linear */
#titlebar h2 {
    color: #b9e0f2 !important;  /* color-linear - cyan color */
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    font-family: 'rift', sans-serif !important;
    font-weight: 400 !important;
    font-size: 44px !important;
    line-height: 1.15em !important;
}

/* Fix Search by Region mega-menu-title links to use h-color-reverse */
.mega-menu-title .sub-title {
    color: #0f172a !important;
    font-size: 22px !important;
    font-family: 'rift', sans-serif !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

.mega-menu-title .sub-title:hover {
    color: #0f172a !important;
    opacity: 0.8;
}

/* Responsive titlebar heading */
@media (max-width: 1200px) {
    #titlebar h2 {
        font-size: 38px !important;
    }
}

@media (max-width: 768px) {
    #titlebar h2 {
        font-size: 30px !important;
    }

    #titlebar {
        margin-top: 82px !important;
        padding-bottom: 20px !important;
    }

    #breadcrumbs {
        margin-bottom: 8px;
    }
}

@media (max-width: 768px) {
    .main-content-area {
        padding: 25px !important;
    }
}