/**
* header.css
* Brand overrides for Astra's Header Builder output.
*
* Astra generates its own dynamic CSS (via wp_add_inline_style) for header
* colours and fonts set in the Customizer. This file loads after that dynamic
* CSS and applies the Domaine Porta visual identity to Astra's native classes.
*
* CSS custom properties are defined in style.css :root and must be used here.
* Never hardcode colour, font, or spacing values.
*
* Astra class reference (confirmed from source):
* .main-header-bar — primary header row div
* .ast-primary-header-bar — same element, Astra-specific class
* .site-primary-header-wrap — inner container (wraps the grid columns)
* .ast-site-identity — logo / site title component
* .site-title a — text logo link (before image is uploaded)
* .custom-logo — image logo ![]()
(WordPress standard)
* .main-header-menu — navigation
* .menu-link — nav link (Astra's class, not .nav-link)
* .current-menu-item — WP active-page class on -
* .current-menu-ancestor — WP active-ancestor class on
-
* .ast-site-header-cart — WooCommerce cart icon widget
* .ast-mobile-header-wrap — mobile header wrapper (#ast-mobile-header)
* .ast-menu-toggle — mobile hamburger button
* .ast-header-break-point — body class added at mobile breakpoint
*
* @package astra-child
*/
/* ── Sticky behavior ────────────────────────────────────────────────────── */
/*
* #masthead is the Astra element (confirmed: always carries .site-header).
* position: sticky keeps it pinned at the viewport top while the user scrolls,
* without removing it from document flow (unlike position: fixed).
* Page content therefore flows naturally below — no padding or spacer hack needed.
*
* z-index: 100 places it above the /domaine sticky anchor nav (z-index: 99)
* and all page content, but well below the WP admin bar (z-index: 99999).
*
* The box-shadow is permanent rather than scroll-triggered (which would require JS).
* It is subtle enough to read as intentional at the top of any page, and more
* visually useful as the header floats above scrolled content.
*
* Compatibility: body { overflow-x: hidden } in base.css is axis-specific and
* does not prevent vertical position: sticky in any current browser.
*/
#masthead {
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 12px rgba(26, 26, 26, 0.08);
}
/*
* The WP admin bar is position: fixed at top: 0 (32px on desktop, 46px on
* screens ≤ 782px). WordPress core adds margin-top to when logged in.
* Offsetting #masthead top by the admin bar height makes it stick just below it
* rather than behind it. Public visitors are unaffected — body.admin-bar is only
* present for logged-in users with the admin bar enabled.
*/
body.admin-bar #masthead {
top: 32px;
}
@media screen and (max-width: 782px) {
body.admin-bar #masthead {
top: 46px;
}
}
/* ── Header bar ─────────────────────────────────────────────────────────── */
/* Apply brand background and a hairline separator on the primary header row. */
.main-header-bar {
background-color: var(--color-bg);
border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}
/* Ensure the inner grid row is vertically centred and has breathing room. */
.main-header-bar .site-primary-header-wrap.ast-container {
min-height: 72px;
align-items: center;
}
/* ── Site identity — text logo (before image is uploaded) ───────────────── */
/*
* Astra outputs the site title inside .ast-site-identity → .site-title → .
* Style it as a Playfair Display wordmark in brand burgundy.
* Once an image logo is uploaded in Customizer → Logo, the becomes an
* image link and these text rules become irrelevant — only the img rules below
* will apply.
*/
.ast-site-identity .site-title a,
.ast-site-identity .site-title a:visited {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-accent);
letter-spacing: 0.02em;
text-decoration: none;
}
.ast-site-identity .site-title a:hover,
.ast-site-identity .site-title a:focus {
color: var(--color-gold);
text-decoration: none;
}
/* ── Site identity — image logo ─────────────────────────────────────────── */
/*
* Cap the logo image height so it never overflows the 80px header.
* Width: auto preserves aspect ratio.
* The logo retina srcset WordPress generates will handle HiDPI displays.
*/
.ast-site-identity .custom-logo {
max-height: 52px;
width: auto;
display: block;
}
/*
* Hide the site title text when an image logo is present.
* The Site Title must remain set in WP Admin → Settings → General (it feeds
* og:site_name and the Organization JSON-LD schema), but it should not render
* visually alongside the logo in the header.
*/
.ast-site-identity .site-title {
display: none;
}
/* ── Primary navigation links ────────────────────────────────────────────── */
/*
* Astra's Header Builder injects an inline