/*
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;
}
.sbh-logo {
  background: #fff;
  flex: 0 0 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sbh-logo a {
  color: #cc3300;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
}
.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;
}
.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 .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:20%!important;
    flex: 0 0 20%;
}

.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;
}