/*
Theme Name: Volo Aero MRO
Theme URI: https://www.volo-aero.com
Description: Custom child theme for Volo Aero MRO, built on The7 Classic.
Author: Volo Aero MRO
Template: dt-the7
Version: 1.1.4
Text Domain: volo-aero-mro
*/

/* Design tokens for the Figma rebuild (brand guidelines node 17:308).
   Introduced fresh -- nothing in this theme defined a token system before.
   Existing hardcoded colors/spacing below are migrated to these vars
   page-by-page as each section is touched, not all at once, so nothing
   regresses mid-migration. New component CSS (cards, tabs, accordion,
   RFQ banner, etc.) lives in assets/css/volo-aero-design-system.css,
   enqueued after this file -- this block is what that file (and any
   future section here) reads from. */
:root {
	--volo-red: #D2232A;
	--volo-red-hover: #B21E24;
	/* --volo-red text only clears ~3.66:1 directly on --volo-navy-deep
	   (an accessibility audit flag), short of the 4.5:1 WCAG AA floor --
	   lightened, same hue, for red text/labels set directly on a dark
	   navy background (e.g. the Platform Detail hero). Clears ~4.87:1. */
	--volo-red-on-dark: #E6464B;
	--volo-navy: #0F172A;
	--volo-navy-deep: #0B0F19;
	--volo-slate: #475569;
	--volo-slate-light: #94A3B8;
	--volo-border: #E2E8F0;
	--volo-bg-light: #F8FAFC;
	--volo-bg-light-2: #F1F5F9;
	--volo-white: #FFFFFF;

	--volo-font-heading: 'Outfit', 'Segoe UI', Arial, sans-serif;
	--volo-font-body: 'Manrope', 'Segoe UI', Arial, sans-serif;
	--volo-font-mono: 'Fragment Mono', 'Courier New', Courier, monospace;

	--volo-space-header: 64px;
	--volo-space-section: 80px;
	--volo-space-bar: 48px;
	--volo-space-rfq: 80px;

	--volo-radius: 8px;
	--volo-radius-sm: 4px;
}

/* Keep the header (and the Request a Quote button inside it) visible on
   scroll, regardless of whichever of The7's own sticky-header options is
   active. Harmless if the theme already stickies it via JS. */
.masthead {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* Content Type filter tabs (News + the three archive pages). On News
   specifically, the page's fancy-header title bar is disabled (its own H1
   is the only title -- see page-news.php), so these tabs are the very
   first thing in #content with nothing above them but the sticky nav.
   Top margin keeps them from butting up against it. */
.volo-aero-content-type-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 30px 0 28px;
	border-bottom: 1px solid #ddd;
	padding-bottom: 12px;
}
.volo-aero-content-type-tabs a {
	padding: 8px 20px;
	border-radius: 999px;
	background: var(--volo-bg-light-2);
	color: var(--volo-navy);
	text-decoration: none;
	font-family: var(--volo-font-heading);
	font-weight: 700;
	font-size: 14px;
}
.volo-aero-content-type-tabs a:hover {
	background: var(--volo-border);
}
.volo-aero-content-type-tabs a.active {
	background: var(--volo-red);
	color: var(--volo-white);
}

.volo-aero-related-services {
	margin-top: 8px;
}
.volo-aero-related-services a {
	font-size: 14px;
}

/* Homepage hero contrast fix: a dark gradient scrim behind the hero's
   text/CTA and icons, guaranteed dark enough to hit WCAG AA regardless of
   what the underlying photo looks like -- not relying on the image's own
   darkness. Worked out from the WCAG contrast formula itself: white text
   (or a white icon) needs a background relative luminance <= 0.1833 to
   clear 4.5:1. Alpha-compositing black over even a worst-case pure-white
   pixel at 65% leaves an sRGB value of 0.35, whose relative luminance is
   ~0.10 -- comfortably under that ceiling (contrast ~7:1), so this holds
   for genuinely any image, not just the current one. 3:1 (icons) is the
   easier target and is covered by the same scrim.
   Applied to any row given the el_id="home-hero" anchor. */
#home-hero {
	position: relative;
}
/* The row's own box is boxed/centered (matches the theme's content width),
   but its "ex-full" background image breaks out to the full viewport width
   via a separate .upb_row_bg layer -- confirmed via getBoundingClientRect:
   the row itself was 1230px, its background layer spanned the full 1692px
   viewport. inset:0 alone only covered the narrower boxed width, leaving
   the true edges of the photo (and its worst-case bright spots) unscrimmed.
   The standard full-bleed breakout (50% + translateX(-50%) + 100vw) makes
   the overlay match the image's actual span regardless of box width. */
#home-hero::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 50% !important;
	right: auto !important;
	width: 100vw !important;
	transform: translateX(-50%) !important;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.75) 100%) !important;
	z-index: 1;
	pointer-events: none;
}
#home-hero > .vc_column_container {
	position: relative;
	z-index: 2;
}

/* Trusted By section: Rolls-Royce's logo is tall/portrait (185x300 at
   medium size) while Pratt & Whitney's and EAL's are short/landscape
   (~72px and ~139px tall) -- left to their natural heights, the three
   headings below them land at wildly different vertical positions. Giving
   every logo the same fixed-height box (vertically centered within it)
   makes all three headings start from the same line regardless of the
   individual logo's own aspect ratio. */
#home-trusted-by .wpb_column .vc_single_image-wrapper {
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#home-trusted-by .wpb_column .vc_single_image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Certifications trust strip on the homepage: the certificate photos have
   varying aspect ratios (letters vs. logos vs. badges) -- cap height so
   the row reads as one consistent strip instead of a jumble of sizes. */
#home-certifications img {
	max-height: 140px;
	width: auto;
	margin: 0 auto;
}

/* Capabilities/Military/Civil/Material Trading directory pages: these are
   plain PHP templates (not WPBakery), and their platform/link lists were
   rendering as bare bulleted text -- flat next to the richer WPBakery pages
   elsewhere on the site. Card grid brings them up to the same visual bar.
   Shared .volo-aero-capabilities-list class, so this applies to all four. */
.volo-aero-capabilities-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}
.volo-aero-capabilities-list li {
	/* The7's own content-list typography sets list-style with enough
	   specificity to beat the inherited "none" from the ul above, and once
	   the li becomes a grid item its marker box no longer sits inline with
	   the text -- it floats beside/between cards instead. !important here,
	   plus killing ::marker directly, removes it regardless of source. */
	list-style: none !important;
	background: #ffffff;
	border: 1px solid #E2E8F0;
	border-top: 3px solid #D2232A;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(20, 20, 20, 0.06);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.volo-aero-capabilities-list li::marker {
	content: none;
}
.volo-aero-capabilities-list li:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(20, 20, 20, 0.1);
}
.volo-aero-capabilities-list a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 24px 20px 22px;
	color: #0F172A !important;
	text-decoration: none !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}
/* Turbine-hub glyph (hub + four blades) -- a simple original geometric mark
   rather than a borrowed icon-set glyph, kept generic enough to stand for
   any platform/capability without a per-item icon mapping. */
.volo-aero-capabilities-list a::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #D2232A;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='white'/%3E%3Crect x='11' y='1' width='2' height='7' fill='white'/%3E%3Crect x='11' y='16' width='2' height='7' fill='white'/%3E%3Crect x='1' y='11' width='7' height='2' fill='white'/%3E%3Crect x='16' y='11' width='7' height='2' fill='white'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	flex-shrink: 0;
}
.volo-aero-capabilities-list a::after {
	content: "\2192";
	color: #D2232A;
	font-weight: 400;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.volo-aero-capabilities-list a:hover::after {
	opacity: 1;
	transform: translateX(0);
}
/* Per-platform capability cards (/capabilities/{platform}/) carry an extra
   repair-type/part-number line under the title -- reuses the same card, so
   it needs to sit inside the anchor's own flex column instead of poking
   out past the card's padding as an unstyled sibling of a plain link. */
.volo-aero-capability-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.volo-aero-capability-meta {
	font-size: 13px;
	font-weight: 400;
	color: #475569;
}

/* "All Capabilities" back-link, shown above each per-platform page. */
.volo-aero-capability-back {
	margin: 0 0 20px;
}
.volo-aero-capability-back a {
	font-size: 14px;
	font-weight: 600;
	color: #D2232A !important;
	text-decoration: none !important;
}
.volo-aero-capability-back a:hover {
	text-decoration: underline !important;
}

/* "Latest Updates" lists on the same market pages -- was a bare bulleted
   list; matches the card grid's spacing/border language above so the two
   sections on one page read as one design instead of two. Shared class,
   so this also improves the News content-type tab archives. */
.volo-aero-archive-list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	border-top: 1px solid #E2E8F0;
}
.volo-aero-archive-list li {
	list-style: none !important;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid #E2E8F0;
}
.volo-aero-archive-list li::marker {
	content: none;
}
.volo-aero-archive-list a {
	color: #0F172A !important;
	font-weight: 600;
	text-decoration: none !important;
}
.volo-aero-archive-list a:hover {
	color: #D2232A !important;
	text-decoration: underline !important;
}
.volo-aero-archive-meta {
	color: #475569;
	font-size: 13px;
	white-space: nowrap;
}

/* Same action (a secondary text link vs. a primary CTA button) was
   rendering with different, inconsistent styling depending on which page
   it appeared on -- fixed once here so every market page uses the same
   two affordances for "secondary link" and "primary CTA". */
.volo-aero-related-services {
	margin: 0 0 8px;
}
.volo-aero-related-services a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #D2232A !important;
	text-decoration: none !important;
}
.volo-aero-related-services a:hover {
	text-decoration: underline !important;
}

.volo-aero-market-cta {
	margin: 4px 0 40px;
}
.volo-aero-market-cta .button {
	display: inline-block;
	background: #D2232A !important;
	border-color: #D2232A !important;
	color: #ffffff !important;
	padding: 12px 28px !important;
	border-radius: 30px !important;
	font-weight: 600;
	text-decoration: none !important;
}
.volo-aero-market-cta .button:hover {
	background: #B21E24 !important;
	border-color: #B21E24 !important;
}

/* Accessibility audit fix: the Homepage's "Latest News & Announcements"
   Blog Carousel element (a native WPBakery widget, not one of our
   .volo-aero-* components) has its own per-instance meta-text color set
   to rgb(211,211,211) via an inline <style> block WPBakery generates from
   the element's own color-picker field. That's a ~1.5:1 contrast ratio on
   this carousel's white background -- fails WCAG AA (needs 4.5:1) for the
   byline/category/date line under every card. Overriding by the exact
   generated class WPBakery already emits (fragile if the row is ever
   rebuilt and gets a new instance ID, but there's no other hook to target
   only this carousel without also affecting the differently-backgrounded
   "Where to Meet Us" carousel elsewhere on the page). */
.blog-carousel-shortcode-id-6205a7e2a7cd4098669c8efc4e9df488 .entry-meta * {
	color: var(--volo-slate) !important;
}

/* Accessibility audit fix: the sidebar's native "Recent Posts" widget
   (widget_presscore-blog-posts, shown on every single post) prints each
   post's date in a customizer-driven secondary-text color that only
   clears ~3.4:1 against the sidebar's near-white background -- short of
   the 4.5:1 WCAG AA floor. The post-title link beside it already uses
   the brand red (plenty of contrast); only the bare date text needs it. */
.widget_presscore-blog-posts .post-content time {
	color: var(--volo-slate) !important;
}