/*
 * AZ Black base styles. Every value comes from tokens.css.
 * Section and type utilities are applied to Elementor containers and widgets through their CSS class field.
 */

/* ---------- Ground ---------- */
html { background: var(--azb-bg); color-scheme: dark; scroll-padding-top: calc(var(--header-h) + 1rem); }
:root { --header-h: 64px; }
@media (min-width: 1024px) { :root { --header-h: 76px; } }

body.azb {
	background: var(--azb-bg);
	color: var(--azb-ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body.azb h1, body.azb h2, body.azb h3, body.azb h4, body.azb h5, body.azb h6 {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: var(--tracking-display);
	line-height: var(--lh-heading);
	color: var(--azb-ink);
	text-wrap: balance;
	margin-block: 0 var(--s-4);
}
body.azb h3, body.azb h4 { font-weight: 700; }
body.azb p { margin-block: 0 var(--s-4); }
body.azb a { color: var(--azb-accent); text-underline-offset: 0.2em; }
body.azb a:hover { color: var(--azb-accent-hi); }
body.azb ::selection { background: var(--azb-accent); color: var(--azb-bg); }
body.azb img { max-width: 100%; height: auto; }
body.azb code, body.azb kbd, body.azb .azb-mono { font-family: var(--font-mono); }

/* Visible copper focus everywhere. */
body.azb :focus { outline: none; }
body.azb :focus-visible { outline: 2px solid var(--azb-accent); outline-offset: 3px; border-radius: 4px; }

.screen-reader-text, .azb-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link.screen-reader-text:focus {
	clip: auto; width: auto; height: auto; margin: 0; z-index: 100000;
	top: var(--s-3); left: var(--s-3); padding: var(--s-3) var(--s-5);
	background: var(--azb-accent); color: var(--azb-bg); border-radius: var(--radius-pill);
	font-weight: 600; text-decoration: none;
}
.azb-main:focus { outline: none; }

/* Grain: fixed, non-interactive, under 4% opacity. */
.azb-grain {
	position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header (Theme Builder header container carries .azb-header) ---------- */
.azb-header {
	position: fixed !important; inset: 0 0 auto 0; z-index: 60;
	min-height: var(--header-h);
	transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
	border-bottom: 1px solid transparent;
}
.azb-scrolled .azb-header, .azb-header.is-solid {
	background-color: var(--azb-scrim);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	backdrop-filter: saturate(140%) blur(14px);
	border-bottom-color: var(--azb-line);
}
.admin-bar .azb-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .azb-header { top: 32px; } }
.azb-top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 80px; pointer-events: none; }

/* ---------- Sections (Elementor containers carry these classes; Elementor reads padding and width from variables) ---------- */
.e-con.azb-section, .azb-section {
	position: relative;
	--padding-top: var(--section-pad); --padding-bottom: var(--section-pad);
	--padding-left: var(--gutter); --padding-right: var(--gutter);
	--content-width: var(--container);
	--row-gap: var(--s-8); --column-gap: var(--s-8); --gap: var(--s-8) var(--s-8);
}
.e-con.azb-section--tight { --padding-top: clamp(3rem, 6vw, 5rem); --padding-bottom: clamp(3rem, 6vw, 5rem); }
.e-con.azb-section--flush { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --content-width: 100%; --row-gap: 0px; --column-gap: 0px; --gap: 0px 0px; }
.e-con.azb-page-head { --padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)); --padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.e-con.azb-stackc { --row-gap: var(--s-5); --gap: var(--s-5) var(--s-5); }
.azb-bg { background-color: var(--azb-bg); }
.azb-surface { background-color: var(--azb-surface); }

/* Layout grids for inner containers (content width "full") */
.e-con.azb-cols-2 { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 1024px) {
	.e-con.azb-cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.e-con.azb-cols-2--left { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
	.e-con.azb-cols-2--right { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
	.e-con.azb-cols-2--center { align-items: center; }
}
.e-con.azb-cols-2 > .e-con { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --row-gap: var(--s-5); --gap: var(--s-5) var(--s-5); }
.e-con.azb-head { --row-gap: var(--s-4); --gap: var(--s-4) var(--s-4); max-width: 46rem; }
.e-con.azb-head.azb-center { margin-inline: auto; text-align: center; align-items: center; }

/* Background layers and bands */
.elementor-widget-azb-light-trails { position: absolute !important; inset: 0; z-index: 0; margin: 0 !important; pointer-events: none; }
.azb-cta-band, .azb-band { overflow: hidden; isolation: isolate; }
.azb-cta-band > .e-con-inner > *:not(.elementor-widget-azb-light-trails), .azb-cta-band > *:not(.elementor-widget-azb-light-trails) { position: relative; z-index: 1; }
.e-con.azb-band { --padding-top: clamp(6rem, 14vw, 11rem); --padding-bottom: clamp(6rem, 14vw, 11rem); }
.azb-wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.azb-prose { max-width: 68ch; }
.azb-prose h2 { font-size: var(--fs-h3); margin-top: var(--s-10); }
.azb-prose h3 { font-size: 1.25rem; margin-top: var(--s-8); }
.azb-prose ul, .azb-prose ol { padding-left: 1.2em; margin-block: 0 var(--s-5); }
.azb-prose li { margin-bottom: var(--s-2); }
.azb-prose strong { color: var(--azb-ink); font-weight: 600; }
.azb-prose { color: var(--azb-ink); }
.azb-prose p, .azb-prose li { color: color-mix(in srgb, var(--azb-ink) 88%, var(--azb-muted)); }

/* ---------- Type utilities (applied to Elementor Heading / Text widgets) ---------- */
.azb-h1 .elementor-heading-title, h1.azb-h1, .azb-h1 { font-size: var(--fs-h1) !important; line-height: var(--lh-display) !important; font-weight: 800 !important; }
.azb-h2 .elementor-heading-title, .azb-h2 { font-size: var(--fs-h2) !important; line-height: 1.06 !important; font-weight: 800 !important; }
.azb-h3 .elementor-heading-title, .azb-h3 { font-size: var(--fs-h3) !important; line-height: var(--lh-heading) !important; font-weight: 700 !important; }
.elementor-widget-heading .elementor-heading-title { font-family: var(--font-display); letter-spacing: var(--tracking-display); color: var(--azb-ink); text-wrap: balance; }
.azb-lead, .azb-lead p { font-size: var(--fs-lead) !important; color: var(--azb-muted); max-width: 56ch; }
.azb-muted, .azb-muted p { color: var(--azb-muted) !important; }
.azb-eyebrow .elementor-heading-title, .azb-eyebrow {
	font-family: var(--font-mono) !important; font-size: var(--fs-label) !important; font-weight: 500 !important;
	letter-spacing: var(--tracking-label) !important; text-transform: uppercase; color: var(--azb-accent) !important; line-height: 1.4 !important;
}
.elementor-widget-text-editor { color: var(--azb-ink); }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.azb-center { text-align: center; }
.azb-center .azb-lead, .azb-center.azb-lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.azb-btn, .azb-btn-primary .elementor-button, .azb-btn-ghost .elementor-button {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
	min-height: 48px; padding: 0 var(--s-6); border-radius: var(--radius-pill);
	font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; line-height: 1;
	text-decoration: none; white-space: nowrap; cursor: pointer; border: 0;
	transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
.azb-btn--primary, .azb-btn-primary .elementor-button { background: var(--azb-accent); color: var(--azb-bg) !important; }
.azb-btn--primary:hover, .azb-btn-primary .elementor-button:hover { background: var(--azb-accent-hi); color: var(--azb-bg) !important; }
.azb-btn--ghost, .azb-btn-ghost .elementor-button { background: transparent; color: var(--azb-ink) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--azb-ink) 28%, transparent); }
.azb-btn--ghost:hover, .azb-btn-ghost .elementor-button:hover { box-shadow: inset 0 0 0 1px var(--azb-ink); color: var(--azb-ink) !important; }
.azb-btn svg { width: 18px; height: 18px; flex: none; }
.azb-btn--sm { min-height: 40px; padding: 0 var(--s-4); font-size: 0.875rem; }

/* ---------- Reveal (site.js adds .is-in; content stays visible without JS) ---------- */
.azb-js .azb-reveal:not(.is-in) { opacity: 0; transform: translateY(24px); }
.azb-reveal { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }

/* ---------- Mobile action bar: instant, no animation ---------- */
.azb-mbar { display: none; }
@media (max-width: 767px) {
	.azb-mbar {
		position: fixed; inset: auto 0 0 0; z-index: 70;
		display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: var(--s-2);
		padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom));
		background: var(--azb-scrim); border-top: 1px solid var(--azb-line);
		-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	}
	.azb-mbar__btn {
		display: flex; align-items: center; justify-content: center; min-height: var(--tap);
		border-radius: var(--radius-pill); font-size: 0.875rem; font-weight: 600; text-decoration: none;
		color: var(--azb-ink) !important; box-shadow: inset 0 0 0 1px var(--azb-line); white-space: nowrap;
	}
	.azb-mbar__btn--primary { background: var(--azb-accent); color: var(--azb-bg) !important; box-shadow: none; }
	body.azb-has-mbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ---------- Logo (inline SVG from the azb-logo widget) ---------- */
.azb-logo { display: inline-flex; align-items: center; color: var(--azb-ink); line-height: 0; text-decoration: none; }
.azb-logo:hover { color: var(--azb-ink); }
.azb-logo__svg { height: 34px; width: auto; display: block; }
@media (min-width: 1024px) { .azb-logo__svg { height: 40px; } }
.azb-logo-intro .azb-logo__frame, .azb-logo-intro .azb-logo__hair { stroke-dasharray: 1; stroke-dashoffset: 1; animation: azb-draw 620ms var(--ease-in-out) forwards; }
.azb-logo-intro .azb-logo__hair { animation-delay: 140ms; }
.azb-logo-intro .azb-logo__az { opacity: 0; animation: azb-fade 320ms 500ms var(--ease-out) forwards; }
.azb-logo-intro .azb-logo__word, .azb-logo-intro .azb-logo__tag { opacity: 0; transform: translateY(6px); animation: azb-rise 420ms 580ms var(--ease-out) forwards; }
.azb-logo-intro .azb-logo__tag { animation-delay: 720ms; }
@keyframes azb-draw { to { stroke-dashoffset: 0; } }
@keyframes azb-fade { to { opacity: 1; } }
@keyframes azb-rise { to { opacity: 1; transform: none; } }

/* ---------- Elementor defaults we override ---------- */
.elementor-widget:not(:last-child) { margin-block-end: 0; }
.e-con { --container-default-padding-top: 0px; --container-default-padding-bottom: 0px; }

/* ---------- Tables and forms in content ---------- */
body.azb table { width: 100%; border-collapse: collapse; }
body.azb th, body.azb td { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--azb-line); text-align: left; }

/* ---------- Reduced motion: keep fades, drop movement ---------- */
@media (prefers-reduced-motion: reduce) {
	.azb-js .azb-reveal:not(.is-in) { transform: none; }
	.azb-reveal { transition: opacity var(--dur-reveal) linear; }
	.azb-logo-intro .azb-logo__frame, .azb-logo-intro .azb-logo__hair, .azb-logo-intro .azb-logo__az,
	.azb-logo-intro .azb-logo__word, .azb-logo-intro .azb-logo__tag { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Touch targets ----------
   Every control, chip and list link is at least 44px tall on touch screens.
   Inline links inside running prose are exempt: they are part of a sentence. */
@media (max-width: 1023px) {
	.azb-btn { min-height: 48px; }
	.azb-btn--sm { min-height: 44px; }
	.azb-input, .azb-select, .azb-textarea, .azb-dp__btn { min-height: 44px; }
	.azb-logo { display: inline-flex; align-items: center; min-height: 44px; }
	.azb-chip, .azb-marquee__item, .azb-board__row a,
	.azb-links a, .azb-footer__grid a, .azb-cards__list a, .azb-smap__chips a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	.azb-footer__legal a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 1023px) {
	.azb-seg__opt span { min-height: 44px; }
	.azb-vcard__name a, .azb-board a, .azb-details a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------------------------------------------------------------------------------------------
   Footer layout
   The Theme Builder footer ships the brand block plus four link columns. Without these rules the
   containers fall back to Elementor flex column and every column runs the full width of the page.
   Two columns on phones so the town and airport lists do not run for pages, four from 768, and the
   brand block joins the row from 1024.
--------------------------------------------------------------------------------------------- */
.e-con.azb-footer__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); align-items: start; }
.e-con.azb-footer__brand { grid-column: 1 / -1; --row-gap: var(--s-4); --gap: var(--s-4) var(--s-4); }
.e-con.azb-footer__grid > .e-con { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --row-gap: var(--s-6); --gap: var(--s-6) var(--s-6); }

@media (min-width: 768px) {
	.e-con.azb-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.e-con.azb-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); }
	.e-con.azb-footer__brand { grid-column: auto; }
}

/* Legal bar: the copyright on one side, the policy links on the other. */
.e-con.azb-footer__legal { display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); margin-top: var(--s-10); padding-top: var(--s-5); border-top: 1px solid var(--azb-line); }

/* ---------------------------------------------------------------------------------------------
   Header layout
   The Theme Builder header inner carries the logo and the nav. Without these rules the container
   falls back to Elementor flex column, so the logo sits above the nav, the bar is 117px tall
   instead of --header-h, and it runs full bleed with no container width. The nav handles its own
   responsive behaviour (hamburger below 1024, phone and mega menu above), so all this has to do
   is put the two on one row inside the container and keep the bar at its intended height.
--------------------------------------------------------------------------------------------- */
.e-con.azb-header__inner {
	display: flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center;
	justify-content: space-between; gap: var(--s-4);
	width: 100%; max-width: var(--container); margin-inline: auto;
	min-height: var(--header-h);
	padding-block: 0; padding-inline: var(--gutter);
	--padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
	--row-gap: 0px; --gap: 0px 0px;
}
.e-con.azb-header__inner > .elementor-widget { width: auto; flex: 0 0 auto; }
.e-con.azb-header__inner > .elementor-widget-azb-nav { flex: 1 1 auto; min-width: 0; }