/*
Theme Name:   ATEH LAW
Theme URI:    https://atehlaw.ca
Description:  Divi child theme for ATEH LAW — Barristers, Solicitors, Notaries Public & Commissioner for Oaths. All brand colours and typography are defined as CSS custom properties in the :root block below, so the whole site can be re-themed from one place.
Author:       ATEH LAW
Template:     Divi
Version:      1.0.0
Text Domain:  ateh-law
*/

/* ==========================================================================
   1. BRAND TOKENS
   --------------------------------------------------------------------------
   This is the single source of truth for the site's colour scheme.
   Change a value here and it updates everywhere on the site.
   Palette per client brief: Midnight Navy, Metallic Gold, White,
   Platinum Silver accent.
   ========================================================================== */

:root {
	/* --- Midnight Navy ------------------------------------------------ */
	--ateh-navy:          #0F172A; /* primary brand navy: text, buttons, bars   */
	--ateh-navy-deep:     #0A111F; /* hero + dark section grounds               */
	--ateh-navy-darkest:  #060B14; /* pillar banner, deepest ground             */
	--ateh-navy-soft:     #1E293B; /* hover state on navy surfaces              */

	/* --- Metallic Gold ------------------------------------------------ */
	--ateh-gold:          #C5A059; /* primary gold: rules, eyebrows, icons      */
	--ateh-gold-bright:   #D4AF37; /* highlight gold: emphasised words          */
	--ateh-gold-deep:     #B38F48; /* gold hover / pressed                      */

	/* --- White & Platinum Silver -------------------------------------- */
	--ateh-cream:         #FBFBF9; /* page ground                               */
	--ateh-white:         #FFFFFF; /* cards, panels                             */
	--ateh-silver:        #CBD5E1; /* platinum silver accent                    */
	--ateh-silver-light:  #E2E8F0; /* hairline borders                          */
	--ateh-silver-pale:   #F1F5F9; /* subtle fills, alternating rows            */

	/* --- Supporting greys --------------------------------------------- */
	--ateh-slate-400:     #94A3B8; /* de-emphasised meta text                   */
	--ateh-slate-500:     #64748B; /* secondary body text                       */
	--ateh-slate-600:     #475569; /* body text on light grounds                */

	/* --- Semantic roles (point these at the tokens above) -------------- */
	--ateh-bg:            var(--ateh-cream);
	--ateh-surface:       var(--ateh-white);
	--ateh-text:          var(--ateh-navy);
	--ateh-text-muted:    var(--ateh-slate-500);
	--ateh-border:        var(--ateh-silver-light);
	--ateh-accent:        var(--ateh-gold);

	/* --- Typography ---------------------------------------------------- */
	/* Master size for the big headings. 1 = original design, 0.7 = 30% smaller.
	   Every major heading multiplies its size by this, so retuning heading
	   scale across the whole site is this one number. */
	--ateh-h-scale: 0.5;

	--ateh-font-display:  'Cinzel', Georgia, 'Times New Roman', serif;
	--ateh-font-body:     'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ateh-font-quote:    'Cormorant Garamond', Georgia, serif;

	/* Eyebrow / label treatment used throughout the design */
	--ateh-eyebrow-size:    11px;
	--ateh-eyebrow-spacing: 0.28em;

	/* --- Divi bridge ---------------------------------------------------
	   Divi modules reference brand colours as `gcid-ateh-*`, which Divi 5
	   renders as `var(--gcid-ateh-*)`. Aliasing them here is what makes the
	   whole site retheme from this one block — change a token above and every
	   Divi module follows. Do not point modules at raw hex values.
	   ------------------------------------------------------------------- */
	--gcid-ateh-navy:         var(--ateh-navy);
	--gcid-ateh-navy-deep:    var(--ateh-navy-deep);
	--gcid-ateh-navy-darkest: var(--ateh-navy-darkest);
	--gcid-ateh-gold:         var(--ateh-gold);
	--gcid-ateh-gold-bright:  var(--ateh-gold-bright);
	--gcid-ateh-cream:        var(--ateh-cream);
	--gcid-ateh-white:        var(--ateh-white);
	--gcid-ateh-silver:       var(--ateh-silver);
	--gcid-ateh-border:       var(--ateh-silver-light);
	--gcid-ateh-slate:        var(--ateh-slate-500);

	/* --- Structure ----------------------------------------------------- */
	--ateh-radius:        2px;   /* the design is essentially square-cornered */
	--ateh-shadow:        0 40px 100px -20px rgba(15, 23, 42, 0.08);
	--ateh-shadow-hover:  0 20px 40px -10px rgba(15, 23, 42, 0.12);
	--ateh-transition:    all 0.3s ease;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
	background-color: var(--ateh-bg);
	color: var(--ateh-text);
	font-family: var(--ateh-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--ateh-navy);
	color: var(--ateh-white);
}

/* Display face for all headings by default. */
h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
	font-family: var(--ateh-font-display);
	color: var(--ateh-text);
}

/* Slim, high-contrast scrollbar to match the mockup. */
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: var(--ateh-silver-pale); }
::-webkit-scrollbar-thumb  { background: var(--ateh-silver); border-radius: var(--ateh-radius); }
::-webkit-scrollbar-thumb:hover { background: var(--ateh-navy); }

/* Divi's default 80px section padding is heavier than the design. */
.et_pb_section { padding: 0; }
.et_pb_row     { padding: 0; }

/* ==========================================================================
   3. SHARED DESIGN-SYSTEM CLASSES
   --------------------------------------------------------------------------
   Applied to Divi modules via the module's CSS Class field, so the client can
   still edit content visually while the styling stays consistent.
   ========================================================================== */

/* --- Eyebrow: the small gold "— PRACTICE DIRECTORY & LEGAL SERVICES" label */
.ateh-eyebrow,
.ateh-eyebrow .et_pb_text_inner,
.ateh-eyebrow h1, .ateh-eyebrow h2, .ateh-eyebrow h3,
.ateh-eyebrow h4, .ateh-eyebrow h5, .ateh-eyebrow h6 {
	font-family: var(--ateh-font-body) !important;
	font-size: var(--ateh-eyebrow-size) !important;
	font-weight: 700 !important;
	letter-spacing: var(--ateh-eyebrow-spacing) !important;
	text-transform: uppercase !important;
	color: var(--ateh-gold) !important;
	line-height: 1.6 !important;
}

/* Centred eyebrow flanked by short gold rules. */
.ateh-eyebrow--ruled .et_pb_text_inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}
.ateh-eyebrow--ruled .et_pb_text_inner::before,
.ateh-eyebrow--ruled .et_pb_text_inner::after {
	content: "";
	width: 34px;
	height: 1px;
	background: var(--ateh-gold);
	flex: none;
}

/* Left-aligned eyebrow with a single leading rule (used in dark page heros). */
.ateh-eyebrow--lead .et_pb_text_inner {
	display: flex;
	align-items: center;
	gap: 14px;
}
.ateh-eyebrow--lead .et_pb_text_inner::before {
	content: "";
	width: 34px;
	height: 1px;
	background: var(--ateh-gold);
	flex: none;
}

/* --- Section headings ----------------------------------------------------
   The design uses the heavy sans (font-black) for section titles; Cinzel is
   reserved for the home hero and the pillar strip. Overrides the base rule
   that sends every heading to the display face.
   ------------------------------------------------------------------------ */
.ateh-section-title h1,
.ateh-section-title h2,
.ateh-section-title h3 {
	font-family: var(--ateh-font-body);
	font-size: calc(48px * var(--ateh-h-scale));
	font-weight: 800;
	letter-spacing: -0.045em;
	text-transform: uppercase;
	line-height: 1.05;
	color: var(--ateh-navy);
	padding: 0;
}

/* --- Pull-quote in Cormorant italic ------------------------------------- */
.ateh-quote .et_pb_text_inner,
.ateh-quote p {
	font-family: var(--ateh-font-quote) !important;
	font-style: italic;
	font-weight: 500;
	color: var(--ateh-navy);
}
.ateh-quote--gold .et_pb_text_inner,
.ateh-quote--gold p { color: var(--ateh-gold-bright) !important; }

/* --- Cards --------------------------------------------------------------- */
.ateh-card {
	background: var(--ateh-surface);
	border: 1px solid var(--ateh-border);
	transition: var(--ateh-transition);
}
.ateh-card:hover {
	border-color: var(--ateh-gold);
	box-shadow: var(--ateh-shadow-hover);
	transform: translateY(-2px);
}

/* Small uppercase pill used for "HIGH SUCCESS RATE", "24/7 BAIL ASSISTANCE". */
.ateh-badge .et_pb_text_inner {
	display: inline-block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ateh-gold);
	background: rgba(197, 160, 89, 0.10);
	border: 1px solid rgba(197, 160, 89, 0.35);
	padding: 5px 10px;
	line-height: 1;
}

/* --- Buttons ------------------------------------------------------------- */
/* Solid navy primary. */
.ateh-btn .et_pb_button,
.et_pb_button.ateh-btn {
	font-family: var(--ateh-font-body) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	padding: 14px 26px !important;
	border-radius: var(--ateh-radius) !important;
	border: 1px solid transparent !important;
	transition: var(--ateh-transition) !important;
}

/* Gold hero CTA. */
.ateh-btn--gold .et_pb_button,
.et_pb_button.ateh-btn--gold {
	background: linear-gradient(90deg, var(--ateh-gold) 0%, var(--ateh-gold-bright) 100%) !important;
	color: var(--ateh-navy-deep) !important;
}
.ateh-btn--gold .et_pb_button:hover,
.et_pb_button.ateh-btn--gold:hover {
	background: linear-gradient(90deg, var(--ateh-gold-deep) 0%, var(--ateh-gold) 100%) !important;
}

/* Outline-on-dark. */
.ateh-btn--ghost .et_pb_button,
.et_pb_button.ateh-btn--ghost {
	background: transparent !important;
	color: var(--ateh-white) !important;
	border: 1px solid rgba(203, 213, 225, 0.5) !important;
}
.ateh-btn--ghost .et_pb_button:hover,
.et_pb_button.ateh-btn--ghost:hover {
	border-color: var(--ateh-silver) !important;
	background: rgba(255, 255, 255, 0.05) !important;
}

/* Divi appends an arrow glyph on hover; the design uses static chevrons. */
.ateh-btn .et_pb_button:after,
.et_pb_button.ateh-btn:after { display: none !important; }

/* --- Hairline rules ------------------------------------------------------ */
.ateh-rule-gold { background-color: var(--ateh-gold) !important; }
.ateh-rule-hair { background-color: var(--ateh-border) !important; }

/* --- Dark sections ------------------------------------------------------- */
.ateh-dark, .ateh-dark p, .ateh-dark li { color: var(--ateh-silver); }
.ateh-dark h1, .ateh-dark h2, .ateh-dark h3,
.ateh-dark h4, .ateh-dark h5, .ateh-dark h6 { color: var(--ateh-white); }

/* --- Inline icons --------------------------------------------------------
   Uses Divi's bundled ETmodules icon font, so no SVG markup ends up in the
   content and editors only ever see plain text in the module.
   ------------------------------------------------------------------------ */
/* Flex the element itself so the glyph optically centres against the text at
   any font size, instead of relying on a vertical-align fudge factor. */
.ateh-ico {
	display: inline-flex;
	align-items: center;
}

.ateh-ico::before {
	font-family: 'ETmodules';
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	flex: none;
	margin-right: 7px;
	font-size: 1.05em;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ateh-ico--phone::before { content: "\00e090"; } /* handset, reads as "call" */
.ateh-ico--mail::before  { content: "\00e010"; }
.ateh-ico--pin::before   { content: "\00e01d"; }
.ateh-ico--clock::before { content: "\00007d"; }
.ateh-ico--up::before    { content: "\000021"; }
.ateh-ico--check::before { content: "\00004e"; }
.ateh-ico--right::before { content: "\000024"; }
.ateh-ico--cal::before   { content: "\00e023"; }
.ateh-ico--doc::before   { content: "\000068"; }
.ateh-ico--dl::before    { content: "\00e092"; }
.ateh-ico--shield::before   { content: "\00e0d9"; }
.ateh-ico--hands::before    { content: "\00e026"; }
.ateh-ico--scale::before    { content: "\00e0ff"; }
.ateh-ico--award::before    { content: "\00e012"; }
.ateh-ico--globe::before    { content: "\00e0e2"; }
.ateh-ico--gavel::before    { content: "\00007e"; }
.ateh-ico--users::before    { content: "\00e026"; }
.ateh-ico--scroll::before   { content: "\000068"; }
.ateh-ico--building::before { content: "\00e0ef"; }
.ateh-ico--home::before     { content: "\00e009"; }
.ateh-ico--stamp::before    { content: "\00e022"; }
.ateh-ico--heart::before    { content: "\00e030"; }
.ateh-ico--bulb::before     { content: "\00e007"; }

/* Buttons that carry an icon class need the glyph inside the button element.
   Divi hides button :before by default, so this has to be forced. */
.et_pb_button.ateh-ico {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
.et_pb_button.ateh-ico::before {
	display: inline-block !important;
	margin-right: 8px;
	opacity: 1 !important;
	/* Same optical correction as the download buttons: the ETmodules glyph
	   draws high in its em box, so nudge it onto the label's centre line. */
	position: relative !important;
	top: 7px !important;
	font-size: 1.25em;
	line-height: 1;
}

/* ==========================================================================
   4. GLOBAL HEADER
   ========================================================================== */

/* --- Utility bar --------------------------------------------------------- */
.ateh-utilbar .et_pb_row { margin-left: auto; margin-right: auto; }

/* Divi floats columns, so each one is only as tall as its own content and they
   end up on different centre lines. Flexing the row puts them all on one. */
.et_pb_row.ateh-utilbar__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap; /* lets Divi's 100%-width mobile columns still stack */
}
.ateh-utilbar__row .et_pb_column {
	float: none;
	display: flex;
	align-items: center;
	margin-bottom: 0;
}
.ateh-utilbar__row .et_pb_module { margin-bottom: 0 !important; width: 100%; }

.ateh-utilbar__text p {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 26px;
	margin: 0;
	padding: 0;
}
.ateh-utilbar__right .ateh-utilbar__text p { justify-content: flex-end; gap: 6px 18px; }

.ateh-utilbar a {
	color: var(--ateh-silver);
	text-decoration: none;
	transition: color 0.2s ease;
}
.ateh-utilbar a:hover { color: var(--ateh-white); }
.ateh-strong { font-weight: 600; letter-spacing: 0.02em; }

.ateh-utilbar__badge {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ateh-silver);
	background: var(--ateh-navy-soft);
	border: 1px solid #334155;
	padding: 5px 10px;
	line-height: 1;
	white-space: nowrap;
}

/* --- Sticky navigation bar ----------------------------------------------- */
.ateh-navbar {
	position: sticky;
	top: 0;
	z-index: 9999;
	border-bottom: 1px solid var(--ateh-border);
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.ateh-navbar .et_pb_row { margin-left: auto; margin-right: auto; }

/* Same story as the utility bar: stretch the three columns to equal height so
   the wordmark, menu and CTAs all sit on one centre line. */
.et_pb_row.ateh-navbar__row {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap; /* lets Divi's 100%-width mobile columns still stack */
}
.ateh-navbar .et_pb_column {
	float: none;
	display: flex;
	align-items: center;
	margin-bottom: 0;
}
.ateh-navbar .et_pb_column > .et_pb_module { margin-bottom: 0 !important; }

/* Brand logo. Sized by height so the lockup's aspect ratio is never distorted;
   the source is 2x (359x96) so it stays crisp on retina. */
.ateh-brand { margin-bottom: 0 !important; }
.ateh-brand .et_pb_image_wrap { display: block; }
.ateh-brand img {
	display: block;
	height: 48px;
	width: auto;
	max-width: 100%;
	transition: opacity 0.2s ease;
}
.ateh-brand a:hover img { opacity: 0.75; }

/* Menu module */
.ateh-navbar__nav { justify-content: center; }
.ateh-navbar__nav > .et_pb_module { width: 100%; }
.ateh-menu .et_pb_menu__logo-wrap,
.ateh-menu .et_pb_menu__logo-slot { display: none !important; }
.ateh-menu .et_pb_menu_inner_container {
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ateh-menu .et_pb_menu__wrap { justify-content: center; flex: 1; }
.ateh-menu .et_pb_menu__menu { justify-content: center; }
.ateh-menu .et_pb_menu__menu > nav > ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.ateh-menu .et_pb_menu__menu > nav > ul > li { margin: 0 14px; padding: 0; float: none; }
.ateh-menu .et_pb_menu__menu > nav > ul > li > a {
	text-transform: uppercase;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: var(--ateh-transition);
}
.ateh-menu .et_pb_menu__menu > nav > ul > li > a:hover { color: var(--ateh-navy) !important; opacity: 1; }
.ateh-menu .et_pb_menu__menu > nav > ul > li.current-menu-item > a,
.ateh-menu .et_pb_menu__menu > nav > ul > li.current_page_item > a {
	color: var(--ateh-navy) !important;
	border-bottom-color: var(--ateh-navy);
}
/* Hamburger colour (set here because the shortcode attribute breaks Divi's converter). */
.ateh-menu .mobile_menu_bar:before { color: var(--ateh-navy) !important; }

/* Header CTAs sit side by side at the right edge. */
.ateh-navbar__cta { justify-content: flex-end; gap: 12px; }
.ateh-navbar__cta .et_pb_button_module_wrapper { margin: 0 !important; }
.ateh-btn--outline .et_pb_button,
.et_pb_button.ateh-btn--outline {
	background: transparent !important;
	border: 1px solid var(--ateh-border) !important;
	color: var(--ateh-navy) !important;
}
.ateh-btn--outline .et_pb_button:hover,
.et_pb_button.ateh-btn--outline:hover {
	background: var(--ateh-silver-pale) !important;
	border-color: var(--ateh-slate-400) !important;
}
.ateh-btn--navy .et_pb_button,
.et_pb_button.ateh-btn--navy {
	background: var(--ateh-navy) !important;
	color: var(--ateh-white) !important;
	border: 1px solid var(--ateh-navy) !important;
}
.ateh-btn--navy .et_pb_button:hover,
.et_pb_button.ateh-btn--navy:hover { background: var(--ateh-navy-soft) !important; }

/* ==========================================================================
   5. GLOBAL FOOTER
   ========================================================================== */

.ateh-footer .et_pb_row { margin-left: auto; margin-right: auto; }
.ateh-footer__rule .et_pb_column { padding: 0 !important; }
.ateh-footer__rule .et_pb_module { margin-bottom: 0 !important; }
.ateh-rule-navy .et_pb_divider_internal { border-top-width: 0; }

/* Brand lockup */
.ateh-footer__brand p {
	display: flex;
	align-items: center;
	margin: 0 0 20px;
}
.ateh-footer__mark {
	width: 38px;
	height: 38px;
	background: var(--ateh-navy);
	color: var(--ateh-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 19px;
	margin-right: 12px;
	flex: none;
}
.ateh-footer__names { display: inline-flex; flex-direction: column; line-height: 1; }
.ateh-footer__name {
	font-family: var(--ateh-font-body);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ateh-navy);
}
.ateh-footer__sub {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ateh-slate-400);
	margin-top: 5px;
}
.ateh-footer__slogan p,
.ateh-footer__blurb p { margin: 0 0 16px; }
.ateh-footer__slogan p { text-transform: uppercase; }

.ateh-footer__values p {
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ateh-slate-400);
}

/* Column headings */
.ateh-footer__heading p {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ateh-border);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ateh-navy);
}
.ateh-footer__heading { margin-bottom: 14px !important; }

/* Navigation chips */
.ateh-footer__chips p {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
.ateh-footer__chips a {
	display: inline-flex;
	align-items: center;
	background: var(--ateh-silver-pale);
	color: var(--ateh-slate-600);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 10px;
	text-decoration: none;
	transition: var(--ateh-transition);
}
.ateh-footer__chips a::before {
	font-family: 'ETmodules';
	content: "\000035";
	font-size: 11px;
	margin-right: 5px;
	color: var(--ateh-navy);
}
.ateh-footer__chips a:hover { background: var(--ateh-silver-light); color: var(--ateh-navy); }

/* Practice directory — two columns of quiet links */
.ateh-footer__directory p {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px 18px;
	margin: 0;
}
.ateh-footer__directory a {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: var(--ateh-slate-500);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.2s ease;
}
.ateh-footer__directory a::before {
	font-family: 'ETmodules';
	content: "\000035";
	font-size: 11px;
	margin-right: 6px;
	color: var(--ateh-navy);
	flex: none;
}
.ateh-footer__directory a:hover { color: var(--ateh-navy); }

/* Contact block */
.ateh-footer__contact p {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0 0 18px;
	font-size: 12px;
	color: var(--ateh-slate-500);
}
.ateh-footer__contact a { color: var(--ateh-slate-500); text-decoration: none; }
.ateh-footer__contact a:hover { color: var(--ateh-navy); }
.ateh-footer__contact .ateh-strong { color: var(--ateh-navy); font-weight: 700; }

/* Legal bar */
.ateh-footer__legal { border-top: 1px solid var(--ateh-border); padding-top: 26px !important; }
.ateh-footer__copy p {
	margin: 0;
	font-size: 11px;
	color: var(--ateh-slate-400);
}
.ateh-footer__legallinks p {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 22px;
	margin: 0;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ateh-slate-500);
}
.ateh-footer__legallinks a { color: var(--ateh-slate-500); text-decoration: none; }
.ateh-footer__legallinks a:hover { color: var(--ateh-navy); }

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

@media (min-width: 981px) {
	/* Size the three header columns to their content instead of Divi's fixed
	   25/50/25 split. With six menu items that split starved the nav column and
	   the menu wrapped to two rows while ~200px of the row sat unused. */
	.ateh-navbar .ateh-navbar__row .ateh-navbar__brand,
	.ateh-navbar .ateh-navbar__row .ateh-navbar__cta {
		width: auto !important;
		flex: 0 0 auto;
	}
	.ateh-navbar .ateh-navbar__row .ateh-navbar__nav {
		width: auto !important;
		flex: 1 1 auto;
		min-width: 0;
	}
	/* A little tighter now that there are six items to fit. */
	.ateh-menu .et_pb_menu__menu > nav > ul > li { margin: 0 11px; }
}

@media (max-width: 1100px) and (min-width: 981px) {
	/* Small laptops: logo + six menu items + both CTA buttons no longer fit on
	   one line, so the header wrapped to two rows. Drop the Call Now button (the
	   number is already in the utility bar directly above) and tighten up. */
	.ateh-navbar__cta .ateh-btn--outline { display: none !important; }
	.ateh-brand img { height: 42px; }
	.ateh-menu .et_pb_menu__menu > nav > ul > li { margin: 0 6px; }
	/* Divi's menu module typography (10px / 700 / uppercase) stops applying in
	   this band and the menu falls back to 14px, which both breaks the design and
	   is why it no longer fits. Restate it so the menu matches the wider layout. */
	.ateh-navbar .ateh-menu .et_pb_menu__menu > nav > ul > li > a {
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 1.6px;
		text-transform: uppercase;
	}
}

@media (max-width: 1100px) {
	.ateh-util-hide-md { display: none !important; }
}

@media (max-width: 980px) {
	/* Brand on the left, hamburger on the right, on one line. */
	.ateh-navbar__brand { width: 50% !important; margin-bottom: 0 !important; }
	.ateh-navbar__nav { width: 50% !important; margin-bottom: 0 !important; }
	.ateh-menu .et_pb_menu_inner_container,
	.ateh-menu .et_pb_menu__wrap { justify-content: flex-end; }
	.ateh-navbar__cta { display: none !important; }
	.ateh-menu .et_pb_menu__wrap { justify-content: flex-end; }
	.ateh-footer__legallinks p { justify-content: flex-start; margin-top: 14px; }
}

@media (max-width: 767px) {
	/* The lockup carrying EST. 2026 is 263px wide at full height, so the brand
	   column needs more than half the row - the nav side only holds a hamburger. */
	.ateh-navbar .ateh-navbar__row .ateh-navbar__brand { width: 62% !important; }
	.ateh-navbar .ateh-navbar__row .ateh-navbar__nav { width: 38% !important; }
	.ateh-brand img { height: 42px; }

	.ateh-utilbar__text p,
	.ateh-utilbar__right .ateh-utilbar__text p { justify-content: center; gap: 6px 14px; }
	.ateh-footer__directory p { grid-template-columns: 1fr; }
}

@media (max-width: 479px) {
	/* Divi forces every column full-width below 480px via
	   `.et_block_row .et_pb_column` (0,2,0 + !important). The brand/menu row
	   has to out-specify that to keep the logo and hamburger on one line. */
	.ateh-navbar .ateh-navbar__row .ateh-navbar__brand { width: 68% !important; }
	.ateh-navbar .ateh-navbar__row .ateh-navbar__nav { width: 32% !important; }
	/* Smaller still, so the lockup clears the hamburger on a 375px screen. */
	.ateh-brand img { height: 38px; }
}