/* Local fixes applied after mirroring from www2.altrack.co.za.
   NOTE: re-running mirror-www2.mjs overwrites the HTML pages; the <link> to
   this file and the two HTML fixes (sticky removal + emergency popup id on
   the mobile bar) would need to be re-applied. */

/* Always show the vertical scrollbar track. Every page here is far taller
   than the viewport, but on each navigation the first paint happens before
   enough content exists to need a scrollbar — so the right-aligned header
   buttons (EMERGENCY NUMBER / CALL ME FOR A QUOTE / CLIENT SUPPORT) render
   ~15px further right, then visibly slide left the instant the scrollbar
   appears. Forcing the scrollbar from the first frame keeps the viewport
   width constant across the whole load, so nothing shifts. (overflow-y:
   scroll rather than scrollbar-gutter: stable purely for older-browser
   coverage — the end state is identical on these always-scrolling pages.) */
html {
	overflow-y: scroll;
}

/* Kill the default mobile tap-highlight flash (first reported 2026-07-14:
   "a purple background flashes when you move between menus"). Without an
   explicit -webkit-tap-highlight-color, mobile browsers can wash the
   tapped element in a default accent color on touch. Recolored to the
   site's own navy instead of just disabling it (transparent), so tapping
   still gives visible feedback, just on-brand. Set on html (inherited
   everywhere) and repeated explicitly since tap-highlight-color doesn't
   reliably inherit through every element type in all browsers. Left in
   place after the follow-up report below narrowed the real cause — this
   genuinely is a separate, secondary source of tap-flash color, just not
   the one actually seen. */
html,
a,
button,
.elementor-item,
.elementor-menu-toggle,
.top-button {
	-webkit-tap-highlight-color: rgba(17, 38, 63, 0.4);
}

/* The ACTUAL purple flash (follow-up report 2026-07-14: "only the very
   first time the site is loaded on a device, clear light purple") is
   `wp-content/themes/hello-elementor/assets/css/reset.css`'s theme-default
   button styling: `button:focus,button:hover{background-color:#c36;
   color:#fff}` (#c36 = a light magenta/purple). Elementor's own intended
   hover color for these buttons (e.g. `.top-button:hover,.top-button:
   focus-visible{background-color:#486b97}`, in global-489-frontend-
   desktop.css) uses :focus-visible, which browsers suppress for touch taps
   by design — so on tap, only reset.css's plain :focus/:hover rule (which
   DOES fire on touch) was ever live for these buttons, and it painted
   #c36. "Only first load" fits too: reset.css and the Elementor stylesheet
   that would otherwise correct the color both need to finish downloading,
   and only on a cold cache is that gap ever wide enough to tap into.
   Neutralized directly rather than relying on load-order timing — matches
   reset.css's own selector so it can't lose the specificity/cascade race
   regardless of what has or hasn't loaded yet. */
button:focus,
button:hover,
[type="button"]:focus,
[type="button"]:hover,
[type="submit"]:focus,
[type="submit"]:hover {
	background-color: transparent !important;
}

/* Mobile/tablet hamburger header (0b91bb9). Its authored --z-index is only
   10 at tablet widths (100 on phone), and the open hamburger dropdown can
   end up painted BEHIND main-content sections that carry their own
   z-index (e.g. the homepage hero's particles canvas layer) — reported as
   "menu items appear behind the website content" on mobile. Raise the
   whole header container well above any content-level z-index at every
   breakpoint (content uses single/double digits; Elementor popups sit at
   9999+ and still win where they should). Both the custom property and the
   plain property are set: e-con consumes --z-index, and Elementor's
   sticky.js applies z-index:var(--z-index) when the header is sticky-
   activated — covering pre- and post-activation states. */
.elementor-489 .elementor-element.elementor-element-0b91bb9 {
	--z-index: 1000;
	z-index: 1000;
}
/* The header fix above only helps once Elementor's sticky JS has made
   0b91bb9 position:fixed. BEFORE that (fresh load, no scroll — exactly
   when people tap the hamburger) the header is still in normal flow with
   position:static, where z-index is ignored — so the menu's effective
   stacking context is this inner row (3a4a298, position:relative), whose
   authored z-index is 2. Main-content sections also use z-index 2, and a
   z tie is broken by DOM order: the header comes FIRST in the DOM, so
   every content section painted after it covered the open menu ("menu
   items appear behind the website content"). Raising the row breaks the
   tie in both states — in-flow it beats all content-level z (single/
   double digits), and once the header goes fixed it's inside that context
   anyway. */
.elementor-489 .elementor-element.elementor-element-3a4a298 {
	--z-index: 1000;
	z-index: 1000;
}

/* Turned out the two z-index rules above weren't the actual fix for the
   mobile menu — raising z-index (even to 999999999, directly on the
   dropdown, with position:fixed set directly on it too) never made any
   visual difference. The dropdown only ever composited correctly above
   page content once it was moved out of the 0b91bb9/3a4a298/f72d3db
   ancestor chain entirely (see fixMobileMenuStacking() in contact-form.js,
   which does that move at page load). Left the two rules above in place
   since they're harmless and still correct in principle — this is just
   the styling for the dropdown once contact-form.js has relocated it to
   be a direct child of <body>. Closed by default (matches Elementor's own
   default collapsed state); opened by toggling .altrack-mobile-menu--open,
   which contact-form.js keeps in sync with the toggle button's
   aria-expanded via MutationObserver, since moving the node out of the
   DOM breaks Elementor's own adjacent-sibling collapse CSS
   (`.elementor-menu-toggle:not(.elementor-active) + .container`) that
   depended on the two staying siblings. */
.altrack-mobile-menu {
	/* --altrack-header-h set inline by contact-form.js — the header's real
	   height differs by breakpoint (65px phone, 85px tablet), so it can't
	   be a fixed value here. */
	position: fixed !important;
	top: var(--altrack-header-h, 65px);
	left: 0;
	right: 0;
	width: 100%;
	max-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 999999 !important;
	background: #11263f;
	transition: max-height 0.3s ease;
}
/* Elementor's own authored link color for these items is a very dark grey
   (rgb(51,55,61)) — presumably meant for a light dropdown background, which
   is what this widget used before being moved. Against the dark navy
   background set above, resting-state items were nearly unreadable (the
   active/hover state alone already renders white via Elementor's own CSS,
   which is why only the highlighted current-page item looked fine).
   Matches the white already used for the active state and for the desktop
   nav, so all items are consistently legible regardless of state. */
.altrack-mobile-menu .elementor-item {
	color: #ffffff !important;
}
.altrack-mobile-menu--open {
	max-height: calc(100vh - var(--altrack-header-h, 65px));
}

/* Hide the floating reCAPTCHA v3 badge. api.js in automatic-render mode
   (render=<site key>, see CLAUDE.md's "reCAPTCHA v3 wiring gotcha") injects
   it bottom-right on every page, permanently, even though reCAPTCHA only
   matters in the two contact popups and the careers apply form. Google's
   own FAQ explicitly allows hiding it IF the attribution text is shown
   inline instead — that's the .altrack-recaptcha-note line rendered inside
   all three protected forms (partials/popups.html for the popups,
   careers/patch-careers.mjs's markup for the apply form). Do not remove
   one without the other. */
.grecaptcha-badge {
	visibility: hidden;
}

/* The inline attribution replacing the badge — small and muted, sits under
   each form's submit button on the white card background. */
.altrack-recaptcha-note {
	font-size: 11px;
	line-height: 1.5;
	color: #7a7f85;
	margin: 10px 0 0;
	text-align: center;
}
.altrack-recaptcha-note a {
	color: inherit;
	text-decoration: underline;
}

/* Desktop sticky header (#site-header, elementor-element-eebab43) — pure CSS
   padding only, no JS. Elementor's own authored padding for this element is
   114px each side (post-489.css / local-489-frontend-desktop.css), which is
   too wide: at common desktop widths (~1440px and below) it squeezes the nav
   below the space it needs and "Careers" wraps to its own second line. A
   removed hand-written script (see patch-cleanup.mjs's
   STICKY_HEADER_OVERRIDE_SCRIPT) used to force this same tighter padding via
   inline styles set on every scroll tick, but it also fought Elementor's own
   sticky.js for control of this element's position (both independently
   writing to the same inline `style` attribute), causing the header to
   flicker/mis-position/go missing. Elementor's sticky.js never touches
   `padding` (confirmed: its own inline styles only ever set position/width/
   margin-top/margin-bottom), so a static padding override here can't
   conflict with it the way the old script's `top`-writing did — this keeps
   the tighter, correct-looking layout without re-introducing any race. */
#site-header {
	padding: 24px 40px;
}

/* Kill the header's authored -45px top margin (post-489.css sets
   --margin-top:-45px on this element). It was authored to pair with the
   removed hand-written sticky script's `top: 45px` fallback (net zero once
   fixed) — with that script gone it only did harm: before Elementor's
   sticky JS activates, the header rendered 45px too high (the
   EMERGENCY/QUOTE/SUPPORT bar cut off above the viewport), then visibly
   jumped down 45px the moment sticky.js kicked in and overrode the margin
   with inline `margin-top: 0` — on every single page load. Zeroing the
   margin in CSS makes the pre-JS position identical to the post-JS one
   (top: 0 both ways), so nothing moves when sticky activates. Elementor's
   sticky spacer also sizes from the in-flow height, so page content now
   starts exactly at the header's bottom edge instead of being overlapped
   by its bottom 45px. */
.elementor-489 .elementor-element.elementor-element-eebab43 {
	--margin-top: 0px;
	margin-block-start: 0px;
}

/* Mobile quick-action bar (EMERGENCY / GET A QUOTE / SUPPORT).
   Original CSS set bottom:-1% and Elementor sticky-top was also attached,
   leaving the bar half below the viewport edge — invisible on real phones
   once the browser toolbar overlaps it. Pin it flush to the bottom with a
   solid header-matching background and safe-area padding. */
.elementor-489 .elementor-element.elementor-element-22924e4 {
	top: auto !important;
	inset-block-start: auto !important;
	bottom: 0 !important;
	z-index: 100 !important;
	background: rgb(17, 38, 63);
	padding-top: 6px;
	padding-bottom: calc(6px + env(safe-area-inset-bottom));
}

/* Reported 2026-07-14: page content painted over the bar despite the fix
   above (position:fixed, z-index:100) — same rendering-engine quirk
   documented in "Mobile hamburger menu stacking fix": a page-content
   element with z-index:auto (here, bdthemes-element-pack's animated
   particle-background canvas) can still composite above a position:fixed,
   explicitly z-indexed element when both are nested inside Elementor's
   atomic e-con/e-flex container chain, regardless of computed z-index.
   Confirmed by the same kind of direct experiment as the earlier fix:
   raising z-index alone (even to 999999) made no difference; moving the
   bar to be a direct child of <body> did. fixMobileBottomBarStacking() in
   contact-form.js does that move at page load, wrapped in a synthetic
   `.elementor.elementor-489` shell so the rule immediately above this one
   (and Elementor's own `.top-button`/hidden-desktop/hidden-tablet CSS,
   all ancestor-scoped to `.elementor`) keeps matching post-move — see the
   long comment in fixMobileBottomBarStacking for the follow-up regression
   this fixed (buttons losing their styling and showing on desktop, from
   an earlier version of this fix that moved the bar with no wrapper).
   This class only needs to guarantee the two things this specific fix is
   actually responsible for — z-index winning the compositing race, and a
   hard guarantee the bar never shows above the mobile breakpoint even if
   Elementor's own ancestor-scoped hide rule doesn't end up matching for
   some future reason (defense in depth, not redundant with the rule
   above: that rule targets the pre-move DOM shape, this one the
   post-move shape). Position/background/padding/layout stay owned by the
   restored Elementor + custom-fixes.css cascade via the wrapper, not
   duplicated here. */
.altrack-mobile-bottom-bar {
	z-index: 999999 !important;
}
@media (min-width: 768px) {
	.altrack-mobile-bottom-bar {
		display: none !important;
	}
}

/* Keep page content (footer) from being covered by the fixed bar.
   The bar only renders on the mobile breakpoint. */
@media (max-width: 767px) {
	body {
		padding-bottom: 64px;
	}
}

/* "Get a Quote" popup (1582) had an issue "Client Support" (2329) didn't:
   its own Elementor-authored close-button position (top:24%/right:27% in
   post-1582.css) computed against .dialog-message, which Elementor sizes to
   a fixed 1280px/100vh box — much bigger than the actual visible card, which
   is just centered inside it via flex. On small screens the button landed
   near the top-right of that oversized box, which put it visually on top of
   the "SEND US A MESSAGE" heading instead of the card's own corner —
   reported 2026-07-14. A prior fix (contact-form.js's
   fixQuotePopupCloseButtonPosition, now removed) moved the button to be a
   child of the visible card so plain top/right positioning would resolve
   correctly against it instead of the oversized wrapper — but Elementor
   reuses the same popup DOM node across opens rather than recreating it,
   and reopening after a close appears to rebuild/clear part of that node,
   which sometimes made the moved button not survive and vanish from the DOM
   entirely (no visible way to close the popup at all).
   Replaced both problems at once: the X is hidden rather than repositioned
   (nothing to overlap the heading, nothing being moved to trigger the
   rebuild-and-vanish bug), and both popup forms get a plain "Close" button
   in normal document flow at the bottom of the form instead (markup in
   partials/popups.html, styled below) — closePopup() in contact-form.js
   still finds and .click()s the hidden X to trigger Elementor's real close
   logic, which works regardless of the button's visibility. */
#elementor-popup-modal-1582 .dialog-close-button,
#elementor-popup-modal-2329 .dialog-close-button {
	display: none !important;
}
/* 2026-07-14 follow-up: the Close button must look exactly like Submit and
   sit in the same row as it, not styled as its own distinct "secondary"
   button below the form. Markup now uses the identical elementor-button
   elementor-size-sm structure as Submit (see partials/popups.html) and
   sits in a matching elementor-col-50 column right next to Submit's own —
   Elementor's own form-field-group columns already lay out in pairs per
   row (same mechanism the Name/Surname fields use), so no extra layout CSS
   is needed here, only color. The base look (border-style:none, 10px
   radius, 0 padding) comes for free from the shared .elementor-button
   class both buttons carry; only the fill/text colors need to be pinned
   here, because Submit's orange comes from a `[type="submit"]`-scoped rule
   (post-1582.css/post-2329.css) that a `type="button"` element never
   matches — this reproduces that rule's exact colors for our button
   instead of trying to piggyback on the submit-specific selector.
   !important throughout: the theme's reset.css targets plain `button`
   elements directly (`button{border:1px solid #c36;color:#c36}` at rest,
   `button:focus,button:hover{background-color:#c36}` on interaction — see
   the "purple flash" fix further up for the full story on that rule) with
   equal-or-competing specificity, so a bare class rule loses that fight on
   whichever browser applies reset.css after custom-fixes.css. */
.altrack-popup-close-btn {
	background-color: #EE7402 !important;
	color: #000000 !important;
	/* Submit stretches to its column's full width (Elementor's own
	   .elementor-field-type-submit column behavior); Close is a plain
	   type="button" so it doesn't inherit that and defaults to its
	   own (narrower, "Close" < "Submit") text-content width instead.
	   Match it explicitly so both buttons in the row are the same size. */
	width: 100% !important;
}
.altrack-popup-close-btn:hover,
.altrack-popup-close-btn:focus-visible {
	background-color: #E74011 !important;
	color: #000000 !important;
}

/* Contact popup close animation (see contact-form.js's handleCloseButtonClick).
   Elementor's own exit animation replays each popup's configured entrance
   animation in reverse, which looks fine for "fadeInUp" but shows no visible
   motion at all for "fadeIn" — inconsistent between the two contact popups
   and one feels stuck/slow. Fade the whole dialog (backdrop + content
   together) ourselves instead, purely cosmetic and layered on top of
   whatever Elementor does — so both popups close identically. Elementor's
   own cleanup still takes a while after this fade finishes, and the dialog
   is a full-viewport overlay that would otherwise keep blocking clicks
   while invisible — pointer-events:none lets clicks reach the page normally
   the moment it's faded, without waiting on Elementor's own removal. */
.dialog-widget {
	transition: opacity 0.3s ease;
}
.dialog-widget.altrack-popup-closing {
	opacity: 0;
	pointer-events: none;
}

/* Contact form / careers apply-form submit feedback (see contact-form.js
   and careers/careers.js). Styled as a proper alert box — padding,
   background tint, colored left border — instead of plain colored text,
   so success/error/sending states are hard to miss. */
.altrack-form-message {
	margin-top: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}
.altrack-form-message:empty {
	margin-top: 0;
}
.altrack-form-message:not(:empty) {
	margin-top: 14px;
	padding: 12px 16px;
	border-radius: 6px;
}
.altrack-form-message--success {
	color: #1a7a3c;
	background: rgba(26, 122, 60, 0.1);
	border-left: 4px solid #1a7a3c;
}
.altrack-form-message--error {
	color: #b3261e;
	background: rgba(179, 38, 30, 0.1);
	border-left: 4px solid #b3261e;
}
.altrack-form-message--sending {
	color: #54595f;
	background: rgba(204, 119, 44, 0.08);
	border-left: 4px solid #cc772c;
	display: flex;
	align-items: center;
	gap: 8px;
}
.altrack-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border: 2px solid rgba(204, 119, 44, 0.3);
	border-top-color: #cc772c;
	border-radius: 50%;
	animation: altrack-spin 0.7s linear infinite;
}
@keyframes altrack-spin {
	to { transform: rotate(360deg); }
}

/* Careers page hero section (elementor-element-e0ca372) uses the shared
   atomic class .e-82c4712, which fixes height:80vh for its background
   image. That's fine for the original short "Open Positions" placeholder,
   but our dynamic vacancy list/detail content is taller — with the fixed
   height and default overflow:visible, taller content bled visually past
   the section into the footer below instead of pushing it down. Override
   only this page-specific instance (not the shared .e-82c4712 class, which
   other hero sections may also use) so it grows to fit its content while
   keeping the 80vh look when content is short. */
.elementor-element-e0ca372 {
	height: auto !important;
	min-height: 80vh;
	/* The careers hero's authored desktop padding-block-start is 150px
	   (local-2340-frontend-desktop.css) — like the 5% margin zeroed below,
	   it was sized to clear the old mispositioned fixed header, which used
	   to overlap the top of this section. With the header layout fixed the
	   section starts fully below the header, so the 150px became pure empty
	   dark space above "LOOKING FOR A NEW CAREER?", reading as an oversized
	   header on this one page. 48px keeps comfortable breathing room. */
	padding-block-start: 48px !important;
	/* The authored gradient overlay is `180deg, #2a4565 25%, transparent`
	   — fully opaque header-blue for the section's top quarter, fading out
	   below. That solid band is the same colour as the header itself, so
	   header + hero fused into one tall blue block with the heading text
	   apparently "inside the header", and the control-room photo only
	   surfacing much further down. Replace it with a uniform translucent
	   wash of the same blue (same approach as the apps hero's authored
	   overlay, which is a flat one-third-alpha tint) so the photo is
	   visible from the very top of the section — making the header's true
	   bottom edge obvious — while keeping enough darkening for the white
	   heading text to stay readable. url() here resolves relative to this
	   CSS file (site root), so one rule serves every page depth. */
	background-image:
		linear-gradient(rgba(42, 69, 101, 0.55), rgba(42, 69, 101, 0.55)),
		url("wp-content/uploads/2026/06/Control-Room-Pic.webp") !important;
}

/* The two hero sections sharing the atomic class .e-82c4712 (apps and
   careers — the only pages whose local-*.css defines it) have an authored
   desktop margin-block-start of 5% (~71px). That margin was authored
   against the header's old -45px-margin layout (see the eebab43 override
   above), where the sticky spacer under-measured the header by 45px —
   netting out to a ~26px white gap between the header and these heroes,
   which read as "the bottom of the header is cut off". With the header
   margin fixed, the full 5% would show as a ~71px white gap instead.
   Zeroing it makes these heroes sit flush under the header, matching every
   other page's hero (none of which have this margin) and matching these
   same sections' own authored *mobile* value, which is already 0%. */
.e-82c4712 {
	margin-block-start: 0 !important;
}

/* Both e-82c4712 heroes (apps, careers) render at height:80vh unconditionally
   at every viewport width (Elementor's own local-*-mobile.css never
   overrides height for this class — only margin-block-start/flex-direction
   are mobile-specific), inherited from the desktop-authored CSS. That's fine
   on typical phone aspect ratios, but on unusually tall ones (e.g. the
   Galaxy S24 Ultra's ~2.2:1 screen, CSS viewport ~480x1080) 80vh is 864px —
   the hero eats almost the entire first screen and leaves a huge empty gap
   below the actual heading/buttons before real content starts (measured:
   ~250-300px of content sitting inside an 864px section on both pages).
   Capped to a fixed height on mobile instead of scaling with viewport
   height — matches Elementor's own mobile breakpoint (max-width:767px, see
   local-2340/2338-frontend-mobile.css). height:auto!important on the
   careers-specific rule above still lets that page's section grow past this
   if the dynamic vacancy content needs more room; this only lowers the
   reserved minimum. */
@media (max-width: 767px) {
	.e-82c4712 {
		height: auto !important;
		min-height: 500px !important;
	}
}

/* Same 80/100dvh-on-tall-mobile problem (see .e-82c4712 above), found on
   two more pages after checking all 7 at a 480x1080 (Galaxy S24 Ultra-class)
   viewport — most of these atomic hero/section blocks are fine (their
   content naturally fills close to the authored min-height even on very
   tall screens), but these two leave a large visible gap:
   - Homepage's `e-dbf7639-eac6f30` (min-height:100dvh, no mobile override
     in local-1299-frontend-mobile.css) measured a ~500px empty gap below
     its content on the S24 Ultra viewport.
   - My-taxi's hero `e-8754a76-cc669d1` is a *fixed* height:100vh on mobile
     specifically (local-643-frontend-mobile.css authors it larger on
     mobile than desktop's 80vh) — besides its own ~100px content gap, a
     fixed 100vh here means the hero alone fills the entire first screen
     on a tall phone before any scroll. Switched to height:auto + a capped
     min-height, same pattern as the careers/apps fix, scaled for these
     being the ~100%-tier sections (500px * 100/80, rounded).
   Both go through height:auto!important so real content can still grow
   past the cap; only the reserved minimum shrinks. */
@media (max-width: 767px) {
	.e-dbf7639-eac6f30 {
		min-height: 620px !important;
	}
	.e-8754a76-cc669d1 {
		height: auto !important;
		min-height: 620px !important;
	}
}

/* Reported after redeploying the above (2026-07-15): still a large empty
   navy gap on the homepage, directly under the header and above the
   vehicle-type image carousel. Root cause is a different section than the
   two above — `e-5e1ce7d-7b5bb7c`, the very first section on the page.
   Elementor's own mobile file *does* already reduce it from 100dvh to
   70dvh (local-1299-frontend-mobile.css), which is why this one wasn't
   caught by the same audit that found the two sections above (measured
   only a modest ~140px gap in this repo's own testing tools at a matching
   480x1080 viewport) — but on the real device the gap reads as much
   larger and clearly broken. This section is also `justify-content:
   flex-end`, i.e. its content (the carousel + heading) is anchored to the
   *bottom* of the box, so an oversized min-height shows up as dead space
   *above* the content instead of below it, unlike the other two. Same
   fix, scaled to this being the 70%-tier (500px * 70/80, rounded) since
   Elementor's own mobile value is already one tier down from 100%. */
@media (max-width: 767px) {
	.e-5e1ce7d-7b5bb7c {
		min-height: 440px !important;
	}
}

/* Careers page vacancy list + detail/apply view (see careers.js).
   The surrounding Elementor section has a dark background with white
   heading text, but this content is unstyled markup we inject — give it a
   light card background so default dark text stays readable instead of
   nearly invisible against the dark section. */
#altrack-vacancy-list-view,
#altrack-vacancy-detail {
	background: #fff;
	color: #54595f;
	padding: 24px;
	border-radius: 6px;
	text-align: left;
	/* The parent (elementor-element-8bb0d93) is a flex column with
	   align-items:center, so without an explicit width these default to
	   fit-content — much narrower than the available space, looking
	   squashed. width:100% fills it up to max-width, then margin:auto
	   centers the (now-capped) card instead of letting it stretch
	   edge-to-edge on wide screens. min-width:0 is the actual fix for
	   horizontal page overflow on mobile, where native <input type="file">
	   controls have a wide intrinsic minimum that flex children won't
	   shrink below by default. */
	width: 100%;
	max-width: 760px;
	min-width: 0;
	margin: 16px auto 0;
	box-sizing: border-box;
}
/* The detail view reads better with its title/meta centered like a job
   posting header, but body copy, lists and the form still need left
   alignment for readability — .altrack-vacancy-detail-scroll resets that
   below. This only affects the "Back" button, which sits outside the
   scroll wrapper. */
#altrack-vacancy-detail {
	text-align: center;
}
#altrack-vacancy-detail h3,
#altrack-vacancy-detail h4 {
	color: #54595f;
	font-weight: 700;
	margin: 16px 0 8px;
	/* Some mirrored WordPress/theme CSS resolves an inherited line-height to
	   a near-zero value on plain h3/h4 tags at narrower breakpoints (seen at
	   375px: computed line-height ~1.6px on a 16px heading) — a heading that
	   wraps to 2+ lines then renders with the lines stacked almost on top of
	   each other, unreadable. Set an explicit, sane line-height regardless of
	   wherever that value is coming from. */
	line-height: 1.3;
}
#altrack-vacancy-detail h3 {
	font-size: 1.45em;
	margin-top: 0;
}
/* Job meta (department/area/city) as pill badges — see careers.js showDetail
   — matching the vacancy list cards instead of a single plain-text line with
   em-dashes, so the detail header reads consistently with the list. */
#altrack-job-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 4px;
}
.altrack-job-meta-tag {
	background: rgba(204, 119, 44, 0.1);
	color: #cc772c;
	padding: 3px 12px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 13px;
}
/* Section headings inside the detail body (Duties, Requirements, Languages,
   Apply) as a small uppercase "eyebrow" with an accent underline, instead of
   plain bold text indistinguishable from the job title/meta above it. */
.altrack-vacancy-detail-scroll h4 {
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #cc772c;
	border-bottom: 2px solid rgba(204, 119, 44, 0.2);
	padding-bottom: 6px;
	margin-top: 26px;
}
/* Duty/requirement/language items get a small accent-colored dot marker
   instead of the default browser bullet, matching the orange accent used
   throughout this section rather than a plain black disc. */
#altrack-job-duties,
#altrack-job-qualifications,
#altrack-job-languages {
	list-style: none;
	margin: 0;
	padding: 0;
}
#altrack-job-duties li,
#altrack-job-qualifications li,
#altrack-job-languages li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 8px;
	line-height: 1.4;
}
#altrack-job-duties li::before,
#altrack-job-qualifications li::before,
#altrack-job-languages li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #cc772c;
}
/* Duties and Requirements side by side instead of stacked. Collapses to one
   column on narrow screens. */
.altrack-vacancy-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
}
@media (max-width: 600px) {
	.altrack-vacancy-two-col {
		grid-template-columns: 1fr;
	}
}
/* Vacancy list as job cards, not a data table — title prominent, department/
   location as small tags, date as a quiet meta line, and a "View & Apply"
   cue reinforcing that each row is clickable. */
.altrack-vacancy-empty {
	color: #54595f;
	text-align: center;
	padding: 20px 0;
}
.altrack-vacancy-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
}
.altrack-vacancy-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-left: 4px solid #cc772c;
	border-radius: 8px;
	cursor: pointer;
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.altrack-vacancy-card:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
	border-color: rgba(204, 119, 44, 0.5);
}
.altrack-vacancy-card-title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	color: #54595f;
}
.altrack-vacancy-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #8a8f96;
}
.altrack-vacancy-card-tag {
	background: rgba(204, 119, 44, 0.1);
	color: #cc772c;
	padding: 2px 10px;
	border-radius: 999px;
	font-weight: 600;
}
/* Posting date reads as metadata, not a category like department/city, so it
   gets a neutral grey pill instead of the orange tag color — same shape,
   visually quieter. The "Posted" label is in the text itself (careers.js),
   not a ::before, so it stays selectable/readable in plain text. */
.altrack-vacancy-card-date {
	background: rgba(0, 0, 0, 0.05);
	color: #8a8f96;
	padding: 2px 10px;
	border-radius: 999px;
	font-weight: 600;
}
.altrack-vacancy-card-cta {
	flex-shrink: 0;
	color: #cc772c;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.altrack-vacancy-card {
		flex-direction: column;
		align-items: flex-start;
	}
	.altrack-vacancy-card-cta {
		align-self: flex-end;
	}
}
/* Site-wide `button` styling defaults every <button> to a solid orange pill
   (matches the "Apply" button, which relies on that default). The back
   link needs to look secondary, not a duplicate of the primary action, so
   it has to out-specificity that shared rule rather than just override it. */
#altrack-vacancy-detail button.altrack-vacancy-back {
	background: #fff !important;
	color: #cc772c !important;
	border: 2px solid #cc772c !important;
	cursor: pointer;
	font-size: 13px;
	padding: 6px 18px !important;
	margin-bottom: 16px;
	transition: background-color 0.15s ease;
}
#altrack-vacancy-detail button.altrack-vacancy-back:hover {
	background: rgba(204, 119, 44, 0.1) !important;
}
/* Detail view can get long (description, duties, qualifications, languages,
   dynamic file inputs) — cap it and let it scroll internally instead of
   growing the whole page. The back button stays outside this wrapper so
   it's always reachable without scrolling. overflow-x is hidden since
   nothing inside should need horizontal scroll (see width/min-width fix
   above); only the vertical scrollbar is intentional, so it gets styled
   rather than left as a jarring default OS scrollbar. */
.altrack-vacancy-detail-scroll {
	max-height: 55vh;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 10px;
	scrollbar-width: thin;
	scrollbar-color: #cc772c #f2e7de;
	/* Reset the centered text-align from #altrack-vacancy-detail — body
	   copy, lists and the form read better left-aligned. Title/meta are
	   re-centered explicitly below for a job-posting-header feel. */
	text-align: left;
}
.altrack-vacancy-detail-scroll h3,
.altrack-vacancy-detail-scroll #altrack-job-meta {
	text-align: center;
}
/* "Copy Link to This Position" — lets a visitor grab a URL for this
   specific vacancy to post elsewhere (see careers.js's setShareLink/
   openVacancyFromQuery). Sits at the bottom of the apply form, after the
   reCAPTCHA note (2026-07-15, moved down from the top of the detail view
   and simplified to a plain button with no visible URL field — the link
   itself is still built in JS from the vacancy title, nothing here needs
   to *show* it). Styled as a secondary action (white/orange-outline,
   matching .altrack-vacancy-back) so it doesn't compete with the primary
   orange Submit button directly above it. */
.altrack-share-link {
	text-align: center;
	margin-top: 8px;
}
#altrack-share-link-copy {
	background: #fff;
	color: #cc772c;
	border: 2px solid #cc772c;
	border-radius: 4px;
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
#altrack-share-link-copy:hover {
	background: rgba(204, 119, 44, 0.1);
}
.altrack-vacancy-detail-scroll::-webkit-scrollbar {
	width: 8px;
}
.altrack-vacancy-detail-scroll::-webkit-scrollbar-track {
	background: #f2e7de;
	border-radius: 8px;
}
.altrack-vacancy-detail-scroll::-webkit-scrollbar-thumb {
	background: #cc772c;
	border-radius: 8px;
}
/* Two-column form layout — Name/Surname and the two doc-upload sections sit
   side by side; Email, Message, the submit button and the status message
   span both columns via .altrack-form-full-row. Collapses to one column on
   narrow screens. */
/* Enclosing panel so "applying" reads as a distinct step from "reading about
   the job" above it, rather than the form just trailing off the page. */
#altrack-vacancy-apply-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	row-gap: 4px;
	text-align: left;
	background: #faf6f2;
	border: 1px solid rgba(204, 119, 44, 0.15);
	border-radius: 8px;
	padding: 18px;
	box-sizing: border-box;
}
#altrack-vacancy-apply-form .altrack-form-full-row {
	grid-column: 1 / -1;
}
@media (max-width: 600px) {
	#altrack-vacancy-apply-form {
		grid-template-columns: 1fr;
	}
}
#altrack-vacancy-detail form p {
	margin-bottom: 12px;
}
#altrack-vacancy-apply-form label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	color: #54595f;
	margin-bottom: 4px;
}
#altrack-vacancy-detail input[type="text"],
#altrack-vacancy-detail input[type="email"],
#altrack-vacancy-detail textarea {
	width: 100%;
	max-width: 420px;
	padding: 8px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 6px;
}
#altrack-vacancy-detail input[type="file"] {
	display: block;
	width: 100%;
	max-width: 420px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 6px;
}
#altrack-vacancy-apply-form button[type="submit"] {
	display: block;
	margin: 16px auto 0;
}

/* Cross-document View Transitions (Chrome/Edge 126+ only — no effect in
   Firefox/Safari, which just keep today's default hard navigation, so this
   is purely additive). This is a classic multi-page static site with no
   shared JS app shell, so every nav click is a full document reload; the
   browser's default is a hard cut, which makes the header (and its
   EMERGENCY/QUOTE/SUPPORT bar) visibly disappear and reappear on every
   click. `navigation: auto` asks the browser to cross-fade old->new page
   content instead. Giving the header/footer a stable view-transition-name
   (same partial on every page, so the name always matches) tells the
   browser to treat them as one continuous element across the navigation
   rather than part of the generic full-page snapshot, avoiding a visible
   flash for them specifically. */
@view-transition {
	navigation: auto;
}
.elementor-location-header {
	view-transition-name: site-header;
}
.elementor-location-footer {
	view-transition-name: site-footer;
}