/*
 * Small CSS additions needed by this theme's sections that aren't covered by
 * the original mockup's comau.css/s.css. Kept separate so the two copied
 * stylesheets stay an untouched reference. Every section's own classes reuse
 * the original stylesheets directly; nothing here duplicates them.
 */

/*
 * .footer-column inherits text-align:center, but its nav is a flex container
 * with align-items:flex-start. Flex item positioning is governed by
 * align-items, not inherited text-align, so the links under each heading
 * were left-aligned instead of centered.
 */
.site-footer .footer-column nav {
	align-items: center !important;
}

/*
 * .page-context-inner (the "Back to X" bar under the header) mirrors
 * .header-inner's own centering formula: same --alfa-max width/margin, same
 * 30px padding. Keeps both boxes' content starting at the same x position
 * at every screen size.
 */
.page-context-inner {
	max-width: var(--alfa-max) !important;
	width: min(var(--alfa-max), calc(100% - 60px)) !important;
	margin: 0 auto !important;
	padding: 13px 30px !important;
}
@media (max-width: 760px) {
	.page-context-inner {
		padding: 10px 18px !important;
	}
}

/*
 * The original site's single-column collapse for the Content Card section
 * (.ai-single-column-layout on the ALFA product pages) is scoped to a
 * .industrial-ai-page body class this theme doesn't set. Standalone
 * equivalent. The original also caps this at max-width:1120px on the card
 * only, not the .clean-grid mini-cards below it, so the card renders
 * narrower than its own grid even in the source site; dropping that cap so
 * the card fills the same width as the grid.
 */
.clean-layout.is-single-column {
	/* comau.css sets grid-template-columns with !important on .clean-layout; must match to override. */
	grid-template-columns: 1fr !important;
}

/*
 * The original site's compact Careers-page hero sizing is scoped to a
 * .careers-page body class this theme doesn't set. Self-contained
 * equivalent, copied from the original .careers-page .simple-hero* rules.
 */
.simple-hero.is-compact,
.simple-hero.is-compact .simple-hero-copy,
.simple-hero.is-compact .simple-hero-media {
	min-height: 520px;
}
.simple-hero.is-compact .simple-hero-copy h1 {
	font-size: clamp(42px, 4.8vw, 68px);
}
.simple-hero.is-compact .simple-hero-copy > p:not(.comau-kicker) {
	font-size: 17px;
	line-height: 1.68;
}

/*
 * A few page-content wrapper classes (.simple-hero-copy, .about-new-copy,
 * .home-about-compact .comau-about-copy, .industries-video-copy) hardcode
 * --alfa-max's value as a literal 1460px instead of referencing the
 * variable, so they drift out of sync if --alfa-max ever changes. Swapping
 * them to var(--alfa-max) ties every page to the same source of truth.
 */
.simple-hero-copy {
	padding-left: max(55px, calc((100vw - var(--alfa-max)) / 2 + 30px)) !important;
}
.about-new-copy {
	padding-left: max(55px, calc((100vw - var(--alfa-max)) / 2 + 30px)) !important;
}
.home-about-compact .comau-about-copy {
	padding-left: max(40px, calc((100vw - var(--alfa-max)) / 2 + 30px)) !important;
}
.industries-video-copy {
	width: min(var(--alfa-max), calc(100% - 60px)) !important;
}

/*
 * .what-hero .what-shell has its own max-width + margin-left, calculated
 * against a hardcoded 1240px instead of the shared --alfa-max used
 * elsewhere. The What We Do hero's text sat much further from the edge
 * than every other hero on the site. Anchoring it to --alfa-max instead
 * brings it in line.
 */
.what-hero .what-shell {
	margin-left: max(30px, calc((100vw - var(--alfa-max)) / 2)) !important;
}

/*
 * .career-feature-copy (homepage) mirrors .comau-about-copy's media/copy
 * split on the opposite side, but its padding was a flat clamp() with no
 * --alfa-max reference, so it doesn't grow with the rest of the site on
 * wide screens. Matches .comau-about-copy's anchor formula, mirrored to
 * padding-right since the copy is on the right here.
 */
.career-feature-copy {
	padding-right: max(40px, calc((100vw - var(--alfa-max)) / 2 + 30px)) !important;
}

/*
 * .service-detail-section's text (Services page) had a max-width but no
 * centering/margin at all, so it sat flush against the browser edge.
 * Anchors it the same way as the rest of the site's --alfa-max-based
 * content.
 */
.service-detail-section > p,
.service-detail-section > h2,
.service-detail-section > .clean-list {
	margin-left: max(30px, calc((100vw - var(--alfa-max)) / 2 + 30px)) !important;
	margin-right: auto !important;
}

/*
 * .detail-copy (detail-split section) has the same missing-centering issue
 * as .service-detail-section above. It's a media/copy split like
 * .comau-about-copy/.career-feature-copy: copy sits on the left by default
 * and flips to the right when the section's "reverse" option is used.
 */
.detail-copy {
	padding-left: max(40px, calc((100vw - var(--alfa-max)) / 2 + 30px)) !important;
}
.detail-split.reverse .detail-copy {
	padding-left: clamp(48px, 6vw, 90px) !important;
	padding-right: max(40px, calc((100vw - var(--alfa-max)) / 2 + 30px)) !important;
}

/*
 * --alfa-max is comau.css's single source of truth for content width, used
 * by .clean-inner, .comau-shell, .footer-inner, .footer-cta-inner, and
 * ~15 other components. Fixed at 1460px, centered via margin:auto, matching
 * the fixed-width + auto-centered pattern used by the reference sites this
 * rebuild is modeled on (Symbotic, KUKA, Comau).
 *
 * .header-inner, .utility-inner, and .what-shell (the What We Do page
 * family) each hardcoded their own separate max-width instead of using
 * --alfa-max, so header/nav, What We Do, and Industries didn't scale
 * together with the rest of the site. Tied to the same shared variable
 * below so every page scales together.
 */
:root {
	--alfa-max: 1460px;
}
.header-inner,
.utility-inner,
.what-shell {
	max-width: var(--alfa-max) !important;
	width: min(var(--alfa-max), calc(100% - 60px)) !important;
}

/*
 * .comau-shell/.clean-inner/.what-shell (body content) center via
 * `width: min(--alfa-max, calc(100% - 60px))` with zero internal padding.
 * The box itself shrinks to leave a 30px gap at any screen size, so text
 * sits flush against that box's edge. .footer-main, .footer-cta-inner, and
 * .footer-bottom instead used `max-width` plus their own extra 30px
 * padding on top of the same centering, putting the footer's content a
 * further 30px in from where the page's body content lines up. Switching
 * them to the same width+zero-padding technique brings them into line (the
 * width formula already guarantees a 30px minimum edge gap on its own, so
 * no separate mobile-breakpoint padding is needed).
 */
.site-footer .footer-main,
.footer-cta-inner,
.site-footer .footer-bottom {
	max-width: none !important;
	width: min(var(--alfa-max), calc(100% - 60px)) !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/*
 * Engineering and Applications pages have their own `.clean-inner` override
 * at a hardcoded 1500px, wider than every other page's --alfa-max (1460px),
 * and missing the `calc(100% - 60px)` mobile-safety clause every other
 * .clean-inner has. Matching the standard shell exactly fixes both.
 */
.applications-rebuilt .clean-inner,
.engineering-rebuilt .clean-inner {
	width: min(var(--alfa-max), calc(100% - 60px)) !important;
}

/*
 * .comau-shell itself has zero internal padding, so content sits flush
 * against the shell's own centered box edge. The header logo sits 30px
 * further in, because .header-inner has its own 30px padding on top of the
 * identical width/centering formula. .comau-shell is used directly (no
 * extra padding) by Mission, Why Alfa, and ~7 other sections, so their
 * text sat 30px further out than the logo and every other "anchor-formula"
 * section (hero copy, career/about copy, etc.) already matching the logo's
 * inset.
 *
 * .home-what-grid and .home-industries-grid are excluded because they're
 * media/copy split cards where the image is meant to sit flush against the
 * card's edge; adding padding here would wrongly inset the image too.
 * .career-contact-card is excluded because it already has its own 52px
 * padding as a card in its own right; adding this on top would double up.
 */
.comau-shell:not(.home-what-grid):not(.home-industries-grid):not(.career-contact-card) {
	padding-left: 30px !important;
	padding-right: 30px !important;
}

/*
 * Desktop mega-menu: Industries and About Us are flat lists of 8 items
 * each, reading as one long, sparse column inside an already-wide panel.
 * Splitting into 2 CSS columns on desktop shortens the list. Mobile is
 * untouched; this only applies above the 1180px breakpoint where the
 * mobile nav takes over.
 */
@media (min-width: 1181px) {
	.mega-list {
		display: block;
		column-count: 2;
		column-gap: 40px;
	}
	.mega-list a,
	.mega-list button {
		break-inside: avoid-column;
	}
}

/*
 * Mobile mega-menu "View all X" link. The Industries/About Us trigger
 * expands its dropdown on mobile instead of navigating directly (see
 * p.js). This link, rendered with the trigger's own href, keeps the
 * overview page reachable from inside the expanded panel. Desktop still
 * navigates directly on click, so this is hidden there.
 */
.mega-view-all {
	display: none;
}
@media (max-width: 1180px) {
	.mega-view-all {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		min-height: 52px;
		padding: 0 18px;
		color: var(--alfa-blue);
		font-weight: 800;
		font-size: 15px;
		text-decoration: none;
		background: #f6f8fa;
		border-bottom: 1px solid var(--alfa-line);
	}
	.mega-view-all span {
		color: var(--alfa-orange);
	}
}

/*
 * The mobile mega-panel (#megaPanel) is `position: fixed`, but its parent
 * `.site-header` has `backdrop-filter`, which makes browsers treat
 * `.site-header`, only ~118px tall, as the fixed-position containing block
 * instead of the actual viewport. With both `top` (comau.css) and `bottom:
 * 14px` (s.css) set against that ~118px box, the browser solves for a
 * height of essentially zero: the panel opens with the right content
 * inside it but collapses to 0px tall and is invisible. Clearing `bottom`
 * lets height fall back to content-based sizing, still capped by
 * comau.css's `max-height: calc(100vh - Npx)` (a vh unit, unaffected by
 * the containing-block change), with scrolling for longer lists.
 */
@media (max-width: 1180px) {
	.mega-panel.open {
		bottom: auto !important;
	}
}

/*
 * Mobile mega-panel: the close button shows the actual menu title, so the
 * redundant heading that used to repeat it is dropped. The panel is capped
 * to roughly 3-4 items tall so it reads as a compact, scrollable sheet
 * instead of a full-screen takeover (the next item peeks at the bottom
 * edge as a scroll hint), gets a dimming backdrop like a native mobile
 * sheet, and the close bar's color matches the rest of the panel.
 */
@media (max-width: 1180px) {
	.mega-panel.open {
		max-height: min(74vh, 340px) !important;
	}
	.mega-col .mega-heading {
		display: none;
	}
	.mega-close {
		background: #f0f4f7 !important;
		color: var(--alfa-blue) !important;
		border-bottom: 1px solid var(--alfa-line) !important;
	}
	.mega-close-title {
		font-size: 15px;
		font-weight: 800;
		letter-spacing: 0.02em;
	}
	.mega-close-icon {
		font-size: 20px;
		line-height: 1;
	}
	body.mega-open::after {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(7, 24, 39, 0.45);
		z-index: 60;
	}
}

/*
 * .mobile-button ("Menu") is `display: inline-flex` on mobile in both
 * stylesheets, but neither sets `align-items`/`justify-content`, so the
 * "MENU" text defaults to the top-left corner instead of the center.
 */
@media (max-width: 1180px) {
	.mobile-button {
		align-items: center;
		justify-content: center;
	}
}

/*
 * The mobile nav dropdown (.top-nav.mobile-open) is defined twice in the
 * original stylesheets with conflicting designs: comau.css wants a solid
 * white full-width panel, s.css wants a dark rounded floating one. Since
 * neither file marks every property !important, the browser blends both
 * (dark background, white-panel positioning), which reads as broken. This
 * completes comau.css's white design, matching the light header it drops
 * from, with enough !important to fully win, at the same 1180px breakpoint
 * both files already agree on.
 */
@media (max-width: 1180px) {
	.top-nav.mobile-open {
		background: #fff !important;
		border-bottom: 1px solid var(--alfa-line) !important;
		border-radius: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		border-top: 0 !important;
		box-shadow: 0 12px 24px rgba(13, 47, 79, 0.1) !important;
		left: 0 !important;
		right: 0 !important;
		flex-direction: column !important;
		align-items: stretch !important;
		z-index: 50;
	}
	.top-nav.mobile-open .nav-link,
	.top-nav.mobile-open .nav-trigger {
		color: var(--alfa-ink) !important;
	}
}

/*
 * .footer-cta (the "Contact Us" band) had zero margin-top, sitting
 * directly against whatever the page's last section happens to be. On
 * pages ending in a .clean-card.dark section, the same dark blue as
 * .footer-cta itself, the two touched with no visible seam, reading as one
 * continuous block. Using border-top as a thick colored spacer (margin
 * would just reveal transparent/white) fills the gap with #eef3f6, the
 * same light blue-gray tint already used for alternating section
 * backgrounds elsewhere on the site. 48px matches the most common padding
 * floor value used throughout the site's own sections.
 */
.footer-cta {
	border-top: 48px solid #eef3f6 !important;
}

/*
 * .industry-value-band already has its own 78px bottom padding. Padding
 * doesn't collapse between adjacent elements the way margins do, so on the
 * page's last section that 78px stacks with .footer-cta's 48px border
 * above it. Trimming this to the same 40px used for every other
 * section-to-page seam keeps it consistent with that rhythm.
 */
.page-main > .industry-value-band:last-child {
	padding-bottom: 40px !important;
}

/*
 * .industry-value-inner (comau.css) uses its own narrower, simple-centered
 * width system (`width: min(1180px, 100%)`, inset via the band's own 30px
 * side padding) instead of the shared --alfa-max shell technique every
 * other section on the page uses (.clean-inner etc.: `width:
 * min(var(--alfa-max), calc(100% - 60px))`, zero side padding on the
 * parent), so the "Customer Value" card's edges don't line up with the
 * section above it. Zeroing the band's own side padding and applying the
 * standard shell formula instead matches its outer edges to the rest of
 * the page, at both the desktop and .clean-inner's own <=760px breakpoint.
 */
.industry-value-band {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.industry-value-inner {
	width: min(var(--alfa-max), calc(100% - 60px)) !important;
	max-width: none !important;
	margin: 0 auto !important;
}
@media (max-width: 760px) {
	.industry-value-inner {
		width: calc(100% - 36px) !important;
	}
}

/*
 * .page-main > .same-style-page-section (s.css) has `min-height: calc(100vh
 * - 106px)`, forcing every section wrapped in this class to be nearly a
 * full screen tall regardless of its actual content. Used on 28 of the
 * site's 39 pages. Whenever real content is shorter than that, the
 * leftover space renders as a large, empty, oddly-tinted gap before the
 * next section. Nothing in p.js relies on this height (no scroll-snap or
 * anchor-jump logic), so it's dead legacy behavior; letting each section
 * size to its own content instead.
 */
.page-main > .same-style-page-section {
	min-height: auto !important;
}

/*
 * Same padding-doesn't-collapse issue as .industry-value-band above. This
 * was originally zeroed to fix real double-padding on the pages where a
 * Content Card section is the page's entire content, but a hard 0
 * undershot the site's standard ~80px section-gap rhythm. Using 40px here
 * too.
 */
.page-main > .same-style-page-section:last-child .clean-section {
	padding-bottom: 40px !important;
}

/*
 * .clean-grid (the row of small highlight cards under a Content Card
 * section) is always the last element inside its own section, so its own
 * unconditional 70px margin-bottom is redundant; the .clean-section
 * wrapping it already provides bottom padding as that section's own
 * trailing space. Trimming it generally rather than only at the page's
 * end.
 */
.page-main .clean-grid {
	margin-bottom: 0 !important;
}

/*
 * .clean-section has its own top padding (82px plain, or 64px inside
 * .same-style-page-section) in addition to its own bottom padding. That's
 * fine when it's the first/only section on a page, but when a page stacks
 * two .clean-section-based blocks back to back, the two combine into
 * ~160px of pure padding with no content, plus a jarring background-color
 * switch in between. Padding, unlike margin, never collapses between
 * adjacent elements, so trimming the second section's own top padding
 * leaves just the first section's trailing space as the seam, matching
 * the site's normal rhythm instead of doubling it. Only applies when the
 * section isn't first on the page, so the gap below the header/breadcrumb
 * is untouched.
 *
 * Trimmed to 40px rather than fully to 0: a hard 0 looks fine on
 * light/similar-toned backgrounds either side, but on a section pair with
 * a sharp color change (e.g. a dark hero into a light section) it leaves
 * that section's own heading sitting flush against the color-change line
 * with zero breathing room. 40px keeps most of the fix (the bulk of the
 * seam still comes from the preceding section's own trailing padding)
 * while guaranteeing every section has some space around its own content
 * regardless of what precedes it.
 */
.page-main > .clean-section:not(:first-child) {
	padding-top: 40px !important;
}
.page-main > .same-style-page-section:not(:first-child) .clean-section {
	padding-top: 40px !important;
}

/*
 * Same padding-doesn't-collapse issue as .clean-section/.clean-grid above,
 * applied to every other section template's own root-level top/bottom
 * padding. Each of these has real top and bottom padding on its own
 * outermost element (72-148px depending on the section). A handful of
 * section types (hero, simple-hero, about-split, career-feature,
 * industries-video-hero, about-new-hero) don't need this: their padding
 * lives on an inner -copy/-content child instead of the root, so there's
 * nothing at the root level to double up.
 *
 * Same rule as .clean-section above: trim the top padding to 40px (not
 * fully to 0, for the same strong-color-contrast reason) when the section
 * isn't first on the page.
 */
.page-main > .about-how:not(:first-child),
.page-main > .about-priorities:not(:first-child),
.page-main > .ai-process-section:not(:first-child),
.page-main > .career-contact-section:not(:first-child),
.page-main > .career-experience-section:not(:first-child),
.page-main > .simple-section:not(:first-child),
.page-main > .home-industries-cta:not(:first-child),
.page-main > .industries-selection:not(:first-child),
.page-main > .investor-contact-section:not(:first-child),
.page-main > .leadership-section:not(:first-child),
.page-main > .lifecycle-section:not(:first-child),
.page-main > .comau-statement:not(:first-child),
.page-main > .what-intro:not(:first-child),
.page-main > .what-feedback:not(:first-child),
.page-main > .home-what-we-do:not(:first-child),
.page-main > .why-alfa-section:not(:first-child),
.page-main > .detail-split:not(:first-child) {
	padding-top: 40px !important;
}
.page-main > .same-style-page-section.conversation-page:not(:first-child) .conversation-page-section {
	padding-top: 40px !important;
}

/*
 * Bottom padding is the same 40px regardless of whether a section is last
 * on the page. Relying solely on .footer-cta's 48px border as the closing
 * gap made the last section's seam noticeably smaller than the ~80px
 * rhythm every other section-to-section gap on the site has.
 */
.page-main > .clean-section {
	padding-bottom: 40px !important;
}
.page-main > .same-style-page-section .clean-section {
	padding-bottom: 40px !important;
}
.page-main > .about-how,
.page-main > .about-priorities,
.page-main > .ai-process-section,
.page-main > .career-contact-section,
.page-main > .career-experience-section,
.page-main > .simple-section,
.page-main > .home-industries-cta,
.page-main > .industries-selection,
.page-main > .investor-contact-section,
.page-main > .leadership-section,
.page-main > .lifecycle-section,
.page-main > .comau-statement,
.page-main > .what-intro,
.page-main > .what-feedback,
.page-main > .home-what-we-do,
.page-main > .why-alfa-section,
.page-main > .detail-split {
	padding-bottom: 40px !important;
}
.page-main > .same-style-page-section.conversation-page .conversation-page-section {
	padding-bottom: 40px !important;
}

/*
 * .what-hero, .ai-page-hero, and .leadership-hero are deliberately excluded
 * from both padding rules above. Unlike the other sections in those lists
 * (plain content blocks whose base padding was just "gap before the next
 * section"), these three are full hero banners with a symmetric clamp()
 * top/bottom padding baked into their own design: the whitespace framing
 * the big heading is a visual element in its own right, not just
 * inter-section spacing, and comau.css never varies top vs bottom for
 * them. All three are also always the page's first section, so their top
 * padding is already untouched by the :not(:first-child) rule above.
 * Flattening only the bottom to 40px while the top kept its full 92-148px
 * value broke that symmetry. Leaving both sides alone restores the
 * original design.
 */

/*
 * .nav-link/.nav-trigger have two separate underline mechanisms active at
 * once on hover/current: an animated `::before` pseudo-element (a thin
 * orange line that slides in, comau.css) from the original nav design, and
 * a static `box-shadow: inset 0 -4px 0 var(--alfa-yellow)` from a later
 * refinement pass that also resized the whole nav bar. The later pass
 * never removed the earlier mechanism, so both render together as a
 * visible double line. Keeping the box-shadow version (the more recent,
 * deliberate design) and disabling the older pseudo-element entirely.
 */
.nav-link::before,
.nav-trigger::before {
	display: none !important;
}

/*
 * The Mission Statement section had its visual hierarchy backwards: "OUR
 * MISSION" rendered as a small 21px kicker label while the mission
 * statement itself (a full 6-line sentence) rendered at a huge 49px bold
 * display size. Swaps their styling: "OUR MISSION" becomes the large,
 * prominent heading (keeping its gold/uppercase identity, just much
 * bigger), and the mission statement becomes normal-sized, readable body
 * copy instead of oversized display text.
 */
.mission-statement .mission-layout {
	gap: 70px !important;
}
.mission-statement .comau-kicker {
	margin-bottom: 0 !important;
	font-size: clamp(26px, 2.6vw, 36px) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em !important;
}
.mission-statement .mission-copy,
.mission-statement p:last-child {
	max-width: none !important;
	font-size: clamp(19px, 1.8vw, 23px) !important;
	line-height: 1.7 !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	color: rgba(255, 255, 255, 0.86) !important;
}

/*
 * .priority-card (About Us "Company Priorities and Practices" grid) pins
 * its "Explore..." link to the bottom via `margin-top: auto` inside a
 * fixed `min-height: 340px` flex column, a deliberate pattern to keep the
 * CTA aligned across cards in the same grid row. Every card's actual copy
 * is short (2 lines), so the fixed 340px floor left ~120px of dead air
 * above the CTA. Lowering the floor to fit the real content with modest
 * breathing room, while keeping the same flex/auto-margin mechanism so
 * CTAs still align within a row.
 */
.priority-card {
	min-height: 260px !important;
}