/* ==========================================================================
   LR ToolKit Theme
   Navy and aqua are the ToolKit's own preloader colours, so the chrome and
   the loading screen match exactly. System fonts: nothing to download, which
   matters on crew iPads with patchy signal.
   ========================================================================== */

:root {
	--lrt-navy:       #192b55;   /* header, footer — the ToolKit preloader colour */
	--lrt-navy-edge:  #22386b;   /* hairlines on navy */
	--lrt-aqua:       #34c1fc;   /* links — the ToolKit spinner colour */
	--lrt-white:      #ffffff;
	--lrt-mist:       #c3d0e6;   /* secondary text on navy */
	--lrt-ink:        #16213b;   /* body text on white */
	--lrt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--lrt-header-h: 64px;
}

/* A light baseline only — the same one Hello Elementor sets, so existing
   Elementor pages lay out exactly as they do now. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--lrt-font); color: var(--lrt-ink); -webkit-text-size-adjust: 100%; }

/* Keep the footer at the bottom of the screen on short pages, so a 404 or a
   brief tool page never shows a strip of empty page beneath it. The page
   background is left alone — Elementor pages keep whatever they set. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.lrt-main { flex: 1 0 auto; }

/* Skip link: invisible until focused by keyboard. */
.lrt-skip {
	position: absolute; left: 12px; top: -60px; z-index: 100001;
	padding: 10px 16px; border-radius: 6px;
	background: var(--lrt-aqua); color: var(--lrt-navy);
	font-weight: 700; text-decoration: none;
}
.lrt-skip:focus { top: 12px; }

/* One focus style everywhere on the navy chrome — visible in sunlight. */
.lrt-header a:focus-visible,
.lrt-header button:focus-visible,
.lrt-footer a:focus-visible {
	outline: 3px solid var(--lrt-aqua);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ==========================================================================
   Header — FIXED, not sticky (1.0.1)
   Sticky silently stops working if any plugin or Elementor setting puts
   overflow:hidden on the page, which is common. Fixed holds regardless.
   ========================================================================== */
.lrt-header {
	position: fixed; top: 0; left: 0; right: 0;
	/* 9998 (1.0.2): above the sticky headers plugins use (typically 99-999), so
	   this is the header that stays in view when scrolling; below Elementor
	   lightboxes and popups (9999), the admin bar and ToolKit preloader
	   (99999) and the vehicle dashboard (1000000), so it never covers them. */
	z-index: 9998;
	background: var(--lrt-navy);   /* no border (1.0.4) — a clean edge */
}
/* Clear the WordPress admin bar when logged in. Below 600px WordPress lets the
   bar scroll away; theme.js then slides the header up to the top with it. */
body.admin-bar .lrt-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .lrt-header { top: 46px; } }

/* Keeps the header's room in the page. theme.js sets the exact height. */
.lrt-header-spacer { flex: 0 0 auto; height: 64px; }

/* Links to a spot on the page land below the header, not beneath it. */
html { scroll-padding-top: 80px; }

.lrt-header__inner {
	max-width: 1280px; margin: 0 auto;
	min-height: var(--lrt-header-h);
	padding: 0 20px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	column-gap: 12px;
}

.lrt-brand { display: flex; align-items: center; }

/* ---- The two states (1.0.5) ----
   At the top of the page the logo leads the row. Once you scroll, it shrinks
   to nothing. Because the whole row is centred, the home button and menu glide
   into the middle as it shrinks — no jump, and no script moving them.
   The spacing lives on the logo itself (not a flex gap, which would not
   collapse and would leave the menu off-centre). Once hidden it is taken out
   of keyboard reach too: an invisible link you can still Tab onto is a trap. */
.lrt-logo {
	overflow: hidden;
	max-width: 240px;
	margin-right: 22px;
	opacity: 1;
	visibility: visible;
	transition: max-width .3s ease, margin-right .3s ease, opacity .2s ease, visibility 0s linear 0s;
}
.lrt-logo a { display: block; line-height: 0; }
.lrt-logo img { display: block; height: 38px; width: auto; max-width: none; }   /* fixed height, so it never squashes while shrinking */

.lrt-header.is-scrolled .lrt-logo {
	max-width: 0;
	margin-right: 0;
	opacity: 0;
	visibility: hidden;
	transition: max-width .3s ease, margin-right .3s ease, opacity .2s ease, visibility 0s linear .3s;
}

/* The home button reads as the first item of the menu (1.0.3): aqua like the
   links, white with the aqua underline when you are on the home page. It sits
   outside the menu list on purpose, so it stays in the top bar on phones
   rather than disappearing into the collapsed menu. */
.lrt-home {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 48px; min-height: var(--lrt-header-h);   /* same height as a menu link */
	color: var(--lrt-aqua);
	transition: color .15s ease;
}
.lrt-home svg { width: 22px; height: 22px; }
.lrt-home:hover { color: var(--lrt-white); }
.lrt-home.is-current { color: var(--lrt-white); box-shadow: inset 0 -3px 0 var(--lrt-aqua); }


/* ---- Main menu ---- */
.lrt-nav__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
}
.lrt-nav__list > li { position: relative; }
.lrt-nav__list a {
	display: flex; align-items: center;
	min-height: var(--lrt-header-h);
	padding: 0 14px;
	color: var(--lrt-aqua);
	font-size: 15px; font-weight: 600; letter-spacing: .02em;
	text-transform: uppercase;                    /* matches the menu the crews already know */
	text-decoration: none; white-space: nowrap;
	transition: color .15s ease;
}
.lrt-nav__list a:hover { color: var(--lrt-white); }

/* Where you are. Not decoration — on a two-row iPad menu, knowing which tool
   is open is the one thing the header has to answer at a glance. */
.lrt-nav__list > .current-menu-item > a,
.lrt-nav__list > .current-menu-ancestor > a,
.lrt-nav__list > .current_page_item > a {
	color: var(--lrt-white);
	box-shadow: inset 0 -3px 0 var(--lrt-aqua);
}

/* One level of dropdown, opened by hover OR keyboard focus. */
.lrt-nav__list .sub-menu {
	list-style: none; margin: 0; padding: 6px 0;
	position: absolute; left: 0; top: 100%; min-width: 220px;
	background: var(--lrt-navy);
	border: 1px solid var(--lrt-navy-edge); border-top: 0;
	border-radius: 0 0 8px 8px;
	display: none;
}
.lrt-nav__list li:hover > .sub-menu,
.lrt-nav__list li:focus-within > .sub-menu { display: block; }
.lrt-nav__list .sub-menu a { min-height: 44px; padding: 0 18px; font-size: 14px; }

.lrt-nav__empty { margin: 0; padding: 0 14px; }
.lrt-nav__empty a { color: var(--lrt-mist); font-size: 14px; }

/* Tablets and up: the home icon stays on the menu's row instead of breaking
   onto a line of its own, and between 721px and 1100px the spacing tightens
   so all six tools fit one row on an iPad in portrait. */
@media (min-width: 721px) {
	.lrt-header__inner { flex-wrap: nowrap; }
	.lrt-nav { min-width: 0; }
}
/* Tablets (1.0.4, re-measured with no logo). Each step is the largest size
   that keeps all six tools on one row, checked with the letters widened ~5%
   to allow for the iPad's own font:
     810-1100px (standard iPads, and iPads turned sideways)  14px
     721-800px  (iPad mini in portrait)                     13.5px, tighter spacing */
@media (min-width: 721px) and (max-width: 1100px) {
	.lrt-header__inner { padding: 0 12px; column-gap: 6px; }
	.lrt-nav__list a { padding: 0 10px; font-size: 14px; letter-spacing: .01em; }
}
@media (min-width: 721px) and (max-width: 800px) {
	.lrt-nav__list a { padding: 0 7px; font-size: 13.5px; }
}
/* iPads in portrait (721-920px). Measured: the logo only fits beside the menu
   from 921px up without shrinking the text crews read, so here the menu keeps
   the room and sits centred in both states. iPads turned sideways, laptops and
   desktops get both states. */
@media (min-width: 721px) and (max-width: 920px) {
	.lrt-logo { display: none; }
}

/* ---- Menu button: phones only ---- */
.lrt-menu-toggle { display: none; }

@media (max-width: 720px) {
	/* Real padding rather than centring in a fixed height: once the menu opens
	   beneath it, the top row would otherwise lose its spacing and the button
	   would ride up against the top edge. 48px row + 8px each side = 64px. */
	.lrt-header__inner { justify-content: space-between; padding: 8px 12px; min-height: 0; }

	.lrt-home { min-height: 48px; }
	.lrt-home.is-current { box-shadow: none; }       /* white alone marks it on a phone */

	.lrt-menu-toggle {
		display: inline-flex; align-items: center; gap: 10px;
		min-height: 48px; padding: 0 14px;
		background: transparent; color: var(--lrt-white);
		border: 1px solid var(--lrt-navy-edge); border-radius: 8px;
		font: 600 15px/1 var(--lrt-font); cursor: pointer;
	}
	.lrt-burger { display: inline-grid; gap: 4px; width: 18px; }
	.lrt-burger span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
	.lrt-menu-toggle[aria-expanded="true"] .lrt-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.lrt-menu-toggle[aria-expanded="true"] .lrt-burger span:nth-child(2) { opacity: 0; }
	.lrt-menu-toggle[aria-expanded="true"] .lrt-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

	/* The panel opens as a new row inside the header, over the page. On a small
	   screen it scrolls on its own, so no menu item is ever out of reach. */
	.lrt-nav { display: none; flex-basis: 100%; padding-bottom: 8px; }
	.lrt-nav.is-open { display: block; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }

	.lrt-nav__list { display: block; border-top: 1px solid var(--lrt-navy-edge); }
	.lrt-nav__list a {
		min-height: 52px; padding: 0 8px;             /* big rows for gloved fingers */
		border-bottom: 1px solid var(--lrt-navy-edge);
		font-size: 16px;
	}
	.lrt-nav__list > .current-menu-item > a,
	.lrt-nav__list > .current-menu-ancestor > a,
	.lrt-nav__list > .current_page_item > a {
		box-shadow: inset 4px 0 0 var(--lrt-aqua);
		padding-left: 16px;
	}
	.lrt-nav__list .sub-menu {
		position: static; display: block; min-width: 0;
		border: 0; border-radius: 0; padding: 0 0 0 16px;
	}
}

/* ==========================================================================
   Content — only for pages NOT built with Elementor (they set their own).
   ========================================================================== */
.lrt-main:focus { outline: none; }
.lrt-entry {
	max-width: 760px; margin: 0 auto;
	padding: 48px 24px 64px;
	font-size: 17px; line-height: 1.6;
}
.lrt-entry__title { margin: 0 0 20px; font-size: 32px; line-height: 1.2; color: var(--lrt-navy); }
.lrt-entry__body > :first-child { margin-top: 0; }
.lrt-entry a { color: #0c6fae; }

.lrt-button {
	display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
	background: var(--lrt-navy); color: var(--lrt-white) !important;
	border-radius: 8px; font-weight: 600; text-decoration: none;
}
.lrt-button:hover { background: #22386b; }

/* ==========================================================================
   Footer
   ========================================================================== */
.lrt-footer {
	background: var(--lrt-navy);
	color: var(--lrt-mist);
	border-top: 1px solid var(--lrt-navy-edge);
}
.lrt-footer__inner {
	max-width: 1000px; margin: 0 auto;
	padding: 44px 24px 36px;
	text-align: center;
}

.lrt-footer__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px;
}
.lrt-footer__list a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
	color: var(--lrt-aqua);
	font-size: 16px; font-weight: 600;
	text-decoration: none;
}
.lrt-footer__list a:hover { color: var(--lrt-white); text-decoration: underline; text-underline-offset: 4px; }

.lrt-footer__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; margin-top: 14px;
	color: var(--lrt-aqua); border-radius: 10px;
	transition: color .15s ease, background-color .15s ease;
}
.lrt-footer__icon:hover { color: var(--lrt-white); background: rgba(52, 193, 252, .08); }

.lrt-footer__rule {
	margin: 24px 0 20px; height: 0; border: 0;
	border-top: 1px dashed rgba(195, 208, 230, .35);
}

.lrt-footer__copy { margin: 0; font-size: 13px; color: var(--lrt-mist); }

/* ==========================================================================
   Motion only where it answers an action — and none if the user asks.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.lrt-home, .lrt-nav__list a, .lrt-footer__icon, .lrt-burger span,
	.lrt-logo, .lrt-header.is-scrolled .lrt-logo { transition: none; }
}