/* ===========================================================================
   Roofing Giant — global design system
   Applies at EVERY width. Mobile-specific rules stay in mobile.css.
   Reversible: delete this file and the enqueue line in rg-mobile.php.
   Goal: one coherent site, not Weebly restorations + newer pages side by side.
   =========================================================================== */

:root {
  --rg-radius: 10px;
  --rg-radius-sm: 8px;
  --rg-measure: 68ch;          /* comfortable reading width for body copy */
  --rg-shadow: 0 1px 2px rgba(16,32,64,.06), 0 8px 24px rgba(16,32,64,.08);
  --rg-border: 1px solid rgba(16,32,64,.12);
}

/* --- 1. TYPOGRAPHY -------------------------------------------------------
   One scale for the whole site. Fluid between 360px and 1440px so desktop,
   tablet and phone are the same system rather than three different ones. */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
h1 { font-size: clamp(34px, 2.1rem + 1.6vw, 50px); line-height: 1.1;  letter-spacing: -.02em; }
h2 { font-size: clamp(26px, 1.6rem + 1.1vw, 38px); line-height: 1.18; letter-spacing: -.015em; }
h3 { font-size: clamp(21px, 1.3rem + .55vw, 27px); line-height: 1.28; letter-spacing: -.01em; }
h4 { font-size: clamp(18px, 1.1rem + .3vw, 21px);  line-height: 1.35; }
p, li { font-size: clamp(16px, .98rem + .12vw, 18px); line-height: 1.65; }

/* readable measure for prose, without constraining layout blocks */
main p, main li { max-width: var(--rg-measure); }
main .has-text-align-center p, main p.has-text-align-center { max-width: none; }

/* --- 2. LEGACY WEEBLY PRESENTATION — neutralise globally ------------------
   Restored content still carries wsite-* classes, <font> tags and inline
   typography. Rather than editing hundreds of pages, the presentation is
   neutralised here and the semantic content is left untouched. */
main [class*="wsite-"] { font-family: inherit !important; }
main font { font-size: inherit !important; font-family: inherit !important; color: inherit !important; }
main center { text-align: inherit; }
main .wsite-image, main .galleryImageBorder { border: 0 !important; padding: 0 !important; }
main [class*="wsite-"] [style*="font-size"],
main [style*="font-family"] { font-family: inherit !important; }
/* legacy tables become responsive cards-in-a-scroller rather than page-wideners */
main table { width: 100% !important; max-width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
main table td, main table th { padding: 10px 12px; vertical-align: top; }
/* obsolete spacer markup */
main div:empty:not([class*="wp-block"]):not([id]) { display: none; }

/* --- 3. BUTTONS ---------------------------------------------------------- */
.wp-block-button__link, button, input[type="submit"], .rg-cta, .rg-btn {
  border-radius: var(--rg-radius-sm);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.wp-block-button__link:hover, .rg-btn:hover { box-shadow: var(--rg-shadow); }
.wp-block-button__link:focus-visible, button:focus-visible,
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--wp--preset--color--secondary, #FBB707);
  outline-offset: 2px;
}

/* --- 4. CARDS ------------------------------------------------------------ */
.rg-card, .wp-block-group.is-style-card {
  border-radius: var(--rg-radius);
  border: var(--rg-border);
  box-shadow: var(--rg-shadow);
  padding: clamp(18px, 2vw, 26px);
  background: #fff;
  height: 100%;
}
.rg-card h3, .rg-card h4 { margin-top: 0; }
.rg-grid { display: grid; gap: clamp(16px, 1.6vw, 24px); align-items: stretch; }

/* --- 5. IMAGES ----------------------------------------------------------- */
main img { border-radius: var(--rg-radius-sm); }
main .custom-logo, main img[class*="logo"], header img, footer img { border-radius: 0; }
figure.wp-block-image { margin-inline: 0; }
figcaption { font-size: 14px; opacity: .75; line-height: 1.5; margin-top: 8px; }

/* --- 6. SPACING RHYTHM --------------------------------------------------- */
main h2 { margin-top: clamp(28px, 3vw, 44px); margin-bottom: clamp(10px, 1vw, 16px); }
main h3 { margin-top: clamp(20px, 2vw, 30px); margin-bottom: 8px; }
main p + p { margin-top: 1em; }
main ul, main ol { line-height: 1.65; padding-left: 1.25em; }
main li + li { margin-top: .35em; }

/* --- 7. LINKS ------------------------------------------------------------ */
main a:not(.wp-block-button__link):not(.wp-element-button) { text-underline-offset: 3px; }
main a:not(.wp-block-button__link):not(.wp-element-button):hover { text-decoration: underline; }

/* --- 8. FORMS ------------------------------------------------------------ */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], select, textarea {
  border-radius: var(--rg-radius-sm);
  border: var(--rg-border);
  padding: 12px 14px;
  font: inherit;
  background: #fff;
}
label { font-weight: 600; }

/* --- 9. FOOTER ----------------------------------------------------------- */
footer a { text-underline-offset: 3px; }
footer .wp-block-social-link a { display: flex; align-items: center; justify-content: center; }

/* --- 10. DESKTOP HEADER -------------------------------------------------- */
@media (min-width: 900px) {
  .homedroid-header .wp-block-site-logo img.custom-logo { max-width: 240px; height: auto; }
  .homedroid-header .wp-block-navigation__container { gap: clamp(16px, 1.6vw, 30px); }
  .homedroid-header .wp-block-navigation-item__content { padding-block: 10px; }
  .homedroid-header .wp-block-navigation__submenu-container {
    border-radius: var(--rg-radius-sm);
    box-shadow: var(--rg-shadow);
    padding: 8px 0;
    border: var(--rg-border);
  }
  .homedroid-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 9px 18px;
  }
}

/* --- 11. MOTION -----------------------------------------------------------
   The theme reveals sections with AOS (scroll animations), which start at
   opacity:0. If the script is slow, blocked, or the visitor prefers reduced
   motion, that content stays invisible. Honour the OS setting and always
   guarantee the content is readable. This also makes automated screenshot QA
   deterministic rather than catching half-finished animations. */
@media (prefers-reduced-motion: reduce) {
  [data-aos], .aos-init, .aos-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* --- 12. SECTION HEADING / STATS COLLISION -------------------------------
   On the homepage the "Residential and Commercial Roofing" heading sits in a
   flex group whose sibling is the stats counter block, with no separation, so
   at desktop widths the heading and the 10+/5000+/30+/1500+ row collide.
   Give any heading group breathing room from the block that follows it. */
main .wp-block-group.alignwide + .cozy-block-wrapper,
main .wp-block-group.is-nowrap + .cozy-block-wrapper { margin-top: clamp(20px, 2.4vw, 40px); }
main .cozy-block-wrapper + .wp-block-group.alignwide { margin-top: clamp(20px, 2.4vw, 40px); }

/* --- 13. TESTIMONIALS PAGE ------------------------------------------------
   /testimonials/ is 15 genuine customer video testimonials restored from the
   Weebly site. The markup is bare divs with fixed-height iframes, so it is
   laid out here as a card grid with responsive video frames. No review text,
   name, rating or source is added or altered by CSS. */
.rg-testimonial {
  background: #fff;
  border: var(--rg-border);
  border-radius: var(--rg-radius);
  box-shadow: var(--rg-shadow);
  padding: clamp(18px, 2vw, 26px);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
/* the intro block is not a testimonial card */
.rg-testimonials > div > div:first-child {
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
.rg-testimonials h2 {
  font-size: clamp(19px, 1.1rem + .5vw, 24px);
  line-height: 1.3;
  text-transform: none;
  margin: 0 0 14px;
  letter-spacing: 0;
}
/* fixed height="515" on the embeds is replaced with a proper 16:9 frame */
.rg-testimonials iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
  border-radius: var(--rg-radius-sm);
  background: #0b1b33;
}
/* the quote under each video */
.rg-testimonials iframe + div,
.rg-testimonials div > div > div:last-child {
  font-size: clamp(15px, .95rem + .12vw, 17px);
  line-height: 1.65;
  margin-top: 14px;
}
.rg-testimonials a[href="/free-estimate/"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 26px;
  border-radius: var(--rg-radius-sm);
  background: var(--wp--preset--color--secondary, #FBB707);
  color: #14213d; font-weight: 600; text-decoration: none;
}
/* two columns on desktop, one on mobile */
@media (min-width: 900px) {
  .rg-testimonial-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2vw, 30px);
    align-items: start;
  }
  .rg-testimonial { margin-bottom: 0 !important; }
}
/* the page sits in a narrow constrained column; widen it for the card grid */
@media (min-width: 1100px) {
  .rg-testimonials { max-width: 1100px; margin-inline: auto; }
}

/* ===========================================================================
   §14 DESKTOP HEADER — brand banner above, navigation bar below
   Required hierarchy: BRAND BANNER -> NAV BAR -> PAGE HERO -> CONTENT.
   Achieved by letting the existing header row wrap and forcing the <nav> onto
   its own full-width line, so no template markup is edited and the whole thing
   reverts by deleting this file.
   =========================================================================== */
@media (min-width: 900px) {

  /* --- clutter removal: promo bar and header social icons --- */
  .homedroid-header > .wp-block-group:first-child { display: none !important; }
  .homedroid-header-social { display: none !important; }

  /* --- ROW 1: brand banner (logo | phone + CTA) --- */
  .homedroid-header { background: #fff !important; }
  .homedroid-header > .wp-block-group:nth-child(2) {
    padding-top: 18px !important;
    padding-bottom: 0 !important;
  }
  .homedroid-header > .wp-block-group:nth-child(2) .wp-block-group.is-content-justification-space-between {
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 0 !important;
  }
  .homedroid-header .wp-block-group.is-nowrap:has(.wp-block-site-logo) { order: 1; flex: 0 0 auto !important; }
  .homedroid-header .wp-block-site-logo img.custom-logo { width: auto !important; max-width: 240px !important; height: auto !important; }

  /* phone + CTA sit right of the logo on the banner row */
  .homedroid-header .wp-block-group:has(> .wp-block-buttons) {
    order: 2; margin-left: auto !important;
    display: flex !important; align-items: center !important; gap: 18px !important;
  }
  /* Location block is clutter on the banner - the footer carries it */
  .homedroid-header .wp-block-group:has(> .homedroid-header-location) { display: none !important; }
  .homedroid-header .wp-block-group:has(> .homedroid-header-call) p { display: none !important; }
  .homedroid-header .wp-block-group:has(> .homedroid-header-call) h5 { margin: 0 !important; }
  .homedroid-header .wp-block-group:has(> .homedroid-header-call) h5 a {
    font-size: 18px !important; font-weight: 700; white-space: nowrap; text-decoration: none;
  }
  .homedroid-header-call img { width: 22px !important; height: auto !important; }

  /* --- ROW 2: the navigation bar, full width, beneath the banner --- */
  .homedroid-header > .wp-block-group:nth-child(2) nav {
    order: 3;
    flex: 0 0 100% !important;
    width: 100% !important;
    position: relative;
    margin-top: 16px !important;
    padding: 4px 0 !important;
    justify-content: flex-start !important;
  }
  /* full-bleed bar behind the nav without causing horizontal scroll */
  .homedroid-header > .wp-block-group:nth-child(2) nav::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%; width: 100vw; margin-left: -50vw;
    background: #f4f7fb;
    border-top: 1px solid rgba(16,32,64,.10);
    border-bottom: 1px solid rgba(16,32,64,.10);
    z-index: 0;
  }
  .homedroid-header > .wp-block-group:nth-child(2) nav > * { position: relative; z-index: 1; }

  .homedroid-header nav .wp-block-navigation__container {
    gap: clamp(14px, 1.5vw, 28px) !important;
    flex-wrap: nowrap !important;
  }
  .homedroid-header nav .wp-block-navigation-item__content {
    padding: 12px 2px !important;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
  }
  .homedroid-header nav .wp-block-navigation-item__content:hover { border-bottom-color: var(--wp--preset--color--secondary, #FBB707); }
  .homedroid-header nav .wp-block-navigation-item__content:focus-visible {
    outline: 3px solid var(--wp--preset--color--secondary, #FBB707); outline-offset: 2px;
  }
  /* active page */
  .homedroid-header nav .current-menu-item > .wp-block-navigation-item__content,
  .homedroid-header nav .current_page_item > .wp-block-navigation-item__content {
    border-bottom-color: var(--wp--preset--color--primary, #235fae);
  }
  /* dropdowns aligned directly under their parent */
  .homedroid-header nav .wp-block-navigation__submenu-container {
    top: 100% !important; left: 0 !important;
    min-width: 250px;
    padding: 8px 0 !important;
    border-radius: var(--rg-radius-sm);
    border: var(--rg-border);
    box-shadow: var(--rg-shadow);
    background: #fff !important;
  }
  .homedroid-header nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 10px 18px !important; white-space: nowrap; border-bottom: 0;
  }
  .homedroid-header nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: #f4f7fb;
  }
}

/* the header phone number renders empty - the theme colours it against the
   banner background. Force it visible next to the icon. */
@media (min-width: 900px) {
  .homedroid-header .wp-block-group:has(> .homedroid-header-call) h5,
  .homedroid-header .wp-block-group:has(> .homedroid-header-call) h5 a {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--wp--preset--color--heading-color, #272727) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
  }
  .homedroid-header .wp-block-group:has(> .homedroid-header-call) { gap: 10px !important; }
}