/* Roof360 header/footer — ported from next-web Topbar.tsx + Home/Footer.tsx */

:root {
  --roof360-gold: #DEBA7C;
  --roof360-black: #1E1E1E;
  --roof360-navy: #132644;
}

/* ============================ HEADER ============================ */
.roof360-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 16px 0;
  transition: padding 0.1s linear;
}
.roof360-header.scrolled {
  padding: 0;
}

.roof360-header__inner {
  transition: transform 1.59s cubic-bezier(0.25, 0.9, 0.25, 1);
  transform: scale(0.985) translateY(6px);
  will-change: transform;
  margin: 0 16px;
}
.roof360-header.scrolled .roof360-header__inner {
  transform: scale(1) translateY(0);
  margin: 0;
}

.roof360-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  height: 70px;
  padding: 0 40px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
  border-radius: 9999px;
  transition: border-radius 0.3s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.3s, background-color 0.3s;
}
.roof360-header.scrolled .roof360-bar {
  border-radius: 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Logo */
.roof360-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.roof360-logo img {
  height: 64px;
  width: auto;
  display: block;
}

/* Desktop nav */
.roof360-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 24px;
  font-family: "Comfortaa", sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  min-width: 0;
}
.roof360-nav a {
  color: var(--roof360-navy);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s;
}
.roof360-nav a:hover {
  color: var(--roof360-gold);
}
.roof360-nav a.is-active {
  color: var(--roof360-gold);
  font-weight: 700;
}

/* Right side actions */
.roof360-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Language switcher — mirrors the Next.js LanguageDropdown: white rounded-full
   pill, 2px light-gray border, flag image + full label, CSS-only dropdown. */
.roof360-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  padding: 8px 16px;
  background: #fff;
  border: 2px solid #f4f6f8;
  border-radius: 9999px;
  font-family: "Comfortaa", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #000;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: relative;
}
.roof360-lang__flag {
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.roof360-lang__label { color: #000; }
.roof360-lang__caret {
  font-size: 12px;
  line-height: 1;
  margin-left: auto;
  color: #666;
}
.roof360-lang__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 6px 0 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 2px solid #f4f6f8;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 50;
}
.roof360-lang:hover .roof360-lang__menu,
.roof360-lang:focus-within .roof360-lang__menu { display: block; }
.roof360-lang__menu li { margin: 0; }
.roof360-lang__menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9999px;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
.roof360-lang__menu a:hover { background: #f4f6f8; }

.roof360-login {
  display: inline-flex;
  align-items: center;
  /* Match next-web Topbar login button (bg-brand-darkText → brand-black #1e1e1e). */
  background: #1e1e1e;
  color: #fff !important;
  padding: 12px 28px;
  border-radius: 9999px;
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.roof360-login:hover {
  opacity: 0.9;
  color: #fff !important;
}

/* Hamburger */
.roof360-menu-toggle {
  display: none;
  padding: 8px;
  border: 0;
  background: transparent;
  border-radius: 9999px;
  color: var(--roof360-navy);
  cursor: pointer;
  transition: background-color 0.2s;
}
.roof360-menu-toggle:hover {
  background: #f3f4f6;
}
.roof360-menu-toggle .icon-close {
  display: none;
}
.roof360-menu-toggle.is-open .icon-bars {
  display: none;
}
.roof360-menu-toggle.is-open .icon-close {
  display: block;
}

/* Mobile dropdown */
.roof360-mobile {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-16px) scaleY(0);
  transform-origin: top;
  pointer-events: none;
  margin-top: 0;
  padding: 0 16px;
  transition: all 0.5s ease-in-out;
}
.roof360-mobile.open {
  max-height: 600px;
  opacity: 1;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
  margin-top: 12px;
  padding: 12px 16px;
}
.roof360-mobile a {
  display: block;
  padding: 12px 16px;
  color: var(--roof360-navy);
  font-family: "Comfortaa", sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.2s;
}
.roof360-mobile a:hover {
  background: #f9fafb;
}
.roof360-mobile > a.is-active {
  color: var(--roof360-gold);
  font-weight: 700;
}
.roof360-mobile__foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 4px;
  margin-top: 4px;
  border-top: 1px solid #e5e7eb;
}
.roof360-mobile__foot .roof360-login {
  justify-content: center;
}

/* Breakpoint: next-web switches at xl (1280px) */
@media (max-width: 1279px) {
  .roof360-nav,
  .roof360-actions {
    display: none;
  }
  .roof360-menu-toggle {
    display: inline-flex;
  }
}
@media (min-width: 1280px) {
  .roof360-menu-toggle,
  .roof360-mobile {
    display: none;
  }
}

/* Offset page content so the fixed header doesn't overlap it */
#page {
  padding-top: 102px;
}

/* ===================== FULL-WIDTH BANNER IMAGE ===================== */
/* Ported from TestimonialSection.tsx bottom image (footer-image.svg). */
.roof360-bannerimg {
  position: relative;
  width: 100%;
  aspect-ratio: 1100 / 160; /* next-web container ratio (TestimonialSection) */
  margin-top: 80px; /* mt-20 */
  overflow: hidden;
  line-height: 0;
}
.roof360-bannerimg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill; /* match next/image <Image fill> default — stretches to the box exactly like next-web */
  object-position: left;
}

/* ===================== CONTACT ("Let's connect!") ===================== */
/* Ported from ContactSection.tsx + ContactForm.tsx. Visual only. */
.roof360-contact {
  position: relative;
  padding: 80px 16px;
  overflow: hidden;
}
.roof360-contact__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.roof360-contact__inner {
  position: relative;
  z-index: 10;
  max-width: 80rem;
  margin: 0 auto;
}
.roof360-contact__grid {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.roof360-contact__info {
  flex: 1;
  text-align: center;
}
.roof360-contact__title {
  color: #fff;
  font-family: "Comfortaa", sans-serif;
  font-weight: 400;
  font-size: 26px; /* next-web .text-4xl !important forces 26px (overrides text-5xl) */
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0 0 24px;
}
.roof360-contact__title .gold {
  color: var(--roof360-gold);
  font-weight: 700;
}
.roof360-contact__desc {
  color: #eaeaea;
  font-family: "Comfortaa", sans-serif;
  font-weight: 400;
  font-size: 18px;
  margin: 0;
}
.roof360-contact__details {
  margin-top: 40px;
  color: #828282; /* next-web default <p> color (--color-text-gray) */
  font-family: "Comfortaa", sans-serif;
}
.roof360-contact__details h3 {
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 16px;
}
.roof360-contact__details p {
  color: #828282; /* next-web `body p` default = --color-text-gray (#828282), distinct from gray-300 description */
  font-family: "Comfortaa", sans-serif; /* explicit so it can't fall back to Bootstrap's system font */
  font-weight: 500; /* next-web applies medium weight to text by default */
  font-size: 16px;
  margin: 0 0 8px;
}
.roof360-contact__form {
  flex: 1;
  width: 100%;
}

/* Form controls */
.roof360-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.roof360-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
/* Wraps a control + its inline validation message; one per grid column so the
   error span never breaks the two-column row layout. */
.roof360-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.roof360-input,
.roof360-select,
.roof360-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 19px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: "Comfortaa", sans-serif;
  font-size: 16px;
  outline: none;
  transition: box-shadow 0.15s;
}
.roof360-input,
.roof360-select {
  height: 58px;
}
.roof360-input::placeholder,
.roof360-textarea::placeholder {
  color: #848484;
}
.roof360-select {
  color: #848484;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M6 8L0 0h12z' fill='%23ffffff'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
.roof360-select option {
  background: #1e1e1e;
  color: #fff;
}
.roof360-textarea {
  resize: none;
  height: auto;
}
.roof360-input:focus,
.roof360-select:focus,
.roof360-textarea:focus {
  box-shadow: 0 0 0 2px var(--roof360-gold);
}
.roof360-submit {
  width: 100%;
  padding: 22px;
  border: 0;
  border-radius: 16px;
  background: var(--roof360-gold);
  color: #1e1e1e;
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.roof360-submit:hover {
  opacity: 0.9;
}

@media (min-width: 640px) {
  .roof360-form__row {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .roof360-contact__grid {
    flex-direction: row;
    gap: 96px;
  }
  .roof360-contact__info {
    text-align: left;
  }
}

/* ============== "HELPFUL GUIDES" SECTION (Figma 15357:6132) ============== */
/* Header tokens taken from Figma; grid/button styled like next-web PropertyListSection. */
.roof360-guides {
  background: #fff;
  padding: 80px 16px 128px;
}
.roof360-guides__inner {
  max-width: 1245px;
  margin: 0 auto;
}
.roof360-guides__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  margin-bottom: 56px;
}
.roof360-guides__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--roof360-gold);
  padding: 12px 20px;
  border-radius: 8px;
}
.roof360-guides__badge span {
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.14;
  color: #1e1e1e;
  letter-spacing: 4.32px;
  text-transform: uppercase;
  white-space: nowrap;
}
.roof360-guides__title {
  margin: 0;
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -1px;
  color: #1e1e1e;
}
.roof360-guides__desc {
  margin: 0 auto;
  max-width: 42rem;
  font-family: "Comfortaa", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #1e1e1e;
}
.roof360-guides__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
/* Count + sort bar */
.roof360-guides__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.roof360-guides__count {
  font-family: "Comfortaa", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #1e1e1e;
}
.roof360-guides__sort {
  display: flex;
  align-items: center;
  gap: 10px;
}
.roof360-guides__sort label {
  font-family: "Comfortaa", sans-serif;
  font-size: 14px;
  color: #9ca3af;
}
.roof360-sort-select {
  font-family: "Comfortaa", sans-serif;
  font-size: 14px;
  color: #1e1e1e;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  padding: 10px 38px 10px 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231e1e1e' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Blog card (matches reference) */
.roof360-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  padding: 16px;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
}
.roof360-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}
.roof360-card__media {
  aspect-ratio: 16 / 11;
  border-radius: 16px;
  overflow: hidden;
  background: #f4f6f8;
}
.roof360-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.roof360-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 8px 4px;
}
.roof360-card__date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Comfortaa", sans-serif;
  font-size: 13px;
  color: #6b7280;
}
.roof360-card__date svg {
  color: var(--roof360-gold);
  flex-shrink: 0;
}
.roof360-card__title {
  margin: 0;
  font-family: "Comfortaa", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: #1e1e1e;
}
.roof360-card__excerpt {
  margin: 0;
  font-family: "Comfortaa", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: #6d6d6d;
}
.roof360-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #1e1e1e;
}
.roof360-card__more svg {
  color: var(--roof360-gold);
}

/* Load more button */
.roof360-guides__cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.roof360-loadmore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 40px;
  background: #1e1e1e;
  color: #fff;
  border: 0;
  border-radius: 9999px;
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.roof360-loadmore:hover {
  opacity: 0.9;
}
.roof360-loadmore[hidden] {
  display: none;
}
.roof360-loadmore:disabled {
  opacity: 0.6;
  cursor: default;
}
.roof360-guides__grid.is-loading {
  opacity: 0.5;
  transition: opacity 0.2s;
}
@media (min-width: 640px) {
  .roof360-guides__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .roof360-guides__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .roof360-guides__title {
    font-size: 32px;
    line-height: 1.2;
  }
  .roof360-guides {
    padding: 56px 16px 80px;
  }
}

/* ===================== BLOG DETAIL (single.php) — Figma 15433:1980 ===================== */
.roof360-article-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 16px 0;
}
.roof360-article-grid {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
}

/* Sidebar: back link + Table of Contents */
.roof360-toc {
  position: sticky;
  top: 120px;
  flex-shrink: 0;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Cap to the viewport so a long TOC scrolls internally instead of
     clipping its lower items off-screen. */
  max-height: calc(100vh - 140px);
}
.roof360-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Comfortaa", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #828282;
  text-decoration: none;
  transition: color 0.2s;
}
.roof360-back:hover {
  color: #1e1e1e;
}
/* Panel fills the capped sidebar height so only the list scrolls,
   keeping the "Back" link and heading pinned. */
.roof360-toc__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.roof360-toc__heading {
  margin: 0 0 16px;
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #1e1e1e;
  flex-shrink: 0;
}
.roof360-toc__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Scroll the list on its own when it outgrows the viewport. */
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.roof360-toc__item {
  display: block;
  padding: 16px;
  border-left: 3px solid #eaeaea;
  font-family: "Comfortaa", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: #828282;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.roof360-toc__item:hover {
  color: #1e1e1e;
}
.roof360-toc__item.is-active {
  border-left-color: var(--roof360-gold);
  color: var(--roof360-gold);
  font-weight: 700;
}

/* Article column */
.roof360-article {
  flex-shrink: 0;
  width: 760px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.roof360-article__head {
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.roof360-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: "Comfortaa", sans-serif;
  font-weight: 400;
  font-size: 13.5px;
  color: #828282;
}
.roof360-article__meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.roof360-article__meta strong {
  font-weight: 600;
}
.roof360-article__meta svg {
  color: var(--roof360-gold);
  flex-shrink: 0;
}
.roof360-article__title {
  margin: 0;
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1.15;
  letter-spacing: -0.92px;
  color: #1e1e1e;
}
.roof360-article__hero {
  width: 100%;
  aspect-ratio: 760 / 460;
  border-radius: 28px;
  overflow: hidden;
  background: #f4f6f8;
}
.roof360-article__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Article body typography */
.roof360-article__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: "Comfortaa", sans-serif;
  font-weight: 500; /* match the app: Comfortaa medium on all body text */
}
.roof360-article__body p {
  margin: 0;
  /* Override style.css `body, p { font-family: 'Proxima Nova Rg' }`, which sets
     the font directly on <p> and beats the container's inherited Comfortaa. */
  font-family: "Comfortaa", sans-serif;
  font-weight: 500; /* match the app: Comfortaa medium on all body text */
  font-size: 17.5px;
  line-height: 31.5px;
  color: #2e2e2e;
}
.roof360-article__body h2 {
  margin: 16px 0 0;
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 32.5px;
  letter-spacing: -0.25px;
  color: #1e1e1e;
  scroll-margin-top: 120px;
}
.roof360-article__body h3 {
  margin: 8px 0 0;
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #1e1e1e;
  scroll-margin-top: 120px;
}
.roof360-article__body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.roof360-article__body ul li {
  /* Block (not flex) so a leading <strong> heading stacks ABOVE its
     description instead of the two becoming side-by-side flex columns.
     The check sits in the padding gutter via absolute positioning. */
  position: relative;
  padding-left: 36px; /* 24px check + 12px gap */
  margin: 0;
  font-family: "Comfortaa", sans-serif;
  font-weight: 500; /* match the app: Comfortaa medium on all body text */
  font-size: 17px;
  line-height: 27.2px;
  color: #2e2e2e;
}
/* A leading bold heading drops to its own line; the description flows
   beneath it, both aligned in the column to the right of the check. */
.roof360-article__body ul li > strong:first-child {
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
  color: #1e1e1e;
}
.roof360-article__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: #fff4e6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23deba7c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* Ordered list keeps real numbers (display:flex would hide the ::marker).
   Markers are gold to match the unordered list's gold check. */
.roof360-article__body ol {
  margin: 0;
  padding-left: 26px;
  list-style: decimal;
}
.roof360-article__body ol li {
  /* Set list-style on the li directly — base style.css `li { list-style:none }`
     beats the value inherited from <ol>, which would hide the numbers. */
  list-style: decimal;
  margin: 0 0 12px;
  padding-left: 4px;
  font-family: "Comfortaa", sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 27.2px;
  color: #2e2e2e;
}
.roof360-article__body ol li:last-child {
  margin-bottom: 0;
}
.roof360-article__body ol li::marker {
  color: var(--roof360-gold);
  font-weight: 700;
}
/* Blockquote — gold rule, indented, emphasised pull-quote text. */
.roof360-article__body blockquote {
  margin: 8px 0;
  padding: 6px 0 6px 24px;
  border-left: 4px solid var(--roof360-gold);
}
.roof360-article__body blockquote p {
  font-size: 19px;
  line-height: 30px;
  font-style: italic;
  color: #1e1e1e;
}
.roof360-article__body img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}
/* wp-block-image figures span the full article column. */
.roof360-article__body figure.wp-block-image {
  width: 100%;
}
.roof360-article__body a {
  color: var(--roof360-gold);
  text-decoration: underline;
}

/* Tables — comparison tables; dark header, uniform light tint, mobile scroll. */
.roof360-article__body figure.wp-block-table {
  margin: 0;
  overflow-x: auto;
}
.roof360-article__body table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Comfortaa", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #2e2e2e;
}
.roof360-article__body th,
.roof360-article__body td {
  padding: 12px 16px;
  border: 1px solid #eaeaea;
  text-align: left;
  line-height: 1.5;
}
.roof360-article__body thead th,
.roof360-article__body table > tr:first-child th {
  background: #1e1e1e;
  color: #fff;
  font-weight: 700;
}
/* No background on body cells. The inline-styled comparison tables bake
   background-color onto their (bold) left column, so !important is needed to
   clear it. The dark header row is intentionally left untouched (its text is
   white and needs the dark fill to stay readable). */
.roof360-article__body tbody td,
.roof360-article__body tbody th {
  background: transparent !important;
}
.roof360-article__body table caption,
.roof360-article__body figure.wp-block-table figcaption {
  caption-side: bottom;
  margin-top: 10px;
  font-size: 14px;
  color: #828282;
  text-align: center;
}

/* Figure + caption for inline images. */
.roof360-article__body figure {
  margin: 0;
}
.roof360-article__body figcaption {
  margin-top: 10px;
  font-family: "Comfortaa", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: #828282;
  text-align: center;
}

/* Horizontal divider. */
.roof360-article__body hr {
  width: 100%;
  height: 1px;
  border: 0;
  background: #eaeaea;
  margin: 8px 0;
}

/* Blog post content uses Arial. Re-declared per element (same specificity as
   the Comfortaa rules above, later in the file so it wins) — scoped to
   .roof360-article__body so header/footer/TOC keep Comfortaa. */
.roof360-article__body,
.roof360-article__body p,
.roof360-article__body h2,
.roof360-article__body h3,
.roof360-article__body ul li,
.roof360-article__body ul li > strong:first-child,
.roof360-article__body ol li,
.roof360-article__body blockquote p,
.roof360-article__body table,
.roof360-article__body th,
.roof360-article__body td,
.roof360-article__body figcaption {
  font-family: Arial, Helvetica, sans-serif;
}

/* "Need help with your roof?" CTA box */
.roof360-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding: 40px;
  background: #1c1b1f;
  border-radius: 40px;
}
/* Left column — copy + button — sits above the bleeding image. */
.roof360-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  max-width: 60%;
}
/* Decorative image, anchored to the bottom-right and clipped by the box radius. */
.roof360-cta__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}
.roof360-cta__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: right bottom;
}
.roof360-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.roof360-cta__badge {
  display: inline-flex;
  align-self: flex-start; /* shrink chip to its content (parent flex defaults to stretch) */
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 100px;
  background: rgba(222, 186, 124, 0.16);
}
.roof360-cta__dot {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--roof360-gold);
}
.roof360-cta__badge-text {
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.16px;
  text-transform: uppercase;
  color: #c79a52;
}
.roof360-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.roof360-cta__title {
  margin: 0;
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.44px;
  color: #fff;
}
.roof360-cta__title span {
  color: var(--roof360-gold);
}
.roof360-cta__text {
  margin: 0;
  font-family: "Inter", "Comfortaa", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.72);
}
.roof360-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 30px;
  background: var(--roof360-gold);
  color: #1e1e1e;
  border-radius: 100px;
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.roof360-cta__btn:hover {
  opacity: 0.9;
}
/* When the CTA sits inside post content, .roof360-article__body element rules
   (h3/p/a) would otherwise win on specificity and wash out the dark box. These
   ancestor-scoped overrides (0,2,x) outrank those (0,1,1) body rules. */
.roof360-cta .roof360-cta__title {
  color: #fff;
}
.roof360-cta .roof360-cta__title span {
  color: var(--roof360-gold);
}
.roof360-cta .roof360-cta__text {
  color: rgba(255, 255, 255, 0.72);
}
.roof360-cta .roof360-cta__btn {
  color: #1e1e1e;
  text-decoration: none;
}
/* Stack the image under the copy on narrow screens. */
@media (max-width: 768px) {
  .roof360-cta {
    padding: 28px;
    border-radius: 28px;
  }
  .roof360-cta__content {
    max-width: 100%;
  }
  .roof360-cta__media {
    position: static;
    width: 100%;
    height: 180px;
    margin-top: 4px;
    justify-content: center;
  }
  .roof360-cta__media img {
    width: auto;
    object-position: center bottom;
  }
}

.roof360-resources {
  padding-top: 40px;
}

@media (max-width: 1024px) {
  .roof360-article {
    width: auto;
    flex: 1;
  }
}
@media (max-width: 860px) {
  .roof360-article-grid {
    flex-direction: column;
    gap: 24px;
  }
  .roof360-toc {
    position: static;
    width: 100%;
  }
  .roof360-toc__panel {
    display: none;
  }
  .roof360-article {
    width: 100%;
  }
  .roof360-article__title {
    font-size: 32px;
  }
}

/* ============================ FOOTER ============================ */
.roof360-footer {
  background: var(--roof360-black);
  padding: 64px 16px 32px;
}
.roof360-footer__inner {
  max-width: 80rem;
  margin: 0 auto;
}
.roof360-footer__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.roof360-footer__logo img {
  height: 128px;
  width: auto;
}
.roof360-socials {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
}
.roof360-socials a {
  display: inline-flex;
  transition: transform 0.2s;
}
.roof360-socials a:hover {
  transform: scale(1.1);
}
.roof360-socials img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}
.roof360-footer__links {
  text-align: center;
}
.roof360-footer__links a {
  color: #9ca3af;
  font-family: "Comfortaa", sans-serif;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s;
}
.roof360-footer__links a:hover {
  color: #fff;
}
.roof360-footer__copy {
  display: block;
  margin-top: 8px;
  color: #9ca3af;
  font-family: "Comfortaa", sans-serif;
  font-size: 14px;
}

@media (max-width: 640px) {
  .roof360-bar {
    padding: 0 20px;
  }
  .roof360-logo img {
    height: 48px;
  }
}

/* ---------------------------------------------------------------------------
   Roof360 Contact Us form
--------------------------------------------------------------------------- */
.roof360-contact-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 20px 96px;
}
.roof360-contact__head {
  text-align: center;
  margin-bottom: 32px;
}
.roof360-contact-wrap .roof360-contact__title {
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: #1e1e1e;
  margin: 0 0 8px;
}
.roof360-contact__subtitle {
  font-family: "Comfortaa", sans-serif;
  color: #828282;
  font-size: 16px;
  margin: 0;
}
.roof360-contact__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.roof360-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.roof360-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Scoped to the contact PAGE (.roof360-contact-wrap). The footer "Let's connect!"
   form shares the .roof360-contact__form class but must keep its dark translucent
   .roof360-input styling — leaving these unscoped overrode it to solid white. */
.roof360-contact-wrap .roof360-contact__form input,
.roof360-contact-wrap .roof360-contact__form select,
.roof360-contact-wrap .roof360-contact__form textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid #eaeaea;
  border-radius: 16px;
  font-family: "Comfortaa", sans-serif;
  font-size: 15px;
  color: #1e1e1e;
  background: #fff;
  outline: none;
}
.roof360-contact-wrap .roof360-contact__form input:focus,
.roof360-contact-wrap .roof360-contact__form select:focus,
.roof360-contact-wrap .roof360-contact__form textarea:focus {
  border-color: #deba7c;
  box-shadow: 0 0 0 2px rgba(222, 186, 124, 0.35);
}
.roof360-contact-wrap .roof360-contact__form textarea {
  resize: none;
}
.roof360-error {
  color: #e02424;
  font-family: "Comfortaa", sans-serif;
  font-size: 12px;
  min-height: 14px;
}
.roof360-contact__submit {
  margin-top: 8px;
  height: 56px;
  border: 0;
  border-radius: 100px;
  background: #deba7c;
  color: #1e1e1e;
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.roof360-contact__submit:hover {
  opacity: 0.9;
}
.roof360-contact__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.roof360-contact__status {
  font-family: "Comfortaa", sans-serif;
  font-size: 14px;
  text-align: center;
  min-height: 18px;
  margin: 4px 0 0;
}
.roof360-contact__status.is-success { color: #1a7f47; }
.roof360-contact__status.is-error { color: #e02424; }

@media (max-width: 640px) {
  .roof360-field-row { grid-template-columns: 1fr; }
  .roof360-contact-wrap .roof360-contact__title { font-size: 30px; }
}

/* ===================== BLOG DETAIL — FAQ accordion (single.php) ===================== */
.roof360-faq {
  margin: 48px 0 0;
}
.roof360-faq__heading {
  margin: 0 0 20px;
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
  color: var(--roof360-black);
}
.roof360-faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.roof360-faq__item {
  border: 1px solid #eaeaea;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.2s;
}
.roof360-faq__item:hover {
  border-color: var(--roof360-gold);
}
.roof360-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: "Comfortaa", sans-serif;
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.4;
  color: var(--roof360-black);
}
.roof360-faq__q:focus-visible {
  outline: 2px solid var(--roof360-gold);
  outline-offset: -2px;
}
.roof360-faq__chevron {
  flex-shrink: 0;
  color: var(--roof360-gold);
  transition: transform 0.25s ease;
}
.roof360-faq__q[aria-expanded="true"] .roof360-faq__chevron {
  transform: rotate(180deg);
}
.roof360-faq__a {
  padding: 0 24px 22px;
}
/* Force Comfortaa on the answer content — the theme's base style.css sets
   p/li to 'Proxima Nova' directly, which beats inheritance and falls back to
   serif. Match the article body typography instead. */
.roof360-faq__a,
.roof360-faq__a p,
.roof360-faq__a li {
  font-family: "Comfortaa", sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.75;
  color: #2e2e2e;
}
.roof360-faq__a p:first-child {
  margin-top: 0;
}
.roof360-faq__a p:last-child {
  margin-bottom: 0;
}
.roof360-faq__a a {
  color: var(--roof360-gold);
  text-decoration: underline;
}
@media (max-width: 640px) {
  .roof360-faq__heading {
    font-size: 24px;
  }
  .roof360-faq__q {
    padding: 16px 18px;
    font-size: 16px;
  }
  .roof360-faq__a {
    padding: 0 18px 16px;
  }
}