/* ========================================================================== */
/* 🎯 yak-overrides — Project-Specific Theme Customizations
/* ========================================================================== */

/**
 * This layer is reserved for site-specific or project-level CSS overrides.
 * Use it to tweak, patch, or extend any styles from earlier Yak layers
 * (yak-base, yak-layout, yak-blocks, etc.) **without modifying core files**.
 *
 * Ideal for:
 * - Adjusting spacing, colors, or layout for a specific site or content pattern
 * - Overriding block or component behavior in response to client requests
 * - Adding temporary fixes or experimental styles during development
 *
 * Best practices:
 * - Keep overrides tightly scoped (e.g., `.page-id-123 .entry-header { ... }`)
 * - Comment any overrides that relate to bugs or temporary workarounds
 * - If a rule becomes universally useful, consider promoting it upstream
 *
 * This file is loaded *last* in the CSS cascade:
 *   1. reset
 *   2. yak-base
 *   3. yak-layout
 *   4. yak-components
 *   5. yak-blocks
 *   6. yak-utilities
 *   7. yak-overrides ← (this file)
 */


    /* put one-off overrides here */

/* Apply splitband title styling to what-happens-headline */
/* Using !important to override injected inline styles */
.what-happens-headline {
    margin: 0 0 12px !important;
    font-size: clamp(32px, 3.9vw, 54px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
}

/* Override WordPress default button styles to use Yak custom styles */
:where(.wp-block-button__link) {
    border-radius: var(--yak-radius) !important;
    box-shadow: inset 0 var(--btn-3d-edge-size) 0 rgba(255, 255, 255, var(--btn-3d-top-light)), inset 0 calc(var(--btn-3d-edge-size) * -1) 0 rgba(0, 0, 0, var(--btn-3d-bottom-dark)), var(--btn-3d-base-shadow) !important;
    padding: 0.6em 1.2em !important;
    text-decoration: none !important;
}

/* Remove spacing from empty entry-header when featured image is shown */
.entry-header:empty {
    display: none;
}

/* Fallback for when entry-header has only whitespace or hidden elements */
.entry-header:not(:has(*:not(.screen-reader-text))) {
    display: none;
}

/* Increase top padding on pages with featured images */
body[class*="yak-featured-img-max-width"] .site-inner {
    padding-top: 3rem;
}

.ctd-tabs {
    margin-top: 3rem;
}

h2.ctd-tab-heading {
    margin-top: 0;
}

.ctd-tabs__toc [role="tab"][aria-selected="true"],
.ctd-tabs__toc [role="tab"]:hover {
    border-left: 4px solid var(--yak-color-primary) !important;
    background: var(--yak-color-muted);
}

/* Prevent tab buttons from moving on hover */
.ctd-tabs__toc [role="tab"],
.ctd-single-tab button {
    transform: none !important;
}

.ctd-tabs__toc [role="tab"]:hover,
.ctd-single-tab button:hover {
    transform: none !important;
}

.ctd-single-tab button:focus {
    outline: none;
    box-shadow: none;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    transform: none !important;
}

.ctd-single-tab button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}



@media (min-width: 960px) {

    .page-template-wide-page-content .content-sidebar-wrap {
        max-width: 1200px;
        padding-inline: 1rem;
    }

    /* FIX: Sticky header breaks when "Above Header" menu is active */
    /* The Genesis .title-area has overflow:hidden which prevents position:sticky from working */
    
    /* Remove overflow from all header wrapper elements */
    .site-header,
    .site-header > .wrap,
    .yak-header-layout,
    .yak-header-logo-column,
    .yak-logo-wrapper,
    .yak-header-logo-column .title-area,
    .yak-header-menus-column {
        overflow: visible !important;
    }

    /* When the Above Header menu is active the header uses the two-row layout.
       Make the inner .wrap the sticky element so both rows stay fixed. */
    body.yak-has-sticky-header .site-header:has(.yak-header-layout) {
        padding: 0;
    }

    body.yak-has-sticky-header .site-header:has(.yak-header-layout) > .wrap {
        position: sticky;
        top: 0;
        z-index: 120;
        padding: 1rem 2rem;
        background: var(--yak-color-header-bg, #fff);
        box-shadow: 0 0 12px rgba(0, 0, 0, .1);
        isolation: isolate;
        /* Smooth transition for shrinking header */
        transition: padding 0.3s ease;
    }

    /* Logo transition for smooth shrinking */
    body.yak-has-sticky-header .site-header:has(.yak-header-layout) .custom-logo,
    body.yak-has-sticky-header .site-header:has(.yak-header-layout) .title-area img {
        transition: height 0.3s ease, max-height 0.3s ease, width 0.3s ease;
    }

    body.yak-has-sticky-header.yak-scrolled .site-header:has(.yak-header-layout) > .wrap {
        /* padding-top: 4px;
        padding-bottom: 4px; */
    }

    /* Shrink logo when scrolled */
    body.yak-has-sticky-header.yak-scrolled .site-header:has(.yak-header-layout) .custom-logo,
    body.yak-has-sticky-header.yak-scrolled .site-header:has(.yak-header-layout) .title-area img {
        /* max-height: 50px; */
        width: auto;
    }

    body.yak-has-sticky-header.admin-bar .site-header:has(.yak-header-layout) > .wrap {
        top: 32px;
    }

    body.yak-has-sticky-header.yak-scrolled .site-header:has(.yak-header-layout) .yak-header-top-menu-row > ul:not {
        line-height: 1;
    }

    body.yak-has-sticky-header.yak-scrolled .site-header:has(.yak-header-layout) .yak-main-nav > ul > li > a {
        padding-top: 0;
        padding-bottom: 0;
    }

    body.yak-has-sticky-header.yak-scrolled .site-header:has(.yak-header-layout) .yak-header-main-menu-row {
        /* margin-top: -1rem; */
    }
    
    /* ----------------------------------------
       California Outline SVG in Featured Image Headers
    ---------------------------------------- */
    
    /* Show CA outline on desktop pages with featured images */
    body[class*="yak-featured-img-max-width"] .ca-outline-wrapper {
        position: absolute !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
        pointer-events: none;
        max-width: 378px;
        width: 100%;
        opacity: 0.5;
        display: flex !important;
    }
    
    /* Homepage: Larger CA outline and positioned farther left */
    body.home[class*="yak-featured-img-max-width"] .ca-outline-wrapper {
        max-width: 491px;
        left: 35%;
    }
    
    /* Non-home pages: Position CA outline left and higher, under the text */
    body:not(.home)[class*="yak-featured-img-max-width"] .ca-outline-wrapper {
        left: calc(20% - 150px);
        top: 35%;
        transform: translate(-50%, -40%);
    }
    
    body[class*="yak-featured-img-max-width"] .ca-outline-wrapper svg.ca-outline-svg {
        display: block !important;
        max-width: 100%;
        height: auto;
        filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
    }
    
    /* Position relative for featured image wrapper to contain absolute CA outline */
    body[class*="yak-featured-img-max-width"] .yak-featured-image-top-wrapper {
        position: relative;
    }
    
    /* Ensure image and title stay on top of CA outline */
    body[class*="yak-featured-img-max-width"] .yak-featured-image-img-wrapper,
    body[class*="yak-featured-img-max-width"] .yak-featured-image-title {
        position: relative;
        z-index: 1;
    }
    
    /* Remove button/block styling from featured image title and subtitle */
    body[class*="yak-featured-img-max-width"] .yak-featured-image-title h1 {
        background: transparent !important;
        filter: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    body[class*="yak-featured-img-max-width"] .yak-page-subtitle {
        background: transparent !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }
}

/* Hide CA outline on mobile */
@media (max-width: 960px) {
    .ca-outline-wrapper,
    .ca-outline-wrapper svg.ca-outline-svg {
        display: none !important;
    }
}