/* GlobiFYE chrome: what the header, menu panel and footer still need from CSS. Their colours, type, spacing, radius
   and shadows are block attributes and style variations in the parts (tools/build-site.py), so the Site Editor shows
   and edits them. Kept here: the sticky part wrapper, the phone header, the menu link animation, the menu panel rows,
   the header over the hero. Token variables only (raw values: 0, 1px hairlines, media-query breakpoints). */

/* ---------- page frame ---------- */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- header ---------- */
/* The part wrapper would limit sticky to its own height: let its children sit directly in .wp-site-blocks. */
.wp-block-template-part:has(> .gf-header-wrap) { display: contents; }
.gf-header-wrap { z-index: var(--wp--custom--z--sticky); transition: background-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base); }
/* the brand group is one link: the title link stretches over the badge */
.gf-brand { position: relative; flex: none; }
.gf-brand .wp-block-site-title { margin: 0; }
.gf-brand .wp-block-site-title a::after { content: ""; position: absolute; inset: 0; }
.gf-header-cta { flex: none; margin: 0; }

/* navigation: inline from 1024px, the menu panel below (core switches at 600px, so move the switch) */
.gf-nav { margin-right: auto; margin-left: var(--wp--preset--spacing--50); }
.gf-nav .wp-block-navigation-item__content { position: relative; padding: var(--wp--preset--spacing--30) 0; }
.gf-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 100%; bottom: var(--wp--preset--spacing--20); height: var(--wp--custom--border--strong); border-radius: var(--wp--custom--radius--badge); background: var(--wp--preset--color--accent-1); transition: right var(--wp--custom--transition--base); }
.gf-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover::after,
.gf-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after { right: 0; }
.gf-nav .wp-block-navigation__responsive-container-open { display: none; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); align-items: center; justify-content: center; border-radius: var(--wp--custom--radius--icon-button); color: currentColor; background: transparent; border: 0; padding: 0; cursor: pointer; }
.gf-nav .wp-block-navigation__responsive-container-open:hover { background: var(--wp--preset--color--accent-5); }
.gf-nav .wp-block-navigation__responsive-container-open svg { width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); }
@media (max-width: 1023px) {
	.gf-nav { order: 3; margin: 0; }
	.gf-header-cta { margin-left: auto; }
	.gf-nav .wp-block-navigation__responsive-container-open { display: flex !important; }
	.gf-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}
@media (min-width: 1024px) {
	.gf-header { min-height: var(--wp--custom--layout--header-height) !important; }
}

/* centered: logo in the middle and the button on the right, the menu on its own row below (from 1024px) */
@media (min-width: 1024px) {
	.gf-header.gf-header--centered { display: grid !important; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". brand cta" "nav nav nav"; align-items: center; row-gap: var(--wp--preset--spacing--20); padding-block: var(--wp--preset--spacing--30); }
	.gf-header--centered .gf-brand { grid-area: brand; }
	.gf-header--centered .gf-header-cta { grid-area: cta; justify-self: end; }
	.gf-header--centered .gf-nav { grid-area: nav; justify-self: center; margin: 0; }
}

/* over the hero (content.json layout.header.over_hero): transparent while the page sits at the top of a hero that runs
   under the header (.gf-hero--under-header), solid once it scrolls (assets/js/header-scroll.js sets body.gf-is-scrolled).
   Only with JavaScript (html.gf-js, printed in the head), so without it the header stays solid. */
html.gf-js body:not(.gf-is-scrolled):has(.gf-hero--under-header) .gf-header-wrap--over-hero { background-color: transparent !important; }
html.gf-js body:not(.gf-is-scrolled):has(.gf-hero--under-header.gf-hero--tone-dark) .gf-header-wrap--over-hero { color: var(--wp--preset--color--on-accent); }
body.gf-is-scrolled .gf-header-wrap { box-shadow: 0 1px 0 var(--wp--preset--color--accent-6); }
/* the open menu panel must not inherit the transparent header's colours */
.gf-header-wrap:has(.wp-block-navigation__responsive-container.is-menu-open) { background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast); }

/* ---------- menu panel (navigation overlay; the panel's look is in the part) ---------- */
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--overlay); padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--40)) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > * { display: block; height: auto; }
.gf-drawer { width: 100%; max-width: var(--wp--custom--layout--drawer); margin-left: auto; box-sizing: border-box; }
/* core's overlay rule sets display:block on the panel's children: keep the head a row */
.gf-drawer__head { display: flex !important; }
.gf-drawer .wp-block-navigation-overlay-close { display: inline-grid; place-items: center; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong); border-radius: var(--wp--custom--radius--icon-button); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); cursor: pointer; padding: 0; position: static; }
.gf-drawer .wp-block-navigation-overlay-close:hover { background: var(--wp--preset--color--accent-5); }
.gf-drawer .wp-block-navigation-overlay-close svg { width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); fill: currentColor; }
.gf-drawer__nav .wp-block-navigation__container { display: grid; width: 100%; gap: 0; }
.gf-drawer__nav .wp-block-navigation-item { display: block; border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); }
.gf-drawer__nav .wp-block-navigation-item:last-child { border-bottom: 0; }
.gf-drawer__nav .wp-block-navigation-item__content { display: flex; align-items: center; justify-content: space-between; min-height: var(--wp--custom--control--min); padding: var(--wp--preset--spacing--20) 0; }
.gf-drawer__nav .wp-block-navigation-item__content::after { content: ""; width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); flex: none; background: var(--wp--preset--color--accent-4); -webkit-mask: url(../icons/wp/caret-right.svg) center / contain no-repeat; mask: url(../icons/wp/caret-right.svg) center / contain no-repeat; transition: transform var(--wp--custom--transition--fast); }
.gf-drawer__nav .wp-block-navigation-item__content:hover::after { transform: translateX(3px); background: var(--wp--preset--color--contrast); }
.gf-drawer__contact a { display: inline-flex; align-items: center; min-height: var(--wp--custom--control--min); }

/* ---------- footer (colours, spacing and type are in the part) ---------- */
.gf-footer a { text-decoration: none; }
.gf-footer a:hover { text-decoration: underline; }
.gf-footer .wp-block-column { min-width: 0; }
.gf-footer .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: var(--wp--custom--control--min); }
.gf-footer__bottom > * { margin: 0; }
.gf-footer__bottom .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--on-accent); }
/* social logos stay core brand marks: 44px round targets that invert on hover */
.gf-footer .wp-block-social-links { gap: var(--wp--preset--spacing--20); }
.gf-footer .wp-block-social-links .wp-social-link { background: transparent !important; color: var(--wp--preset--color--on-accent) !important; border-radius: var(--wp--custom--radius--icon-button); }
.gf-footer .wp-block-social-links .wp-social-link a { display: grid; place-items: center; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); padding: 0; color: inherit; }
.gf-footer .wp-block-social-links .wp-social-link a:hover,
.gf-footer .wp-block-social-links .wp-social-link a:focus-visible { background: var(--wp--preset--color--on-accent); color: var(--wp--preset--color--accent-3) !important; text-decoration: none; border-radius: var(--wp--custom--radius--icon-button); }
.gf-footer .wp-block-social-links .wp-social-link a:hover svg,
.gf-footer .wp-block-social-links .wp-social-link a:focus-visible svg { fill: var(--wp--preset--color--accent-3); }
.gf-footer .wp-block-social-links svg { width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); }

/* --- Responsive Header & Mobile Logo Fix --- */
header .max-w-7xl {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}
header .logo-brand-link {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
    text-decoration: none !important;
}
header .logo-brand-link img {
    height: 32px !important;
    width: 32px !important;
    max-height: 36px !important;
    max-width: 36px !important;
    object-fit: contain !important;
    display: inline-block !important;
    margin: 0 !important;
    vertical-align: middle !important;
}
@media (min-width: 640px) {
    header .logo-brand-link img {
        height: 36px !important;
        width: 36px !important;
    }
}
header .wp-block-image,
header figure {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}
header .wp-block-heading {
    margin: 0 !important;
    padding: 0 !important;
}