/*
 * Loo Review global site chrome
 * v1.0.0-p.3.21
 *
 * Header/footer presentation only. WordPress remains responsible for the
 * navigation structure, menu items and responsive menu behaviour.
 */

:root {
    --loo-review-chrome-gutter: clamp(20px, 2vw, 30px);
}

/* The full-bleed shell uses viewport units. Classic browser scrollbars can
   make 100vw a few pixels wider than the usable page area, so prevent only
   that chrome bleed from creating a document-level horizontal scroller. */
html,
body {
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

/* Full-bleed shells on block and classic themes. */
:where(
    body > .wp-site-blocks > header,
    .wp-site-blocks > .wp-block-template-part > header,
    header.wp-block-template-part,
    header.site-header,
    #masthead.site-header,
    #masthead
),
:where(
    body > .wp-site-blocks > footer,
    .wp-site-blocks > .wp-block-template-part > footer,
    footer.wp-block-template-part,
    footer.site-footer,
    #colophon.site-footer,
    #colophon
) {
    box-sizing: border-box !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: none !important;
    position: relative !important;
    right: 50% !important;
    width: 100vw !important;
}

/* Header surface. */
:where(
    body > .wp-site-blocks > header,
    .wp-site-blocks > .wp-block-template-part > header,
    header.wp-block-template-part,
    header.site-header,
    #masthead.site-header,
    #masthead
) {
    background: var(--loo-review-color-band-muted) !important;
    background-image: none !important;
    border-bottom: 0 !important;
    color: var(--loo-review-color-ink) !important;
    font-family: var(--loo-review-font-family) !important;
    padding-inline: var(--loo-review-chrome-gutter) !important;
}

/* Footer surface. */
:where(
    body > .wp-site-blocks > footer,
    .wp-site-blocks > .wp-block-template-part > footer,
    footer.wp-block-template-part,
    footer.site-footer,
    #colophon.site-footer,
    #colophon
) {
    background: var(--loo-review-color-ink) !important;
    background-image: none !important;
    border-top: 0 !important;
    color: var(--loo-review-color-canvas) !important;
    font-family: var(--loo-review-font-family) !important;
    padding-inline: var(--loo-review-chrome-gutter) !important;
}

/* Keep theme-created inner groups full width and transparent. The shell owns
   the colour; these groups only lay out the logo/menu/footer contents. */
:where(
    body > .wp-site-blocks > header,
    .wp-site-blocks > .wp-block-template-part > header,
    header.wp-block-template-part,
    header.site-header,
    #masthead.site-header,
    #masthead,
    body > .wp-site-blocks > footer,
    .wp-site-blocks > .wp-block-template-part > footer,
    footer.wp-block-template-part,
    footer.site-footer,
    #colophon.site-footer,
    #colophon
) > :where(.wp-block-group, .wp-block-group-is-layout-constrained, .wp-block-group-is-layout-flex) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-sizing: border-box !important;
    margin-inline: auto !important;
    max-width: none !important;
    width: 100% !important;
}

/* Compact vertical rhythm while preserving the active theme's flex/grid
   layout and WordPress menu behaviour. */
:where(
    body > .wp-site-blocks > header,
    .wp-site-blocks > .wp-block-template-part > header,
    header.wp-block-template-part,
    header.site-header,
    #masthead
) > :where(.wp-block-group, .wp-block-group-is-layout-constrained, .wp-block-group-is-layout-flex),
:where(
    body > .wp-site-blocks > footer,
    .wp-site-blocks > .wp-block-template-part > footer,
    footer.wp-block-template-part,
    footer.site-footer,
    #colophon
) > :where(.wp-block-group, .wp-block-group-is-layout-constrained, .wp-block-group-is-layout-flex) {
    padding-block: clamp(.65rem, 1.2vw, .9rem) !important;
}

/* Header navigation. */
:where(
    body > .wp-site-blocks > header,
    .wp-site-blocks > .wp-block-template-part > header,
    header.wp-block-template-part,
    header.site-header,
    #masthead
) :where(a, .wp-block-navigation-item__content, .menu-item > a) {
    color: var(--loo-review-color-ink) !important;
    font-family: var(--loo-review-font-family) !important;
    font-weight: 700 !important;
}

:where(
    body > .wp-site-blocks > header,
    .wp-site-blocks > .wp-block-template-part > header,
    header.wp-block-template-part,
    header.site-header,
    #masthead
) :where(a, .wp-block-navigation-item__content, .menu-item > a):hover,
:where(
    body > .wp-site-blocks > header,
    .wp-site-blocks > .wp-block-template-part > header,
    header.site-header,
    #masthead
) :where(a, .wp-block-navigation-item__content, .menu-item > a):focus-visible {
    color: var(--loo-review-color-ink) !important;
    text-decoration: underline;
    text-decoration-thickness: .1em;
    text-underline-offset: .2em;
}

/* Footer links. */
:where(
    body > .wp-site-blocks > footer,
    .wp-site-blocks > .wp-block-template-part > footer,
    footer.wp-block-template-part,
    footer.site-footer,
    #colophon
) :where(a, .wp-block-navigation-item__content, .menu-item > a, p, .wp-block-site-title, .wp-block-site-title a) {
    color: var(--loo-review-color-canvas) !important;
}

:where(
    body > .wp-site-blocks > footer,
    .wp-site-blocks > .wp-block-template-part > footer,
    footer.wp-block-template-part,
    footer.site-footer,
    #colophon
) :where(a, .wp-block-navigation-item__content, .menu-item > a):hover,
:where(
    body > .wp-site-blocks > footer,
    .wp-site-blocks > .wp-block-template-part > footer,
    footer.site-footer,
    #colophon
) :where(a, .wp-block-navigation-item__content, .menu-item > a):focus-visible {
    color: var(--loo-review-color-primary) !important;
}

/* Logo + dynamic WordPress site title. */
.loo-review-site-branding {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: clamp(.45rem, 1vw, .7rem);
    min-width: 0;
}

.loo-review-site-branding .wp-block-site-logo {
    flex: 0 0 auto;
    margin: 0 !important;
}

.loo-review-site-branding .wp-block-site-logo img,
.loo-review-site-branding .custom-logo-link img,
.loo-review-site-branding img.custom-logo,
.loo-review-site-branding .site-logo img {
    display: block;
    height: auto;
    max-height: 54px;
    width: auto;
}

.loo-review-site-branding .custom-logo-link,
.loo-review-site-branding .site-logo {
    flex: 0 0 auto;
    margin: 0 !important;
}

.loo-review-site-title {
    color: var(--loo-review-color-ink) !important;
    font-family: var(--loo-review-font-family) !important;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 800 !important;
    letter-spacing: -.02em;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
}

/* If the theme already includes a separate Site Title block in the same
   header, hide only that duplicate once our dynamic branding title exists. */
:where(
    body > .wp-site-blocks > header,
    .wp-site-blocks > .wp-block-template-part > header,
    header.wp-block-template-part,
    header.site-header,
    #masthead
) .loo-review-site-branding ~ .wp-block-site-title {
    display: none !important;
}

@media (max-width: 600px) {
    :root {
        --loo-review-chrome-gutter: clamp(14px, 4vw, 20px);
    }

    .loo-review-site-branding .wp-block-site-logo img,
    .loo-review-site-branding .custom-logo-link img,
    .loo-review-site-branding img.custom-logo,
    .loo-review-site-branding .site-logo img {
        max-height: 44px;
    }

    .loo-review-site-title {
        font-size: 1rem;
    }
}