/*
Theme Name:   Twenty Twenty-Four Child
Theme URI:    https://omssurgeon.com
Description:  Child Theme of Twenty Twenty-Four
Author:       Liming Gou
Author URI:   https://omssurgeon.com
Template:     twentytwentyfour
Version:      1.0.0
*/

/* Keep the site header pinned at the top while scrolling. */
header.wp-block-template-part {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: var(--wp--preset--color--base, #fff);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* Avoid overlap with WP admin bar when logged in. */
body.admin-bar header.wp-block-template-part {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar header.wp-block-template-part {
        top: 46px !important;
    }
}

/* On smaller screens, keep only the logo in header branding area. */
@media (max-width: 680px) {
    header.wp-block-template-part .wp-block-site-title,
    header.wp-block-template-part .wp-block-site-tagline {
        display: none !important;
    }

    header.wp-block-template-part .is-layout-flex {
        align-items: right !important;
    }

    header.wp-block-template-part .wp-block-site-logo,
    header.wp-block-template-part figure.wp-block-site-logo {
        margin: 0 !important;
        line-height: 0;
        display: flex;
        align-items: right;
        justify-content: right;
        align-self: right !important;
    }

    header.wp-block-template-part .wp-block-site-logo img {
        display: block;
    }

    header.wp-block-template-part .wp-block-navigation {
        margin-top: 0 !important;
    }

    header.wp-block-template-part .wp-block-navigation__responsive-container-open {
        margin: 0 !important;
        align-self: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center;
        height: 44px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1 !important;
    }

    header.wp-block-template-part .wp-block-site-logo a,
    header.wp-block-template-part .custom-logo-link {
        display: inline-flex !important;
        align-items: right !important;
        justify-content: center;
        align-self: center !important;
        line-height: 0 !important;
    }

    header.wp-block-template-part .wp-block-site-logo img,
    header.wp-block-template-part .custom-logo {
        display: block;
        width: auto !important;
        height: auto !important;
        max-height: 400px !important;
        max-width: 250%;
        object-fit: contain;
        margin: 0 !important;
        align-self: right !important;
        transform: translateY(2px);
    }

    header.wp-block-template-part .wp-block-navigation {
        display: flex !important;
        align-items: right !important;
    }

    header.wp-block-template-part .wp-block-navigation__responsive-container-open svg {
        display: block;
        width: 24px;
        height: 24px;
    }
}