/**
 * Horizons Hello — layout.css
 * Owns ONLY what free Elementor can't express: header, footer, interior
 * shell, sidebar, servicevalue band, page-title hero — the Pro-Theme-Builder
 * deletion unit. The Elementor kit owns everything else (colors/type/
 * buttons/container); values here mirror the kit 1:1 (I-03). Literal hex is
 * correct here — the globals-only rule applies to elementor/ JSON, not this file.
 */

:root {
	--hz-navy: #0b087b;
	--hz-navy-dark: #010046;
	--hz-indigo: #4440cc;
	--hz-dropdown: #3734bd;
	--hz-orange: #f77c07;
	--hz-text: #545454;
	--hz-cream: #faf9f6;
	--hz-lightgray: #ebebeb;
	--hz-white: #fff;
	--hz-container: 1240px; /* fix round 3, item 1: matches the kit's Site Settings container_width (orchestrator ruling 2026-08-28) */
	/* Shared with .hz-header__logo img at <=992px (fix round 1, item h / O3 I-13) so the
	   page-title hero's top padding always clears the mobile header, however tall it is. */
	--hz-mobile-header-h: 148px;
}

/* Header */
.hz-header { position: absolute; top: 0; left: 0; z-index: 900; width: 100%; }
/* FIX ROUND 4, item 1 (@O2b final QA pass): max-width was var(--hz-container) with a 20px
   inline padding gutter INSIDE that cap, so content sat 20px inside the true kit line where
   .hz-page-title__inner / Elementor .e-con-inner sit. calc(...+40px) adds the gutter back to
   the cap so the padding box's CONTENT edge lines up with the kit line, not the padding
   edge — verified: h1 left edge should now equal body-copy left edge on /about-us/.

   FIX ROUND 4, item 2 (@O2b final QA pass) — regression from round 3: `position: relative`
   here made this (boxed, now 1280px) bar the CTA's positioned ancestor, so its `right: 20px`
   measured from the boxed edge (120px from the viewport at 1440) instead of the viewport
   (prod's actual reference frame — the tab lives in a full-bleed strip on prod). REMOVED
   `position: relative` so `.hz-header` (position: absolute, full width, unaffected by this
   fix) is the CTA's positioned ancestor again — restores a true 20px viewport gap at every
   width, independent of --hz-container, with no calc()/max() viewport math needed. */
.hz-header__bar { display: flex; align-items: center; gap: 24px; max-width: calc(var(--hz-container) + 40px); margin-inline: auto; padding: 20px; }
.hz-header__logo img { height: 160px; width: auto; object-fit: contain; }
.hz-header__nav { flex: 1 1 auto; }
.hz-nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; list-style: none; margin: 0; padding: 0; font-family: 'Domine', serif; }
.hz-nav li { position: relative; }
.hz-nav > li > a { display: block; padding: 12px 14px; color: var(--hz-navy); text-decoration: none; }
.hz-nav > li > a:hover, .hz-nav > li > a:focus-visible, .hz-nav > li.current-menu-item > a { background: var(--hz-navy); color: var(--hz-white); }
.hz-nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; margin: 0; padding: 0; list-style: none; background: var(--hz-dropdown); box-shadow: 0 6px 16px rgba(0, 0, 0, .15); z-index: 10; }
.hz-nav .sub-menu a { display: block; padding: 12px 16px; color: var(--hz-white); text-decoration: none; }
.hz-nav .sub-menu a:hover, .hz-nav .sub-menu a:focus-visible { background: var(--hz-navy); color: var(--hz-white); }
.hz-nav .menu-item-has-children:hover > .sub-menu,
.hz-nav .menu-item-has-children.is-open > .sub-menu,
.hz-nav .menu-item-has-children > a:focus + .sub-menu { display: block; }
/* A tab hanging from the true top edge (top:0), not a mid-bar pill (fix round 1, item i /
   gate observation). Positioned relative to `.hz-header` itself (full viewport width, not
   the boxed `.hz-header__bar`) — see the FIX ROUND 4 comment above `.hz-header__bar` for
   why that distinction matters: `right: 20px` here is a true 20px gap from the viewport
   edge at every width, matching prod, independent of `--hz-container`.

   FIX ROUND 3, item 3 (a11y SERIOUS) — the plain `.hz-header__cta{color:white}` declaration
   this rule already had was losing to the kit's global `.elementor-kit-248 a{color:#4440CC}`
   rule: both are effectively (0,1,1)-vs-(0,1,0) or a same-specificity tie depending on how
   you count, but hz-layout.css loads BEFORE the kit CSS in <head> (see item g/round 1), so
   on any tie the later-loaded kit rule always wins — rendering indigo-on-navy (2.13:1,
   fails AA). Scoping the selector to `.hz-header .hz-header__cta` (2 classes, 0-2-0) beats
   the kit's (0-1-1) rule unconditionally, regardless of stylesheet order. */
.hz-header .hz-header__cta { position: absolute; top: 0; right: 20px; background: var(--hz-navy); color: var(--hz-white); text-decoration: none; text-transform: uppercase; letter-spacing: 1.5px; font-size: 14px; padding: 15px 20px 10px; border-radius: 0 0 20px 20px; }
.hz-header .hz-header__cta:hover, .hz-header .hz-header__cta:focus-visible { background: var(--hz-indigo); color: var(--hz-white); }
.hz-header__toggle { display: none; }

/* Elementor Theme Builder header overrides (post 262 — active on staging).
   These target the LIVE Elementor header; .hz-header rules above are the
   fallback if Theme Builder is ever deactivated. Elementor's post-262.css
   loads at <link> index 17; layout.css at index 22, so same-specificity
   rules here win by source order. */
.elementor-262 .elementor-element.elementor-element-hdr_bar { --padding-top: 40px; }
.elementor-262 .elementor-element.elementor-element-hdr_cta { top: 20px; }
body.admin-bar .elementor-262 .elementor-element.elementor-element-hdr_cta { top: 52px; }
/* Without this, reset.css's `button:hover{background-color:#c36}` (specificity 0-1-1)
   beats a bare `.hz-header__toggle` rule (0-1-0) and the toggle hovers pink — a
   consequence of C-2 the style.css enqueue fix alone doesn't cover. */
.hz-header__toggle:hover, .hz-header__toggle:focus-visible { background: var(--hz-indigo); color: var(--hz-white); }

@media (max-width: 992px) {
	.hz-header__bar { flex-wrap: wrap; background: var(--hz-navy); padding: 12px 20px; }
	/* Shrunk from 160px so the closed mobile header stays under --hz-mobile-header-h
	   and never overlaps the page-title h1 below it (fix round 1, item h / O3 I-13). */
	.hz-header__logo img { height: 100px; }
	.hz-header__toggle { display: flex; align-items: center; margin-left: auto; background: none; border: 1px solid var(--hz-white); color: var(--hz-white); text-transform: uppercase; letter-spacing: 1px; padding: 8px 16px; cursor: pointer; }
	.hz-header__nav { flex-basis: 100%; display: none; }
	.hz-header.is-open .hz-header__nav { display: block; }
	.hz-nav { flex-direction: column; align-items: stretch; background: var(--hz-indigo); }
	.hz-nav > li > a { color: var(--hz-white); text-align: center; }
	.hz-nav .sub-menu { position: static; box-shadow: none; background: var(--hz-navy-dark); }
	.hz-nav .sub-menu a { color: var(--hz-white); text-align: center; }
	.hz-header__cta { right: auto; left: 50%; transform: translateX(-50%); }
	/* Elementor Theme Builder mobile overrides (post 262).
	   The bar's custom_css sets `padding: 12px 20px` directly (not via CSS vars),
	   so the desktop --padding-top trick doesn't work here — override padding directly. */
	.elementor-262 .elementor-element.elementor-element-hdr_bar { padding: 20px 20px 12px; }
	.elementor-262 .elementor-element.elementor-element-hdr_cta { top: 12px; }
	body.admin-bar .elementor-262 .elementor-element.elementor-element-hdr_cta { top: 44px; }
}

/* Page-title hero (interior pages) */
.hz-page-title { background-color: var(--hz-lightgray); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 260px 20px 40px; box-shadow: 0 5px 11px -4px rgba(0, 0, 0, .4); margin-bottom: 40px; }
.hz-page-title__inner { max-width: var(--hz-container); margin-inline: auto; }
.hz-page-title .entry-title, .hz-page-title h1 { color: var(--hz-navy); margin: 0; }

@media (max-width: 992px) {
	/* Driven by --hz-mobile-header-h (fix round 1, item h / O3 I-13) so the hero always
	   clears the mobile header — a 100px logo + 24px vertical bar padding is ~124px tall. */
	.hz-page-title { padding-top: calc(var(--hz-mobile-header-h) + 20px); }
}

/* Interior shell (8/4 grid) */
/* FIX ROUND 4, item 1 (@O2b final QA pass): same content-vs-cap gutter fix as .hz-header__bar above. */
.hz-shell { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; max-width: calc(var(--hz-container) + 40px); margin: 0 auto 60px; padding: 0 20px; }
.hz-shell__main .e-con-full { max-width: 100%; }
/* Generic overflow guard (fix round 2, item 2) — root cause on /covid-19-updates/ at
   390px: page content (an Elementor text-editor widget) contains a raw, unwrapped URL
   with no natural break point (`https://www.health.pa.gov/topics/disease/Pages/
   Coronavirus.aspx`, confirmed by curling the page and grepping for a 40+ char run
   with no whitespace). `overflow-wrap: anywhere` lets the browser break mid-word only
   when nothing else fits, instead of stretching `.hz-shell__main` past the viewport. */
.hz-shell__main { overflow-wrap: anywhere; }
.hz-shell__main img, .hz-shell__main iframe { max-width: 100%; }

@media (max-width: 992px) {
	.hz-shell { grid-template-columns: 1fr; }
}

/* Sidebar card */
.hz-sidebar-card { background: var(--hz-cream); margin-top: 40px; }
/* Navy text on the orange bar, not white — white-on-orange is 2.68:1 and fails AA (Design System Spec §6/C-08) */
.hz-sidebar-card__bar { margin: 0; padding: 20px 15px; background: var(--hz-orange); color: var(--hz-navy); font-weight: 400; font-size: 24px; line-height: 1.25; }
.hz-sidebar-card__body { padding: 20px; }
.hz-sidebar-card__body strong { color: var(--hz-navy); }

/* Servicevalue band */
.hz-servicevalue { background: var(--hz-cream); text-align: center; }
.hz-servicevalue__row { display: flex; align-items: stretch; }
.hz-servicevalue__card { flex: 1 1 50%; padding: 60px 40px 120px; } /* fix round 3, item 5: 100px -> 120px, matches prod's measured .servicevalue-block padding at 1200/1440 */
.hz-servicevalue__card--1 { background: var(--hz-lightgray); }
.hz-servicevalue__inner { max-width: 480px; margin-inline: auto; }
.hz-servicevalue__icon img { margin-inline: auto; }

@media (max-width: 992px) {
	.hz-servicevalue__row { flex-direction: column; }
	.hz-servicevalue__card { flex-basis: 100%; padding: 40px 20px; }
}

/* Footer */
.hz-footer { position: relative; background: var(--hz-navy); }
/* fix round 3, item 6: 80% -> 74% + max-width var(--hz-container), lands within 30px of prod's measured footer-card width at both 1200 and 1440 (@O2 CSS request, low priority). */
.hz-footer__card { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; width: 74%; max-width: var(--hz-container); margin: -50px auto 30px; padding: 30px; background: var(--hz-white); box-shadow: 0 -2px 12px rgba(0, 0, 0, .22); }
.hz-footer__contact, .hz-footer__form { flex: 1 1 50%; scroll-margin-top: 140px; }
.hz-footer__copyright { padding: 20px 0; color: var(--hz-white); text-align: center; }
/* Same specificity fix as the header CTA (item 3) — .hz-footer__copyright.hz-footer__copyright a
   isn't needed since 2 classes + 1 type already beats the kit's 1 class + 1 type rule. */
.hz-footer .hz-footer__copyright a { color: var(--hz-white); }

@media (max-width: 992px) {
	.hz-footer__card { flex-direction: column; width: 94%; padding: 15px; }
}