/* Golden Empire final all-page readability + Sierra Grey shingle title background fixes */
:root {
  --ge-header-blue: #0d1b30;
  --ge-sierra-shingle-bg: url('images/OC-Sierra-Grey-Shingle-BG.png');
}

/* Page keyword/title band: use Sierra Grey OC-style shingle background on every page title block. */
body > section.ge-shingle-bg-fix,
body > section[id="block-11"],
body > section.u-image.ge-shingle-bg-fix,
body > section.u-align-center.u-image[id="block-11"] {
  background-image: linear-gradient(0deg, rgba(13, 27, 48, 0.46), rgba(13, 27, 48, 0.46)), var(--ge-sierra-shingle-bg) !important;
  background-position: 50% 50%, 50% 50% !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  background-color: #0d1b30 !important;
}

/* Sierra Grey title block: visible white bottom rule + breathing room so the next
   section isn't clustered against it. Matches the existing 14px yellow top border. */
body > section.ge-shingle-bg-fix,
body > section[id="block-11"],
body > section.u-image.ge-shingle-bg-fix,
body > section.u-align-center.u-image[id="block-11"] {
  padding-bottom: 10px !important;
  border-bottom: 14px solid #ffffff !important;
  margin-bottom: 20px !important;
}

/* Keep page title readable over the dark shingle image. */
body > section.ge-shingle-bg-fix .u-title,
body > section.ge-shingle-bg-fix h1,
body > section[id="block-11"] .u-title,
body > section[id="block-11"] h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.55) !important;
}

/* White-on-white / light-background readability fix: make hidden white text the same dark blue as the header. */
body > section:not(.u-shading):not(.u-image):not(.u-custom-color-1):not(.u-custom-color-2) .u-text-white:not(.u-btn):not(.u-nav-link):not(.u-icon):not(.u-gallery-nav):not(.u-carousel-control),
body > section:not(.u-shading):not(.u-image):not(.u-custom-color-1):not(.u-custom-color-2) .u-text-body-alt-color:not(.u-btn):not(.u-nav-link):not(.u-icon):not(.u-gallery-nav):not(.u-carousel-control),
body > section .u-white .u-text-white:not(.u-btn):not(.u-nav-link):not(.u-icon):not(.u-gallery-nav):not(.u-carousel-control),
body > section .u-white .u-text-body-alt-color:not(.u-btn):not(.u-nav-link):not(.u-icon):not(.u-gallery-nav):not(.u-carousel-control),
body > section .u-grey-5 .u-text-white:not(.u-btn):not(.u-nav-link):not(.u-icon):not(.u-gallery-nav):not(.u-carousel-control),
body > section .u-grey-10 .u-text-white:not(.u-btn):not(.u-nav-link):not(.u-icon):not(.u-gallery-nav):not(.u-carousel-control),
body > section .u-palette-1-light-3 .u-text-white:not(.u-btn):not(.u-nav-link):not(.u-icon):not(.u-gallery-nav):not(.u-carousel-control),
body > section .u-container-style.u-white .u-text,
body > section .u-container-style.u-white .u-text *,
body > section .u-group.u-white .u-text,
body > section .u-group.u-white .u-text *,
body > section .u-layout-cell.u-white .u-text,
body > section .u-layout-cell.u-white .u-text *,
body > section .u-list-item.u-white .u-text,
body > section .u-list-item.u-white .u-text *,
body > section .u-accordion-link.u-white,
body > section .u-accordion-link.u-white *,
body > section .u-accordion-pane.u-white,
body > section .u-accordion-pane.u-white * {
  color: var(--ge-header-blue) !important;
}

/* Get In Touch block + FAQ block forced readable sitewide. */
.ge-contact-blue,
.ge-contact-blue *,
.ge-faq-section,
.ge-faq-section h1,
.ge-faq-section h2,
.ge-faq-section h3,
.ge-faq-section h4,
.ge-faq-section p,
.ge-faq-section span,
.ge-faq-section div,
.ge-faq-section a,
.ge-faq-section .u-accordion-link-text,
.ge-faq-section .fr-view {
  color: var(--ge-header-blue) !important;
}

/* Keep header/nav and dark footer looking original. */
header .u-text-white,
header .u-text-body-alt-color,
.u-header .u-text-white,
.u-header .u-text-body-alt-color,
.u-header .u-nav-link,
.u-header .u-nav-link span,
footer.u-custom-color-2 .u-text-white,
footer.u-custom-color-2 .u-text-body-alt-color,
.u-footer.u-custom-color-2 .u-text-white,
.u-footer.u-custom-color-2 .u-text-body-alt-color {
  color: #ffffff !important;
}

/* Mobile title band stays readable and not oversized. */
@media (max-width: 575px) {
  body > section.ge-shingle-bg-fix .u-title,
  body > section[id="block-11"] .u-title,
  body > section.ge-shingle-bg-fix h1,
  body > section[id="block-11"] h1 {
    font-size: 2.4rem !important;
    line-height: 1.12 !important;
  }
}

/* PERMANENT FIX: ge-ins-keyword h1 always white regardless of nesting depth */
#ge-ins-keyword h1,
#ge-ins-keyword .ge-ins-keyword-inner h1,
section#ge-ins-keyword h1,
.ge-ins-keyword h1,
.ge-ins-keyword-inner h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}

/* Clipboard / insurance claim photo added to the right sidebar on every page.
   Sized to match the circle photo (u-image-6) below it. */
.ge-clipboard-sidebar {
  display: block !important;
  width: 304px !important;
  max-width: 100% !important;
  height: 304px !important;
  margin: 28px auto 0 !important;
  border-radius: 50% !important;
  border: 6px solid #f6b300 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.28) !important;
  object-fit: cover !important;
}
@media (max-width: 1199px) { .ge-clipboard-sidebar { width: 270px !important; height: 270px !important; } }
@media (max-width:  991px) { .ge-clipboard-sidebar { width: 270px !important; height: 270px !important; } }
@media (max-width:  575px) { .ge-clipboard-sidebar { width: 270px !important; height: 270px !important; margin-top: 22px !important; } }

/* "Hiring The Wrong Roofing Company" section (block-18) — text top-right,
   image on left. Sitewide on all pages that have this section. */
/* (Hiring section keeps default left-to-right: text on LEFT, image on RIGHT.) */
/* Top-align the text content (h2 + ul) within its cell on all viewports. */
body > section[id="block-18"] .u-container-layout-1 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding-top: 30px !important;
}
body > section[id="block-18"] .u-container-layout-1 .u-text-1 {
  margin-top: 0 !important;
}

/* Testimonial slider (block-14) — sitewide: YELLOW section, NAVY cards with white text. */
body > section[id="block-14"] {
  background-color: #f6b300 !important;
  background-image: none !important;
}
/* Review cards: navy bg, white text */
body > section[id="block-14"] .u-list-item,
body > section[id="block-14"] .u-repeater-item {
  background-color: #0d1b30 !important;
  background: #0d1b30 !important;
  border-color: #0d1b30 !important;
}
body > section[id="block-14"] .u-list-item h4,
body > section[id="block-14"] .u-list-item p,
body > section[id="block-14"] .u-list-item span:not(.u-icon):not(.u-file-icon) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* Carousel arrow controls stay visible on yellow */
body > section[id="block-14"] .u-carousel-control,
body > section[id="block-14"] .u-carousel-indicator {
  color: #0d1b30 !important;
  -webkit-text-fill-color: #0d1b30 !important;
}

/* Family circle added on pages that didn't originally have it — match the existing circle sizing */
.ge-family-sidebar {
  display: block !important;
  width: 304px !important;
  height: 304px !important;
  max-width: 100% !important;
  margin: 28px auto 0 !important;
  border-radius: 50% !important;
  border: 6px solid #f6b300 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.28) !important;
  object-fit: cover !important;
}
@media (max-width: 1199px) { .ge-family-sidebar { width: 270px !important; height: 270px !important; } }
@media (max-width: 991px)  { .ge-family-sidebar { width: 270px !important; height: 270px !important; } }
@media (max-width: 575px)  { .ge-family-sidebar { width: 270px !important; height: 270px !important; margin-top: 22px !important; } }

/* Financing $99/M added on Synthetic pages — match the standard sidebar sizing */
.ge-financing-sidebar {
  display: block !important;
  width: 100% !important;
  max-width: 404px !important;
  height: auto !important;
  margin: 24px auto 0 !important;
  border-radius: 8px !important;
}
@media (max-width: 1199px) { .ge-financing-sidebar { max-width: 354px !important; } }
@media (max-width: 991px)  { .ge-financing-sidebar { max-width: 304px !important; } }


/* Force transparent background on the Google Review Badge image so the
   section's yellow bg shows through its transparent areas. */
body > section[id="block-14"] img[src*="GoogleReviewBadge"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Safety & Service section (block-19) — keep both cells the same height
   so the yellow bar is visually uniform across the section. */
body > section[id="block-19"] .u-layout-row {
  align-items: stretch !important;
}
body > section[id="block-19"] .u-layout-cell {
  display: flex !important;
  flex-direction: column !important;
  min-height: 176px !important;
}
body > section[id="block-19"] .u-container-layout {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Safety section (block-19) — make the section itself yellow so the bar
   spans the FULL viewport width edge-to-edge (not constrained by sheet). */
body > section[id="block-19"] {
  background-color: #f6b300 !important;
  background-image: none !important;
}

/* Safety section button — yellow on yellow bar (button blends), white text */
body > section[id="block-19"] .u-btn-1 {
  background-color: #f6b300 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}
body > section[id="block-19"] .u-btn-1:hover {
  background-color: #e0a200 !important;
  color: #ffffff !important;
}