/* Targeted overrides for small UI tweaks */

/* Header container fixes - ensure adequate height and no cut-off */
#header {
    min-height: 80px;
    overflow: visible;
}

#header .header-row {
    min-height: 80px;
    align-items: center;
}

/* 1) Make the subheader transparent (no blue line) */
#header .subheader-row {
    background: transparent !important;
}

/* 2) Remove the blue GIF chevrons around the text */
#header .subheader-row .find-a-program a::before,
#header .subheader-row .find-a-program a::after {
    content: none !important;
    background-image: none !important;
}

/* 3) Right-align the control with a little breathing room */
#header .subheader-row .find-a-program {
    text-align: right;
    padding-right: 24px;
}

/* 4) Style the link as an orange button with horizontal padding */
#header .subheader-row .find-a-program a {
    background: #FFA736;
    color: #122960;
    font-weight: 600;
    padding: 0 14px; /* keep height 40px; add only horizontal padding */
    border-radius: 8px;
}

/* 5) Subtle hover */
#header .subheader-row .find-a-program a:hover {
    background: #FFB454;
}

/* New header-top button next to Coachs */
#header .right .find-program-top {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    padding: 10px 16px;
    background: #FFA736;
    color: #122960;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    min-width: auto;
    box-sizing: border-box;
}
#header .right .find-program-top i { color: #122960; margin-right: 6px; }
#header .right .find-program-top:hover { background: #FFB454; }

/* Keep Coachs + Find A Program in a single row with a small gap */
#header .header-row .right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-height: 60px;
    padding: 10px 0;
}
#header .header-row .right #login { 
    display: inline-flex;
    align-items: center;
    margin-top: 0; 
    flex-shrink: 0;
    padding: 10px 16px;
    box-sizing: border-box;
    text-decoration: none;
    /* Override login.css styles that conflict with header login button */
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
}
#header .header-row .right .find-program-top { 
    margin-top: 0; 
    flex-shrink: 0;
    white-space: nowrap;
}

/* 6) Front page hero image: make smaller so face isn't cropped */
main#main section#front-page-top-section figure.image-background {
    right: 10% !important;
    width: 32% !important;
    background-size: contain !important;
    background-position: center right !important;
}

#header .subheader-row .find-a-program i,
#header .subheader-row .find-a-program svg {
    color: #122960;
}

/* Responsive header fixes and overflow handling */
@media (max-width: 768px) {
    #header {
        min-height: 70px;
    }
    
    #header .header-row {
        min-height: 70px;
    }
    
    #header .header-row .right {
        min-height: 50px;
        padding: 8px 0;
        gap: 8px;
    }
    
    #header .right .find-program-top {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    #header .header-row .right #login {
        padding: 8px 12px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    #header .right .find-program-top {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    #header .header-row .right #login {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    #header .header-row .right {
        gap: 6px;
    }
}