/*
 * TIS Chauffeur — base layer: design tokens, layout primitives and shared components.
 * Measured from the approved Figma design (desktop canvas 1672px).
 *
 * SIZING MODEL
 * ------------
 * --tis-u is "one Figma pixel": min(viewport, 1672px) / 1672. A Figma value of 70px is written
 * calc(70 * var(--tis-u)), which is exactly 70px on a 1672px canvas and scales down smoothly on
 * narrower desktops. Tablet (<=1024px) and mobile (<=767px) switch to purpose-built values inside
 * each widget's own stylesheet — nothing there is a blind scale-down of the desktop layout.
 */

/* ---------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------ */
:root {
	/* Colours (names follow how the design uses them) */
	--tis-primary: #003bff;
	--tis-primary-a: #004bff; /* button gradient — top    */
	--tis-primary-b: #0030c9; /* button gradient — bottom */
	--tis-navy: #172d4b;      /* utility bar              */
	--tis-ink: #04091c;       /* headings / strong text   */
	--tis-ink-2: #05083e;
	--tis-body: #263b65;      /* long-form body text      */
	--tis-muted: #505c78;     /* secondary text           */
	--tis-muted-2: #60677d;
	--tis-soft: #e8f0ff;      /* icon discs               */
	--tis-field: #f5f7fc;     /* inactive tabs / fields   */
	--tis-line: #dfe8f5;      /* hairlines / card borders */
	--tis-bg: #fcfdff;        /* page background          */
	--tis-white: #ffffff;
	--tis-divider: #8495b0;
	--tis-star: #ffb400;

	/* Typography */
	--tis-font-display: 'Orbitron', 'Eurostile', 'Arial Black', sans-serif;
	--tis-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* One Figma pixel */
	--tis-u: calc(min(100vw, 1672px) / 1672);

	/* Layout */
	--tis-container: 1672px;
	--tis-gutter: calc(64 * var(--tis-u));

	/* Shape */
	--tis-radius-pill: 60px;
	--tis-radius-card: 16px;
	--tis-radius-field: 5px;

	/* Shadows */
	--tis-shadow-card: 0 14px 28px rgba(31, 66, 108, 0.05);
	--tis-shadow-btn: 0 10px 24px rgba(0, 59, 255, 0.28);
}

@media (max-width: 1024px) {
	:root { --tis-gutter: 40px; }
}

@media (max-width: 767px) {
	:root { --tis-gutter: 20px; }
}

/* ---------------------------------------------------------------------
 * Layout primitives
 *
 * Vertical AND horizontal padding live on .tis-container (one element), so the Section Settings
 * controls and the responsive gutter never fight, and the background on .tis-section always
 * bleeds edge to edge.
 * ------------------------------------------------------------------ */
.tis-widget,
.tis-widget *,
.tis-widget *::before,
.tis-widget *::after {
	box-sizing: border-box;
}

/* Elementor wraps every widget in a container with its own height rules; let the widget decide. */
.elementor-widget[class*='elementor-widget-tis-'] > .elementor-widget-container { height: auto !important; }

html { overflow-x: clip; }

.tis-widget {
	font-family: var(--tis-font-body);
	color: var(--tis-ink);
	line-height: 1.4;
}

/* :where() keeps these resets at zero specificity so any widget class (or Elementor style control) wins. */
:where(.tis-widget) :where(img) { display: block; max-width: 100%; }
:where(.tis-widget) :where(h1, h2, h3, h4, h5, h6, p) { margin: 0; }
:where(.tis-widget) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.tis-widget) :where(a) { color: inherit; text-decoration: none; }
:where(.tis-widget) :where(button) { font: inherit; }

/* Section rhythm: every section gets the same vertical padding (60px desktop, 40px tablet, 30px mobile)
   and one block gap (20px on every device). Widget CSS and the Elementor "Section Settings" controls
   override these. :where() keeps the defaults at zero specificity. */
:root {
	--tis-pad-y: 60px;
	--tis-gap: 20px;
}

@media (max-width: 1024px) {
	:root { --tis-pad-y: 40px; }
}

@media (max-width: 767px) {
	:root { --tis-pad-y: 30px; }
}

:where(.tis-section) > :where(.tis-container) {
	padding-top: var(--tis-pad-y);
	padding-bottom: var(--tis-pad-y);
}

.tis-section {
	position: relative;
	background: var(--tis-bg);
	color: var(--tis-ink);
}

.tis-container {
	position: relative;
	width: 100%;
	max-width: var(--tis-container);
	margin: 0 auto;
	padding-left: var(--tis-gutter);
	padding-right: var(--tis-gutter);
}

.tis-accent { color: var(--tis-primary); }

/* Elementor's own `.elementor img { height: auto }` would otherwise defeat the fixed-height, object-fit
   image slots in every widget. Widgets mark such images with a `*__img` class; this keeps them in charge. */
.tis-widget img[class*='__img'] { max-width: none; }

/* Soft-edged photo: .tis-feather fades each edge of the photo into whatever is behind it, so images never end
   in a hard rectangle. --fl / --fr / --ft / --fb are how far (in %) the fade reaches in from the left / right /
   top / bottom edge; 0 keeps that edge crisp. Widgets set per-photo defaults; Style > Photo > Soft Edge overrides. */
.tis-feather {
	--fl: 0%;
	--fr: 0%;
	--ft: 0%;
	--fb: 0%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl)), linear-gradient(270deg, transparent 0, #000 var(--fr)), linear-gradient(180deg, transparent 0, #000 var(--ft)), linear-gradient(0deg, transparent 0, #000 var(--fb));
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl)), linear-gradient(270deg, transparent 0, #000 var(--fr)), linear-gradient(180deg, transparent 0, #000 var(--ft)), linear-gradient(0deg, transparent 0, #000 var(--fb));
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* Custom icons (Elementor icon picker: uploaded SVG / icon fonts) inside any "*icon*" wrapper never exceed
   their slot. Zero specificity, so each widget's own icon sizing still wins. */
:where(.tis-widget [class*='icon']) > :where(svg:not(.tis-svg), img) { max-width: 100%; max-height: 100%; }
:where(.tis-widget [class*='icon']) > :where(svg:not(.tis-svg)) { width: 1em; height: 1em; fill: currentColor; }

/* Line icons: Figma's Lucide exports are lighter than the 2px default. Override with --tis-icon-stroke. */
.tis-svg:not(.tis-svg--brand) { stroke-width: var(--tis-icon-stroke, 1.6); }

/* Image focus point: Style > Image "Focus Point" sliders set --tis-px / --tis-py on the image. */
:where(.tis-widget img[class*='img']) { object-position: var(--tis-px, 50%) var(--tis-py, 50%); }

/* ---------------------------------------------------------------------
 * Eyebrow: small tracked label with optional hairlines
 *   .tis-eyebrow--line-left | --line-right | --line-both
 * ------------------------------------------------------------------ */
.tis-eyebrow {
	display: flex;
	width: fit-content;
	max-width: 100%;
	align-items: center;
	gap: calc(16 * var(--tis-u));
	font-family: var(--tis-font-body);
	font-size: calc(16 * var(--tis-u));
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.3125em; /* 5px at 16px */
	text-transform: uppercase;
	color: var(--tis-primary);
}

.tis-eyebrow__line {
	display: block;
	flex: none;
	width: calc(36 * var(--tis-u));
	height: 1px;
	background: var(--tis-primary);
}

@media (max-width: 1024px) {
	.tis-eyebrow { font-size: 14px; gap: 14px; }
	.tis-eyebrow__line { width: 32px; }
}

@media (max-width: 767px) {
	.tis-eyebrow { font-size: 12px; gap: 10px; letter-spacing: 0.22em; }
	.tis-eyebrow__line { width: 24px; }
}

/* ---------------------------------------------------------------------
 * Buttons
 *   .tis-btn            primary (blue gradient pill)
 *   .tis-btn--outline   white pill with a blue outline
 * ------------------------------------------------------------------ */
.tis-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(18 * var(--tis-u));
	min-height: calc(58 * var(--tis-u));
	padding: 0 calc(40 * var(--tis-u));
	border: 0 solid transparent;
	border-radius: var(--tis-radius-pill);
	background: linear-gradient(180deg, var(--tis-primary-a) 0%, var(--tis-primary-b) 100%);
	color: #fff;
	font-family: var(--tis-font-body);
	font-size: calc(20 * var(--tis-u));
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.tis-btn:hover,
.tis-btn:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--tis-shadow-btn);
}

.tis-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(22 * var(--tis-u));
	height: calc(22 * var(--tis-u));
	font-size: calc(22 * var(--tis-u));
	line-height: 1;
	transition: transform 0.25s ease;
}

.tis-btn__icon svg,
.tis-btn__icon i { width: 1em; height: 1em; font-size: 1em; }
.tis-btn__icon svg:not(.tis-svg) { fill: currentColor; }
.tis-btn:hover .tis-btn__icon { transform: translateX(3px); }

.tis-btn--outline {
	background: #fff;
	color: var(--tis-ink);
	border: 1.3px solid var(--tis-primary);
}

.tis-btn--outline:hover,
.tis-btn--outline:focus-visible {
	background: var(--tis-primary);
	color: #fff;
	box-shadow: var(--tis-shadow-btn);
}

.tis-btn--block { display: flex; width: 100%; }

@media (max-width: 1024px) {
	.tis-btn { min-height: 52px; padding: 0 30px; font-size: 17px; gap: 12px; }
	.tis-btn__icon { width: 20px; height: 20px; font-size: 20px; }
}

@media (max-width: 767px) {
	.tis-btn { min-height: 48px; padding: 0 24px; font-size: 15px; gap: 10px; }
	.tis-btn__icon { width: 18px; height: 18px; font-size: 18px; }
}

/* Text link with arrow ("Learn More →") */
.tis-link {
	display: inline-flex;
	align-items: center;
	gap: calc(14 * var(--tis-u));
	color: var(--tis-primary);
	font-family: var(--tis-font-body);
	font-size: calc(18 * var(--tis-u));
	font-weight: 500;
	text-decoration: none;
}

/* Round icon disc (arrow discs, social buttons ...) */
.tis-disc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	border-radius: 50%;
	background: var(--tis-soft);
	color: var(--tis-primary);
}

.tis-disc svg { width: 50%; height: 50%; }

/* ---------------------------------------------------------------------
 * Scroll-reveal animation system (see assets/js/widgets.js initReveal()).
 * Heading = fade-up, paragraph = delayed fade-up, image = fade + scale/slide, card grids =
 * staggered fade-up (each card's transition-delay is set server-side by TIS_Controls::tis_reveal()).
 *
 * The !important on `transition` (only) is intentional: several widgets declare their own
 * `transition` for a hover effect at the same specificity, and whichever stylesheet loaded later
 * would otherwise silently drop the reveal's fade.
 * ------------------------------------------------------------------ */
[data-reveal] {
	opacity: 0;
	transition: opacity 0.8s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.16, 0.84, 0.44, 1) !important;
	will-change: opacity, transform;
}

[data-reveal='fade-up'] { transform: translateY(34px); }
[data-reveal='fade'] { transform: none; }
[data-reveal='fade-left'] { transform: translateX(-40px); }
[data-reveal='fade-right'] { transform: translateX(40px); }
[data-reveal='scale'] { transform: scale(0.93); }
[data-reveal='pop'] { transform: scale(0.7); transition-duration: 0.55s !important; }

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* No JS (or JS failed): never leave content invisible. */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { transition: none !important; opacity: 1; transform: none; }
	.tis-btn,
	.tis-btn__icon { transition: none; }
}

/* ---------------------------------------------------------------------
 * Fallback header/footer (only when no Header/Footer widget template drives them)
 * ------------------------------------------------------------------ */
.tis-fallback-header,
.tis-fallback-footer {
	padding: 20px var(--tis-gutter);
	background: var(--tis-navy);
	color: #fff;
	font-family: var(--tis-font-body);
}

.tis-fallback-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tis-fallback-header a { color: #fff; text-decoration: none; }
.tis-fallback-header ul { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.tis-main { display: block; }

/* Heading tag chosen in the editor for an element that used to be a span / div / p keeps that element's look:
   no browser heading size or weight unless the element's own class sets them (zero specificity, so every class rule wins). */
:where(h1, h2, h3, h4, h5, h6, p):where(.tis-eyebrow, .tis-areas__panel-title, .tis-booking__info-title, .tis-contact__detail-label, .tis-cta__benefit-title, .tis-faq__help-eyebrow, .tis-fleet__badge-title, .tis-testi__stat-label, .tis-testi__name, .tis-testi__tagline, .tis-why__feature-title, .tis-why__stat-label) { font-size: inherit; font-weight: inherit; line-height: inherit; }
:where(h1, h2, h3, h4, h5, h6):where(.tis-footer__heading, .tis-faq__help-title, .tis-contact__form-title) { font-size: inherit; font-weight: inherit; line-height: inherit; }