/*
Theme Name: FLGC Theme
Theme URI: https://floridageneralcontractorlicense.com
Author: floridageneralcontractorlicense.com
Description: Lean FSE block theme for floridageneralcontractorlicense.com. Trade-professional identity (slate/charcoal + safety amber); all design tokens in theme.json. Deliberately not a .gov/seal aesthetic.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.5
Requires PHP: 8.1
License: Proprietary
Text Domain: flgc
*/

/*
 * Dark "command bar" header (issue #30).
 * Colour, typography and spacing live in theme.json. This file carries only
 * what theme.json cannot express: sticky positioning, the safety-amber
 * caution-stripe underline (hover + current page), and the keyboard focus
 * outline. All colours reference theme.json preset tokens — no hardcoded hex.
 */

/*
 * Sticky header. The bar is sticky, but in an FSE template the header part is
 * rendered inside a <header class="wp-block-template-part"> wrapper that
 * shrink-wraps to the bar's height — a sticky child can only travel within its
 * parent's box, so that wrapper (70px tall) made the bar scroll away after one
 * header's height (issue #32: "computes position: static" in effect). Promote
 * the wrapper out of the layout flow so the sticky bar sticks to the viewport.
 */
.wp-block-template-part:has(> .flgc-command-bar) {
	display: contents;
}

/*
 * The bar is sticky (above) and also widens its own constrained content: the
 * body content width (theme.json contentSize) is a narrow 680px reading measure
 * — far too tight for the wordmark + 10 nav links, which is what made the bar
 * wrap to ~186px tall (issue #32). Override the layout custom property to the
 * wide measure so the row has room to lay out on a single line while the bar
 * still respects the theme's left/right padding and stays centered.
 */
.flgc-command-bar {
	position: sticky;
	top: 0;
	z-index: 100;
	--wp--style--global--content-size: var(--wp--style--global--wide-size, 1120px);
}

/* Wordmark: white, no underline (mirrors the theme.json site-title style). */
.flgc-command-bar .wp-block-site-title a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

/*
 * Keep the wordmark on a single line. In the space-between flex row the site
 * title computed flex: 0 1 auto + white-space: normal and was squeezed to
 * ~89px, wrapping to 4 lines. Give it its natural width and stop it shrinking.
 */
.flgc-command-bar .wp-block-site-title {
	flex-shrink: 0;
	white-space: nowrap;
}

/*
 * Caution-stripe motif: a 3px safety-amber underline drawn as a bottom border
 * on a transparent baseline, so hover and the current page reveal the amber.
 * Using a transparent-to-amber border keeps the link's layout height stable
 * (no reflow / CLS) when the stripe appears.
 */
.flgc-command-bar .wp-block-navigation-item__content {
	border-bottom: 3px solid transparent;
	padding-bottom: 2px;
	text-decoration: none;

	/* Keep each label ("How to Get", "Certified vs Registered") on one line. */
	white-space: nowrap;
}

/*
 * Fit all 10 items on a single row within the widened bar: keep the row from
 * wrapping and tighten the inter-item gap below theme.json's blockGap (which
 * is sized for body prose, not a dense nav). The labels themselves never wrap
 * (nowrap above); on the narrowest desktop widths the row may scroll rather
 * than reflow into a second line that would re-inflate the bar height.
 */
.flgc-command-bar .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: clamp(0.6rem, 1vw, 1rem);
}

/*
 * The wordmark + 10 labels are a tight fit at the 1280px desktop breakpoint;
 * drop the nav's body-prose letter-spacing so the row clears the bar's right
 * edge without per-item wrapping. (theme.json sets 0.02em for readability at
 * larger sizes; the dense nav doesn't need it.)
 */
.flgc-command-bar .wp-block-navigation {
	letter-spacing: 0;
}

.flgc-command-bar .wp-block-navigation-item__content:hover,
.flgc-command-bar .wp-block-navigation-item__content:focus-visible,
.flgc-command-bar .current-menu-item > .wp-block-navigation-item__content,
.flgc-command-bar
.wp-block-navigation-item__content[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Smooth reveal, disabled for users who prefer reduced motion. */
@media ( prefers-reduced-motion: no-preference ) {

	.flgc-command-bar .wp-block-navigation-item__content {
		transition: border-bottom-color 150ms ease-in-out;
	}
}

/* Visible amber keyboard-focus outline on nav links. */
.flgc-command-bar .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/*
 * Mobile overlay (hamburger): colors are set natively via the Navigation
 * block's overlayBackgroundColor="contrast" / overlayTextColor="base"
 * attributes (parts/header.html), so core emits the correct,
 * higher-specificity overlay CSS itself (dark surface, white links — legible
 * AA contrast). A hand-rolled `.is-menu-open` override is intentionally NOT
 * used here: it lost to core's own overlay rules, which is exactly what
 * produced the white-on-white bug (#54). Set the block attributes instead.
 */

/* Header brand: logo mark beside the wordmark (theme asset, no DB) */
.flgc-command-bar .flgc-brand {
	gap: var(--wp--preset--spacing--20);
}

.flgc-command-bar .flgc-logo {
	margin: 0;
	line-height: 0;
}

.flgc-command-bar .flgc-logo img {
	width: 44px;
	height: auto;

	/* Override core .wp-block-image img { max-width:100% }: the inline <a>/figure
	   shrink-wrap to 0 width, so max-width:100% resolves to 0 and caps the 44px
	   to 0 (logo renders 0×0). max-width:none lets the explicit width hold. */
	max-width: none;
	display: block;
}

/*
 * Mobile overlay layout: the bar right-justifies the nav
 * (justifyContent:right), which leaks into the full-screen overlay as
 * align-items: flex-end with no side padding — so links hug and clip the
 * right edge. Left-align the open overlay and add side padding so it reads
 * as a normal mobile menu.
 */
.flgc-command-bar
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
}

.flgc-command-bar
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container {
	align-items: flex-start;
}