/* ==================================================================
   EAS shared styles — tokens, masthead, footer
   assets/shared/style-eas-shared.css
   Mobile masthead uses the proven FT pattern:
   display:none/block drawer, --masthead-h variable, height:auto +
   min/max-height calc on .is-open, hamburger forced flex <1080px.
   ================================================================== */

/* ---------- Design tokens — swap brand colours HERE only ---------- */
:root {
	--eas-ink:        #13224A;   /* deep navy ink — headings, body text */
	--eas-ink-soft:   #46537B;   /* secondary text */
	--eas-paper:      #F6F8FB;   /* page background, cool blue-white */
	--eas-white:      #FFFFFF;
	--eas-accent:     #012A7E;   /* EAS brand navy (from logo) — links, buttons */
	--eas-accent-dk:  #001D5C;   /* hover state */
	--eas-steel:      #4974AE;   /* logo steel blue — eyebrows, accents on light bg */
	--eas-steel-lt:   #8FB0DC;   /* steel light — headings/accents on dark navy bg */
	--eas-gold:       #4974AE;   /* legacy alias → steel (kept so older refs stay valid) */
	--eas-line:       #DCE3EE;   /* hairlines */

	--eas-font-display: 'Lora', Georgia, serif;
	--eas-font-body:    'Public Sans', -apple-system, Segoe UI, sans-serif;

	--masthead-h: 73px;          /* drawer offset — FT pattern step 5 */
	--eas-max: 1160px;
	--eas-pad: clamp(20px, 4vw, 48px);
}
@media (max-width: 720px) {
	:root { --masthead-h: 64px; }
}

/* ---------- Base on EAS templates ---------- */
body.eas-page {
	font-family: var(--eas-font-body);
	color: var(--eas-ink);
	background: var(--eas-paper);
	font-size: 17px;
	line-height: 1.65;
}
body.eas-page h1,
body.eas-page h2,
body.eas-page h3 {
	font-family: var(--eas-font-display);
	font-weight: 600;
	line-height: 1.2;
	color: var(--eas-ink);
}
body.eas-page a { color: var(--eas-accent); }
body.eas-page main { overflow-x: hidden; } /* never on html/body — breaks iOS sticky */

/* ---------- Buttons ---------- */
.eas-btn {
	display: inline-block;
	font-family: var(--eas-font-body);
	font-weight: 600;
	font-size: 16px;
	padding: 13px 26px;
	border-radius: 6px;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}
.eas-btn--solid { background: var(--eas-accent); color: var(--eas-white) !important; }
.eas-btn--solid:hover { background: var(--eas-accent-dk); }
.eas-btn--ghost {
	border: 1.5px solid var(--eas-accent);
	color: var(--eas-accent) !important;
}
.eas-btn--ghost:hover { background: var(--eas-accent); color: var(--eas-white) !important; }

/* ==================================================================
   MASTHEAD
   ================================================================== */
.eas-masthead {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--eas-white);
	border-bottom: 1px solid var(--eas-line);
	height: var(--masthead-h);
}
.eas-masthead__inner {
	max-width: var(--eas-max);
	margin: 0 auto;
	padding: 0 var(--eas-pad);
	height: 100%;
	display: flex;
	align-items: center;
	gap: 32px;
}
.eas-masthead__logo { flex: 0 0 auto; display: flex; align-items: center; }
.eas-masthead__logo img { display: block; height: 38px; width: auto; }

.eas-masthead__nav { flex: 1 1 auto; }
.eas-masthead__nav ul {
	display: flex;
	flex-wrap: nowrap;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.eas-masthead__nav a {
	white-space: nowrap;
	font-size: 15.5px;
	font-weight: 500;
	color: var(--eas-ink);
	text-decoration: none;
}
.eas-masthead__nav a:hover { color: var(--eas-accent); }

.eas-masthead__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 0 0 auto;
}
.eas-masthead__phone {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	line-height: 1.15;
	text-align: right;
}
.eas-masthead__phone-label {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--eas-ink-soft);
}
.eas-masthead__phone-number {
	font-weight: 700;
	font-size: 16px;
	color: var(--eas-ink);
}
.eas-masthead__book { padding: 11px 20px; font-size: 15px; }

/* ---------- Hamburger (hidden desktop, forced flex <1080 — FT step 3) ---------- */
.eas-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: none;
	border: 0;
	cursor: pointer;
}
.eas-hamburger span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--eas-ink);
	transition: transform .2s ease, opacity .2s ease;
}
.eas-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.eas-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.eas-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Drawer: display none/block, NOT translateX (FT step 4) ---------- */
.eas-drawer {
	display: none;
	position: fixed;
	top: var(--masthead-h);
	left: 0;
	right: 0;
	background: var(--eas-white);
	padding: 28px var(--eas-pad) 40px;
	z-index: 998;
	overflow-y: auto;
}
.eas-drawer.is-open {
	display: block;
	/* FT critical drawer-height fix: Astra's fixed height beats bottom:0 */
	height: auto !important;
	min-height: calc(100vh - var(--masthead-h));
	max-height: calc(100vh - var(--masthead-h));
}
.eas-drawer ul { list-style: none; margin: 0 0 24px; padding: 0; }
.eas-drawer li { border-bottom: 1px solid var(--eas-line); }
.eas-drawer a {
	display: block;
	padding: 15px 0;
	font-size: 17px;
	font-weight: 500;
	color: var(--eas-ink);
	text-decoration: none;
}
.eas-drawer__book { display: block; text-align: center; margin-bottom: 16px; }
.eas-drawer__phone {
	display: block;
	text-align: center;
	font-weight: 700;
	border: 0 !important;
}

/* ---------- Breakpoint ---------- */
@media (max-width: 1200px) {
	.eas-masthead__nav,
	.eas-masthead__actions { display: none; }
	.eas-hamburger { display: flex !important; } /* FT step 3 */
	.eas-masthead__inner { justify-content: space-between; }
}

/* ==================================================================
   FOOTER
   ================================================================== */
.eas-footer {
	background: var(--eas-ink);
	color: rgba(255, 255, 255, .85);
	margin-top: 80px;
}
.eas-footer__inner {
	max-width: var(--eas-max);
	margin: 0 auto;
	padding: 56px var(--eas-pad) 40px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 48px;
}
.eas-footer a, .eas-footer a:visited { color: var(--eas-white) !important; text-decoration: none; }
.eas-footer a:hover { text-decoration: underline; }
.eas-footer__name {
	font-family: var(--eas-font-display);
	font-size: 19px;
	color: var(--eas-white);
	margin: 0 0 10px;
}
.eas-footer__heading {
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--eas-steel-lt);
	margin: 0 0 14px;
}
.eas-footer__col p { margin: 0 0 8px; font-size: 15px; }
.eas-footer__col ul { list-style: none; margin: 0; padding: 0; }
.eas-footer__col li { margin-bottom: 9px; font-size: 15px; }
.eas-footer address { font-style: normal; }
.eas-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, .15);
	padding: 18px var(--eas-pad);
	text-align: center;
	font-size: 13.5px;
}
.eas-footer__legal a { margin-left: 14px; }

@media (max-width: 820px) {
	.eas-footer__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.eas-btn, .eas-hamburger span { transition: none; }
}

/* ==================================================================
   Astra layout overrides — fixes narrow-column + footer-beside-content
   (applies on every EAS template; keep at very end)
   ================================================================== */
body.eas-page .site-content,
body.eas-page #content { display: block !important; padding: 0 !important; margin: 0 !important; }
body.eas-page .site-content .ast-container { display: block !important; max-width: none !important; padding: 0 !important; }
body.eas-page #primary {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
body.eas-page #secondary { display: none !important; }
body.eas-page main { width: 100% !important; }
body.eas-page .eas-footer { width: 100% !important; }