/* =============================================================
   chrome/chrome.css — Header + footer template-part styles

   Styles for the markup in chrome/header.js and chrome/footer.js.
   Translates into the theme alongside parts/header.html and
   parts/footer.html. Loaded after style.css on every page.
   ============================================================= */


/* -------------------------
   Site header
   ------------------------- */

/* Override the absolute header default from style.css — the
   prototype uses a sticky solid bar */
header.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding-top: 0;
    width: 100%;
}

.site-header__bar {
    box-shadow: 0 10px 13px 0 rgba(0, 0, 0, 0.03);
    padding-top: var(--wp--preset--spacing--xs);
    padding-bottom: var(--wp--preset--spacing--xs);
    gap: var(--wp--preset--spacing--md);
}

/* Wordmark — website logo SVG (assets/web/logo-wordmark-forest.svg) */
.site-header__logo {
    flex-shrink: 0;
    display: block;
}

.site-header__logo img {
    height: 2.25rem;
    width: auto;
    display: block;
}

.site-header__nav ul {
    gap: var(--wp--preset--spacing--md);
}

.site-header__nav .wp-block-navigation-item__content {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.site-header__cart {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color ease 0.3s;
}

.site-header__cart:hover {
    /* cornflower accent — lemon is illegible on the white bar */
    color: var(--wp--preset--color--cornflower);
}

@media (max-width: 900px) {
    .site-header__nav {
        display: none;
    }
}


/* -------------------------
   Site footer
   ------------------------- */

section.site-footer {
    padding-top: var(--wp--preset--spacing--xl);
    padding-bottom: var(--wp--preset--spacing--md);
}

.site-footer__columns {
    row-gap: var(--wp--preset--spacing--lg);
}

/* Footer wordmark — lemon logo SVG on forest, like the brand guide panels */
.site-footer__logo {
    height: 2.25rem;
    width: auto;
    display: block;
}

.site-footer__heading {
    color: var(--wp--preset--color--lemon);
}

.site-footer a {
    transition: color ease 0.3s;
}

.site-footer a:hover {
    color: var(--wp--preset--color--lemon);
}

.site-footer__bottom {
    margin-top: var(--wp--preset--spacing--xl);
    padding-top: var(--wp--preset--spacing--ms);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--xs);
}