/* ============================================================
 * Redesign — Block 0 (topbar) + Block 1 (header/nav)
 * New namespaced layer: classes prefixed rd-top2-* / rd-nav2-*.
 * Loaded AFTER assets/css/redesign.css, so it can read the tokens
 * already declared in that file's :root (--rd-red, --rd-ink, --rd-ink-2,
 * --rd-paper, --rd-paper-alt, --rd-star, --rd-line, --rd-line-strong,
 * --rd-shadow-sm/md). No new brand hex colors are introduced anywhere in
 * this file; neutrals use plain #fff / rgba() the same way the existing
 * .rd-topbar-inner span{opacity:.82} already does.
 *
 * Breakpoints match the rest of the theme: 991 / 767 / 560.
 * ============================================================ */

/* ---------- Block 0: topbar (.rd-top2-*) ---------- */

.rd-top2-bar{
	background:var(--rd-ink);
	color:#fff;
}
.rd-top2-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	row-gap:6px;
	gap:14px;
	padding-block:9px;
}
.rd-top2-info{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	row-gap:4px;
	list-style:none;
	margin:0;
	padding:0;
	min-width:0;
}
.rd-top2-item{
	display:flex;
	align-items:center;
	gap:6px;
	list-style:none;
	font-family:'Oswald', sans-serif;
	font-size:0.72rem;
	font-weight:500;
	letter-spacing:0.02em;
	text-transform:uppercase;
	color:#fff;
	opacity:0.9;
	white-space:nowrap;
	padding-inline:10px;
	position:relative;
}
.rd-top2-item:first-child{padding-left:0;}
.rd-top2-item + .rd-top2-item::before{
	content:"";
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	width:1px;
	height:11px;
	background:rgba(255,255,255,0.22);
}
.rd-top2-flag span:last-child{text-transform:none;} /* "Proudly Canadian" is mixed case in the mockup, not caps */
.rd-top2-ico{display:inline-flex; flex-shrink:0;}
.rd-top2-ico svg{display:block;}
.rd-top2-stars{color:var(--rd-star); letter-spacing:1px; font-size:0.8rem; line-height:1;}
.rd-top2-rating{gap:7px;}

.rd-top2-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.rd-top2-phone{
	display:inline-flex; align-items:center; gap:7px;
	background:var(--rd-red); color:#fff !important;
	font-family:'Oswald', sans-serif; font-weight:600; font-size:0.8rem;
	letter-spacing:0.02em;
	padding:7px 14px; border-radius:8px;  /* как глобальный .rd-btn — по сайту кнопки не пилюли */
	text-decoration:none; white-space:nowrap;
	transition:filter 0.15s ease;
}
.rd-top2-phone .rd-top2-ico{color:#fff;}
.rd-top2-cta{
	display:inline-flex; align-items:center;
	background:var(--rd-red); color:#fff !important;
	font-family:'Oswald', sans-serif; font-weight:700; font-size:0.74rem;
	letter-spacing:0.03em; text-transform:uppercase;
	padding:8px 18px; border-radius:8px;  /* как глобальный .rd-btn — единый радиус по сайту */
	text-decoration:none; white-space:nowrap;
	transition:filter 0.15s ease;
}
.rd-top2-phone:hover,
.rd-top2-cta:hover{filter:brightness(0.85); color:#fff !important;}

@media (max-width:991px){
	.rd-top2-inner{padding-block:7px;}
	.rd-top2-item{font-size:0.68rem; padding-inline:9px; gap:5px;}
	.rd-top2-item .rd-top2-ico svg{width:12px; height:12px;}
	.rd-top2-stars{font-size:0.72rem;}
	.rd-top2-phone{padding:6px 12px; font-size:0.78rem;}
	.rd-top2-cta{padding:7px 13px; font-size:0.7rem;}
}

@media (max-width:767px){
	/* one line is no longer realistic at this width: keep the trust signal
	   (flag + rating) and the two actions, drop the two duration claims —
	   they're repeated as badges in the hero row right under the header. */
	.rd-top2-item.rd-top2-hide-sm{display:none;}
	.rd-top2-item{padding-inline:8px;}
	.rd-top2-phone-num{display:none;}
	.rd-top2-phone{padding:8px; border-radius:8px;}
	.rd-top2-cta{padding:7px 11px;}
}

@media (max-width:560px){
	.rd-top2-info{gap:0;}
	.rd-top2-item span:not(.rd-top2-ico){font-size:0.64rem;}
	.rd-top2-rating .rd-top2-stars{font-size:0.66rem;}
}

/* ---------- Block 1: header / nav (.rd-nav2-*) ---------- */

.rd-nav2-header{
	position:sticky;
	top:0;
	z-index:1000;
	background:var(--rd-paper);
	border-bottom:1px solid var(--rd-line);
}
/* the shared .rd-wrap side padding (clamp 20-48px) is generous enough to
   make the real ~55-char "Home / About Us / Services / Service Areas /
   Our Work / Our Reviews / Contact Us" menu overflow by a few px right at
   the 992px desktop-nav breakpoint; scoped down slightly here only, not
   touched in the shared class itself. */
@media (min-width:992px) and (max-width:1140px){
	.rd-nav2-header .rd-wrap,
	.rd-top2-bar .rd-wrap{padding-inline:16px;}
}
.rd-nav2-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	padding-block:14px;
}

/* Brand block — header fix 2026-07-29.
   The brand column is pinned to the logo's own width (--rd-nav2-logo-w),
   so the tagline underneath can never grow wider than the logo the way it
   did before (226px of letter-spaced text under a 127px logo). The tagline
   is then hung off the left edge of the "A+ DOORS INC." lettering: in
   logo-header-compact.svg the mascot occupies the left ~40% of the artwork
   (viewBox 0 61 1496 636, mascot x=147..578), so 40% is where the wordmark
   starts — same anchor the mockup uses. */
.rd-nav2-brand{
	--rd-nav2-logo-h:64px;
	--rd-nav2-logo-w:151px;   /* = 64px x 1496/636, the compact logo's ratio */
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:1px;
	width:var(--rd-nav2-logo-w);
	text-decoration:none;
	white-space:nowrap;
	flex-shrink:0;
}
.rd-nav2-logo{
	height:var(--rd-nav2-logo-h);
	width:var(--rd-nav2-logo-w);
	max-width:100%;
	object-fit:contain;
	object-position:left center;
	display:block;
}
/* Tagline sizing note (header fix 2026-07-29):
   "COMMERCIAL DOOR REPAIR EXPERTS" is 30 characters. Hanging it off the
   wordmark (the right ~60% of the logo) AND keeping it inside the logo's
   width would force ~4.8px type — unreadable. So it is left-aligned with
   the logo instead and sized to fill exactly the logo's width, which is
   also how the tagline baked into the client's own artwork behaves. */
.rd-nav2-tagline{
	display:block;
	box-sizing:border-box;
	width:100%;
	font-size:7.6px;
	font-family:'Oswald', sans-serif;
	font-weight:600;
	letter-spacing:0.02em;
	line-height:1.25;
	text-transform:uppercase;
	color:var(--rd-ink);
	opacity:0.8;
}

.rd-nav2-nav{min-width:0;}

.rd-nav2-menu{
	display:flex;
	align-items:center;
	/* header fix 2026-07-29: tighter rhythm, closer to the mockup */
	gap:clamp(10px, 1.6vw, 26px);
	list-style:none;
	margin:0;
	padding:0;
	flex-wrap:nowrap;
}
.rd-nav2-menu li{list-style:none;}
.rd-nav2-menu > li{position:relative;}
.rd-nav2-menu a{
	display:inline-flex;
	align-items:center;
	gap:5px;
	font-family:'Oswald', sans-serif;
	/* header fix 2026-07-29: mockup sets the nav in the same heavy Oswald
	   as the section headings — was 600 and read too light next to it. */
	font-weight:700;
	font-size:clamp(0.75rem, 0.6vw + 0.57rem, 0.88rem);
	letter-spacing:0.03em;
	text-transform:uppercase;
	color:var(--rd-ink) !important;
	text-decoration:none;
	white-space:nowrap;
}
.rd-nav2-menu > li > a{position:relative; padding-block:8px;}
.rd-nav2-menu > li > a::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:2px;
	height:2px;
	background:var(--rd-red);
	transform:scaleX(0);
	transform-origin:left;
	transition:transform 0.18s ease;
}
.rd-nav2-menu > li:hover > a{color:var(--rd-red) !important;}
.rd-nav2-menu > li.active > a,
.rd-nav2-menu > li.current-menu-item > a,
.rd-nav2-menu > li.current_page_item > a{color:var(--rd-red) !important;}
.rd-nav2-menu > li.active > a::after,
.rd-nav2-menu > li.current-menu-item > a::after,
.rd-nav2-menu > li.current_page_item > a::after{transform:scaleX(1);}

.rd-nav2-menu .caret{
	display:inline-block;
	width:6px;
	height:6px;
	border-right:1.5px solid currentColor;
	border-bottom:1.5px solid currentColor;
	transform:rotate(45deg);
	margin-top:-3px;
}

/* dropdown / mega-menu, reusing the same markup the theme's
   My_Custom_Nav_Walker already outputs (.dropdown/.dropdown-toggle/
   .dropdown-menu/.dropdown-submenu) — only restyled under rd-nav2-*. */
.rd-nav2-menu .dropdown-menu{
	position:absolute;
	top:100%;
	left:0;
	margin:12px 0 0;
	min-width:240px;
	background:var(--rd-paper);
	border:1px solid var(--rd-line);
	border-radius:10px;
	box-shadow:var(--rd-shadow-md);
	padding:8px;
	list-style:none;
	display:none;
	z-index:1100;
}
.rd-nav2-menu .dropdown-menu li{list-style:none;}
.rd-nav2-menu .dropdown-menu a{
	display:block;
	padding:9px 12px;
	border-radius:7px;
	font-family:'Nunito', sans-serif !important;
	font-weight:500 !important;
	font-size:0.87rem !important;
	letter-spacing:0 !important;
	text-transform:none !important;
	color:var(--rd-ink) !important;
	white-space:nowrap;
}
.rd-nav2-menu .dropdown-menu a::after{display:none;}
.rd-nav2-menu .dropdown-menu a:hover{background:var(--rd-paper-alt); color:var(--rd-red) !important;}
.rd-nav2-menu .dropdown-menu .dropdown-submenu{position:relative;}
.rd-nav2-menu .dropdown-menu .dropdown-submenu > a{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.rd-nav2-menu .dropdown-menu .dropdown-submenu > .dropdown-menu{top:-8px; left:100%; margin-left:6px;}

/* long lists (Service Areas mega-menu) auto-widen into columns via
   header.js, same approach as assets/js/redesign.js today. */
.rd-nav2-menu .dropdown-menu.wide{display:none; grid-auto-flow:column; grid-template-rows:repeat(var(--rd-rows, 6), auto); column-gap:6px; width:460px;}
.rd-nav2-menu .dropdown-menu.wider{display:grid; grid-auto-flow:column; grid-template-rows:repeat(var(--rd-rows, 7), auto); column-gap:6px; width:660px;}
.rd-nav2-menu .dropdown-menu.wide > li{width:50%; float:left;}

@media (min-width:992px){
	.rd-nav2-menu > li.dropdown:hover > .dropdown-menu{display:block;}
	.rd-nav2-menu .dropdown-submenu:hover > .dropdown-menu{display:block;}
}

/* hamburger — always in the DOM, only shown ≤991px, sits above the
   off-canvas panel so it stays clickable and can morph into a close icon. */
.rd-nav2-toggle{
	display:none;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:5px;
	width:42px;
	height:42px;
	padding:0;
	flex-shrink:0;
	background:transparent;
	border:1px solid var(--rd-line-strong);
	border-radius:8px;
	cursor:pointer;
	position:relative;
	z-index:1500;
}
.rd-nav2-toggle-bar{
	display:block;
	width:20px;
	height:2px;
	background:var(--rd-ink);
	border-radius:2px;
	transition:transform 0.2s ease, opacity 0.2s ease;
}
.rd-nav2-header.rd-nav2-menu-open .rd-nav2-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.rd-nav2-header.rd-nav2-menu-open .rd-nav2-toggle-bar:nth-child(2){opacity:0;}
.rd-nav2-header.rd-nav2-menu-open .rd-nav2-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.rd-nav2-backdrop{display:none;}

@media (max-width:991px){
	.rd-nav2-toggle{display:inline-flex;}

	.rd-nav2-nav{
		position:fixed;
		top:0;
		right:0;
		height:100vh;
		width:86%;
		max-width:340px;
		background:var(--rd-paper);
		z-index:1400;
		transform:translateX(100%);
		transition:transform 0.28s ease;
		overflow-y:auto;
		box-shadow:-14px 0 40px rgba(0,0,0,0.25);
		/* header fix 2026-07-29: the drawer opens under the toggle button, which
		   stays fixed in the header (it turns into the close "x"). With the
		   taller brand block the old 78px top padding put the SECOND menu item
		   right under that button and hid its dropdown chevron. */
		padding:158px 22px 32px;
	}
	.rd-nav2-header.rd-nav2-menu-open .rd-nav2-nav{transform:translateX(0);}

	.rd-nav2-backdrop{
		display:block;
		position:fixed;
		inset:0;
		background:rgba(0,0,0,0.5);
		z-index:1300;
		opacity:0;
		visibility:hidden;
		transition:opacity 0.25s ease;
	}
	.rd-nav2-header.rd-nav2-menu-open .rd-nav2-backdrop{opacity:1; visibility:visible;}

	.rd-nav2-menu{display:flex; flex-direction:column; align-items:stretch; gap:0; flex-wrap:nowrap;}
	.rd-nav2-menu > li{width:100%; border-bottom:1px solid var(--rd-line);}
	.rd-nav2-menu > li:last-child{border-bottom:0;}
	.rd-nav2-menu a{width:100%; padding-block:13px !important; justify-content:space-between;}
	.rd-nav2-menu > li > a::after{display:none;}

	.rd-nav2-menu .dropdown-toggle{width:100%; display:flex; justify-content:space-between; align-items:center;}
	.rd-nav2-menu .caret{transition:transform 0.2s ease;}
	.rd-nav2-menu li.rd-nav2-open > .dropdown-toggle .caret{transform:rotate(225deg);}

	.rd-nav2-menu .dropdown-menu{
		display:none;
		position:static;
		width:auto !important;
		box-shadow:none;
		border:0;
		border-radius:0;
		margin:0 0 4px;
		padding:0 0 0 14px;
		background:transparent;
	}
	/* .wide/.wider (desktop mega-menu columns, e.g. Service Areas) must not
	   leak into the mobile accordion: a column-flow grid scrambles the
	   parent/child reading order that indentation relies on here, so force
	   every dropdown back to a single linear column regardless of size. */
	.rd-nav2-menu .dropdown-menu.wide,
	.rd-nav2-menu .dropdown-menu.wider{
		display:none;
		grid-template-columns:none !important;
		grid-template-rows:none !important;
		grid-auto-flow:row !important;
		column-gap:0 !important;
		width:auto !important;
	}
	/* the desktop .wide variant also floats its <li>s into 2 columns
	   (width:50%; float:left) independently of the grid properties above —
	   has to be cancelled separately or items keep pairing up sideways. */
	.rd-nav2-menu .dropdown-menu.wide > li{width:100% !important; float:none !important;}
	.rd-nav2-menu li.rd-nav2-open > .dropdown-menu{display:block !important;}
	.rd-nav2-menu .dropdown-menu a{padding-block:10px !important;}
	.rd-nav2-menu .dropdown-menu .dropdown-submenu > .dropdown-menu{margin-left:12px;}
}