/* ==========================================================
   Sewer Clean Pro — Layout CSS
   ========================================================== */

/* ── Top Emergency Bar ───────────────────────────────────── */
.sc-top-bar {
	background: var(--sc-primary-dark);
	color: rgba(255,255,255,.9);
	font-size: .8125rem;
	padding: .45rem 0;
}
.sc-top-bar__inner {
	max-width: var(--sc-max-w); margin: 0 auto; padding: 0 1.5rem;
	display: flex; justify-content: space-between; align-items: center;
	flex-wrap: wrap; gap: .5rem;
}
.sc-top-bar a { color: #fff; font-weight: 700; text-decoration: none; }
.sc-top-bar a:hover { text-decoration: underline; }
.sc-top-bar__hours { color: rgba(255,255,255,.6); font-size: .78rem; }
.sc-top-bar__badge {
	background: var(--sc-accent); color: #fff; padding: .2rem .625rem;
	border-radius: 999px; font-size: .73rem; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase;
}

/* ── Site Header ─────────────────────────────────────────── */
.site-header {
	background: #fff;
	border-bottom: 2px solid var(--sc-border);
	position: sticky; top: 0; z-index: 200;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.admin-bar .site-header { top: 32px; }
@media screen and (max-width:782px) { .admin-bar .site-header { top: 46px; } }

.sc-header-inner {
	max-width: var(--sc-max-w); margin: 0 auto; padding: 0 1.5rem;
	display: flex; align-items: center; justify-content: space-between;
	gap: 1.5rem; min-height: 72px;
}

/* Branding */
.site-branding { flex-shrink: 0; }
.site-branding img { max-height: 56px; width: auto; }
.sc-title-link { text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.sc-site-title { font-size: 1.4rem; font-weight: 800; color: var(--sc-primary); letter-spacing: -.02em; line-height: 1.1; }
.sc-site-title span { color: var(--sc-accent); }

/* ── Primary Nav ─────────────────────────────────────────── */
.main-navigation { flex: 1; min-width: 0; }
#primary-menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: .125rem; flex-wrap: wrap;
}
#primary-menu > li { position: relative; }
#primary-menu > li > a {
	display: block; padding: .5rem .875rem;
	color: var(--sc-text); font-weight: 600; font-size: .9rem;
	text-decoration: none; border-radius: var(--sc-radius);
	transition: background .12s, color .12s; white-space: nowrap;
}
#primary-menu > li > a:hover,
#primary-menu > .current-menu-item > a,
#primary-menu > .current-page-ancestor > a { background: var(--sc-light); color: var(--sc-primary); }

/* Dropdown */
#primary-menu .sub-menu {
	display: none; position: absolute; top: calc(100% + 6px); left: 0;
	background: #fff; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg);
	box-shadow: var(--sc-shadow-lg); min-width: 220px;
	list-style: none; padding: .5rem 0; z-index: 400;
}
#primary-menu li:hover > .sub-menu,
#primary-menu li:focus-within > .sub-menu { display: block; }
#primary-menu .sub-menu li a {
	display: block; padding: .6rem 1.25rem; color: var(--sc-text);
	font-size: .875rem; font-weight: 500; text-decoration: none;
	transition: background .1s, color .1s;
}
#primary-menu .sub-menu li a:hover { background: var(--sc-surface); color: var(--sc-primary); }

/* Header Phone CTA */
.sc-header-cta { flex-shrink: 0; }
.sc-header-cta a {
	display: inline-flex; align-items: center; gap: .4rem;
	background: var(--sc-accent); color: #fff;
	padding: .625rem 1.375rem; border-radius: var(--sc-radius);
	font-weight: 700; font-size: .9rem; text-decoration: none;
	transition: background .15s, transform .1s; white-space: nowrap;
}
.sc-header-cta a:hover { background: var(--sc-accent-dark); text-decoration: none; transform: translateY(-1px); }

/* ── Hamburger ───────────────────────────────────────────── */
.menu-toggle {
	display: none; background: none; border: 1.5px solid var(--sc-border);
	border-radius: var(--sc-radius); cursor: pointer; padding: .5rem;
	flex-direction: column; gap: 5px; align-items: center;
	justify-content: center; width: 42px; height: 42px; flex-shrink: 0;
}
.menu-toggle__bar {
	display: block; width: 20px; height: 2px;
	background: var(--sc-primary); border-radius: 2px;
	transition: transform .2s, opacity .2s, width .2s;
}
.menu-toggle.is-open .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open .menu-toggle__bar:nth-child(2) { opacity: 0; width: 0; }
.menu-toggle.is-open .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { background: var(--sc-dark); color: rgba(255,255,255,.82); }

.sc-footer-cta {
	background: var(--sc-primary);
	padding: 4rem 1.5rem; text-align: center;
	border-bottom: 3px solid var(--sc-accent);
}
.sc-footer-cta__inner { max-width: var(--sc-max-w); margin: 0 auto; }
.sc-footer-cta h2 { color: #fff; font-size: clamp(1.5rem,3vw,2.25rem); margin-bottom: .75rem; }
.sc-footer-cta p  { color: rgba(255,255,255,.85); font-size: 1.1rem; margin-bottom: 2rem; }
.sc-footer-cta .sc-btn-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

.sc-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: .75rem 1.875rem; border-radius: var(--sc-radius); font-weight: 700;
	font-size: 1rem; text-decoration: none; border: 2px solid transparent;
	transition: filter .15s, transform .1s; white-space: nowrap;
}
.sc-btn:hover { filter: brightness(.9); transform: translateY(-1px); text-decoration: none; }
.sc-btn--red    { background: var(--sc-accent); color: #fff; border-color: var(--sc-accent); }
.sc-btn--white  { background: #fff; color: var(--sc-primary); border-color: #fff; }
.sc-btn--outline{ background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }

.sc-footer-body { padding: 3.5rem 1.5rem; }
.sc-footer-grid {
	max-width: var(--sc-max-w); margin: 0 auto;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 2.5rem;
}
.sc-footer-col h3 {
	color: #fff; font-size: .9375rem; margin-bottom: 1.125rem;
	padding-bottom: .625rem; border-bottom: 2px solid var(--sc-accent); display: inline-block;
}
.sc-footer-col p  { color: rgba(255,255,255,.68); font-size: .875rem; margin-bottom: .5rem; }
.sc-footer-col ul { list-style: none; padding: 0; margin: 0; }
.sc-footer-col ul li { margin-bottom: .4rem; }
.sc-footer-col a  { color: rgba(255,255,255,.68); font-size: .875rem; text-decoration: none; transition: color .12s; }
.sc-footer-col a:hover { color: #fff; text-decoration: underline; }
.sc-footer-brand { font-size: 1.25rem; font-weight: 800; color: #fff; display: block; margin-bottom: .875rem; }
.sc-footer-tagline { color: rgba(255,255,255,.5) !important; font-style: italic; font-size: .82rem !important; }

.sc-footer-bar {
	background: rgba(0,0,0,.3); padding: 1.125rem 1.5rem;
	border-top: 1px solid rgba(255,255,255,.07);
}
.sc-footer-bar__inner {
	max-width: var(--sc-max-w); margin: 0 auto;
	display: flex; justify-content: space-between; align-items: center;
	flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: rgba(255,255,255,.45);
}
.sc-footer-bar a { color: rgba(255,255,255,.5); }
.sc-footer-bar a:hover { color: #fff; }

/* ── Mobile Navigation Fix ───────────────────────────────── */
@media (max-width: 920px) {

	/* Header inner: keep logo left, toggle right, no wrapping */
	.sc-header-inner {
		padding: 0 1rem;
		gap: .75rem;
		min-height: 64px;
		flex-wrap: nowrap;
	}

	/* Hide the phone CTA button on mobile — it's in the top bar already */
	.sc-header-cta { display: none; }

	/* Show hamburger */
	.menu-toggle { display: flex; }

	/* Navigation wrapper — must be relative so dropdown is anchored to it */
	.main-navigation {
		position: static;   /* NOT relative — dropdown anchors to header instead */
		flex: none;
		margin-left: auto;  /* push toggle to the right */
	}

	/* Dropdown panel — full width, drops below entire header */
	#primary-menu {
		display: none;
		flex-direction: column;
		align-items: stretch;

		/* Anchor to the header, full width */
		position: fixed;
		top: 64px;           /* matches min-height of header */
		left: 0;
		right: 0;
		width: 100%;

		background: #fff;
		border-top: 3px solid var(--sc-accent);
		border-bottom: 1px solid var(--sc-border);
		box-shadow: 0 8px 24px rgba(0,0,0,.15);
		z-index: 9999;
		padding: .5rem 0;
		margin: 0;

		/* Scrollable if many items */
		max-height: calc(100vh - 110px);
		overflow-y: auto;
	}

	/* Nudge down when WP admin bar is visible */
	.admin-bar #primary-menu { top: 96px; }
	@media screen and (max-width: 782px) {
		.admin-bar #primary-menu { top: 110px; }
	}

	#primary-menu.is-open { display: flex; }

	/* Nav links — full-width tappable rows */
	#primary-menu > li { width: 100%; }
	#primary-menu > li > a {
		padding: .9rem 1.5rem;
		border-radius: 0;
		font-size: 1rem;
		font-weight: 600;
		color: var(--sc-text);
		border-bottom: 1px solid var(--sc-border);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#primary-menu > li:last-child > a { border-bottom: none; }
	#primary-menu > li > a:hover,
	#primary-menu > .current-menu-item > a { background: var(--sc-light); color: var(--sc-primary); }

	/* Services parent — show arrow hint */
	#primary-menu li:has(.sub-menu) > a::after { content: ' ▾'; font-size: .75rem; color: var(--sc-muted); }
	#primary-menu li.is-open:has(.sub-menu) > a::after { content: ' ▴'; }

	/* Sub-menu (Services dropdown) — inline expansion */
	#primary-menu .sub-menu {
		display: none;
		position: static;
		box-shadow: none;
		border: none;
		border-top: 1px solid var(--sc-border);
		border-radius: 0;
		padding: 0;
		background: var(--sc-light);
		width: 100%;
		min-width: 0;
	}
	#primary-menu li.is-open > .sub-menu { display: block; }
	#primary-menu .sub-menu li a {
		padding: .75rem 1.5rem .75rem 2.25rem;
		border-bottom: 1px solid rgba(0,0,0,.06);
		font-size: .9375rem;
		font-weight: 500;
		color: var(--sc-text);
		display: block;
	}
	#primary-menu .sub-menu li:last-child a { border-bottom: none; }
	#primary-menu .sub-menu li a:hover { background: var(--sc-border); color: var(--sc-primary); }

	/* Prevent hover-triggered dropdown on mobile (tap-only) */
	#primary-menu li:hover > .sub-menu { display: none; }
	#primary-menu li.is-open > .sub-menu { display: block; }
}

/* ── Tablet: show compact phone button ───────────────────── */
@media (min-width: 541px) and (max-width: 920px) {
	.sc-header-cta { display: block; }
	.sc-header-cta a {
		padding: .5rem .875rem;
		font-size: .8rem;
		white-space: nowrap;
	}
}

/* ── Top bar stacks on small phones ──────────────────────── */
@media (max-width: 540px) {
	.sc-top-bar__inner { flex-direction: column; text-align: center; gap: .2rem; }
	.sc-top-bar__hours { display: none; } /* hide hours on tiny screens */
	.sc-footer-bar__inner { flex-direction: column; text-align: center; }
	.sc-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

	/* Header: tighten on very small phones */
	.sc-header-inner { padding: 0 .75rem; min-height: 58px; }
	.sc-site-title { font-size: 1.125rem; }
	#primary-menu { top: 58px; }
}

@media (max-width: 380px) {
	.sc-footer-grid { grid-template-columns: 1fr; }
	.sc-site-title { font-size: 1rem; }
}