/*
 * J.R.'s Custom Decks — site chrome.
 * Recreates the look of the custom-decks-jr theme (2015) plus UberMenu, measured from the
 * live site on 2026-11-05, on WW Business Priority markup. Loaded after main.css.
 * Bump WW_BP_VERSION in functions.php with every change so browsers fetch the new file.
 */

:root {
	--cd-maroon: #7a0026;
	--cd-maroon-dark: #5e0004;
	--cd-green: #095505;
	--cd-link: #009900;
	--cd-text: #000;      /* body copy: black for readability (Garth, 2026-11-05) */
	--cd-heading: #7a0026; /* H1 colour as Garth reviewed it (maroon, 2026-11-05) */
	--cd-wrap: 1024px;
	--cd-head: "Oswald", "Arial Narrow", sans-serif;
	--cd-body: "Open Sans", Helvetica, Arial, sans-serif;
}

/* ── Page frame ─────────────────────────────────────────────── */
body {
	background-color: var(--cd-green);
	color: var(--cd-text);
	font-family: var(--cd-body);
	font-size: 14px;
	line-height: 1.5;
}
.ww-site { background: transparent; }
.cd-wrap {
	max-width: var(--cd-wrap);
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.cd-content {
	background: #fff;
	max-width: var(--cd-wrap);
	margin: 0 auto;
	min-height: 500px;
	padding: 70px 20px 1px;
	box-sizing: border-box;
}
body.home .cd-content, body.wwcd-has-hero .cd-content { padding-top: 0; }
body.home .cd-content .ww-page-content, body.wwcd-has-hero .cd-content .ww-page-content { padding-top: 0; } /* no gap under the header rail */
.cd-content .ww-container,
.cd-content .ww-content-inner { max-width: none; padding-left: 0; padding-right: 0; }

/* Skip link */
.skip-link.screen-reader-text:focus {
	clip: auto; height: auto; width: auto; position: fixed; top: 8px; left: 8px; z-index: 100000;
	background: #fff; color: var(--cd-maroon); padding: 10px 14px; font-weight: 700;
}

/* ── Typography ─────────────────────────────────────────────── */
.ww-site .cd-content h1, .ww-site .cd-content h2, .ww-site .cd-content h3, .ww-site .cd-content h4, .ww-site .cd-content h5, .ww-site .cd-content h6 {
	font-family: var(--cd-head);
	letter-spacing: normal;
	text-transform: none;
	margin: 0 0 .5em;
}
.ww-site .cd-content h1,
.ww-site .cd-content h2.cd-h1-style,
body.ww-layout-one .ww-site .cd-content h1,
body.ww-layout-one .ww-site .cd-content .wpb_wrapper h1,
body.ww-layout-one .ww-site .cd-content .wpb_wrapper h2.cd-h1-style { font-size: 30px; font-weight: 400; line-height: 30px; margin-bottom: 0; color: var(--cd-heading) !important; } /* theme main.css forces heading colours with !important; H1 and former H1s must match. 30/30, no bottom margin = live. */
.ww-site .cd-content h2 { font-size: 26px; font-weight: 300; line-height: 1.2; color: var(--cd-green); }
/* H3 sub-headings: Oswald Light 24/38.4, dark green, 10px below — measured from live (the theme forces Colour C). */
.ww-site .cd-content h3,
body.ww-layout-one .ww-site .cd-content .wpb_wrapper h3 { font-size: 24px; font-weight: 300; line-height: 1.3; padding: 3.6px 0; margin: 0 0 10px; text-wrap: balance; color: var(--cd-green) !important; }
/* Body copy: 14px on a 1.3 line, as live (looser spacing read as lighter). */
.ww-site .cd-content p, .ww-site .cd-content li { font-size: 14px; line-height: 1.3; color: var(--cd-text); }
.cd-content p { margin: 0 0 1em; }
.cd-content a { color: var(--cd-link); }
.cd-content a:hover { color: var(--cd-green); }
.ww-site .cd-content .wpb_text_column, .ww-site .cd-content .entry-content { color: var(--cd-text); }

/* WordPress image alignment (the old theme styled these; content uses them, e.g. Build it Right). */
.cd-content .alignright, .cd-content img.alignright, .cd-content .wp-caption.alignright { float: right; margin: 4px 0 15px 20px; }
.cd-content .alignleft, .cd-content img.alignleft, .cd-content .wp-caption.alignleft { float: left; margin: 4px 20px 15px 0; }
.cd-content .aligncenter, .cd-content img.aligncenter { display: block; margin: 10px auto 15px; }
.cd-content img.alignright, .cd-content img.alignleft, .cd-content img.aligncenter { max-width: 100%; height: auto; }
.cd-content .wp-caption { max-width: 100%; }
.cd-content .wp-caption-text { font-size: 12px; text-align: center; margin: 4px 0 0; }
/* Floats must flow into the following text blocks (as on live), so only the whole row clears. */
.cd-content .vc_row::after { content: ""; display: table; clear: both; }
@media (max-width: 600px) {
	.cd-content .alignright, .cd-content .alignleft, .cd-content img.alignright, .cd-content img.alignleft { float: none; display: block; margin: 10px auto 15px; }
}

/* WW Rate (Rate page): Custom Decks maroon instead of Stomp & Play orange. */
.ww-rate { --ww-rate-accent: var(--cd-maroon); }
.ww-rate .ww-rate-send:hover, .ww-rate .ww-rate-send:focus-visible { background: var(--cd-green); }

/* Project pages: room between the H1 and the main photo. */
.single-wwcd_project .entry-header { margin-bottom: 18px; }

/* Buttons (replace Ultimate VC Addons "See Gallery" buttons: maroon, white bold 16px, photo icon). */
.ww-site .cd-content a.cd-btn {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--cd-maroon); color: #fff; text-decoration: none;
	font-weight: 700; font-size: 16px; line-height: 1.2;
	padding: 8px 14px; border-radius: 3px; transition: background .2s ease;
}
.ww-site .cd-content a.cd-btn:hover, .ww-site .cd-content a.cd-btn:focus-visible { background: var(--cd-green); color: #fff; }
.ww-site .cd-content a.cd-btn--gallery::after {
	content: ""; width: 22px; height: 22px; flex: 0 0 22px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 5v14H3V5h18m0-2H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-7.1 9.3-2.8 3.6-2-2.4L6 17h12l-4.1-4.7zM8.5 10A1.5 1.5 0 1 0 8.5 7a1.5 1.5 0 0 0 0 3z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 5v14H3V5h18m0-2H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-7.1 9.3-2.8 3.6-2-2.4L6 17h12l-4.1-4.7zM8.5 10A1.5 1.5 0 1 0 8.5 7a1.5 1.5 0 0 0 0 3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Gallery numbering "#1 - Title" so Jose can tell which project a caller means (from the old theme).
   Numbers shift when items are added — accepted (Garth, 2026-11-05). Restarts in each gallery.
   Applies to the Huge-IT gallery until the Projects grid replaces it. */
.ww-site [id^="huge_it_portfolio_container"],
.ww-site [id^="huge_it_portfolio_content"] { counter-reset: portfolioIndex; }
.ww-site div[class*="portelement_"] { counter-increment: portfolioIndex; }
.ww-site div[class*="portelement_"] div[class*="title-block_"] h3::before { content: "#" counter(portfolioIndex) " - "; }
.ww-site .cd-content div[class*="title-block_"] h3,
body.ww-layout-one .ww-site .cd-content div[class*="title-block_"] h3 { font-size: 18px; line-height: 22px; font-weight: 400; margin: 0; color: #009900 !important; } /* Garth prefers this green for project titles */

/* ── Header ─────────────────────────────────────────────────── */
.cd-header {
	background: var(--cd-maroon) url(/wp-content/uploads/2015/09/top-header.jpg) repeat-x center top;
	color: #fff;
	padding-top: 15px;
	position: relative;
	z-index: 50;
}
.cd-header-inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	max-width: var(--cd-wrap);
	margin: 0 auto;
}
.cd-logo { flex: 0 1 337px; text-align: center; font-size: 15px; }
.cd-logo img { display: block; width: 100%; max-width: 337px; height: auto; }
.cd-site-title { font-family: var(--cd-head); font-size: 32px; color: #fff; }
.cd-tagline { margin: 0 0 6px; color: #fff; font-size: 15px; }
.cd-header-content { flex: 1 1 65%; text-align: right; }
.cd-phone-line {
	font-size: 28px; font-weight: 600; line-height: 1; margin: 0 0 5px;
	text-shadow: 0 2px 4px #000;
}
.cd-phone-line a { color: inherit; text-decoration: none; }
.cd-quote-line { font-size: 16px; margin: 0 0 8px; text-shadow: 0 2px 4px #000; }

/* Primary menu bar (replaces UberMenu) */
.cd-primary-nav .cd-menu { list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; flex-wrap: wrap; position: relative; }
.cd-primary-nav .cd-menu > li { position: static; }
.cd-primary-nav .cd-menu > li + li::before {
	content: "·"; color: #fff; font-family: var(--cd-head); font-size: 28px; line-height: 39px; padding: 0 2px;
	float: left;
}
.cd-primary-nav .cd-menu > li > a {
	display: inline-block;
	font-family: var(--cd-head);
	font-size: 28px;
	line-height: 39px;
	font-weight: 400;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	padding: 0 10px 6px;
	text-shadow: #8f2400 0 -1px 1px;
}
/* Hovered top item becomes a light tab joined to its panel (UberMenu look). */
.cd-primary-nav .cd-menu > li.menu-item-has-children:hover > a,
.cd-primary-nav .cd-menu > li.menu-item-has-children:focus-within > a {
	background: linear-gradient(#e9e9e9, #f9f9f9);
	color: var(--cd-maroon);
	text-shadow: none;
	position: relative; z-index: 61;
}
.cd-primary-nav .cd-menu > li:not(.menu-item-has-children) > a:hover { color: #ffe8a8; }
/* Panel: 641px, light grey, photo anchored bottom-right, measured from live. */
.cd-primary-nav .sub-menu {
	list-style: none; margin: 0; padding: 6px 0 12px;
	position: absolute; right: 0; top: 100%;
	width: 641px; max-width: calc(100vw - 40px); min-height: 273px;
	box-sizing: border-box;
	background: #f8f8f8 no-repeat 100% 100%;
	box-shadow: 1px 1px 1px #ddd, 0 8px 18px rgba(0, 0, 0, .18);
	text-align: left;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
	z-index: 60;
}
/* Panel photos are tied to the menu item (not its position), so adding a top item doesn't shuffle them. */
.cd-primary-nav .cd-menu > li.menu-item-18 > .sub-menu { background-image: url(/wp-content/uploads/2015/10/menu-background2.png); }
.cd-primary-nav .cd-menu > li.menu-item-16 > .sub-menu { background-image: url(/wp-content/uploads/2015/10/menu-background3.png); }
.cd-primary-nav .cd-menu > li.menu-item-17 > .sub-menu { background-image: url(/wp-content/uploads/2015/10/menu-background1.png); }
/* "Your Project" (menu class cd-menu-project): a project photo feathered top and left like the 2015 panel art. */
.cd-primary-nav .cd-menu > li.cd-menu-project > .sub-menu {
	background-image:
		linear-gradient(to right, #f8f8f8 0, rgba(248, 248, 248, 0) 38%),
		linear-gradient(to bottom, #f8f8f8 0, rgba(248, 248, 248, 0) 32%),
		url(/wp-content/uploads/2024/06/Trex-Composite-Custom-Deck-Spring-Branch-Texas-After_01.jpg);
	background-size: 420px 280px, 420px 280px, 420px 280px;
	background-position: 100% 100%, 100% 100%, 100% 100%;
	background-repeat: no-repeat;
	min-height: 300px;
}
.cd-primary-nav .cd-menu > li:hover > .sub-menu,
.cd-primary-nav .cd-menu > li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.cd-primary-nav .sub-menu li { max-width: 45%; }
.cd-primary-nav .sub-menu a {
	display: block;
	padding: 6px 20px 6px 15px;
	font-family: var(--cd-head);
	font-size: 16px; line-height: 22px; font-weight: 700;
	text-transform: uppercase;
	color: var(--cd-maroon);
	text-decoration: none;
	/* White outline so items stay readable over the panel photo (as UberMenu, but stronger). */
	text-shadow: 0 1px 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 1px 0 2px #fff, -1px 0 2px #fff;
}
.cd-primary-nav .sub-menu a:hover { color: var(--cd-green); }

/* "Call Me" pull-tab under the header (opens the Popup Maker form) */
.cd-callme-wrap { position: relative; height: 0; z-index: 40; }
.cd-callme {
	position: absolute; left: 20px; top: 0;
	background: linear-gradient(#7a0026 49%, #5e0004 57%);
	border-top: 1px solid #5e0004; border-radius: 0 0 5px 5px;
	color: #fff; text-decoration: none; text-transform: uppercase;
	font-family: var(--cd-head); font-size: 22px; line-height: 1.6;
	padding: 2px 14px 2px 38px;
	background-image: url(/wp-content/uploads/2015/09/phone1.png), linear-gradient(#7a0026 49%, #5e0004 57%);
	background-repeat: no-repeat; background-position: 12px center, 0 0;
}
.cd-callme:hover, .cd-callme:focus-visible { color: #ffe8a8; }

/* Phone-only call button and hamburger, hidden on desktop */
.cd-header-call, .cd-header .ww-hamburger-btn { display: none; }

/* Mobile slide-out panel (theme JS) */
.ww-mobile-menu { background: var(--cd-maroon); }
.ww-mobile-menu .ww-mobile-nav a,
.ww-mobile-menu .ww-mobile-nav .sub-menu a { color: #fff; opacity: 1; font-family: var(--cd-head); text-transform: uppercase; }
.ww-mobile-menu .ww-mobile-nav li { border-color: rgba(255, 255, 255, .35); }
.cd-mobile-phones { padding: 16px 20px; margin: 0; font-family: var(--cd-head); font-size: 20px; }
.cd-mobile-phones a { color: #fff; text-decoration: none; }

/* ── Footer ─────────────────────────────────────────────────── */
.cd-badges { background: #fff; padding-bottom: 20px; text-align: center; }
.cd-footer {
	clear: both;
	background: url(/wp-content/uploads/2015/09/footer-background.jpg) repeat center top;
	text-align: center;
	color: #fff;
	font-size: 17px;
}
.cd-footer a { color: #fff; text-decoration: none; }
.cd-footer a:hover { text-decoration: underline; }
.cd-footer-quote { background: var(--cd-maroon); padding: 15px 0; }
.cd-footer-quote p { margin: 0; font-family: var(--cd-head); font-size: 28px; font-weight: 400; line-height: 1.2; }
.cd-footer-main { padding-top: 24px; padding-bottom: 10px; }
.cd-footer-call { font-family: var(--cd-head); font-size: 28px; margin: 0 0 20px; line-height: 1.2; }
.cd-copyright { margin: 0 0 20px; }
.cd-footer-menu ul { list-style: none; margin: 0 0 20px; padding: 0; line-height: 1.5; }
.cd-footer-menu li { display: inline; }
.cd-footer-menu li + li::before { content: "|"; padding: 0 6px; opacity: .8; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.cd-phone-line { font-size: 22px; }
	.cd-quote-line { font-size: 14px; text-wrap: balance; }
	.cd-tagline { font-size: 12px; white-space: nowrap; } /* no orphaned "1990" on tablets */
	.cd-primary-nav .cd-menu > li > a { font-size: 22px; padding: 0 6px 6px; }
	.cd-primary-nav .cd-menu > li + li::before { font-size: 22px; }
}
@media (max-width: 767px) {
	.cd-header { padding: 10px 0; }
	.cd-header-inner { align-items: center; }
	.cd-logo { flex: 1 1 auto; max-width: 220px; }
	.cd-header-content { display: none; }
	.cd-header-call {
		display: inline-block; flex: 0 0 auto;
		background: linear-gradient(#7a0026 49%, #5e0004 57%);
		border: 1px solid rgba(255, 255, 255, .5); border-radius: 5px;
		color: #fff; font-family: var(--cd-head); font-size: 18px; text-transform: uppercase;
		padding: 6px 14px; text-decoration: none;
	}
	.cd-header .cd-header-call:hover,
	.cd-header .cd-header-call:focus,
	.cd-header .cd-header-call:active { color: #fff; background: #095505; } /* text stays white on rollover */
	.cd-tagline { display: none; }
	.cd-header .ww-hamburger-btn {
		display: flex; flex-direction: column; justify-content: center; gap: 6px;
		position: static; flex: 0 0 44px; width: 44px; height: 44px; padding: 8px;
		background: transparent; border: 0; cursor: pointer;
	}
	.cd-header .ww-hamburger-btn span {
		display: block; position: static; width: 28px; height: 3px; margin: 0;
		background: #fff; border-radius: 2px; transform: none; opacity: 1;
	}
	.cd-content { padding-top: 30px; }
	.cd-footer-quote p, .cd-footer-call { font-size: 22px; }
}