/* Brackney Theme Header Fixes */

/* Header Top - Dark blue background like WordPress */
.header_top {
    color: #fff;
    background-color: #0d293f !important;
    padding: 10px 0;
}

/* Header Bottom - Light blue background on desktop */
.header_bottom {
    background-color: #f6fbff !important;
}

/* Logo styling - EXACT WordPress dimensions */
.header_logo {
    width: 300px;
    padding: 8px 0px;
}

.header_logo img {
    max-height: 76px;
}

/* Header Contact Styling - EXACT WordPress CSS */
.header_contact a {
    color: #fff;
    display: inline-block;
    width: 63%;
    vertical-align: middle;
    background-position: left;
    background-repeat: no-repeat;
    padding-left: 60px;
    float: right;
}

.header_contact a h5 {
    color: #ffffff;
    font-weight: 700;
    white-space: nowrap; /* Prevent line wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ellipsis if text is too long */
}

.header_contact a h5 span {
    font-family: 'Open Sans', sans-serif;
    display: block;
    font-weight: 500;
    white-space: nowrap; /* Prevent line wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ellipsis if text is too long */
}

.header_need_help {
    background-image: url(../images/pin.png);
    background-size: 40px;
}

.header_need_help:hover h5 span {
    color: #fff;
}

.header_contact a:hover h5 {
    color: #9db600;
}

/* Responsive header contact - EXACT WordPress CSS matching */
/* Base/Default (below 1200px): h5 = 24px, span = 15px */
.header_contact a h5 {
    font-size: 24px; /* Base size matches WordPress */
}

.header_contact a h5 span {
    font-size: 15px; /* Base size matches WordPress */
    margin-top: 2px;
}

@media (min-width: 1200px) {
    .header_contact a h5 {
        font-size: 22px; /* WordPress makes it SMALLER at 1200px */
    }
    
    .header_contact a h5 span {
        font-size: 15px; /* Stays the same */
        margin-top: 2px;
    }
}

@media (min-width: 1440px) {
    .header_contact a h5 {
        font-size: 24px; /* Back to larger size */
    }
    
    .header_contact a h5 span {
        font-size: 17px; /* Gets larger */
    }
}

/* Navigation styling - EXACT WordPress CSS */
.navbar {
    margin-bottom: 0;
    border-radius: 0;
    background-color: transparent;
    border: none;
    text-align: left;
    padding: 0;
    justify-content: flex-start;
    position: relative;
}

/* Ensure navbar container has space for absolutely positioned button */
.header_bottom .container {
    position: relative;
}

/* Navbar container positioning - minimal padding to match WordPress */
@media (min-width: 1200px) {
    .header_bottom .navbar {
        padding-right: 140px; /* Minimal space for Start Planning button */
    }
}

@media (min-width: 1440px) {
    .header_bottom .navbar {
        padding-right: 160px; /* Minimal space on larger screens */
    }
}

.navbar-nav {
    margin: 0;
    display: block;
}

.navbar-nav > li {
    display: inline-block;
    position: relative;
    padding: 0px;
}

.navbar-nav > li > a {
    display: inline-block;
    color: #0d293f;
    text-transform: capitalize;
    padding: 26px 12px;
    font-size: 17px;
    font-weight: 700;
    position: relative;
    border-bottom: 5px solid transparent;
    transition: all 0.3s;
}

.navbar-nav > li > a:focus {
    color: #0d293f;
}

.navbar-nav > .active > a,
.navbar-nav > .active > a:focus,
.navbar-nav > .active > a:hover {
    background-color: #0d293f;
    color: #f6fbff;
    border-bottom: 5px solid #9eb705;
}

.navbar-nav > li > a:hover {
    background-color: #0d293f;
    color: #f6fbff;
    border-bottom: 5px solid #9eb705;
}

.navbar-nav > li.current-menu-item > a {
    background-color: #0d293f;
    color: #f6fbff;
    border-bottom: 5px solid #9eb705;
}

/* Special Menu Button (Green Button) - Positioned on Right */
.navbar-nav > li.special_menu {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* Hide Start Planning button on mobile/tablet - matches WordPress */
@media (max-width: 1199px) {
    .navbar-nav > li.special_menu {
        display: none !important;
    }
}

.navbar-nav > li.special_menu a {
    background-color: #9db600 !important;
    color: #fff !important;
    padding: 12px 22px !important;
    border-radius: 100px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border: 1px solid transparent !important;
    transition: all 0.3s !important;
    border-bottom: none !important;
    font-weight: 700 !important;
    font-size: 17px !important;
}

.navbar-nav > li.special_menu a:hover {
    background-color: #f6fbff !important;
    border: 1px solid #0d293f !important;
    color: #0d293f !important;
}

/* Dropdown menus */
.navbar-nav > li > ul {
    position: absolute;
    width: 250px;
    display: none;
    background-color: #0d293f;
    box-shadow: none;
    padding: 10px;
    z-index: 99;
    top: 100%;
    left: 0px;
    border-top: 4px solid #f6f6f8;
    border-bottom: 4px solid #f6f6f8;
}

.navbar-nav > li > ul li {
    list-style: none;
    color: #272425;
    padding-left: 0px;
}

.navbar-nav > li > ul li > a {
    display: block;
    padding: 10px;
    text-align: left;
    transition: none;
    font-size: 17px;
    text-transform: capitalize;
    font-weight: 700;
    color: #fff !important;
}

.navbar-nav > li > ul li.current-menu-item > a {
    color: #ccc !important;
}

.navbar-nav > li:hover > ul {
    display: block;
}

.navbar-nav > li > ul li > a:hover {
    color: #ccc !important;
}


/* Mobile Menu */
@media (max-width: 1199px) {
    .sidebar_open:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,0.6);
        width: 100%;
        height: 100%;
        z-index: 9;
    }
    
    .mobilemenu_icon {
        width: 36px;
        height: 30px;
        display: inline-block;
        position: absolute;
        overflow: hidden;
        cursor: pointer;
        top: 29px;
        right: 15px;
    }
    
    .navbar_line {
        width: 100%;
        height: 2px;
        background-color: #ffffff;
        position: absolute;
        top: 0px;
        left: 0;
        width: 35px;
        border-radius: 4px;
    }
    
    .navbar_line2 {
        top: 9px;
    }
    
    .navbar_line3 {
        top: 18px;
    }
    
    .sidebar_open .mobilemenu_icon {
        background: transparent;
    }
    
    .sidebar_open .navbar_line {
        left: 100%;
    }
    
    .sidebar_open .navbar_line2 {
        left: 100%;
    }
    
    .sidebar_open .navbar_line3 {
        left: 100%;
    }
    
    .mobilemenu_icon_open {
        width: 25px;
        height: 25px;
        top: 15px;
        right: 15px;
        position: absolute;
        background-size: cover;
        z-index: 99;
        overflow: hidden;
    }
    
    .navbarclose_line1 {
        height: 2px;
        background-color: #fff;
        position: absolute;
        top: 11px;
        left: 0;
        width: 25px;
        transform: rotate(0);
        opacity: 0;
    }
    
    .navbarclose_line2 {
        height: 2px;
        background-color: #fff;
        position: absolute;
        top: 11px;
        left: 0;
        width: 25px;
        transform: rotate(0);
        opacity: 0;
    }
    
    .has-sub-nav {
        background-image: url(../images/sub_menu.png);
        background-position: 92% 15px;
        background-size: 12px;
        background-repeat: no-repeat;
    }
    
    .sidebar_open .navbarclose_line1 {
        transform: rotate(-136deg);
        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        transition-duration: 0.5s;
        transition-delay: 0.2s;
        opacity: 1;
    }
    
    .sidebar_open .navbarclose_line2 {
        transform: rotate(136deg);
        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        transition-duration: 0.5s;
        transition-delay: 0.2s;
        opacity: 1;
    }
    
    .sidebar_open .navbar-header {
        right: 0;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        transition-duration: 0.3s;
    }
    
    .navbar-header {
        overflow: auto;
    }
    
    .sidebar_open {
        overflow: hidden;
    }
    
    .navbar-header {
        float: none;
        position: fixed;
        height: 100%;
        z-index: 10;
        background-color: #0d293f;
        width: 250px;
        top: 0;
        right: -100%;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        transition-duration: 0.3s;
    }
    
    .navbar-nav {
        text-align: left;
        padding-top: 50px;
    }
    
    .navbar-nav > li.has-sub-nav a {
        width: auto;
        text-align: left;
    }
    
    .navbar-nav > li.has-sub-nav.mega_menu {
        background-image: none;
    }
    
    .navbar-nav > li.has-sub-nav.mega_menu a {
        width: 100%;
    }
    
    .navbar-nav > li {
        width: 100%;
        display: block;
        text-align: left;
        border-bottom: 1px solid #fff;
    }
    
    .navbar-nav > li > a {
        color: #f9f9d7 !important;
        padding: 10px 16px !important;
        margin: 0 !important;
        display: inline-block !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        text-align: center !important;
        border-bottom: none !important;
        background-color: transparent !important;
    }
    
    .navbar-nav > li > a:hover {
        color: #fff !important;
        text-decoration: none;
    }
    
    .navbar-nav > li > ul > li > a {
        text-transform: uppercase;
        font-size: 15px;
        padding: 10px 15px;
        color: #0d293f;
    }
    
    .navbar-nav > li > ul {
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
        background-color: #e9e8ee;
    }
    
    .navbar-nav > li:hover > ul {
        display: none;
    }
    
    .navbar-nav > li:hover {
        color: #ffcc2a;
    }
}

/* Sticky header fixes */
header.sticky_header {
    top: 0;
    z-index: 1111;
    width: 100%;
    background-color: #fff;
    border-bottom: 4px solid #d6d6e0;
    animation: smoothScroll 0.3s forwards;
}

header.sticky_header .header_top {
    padding: 10px 0;
}

header.sticky_header .header_logo {
    width: 185px;
}

header.sticky_header .navbar {
    float: right;
    margin-top: -63px;
}

header.sticky_header .navbar-nav > li > a {
    padding: 4px 9px;
    font-size: 15px;
    border-bottom: 5px solid transparent;
    transition: none;
    color: #fff;
}

header.sticky_header .navbar-nav > li.current-menu-item > a {
    background-color: transparent;
    color: #9db600;
}

header.sticky_header .navbar-nav > li > a:hover {
    color: #9db600;
    background-color: transparent;
}

header.sticky_header .navbar-nav > li.special_menu {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

header.sticky_header .navbar-nav > li.special_menu a {
    padding: 10px 10px !important;
    background-color: #9db600 !important;
    color: #f6fbff !important;
    text-transform: capitalize !important;
    border-bottom: 0 !important;
}

header.sticky_header .navbar-nav > li.special_menu a:hover {
    background-color: #0d293f !important;
    color: #f6fbff !important;
}

header.sticky_header .header_contact {
    display: none;
}

header.sticky_header .header_bottom {
    height: 0;
}

/* Sticky header 1440px+ responsive */
@media (min-width: 1440px) {
    header.sticky_header .navbar {
        margin-top: -73px;
    }
    header.sticky_header .navbar-nav > li.special_menu a {
        padding: 10px 18px;
    }
}

/* Header positioning */
header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

@keyframes smoothScroll {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0%);
    }
}

/* Header height spacer */
.header_height {
    height: 140px;
}

/* Responsive adjustments */
@media (min-width: 1440px) {
    .header_contact a h5 {
        font-size: 24px;
    }
    
    .header_contact a h5 span {
        font-size: 17px;
    }
    
    header.sticky_header .header_logo {
        width: 230px;
    }
    
    header.sticky_header .navbar-nav > li > a {
        font-size: 18px;
        padding: 4px 14px;
    }
}

/* EXACT WordPress responsive breakpoints */
@media (min-width: 1200px) {
    body {
        font-size: 20px;
    }
    .container {
        max-width: 1440px;
    }
}

/* Large screens - EXACT WordPress CSS */
@media (min-width: 1440px) {
    .container {
        max-width: 1440px;
    }
    .navbar-nav > li > a {
        padding: 26px 28px;
        font-size: 18px;
    }
    .navbar-nav > li > ul li > a {
        font-size: 18px;
    }
}

/* Fix user bar positioning */
.modern-user-bar {
    position: relative;
    z-index: 1000;
}

/* AGGRESSIVE NEGATIVE POSITIONING - Pull content way up */
main {
    margin-top: -70px !important;
    padding-top: 0 !important;
}

/* Override Bootstrap py-4 class completely */
.py-4 {
    padding-top: 0 !important;
    padding-bottom: 1.5rem !important;
}

/* Force first content element to have no top spacing and pull it up even more */
main > *:first-child {
    margin-top: -35px !important;
    padding-top: 0 !important;
}

/* Target obituary pages specifically - override the inline padding */
.obituary-container {
    padding-top: 0 !important;
    margin-top: -100px !important;
}

/* Fix obituary banner positioning and standardize height to match other themes */
.obituary-banner-bg {
    top: -200px !important;
    height: 400px !important; /* Match obituaries_inner_banner height from other themes */
}

/* Ensure theme subbanner matches other themes' height */
.subbanner {
    min-height: 400px !important; /* Standardize with obituary banner height */
}

/* Fix memory cards stacking issue - hide cards until masonry layout is applied */
#memoriesGrid .memory-card {
    opacity: 0;
    transition: opacity 0.3s ease;
}

#memoriesGrid.masonry-ready .memory-card {
    opacity: 1;
}

/* Ensure smooth loading of memory section */
#memoriesGrid {
    min-height: 200px;
}