/*
Theme Name:   Zeeflow JD Child
Theme URI:    https://www.jdhodges.com/
Description:  Phase 1 H1/H2 semantic fix on top of zeeflow + compact header/nav redesign. Reversible by reactivating zeeflow.
Author:       JD Hodges
Author URI:   https://www.jdhodges.com/
Template:     zeeflow
Version:      1.0.4
Text Domain:  zeeflow-jd-child
*/

/*
 * Brand color reuses the existing themeZee_color_scheme (#007896). The parent
 * emits an inline <style> from custom-colors.php that paints links, the mobile
 * MENU pill, and desktop nav hover/active backgrounds in #007896 with high
 * source-order precedence. Where we want a different rendering (compact MENU
 * pill on mobile, quiet underline-on-hover on desktop), we either match
 * selector specificity or layer #wrapper into the selector to win.
 */

/* === Heading semantic fix support === */

#logo .site-title,
#logo h1.site-title,
#logo span.site-title {
    display: block;
    line-height: 1;
    letter-spacing: 0;
}

h1.post-title,
h1.page-title,
h1.archive-title {
    margin: 0;
    line-height: 1.15;
}

/* === Brand zone === */

#logo .site-title a {
    color: #007896;
    text-decoration: none;
    border-bottom: 1px dotted rgba(0, 120, 150, 0.35);
}

#logo .site-title a:hover,
#logo .site-title a:focus {
    color: #005f7a;
    border-bottom-color: #005f7a;
}

#logo p.site-description {
    margin: 0.35rem 0 0;
    color: #666;
    font-size: 0.92rem;
    font-style: italic;
    line-height: 1.25;
}

/* === Nav: drop the loud bordered bar in favor of a quieter row === */

#mainnav-menu {
    border-top: 0;
    border-bottom: 0;
    padding: 0;
}

#mainnav-menu a {
    color: #333;
    background: transparent;
    padding: 0.45rem 0.6rem;
    font-size: 0.96rem;
    line-height: 1.2;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

/* These selectors out-specify custom-colors.php's
   `#mainnav-menu li.menu-item:hover a` (specificity 0,1,2,1)
   and `#mainnav-menu li.current_page_item a` (0,1,2,1) by adding #wrapper. */
/* Descendant (not direct-child) to match the parent rule's behavior in case
   nested menu items ever exist. */
#wrapper #mainnav-menu a:hover,
#wrapper #mainnav-menu a:focus,
#wrapper #mainnav-menu li.menu-item:hover a,
#wrapper #mainnav-menu li.current-menu-item a,
#wrapper #mainnav-menu li.current_page_item a {
    color: #007896;
    background: transparent;
    border-bottom-color: rgba(0, 120, 150, 0.45);
}

/* === Desktop layout (≥60em / 960px): compact inline brand + nav row === */

@media only screen and (min-width: 60em) {
    #wrapper {
        padding-top: 1.25rem;
    }

    #header {
        float: left;
        width: 38%;
        padding: 0;
    }

    #logo {
        float: none;
        width: auto;
    }

    #logo .site-title {
        font-size: 2.35rem;
    }

    #mainnav {
        float: right;
        width: 60%;
        margin: 0.35rem 0 1.45rem;
    }

    /* Parent zeeflow has `#mainnav-menu { display: block !important }` inside
       its own (min-width: 60em) media query, so we must !important here too.
       wrap (not nowrap) is intentional — protects against future menu growth
       and longer item labels overflowing the 60% nav column. */
    #mainnav-menu {
        float: none;
        width: auto;
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.15rem 0.6rem;
    }

    #mainnav-menu li {
        flex: 0 0 auto;
    }

    #mainnav-menu a {
        white-space: nowrap;
    }

    #mainnav-menu li {
        float: none;
        margin: 0;
    }

    /* Clear floats below brand+nav row so #wrap content doesn't tuck up. */
    #wrap,
    #main,
    #content {
        clear: both;
    }
}

/* === Mobile / tablet (<60em): tighten the stacked header === */

@media only screen and (max-width: 59.9375em) {
    #wrapper {
        padding: 1.05rem 1.25rem 2.5rem;
    }

    #header {
        padding: 0;
    }

    #logo {
        float: none;
        width: 100%;
    }

    #logo .site-title {
        font-size: 2rem;
    }

    /* Tagline takes prime above-fold space on phones for little gain. */
    #logo p.site-description {
        display: none;
    }

    #mainnav {
        float: none;
        margin: 0.75rem 0 1.2rem;
    }

    /* Quieter MENU pill: same affordance, less shouty.
       custom-colors.php emits an inline #mainnav-icon{background-color:#007896}
       that beats us on source order at equal specificity, so we add #wrapper
       to win the cascade and keep our pale background. */
    #wrapper #mainnav-icon {
        box-sizing: border-box;
        min-height: 44px;
        padding: 0.72rem 0.9rem;
        border: 1px solid #b7c7d3;
        border-radius: 3px;
        color: #007896;
        background: #f7fafc;
        font-size: 0.95rem;
        font-weight: bold;
        line-height: 1.2;
        text-align: center;
    }

    #wrapper #mainnav-icon:hover,
    #wrapper #mainnav-icon:focus {
        color: #005f7a;
        background: #eef5fa;
    }

    .postmeta {
        margin-top: 0.45rem;
        line-height: 1.35;
    }
}