/**
 * VU Site Chrome
 *
 * Styling for markup this theme actually owns and renders itself. Right
 * now that is only the mobile sticky action bar (Appeler / Faire évaluer
 * une pièce), rendered via vu_mobile_action_bar() in functions.php.
 *
 * This file intentionally does NOT contain styling for the header,
 * primary navigation, or footer beyond the few narrow, documented
 * exceptions below (the language switchers, the Applications
 * desktop-submenu width fix, and Footer Top/Bottom typography-and-
 * spacing normalization) — Kadence's Classic Header/Footer Builder
 * provides native items (Logo, Primary Navigation, Search, Button,
 * HTML), native Sticky Header configuration, separate Desktop/Tablet/
 * Mobile headers, and native Trigger + Mobile Navigation + Off Canvas
 * behavior — those should be configured natively in the Customizer
 * first. Whether Kadence's per-item "CSS Class(es)" field can attach
 * custom classes to those builder surfaces has not been verified
 * against the installed Kadence Classic Header Builder, so no CSS is
 * written against that assumption here. Add only the minimum
 * Git-tracked CSS required for a visual gap Kadence's native controls
 * genuinely cannot close (no native "submenu width"/"nowrap" control
 * exists) — e.g. prefer native Sticky Header over custom
 * `position: sticky`, native Search over custom search markup, and
 * native row/background/border/design settings wherever they can
 * reproduce a-2 directly.
 *
 * Self-contained: every rule below declares its own color/background/
 * font rather than relying on `.vu-site` (base.css) inheritance.
 * `.vu-site` is NOT activated on <body> — see the WEB-04 implementation
 * report for why (it would prematurely dark-theme Kadence's own
 * unstyled chrome and any content areas WEB-05/06 haven't built yet).
 */

/* ---------- Mobile sticky action bar ---------- */
/* Phone-only, ≤640px. Rendered via vu_mobile_action_bar() (functions.php,
   wp_footer hook) — Kadence has no native equivalent for this pattern.
   --vu-mobile-bar-height is the single source of truth for the bar's
   real height, consumed by both .vu-mobile-bar__action's min-height and
   the body padding-reserve rule below — no more duplicated literal
   value to accidentally desync. */

:root {
	--vu-mobile-bar-height: 56px;
}

.vu-mobile-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 400;
	background: var(--vu-color-surface);
	border-top: 1px solid var(--vu-color-border);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.vu-mobile-bar__action {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--vu-mobile-bar-height);
	text-decoration: none;
	font-family: var(--vu-font-body);
	font-size: var(--vu-text-base);
	font-weight: 600;
	text-align: center;
}
.vu-mobile-bar__action--call {
	background: var(--vu-color-surface-2);
	color: var(--vu-color-white);
}
.vu-mobile-bar__action--evaluate {
	background: var(--vu-color-red);
	color: var(--vu-color-white);
}
.vu-mobile-bar__action:focus-visible {
	outline: 2px solid var(--vu-color-white);
	outline-offset: -4px;
}

@media (max-width: 640px) {
	.vu-mobile-bar {
		display: flex;
	}
	/* Reserve space so the fixed bar never covers page content/controls —
	   but only on pages where the bar actually exists in the DOM.
	   Confirmed bug (post-QA mobile findings): this was previously a bare
	   `body` selector, applying unconditionally even on the four pages
	   where vu_mobile_action_bar() (functions.php) never prints the bar
	   at all (Contact, Faire évaluer une pièce, Carrières, the Careers
	   application page) — reserving dead space with nothing to justify
	   it. `:has(.vu-mobile-bar)` derives the padding state directly from
	   the bar's own DOM presence — PHP already decides whether the bar
	   exists; CSS reads that same fact structurally instead of
	   duplicating it into a separate body class. :has() is already an
	   accepted baseline selector in this project (the Applications
	   submenu fix, the CF7-form width rules in page-templates.css). */
	body:has(.vu-mobile-bar) {
		padding-bottom: calc(var(--vu-mobile-bar-height) + env(safe-area-inset-bottom, 0px));
	}
}

/* ---------- Footer Top widget typography ---------- */
/* Kadence Footer Top (`.site-top-footer-wrap`), 4 Gutenberg widget columns.
   Footer Top's background (#141618 / --vu-color-bg) is already set in
   Kadence's Customizer, not here. Gutenberg block widgets otherwise
   inherit default/dark text colors with insufficient contrast against
   that background, so headings/body/links are set explicitly. Font-size
   values (18px / 15px) have no matching semantic token in tokens.css —
   the closest raw value, --vu-text-md, is labeled for buttons/review-quote
   text, so reusing it here would misleadingly couple unrelated roles;
   left as literals instead. Column widths and responsive behavior are
   native Kadence Customizer state (4 equal columns), not this file's
   concern; heading/list spacing and the Widget 1 logo/rhythm below are
   this file's addition, confirmed against real gaps Kadence's own CSS
   was actually producing (see each rule's own note). Bottom Footer has
   its own separate section further below. */

.site-top-footer-wrap h1,
.site-top-footer-wrap h2,
.site-top-footer-wrap h3,
.site-top-footer-wrap h4,
.site-top-footer-wrap h5,
.site-top-footer-wrap h6 {
	font-family: var(--vu-font-ui);
	font-weight: 500;
	font-size: 1.125rem; /* ~18px */
	color: var(--vu-color-white);
	/* Confirmed via Kadence's own global.min.css: h2-h6 receive no
	   theme margin reset, only the browser UA default (~0.83em, ~15px
	   at this font-size) survives. Set explicitly and small instead of
	   left to that default — this is one of the two contributors to
	   the reported oversized heading-to-list gap (see the wrapping
	   .widget rule below for the other). */
	margin: 0 0 8px;
}

.site-top-footer-wrap p,
.site-top-footer-wrap li {
	font-family: var(--vu-font-body);
	font-size: .9375rem; /* ~15px */
	line-height: 1.6;
	color: var(--vu-color-gray);
}

.site-top-footer-wrap a {
	color: var(--vu-color-gray);
	text-decoration: none;
}

.site-top-footer-wrap a:hover,
.site-top-footer-wrap a:focus {
	color: var(--vu-color-white);
}

/* Each Gutenberg block in a footer widget area renders as its own
   <section class="widget ..."> (confirmed live markup), and Kadence's
   own footer.min.css gives every such section a flat
   `.site-top-footer-inner-wrap .widget{margin-bottom:30px}` regardless
   of what it contains — the OTHER contributor to the oversized gap
   below Services/Applications/Vilebrequin Universel's headings (30px
   from the wrapper, plus whatever the heading's own margin adds, can
   otherwise escape/collapse through the zero-padding wrapper). Scoped
   via :has() to only the wrapper directly containing a heading, so
   this never touches the generic 30px rhythm used for non-heading
   blocks elsewhere in the footer (e.g. Widget 1's own blocks, handled
   on their own terms below). Matches the 8px above so the two values
   can never visibly disagree even if collapsing does occur. */
.site-top-footer-wrap .widget:has(> .wp-block-heading) {
	margin-bottom: 8px;
}

/* Bullet removal (Services/Applications/Vilebrequin Universel lists):
   core Gutenberg's List block (`.wp-block-list`) carries the browser's
   own default UL styling (disc marker, ~40px padding-left, ~1em top
   margin) — Kadence Blocks is not installed on this site (confirmed
   absent from the active-plugins list), so no native "remove bullets"
   block-style option exists; this is the CSS fallback. Scoped to
   `.site-top-footer-wrap` specifically (not a bare `.wp-block-list`)
   so list blocks in ordinary page content elsewhere are unaffected.
   margin: 0 also removes the list's own top margin entirely, so the
   heading's own 8px margin-bottom (above) becomes the sole,
   deterministic source of the heading-to-list gap — nothing left to
   collapse or disagree with. */
.site-top-footer-wrap .wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- Footer Top, Widget 1: logo + internal rhythm ---------- */
/* Logo top-alignment: confirmed via Kadence's own global.min.css —
   `figure{margin:.5em 0}` — applies to every <figure>, including the
   Gutenberg Image block wrapping the logo, and was the actual cause of
   the logo sitting visibly lower than Widgets 2-4's headings (which
   have no such figure ancestor). Reset to 0 here; width/aspect ratio
   handled directly on the <img>, not via a wrapper transform. */
.site-top-footer-wrap .footer-widget1 .wp-block-image {
	margin: 0;
}
.site-top-footer-wrap .footer-widget1 .wp-block-image img {
	width: auto;
	max-width: 180px;
	height: auto;
}

/* Internal rhythm (logo -> description/address -> Contact link): each
   block is its own <section class="widget ...">, so the same generic
   Kadence 30px .widget margin-bottom noted above applies between all
   of them here too — confirmed the direct cause of the oversized gap
   before the Contact link. Tightened specifically within Widget 1
   (not Widgets 2-4, whose own heading-to-list case is handled above)
   to a value that still reads as deliberate paragraph/link separation,
   not as tight as the heading-to-list gap since these are unrelated
   content blocks, not a heading and its own list. */
.site-top-footer-wrap .footer-widget1 .widget {
	margin-bottom: 14px;
}

/* ---------- Header language switcher ---------- */
/* Confirmed DEV markup: #secondary-navigation wraps TranslatePress's
   .trp-language-switcher-container items; the active item additionally
   carries .current-language-menu-item. Scoped to #secondary-navigation
   so this does not affect any other TranslatePress switcher instance
   (e.g. inside Footer Top widgets) that may exist elsewhere. */

/* FR-LAUNCH-01 (DEC-026): during the French-only phase the two
   switcher items are removed server-side
   (vu_filter_language_switcher_menu_items()), which leaves this header
   element with an empty menu. Collapse the element itself while it has
   no item, so it leaves no gap and no empty navigation landmark. It
   reappears by itself as soon as the menu has an item again. */
.site-header-item:has(> #secondary-navigation):not(:has(li)) {
	display: none;
}

#secondary-navigation .trp-language-switcher-container a {
	padding: 0.25rem 0.45rem;
	border-radius: 4px;
	line-height: 1;
	color: var(--vu-color-gray);
}

#secondary-navigation .trp-language-switcher-container a:hover,
#secondary-navigation .trp-language-switcher-container a:focus-visible {
	color: var(--vu-color-white);
}

#secondary-navigation .current-language-menu-item a {
	background: var(--vu-color-red);
	color: var(--vu-color-white);
}

/* ---------- Mobile Off Canvas language switcher ---------- */
/* Confirmed DEV markup (https://dev.crank-kit.com/, fetched 2026-09-05):
   #mobile-site-navigation is the Kadence mobile/Off Canvas nav (rendered
   inside #mobile-drawer), sharing one flat <ul id="mobile-menu"> with the
   four main nav items. TranslatePress renders FR/EN as two more
   <li class="trp-language-switcher-container ..."> at the end of that
   same list; the active one additionally carries
   .current-language-menu-item — same classes as desktop, confirmed
   present in both #secondary-navigation and #mobile-site-navigation
   markup. Scoped strictly to #mobile-site-navigation so this cannot
   affect #secondary-navigation (desktop) or the separate #mobile-header
   builder location.

   Kadence's own mobile-nav CSS (confirmed via the enqueued
   header.min.css and the Customizer-generated inline CSS) makes every
   item, including these two, a block-level, full-width <li>/<a> with
   its own border-bottom divider
   (`.mobile-navigation ul li:not(.menu-item-has-children) a`). The four
   main items are left untouched, so the existing divider below "À
   propos" still separates the language row from the main navigation.
   Only the two language items are changed here: their <li> becomes
   inline-block so FR/EN share one row, and their border is removed so
   there is no divider between (or below) the pair. All overrides are
   scoped under the #mobile-site-navigation ID, which already outranks
   Kadence's own class-only mobile-nav rules — no !important needed. */

#mobile-site-navigation .trp-language-switcher-container {
	display: inline-block;
}

#mobile-site-navigation .trp-language-switcher-container a {
	display: inline-block;
	width: auto;
	padding: 0.25rem 0.45rem;
	border-radius: 4px;
	line-height: 1;
	border-bottom: 0;
	color: var(--vu-color-gray);
}

#mobile-site-navigation .trp-language-switcher-container a:hover,
#mobile-site-navigation .trp-language-switcher-container a:focus-visible {
	color: var(--vu-color-white);
}

#mobile-site-navigation .current-language-menu-item a {
	background: var(--vu-color-red);
	color: var(--vu-color-white);
}

/* ---------- Applications desktop dropdown: one line per label ---------- */
/* Root cause confirmed by fetching Kadence's own actual served CSS
   (wp-content/themes/kadence/assets/css/header.min.css, 2026-09-12) —
   not the .sub-menu <ul> itself (no inline/explicit width there), but
   this rule on the LINK inside each dropdown item:

     .header-navigation ul ul li.menu-item>a{width:200px}

   Each dropdown <a> is hard-capped at 200px regardless of its text.
   The earlier fix only widened the outer <ul class="sub-menu"> (via
   min-width: max-content) — but a flex/box parent's max-content size
   is computed from its children's own DECLARED box sizes, and every
   child <a> still declared exactly 200px, so the <ul> (and its dark
   background) stayed at ~200px too. white-space: nowrap then made the
   text visibly spill past that 200px box into the page background,
   which is exactly the reported symptom. Overriding the <a>'s own
   width (not just the <ul>'s) is the actual fix: once each link sizes
   to its own content, the <ul>'s max-content calculation reflects the
   true widest label, and the dark background (the <ul>'s own box)
   grows to match it automatically — text area and background expand
   together because they are now driven by the same corrected value.

   Scoped via the Applications link's own href, not to .sub-menu
   generally — Services' dropdown, and any future item, are untouched.
   href-based rather than the menu item's auto-generated numeric ID
   (confirmed live as menu-item-124) so this survives that ID ever
   changing (e.g. the item being removed and re-added), and works
   identically on LIVE's own domain later. #primary-menu additionally
   confirms this only ever matches the DESKTOP menu: the separate
   Off Canvas/mobile menu (confirmed a distinct WordPress menu object,
   its own Applications entry rendered as menu-item-119 inside
   <ul id="mobile-menu">) has no element this selector can match at
   all, and the @media guard is a second, deliberate layer of the same
   scoping, tied to the existing ~1100px header breakpoint.

   min-width: max-content (on both the <ul> and now the <a>) sizes
   everything to its own widest label content directly, rather than a
   guessed/hardcoded pixel value that would need revisiting if the
   approved French labels ever change. */
@media (min-width: 1101px) {
	#primary-menu li.menu-item-has-children:has(> a[href$="/applications/"]) > .sub-menu {
		width: auto;
		min-width: max-content;
	}
	#primary-menu li.menu-item-has-children:has(> a[href$="/applications/"]) > .sub-menu a {
		width: auto;
		min-width: max-content;
		white-space: nowrap;
	}
}

/* ---------- Footer Bottom: copyright / credit typography match ---------- */
/* Confirmed live DEV markup (2026-09-12): Bottom Footer is Kadence's
   native 2-column row, copyright left (content-align-left) and the new
   Widget 5 "Site par MaConception" right (content-align-right), both
   already carrying Kadence's own content-valign-top — alignment/grid
   itself is untouched here, only text metrics.

   Kadence hardcodes the copyright's own typography directly in its
   served CSS: `#colophon .footer-html{font-style:normal;font-weight:
   normal;font-size:14px;font-family:Inter, sans-serif;color:#9a9ca0;}`.
   Widget 5 is a plain Gutenberg paragraph with no equivalent rule, so
   it falls back to this theme's base body styles instead of matching.
   Confirmed via tokens.css that --vu-font-body/--vu-color-gray are the
   same values Kadence hardcoded (Inter/sans-serif, #9A9CA0) — applied
   here explicitly via tokens (rather than depending on Kadence's own
   selector) so the match holds even if Kadence's rule ever changes.
   font-weight/line-height set to match the copyright's normal/unset-UA
   metrics; margin: 0 on both sides removes the paragraph's own default
   vertical margin, which was the actual source of any baseline
   misalignment between the two columns (the grid/valign was already
   correct). Link color deliberately kept equal to the copyright's own
   gray — not a distinct/darker link color — per the requirement that
   the credit must not read as darker than the copyright; hover/focus
   reuses the same white transition already established for every
   other footer link above. */
.site-bottom-footer-wrap .footer-html-inner p,
.site-bottom-footer-wrap .footer-widget5 p {
	margin: 0;
	font-family: var(--vu-font-body);
	font-size: .875rem; /* 14px, matches Kadence's own copyright rule */
	font-weight: normal;
	line-height: 1.6;
	color: var(--vu-color-gray);
}

/* PRIVACY-01: the "Politique de confidentialité" link sits in the
   copyright element itself (.footer-html-inner), so it shares the
   credit link's treatment instead of Kadence's default link color. */
.site-bottom-footer-wrap .footer-html-inner a,
.site-bottom-footer-wrap .footer-widget5 a {
	color: var(--vu-color-gray);
	text-decoration: none;
}

.site-bottom-footer-wrap .footer-html-inner a:hover,
.site-bottom-footer-wrap .footer-html-inner a:focus,
.site-bottom-footer-wrap .footer-widget5 a:hover,
.site-bottom-footer-wrap .footer-widget5 a:focus {
	color: var(--vu-color-white);
}

/* Remaining vertical-alignment cause, confirmed via Kadence's own served
   footer.min.css: a separate, generic (not Bottom-Footer-scoped) rule —
   `.footer-html{margin:1em 0}` — wraps ONLY the copyright's own element
   (<div class="footer-html ...">); Widget 5's paragraph has no
   equivalent wrapper, so it never receives this margin. At the
   copyright's own confirmed 14px font-size, that 1em top margin is 14px
   — pushing the copyright text down from the top of its column while
   Widget 5, with nothing to offset it, stays flush at the same top edge
   both columns otherwise share (identical content-valign-top, and, since
   the previous pass, identical text metrics). Zeroed here rather than on
   the <p> itself, which Kadence's own footer.min.css already resets via
   `.footer-html p:first-child{margin-top:0}` — the wrapping div's own
   margin was the one remaining, unaddressed offset. */
.site-bottom-footer-wrap .footer-html {
	margin: 0;
}