/* ==========================================================================
   9WEB STARTER THEME — SITE CHROME (Phase 5)
   Header, footer, primary/footer navigation, and the skip link. Token-
   driven only — every colour/spacing/z-index value below resolves to a
   --9w-* alias (variables.css), never a raw hard-coded value. Layout
   behaviour (constrained width, flex placement) is handled by block
   attributes in parts/header.html and parts/footer.html themselves —
   this file only carries what block attributes cannot express: sticky
   positioning, borders, link colour mapping, and focus styling.
   ========================================================================== */

/* ---- Skip link -----------------------------------------------------------
   Markup + the show-on-focus mechanics live in utilities.css
   (.is-9w-visually-hidden / .is-9w-show-on-focus) and inc/setup.php
   (nineweb_print_skip_link(), hooked to wp_body_open). This only pins the
   revealed link to the top of the viewport, above the sticky header,
   instead of leaving it in normal document flow. See docs/DECISIONS.md #23. */

.is-9w-skip-link:focus {
	position: fixed;
	top: var(--9w-space-2);
	left: var(--9w-space-2);
	z-index: var(--9w-z-modal);
	padding: var(--9w-space-2) var(--9w-space-4);
	background: var(--9w-color-background);
	color: var(--9w-color-text);
	border-radius: var(--9w-radius-sm);
	box-shadow: var(--9w-shadow-md);
}

/* ---- Site header -----------------------------------------------------------
   Sticky via a dedicated class rather than the block editor's native
   position:sticky support (theme.json settings.position.sticky), so
   z-index stays governed by --9w-z-header instead of fighting core's
   own inline z-index on that support. See docs/DECISIONS.md #23. */

.is-9w-site-header {
	position: sticky;
	top: 0;
	z-index: var(--9w-z-header);
	background: var(--9w-color-primary);
	box-shadow: var(--9w-shadow-sm);
}

.is-9w-brand-mark {
	margin: 0;
	line-height: 0;
}

.is-9w-brand-mark img {
	height: 36px;
	width: auto;
	display: block;
}

.is-9w-header-actions {
	gap: var(--9w-space-6);
}

.is-9w-header-phone a {
	font-family: var(--9w-font-mono);
	font-size: var(--9w-text-sm);
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	transition: color 0.2s ease;
}

.is-9w-header-phone a:hover {
	color: var(--9w-color-accent);
}

/* ---- Header: force single row, no wrapping (Mindelo correction) ---- */

.is-9w-site-header > .wp-block-group {
	flex-wrap: nowrap !important;
	gap: var(--9w-space-4);
}

.is-9w-primary-nav {
	flex-wrap: nowrap;
}

.is-9w-primary-nav .wp-block-navigation-item__content {
	white-space: nowrap;
}

.is-9w-header-actions {
	flex-wrap: nowrap;
	white-space: nowrap;
}

.is-9w-header-phone, .is-9w-header-phone a {
	white-space: nowrap;
}

.is-9w-header-cta .wp-block-buttons {
	flex-wrap: nowrap;
}

.is-9w-header-cta .wp-block-button__link {
	white-space: nowrap;
}

.is-9w-site-header .wp-block-site-title a {
	color: var(--9w-color-primary);
	font-family: var(--9w-font-heading);
	font-size: var(--9w-text-xl);
	font-weight: var(--9w-font-weight-bold);
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color 0.15s ease;
}

.is-9w-site-header .wp-block-site-title a:hover {
	color: var(--9w-color-accent);
}

/* ---- Navigation (primary + footer) -----------------------------------------
   Layout, the mobile overlay panel, keyboard operation and focus
   trapping all come from WordPress core's Navigation block — nothing
   here re-implements any of that. This only maps the block's own
   exposed hooks (classes, block-gap custom property) onto 9Web tokens. */

.wp-block-navigation {
	--wp--style--block-gap: var(--9w-space-6);
}

.is-9w-primary-nav {
	--wp--style--block-gap: var(--9w-space-8);
}

.wp-block-navigation a.wp-block-navigation-item__content {
	color: var(--9w-color-text);
	font-family: var(--9w-font-body);
	font-weight: var(--9w-font-weight-medium);
	padding-top: var(--9w-space-2);
	padding-bottom: var(--9w-space-2);
}

.is-9w-primary-nav a.wp-block-navigation-item__content {
	color: #FFFFFF;
	font-size: var(--9w-text-sm);
}

.is-9w-primary-nav .wp-block-navigation-item__content {
	position: relative;
}

.is-9w-primary-nav .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--9w-color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: var(--9w-color-accent);
}

.is-9w-primary-nav .wp-block-navigation-item__content:hover::after,
.is-9w-primary-nav .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--9w-color-background);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--9w-color-primary);
}

.is-9w-footer-nav a.wp-block-navigation-item__content {
	color: var(--9w-color-muted);
}

/* ---- Header CTA ("Fale connosco") ---------------------------------------
   Scoped to .is-9w-header-cta only \u2014 the sitewide button default in
   components.css (radius-md, primary fill) is untouched everywhere
   else. This is a deliberate, distinct treatment for the one button
   that lives inside the sticky header: pill-shaped, accent-filled,
   with a small hover lift. */

.is-9w-header-cta .wp-block-button__link {
	background: var(--9w-color-accent);
	color: var(--9w-color-background);
	border-radius: var(--9w-radius-sm);
	padding: var(--9w-space-2) var(--9w-space-6);
	font-weight: var(--9w-font-weight-semibold);
	letter-spacing: 0.01em;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.is-9w-header-cta .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: var(--9w-shadow-md);
	color: var(--9w-color-background);
}

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

.is-9w-site-footer {
	background: var(--9w-color-surface);
	border-top: 1px solid var(--9w-color-border);
	padding-block: var(--9w-space-8);
}

/* ---- Focus visibility ---------------------------------------------------------
   :focus-visible only (never :focus) per docs/ACCESSIBILITY.md — keyboard
   users always see it, mouse users aren't shown a ring they didn't ask
   for. The browser's default outline is never removed anywhere in this
   file; this only makes it consistent and on-brand where a component
   sets its own colours that could otherwise reduce outline contrast. */

.is-9w-site-header a:focus-visible,
.is-9w-site-footer a:focus-visible,
.wp-block-navigation a:focus-visible,
.wp-block-navigation button:focus-visible {
	outline: 2px solid var(--9w-color-accent);
	outline-offset: 2px;
}


/* ---- Footer logo: explicit size (Mindelo correction — was unconstrained,
   rendering at the SVG's oversized intrinsic viewBox dimensions) ---- */

.is-9w-footer-logo img {
	height: 84px;
	width: auto;
	display: block;
}

@media (max-width: 767px) {
	.is-9w-footer-logo img {
		height: 54px;
	}
}