/*
 * 3-MinimalLayout layout-only styles.
 *
 * Loaded by ./header.php when this header style is selected. Ships
 * ONLY layout primitives (padding, column-gap, vertical centering,
 * sticky-state compaction, menu alignment). All colors come from
 * the site's Template Options (top bar / header / megamenu params)
 * and the SCSS-compiled template.css. The package itself is
 * CSS-neutral — visual rendering is owned per-site.
 */

/* Sticky state: collapse the default container padding down to 2px so
 * the logo fills the bar. Paired with the +4 sticky_header_min_height
 * formula in features/logo.php, final sticky height is
 * (container padding 2+2) + (logo wrapper = logo+4) = logo+8px total. */
#sp-header.header-sticky > .container > .container-inner,
#sp-header.header-sticky > .container-inner {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Row: vertical centering + progressive column-gap between logo and menu */
#sp-header > .container > .container-inner > .row,
#sp-header > .container-inner > .row {
    align-items: center;
    column-gap: 16px;
}
@media (min-width: 768px) {
    #sp-header > .container > .container-inner > .row,
    #sp-header > .container-inner > .row {
        column-gap: 48px;
    }
}
@media (min-width: 992px) {
    #sp-header > .container > .container-inner > .row,
    #sp-header > .container-inner > .row {
        column-gap: 64px;
    }
}
@media (min-width: 1200px) {
    #sp-header > .container > .container-inner > .row,
    #sp-header > .container-inner > .row {
        column-gap: 80px;
    }
}

/* Default header padding: minimal vertical, horizontal gutter scales with viewport. */
#sp-header > .container > .container-inner,
#sp-header > .container-inner {
    padding: 4px 12px;
}
@media (min-width: 576px) {
    #sp-header > .container > .container-inner,
    #sp-header > .container-inner {
        padding: 4px 16px;
    }
}
@media (min-width: 992px) {
    #sp-header > .container > .container-inner,
    #sp-header > .container-inner {
        padding: 6px 24px;
    }
}

/* Push menu column + megamenu to the right edge at md+ */
@media (min-width: 768px) {
    #sp-header #sp-menu {
        margin-left: auto;
    }
    #sp-header #sp-menu .sp-column,
    #sp-header .sp-megamenu-wrapper {
        justify-content: flex-end;
    }
    #sp-header .sp-megamenu-parent {
        margin-left: auto;
    }
}