/* ===========================================================================
   ETM theme glue. The live design system (etm-polish.css + live-home.css)
   owns global typography + chrome (topbar/nav/footer/home). This file only
   adds: mobile-nav behaviour, app-page wrapper, and interior content pages
   (service/blog/single/resources) styled in the same navy/teal language.
   No global element resets here — those belong to the live CSS.
   =========================================================================== */

/* Logo: override etm-polish's white-box .logo styling (live does this inline) */
.etm-live-nav .logo{background:transparent !important;padding:0 !important;border-radius:0 !important;box-shadow:none !important;}
.etm-live-nav .logo img{width:252px !important;height:auto !important;max-width:none !important;background:transparent !important;border-radius:0 !important;}
@media(max-width:600px){.etm-live-nav .logo img{width:190px !important;}}

.etm-skip{position:absolute;left:-9999px;}
.etm-skip:focus{left:12px;top:12px;background:#fff;padding:10px 16px;z-index:1000;border-radius:8px;}

/* Mobile nav toggle (hidden on desktop) */
.etm-nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;min-width:44px;min-height:44px;align-items:center;justify-content:center;}
.etm-nav-toggle span{display:block;width:26px;height:2px;background:#fff;border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
/* Hamburger → X when the drawer is open */
body.etm-nav-open .etm-nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.etm-nav-open .etm-nav-toggle span:nth-child(2){opacity:0;}
body.etm-nav-open .etm-nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:1240px){
	.etm-nav-toggle{display:flex;order:3;}
	/* Switch to the drawer before the full desktop menu outgrows the header. */
	.etm-live-nav,.etm-live-nav .wrap{min-height:78px !important;}
	.etm-live-nav .wrap{padding:0 20px !important;gap:12px !important;}
	body.etm-nav-open .etm-live-nav{z-index:1000 !important;}
	/* Primary menu becomes a full-width drawer below the header */
	.etm-live-nav .wrap > ul{display:none !important;position:absolute;top:100%;left:0;right:0;background:#112255;
		flex-direction:column !important;align-items:stretch !important;justify-content:flex-start !important;
		padding:8px 20px 18px !important;gap:0 !important;z-index:1000;max-height:calc(100vh - 78px);overflow-y:auto;
		box-shadow:0 18px 40px rgba(0,18,56,.35);}
	body.etm-nav-open .etm-live-nav .wrap > ul{display:flex !important;}
	.etm-live-nav .wrap > ul > li{border-bottom:1px solid rgba(255,255,255,.08);width:100%;}
	.etm-live-nav .wrap > ul > li > a{display:flex !important;align-items:center;justify-content:space-between;
		padding:14px 2px !important;font-size:16px !important;min-height:48px;}
	/* Drop-down submenus: hidden until their parent is tapped open in the drawer.
	   Overrides etm-polish.css's @1100px `.drop-menu{display:none}` so they can expand. */
	.etm-live-nav .nav-drop .drop-menu{display:none !important;position:static !important;transform:none !important;
		opacity:1 !important;visibility:visible !important;box-shadow:none !important;border-radius:0 !important;
		width:100% !important;max-width:none !important;padding:4px 0 10px 12px !important;background:transparent !important;border-top:0 !important;}
	.etm-live-nav .nav-drop.is-open .drop-menu{display:block !important;}
	.etm-live-nav .nav-drop .drop-menu .tm-drop-list{display:flex !important;flex-direction:column !important;
		grid-template-columns:none !important;gap:0 !important;}
	.etm-live-nav .nav-drop .drop-menu .tm-drop-list li a{display:block !important;text-align:left !important;
		justify-content:flex-start !important;color:#cdd8ec !important;padding:11px 4px !important;font-size:14.5px !important;
		min-height:44px;white-space:normal !important;}
	.etm-live-nav .nav-drop > a .nav-chevron{display:inline-block !important;transition:transform .2s ease;}
	.etm-live-nav .nav-drop.is-open > a .nav-chevron{transform:rotate(180deg);}
	.topbar .left{display:none;}
}

/* App pages (plugin shortcodes: dashboards/auth/directories) sit on the soft bg */
.etm-app-page{background:#f6f8fb;min-height:60vh;}
.etm-app-page .etm-wrap{max-width:1560px;margin:0 auto;padding:34px 22px 56px;}

/* ---- Interior content pages (navy/teal, matching live language) ---- */
.etm-page-hero{background:#001238;color:#fff;padding:54px 0;}
.etm-page-hero .wrap,.etm-content-wrap.wrap,.etm-listing.wrap{max-width:1560px;margin:0 auto;padding-left:22px;padding-right:22px;}
.etm-page-hero h1{color:#fff;margin:0;font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.02em;}
.etm-page-hero-sub{color:#aebbd4;font-size:18px;margin:14px 0 0;max-width:720px;}
.etm-crumbs{font-size:13px;color:#9fb0cf;margin-bottom:14px;}
.etm-crumbs a{color:#cdd8ec;text-decoration:none;}
.etm-crumbs span{margin:0 6px;opacity:.6;}
.etm-eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#00c9a7;margin-bottom:10px;}

.etm-content-wrap{padding:56px 0;}
/* page.php column: .etm-container had no width rules (renamed from .wrap), so the
   hero <h1> hit the viewport edge while .etm-prose centred itself — misaligned.
   Give both a single readable, centred column with a shared left edge. */
.etm-page-hero .etm-container,
.etm-content-wrap.etm-container{max-width:900px;margin:0 auto;padding-left:24px;padding-right:24px;box-sizing:border-box;}
.etm-content-wrap.etm-container .etm-prose{max-width:none;margin:0;}
@media (max-width:640px){
  .etm-page-hero .etm-container,
  .etm-content-wrap.etm-container{padding-left:16px;padding-right:16px;}
}
.etm-prose{max-width:760px;margin:0 auto;font-size:16.5px;color:#17233f;line-height:1.7;}
.etm-prose h2{margin:1.6em 0 .5em;color:#001238;font-size:26px;}
.etm-prose h3{margin:1.4em 0 .4em;color:#001238;font-size:20px;}
.etm-prose p{margin:0 0 1.1em;}
.etm-prose ul,.etm-prose ol{padding-left:1.3em;margin:0 0 1.2em;}
.etm-prose li{margin:.4em 0;}
.etm-prose a{color:#03b495;text-decoration:underline;}
.etm-prose details{border:1px solid #e3e8f1;border-radius:10px;padding:14px 18px;margin:0 0 12px;background:#fff;}
.etm-prose summary{font-weight:700;color:#001238;cursor:pointer;}
.etm-prose details[open] summary{margin-bottom:10px;}

/* Service template */
.etm-service-hero{background:#001238;color:#fff;padding:54px 0 60px;}
.etm-service-hero-grid{max-width:1560px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:1.25fr .75fr;gap:46px;align-items:start;}
.etm-service-hero-text h1{color:#fff;font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-.02em;margin:0;}
.etm-service-hero-sub{color:#aebbd4;font-size:18px;margin:14px 0 24px;}
.etm-hero-btns{display:flex;gap:14px;flex-wrap:wrap;}
.etm-btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:13px 24px;border-radius:10px;font-weight:800;font-size:15px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;}
.etm-btn-teal{background:#00c9a7;color:#04221b;}
.etm-btn-teal:hover{background:#03b495;color:#04221b;}
.etm-btn-dark{background:#101827;color:#fff;}
.etm-btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}
.etm-btn-block{display:flex;width:100%;}
.etm-service-form-card{background:#fff;border-radius:16px;padding:26px;box-shadow:0 18px 40px rgba(0,18,56,.18);}
.etm-service-form-card h2{font-size:19px;margin:0 0 18px;color:#001238;}
.etm-service-form-card .etm-field{margin-bottom:14px;}
.etm-service-form-card label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#17233f;}
.etm-service-form-card input,.etm-service-form-card textarea{width:100%;padding:11px 13px;border:1px solid #e3e8f1;border-radius:9px;font-family:inherit;font-size:14px;}
.etm-service-body{max-width:1560px;margin:0 auto;padding:54px 22px;display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start;}
.etm-service-body .etm-prose{max-width:none;margin:0;}
.etm-service-side{position:sticky;top:120px;display:flex;flex-direction:column;gap:20px;}
.etm-side-card{background:#fff;border:1px solid #e3e8f1;border-radius:14px;padding:22px;}
.etm-side-card h3{font-size:16px;margin:0 0 12px;color:#001238;}
.etm-side-card-teal{background:linear-gradient(160deg,#063b35,#001238);color:#fff;border:0;}
.etm-side-card-teal h3{color:#fff;}
.etm-side-card-teal p{color:#aee9dd;font-size:14px;}
.etm-side-links{list-style:none;margin:0;padding:0;}
.etm-side-links li{border-bottom:1px solid #e3e8f1;}
.etm-side-links li:last-child{border-bottom:0;}
.etm-side-links a{display:block;padding:10px 0;color:#17233f;font-size:14.5px;font-weight:500;text-decoration:none;}

/* Blog / listing / single */
.etm-listing{max-width:1560px;margin:0 auto;padding:54px 22px;}
.etm-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.etm-card-post{background:#fff;border:1px solid #e3e8f1;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;}
.etm-card-post-media{display:block;aspect-ratio:16/9;background:#001238;overflow:hidden;}
.etm-card-post-media img{width:100%;height:100%;object-fit:cover;}
.etm-card-post-ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,#0a2150,#001238);}
.etm-card-post-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1;}
.etm-card-tag{align-self:flex-start;background:#e9fbf6;color:#03b495;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:20px;}
.etm-card-post-body h3{margin:0;font-size:18px;}
.etm-card-post-body h3 a{color:#001238;text-decoration:none;}
.etm-card-post-body p{color:#5b6b86;font-size:15px;margin:0;flex:1;}
.etm-card-meta{color:#5b6b86;font-size:13px;margin-top:8px;}
.etm-post-layout{max-width:1560px;margin:0 auto;padding:54px 22px;display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start;}
.etm-post-layout .etm-prose{max-width:none;margin:0;}
.etm-post-feature{margin:0 0 28px;}
.etm-post-feature img{width:100%;border-radius:14px;}
.etm-post-side{position:sticky;top:120px;display:flex;flex-direction:column;gap:20px;}
.etm-pagination{margin-top:44px;text-align:center;}
.etm-pagination .page-numbers{display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;padding:0 12px;border:1px solid #e3e8f1;border-radius:9px;margin:0 4px;color:#001238;font-weight:600;text-decoration:none;}
.etm-pagination .page-numbers.current{background:#001238;color:#fff;}
.etm-empty{text-align:center;color:#5b6b86;padding:40px 0;}
.etm-404-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.etm-eyebrow{margin-bottom:10px;}

@media(max-width:980px){
	.etm-service-hero-grid,.etm-service-body,.etm-post-layout{grid-template-columns:1fr;}
	.etm-card-grid{grid-template-columns:1fr;}
	.etm-service-side,.etm-post-side{position:static;}
}

/* ===========================================================================
   MOBILE-RESPONSIVE PASS (append-only). Makes the whole site feel like a clean,
   touch-friendly app on phones + small tablets. Desktop is untouched — every
   rule below lives inside a max-width media query. Breakpoints: 1024 (tablet),
   768 (mobile), 480 (small phone).
   =========================================================================== */

/* ---- Global guards: no horizontal scroll anywhere ----
   Scoped to body only (not html) so position:sticky on dashboard nav keeps
   working. live-home.css already sets body{overflow-x:hidden} globally; this
   reinforces the no-overflow guarantee on touch widths. */
/* Global horizontal-overflow guard at every width (a services carousel could
   otherwise leak a few px past the viewport on desktop). overflow-x:clip does
   NOT create a scroll container, so position:sticky keeps working. */
html,body{overflow-x:clip;max-width:100%;}
@media(max-width:1024px){
	body{max-width:100%;overflow-x:hidden;}
	img,svg,video,iframe,table{max-width:100%;}
}

/* ---- Tablet (<=1024px): header chrome + logo scaling ---- */
@media(max-width:1024px){
	/* Inline-SVG logo (etm_logo_svg) scales down from its 290px inline width */
	.etm-live-nav .logo .etm-logo-svg{width:280px !important;}
	/* Utility bar: drop the long contact sentence, keep the action buttons usable */
	.topbar .right span:not(.etm-util-id){display:none !important;}
	.topbar .right{gap:8px !important;flex-wrap:wrap;justify-content:flex-end;}
	.etm-util-id{max-width:150px !important;}
}

/* ---- Mobile (<=768px) ---- */
@media(max-width:768px){
	/* Tighter gutters everywhere */
	.wrap{padding-left:16px !important;padding-right:16px !important;}
	.etm-app-page .etm-wrap,.etm-wrap{padding-left:16px !important;padding-right:16px !important;}
	.etm-page-hero .wrap,.etm-content-wrap.wrap,.etm-listing.wrap{padding-left:16px;padding-right:16px;}

	/* Topbar: compact, no overflow. Hide the "Logged in as <email>" pill on phones. */
	.topbar{font-size:11.5px !important;}
	.etm-util-id{display:none !important;}
	.topbar .right{gap:6px !important;}
	.topbar .right a{padding:0 10px !important;font-size:11.5px !important;}

	/* Nav: even shorter on phones; logo a touch smaller */
	.etm-live-nav,.etm-live-nav .wrap{min-height:68px !important;}
	.etm-live-nav .wrap{padding:0 16px !important;}
	.etm-live-nav .logo .etm-logo-svg{width:220px !important;}
	.etm-live-nav .wrap > ul{max-height:calc(100vh - 68px);}

	/* Interior content hero */
	.etm-page-hero{padding:34px 0;}
	.etm-content-wrap{padding:36px 0;}
	.etm-prose{font-size:16px;}
	.etm-service-hero{padding:34px 0 38px;}
	.etm-service-body{padding:34px 16px;gap:28px;}
	.etm-service-hero-grid{gap:26px;padding:0 16px;}
	.etm-post-layout{padding:34px 16px;gap:28px;}
	.etm-listing{padding:34px 16px;}
	.etm-hero-btns{gap:10px;}
	.etm-hero-btns .etm-btn{flex:1 1 auto;justify-content:center;}

	/* Footer: stack columns, full-width legal row */
	.footer{padding:40px 0 0;}
	.foot-grid{grid-template-columns:1fr !important;gap:30px;padding-bottom:34px;}
	.foot-bottom .wrap{flex-direction:column;align-items:flex-start;gap:10px;}
	.foot-bottom .flinks{flex-wrap:wrap;gap:12px;}
	.socials{gap:10px;}

	/* Teal request bar above the footer: stack heading over the search */
	.teal-bar{padding:28px 0;}
	.teal-bar .wrap{flex-direction:column;align-items:stretch;gap:18px;}
	.teal-bar h3{max-width:none;font-size:22px;text-align:left;}
	.teal-search{max-width:none;flex-direction:column;border-radius:12px;}
	.teal-search input{padding:14px 16px;}
	.teal-search button{justify-content:center;padding:14px;}
}

/* ---- Small phones (<=480px) ---- */
@media(max-width:480px){
	.etm-live-nav .logo .etm-logo-svg{width:190px !important;}
	.etm-page-hero h1{font-size:26px;}
	.etm-prose h2{font-size:22px;}
	.etm-prose h3{font-size:18px;}
	.etm-404-links{flex-direction:column;}
	.etm-404-links .etm-btn{width:100%;justify-content:center;}
}

/* ---- Homepage hero: authoritative override (theme.css loads after
   live-home + etm-polish, so this wins their @1100px hero rules). The split
   left/right photo collapses into one compact navy hero on mobile. ---- */
@media(max-width:1024px){
	.hero{height:auto !important;min-height:0 !important;display:block !important;}
	.hero .img-left{position:relative !important;width:100% !important;height:200px !important;top:auto !important;left:auto !important;}
	.hero .img-right{display:none !important;}
	.hero .overlay{position:absolute !important;width:100% !important;height:200px !important;
		background:linear-gradient(180deg,rgba(0,18,56,.45),rgba(0,18,56,.9)) !important;}
	.hero .hero-inner{position:relative !important;display:block !important;padding:26px 24px 38px !important;
		background:#001238 !important;}
	.hero-content{max-width:none !important;padding-top:0 !important;}
}
@media(max-width:768px){
	.hero .img-left,.hero .overlay{height:170px !important;}
	.hero .hero-inner{padding:24px 16px 34px !important;}
}

/* Primary nav link size (desktop) — user-set 15.5px. Overrides the global
   `.nav ul a{font-size:16px!important}` in etm-polish.css for nav links only;
   logo, buttons and the mobile burger menu (16px touch size) are untouched. */
@media(min-width:1025px){
  .etm-live-nav .wrap > ul > li > a{ font-size:15.5px !important; }
}

/* Home mobile fold: keep the request starter visible earlier. */
@media(max-width:768px){
	.hero .img-left,
	.hero .overlay{height:120px !important;}
	.hero .hero-inner{padding:16px 16px 28px !important;}
	.hero h1{font-size:34px !important;line-height:1.08 !important;margin-bottom:10px !important;letter-spacing:0 !important;}
	.hero .hero-content .hero-help-box{margin-top:2px !important;}
	.hero-help-box{padding:7px !important;}
	.hero-help-box input{font-size:16px !important;padding:14px 15px !important;}
	.hero-help-box button{padding:14px 18px !important;}
	.hero .hero-content .sub{margin-top:12px !important;}
}

@media(max-width:420px){
	.hero .img-left,
	.hero .overlay{height:96px !important;}
	.hero .hero-inner{padding-top:14px !important;}
	.hero h1{font-size:31px !important;}
}

/* 2026-07-24: nav row needed 404px on a 390px phone (logo 230 + actions 92 + toggle 44
   + gaps/padding), pushing the hamburger 14px off screen and giving every page a
   horizontal wiggle. Tighten only below 480px. */
@media(max-width:480px){
	.etm-live-nav .wrap{gap:8px !important;padding:0 14px !important;}
	.etm-nav-toggle{min-width:40px;padding:8px 6px;}
}

/* DCC bridge layer: keep DCC-specific routes/forms inside the ETM skin. */
:root{
  --dcc-blue:#001238;
  --dcc-blue-dark:#071e52;
  --dcc-navy:#001238;
  --dcc-sky:#f6f8fb;
  --dcc-slate:#17233f;
  --dcc-muted:#5b6b86;
  --dcc-line:#d8dfeb;
  --dcc-success:#00a88d;
  --dcc-danger:#b42318;
  --dcc-radius:6px;
  --dcc-shadow:0 10px 28px rgba(7,26,68,.06);
}
.dcc-logo-svg img{background:transparent !important;border-radius:0 !important}
.dcc-etm-hero .img-left{background:
  radial-gradient(circle at 76% 28%,rgba(0,201,167,.24),transparent 28%),
  linear-gradient(135deg,#071e52,#001238) !important}
.dcc-etm-hero .img-right{background:
  linear-gradient(135deg,rgba(0,201,167,.16),rgba(17,34,85,.9)) !important}
.dcc-state-search-main{grid-template-columns:44% 56% !important}
.dcc-us-panel{width:100%;min-height:430px;border-radius:16px;padding:34px;background:
  radial-gradient(circle at 82% 18%,rgba(0,201,167,.22),transparent 32%),
  linear-gradient(145deg,#001238,#112255);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 46px rgba(0,0,0,.18)}
.dcc-us-panel h3{color:#fff;font-size:28px;line-height:1.12;margin:0 0 12px;font-weight:800;letter-spacing:-.5px}
.dcc-us-panel p{color:rgba(255,255,255,.76);font-size:15px;line-height:1.65;margin:0 0 24px}
.dcc-home-filter{display:grid;gap:16px}
.dcc-home-filter label{display:block;color:#fff;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.dcc-home-filter select{display:block;width:100%;margin-top:8px;padding:14px 14px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#fff;color:#17233f;font:inherit}
.dcc-search-wide{width:100%;border-radius:8px;font-weight:800}
.dcc-state-cards,.dcc-recent-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.dcc-state-cards .tm-card,.dcc-recent-cards .tm-card{display:block;text-decoration:none}
.dcc-state-cards .pill-dark,.dcc-recent-cards .pill-dark{display:inline-flex;margin-top:4px;width:auto}
.dcc-empty-card{max-width:360px}
.dcc-support-panel{display:flex;align-items:center;justify-content:center;background:
  radial-gradient(circle at 75% 20%,rgba(0,201,167,.28),transparent 35%),
  linear-gradient(145deg,#112255,#001238)}
.dcc-support-panel>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(440px,92%)}
.dcc-support-panel span{display:flex;align-items:center;justify-content:center;min-height:82px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.07);color:#fff;font-weight:800;text-align:center;padding:16px}
.dcc-cimg-pattern{background:
  radial-gradient(circle at 70% 22%,rgba(0,201,167,.22),transparent 30%),
  linear-gradient(145deg,#071e52,#001238)}
.etm-btn-ghost-navy{border:1px solid #0d1f4c;color:#0d1f4c;background:transparent}
.etm-service-form-card p{font-size:14.5px;line-height:1.6;color:#5b6b86;margin:0 0 18px}
.etm-side-links span{display:block;padding:10px 0;color:#17233f;font-size:14.5px;font-weight:600}
.dcc-profile-content .dcc-profile-meta{margin-top:0}

@media(max-width:1024px){
  .dcc-state-search-main{grid-template-columns:1fr !important;padding:0 24px !important}
  .dcc-us-panel{min-height:0}
}
@media(max-width:768px){
  .dcc-state-cards,.dcc-recent-cards{grid-template-columns:1fr}
  .dcc-us-panel{padding:24px 20px}
  .dcc-support-panel{height:auto;min-height:260px}
  .dcc-support-panel>div{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .dcc-support-panel>div{grid-template-columns:1fr}
}

@media(max-width:620px){
  .etm-auth-header{padding:16px !important;gap:12px !important;align-items:flex-start !important;flex-direction:column !important}
  .etm-auth-logo .dcc-logo-svg{width:250px !important}
  .etm-auth-back{max-width:100% !important;white-space:normal !important}
}