/* ==========================================================================
   SELF BUILD HOMES - CUSTOM STYLESHEET
   Wyedean Websites
   --------------------------------------------------------------------------
   Table of contents:
   1. Variables / notes
   2. Header - top logo bar
   3. Header - photo strip
   4. Header - navigation
   5. Footer
   6. Sidebar / boxes (glossary, stamp duty, etc.)
   7. Utilities / responsive
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Variables / notes
   Divi doesn't support CSS custom properties in the builder UI itself,
   but they work fine here since this is a real stylesheet. Use them to
   keep the orange/brown palette consistent across sections.
-------------------------------------------------------------------------- */
:root {
	--sbh-orange: #cc6600;
	--sbh-orange-dark: #a35200;
	--sbh-dark-nav: #2b2b2b;
	--sbh-dark-nav-hover: #444444;
	--sbh-footer-bg: #1a1a1a;
	--sbh-text-muted: #999999;
	--sbh-red-link: #cc3300;
}


/* --------------------------------------------------------------------------
   2. Header - top logo bar
-------------------------------------------------------------------------- */
.sbh-topbar {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
}

.sbh-logo {
	background: #ffffff;
	flex: 0 0 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sbh-logo a {
	color: var(--sbh-red-link);
	font-weight: bold;
	font-size: 14px;
	text-decoration: none;
}

.sbh-banner {
	flex: 1;
	background: linear-gradient(90deg, #e67e22, var(--sbh-orange-dark));
	display: flex;
	align-items: center;
	padding-left: 20px;
}

.sbh-banner-text {
	color: #ffffff;
	font-weight: bold;
	font-size: 16px;
}


/* --------------------------------------------------------------------------
   3. Header - photo strip (5 image row)
-------------------------------------------------------------------------- */
.sbh-header-strip {
	display: flex;
	border-top: 6px solid var(--sbh-orange);
	border-bottom: 6px solid var(--sbh-orange);
}

.sbh-header-strip .et_pb_column {
	padding: 0 !important;
	margin: 0 !important;
}

.sbh-header-strip .et_pb_image {
	margin: 0;
	line-height: 0;
}

.sbh-header-strip .et_pb_image img {
	width: 100%;
	height: 180px; /* adjust to match final source images */
	object-fit: cover;
	display: block;
}


/* --------------------------------------------------------------------------
   4. Header - navigation
-------------------------------------------------------------------------- */
.sbh-nav .et_pb_menu__wrap {
	background: var(--sbh-dark-nav);
}

.sbh-nav .et-menu > li > a {
	color: #ffffff;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 12px;
	padding: 14px 18px;
}

.sbh-nav .et-menu > li > a:hover {
	background: var(--sbh-dark-nav-hover);
}


/* --------------------------------------------------------------------------
   5. Footer
-------------------------------------------------------------------------- */
.sbh-footer {
	background: var(--sbh-footer-bg);
	text-align: center;
	padding: 20px 0;
}

.sbh-social a {
	color: #cccccc;
	margin: 0 8px;
	font-size: 18px;
}

.sbh-copyright {
	color: var(--sbh-text-muted);
	font-size: 11px;
	margin-top: 10px;
}

.sbh-copyright a {
	color: #cccccc;
	text-decoration: none;
	margin-right: 6px;
}


/* --------------------------------------------------------------------------
   6. Sidebar / boxes
   (Glossary box, Stamp Duty box, Architect's Certificate box etc.
   Fill in as you rebuild the sidebar - placeholders below.)
-------------------------------------------------------------------------- */
.sbh-sidebar-box {
	border: 1px solid #dddddd;
	padding: 15px;
	margin-bottom: 20px;
}

.sbh-sidebar-box h4 {
	color: var(--sbh-red-link);
	margin-top: 0;
}


/* --------------------------------------------------------------------------
   7. Utilities / responsive
-------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.sbh-header-strip {
		flex-wrap: wrap;
	}
	.sbh-header-strip .et_pb_column {
		flex: 0 0 50%;
	}
}

@media (max-width: 767px) {
	.sbh-topbar {
		flex-direction: column;
	}
	.sbh-header-strip .et_pb_column {
		flex: 0 0 100%;
	}
}