/* FixRoof 2026 Breakdance pages: pieces rendered through Code Blocks
   (maps, FAQ accordions, tables, latest posts). Colors come from the
   Breakdance global palette variables. */

/* Google Map embeds */
.breakdance .bde-code-block:has(> .fr-map),
.breakdance .bde-code-block:has(> .fr-faq),
.breakdance .bde-code-block:has(> .fr-table-wrap),
.breakdance .bde-code-block:has(> .fr-posts) {
  width: 100%;
}
.fr-map {
  height: 230px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #e6e9ef;
}
.fr-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 767px) {
  .fr-map {
    height: 200px;
  }
}

/* FAQ accordion */
.fr-faq {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.fr-faq__item {
  background: #fff;
  border: 1px solid #dde3ee;
  border-radius: 14px;
  box-shadow: 0 8px 24px #1c25500f;
}
.fr-faq__q {
  cursor: pointer;
  list-style: none;
  padding: 22px 60px 22px 26px;
  position: relative;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--fr-navy);
}
.fr-faq__q::-webkit-details-marker {
  display: none;
}
.fr-faq__q::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -8px;
  border-right: 2.5px solid var(--fr-red);
  border-bottom: 2.5px solid var(--fr-red);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.fr-faq__item[open] .fr-faq__q::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}
.fr-faq__a {
  padding: 0 26px 22px;
  color: var(--fr-navy-muted);
  font-size: 16px;
  line-height: 1.65;
}
.fr-faq__a p {
  margin: 0 0 10px;
}
.fr-faq__a p:last-child {
  margin-bottom: 0;
}
.fr-faq__a a {
  color: var(--fr-red);
}
.fr-faq__a ul {
  margin: 6px 0 10px 20px;
}
@media (max-width: 767px) {
  .fr-faq__q {
    font-size: 16px;
    padding: 18px 50px 18px 20px;
  }
  .fr-faq__a {
    padding: 0 20px 18px;
  }
}

/* Tables */
.fr-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid #dde3ee;
}
.fr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  color: var(--fr-navy);
  min-width: 560px;
}
.fr-table th {
  background: var(--fr-navy);
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  text-align: left;
  padding: 14px 18px;
}
.fr-table td {
  padding: 14px 18px;
  border-top: 1px solid #dde3ee;
  vertical-align: top;
  line-height: 1.55;
}
.fr-table tbody tr:nth-child(even) td {
  background: var(--fr-ice);
}

/* Latest posts */
.fr-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  text-align: left;
}
.fr-post {
  background: #fff;
  border: 1px solid #dde3ee;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px #1c255012;
}
.fr-post {
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.3s ease-in-out;
}
.fr-post:hover {
  box-shadow: 0 16px 40px #1c255024;
}
.fr-post__img {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--fr-ice);
}
.fr-post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fr-post__body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.fr-post__meta {
  margin: 0;
  font-size: 13px;
  color: var(--fr-navy-muted);
}
.fr-post__title {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 20px;
  line-height: 1.3;
}
.fr-post__title {
  color: var(--fr-navy);
  transition: color 0.3s ease-in-out;
}
.fr-post:hover .fr-post__title {
  color: var(--fr-red);
}
.fr-post__meta,
.fr-post__excerpt {
  display: block;
}
.fr-post__excerpt {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fr-navy-muted);
}
.fr-post__more {
  display: block;
  margin-top: auto;
  padding-top: 6px;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  color: var(--fr-red);
  text-decoration: none;
}
@media (max-width: 1023px) {
  .fr-posts {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .fr-posts {
    grid-template-columns: 1fr;
  }
}

/* Formidable forms inside 2026 cards */
.breakdance .bde-shortcode {
  width: 100%;
}
.breakdance .frm_forms .frm_primary_label {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  color: var(--fr-navy);
}
.breakdance .frm_forms input[type="text"],
.breakdance .frm_forms input[type="email"],
.breakdance .frm_forms input[type="tel"],
.breakdance .frm_forms input[type="number"],
.breakdance .frm_forms select,
.breakdance .frm_forms textarea {
  border: 1px solid #c9d2e3;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
}
/* Submit (and multi-page Next/Previous) buttons: match the site's Breakdance buttons. Formidable renders them as
   <input type="submit" class="frm_final_submit"> or <button class="frm_button_submit">, so cover both; the
   selector outranks Formidable's own form style (.with_frm_style .frm_submit input[type=submit]). */
.breakdance .frm_forms .frm_submit :is(input[type="submit"], input[type="button"], button) {
  height: auto;
  margin: 0;
  background: var(--fr-red);
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: none;
  color: var(--fr-white);
  font-family: "Outfit", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  padding: 16px 34px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.breakdance .frm_forms .frm_submit :is(input[type="submit"], input[type="button"], button):hover {
  background: var(--fr-red-dark);
  color: var(--fr-white);
}

/* Pages without a dark hero (blog, posts, legal): solid navy header, and push the
   content below the fixed (sticky) main nav, whose height varies by breakpoint */
body.fr-no-hero .bde-header-builder--overlay {
  background-color: var(--fr-midnight) !important;
}
body.fr-no-hero .bde-header-builder--overlay + main {
  padding-top: 124px;
}
@media (max-width: 1119px) {
  body.fr-no-hero .bde-header-builder--overlay + main {
    padding-top: 96px;
  }
}
@media (max-width: 767px) {
  body.fr-no-hero .bde-header-builder--overlay + main {
    padding-top: 84px;
  }
}

/* About / Resources / Locations live in the utility bar on desktop; the main menu carries them only for the mobile toggle */
@media (min-width: 1120px) {
  .breakdance-menu .menu-item.fr-mobile-only {
    display: none !important;
  }
}

/* Active navigation: the current page's menu item and its parent section stand out.
   WordPress adds current-menu-item / current-menu-ancestor / current-menu-parent. */
.breakdance
  .bde-header-builder
  .breakdance-menu
  .current-menu-item
  > .breakdance-menu-link,
.breakdance
  .bde-header-builder
  .breakdance-menu
  .current-menu-item
  > .breakdance-dropdown-toggle
  > .breakdance-menu-link,
.breakdance
  .bde-header-builder
  .breakdance-menu
  .current-menu-ancestor
  > .breakdance-dropdown-toggle
  > .breakdance-menu-link,
.breakdance
  .bde-header-builder
  .breakdance-menu
  .current-menu-parent
  > .breakdance-dropdown-toggle
  > .breakdance-menu-link {
  color: var(--fr-sky);
}
@media (min-width: 1120px) {
  /* desktop dropdown (white panel): current page in bold red */
  .breakdance
    .bde-header-builder
    .breakdance-dropdown-item.current-menu-item
    > .breakdance-dropdown-link {
    color: var(--fr-red);
    font-weight: 600;
  }
}
@media (max-width: 1119px) {
  /* mobile menu (midnight panel): current child link */
  .breakdance
    .bde-header-builder
    .breakdance-dropdown-item.current-menu-item
    > .breakdance-dropdown-link {
    color: var(--fr-sky);
    font-weight: 600;
  }
}

/* Whole-card links: a Link Wrapper (.fr-card-link) around the card, with a non-link
   "fake link" text inside (.fr-fake-link) so the entire box is clickable */
.breakdance .bde-container-link.fr-card-link {
  display: flex;
  width: 100%;
  height: 100%;
  color: inherit;
  border-radius: 16px;
}
.breakdance .fr-card-link > .bde-div {
  width: 100%;
  height: 100%;
  transition: box-shadow 0.3s ease-in-out;
}
.breakdance .fr-card-link:hover > .bde-div {
  box-shadow: 0 16px 40px #1c255024;
}
.breakdance .fr-fake-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease-in-out;
}
.breakdance .fr-fake-link::after {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: var(--fr-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform 0.3s ease-in-out;
}
.breakdance .fr-fake-link--title::after {
  width: 16px;
  height: 16px;
}
.breakdance .fr-card-link:hover .fr-fake-link {
  color: var(--fr-red);
}
.breakdance .fr-card-link:hover .fr-fake-link::after {
  transform: translateX(4px);
}

/* Utility bar Text / Call cells: the whole cell (icon + label) is the link */
.breakdance .bde-container-link.fr-utility-cta .bde-text {
  transition: color 0.3s ease-in-out;
}
.breakdance .bde-container-link.fr-utility-cta:hover .bde-text {
  color: var(--fr-sky);
}

/* ---------------------------------------------------------------- accessibility */
/* Focus ring visible on light and dark backgrounds: midnight inner ring + sky outer ring */
.breakdance :focus-visible {
  outline: 3px solid var(--fr-sky) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--fr-midnight) !important;
}
.breakdance .bde-container-link.fr-utility-cta:focus-visible {
  outline-offset: -3px !important;
  box-shadow: inset 0 0 0 5px var(--fr-midnight) !important;
}
/* Links inside running text are underlined so they don't rely on colour alone (WCAG 1.4.1) */
.breakdance
  :is(.bde-rich-text, .bde-text, .fr-faq__a, .bde-code-block)
  :is(p, li, td, div, span, h2, h3, h4, h5, h6)
  a:not([class*="button"]):not(.fr-post) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.breakdance
  :is(.bde-rich-text, .bde-text, .fr-faq__a, .bde-code-block)
  :is(p, li, td, div, span, h2, h3, h4, h5, h6)
  a:not([class*="button"]):not(.fr-post):hover {
  text-decoration-thickness: 2px;
}
/* Submenu arrow toggles: at least 24px touch target (WCAG 2.5.8) */
.breakdance .breakdance-menu-link-arrow {
  min-width: 24px;
  min-height: 24px;
}
/* Footer office phones on the near-black footer: lighter red for 4.5:1 */
.breakdance a.bde-text-link.bde-preset-fr-location-phone:not(:hover) {
  color: #ff2a3b;
}
/* Blog post "Comments are closed" notice */
.breakdance .breakdance-form-message p {
  color: #b91c1c;
}
/* Title H1 on pages rendered by the fallback template (legal pages, blog, thank-you) */
.fr-page-title {
  margin: 0 0 28px;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.15;
  color: var(--fr-navy);
}
@media (max-width: 767px) {
  .fr-page-title {
    font-size: 34px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .breakdance *,
  .breakdance *::before,
  .breakdance *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Stacked link lists (blog posts, legal pages): enough spacing for 24px touch targets (WCAG 2.5.8) */
.breakdance :is(.bde-rich-text, .bde-code-block) li:has(a) + li:has(a) {
  margin-top: 6px;
}
.breakdance .bde-code-block div > a[href*="#"] {
  display: inline-block;
  padding-block: 2px;
}
/* Breadcrumbs are standalone navigation links, not links in running text: no underline */
.breakdance.fr-hero-page
  main
  > section:first-of-type
  .bde-rich-text:first-of-type
  p
  a {
  text-decoration: none;
}
.breakdance.fr-hero-page
  main
  > section:first-of-type
  .bde-rich-text:first-of-type
  p
  a:hover {
  text-decoration: underline;
}
/* Mobile menu: the link already draws the full-width row divider; the arrow button sits on top of it
   and drew a second translucent divider, which showed as a brighter "double" segment */
.breakdance .breakdance-menu-link-arrow {
  border-top-color: transparent !important;
}
/* Hero buttons go full width on phones */
@media (max-width: 767px) {
  .breakdance main > section:first-of-type .bde-div:has(> .bde-button) {
    width: 100%;
    align-items: stretch;
  }
  .breakdance main > section:first-of-type .bde-button,
  .breakdance main > section:first-of-type .bde-button .button-atom {
    width: 100%;
    justify-content: center;
  }
}
/* Mini service cards (homepage siding / gutters): once the card stacks on phones,
   the photo spans the card width at a consistent height */
@media (max-width: 479px) {
  .breakdance .bde-preset-fr-card-mini > img.bde-image2 {
    width: 100% !important;
    max-width: 100%;
    height: 190px !important;
    object-fit: cover;
  }
}
/* Below 1120px the main menu collapses and the header's Contact Us / Request Quote buttons move into the
   hamburger panel as menu items (.fr-menu-cta). Hiding the header buttons and right-aligning the hamburger
   live in those elements' own Custom CSS in the Header 2026 template. */
@media (max-width: 1119px) {
  .breakdance .breakdance-menu .menu-item.fr-menu-cta {
    padding: 12px 20px 0;
    border: 0;
    background: var(--fr-midnight);
  }
  .breakdance
    .breakdance-menu
    .menu-item.fr-menu-cta:not(.fr-menu-cta--outline) {
    padding-bottom: 24px;
  }
  .breakdance .breakdance-menu .menu-item.fr-menu-cta--outline {
    padding-top: 24px;
  }
  .breakdance .breakdance-menu .menu-item.fr-menu-cta > .breakdance-menu-link {
    justify-content: center;
    width: 100%;
    padding: 15px 24px;
    border-radius: 10px;
    border: 2px solid var(--fr-red-bright);
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fr-white);
  }
  .breakdance
    .breakdance-menu
    .menu-item.fr-menu-cta--outline
    > .breakdance-menu-link {
    background: transparent;
  }
  .breakdance
    .breakdance-menu
    .menu-item.fr-menu-cta--primary
    > .breakdance-menu-link {
    background: var(--fr-red-bright);
  }
  .breakdance
    .breakdance-menu
    .menu-item.fr-menu-cta
    > .breakdance-menu-link:hover {
    background: var(--fr-red);
    border-color: var(--fr-red);
    color: var(--fr-white);
  }
}
/* Hero H1s: balance line lengths (no single-word last line) */
.breakdance main > section:first-of-type h1 {
  text-wrap: balance;
}
/* Equal-height linked cards: pin the "Learn more" style link to the bottom so links line up across a row.
   Not when the fake link is the card's title (homepage service cards) – that block stays at the top. */
.breakdance
  .fr-card-link
  > .bde-div
  > .bde-div:last-child:has(> .fr-fake-link:not(.fr-fake-link--title)) {
  margin-top: auto;
  padding-top: 18px;
}
/* Split CTA (copy + photo): on desktop the copy sets the row height; the photo no longer
   contributes its own (often portrait) height and just crops to fill the row */
@media (min-width: 1024px) {
  .breakdance .fr-split-cta > img.bde-image2,
  .breakdance .fr-split-cta > .bde-column > img.bde-image2 {
    height: 0 !important;
    min-height: 100%;
  }
  .breakdance .fr-split-cta > .bde-div:first-child,
  .breakdance .fr-split-cta > .bde-column:first-child > .bde-div {
    justify-content: center;
    min-height: 480px;
  }
}
/* Testimonials band starts with no top padding (it normally follows a padded section);
   after a full-bleed split CTA it needs its own gap */
.breakdance .fr-split-band + .fr-testimonials-band > .section-container {
  padding-top: 96px;
}
@media (max-width: 1023px) {
  .breakdance .fr-split-band + .fr-testimonials-band > .section-container {
    padding-top: 64px;
  }
}
@media (max-width: 767px) {
  .breakdance .fr-split-band + .fr-testimonials-band > .section-container {
    padding-top: 52px;
  }
}

/* Element-specific rules (header bars, logo, menus, homepage stats) live in each element's own Custom CSS
   in Breakdance (Advanced → Custom CSS); see .tmp-pages/element-css.php */

/* [fixroof_reviews] testimonial cards (functions.php): same layout as the Breakdance-built cards they replaced */
.breakdance .bde-shortcode:has(> .fr-reviews) {
  width: 100%;
  margin-top: 36px;
}
.breakdance .fr-reviews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  row-gap: 28px;
  align-items: stretch;
  text-align: left;
}
.breakdance .fr-reviews--many {
  grid-template-columns: repeat(3, 1fr);
}
.breakdance .fr-review__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.breakdance .fr-review__who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.breakdance .fr-review__who > * {
  margin: 0;
}
.breakdance .fr-review__stars .bde-star-rating__wrapper {
  display: flex;
  flex-wrap: wrap;
}
/* white card on the light-blue band, same treatment as the other cards */
.breakdance .fr-review {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px 30px 34px;
  box-shadow: 0 10px 30px #1c255012;
}
@media (max-width: 479px) {
  .breakdance .fr-review {
    padding: 24px 20px 26px;
  }
}
.breakdance .fr-review[hidden] {
  display: none !important;
}
@media (max-width: 1119px) {
  .breakdance .fr-reviews,
  .breakdance .fr-reviews--many {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 1023px) {
  .breakdance .fr-reviews,
  .breakdance .fr-reviews--many {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}

/* Hero entrance (homepage + every 2026 inner page: the first section on .fr-hero-page).
   CSS only, runs once on load. The background photo eases from 106% to 100%; the content rises in
   one after another. The H1 is the page's largest paint, so its fade starts at once (no delay) and
   the rest follows it.
   fill-mode "backwards" applies the start state during the delay, then leaves no styles behind. */
@keyframes fr-hero-zoom {
  from {
    transform: scale(1.06);
  }
  to {
    transform: none;
  }
}
@keyframes fr-hero-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.breakdance.fr-hero-page #bde-main > .bde-section:first-child {
  overflow: hidden;
}
/* Homepage hero on tablets/phones: the text spans the full width, but the desktop overlay (set on the Section)
   fades out by 60% across, leaving the end of each line on the bright sky. Below 1024px keep it dark across the
   whole width, a little lighter on the right so the house still shows. (Breakdance's overlay isn't responsive.) */
/* Roofle Instant Quote widget (homepage section + /instant-roof-quote/): its Code Block wrapper shrank to fit, so the
   iframe fell back to the browser's 300px default and Roofle showed its narrow layout. Fill the column instead. */
.breakdance .bde-code-block:has(> .fr-roofle),
.breakdance .fr-roofle {
  width: 100%;
}
.breakdance .fr-roofle iframe {
  width: 100% !important;
  max-width: 100%;
}
/* Homepage hero below 1120px: the 2048px image (221 KB instead of 360 KB) – matches the preload in functions.php */
@media (max-width: 1119px) {
  .breakdance.home #bde-main > .bde-section:first-child {
    background-image: url("/wp-content/uploads/fixroof-hero-2026-3200-2048x819.webp");
  }
}
@media (max-width: 1023px) {
  .breakdance.home #bde-main > .bde-section:first-child > .section-background-overlay {
    background: linear-gradient(90deg, #02101FD9 0%, #02101FB8 55%, #02101F8C 100%),
      linear-gradient(180deg, #02101F99 0%, #02101F00 30%);
  }
}
.breakdance.fr-hero-page #bde-main > .bde-section:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transform-origin: 60% 40%;
  animation: fr-hero-zoom 9s cubic-bezier(0.25, 0.6, 0.3, 1) backwards;
  will-change: transform;
}
.breakdance.fr-hero-page
  #bde-main
  > .bde-section:first-child
  > .section-container
  > :where(:not(:has(> .bde-preset-fr-hero-stat))) {
  animation: fr-hero-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.breakdance.fr-hero-page
  #bde-main
  > .bde-section:first-child
  > .section-container
  > h1:nth-child(n) {
  animation-delay: 0s;
}
.breakdance.fr-hero-page
  #bde-main
  > .bde-section:first-child
  > .section-container
  > :nth-child(2) {
  animation-delay: 0.06s;
}
.breakdance.fr-hero-page
  #bde-main
  > .bde-section:first-child
  > .section-container
  > :nth-child(3) {
  animation-delay: 0.12s;
}
.breakdance.fr-hero-page
  #bde-main
  > .bde-section:first-child
  > .section-container
  > :nth-child(4) {
  animation-delay: 0.2s;
}
.breakdance.fr-hero-page
  #bde-main
  > .bde-section:first-child
  > .section-container
  > :nth-child(5) {
  animation-delay: 0.28s;
}
.breakdance.fr-hero-page
  #bde-main
  > .bde-section:first-child
  > .section-container
  > :nth-child(n + 6) {
  animation-delay: 0.36s;
}
/* homepage stats: each one follows the last */
.breakdance.fr-hero-page
  #bde-main
  > .bde-section:first-child
  .bde-preset-fr-hero-stat {
  animation: fr-hero-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.breakdance.fr-hero-page
  #bde-main
  > .bde-section:first-child
  .bde-preset-fr-hero-stat:nth-child(1) {
  animation-delay: 0.34s;
}
.breakdance.fr-hero-page
  #bde-main
  > .bde-section:first-child
  .bde-preset-fr-hero-stat:nth-child(2) {
  animation-delay: 0.44s;
}
.breakdance.fr-hero-page
  #bde-main
  > .bde-section:first-child
  .bde-preset-fr-hero-stat:nth-child(3) {
  animation-delay: 0.54s;
}
@media (prefers-reduced-motion: reduce) {
  .breakdance.fr-hero-page #bde-main > .bde-section:first-child::before,
  .breakdance.fr-hero-page
    #bde-main
    > .bde-section:first-child
    > .section-container
    > *,
  .breakdance.fr-hero-page
    #bde-main
    > .bde-section:first-child
    .bde-preset-fr-hero-stat {
    animation: none !important;
  }
}
/* hold the hero text (not the photo) until the heading font is ready: see fr-fonts-wait in functions.php */
html.fr-fonts-wait
  .breakdance.fr-hero-page
  #bde-main
  > .bde-section:first-child
  > .section-container
  > *,
html.fr-fonts-wait
  .breakdance.fr-hero-page
  #bde-main
  > .bde-section:first-child
  .bde-preset-fr-hero-stat {
  animation-play-state: paused;
}

/* Steps ("01 … 06" process grids, class from .tmp-pages/steps-galleries.php): a centred, wrapping row so
   a short last row sits in the middle. 5–6 steps use 3 columns (fr-steps--3), 4 or 7+ use 4 (fr-steps--4). */
.breakdance .bde-div.fr-steps {
  --cols: 3;
  --gap: 36px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  column-gap: var(--gap);
  row-gap: 40px;
}
.breakdance .bde-div.fr-steps--4 {
  --cols: 4;
}
.breakdance .bde-div.fr-steps > * {
  flex: 0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
}
@media (max-width: 1119px) {
  .breakdance .bde-div.fr-steps {
    --cols: 2;
  }
}
@media (max-width: 1023px) {
  .breakdance .bde-div.fr-steps {
    --gap: 28px;
  }
}
@media (max-width: 767px) {
  .breakdance .bde-div.fr-steps {
    --cols: 1;
  }
}
/* Gallery elements (lightbox): fill the row like the image grids they replaced */
.breakdance .fr-gallery {
  width: 100%;
}
/* Mosaic gallery (homepage "30+ Years" photos, .tmp-pages/home-gallery-merge.php): 4 columns, the 4th photo
   (church) runs two rows tall in the right column and the 5th (pool) is two columns wide. Single-cell photos keep
   the gallery's aspect ratio and set the row height; the spanning ones fill their area. 2 plain columns below 1024px. */
@media (min-width: 1024px) {
  .breakdance .fr-gallery--mosaic .ee-gallery-item:nth-child(4) {
    grid-column: 4;
    grid-row: 1 / span 2;
  }
  .breakdance .fr-gallery--mosaic .ee-gallery-item:nth-child(5) {
    grid-column: span 2;
  }
  .breakdance .fr-gallery--mosaic .ee-gallery-item:is(:nth-child(4), :nth-child(5)) .ee-gallery-item-figure {
    height: 100%;
    padding-bottom: 0;
    position: relative;
  }
}

/* ---------- Blog (Blog page, Single Post template 4519, [fixroof_posts] cards) ---------- */
.breakdance .bde-shortcode:has(> .fr-posts) {
  width: 100%;
}
.fr-post__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fr-post__more::after {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  transition: transform 0.3s ease-in-out;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.fr-post:hover .fr-post__more::after {
  transform: translateX(4px);
}
/* pagination under the Blog page cards */
.fr-pagination {
  margin-top: 44px;
  display: flex;
  justify-content: center;
}
.fr-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fr-pagination a,
.fr-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid #dde3ee;
  background: #fff;
  color: var(--fr-navy);
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  text-decoration: none !important;
  transition:
    border-color 0.2s,
    color 0.2s;
}
.fr-pagination a:hover {
  border-color: var(--fr-red);
  color: var(--fr-red);
}
.fr-pagination .current {
  background: var(--fr-navy);
  border-color: var(--fr-navy);
  color: #fff;
}
.fr-pagination .dots {
  border: 0;
  background: none;
}
/* post hero: breadcrumb + date line */
.breakdance .fr-crumbs {
  margin: 0;
  font-size: 14px;
  color: #ffffffcc;
}
.breakdance .fr-crumbs a {
  color: #fff;
  text-decoration: none !important;
}
.breakdance .fr-crumbs a:hover {
  color: var(--fr-red-bright);
  text-decoration: underline !important;
}
.breakdance .fr-post-hero__meta {
  margin: 0;
  font-size: 15px;
  color: #ffffffd9;
}
.breakdance .fr-post-hero h1 {
  text-wrap: balance;
}
/* post body: comfortable reading column */
.breakdance .fr-post-body {
  width: 100%;
  font-size: 17px;
  line-height: 1.75;
  color: var(--fr-navy);
}
.breakdance .fr-post-body > :first-child {
  margin-top: 0;
}
.breakdance .fr-post-body p,
.breakdance .fr-post-body ul,
.breakdance .fr-post-body ol {
  margin: 0 0 1.1em;
}
.breakdance .fr-post-body h2 {
  margin: 1.9em 0 0.55em;
  font-family: var(--fr-h3-font-family);
  font-weight: var(--fr-h3-font-weight);
  font-size: var(--fr-h3-font-size);
  line-height: 1.2;
  color: var(--fr-navy);
}
.breakdance .fr-post-body h3 {
  margin: 1.6em 0 0.45em;
  font-family: var(--fr-h5-font-family);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: var(--fr-navy);
}
.breakdance .fr-post-body h4 {
  margin: 1.4em 0 0.4em;
  font-family: var(--fr-h5-font-family);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35;
}
.breakdance .fr-post-body ul,
.breakdance .fr-post-body ol {
  padding-left: 1.3em;
}
.breakdance .fr-post-body li {
  margin: 0.35em 0;
}
.breakdance .fr-post-body li::marker {
  color: var(--fr-red);
}
.breakdance .fr-post-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.6em 0;
}
.breakdance .fr-post-body figure {
  margin: 1.6em 0;
}
.breakdance .fr-post-body figure img {
  margin: 0;
}
.breakdance .fr-post-body figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--fr-navy-muted);
}
.breakdance .fr-post-body blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid var(--fr-red);
  font-size: 19px;
}
.breakdance .fr-post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 15px;
}
.breakdance .fr-post-body th,
.breakdance .fr-post-body td {
  padding: 10px 12px;
  border-bottom: 1px solid #dde3ee;
  text-align: left;
}
@media (max-width: 767px) {
  .breakdance .fr-post-body {
    font-size: 16px;
  }
  .breakdance .fr-post-body h3 {
    font-size: 20px;
  }
}
/* card titles stay card-sized when they are H2s (Blog page) instead of taking the global H2 size */
.breakdance .fr-post__title {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  color: var(--fr-navy);
}
.breakdance .fr-post:hover .fr-post__title {
  color: var(--fr-red);
}
/* WordPress caption boxes carry an inline pixel width: keep them inside the reading column */
.breakdance .fr-post-body .wp-caption {
  width: auto !important;
  max-width: 100%;
  margin: 1.6em 0;
}
.breakdance .fr-post-body .wp-caption img {
  margin: 0;
}
.breakdance .fr-post-body .wp-caption-text {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--fr-navy-muted);
}
/* card photos: one 16:10 crop on every card (Breakdance's global img { height: auto } would otherwise win) */
.breakdance .fr-post__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.breakdance .fr-post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* hero "or call 1-855-FIX-ROOF" link next to the single hero button (.tmp-pages/hero-cta.php):
   centred under the full-width button on phones */
.breakdance .fr-hero-call p {
  margin: 0;
}
@media (max-width: 767px) {
  .breakdance .fr-hero-call {
    align-self: center;
  }
}

/* Badge / logo grids (class from .tmp-pages/logos-badges.php): centred wrapping rows, so a short last
   row sits in the middle (4 per row, 3 below 1120px, 2 below 1024px) */
.breakdance .bde-div.fr-badges {
  --cols: 4;
  --gap: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}
.breakdance .bde-div.fr-badges > * {
  flex: 0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
}
@media (max-width: 1119px) {
  .breakdance .bde-div.fr-badges {
    --cols: 3;
  }
}
@media (max-width: 1023px) {
  .breakdance .bde-div.fr-badges {
    --cols: 2;
    --gap: 14px;
  }
}
/* caption under a badge logo (Accreditations, .tmp-pages/doc-round2-text.php) */
.breakdance .bde-text.fr-badge-caption {
  margin-top: 16px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: var(--fr-navy);
}
/* Atlas's required wording under the Accreditations badges (.tmp-pages/oct-content.php) */
.breakdance .bde-text.fr-badge-note {
  margin-top: 28px;
  max-width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fr-navy-muted);
}
/* brand logos row inside a content section (Shingle Roof Replacement) */
.breakdance .bde-div.fr-brand-logos {
  flex-wrap: wrap;
  row-gap: 20px;
}

/* ---------- Mega menu (main menu is a Menu Builder: .tmp-pages/mega-menu.php) ---------- */
/* Menu Builder items are li.breakdance-menu-item (WP Menu used li.menu-item): same mobile-only / CTA rules */
@media (min-width: 1120px) {
  .breakdance-menu .breakdance-menu-item.fr-mobile-only {
    display: none !important;
  }
}
@media (max-width: 1119px) {
  .breakdance .breakdance-menu .breakdance-menu-item.fr-menu-cta {
    padding: 12px 20px 0;
    border: 0;
    background: var(--fr-midnight);
  }
  .breakdance .breakdance-menu .breakdance-menu-item.fr-menu-cta--primary {
    padding-bottom: 24px;
  }
  .breakdance .breakdance-menu .breakdance-menu-item.fr-menu-cta--outline {
    padding-top: 24px;
  }
  .breakdance
    .breakdance-menu
    .breakdance-menu-item.fr-menu-cta
    > .breakdance-menu-link {
    justify-content: center;
    border-radius: 10px;
    border: 2px solid var(--fr-red-bright);
    color: var(--fr-white);
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    padding: 14px 20px;
  }
  .breakdance
    .breakdance-menu
    .breakdance-menu-item.fr-menu-cta--outline
    > .breakdance-menu-link {
    background: transparent;
  }
  .breakdance
    .breakdance-menu
    .breakdance-menu-item.fr-menu-cta--primary
    > .breakdance-menu-link {
    background: var(--fr-red-bright);
  }
}
/* current page: Menu Builder marks links with --active; a dropdown holding the current page marks its parent */
/* .breakdance .bde-header-builder .breakdance-menu .breakdance-menu-item--active > .breakdance-menu-link,
.breakdance .bde-header-builder .breakdance-menu .breakdance-dropdown:has(.breakdance-dropdown-item--active, [aria-current="page"]) > .breakdance-dropdown-toggle > .breakdance-menu-link { color: var(--fr-sky); } */
@media (min-width: 1120px) {
  .breakdance
    .bde-header-builder
    .breakdance-dropdown-item--active
    > .breakdance-dropdown-link {
    color: var(--fr-red);
    font-weight: 600;
  }
}

/* the panel */
.breakdance .fr-mega-dd .breakdance-dropdown-custom-content {
  padding: 0;
  width: 100%;
}
.breakdance .bde-div.fr-mega {
  width: 100%;
  text-align: left;
}
.breakdance .bde-div.fr-mega__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 290px;
  gap: 36px;
  padding: 30px 32px 26px;
}
.breakdance .bde-div.fr-mega__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.breakdance .bde-text.fr-mega__title {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--fr-navy-muted);
  margin-bottom: 12px;
}
.breakdance .bde-div.fr-mega__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.breakdance .bde-div.fr-mega__list--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.breakdance .bde-container-link.fr-mega__item {
  display: block;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background 0.2s;
}
.breakdance .bde-container-link.fr-mega__item:hover,
.breakdance .bde-container-link.fr-mega__item:focus-visible {
  background: var(--fr-ice);
}
.breakdance .bde-text.fr-mega__name {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--fr-navy);
  transition: color 0.2s;
}
.breakdance .bde-container-link.fr-mega__item:hover .fr-mega__name {
  color: var(--fr-red);
}
.breakdance .bde-text.fr-mega__desc {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--fr-navy-muted);
}
.breakdance .fr-mega__link {
  display: block;
  padding: 8px 0;
  font-size: 15.5px;
  color: var(--fr-navy);
  text-decoration: none;
  transition:
    color 0.2s,
    transform 0.2s;
}
.breakdance .fr-mega__link:hover,
.breakdance .fr-mega__link:focus-visible {
  color: var(--fr-red);
  transform: translateX(3px);
}
.breakdance
  .fr-mega
  :is(.fr-mega__item, .fr-mega__link)[aria-current="page"]
  :is(.fr-mega__name),
.breakdance .fr-mega .fr-mega__link[aria-current="page"] {
  color: var(--fr-red);
}
/* photo card */
.breakdance .bde-container-link.fr-mega__card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: var(--fr-midnight);
  color: var(--fr-white);
  text-decoration: none;
  align-self: start;
}
.breakdance .bde-container-link.fr-mega__card .fr-mega__card-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.breakdance .fr-mega__card:hover .fr-mega__card-img {
  transform: scale(1.04);
}
.breakdance .bde-div.fr-mega__card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  background: var(--fr-midnight);
}
.breakdance .bde-text.fr-mega__card-title {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--fr-white);
}
.breakdance .bde-text.fr-mega__card-text {
  font-size: 14px;
  line-height: 1.5;
  color: #ffffffcc;
}
.breakdance .bde-text.fr-mega__card-cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--fr-sky);
}
.breakdance .bde-text.fr-mega__card-cta::after {
  content: "→";
  transition: transform 0.2s;
}
.breakdance .fr-mega__card:hover .fr-mega__card-cta::after {
  transform: translateX(4px);
}
/* footer strip */
.breakdance .bde-div.fr-mega__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 14px 32px;
  background: var(--fr-ice);
  border-top: 1px solid #dde3ee;
  border-radius: 0 0 var(--fr-mega-radius, 12px) var(--fr-mega-radius, 12px);
}
.breakdance .fr-mega__all {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--fr-red);
  text-decoration: none;
}
.breakdance .fr-mega__all::after {
  content: "→";
  margin-left: 8px;
}
.breakdance .fr-mega__phone p {
  margin: 0;
  font-size: 14px;
  color: var(--fr-navy-muted);
}
.breakdance .fr-mega__phone a {
  color: var(--fr-navy);
  font-weight: 600;
  text-decoration: none;
}
.breakdance .fr-mega__phone a:hover {
  color: var(--fr-red);
}
/* hamburger (≤1119px): the panel becomes a plain list in the midnight menu */
@media (max-width: 1119px) {
  .breakdance .bde-div.fr-mega__grid {
    display: block;
    padding: 4px 0 8px;
  }
  .breakdance .bde-container-link.fr-mega__card,
  .breakdance .bde-text.fr-mega__desc,
  .breakdance .bde-div.fr-mega__foot {
    display: none;
  }
  .breakdance .bde-text.fr-mega__title {
    color: #ffffff80;
    margin: 14px 20px 4px;
    font-size: 11px;
  }
  .breakdance .bde-container-link.fr-mega__item,
  .breakdance .fr-mega__link {
    margin: 0;
    padding: 10px 20px;
    border-radius: 0;
    transform: none !important;
  }
  .breakdance .bde-container-link.fr-mega__item:hover,
  .breakdance .bde-container-link.fr-mega__item:focus-visible {
    background: var(--fr-slate);
  }
  .breakdance .bde-text.fr-mega__name,
  .breakdance .fr-mega__link {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #ffffffd9;
  }
  .breakdance .bde-container-link.fr-mega__item:hover .fr-mega__name,
  .breakdance .fr-mega__link:hover {
    color: var(--fr-sky);
  }
}
.breakdance .bde-div.fr-mega {
  align-items: stretch;
}
.breakdance .bde-div.fr-mega__foot {
  flex-direction: row;
  width: 100%;
}
.breakdance .fr-mega-dd .breakdance-dropdown-body {
  overflow: hidden;
}
/* compact panels (Siding, Gutters): services + photo card */
.breakdance .bde-div.fr-mega__grid--compact {
  grid-template-columns: 1fr 240px;
  gap: 28px;
}
.breakdance .bde-div.fr-mega__grid--compact .fr-mega__card-img {
  height: 130px;
}
/* Maintenance & Repair: emergency call card + Tune-Up offer */
.breakdance .bde-div.fr-mega__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.breakdance .bde-div.fr-mega__alert {
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, #c20a06 0%, #9a0603 100%);
  color: var(--fr-white);
  gap: 6px;
}
.breakdance .bde-text.fr-mega__alert-title {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--fr-white);
}
.breakdance .bde-text.fr-mega__alert-text {
  font-size: 14px;
  line-height: 1.5;
  color: #ffffffe0;
}
.breakdance .fr-mega__alert-btn {
  margin-top: 10px;
  display: inline-flex;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--fr-white);
  color: var(--fr-red) !important;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none !important;
  transition: background 0.2s;
}
.breakdance .fr-mega__alert-btn:hover {
  background: var(--fr-ice);
}
.breakdance .bde-container-link.fr-mega__offer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid #dde3ee;
  background: var(--fr-ice);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s;
}
.breakdance .bde-container-link.fr-mega__offer:hover {
  border-color: var(--fr-red);
}
.breakdance .bde-text.fr-mega__offer-title {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--fr-navy);
}
.breakdance .bde-text.fr-mega__offer-cta {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--fr-red);
}
.breakdance .bde-text.fr-mega__offer-cta::after {
  content: "→";
  margin-left: 8px;
  display: inline-block;
  transition: transform 0.2s;
}
.breakdance .fr-mega__offer:hover .fr-mega__offer-cta::after {
  transform: translateX(4px);
}
/* hamburger: drop the emergency card (the call link is in the top bar) but keep the Tune-Up as a list row */
@media (max-width: 1119px) {
  .breakdance .bde-div.fr-mega__side {
    gap: 0;
    padding-bottom: 8px;
  }
  .breakdance .bde-div.fr-mega__alert,
  .breakdance .bde-text.fr-mega__offer-cta {
    display: none;
  }
  .breakdance .bde-container-link.fr-mega__offer {
    padding: 10px 20px;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .breakdance .bde-container-link.fr-mega__offer:hover {
    background: var(--fr-slate);
  }
  .breakdance .bde-text.fr-mega__offer-title {
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #ffffffd9;
  }
}
/* hamburger: Menu Builder doesn't pick up the WP Menu's level-2 colour, so set it (About / Resources / Locations) */
@media (max-width: 1119px) {
  .breakdance .bde-menu .breakdance-dropdown-link {
    color: #ffffffd9;
    font-family: "Google Sans", sans-serif;
    font-size: 15px;
  }
  .breakdance .bde-menu .breakdance-responsive-menu .breakdance-dropdown-link,
  .breakdance .bde-menu .breakdance-menu--collapse .breakdance-dropdown-link {
    padding-left: 20px !important;
    padding-right: 20px !important;
  } /* beats the menu's own --mobile-link-level-3-padding */
  .breakdance .bde-menu .breakdance-dropdown-link:hover,
  .breakdance .bde-menu .breakdance-dropdown-link:focus-visible {
    color: var(--fr-sky);
  }
  .breakdance .bde-menu .breakdance-dropdown-link[aria-current="page"] {
    color: var(--fr-sky);
    font-weight: 600;
  }
}
/* hamburger submenus (About / Resources / Locations): no divider between child links, like the mega-panel lists */
@media (max-width: 1119px) {
  .breakdance .bde-menu .breakdance-dropdown-item {
    border-top: 0 !important;
  }
}

/* red call-to-action card filling a cards grid (Commercial Roofing, .tmp-pages/commercial-cards.php) */
.breakdance .bde-div.fr-cta-card__box { justify-content: center; gap: 10px; padding: 32px 30px; border-radius: 16px; background: linear-gradient(180deg, #C20A06 0%, #9A0603 100%); box-shadow: 0 10px 30px #1C255024; }
.breakdance .fr-cta-card__title { margin: 0; font-family: var(--fr-h5-font-family); font-weight: 600; font-size: var(--fr-h5-font-size); line-height: 1.25; color: var(--fr-white); }
.breakdance .bde-text.fr-cta-card__text { font-size: 15px; line-height: 1.6; color: #FFFFFFE0; }
.breakdance .bde-text.fr-cta-card__link { margin-top: 8px; font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--fr-white); }
.breakdance .fr-cta-card .fr-fake-link::after { background: var(--fr-white); }
.breakdance .fr-cta-card:hover .fr-cta-card__link { color: var(--fr-white); }
.breakdance .fr-card-link.fr-cta-card:hover > .bde-div { box-shadow: 0 16px 40px #9A060355; }

/* Testimonials band after a tinted section (light blue, photo, split CTA): its own top gap
   (class from .tmp-pages/testimonials-gap.php) */
.breakdance .fr-testimonials-band.fr-band-gap > .section-container { padding-top: 96px; }
@media (max-width: 1023px) { .breakdance .fr-testimonials-band.fr-band-gap > .section-container { padding-top: 64px; } }
@media (max-width: 767px) { .breakdance .fr-testimonials-band.fr-band-gap > .section-container { padding-top: 52px; } }

/* Columns that wrap a styled block (card, video, sidebar box): the block fills the column's width,
   and with --stretch also its height, like the grid cells they replaced (.tmp-pages/grid-to-columns-2.php) */
.breakdance .bde-column.fr-col-fill > * { width: 100%; max-width: 100%; }
.breakdance .bde-column.fr-col-fill--stretch > * { flex: 1 1 auto; }

/* Split CTA, blended (.fr-split-band--blend, .tmp-pages/split-cta-blend.php): the section carries the
   homepage's sky gradient; the photo's left edge fades into it (top edge once the columns stack) */
.breakdance .fr-split-band--blend .fr-split-cta > .bde-column:last-child img.bde-image2 {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
}
@media (max-width: 1023px) {
  .breakdance .fr-split-band--blend .fr-split-cta > .bde-column:last-child img.bde-image2 {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  }
}