/* ===========================================================================
   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:232px !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;}}

/* Desktop nav rail: keep header content on the same site width as the page,
   let the menu compress slightly, and stop the CTA from spilling right. */
.etm-live-nav .wrap{max-width:1560px !important;padding:0 32px !important;gap:22px !important;}
.etm-live-nav .wrap > ul{display:flex;align-items:center;justify-content:flex-end;gap:22px !important;flex:1 1 auto;min-width:0;}
.etm-live-nav .wrap > ul > li{flex:0 1 auto;min-width:0;}
.etm-live-nav .wrap > ul > li > a{font-size:14.5px !important;}
.etm-live-nav .wrap > ul > li:last-child > a{padding-left:14px !important;padding-right:14px !important;}

@media(max-width:1380px){
	.etm-live-nav .wrap{gap:18px !important;padding:0 24px !important;}
	.etm-live-nav .logo img{width:210px !important;}
	.etm-live-nav .wrap > ul{gap:16px !important;}
	.etm-live-nav .wrap > ul > li > a{font-size:13.5px !important;}
	.etm-live-nav .wrap > ul > li:last-child > a{padding-left:11px !important;padding-right:11px !important;}
}

.tcuk-secondary-nav{background:#2F343A;color:#fff;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(0,0,0,.28);}
.tcuk-secondary-nav .wrap{max-width:1560px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:center;gap:3px;min-height:50px;overflow-x:auto;scrollbar-width:none;}
.tcuk-secondary-nav .wrap::-webkit-scrollbar{display:none;}
@media(max-width:1500px){.tcuk-secondary-nav .wrap{justify-content:flex-start;}}
.tcuk-secondary-nav a{display:inline-flex;align-items:center;white-space:nowrap;color:#fff;text-decoration:none;font-size:12.5px;font-weight:700;padding:8px 10px;opacity:.9;transition:color .15s,opacity .15s;}
.tcuk-secondary-nav a:hover{color:#c7ced6;opacity:1;}
.etm-app-page > .etm-logi-promo{width:calc(100% - 64px);max-width:1504px;margin:28px auto !important;}
.etm-app-page > .etm-logi-promo a{background:#E01E26 !important;color:#fff !important;}
.teal-bar{color:#fff;}
.teal-bar button,.teal-bar input[type="submit"]{font-family:inherit;}
.etm-btn-teal,.etm-btn-navy,.teal-search button,.service-inline-cta a.btn-inline-secondary,.cta-strip a,.cta-strip button{color:#fff!important;}
@media(max-width:768px){.etm-app-page > .etm-logi-promo{width:calc(100% - 32px);}}

.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:1024px){
	.etm-nav-toggle{display:flex;order:3;}
	.tcuk-secondary-nav .wrap{justify-content:flex-start;padding:0 20px;}
	/* Nav bar relaxes its fixed 110px height on mobile so the drawer sits below it */
	.etm-live-nav,.etm-live-nav .wrap{min-height:78px !important;}
	.etm-live-nav .wrap{padding:0 20px !important;gap:12px !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:#121417;
		flex-direction:column !important;align-items:stretch !important;justify-content:flex-start !important;
		padding:8px 20px 18px !important;gap:0 !important;z-index:60;max-height:calc(100vh - 78px);overflow-y:auto;
		box-shadow:0 18px 40px rgba(18,20,23,.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:#D6DAE0 !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:#121417;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:#C3C8D0;font-size:18px;margin:14px 0 0;max-width:720px;}
.etm-crumbs{font-size:13px;color:#9fb0cf;margin-bottom:14px;}
.etm-crumbs a{color:#D6DAE0;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:#E01E26;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:#1F2937;line-height:1.7;}
.etm-prose h2{margin:1.6em 0 .5em;color:#121417;font-size:26px;}
.etm-prose h3{margin:1.4em 0 .4em;color:#121417;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:#B71C24;text-decoration:underline;}
.etm-prose details{border:1px solid #E6E8EC;border-radius:10px;padding:14px 18px;margin:0 0 12px;background:#fff;}
.etm-prose summary{font-weight:700;color:#121417;cursor:pointer;}
.etm-prose details[open] summary{margin-bottom:10px;}

/* Service template */
.etm-service-hero{background:#121417;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:#C3C8D0;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:#E01E26;color:#fff;}
.etm-btn-teal:hover{background:#B71C24;color:#fff;}
.etm-btn-dark{background:#121417;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(18,20,23,.18);}
.etm-service-form-card h2{font-size:19px;margin:0 0 18px;color:#121417;}
.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:#1F2937;}
.etm-service-form-card input,.etm-service-form-card textarea{width:100%;padding:11px 13px;border:1px solid #E6E8EC;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 #E6E8EC;border-radius:14px;padding:22px;}
.etm-side-card h3{font-size:16px;margin:0 0 12px;color:#121417;}
.etm-side-card-teal{background:linear-gradient(160deg,#063b35,#121417);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 #E6E8EC;}
.etm-side-links li:last-child{border-bottom:0;}
.etm-side-links a{display:block;padding:10px 0;color:#1F2937;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 #E6E8EC;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;}
.etm-card-post-media{display:block;aspect-ratio:16/9;background:#121417;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,#121417);}
.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:#B71C24;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:#121417;text-decoration:none;}
.etm-card-post-body p{color:#5B6470;font-size:15px;margin:0;flex:1;}
.etm-card-meta{color:#5B6470;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 #E6E8EC;border-radius:9px;margin:0 4px;color:#121417;font-weight:600;text-decoration:none;}
.etm-pagination .page-numbers.current{background:#121417;color:#fff;}
.etm-empty{text-align:center;color:#5B6470;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(18,20,23,.45),rgba(18,20,23,.9)) !important;}
	.hero .hero-inner{position:relative !important;display:block !important;padding:26px 24px 38px !important;
		background:#121417 !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;}
}

/* Default verified and premium membership badges. */
.badge-verif,
.verified,
.tm-card .vbadge.verified,
.etm-vbadge-verified,
.etm-vbadge-member,
.membership-badge.mb-verified,
.membership-badge.mb-paid {
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:rgba(0,201,167,.14) !important;
	color:#047967 !important;
	border:1px solid rgba(0,201,167,.38) !important;
	border-radius:999px;
	font-weight:800;
}

.badge-feat,
.tm-card .vbadge.premium,
.etm-vbadge-premium,
.etm-vbadge-network,
.etm-profile-page .etm-hero-badge.etm-badge-network,
.etm-profile-page .etm-sidebar-badge.etm-badge-network,
.etm-profile-page .etm-hero-badge.etm-badge-premium,
.etm-profile-page .etm-sidebar-badge.etm-badge-premium,
.membership-badge.mb-premium {
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:rgba(200,16,46,.82) !important;
	color:#fff4f6 !important;
	border:1px solid rgba(255,151,166,.65) !important;
	border-radius:999px;
	font-weight:800;
}

.badge-feat svg,
.tm-card .vbadge.premium svg,
.etm-vbadge-premium svg,
.etm-vbadge-premium .etm-vbadge-svg,
.etm-vbadge-network svg,
.etm-vbadge-network .etm-vbadge-svg,
.etm-profile-page .etm-hero-badge.etm-badge-network svg,
.etm-profile-page .etm-sidebar-badge.etm-badge-network svg,
.etm-profile-page .etm-hero-badge.etm-badge-premium svg,
.etm-profile-page .etm-sidebar-badge.etm-badge-premium svg,
.membership-badge.mb-premium svg {
	color:#ffe4e9 !important;
	stroke-width:2.3px !important;
}

.badge-verif svg,
.verified svg,
.tm-card .vbadge.verified svg,
.etm-vbadge-verified svg,
.etm-vbadge-verified .etm-vbadge-svg,
.etm-vbadge-member svg,
.etm-vbadge-member .etm-vbadge-svg,
.membership-badge.mb-verified svg,
.membership-badge.mb-paid svg {
	color:#047967 !important;
	stroke-width:2px !important;
}

/* Technical SEO/accessibility audit contrast fixes. */
.topbar a[style*="color:#E01E26"]{color:#ff4b52!important;}
.etm-dir2-search .etm-btn-teal,
.etm-profile-page .etm-hero-cta-col .etm-btn-teal,
.etm-enquiry-form .etm-btn-teal{
	background:#008c78!important;
	border-color:#008c78!important;
	color:#fff!important;
}
.etm-loc-hero-actions .etm-btn-teal,
.etm-dir2-sidecta .etm-btn-teal,
.etm-recent + .etm-loc-bottom-cta .etm-btn-teal{
	background:#d71920!important;
	border-color:#d71920!important;
	color:#fff!important;
}
.etm-rcard-aside .etm-btn-navy,
.etm-rtm-actions .etm-btn-navy{
	background:#006b5f!important;
	border-color:#006b5f!important;
	color:#fff!important;
}
.etm-vbadge.etm-vbadge-unclaimed,
.etm-vbadge.etm-vbadge-free{
	background:#f1f5f9!important;
	color:#475569!important;
	border-color:#cbd5e1!important;
}
.etm-vbadge-network,
.etm-profile-page .etm-hero-badge.etm-badge-network,
.etm-profile-page .etm-sidebar-badge.etm-badge-network{
	color:#fff!important;
}
.etm-cred-chip,
.etm-reveal-email{
	color:#047967!important;
}