/* ===========================================================================
   Roofing Giant — mobile-first responsive layer
   Global and reversible: delete mu-plugins/rg-mobile.php + rg-mobile/ to revert.
   Desktop (>=900px) is deliberately untouched except the two global fixes in §1.
   =========================================================================== */

/* --- §1 GLOBAL: never allow sideways scrolling, never let media overflow --- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, iframe, canvas { max-width: 100%; }
img { height: auto; }
figure { margin-left: 0; margin-right: 0; max-width: 100%; }
pre, code, table { max-width: 100%; overflow-x: auto; }
/* long URLs / unbroken strings must wrap rather than widen the page */
p, li, h1, h2, h3, h4, h5, h6, a, td { overflow-wrap: anywhere; word-break: break-word; }
/* flex/grid children default to min-width:auto, which is the usual overflow cause */
.wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-buttons { min-width: 0; }

/* ===========================================================================
   §2 MOBILE + TABLET  (<= 899px)
   =========================================================================== */
@media (max-width: 899px) {

  :root {
    --rg-gutter: 20px;
    /* Retune the theme's own spacing scale instead of overriding 79 pages.
       Desktop values were 0.44 / 0.67 / 1 / 1.5 / 2.25 / 3.38 / 5.06rem. */
    --wp--preset--spacing--20: 0.375rem;  /*  6px */
    --wp--preset--spacing--30: 0.625rem;  /* 10px */
    --wp--preset--spacing--40: 1.25rem;   /* 20px  <- side gutter */
    --wp--preset--spacing--50: 1.25rem;   /* 20px */
    --wp--preset--spacing--60: 1.75rem;   /* 28px  subsection */
    --wp--preset--spacing--70: 2.25rem;   /* 36px  subsection */
    --wp--preset--spacing--80: 3rem;      /* 48px  major section (was 81px) */
  }

  /* --- §3 FLUID TYPE ------------------------------------------------------ */
  body { font-size: clamp(17px, 4.3vw, 18px); line-height: 1.6; }
  h1, .wp-block-heading.has-xx-large-font-size { font-size: clamp(34px, 9.5vw, 42px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(24px, 6.2vw, 32px) !important; line-height: 1.22; }
  h3 { font-size: clamp(20px, 5vw, 25px) !important; line-height: 1.3; }
  h4 { font-size: clamp(18px, 4.4vw, 21px) !important; line-height: 1.35; }
  h1, h2, h3, h4 { text-wrap: balance; }
  p { line-height: 1.6; }

  /* --- §4 HEADER: no white band, no promo bar -----------------------------
     The header now carries the same brand gradient as the hero that follows it
     (linear-gradient(135deg, #072960 12%, #587EC4 84%)), so the logo reads as
     sitting on the cover. A gradient rather than transparency is deliberate:
     /roofing-blog/ has no hero behind the header, and a white logo on a
     transparent header would vanish there. */
  .homedroid-header {
    background: var(--wp--preset--gradient--primary-gradient) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
  /* the 10% referral promo bar is removed on mobile */
  .homedroid-header > .wp-block-group:first-child { display: none !important; }

  /* --- §5 HEADER: logo + call + hamburger, all white, on one row ---------- */
  .homedroid-header .wp-block-site-logo img.custom-logo {
    width: min(215px, 55vw) !important;
    max-width: 100% !important;
    height: auto !important;
    /* the logo PNG is RGBA, so this yields a clean white mark */
    filter: brightness(0) invert(1);
  }
  .homedroid-header .wp-block-site-logo { line-height: 0; margin: 0; }
  .homedroid-header > .wp-block-group:nth-child(2) {
    padding-top: 12px !important; padding-bottom: 12px !important;
    padding-left: var(--rg-gutter) !important; padding-right: var(--rg-gutter) !important;
  }
  /* hamburger + close: white, 44x44 */
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    min-width: 44px; min-height: 44px;
    display: flex !important; align-items: center; justify-content: center;
    color: #fff !important;
  }
  .wp-block-navigation__responsive-container-open svg,
  .wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; fill: currentColor; }

  /* --- §6 HEADER: one row = logo | hamburger -----------------------------
     The phone number, Dallas/Frisco and the CTA are all removed from the
     mobile header. Measured against the row budget they do not fit: at 320px
     the row has 288px of usable width, and logo + number + hamburger needs
     ~355px, which would have forced a horizontal overflow at every phone
     width. Call and Schedule Roof Inspection are full-width buttons at the
     bottom of the drawer instead, and the phone number is also in the footer. */
  .homedroid-header > .wp-block-group:nth-child(2) .wp-block-group.is-content-justification-space-between {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .homedroid-header > .wp-block-group:nth-child(2) .wp-block-group.is-nowrap:has(.wp-block-site-logo) {
    flex: 0 1 auto !important; min-width: 0; order: 1;
  }
  .homedroid-header > .wp-block-group:nth-child(2) nav {
    flex: 0 0 auto !important; order: 3; margin-left: auto;
  }
  /* the whole contact strip (Call Us / Location / CTA) leaves the mobile header */
  .homedroid-header > .wp-block-group:nth-child(2) .wp-block-group:has(> .wp-block-buttons) {
    display: none !important;
  }

  /* --- §7 BUTTONS / CTA --------------------------------------------------- */
  .wp-block-button__link {
    min-height: 50px; display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 22px !important; font-size: 16px !important; line-height: 1.2;
    border-radius: 8px !important; text-align: center;
  }
  /* content CTAs go near-full width, header CTA fills its flex slot */
  main .wp-block-buttons > .wp-block-button { width: 100%; }
  main .wp-block-buttons > .wp-block-button > .wp-block-button__link { width: 100%; }
  main .wp-block-buttons { gap: 12px; }
  .homedroid-header .wp-block-button__link { padding: 12px 16px !important; font-size: 15px !important; min-height: 48px; }

  /* --- §8 CARDS / COLUMNS / STATS ---------------------------------------- */
  .wp-block-columns { flex-wrap: wrap !important; gap: 20px !important; }
  .wp-block-columns > .wp-block-column { flex-basis: 100% !important; min-width: 0; }
  .rg-grid, .rg-grid-3, .rg-grid-2 {
    display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important;
  }
  .rg-card { width: 100%; box-sizing: border-box; }
  /* compact icon/stat pairs may keep two columns where they genuinely fit */
  .rg-grid.rg-stats, .rg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* --- §9 IMAGES ----------------------------------------------------------
     Minimal and non-invasive. A photograph is never given a width, a height or
     an object-fit by this file; it is only prevented from exceeding its
     container. That is enough to stop overflow while leaving every intrinsic
     ratio, and the gallery plugin"s own layout, exactly as authored.

     History: the first pass forced width:100% on every .wp-block-image img,
     which upscaled the 512x512 award badges to full container width. The
     second pass added carousel-specific height/object-fit/align-items
     overrides on top. Both are removed - the carousel is left to Swiper and
     cozy-addons, which is what desktop uses and what shipped originally. */
  .wp-block-image img,
  .wp-block-post-featured-image img,
  .cozy-block-portfolio-gallery img,
  .swiper-slide img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* safety net: no single image may run away vertically on a phone */
  .cozy-block-portfolio-gallery img,
  .swiper-slide img { max-height: 60vh; }

  .wp-block-cover__image-background { object-fit: cover; }

  /* --- §10 FORMS ---------------------------------------------------------- */
  form input, form select, form textarea, .rg-form input, .rg-form select, .rg-form textarea {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box;
    min-height: 48px; font-size: 16px !important; /* 16px stops iOS zoom-on-focus */
    padding: 12px 14px; border-radius: 8px;
  }
  form textarea, .rg-form textarea { min-height: 120px; }
  form label, .rg-form label { display: block; font-size: 15px; margin-bottom: 6px; }
  form button[type="submit"], .rg-form button, .rg-form input[type="submit"] {
    width: 100% !important; min-height: 52px; font-size: 17px !important;
  }
  /* no squeezed two-column field rows on a phone */
  .rg-form .rg-row, .rg-form .rg-cols, form .rg-row { display: block !important; }
  .rg-form .rg-row > *, form .rg-row > * { width: 100% !important; margin-bottom: 12px; }

  /* --- §11 FOOTER --------------------------------------------------------- */
  footer .wp-block-columns { gap: 24px !important; }
  footer .wp-block-column { flex-basis: 100% !important; }
  footer { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
  footer .wp-block-social-links { justify-content: flex-start; gap: 14px; }
  footer .wp-block-social-link a { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

  /* --- §12 iOS: avoid 100vh, respect dynamic viewport --------------------- */
  .wp-block-cover.is-min-height-100vh, [style*="min-height:100vh"], [style*="min-height: 100vh"] {
    min-height: 100svh !important;
  }
}

/* very narrow phones */
@media (max-width: 359px) {
  :root { --rg-gutter: 16px; --wp--preset--spacing--40: 1rem; }
  .homedroid-header .wp-block-site-logo img.custom-logo { width: min(170px, 55vw) !important; }
  .homedroid-header .wp-block-group:has(> .homedroid-header-call) h5 a { font-size: 15px !important; }
}

/* larger phones get slightly more breathing room */
@media (min-width: 430px) and (max-width: 899px) {
  :root { --rg-gutter: 24px; --wp--preset--spacing--40: 1.5rem; }
}

/* ===========================================================================
   §13 NAVIGATION DRAWER — force the overlay up to 899px so a 5-group menu is
   never crammed into a tablet header, and make it thumb-friendly.
   =========================================================================== */
@media (max-width: 899px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
  .wp-block-navigation__responsive-container.is-menu-open {
    padding: calc(20px + env(safe-area-inset-top, 0px)) var(--rg-gutter) calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 8px; }
  .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

  /* every row is a full-width 48px touch target */
  .is-menu-open .wp-block-navigation-item { width: 100%; }
  .is-menu-open .wp-block-navigation-item__content {
    display: flex; align-items: center; width: 100%;
    min-height: 48px; padding: 6px 0 !important; font-size: 18px !important;
  }
  .is-menu-open .wp-block-navigation__container { gap: 2px !important; width: 100%; }
  .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 16px !important; min-height: 44px; padding-left: 14px !important; opacity: .92;
  }
  /* separator between top-level groups */
  .is-menu-open > .wp-block-navigation__responsive-dialog > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item {
    border-top: 1px solid rgba(255,255,255,.14);
  }

  /* ACCORDION: submenus start collapsed, no hover dependency */
  .rg-js .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
    display: none !important;
  }
  .rg-js .is-menu-open .wp-block-navigation-submenu.rg-open > .wp-block-navigation__submenu-container {
    display: block !important; padding-bottom: 6px;
  }
  /* the toggle itself is a real 44px target sitting at the row's right edge */
  .is-menu-open .wp-block-navigation-submenu {
    position: relative; display: flex; flex-wrap: wrap; align-items: center;
  }
  .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon {
    min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
    margin-left: auto; background: transparent; border: 0;
    transition: transform .18s ease;
  }
  .is-menu-open .wp-block-navigation-submenu.rg-open > .wp-block-navigation__submenu-icon { transform: rotate(180deg); }
  .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation__submenu-container { flex: 0 0 100%; }

  /* bottom actions inside the drawer */
  .rg-drawer-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
  .rg-drawer-actions a {
    display: flex; align-items: center; justify-content: center;
    min-height: 52px; border-radius: 8px; font-weight: 600; font-size: 17px;
    text-decoration: none; padding: 0 18px;
  }
  .rg-drawer-actions .rg-call { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); }
  .rg-drawer-actions .rg-cta  { background: var(--wp--preset--color--secondary, #FBB707); color: #14213d; }
  .rg-drawer-meta { margin-top: 16px; font-size: 14px; opacity: .8; text-align: center; line-height: 1.5; }
}

/* desktop keeps the richer header exactly as it was */
@media (min-width: 900px) {
  .rg-drawer-actions, .rg-drawer-meta { display: none !important; }
}

/* ===========================================================================
   §14 FALLBACK for engines without :has() (iOS Safari < 15.4).
   Sibling selectors reach the same elements without :has(), so the compact
   header still applies; only the flex re-ordering degrades gracefully.
   =========================================================================== */
@supports not selector(:has(*)) {
  @media (max-width: 899px) {
    /* no :has(): reach the same elements via the figures themselves */
    .homedroid-header .wp-block-buttons { display: none !important; }
    .homedroid-header .homedroid-header-call,
    .homedroid-header .homedroid-header-call + .wp-block-group { display: none !important; }
    /* hide the Location figure and the Dallas/Frisco text that follows it */
    .homedroid-header .homedroid-header-location,
    .homedroid-header .homedroid-header-location + .wp-block-group { display: none !important; }
    /* collapse the "Call Us" label, keep the number (white on the gradient) */
    .homedroid-header .homedroid-header-call + .wp-block-group p { display: none !important; }
    .homedroid-header .homedroid-header-call + .wp-block-group h5 { margin: 0 !important; }
    .homedroid-header .homedroid-header-call + .wp-block-group h5 a {
      font-size: 15px !important; font-weight: 700; white-space: nowrap;
      display: inline-flex; align-items: center; min-height: 44px; text-decoration: none;
      color: #fff !important;
    }
    .homedroid-header .homedroid-header-call img { width: 20px !important; height: auto !important; filter: brightness(0) invert(1); }
  }
}

/* ===========================================================================
   §15 HERO — normal document flow, content-driven height
   The header is NOT positioned (the theme's position:fixed
   .homedroid-overlap-nav class is not applied), so nothing overlays the hero.
   What looked like an overlay was zero separation: the hero carries inline
   padding-top:0, and the header now shares the hero's gradient.
   The tall empty blue area was inline min-height:657px on BOTH the hero group
   and its cover - a desktop height inherited onto phones.
   =========================================================================== */
@media (max-width: 899px) {

  /* header keeps its own physical height, always */
  .homedroid-header,
  .wp-block-group.homedroid-header.homedroid-overlap-nav {
    position: static !important;
    z-index: auto;
  }
  header.wp-block-template-part { position: static !important; }

  /* hero height becomes content-driven instead of viewport/desktop-driven */
  main > .wp-block-group:first-child { min-height: 0 !important; height: auto !important; }
  main > .wp-block-group:first-child > .wp-block-cover,
  main > .wp-block-group:first-child .wp-block-cover {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
  }
  /* nothing may pull the hero up under the header */
  main > .wp-block-group:first-child { margin-top: 0 !important; }

  /* breathing room between the header edge and the eyebrow line */
  main > .wp-block-group:first-child > .wp-block-cover {
    padding-top: 26px !important;
    padding-bottom: 40px !important;
  }
  /* covers stack their content rather than spreading it over a tall box */
  main > .wp-block-group:first-child .wp-block-cover__inner-container {
    justify-content: flex-start !important;
  }

  /* hero rhythm: eyebrow -> H1 -> supporting line */
  main > .wp-block-group:first-child h2:first-of-type { margin-bottom: 22px !important; }
  main > .wp-block-group:first-child h1 {
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    font-size: clamp(34px, 9.5vw, 42px) !important;
    line-height: 1.08 !important;
  }
}

/* The only remaining 100vh on the site is WordPress's image lightbox overlay
   (position:fixed, only present while a lightbox is open). It does not affect
   the hero, but dvh behaves correctly under Safari's collapsing toolbar.
   Browsers without dvh ignore this and keep the 100vh fallback. */
.wp-lightbox-overlay { height: 100dvh; }