/*
 * Custom CSS for your one-page site
 * Add all your custom styles below this comment
 *
 * This file will be loaded after the parent theme styles
 * so your styles will override the defaults
 */

/* ========================================
   Add your custom CSS here
   ======================================== */

/* ==============================================
   OPTION A (ACTIVE) - Hero text overlay on image
   Fix heading size to match mobile on all devices
   ============================================== */

/* Hide the page title (we're using the hero overlay text instead) */
.entry-hero .entry-title,
.entry-header .entry-title,
.entry-hero-layout-standard .entry-hero .entry-header {
    display: none !important;
}

/* ==============================================
   CUSTOM HAMBURGER MENU
   ============================================== */

/* Hamburger button - fixed in upper right, fully inside hero image */
#custom-hamburger-toggle {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    backdrop-filter: blur(5px);
}

/* Adjust position when WordPress admin bar is present (logged in users only) */
body.admin-bar #custom-hamburger-toggle {
    top: 62px; /* Push down below admin bar + margin */
}

@media screen and (max-width: 782px) {
    body.admin-bar #custom-hamburger-toggle {
        top: 76px; /* Admin bar is taller on mobile + margin */
    }
}

/* Make hamburger smaller on mobile to avoid overlapping hero title */
@media screen and (max-width: 767px) {
    #custom-hamburger-toggle {
        padding: 8px; /* Smaller padding */
        top: 25px; /* Stay within image */
        right: 25px; /* Stay within image */
    }

    /* Make the hamburger lines smaller on mobile */
    .hamburger-line {
        width: 18px; /* Smaller lines */
        height: 2px; /* Thinner lines */
    }

    /* Adjust animation for smaller size */
    #custom-hamburger-toggle.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    #custom-hamburger-toggle.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Further adjustment if admin bar is present */
    body.admin-bar #custom-hamburger-toggle {
        top: 71px; /* Admin bar + margin */
    }
}

#custom-hamburger-toggle:hover {
    background: rgba(0, 0, 0, 0.6);
}

/* Hamburger lines */
.hamburger-line {
    width: 24px;
    height: 3px;
    background: white;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Animated hamburger to X */
#custom-hamburger-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

#custom-hamburger-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

#custom-hamburger-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Menu drawer - slide in from right */
.custom-menu-drawer {
    position: fixed;
    top: 0;
    right: -350px;
    width: 350px;
    height: 100vh;
    background: #ffffff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transition: right 0.3s ease;
    overflow-y: auto;
}

.custom-menu-drawer.open {
    right: 0;
}

/* Hide the close button inside the drawer - use hamburger X instead */
.custom-menu-header {
    display: none !important;
}

#custom-menu-close {
    display: none !important;
}

/* Hide Kadence's entire mobile drawer since we have a custom one */
#mobile-drawer,
.popup-drawer,
#mobile-drawer.popup-drawer {
    display: none !important;
}

/* Hide any duplicate close buttons from WordPress/Kadence theme */
.drawer-overlay .drawer-close,
.mobile-drawer-close,
.popup-close-toggle,
#mobile-drawer .drawer-inner .drawer-header button,
#mobile-drawer button[aria-label*="lose"],
.drawer-header button,
button.drawer-toggle-close,
.mobile-toggle-close-container,
.popup-mobile-toggle-close {
    display: none !important;
}

/* Menu navigation */
.custom-menu-nav {
    padding: 20px;
}

.custom-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.custom-nav-menu li {
    margin: 0;
    padding: 0;
}

.custom-nav-menu a {
    display: block;
    padding: 15px 10px;
    color: #333;
    text-decoration: none;
    font-size: 18px;
    border-bottom: 1px solid #eee;
    transition: background 0.2s ease;
}

.custom-nav-menu a:hover {
    background: #f5f5f5;
    color: #000;
}

/* Overlay */
#custom-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#custom-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Prevent body scroll when menu is open */
body.custom-menu-open {
    overflow: hidden;
}

/* OLD KADENCE HAMBURGER CSS - DISABLED FOR TESTING */
/*
.mobile-toggle-open-container,
#mobile-toggle.menu-toggle-open.drawer-toggle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.mobile-toggle-open-container {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 10000 !important;
}

#mobile-toggle.menu-toggle-open.drawer-toggle,
.menu-toggle-open.drawer-toggle {
    background: rgba(0, 0, 0, 0.6) !important;
    padding: 12px !important;
    border-radius: 5px !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.menu-toggle-icon,
.menu-toggle-icon svg,
.menu-toggle-icon .kadence-svg-iconset {
    color: white !important;
    fill: white !important;
    width: 24px !important;
    height: 24px !important;
}

#mobile-drawer,
#mobile-drawer.popup-drawer {
    display: block !important;
}

@media (min-width: 768px) {
    .mobile-toggle-open-container,
    #mobile-toggle.menu-toggle-open {
        display: block !important;
    }

    #site-navigation.main-navigation {
        display: none !important;
    }
}
*/

/* Remove spacing above hero to move it to the top */
.entry-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.content-bg,
.entry-content-wrap {
    padding-top: 0 !important;
}

/* Make first block (hero image) flush to top */
.entry-content > .alignfull:first-child,
.entry-content > .wp-block-kadence-rowlayout:first-child {
    margin-top: 0 !important;
    margin-bottom: 0 !important; /* Remove bottom spacing from hero */
}

/* Remove all spacing between hero and next section - use natural header spacing only */
.entry-content > .wp-block-kadence-rowlayout:first-child + * {
    margin-top: 0 !important;
    padding-top: 0 !important; /* No additional buffer */
}

/* Also target if there's a container or section after hero */
.entry-content > *:nth-child(2) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ==============================================
   Hero Title and Tagline Positioning
   ============================================== */

/* Make the Row use flexbox for positioning */
.wp-block-kadence-rowlayout:has(.hero-title-top) .kt-row-column-wrap,
.wp-block-kadence-rowlayout:has(.hero-tagline-bottom) .kt-row-column-wrap,
.wp-block-kadence-rowlayout:has(.hero-button) .kt-row-column-wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
}

/* Also target the inner row layout wrapper that contains the Sections */
.wp-block-kadence-rowlayout .wp-block-kadence-rowlayout .kt-row-layout-inner,
.wp-block-kadence-rowlayout .wp-block-kadence-rowlayout .inner-column-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    height: 100% !important;
}

/* Position title at top */
.hero-title-top {
    align-self: flex-start !important;
    margin-bottom: auto !important;
}

/* ============================================================
   TEMPORARY CHANGE FOR HOLIDAY BUTTON (Dec 2024)
   Position tagline at bottom - DISABLED, now using grid positioning below
   REVERT: Uncomment this block when removing Holiday Support button
   ============================================================ */
/* .hero-tagline-bottom {
    align-self: flex-end !important;
    margin-top: auto !important;
    margin-bottom: 80px !important;
    text-align: right !important;
    position: relative !important;
} */

/* Ensure hero row has position relative for arrow positioning */
.wp-block-kadence-rowlayout {
    position: relative !important;
    overflow: visible !important;
}

.wp-block-kadence-rowlayout > * {
    overflow: visible !important;
}

/* Arrow is now created via JavaScript - no CSS pseudo-element needed */

/* Desktop - larger title */
@media (min-width: 1024px) {
    .hero-title-top {
        font-size: 4.5rem !important; /* Adjust this value as needed */
    }
}

/* Tablet - medium title */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-title-top {
        font-size: 3.5rem !important; /* Adjust this value as needed */
    }
}

/* Hide tagline on mobile */
@media (max-width: 767px) {
    .hero-tagline-bottom {
        display: none !important;
    }
}

/* Show mobile tagline only on mobile */
.hero-tagline-mobile {
    display: none !important;
}

@media (max-width: 767px) {
    .hero-tagline-mobile {
        display: block !important;
        text-align: center !important;
        padding: 20px !important;
    }
}

/* ============================================================
   TEMPORARY ADDITION FOR HOLIDAY BUTTON (Dec 2024)
   Hero Button Positioning
   REVERT: Delete this entire section (from here to OPTION B comment)
          when removing Holiday Support button
   ============================================================ */

/* Remove padding from the row wrapper so content can reach edges */
.wp-block-kadence-rowlayout:has(.hero-tagline-button-row) .kt-row-column-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Make this Section align to bottom like the tagline originally did */
.hero-tagline-button-row {
    align-self: flex-start !important;
    margin-top: auto !important;
}

/* Use CSS Grid to position button and tagline side-by-side at the bottom */
.hero-tagline-button-row > .kt-inside-inner-col {
    display: grid !important;
    grid-template-columns: auto auto !important;
    grid-template-rows: 1fr !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 40px !important;
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Button goes in first column (left) */
.hero-button {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    justify-self: start !important;
}

/* Tagline goes in second column (right) */
.hero-tagline-bottom {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    text-align: right !important;
    justify-self: end !important;
    width: 100% !important;
}

/* Responsive font sizing for tagline - scales down but never smaller than button */
@media (max-width: 1400px) {
    .hero-tagline-bottom {
        font-size: clamp(1.6rem, 2.5vw, 2.5rem) !important;
    }
}

@media (max-width: 1200px) {
    .hero-tagline-bottom {
        font-size: clamp(1.6rem, 2.2vw, 2rem) !important;
    }
}

@media (max-width: 1024px) {
    .hero-tagline-bottom {
        font-size: clamp(1.6rem, 2vw, 1.8rem) !important;
    }
}

@media (max-width: 900px) {
    .hero-tagline-bottom {
        font-size: clamp(1.6rem, 1.8vw, 1.5rem) !important;
    }
}

/* Hide entire desktop tagline/button section on mobile */
@media (max-width: 767px) {
    .hero-tagline-button-row {
        display: none !important;
    }

    .hero-button {
        display: none !important;
    }
}

/* Show mobile button only on mobile */
.hero-button-mobile {
    display: none !important;
}

@media (max-width: 767px) {
    .hero-button-mobile {
        display: block !important;
        text-align: center !important;
        padding: 0 20px 20px 20px !important; /* Top padding 0 to sit right under tagline */
    }

    /* Ensure button text is centered vertically */
    .hero-button-mobile.kb-button,
    .hero-button-mobile .kb-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .hero-button-mobile .kt-btn-inner-text {
        display: flex !important;
        align-items: center !important;
    }
}

/* ==============================================
   OPTION B (COMMENTED OUT) - Use Page Title with Background Photo
   ============================================== */
/*
.entry-hero-layout-standard .entry-hero .entry-header {
    display: block !important;
}

.entry-hero .entry-title,
.entry-header .entry-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.entry-hero .entry-title,
.entry-header .entry-title {
    font-family: 'Lato', sans-serif !important;
    font-size: 3.5rem !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    margin: 0 !important;
    padding: 20px !important;
    text-align: center !important;
}

@media (min-width: 768px) {
    .entry-hero .entry-title,
    .entry-header .entry-title {
        font-size: 3.5rem !important;
    }
}

@media (min-width: 1024px) {
    .entry-hero .entry-title,
    .entry-header .entry-title {
        font-size: 3.5rem !important;
    }
}
*/