/*
Theme Name: CCH
Theme URI: https://carsoncustomhomes.com/
Description: Child theme of Twenty Twenty for Carson Custom Homes. Carries CCH custom page templates; all other styling inherits from Twenty Twenty.
Author: YD Web Design
Template: twentytwenty
Version: 1.2.1
License: GNU General Public License v2 or later
Text Domain: cch
*/

/* ============================================================
   CCH COLORS — edit the values below to recolor the site.
   These variables drive the header, footer, nav, and templates.
   ============================================================ */
:root {
	--cch-maroon: #800c32;
	--cch-deep-maroon: #4c0400;
	--cch-gold: #826b16;
	--cch-beige: #d7cfab;
	--cch-sand: #e8e0c9;
	--cch-charcoal: #1d1d1d;
	--cch-stone: #6b6250;
	--cch-white: #ffffff;
	--cch-nav-top: #2b2b2b;
	--cch-nav-top-hover: #800c32;
	--cch-nav-sub: #2b2b2b;
	--cch-nav-sub-hover: #800c32;
	--cch-page-bg: #ffffff;
	--cch-header-bg: #ffffff;
	--cch-footer-bg: #f2f2f2;
}

/* ---- page background (all templates) ---- */

body {
	background-color: var(--cch-page-bg);
}

/* ---- CCH canvas + full-width helpers (standalone, no Elementor) ---- */

body.cch-canvas {
	margin: 0;
	padding: 0;
	background-color: var(--cch-page-bg);
}

#cch-canvas-content {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.cch-fullwidth #site-content {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.cch-fullwidth .entry-content > *:not(.alignfull):not(.alignwide) {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* ---- Plain Page template ---- */

body.cch-plain {
	margin: 0;
	padding: 0;
	background-color: var(--cch-page-bg);
}

.cch-plain-title {
	background: #faf8f1;
	border-bottom: 1px solid var(--cch-sand);
	padding: 56px 24px;
	text-align: center;
}

.cch-plain-title h1 {
	margin: 0;
	font-size: 40px;
	line-height: 1.2;
	color: var(--cch-charcoal);
}

.cch-plain-featured img {
	width: 100%;
	height: auto;
	display: block;
}

.cch-plain-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 24px 64px;
}

/* ---- Gallery Template ---- */

body.cch-gallery {
	margin: 0;
	padding: 0;
	background-color: var(--cch-page-bg);
}

body.cch-gallery .container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

body.cch-gallery .container.smaller {
	max-width: 1080px;
}

.gallery-nav {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	padding: 36px 0 8px;
	margin: 0;
}

.gallery-nav li a {
	display: block;
	padding: 10px 20px;
	border: 1px solid var(--cch-sand);
	border-radius: 999px;
	color: var(--cch-charcoal);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	text-align: center;
	line-height: 1.4;
}

.gallery-nav li.active a,
.gallery-nav li a:hover {
	background: var(--cch-maroon);
	border-color: var(--cch-maroon);
	color: var(--cch-white);
}

.gallery-wrap {
	padding: 12px 0 64px;
}

.gallery-wrap .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -12px;
}

.gallery-wrap .row > [class*="col-"] {
	padding: 0 12px;
	box-sizing: border-box;
}

.gallery-wrap .col-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

@media (min-width: 768px) {
	.gallery-wrap .col-md-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

@media (min-width: 992px) {
	.gallery-wrap .col-lg-4 {
		flex: 0 0 33.333%;
		max-width: 33.333%;
	}
}

.single-gallery-type {
	margin-bottom: 60px;
}

.single-gallery-type h2 {
	text-align: center;
	color: var(--cch-charcoal);
	margin: 0 0 28px;
}

.single-gallery-grid {
	margin-bottom: 24px;
}

.single-gallery-grid a {
	text-decoration: none;
}

.single-gallery-grid .inner {
	position: relative;
	display: block;
	min-height: 280px;
	background-size: cover !important;
	background-position: center !important;
	border-radius: 10px;
	overflow: hidden;
}

.single-gallery-grid .h-info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 44px 18px 16px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
}

.single-gallery-grid .h-info h3 {
	color: var(--cch-white);
	margin: 0;
	font-size: 18px;
}

.gallery-wrap .btn-holder {
	text-align: center;
	margin-top: 12px;
}

.gallery-wrap .btn-holder .btn {
	display: inline-block;
	background: var(--cch-maroon);
	color: var(--cch-white) !important;
	padding: 13px 32px;
	border-radius: 7px;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.5px;
	font-size: 14px;
}

.gallery-wrap .btn-holder .btn:hover {
	background: var(--cch-deep-maroon);
}