/* namore theme — base layout: header, footer, generic content, mobile nav.
   Component styles (hero, cards, modals, tools) live in the namore-core
   plugin's stylesheet so they keep working even if this theme is swapped. */

*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }

body { background: var(--wp--preset--color--bg); }

/* Root cause of the visible gap between the header and the hero (and the
   same small gap between every section below it): the theme's blockGap
   setting makes WordPress add margin-top to every top-level block in the
   template automatically. Every section here already manages its own
   spacing with explicit padding (see .namore-section, .namore-hero, …),
   so that auto-margin is pure redundant gap — and between two same-color
   blocks like the header and hero, it shows up as a stray light stripe.
   This only resets spacing on the template's own top-level blocks
   (direct children of .wp-site-blocks); it does not touch blockGap
   anywhere inside a section's own content. */
.wp-site-blocks > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Header is a flat dark-navy bar that visually merges into the equally
   dark, flat namore-hero section directly below it (see namore-core.css)
   — this is the Skyscanner-style "header + hero are one block" pattern.
   The color itself is the theme's "Ink" palette entry, so it's editable
   from Appearance → Editor → Styles → Colors like everything else. */
.namore-header {
	position: sticky; top: 0; z-index: 50;
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: nowrap;
	gap: 16px; padding: 16px clamp(20px, 4vw, 40px);
	background: var(--wp--preset--color--ink);
	/* No border here on purpose — the header and .namore-hero share the
	   exact same background color so they read as one continuous block,
	   the way Skyscanner's header + hero do. A border would draw a seam
	   back in. */
}
.namore-header__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex-shrink: 0; }
.namore-header__brand svg { flex-shrink: 0; }

/* Responsive behavior for the primary menu is handled by core/navigation's
   own overlay (see parts/header.html — overlayMenu:"mobile"), so it isn't
   duplicated here. These rules only recolor it for the dark header bar. */
.namore-nav a { font-weight: 600; }
.namore-header .wp-block-navigation-item__content { color: var(--wp--preset--color--white); }
.namore-header .wp-block-navigation__responsive-container-open,
.namore-header .wp-block-navigation__responsive-container-open svg { color: var(--wp--preset--color--white); fill: var(--wp--preset--color--white); }
/* When the mobile overlay panel is open it shows on a light background —
   flip its text back to dark so it stays readable. */
.namore-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.namore-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	color: var(--wp--preset--color--ink); fill: var(--wp--preset--color--ink);
}

/* The Log in / Sign up actions.
   The actual reason these were stacking wasn't a flex-wrap issue at all —
   it was WordPress's wpautop() inserting a literal <br> into the
   shortcode's output (see the long comment in
   namore_shortcode_account_button() in namore-core/includes/accounts.php
   for the full explanation). That's fixed at the source now. The rules
   below keep the row flex/nowrap regardless, as a harmless backstop, and
   style .namore-header__actions-inner — the single wrapper element the
   shortcode actually returns — as the real flex row. */
.namore-header__actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; flex-shrink: 0; }
.namore-header__actions-inner { display: inline-flex; align-items: center; gap: 10px; }
.namore-header .namore-account-btn { border-color: rgba(255,255,255,0.35); color: var(--wp--preset--color--white); }
.namore-header .namore-account-avatar { background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); }

.namore-content { max-width: 1220px; margin: 0 auto; padding: 40px clamp(20px, 4vw, 40px) 80px; }
.namore-content h1 { font-size: 2rem; }

.namore-footer { border-top: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--bg-alt); padding: 56px clamp(20px, 4vw, 40px) 28px; }
.namore-footer__grid { max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 36px; }
.namore-footer__col h4 { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 14px; }
.namore-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.namore-footer__col a { color: var(--wp--preset--color--muted); text-decoration: none; font-size: 14px; }
.namore-footer__col a:hover { color: var(--wp--preset--color--sea); }
.namore-footer__bottom { max-width: 1220px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 24px; border-top: 1px solid var(--wp--preset--color--line); font-size: 13px; color: var(--wp--preset--color--muted); }

@media (max-width: 900px) {
	.namore-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.namore-footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.namore-header { padding: 14px clamp(16px, 5vw, 24px); gap: 10px; }
	.namore-header__actions { gap: 8px; }
}