/*
Theme Name: Divi Child - Self Build Homes
Theme URI: https://wyedeanwebsites.co.uk
Description: Child theme for Divi, built for selfbuild-homes.com rebuild
Author: Ross Easterbrook / Wyedean Websites
Author URI: https://wyedeanwebsites.co.uk
Template: Divi
Version: 1.0.0
Text Domain: sbh-divi-child
*/

/*
This file intentionally left mostly empty.
All actual site CSS lives in /assets/css/custom.css
which is enqueued separately in functions.php (see comments there for why).
*/

html, body {
        color: rgb(51, 51, 51);
}


/* --------------------------------------------------------------------------
   Site-wide heading font sizes
-------------------------------------------------------------------------- */
h1 {
	font-size: 42px !important;
}
h2 {
	font-size: 34px !important;
}
h3 {
	font-size: 26px !important;
}
h4 {
	font-size: 20px !important;
}

.sbh-topbar {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1124px;
  margin: 0 auto;
  background-color: rgb(245, 242, 242);
  padding: 5px;
}
.sbh-logo {
  background: transparent;

    flex: 1;
    display: flex;
    align-items: start;
    justify-content: start;

}
.sbh-logo a {
  color: #000;
  font-weight: normal;
  font-size: 10px!important;
  text-decoration: none;
  font-style: italic;
  letter-spacing: 2px;
}
.sbh-logo a span{

  font-size: 12px!important;

}
.sbh-banner {
  flex: 1;
  background: linear-gradient(90deg, #e67e22, #d35400);
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.sbh-banner-text {
  color: #fff;
  font-weight: bold;
  font-size: 16px;
}
@media (max-width: 767px) {
  .sbh-topbar { flex-direction: column; }
}

.sbh-nav .et_pb_menu__wrap { background: #2b2b2b; }
.sbh-nav .et-menu > li > a {
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  padding: 14px 18px;
}
.sbh-nav .et-menu > li > a:hover {
  background: #444;
}

.sbh-header-strip {
  display: flex;
  border-top: 6px solid #cc6600;
  border-bottom: 6px solid #cc6600;
  border-color: rgb(204, 204, 204)!important;
}
.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;       /* match your strip's height */
  object-fit: cover;
  display: block;
}

.sbh-header-strip .main-logo img {
  width: auto;
  height: auto;    
  max-height: 150px;  /* match your strip's height */
}

.main-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.sbh-header-strip .et_pb_image .et_pb_image_wrap {
   
    width: 100%;
}

.sbh-header-strip .sbh-header-strip.et_pb_equal_columns.et_pb_gutters1.et_pb_row_5col {
	display:flex;
    flex-wrap: wrap;
}

.sbh-header-strip .et_pb_column {
	width:15%!important;
    flex: 1 0 15%;
}

.sbh-logo {
    max-height: 50px;
}

.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li {
    margin-top: 0px;
}


.sbh-chapter {
  margin-bottom: 25px;
  border: 1px solid #e0d8cc;
}
.sbh-chapter-bar {
  background: #c9b38c;
  padding: 8px 15px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.sbh-chapter-num {
  font-weight: bold;
  color: #333;
}
.sbh-chapter-extra {
  font-style: italic;
  color: #6b3fa0;
  font-weight: bold;
}
.sbh-chapter-title {
  font-weight: bold;
  color: #333;
}
.sbh-chapter-body {
  background: #fdfaf5;
}
.sbh-chapter-row {
  padding: 8px 15px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}
.sbh-chapter-row:last-child { border-bottom: none; }
.sbh-chapter-row a {
  color: #2a4b8d;
  text-decoration: none;
}
.sbh-chapter-row a:hover { text-decoration: underline; }
.sbh-chapter-row img {
  max-height: 60px;
  margin-left: auto;
}


.sbh-find-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 20px 0;
}
.sbh-btn {
  display: block;
  text-align: center;
  padding: 10px 5px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  font-size: 13px;
  border-radius: 2px;
}
.sbh-btn span { font-weight: normal; font-size: 11px; display: block; }
.sbh-btn-red { background: #cc3300; }
.sbh-btn-green { background: #2e7d32; }
.sbh-btn-yellow { background: #d9a017; }
@media (max-width: 600px) {
  .sbh-find-grid { grid-template-columns: repeat(2, 1fr); }
}



/* ==========================================================================
   ADD-ON: Home page content styling
   Append this block to the existing custom.css from the child theme.
   Targets the module_class names added to the home page shortcode.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Chapter bars & bodies
-------------------------------------------------------------------------- */
.sbh-chapter-bar {
	border-radius: 3px 3px 0 0;
	margin-bottom: 0 !important;
}
.sbh-chapter-bar p {
	margin: 0;
	padding: 4px 0;
}
.sbh-chapter-bar strong:first-child {
	margin-right: 10px;
}
.sbh-chapter-bar em {
	color: #6b3fa0;
	margin-right: 10px;
}

.sbh-chapter-body {
	border: 1px solid #e0d8cc;
	border-top: none;
	border-radius: 0 0 3px 3px;
	margin-top: 0 !important;
	margin-bottom: 25px !important;
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}
.sbh-chapter-body p {
	margin: 6px 0;
	padding: 4px 0;
	border-bottom: 1px solid #f0f0f0;
}
.sbh-chapter-body p:last-child {
	border-bottom: none;
}
.sbh-chapter-body a {
	color: #2a4b8d;
	text-decoration: none;
}
.sbh-chapter-body a:hover {
	text-decoration: underline;
}


/* --------------------------------------------------------------------------
   FIND the right local - chip-style links
-------------------------------------------------------------------------- */



.sbh-find-links p {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0;

}

.sbh-find-links p > a{
	max-width: 40%;
    width: 40%;

}
.sbh-chip {
	display: inline-block;
	padding: 10px 14px;
	color: #ffffff !important;
	font-weight: bold;
	text-decoration: none !important;
	border-radius: 3px;
	font-size: 13px;
	flex: 1 1 auto;
	text-align: center;
    width:25%;
    max-width: 25%;
    justify-content: center;
    align-items: center;
}
.sbh-chip:hover {
	opacity: 0.85;
}
.sbh-chip-red { background: #cc3300; }
.sbh-chip-green { background: #2e7d32; }
.sbh-chip-yellow { background: #d9a017; }

@media (max-width: 600px) {
	.sbh-find-links p {
		flex-direction: column;
	}
}


/* --------------------------------------------------------------------------
   Sidebar boxes (rightsurvey, insulation calc, glossary, stamp duty, arch cert)
-------------------------------------------------------------------------- */
.sbh-sidebar-box {
	border-radius: 4px;
	padding: 12px 15px !important;
	margin-bottom: 15px !important;
}
.sbh-sidebar-box h4 {
	margin-top: 0;
	font-size: 15px;
}
.sbh-sidebar-box p {
	margin-bottom: 0;
	font-size: 13px;
}
.sbh-sidebar-box-dark a,
.sbh-sidebar-box-dark p {
	color: #ffffff;
}


/* --------------------------------------------------------------------------
   Home page - larger font sizes
-------------------------------------------------------------------------- */
.sbh-chapter-bar p {
	font-size: 16px;
}
.sbh-chapter-body p {
	font-size: 15px;
}
.sbh-chip {
	font-size: 15px;
}
.sbh-sidebar-box p {
	font-size: 14px;
}
.sbh-sidebar-box h4 {
	font-size: 17px;
}

a, abbr, acronym, address, applet, b, big, blockquote, body, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, tt, u, ul, var {
    font-size: 17px;
}


.et_pb_row {
    max-width: 1124px;
}




/* ==========================================================================
   ADD-ON: Features page styling
   Append to custom.css
   ========================================================================== */

/* Data tables (e.g. electricity usage breakdown) */
.sbh-data-table table {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0 20px;
}
.sbh-data-table th,
.sbh-data-table td {
	padding: 8px 12px;
	border: 1px solid #ddd;
	text-align: left;
}
.sbh-data-table th {
	background: #f0ebe0;
	font-weight: bold;
}
.sbh-data-table tr:nth-child(even) td {
	background: #fafafa;
}

/* "Find the right..." orange sidebar box */
.sbh-orange-sidebar {
	border-radius: 4px;
	padding: 15px !important;
}
.sbh-orange-sidebar hr {
	margin: 12px 0;
	border-width: 1px 0 0 0;
}
.sbh-orange-sidebar p {
	margin: 8px 0;
	font-size: 14px;
	line-height: 1.6;
}

/* Anchor-jump section headings - small offset so fixed header (if any) doesn't overlap the heading */
h3[id], h4[id] {
	scroll-margin-top: 90px;
}



/* ==========================================================================
   ADD-ON: Planning page styling
   Append to custom.css
   ========================================================================== */

/* Design & Access Statement - converted from old layout table to cards */
.sbh-form-wrapper,
.sbh-form-section {
	border: 1px solid #e0dba0;
	border-radius: 4px;
	padding: 15px 20px !important;
	margin-bottom: 12px !important;
}
.sbh-form-wrapper p:last-child,
.sbh-form-section p:last-child {
	margin-bottom: 0;
}
.sbh-form-section p:first-child strong {
	color: #2a4b8d;
	font-size: 16px;
}
.sbh-form-wrapper strong {
	display: inline-block;
	min-width: 90px;
}

/* Sample forms numbered list */
.sbh-forms-list p {
	margin-bottom: 14px;
}
.sbh-forms-list strong {
	color: #2a4b8d;
	margin-right: 6px;
}

/* ==========================================================================
   ADD-ON: Planning page styling
   Append to custom.css
   ========================================================================== */

/* Design & Access Statement - converted from old layout table to cards */
.sbh-form-wrapper,
.sbh-form-section {
	border: 1px solid #e0dba0;
	border-radius: 4px;
	padding: 15px 20px !important;
	margin-bottom: 12px !important;
}
.sbh-form-wrapper p:last-child,
.sbh-form-section p:last-child {
	margin-bottom: 0;
}
.sbh-form-section p:first-child strong {
	color: #2a4b8d;
	font-size: 16px;
}
.sbh-form-wrapper strong {
	display: inline-block;
	min-width: 90px;
}

/* Sample forms numbered list */
.sbh-forms-list p {
	margin-bottom: 14px;
}
.sbh-forms-list strong {
	color: #2a4b8d;
	margin-right: 6px;
}

/* --------------------------------------------------------------------------
   Reliability fix: force background/text colour via CSS class rather than
   relying on Divi's native background_color/text_text_color shortcode
   attributes, since those can fail to generate correctly when content is
   inserted directly into the database rather than saved via the Builder UI.
-------------------------------------------------------------------------- */
.sbh-orange-sidebar {
	background-color: #e8792e !important;
	color: #ffffff !important;
}
.sbh-orange-sidebar a {
	color: #ffffff !important;
}

/* Same fix for the cream Design & Access Statement cards */
.sbh-form-wrapper,
.sbh-form-section {
	background-color: #fbfae0 !important;
}



/* ==========================================================================
   ADD-ON: Building Regs page styling
   Append to custom.css
   All colours applied via class + !important, not native Divi attributes,
   for reliability when content is inserted directly into the database.
   ========================================================================== */

/* PDF download rows */
.sbh-pdf-row p {
	display: flex;
	align-items: center;
	gap: 10px;
}
.sbh-pdf-badge {
	display: inline-block;
	background-color: #cc3300 !important;
	color: #ffffff !important;
	font-size: 10px;
	font-weight: bold;
	padding: 4px 6px;
	border-radius: 3px;
	flex-shrink: 0;
}

/* Building Regs Parts list */
.sbh-parts-list .sbh-part-row {
	padding: 6px 0;
	border-bottom: 1px solid #f0f0f0;
}
.sbh-parts-list .sbh-part-label {
	display: inline-block;
	min-width: 90px;
	font-weight: bold;
	color: #2a4b8d !important;
}
.sbh-parts-list a {
	color: #2a4b8d !important;
}

/* Orange "Find the right..." sidebar - reused across pages */
.sbh-orange-sidebar {
	background-color: #e8792e !important;
	color: #ffffff !important;
	border-radius: 4px;
	padding: 15px !important;
}
.sbh-orange-sidebar h4 {
	color: #ffffff !important;
}
.sbh-orange-sidebar a,
.sbh-orange-sidebar a strong {
	color: #ffffff !important;
}
.sbh-orange-sidebar hr {
	border-color: rgba(255,255,255,0.3) !important;
	margin: 12px 0;
}
.sbh-orange-sidebar p {
	margin: 8px 0;
	font-size: 14px;
	line-height: 1.6;
}



/* ==========================================================================
   ADD-ON: Useful Links page styling
   Append to custom.css
   ========================================================================== */

.sbh-centered-links p {
	text-align: center;
	margin: 8px 0;
}
.sbh-centered-links a {
	color: #2a4b8d !important;
}

.sbh-indent-links {
	padding-left: 20px;
}
.sbh-indent-links a {
	color: #2a4b8d !important;
}


/* ==========================================================================
   ADD-ON: Sample Documents page styling
   Append to custom.css
   Reuses .sbh-pdf-row / .sbh-pdf-badge already defined for the Building
   Regs page - only add the rules below if you haven't already.
   ========================================================================== */

.sbh-blue-text p {
	color: #2a4b8d;
}

.sbh-filesize {
	color: #888;
	font-size: 12px;
	margin-left: 6px;
}

.sbh-pdf-row-disabled p {
	color: #999;
}
.sbh-pdf-row-disabled .sbh-pdf-badge {
	background-color: #999 !important;
}

/* In case .sbh-pdf-row / .sbh-pdf-badge / .sbh-orange-sidebar-empty
   are not yet in custom.css from earlier pages, here they are again: */
.sbh-pdf-row p {
	display: flex;
	align-items: center;
	gap: 10px;
}
.sbh-pdf-badge {
	display: inline-block;
	background-color: #cc3300 !important;
	color: #ffffff !important;
	font-size: 10px;
	font-weight: bold;
	padding: 4px 6px;
	border-radius: 3px;
	flex-shrink: 0;
}
.sbh-orange-sidebar-empty {
	background-color: #e8792e !important;
	min-height: 100%;
}



/* ==========================================================================
   ADD-ON: Selfbuild Costs page styling
   Append to custom.css
   ========================================================================== */

.sbh-cost-bar p {
	background-color: #1a1a6e !important;
	color: #ffffff !important;
	padding: 10px 15px;
	margin: 0 !important;
	font-weight: bold;
	font-size: 16px;
	border-radius: 3px 3px 0 0;
}

.sbh-cost-table table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 20px;
}
.sbh-cost-table td {
	padding: 8px 15px;
	border: 1px solid #ddd;
	vertical-align: top;
}
.sbh-cost-table td:first-child {
	width: 45%;
}
.sbh-cost-table tr:nth-child(even) td {
	background: #fafafa;
}
.sbh-cost-table ul {
	margin: 4px 0;
	padding-left: 18px;
}
.sbh-cost-table td.sbh-indent {
	padding-left: 35px;
	font-style: italic;
}

@media (max-width: 980px) {
	header .et_pb_section_0_tb_header {
		display: flex;
		flex-wrap: wrap;

	}

	header.et-l--header .et_pb_row_0_tb_header:nth-child(1) {
		order: 1;
	}
	header.et-l--header .sbh-header-strip {
		order: 3;
	}
	header.et-l--header .et_pb_row--with-menu {
		order: 2;
	}

	header.et-l--header .sbh-header-strip img{
		max-height: 160px;
		width: 100%;
	}

	header.et-l--header .sbh-header-strip .main-logo img{
		width: auto;
	}

}

@media (max-width: 579px) {


	header.et-l--header .sbh-header-strip img{
		max-height: 100px;
	}

}

.et_mobile_nav_menu:before {
    content: "MENU";
    /* Optional styling */
    font-size: 14px;
    color: #fff;
    margin-right: 5px;
	padding-top:2px;
}



/* ==========================================================================
   ADD-ON: DecoHouse.co.uk homepage styling
   Append to custom.css
   Reuses .sbh-find-links / .sbh-chip / .sbh-chip-red/green/yellow from the
   selfbuild-homes.com build - only the .dh- classes below are new.
   ========================================================================== */

.dh-sidebar-nav p {
	margin: 6px 0;
}
.dh-sidebar-nav a {
	color: #6b3fa0 !important;
}
.dh-sidebar-nav em {
	color: #d9a017;
	font-style: italic;
}

.dh-ad-box {
	background-color: #000000 !important;
	padding: 10px !important;
}


/* ==========================================================================
   ADD-ON: DecoHouse Useful Links page styling
   Append to custom.css
   Reuses .dh-ad-box from the homepage - only the classes below are new.
   ========================================================================== */

.dh-orange-banner p {
	background-color: #e8792e !important;
	color: #ffffff !important;
	padding: 10px 20px;
	font-weight: bold;
	font-size: 20px;
	border-radius: 3px;
	display: inline-block;
}
.dh-orange-banner {
	text-align: center;
}

.dh-highlight {
	display: inline-block;
	padding: 3px 10px;
	text-decoration: none !important;
}
.dh-highlight-black {
	background-color: #000000 !important;
	color: #ffff00 !important;
}
.dh-highlight-yellow {
	background-color: #ffff66 !important;
	color: #000000 !important;
}
.dh-highlight-blue {
	background-color: #003366 !important;
	color: #66ccff !important;
}
.dh-highlight-purple {
	background-color: #6600cc !important;
	color: #33ff33 !important;
}

/* ==========================================================================
   ADD-ON: DecoHouse Features page styling
   Append to custom.css
   Reuses .dh-sidebar-nav and .dh-ad-box from the homepage - no new classes
   needed for this page.
   ========================================================================== */

/* Slightly tighter spacing for the "Browse 1930s products" black box list,
   since it has many more short entries than the homepage ad boxes */
.dh-ad-box p {
	margin: 4px 0;
}

/* ==========================================================================
   ADD-ON: DecoHouse Legal Issues page styling
   Append to custom.css
   Reuses .dh-sidebar-nav, .dh-ad-box, .dh-highlight/.dh-highlight-yellow
   from earlier pages - only .dh-legal-list is new.
   ========================================================================== */

.dh-legal-list p {
	margin: 4px 0 12px;
}

/* ==========================================================================
   ADD-ON: DecoHouse Tech Help page styling
   Append to custom.css
   Reuses .dh-sidebar-nav and .dh-ad-box from earlier pages.
   .dh-dark-panel and .dh-category-badge are new.
   ========================================================================== */

.dh-dark-panel {
	background-color: #3a3a3a !important;
	padding: 4px 25px !important;
}
.dh-dark-panel p,
.dh-dark-panel li {
	color: #e0e0e0;
}
.dh-dark-panel a {
	color: #66ccff !important;
}
.dh-dark-panel a:hover {
	color: #99ddff !important;
}

.dh-category-badge {
	display: inline-block;
	background-color: #d9a017;
	color: #1a1a1a;
	font-weight: bold;
	padding: 3px 10px;
	border-radius: 2px;
	margin: 10px 0 5px;
}

.main-logo{
	min-width: 100%;
}

.main-logo > .et_pb_image_wrap{
	display: flex;
	justify-content: center;

}

.sbh-header-strip .et_pb_column:nth-child(1) {
    width: 30% ;
    flex: 0 0 30%;
}

@media (max-width: 980px) {
	.sbh-header-strip .et_pb_column:nth-child(1) {
		width: 100% ;
		flex: 0 0 100%;
	}

	.sbh-header-strip .et_pb_column {
		width: 25% ;
		flex: 0 0 25%;
	}
}

/* ==========================================================================
   ADD-ON: DecoHouse footer styling
   Append to custom.css
   ========================================================================== */

.dh-footer {
	background-color: #2b2b2b !important;
	padding: 12px 20px !important;
}
.dh-footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
	max-width: 1080px;
	margin: 0 auto;
}
.dh-footer-links {
	display: flex;
	gap: 20px;
}
.dh-footer-links a {
	color: #ff9933 !important;
	text-decoration: none;
	font-size: 13px;
}
.dh-footer-links a:hover {
	text-decoration: underline;
}
.dh-footer-copy {
	display: flex;
	gap: 8px;
	color: #cccccc;
	font-size: 12px;
}
@media (max-width: 600px) {
	.dh-footer-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}