/*
Theme Name: Divi Child — Green Slate
Theme URI: https://greenslateroofing.com
Description: Child theme of Divi for Green Slate Roofing & Siding. Provides a version-controlled home for theme-level CSS, functions, and template overrides so site customizations survive Divi parent-theme updates. Layout continues to be driven by the Divi Theme Builder; this child changes nothing visually on activation.
Author: sharmanhall
Author URI: https://greenslateroofing.com
Template: Divi
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary — Green Slate Roofing & Siding
Text Domain: divi-child-gsr
*/

/* =============================================================================
   MOBILE RESPONSIVE SWEEP — 2026-06-26 (v1.1.0)
   -----------------------------------------------------------------------------
   Goal: make the mobile/tablet homepage compact, readable and conversion-
   focused without touching desktop. EVERY rule below lives inside a
   `max-width` media query, so anything wider than 980px is byte-for-byte
   unchanged. Targets observed live on greenslateroofing.com (Divi 4.27.7 +
   Theme Builder header #74, where the homepage hero fullwidth-header also
   lives).

   Breakpoints:
     <= 980px  Divi "tablet" — hamburger shows here; compact the header stack.
     <= 767px  Divi "phone"  — hero readability, body type, spacing, CookieYes.

   Rollback: restore this file to the v1.0.0 no-op (git history) and re-upload
   via SFTP, then purge Divi + Cloudflare caches. No DB / Theme-Builder edits
   were made, so reverting the file fully reverts the change.
   `!important` is used deliberately: Divi emits per-module ID/inline styles
   that otherwise win the cascade.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1) HEADER STACK + MOBILE MENU BUTTON  (tablet + phone, <= 980px)
   The call-bar / logo / menu sections stacked to ~210px before the hero.
   Tighten their padding and slim the green hamburger pill (kept green +
   >=44px tap target per the deliberate #82 styling — just less bulky).
   --------------------------------------------------------------------------- */
@media (max-width: 980px) {
  /* Compact the three stacked header sections (call bar, logo, menu) */
  .et-l--header .et_pb_section {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  /* Call-us bar: remove the 10px top gap, keep the tel: link tappable */
  .et-l--header .et_pb_text_0_tb_header { margin-top: 0 !important; }
  .gsr-call-link {
    font-size: 16px !important;
    padding: 6px 10px !important;
    min-height: 44px !important;
  }
  /* Logo: trim whitespace beneath it so the menu sits closer */
  .et-l--header .et_pb_image { margin-bottom: 0 !important; }
  .et-l--header .et_pb_menu { margin-top: 0 !important; }

  /* Mobile menu button: keep brand green + rounded, lose the bulk */
  .et-l--header .mobile_nav,
  .et-l--header .mobile_nav.closed {
    padding: 8px 14px !important;
    min-height: 44px !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    font-size: 14px !important;        /* shrinks any "MENU" label */
  }
  .et-l--header .mobile_menu_bar:before { font-size: 22px !important; } /* hamburger glyph */
}

/* ---------------------------------------------------------------------------
   2) HOMEPAGE HERO  (phone only, <= 767px)
   Module had 100px top + 100px bottom padding and no scrim. Pull it up,
   add a dark gradient for contrast, and let the headline use full width at a
   readable size so it stops wrapping to 8 cramped lines. Headline TEXT is
   left intact (it's the SEO H1 / Front-Range positioning) — CSS only.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .et_pb_fullwidth_header_0_tb_header {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
    position: relative !important;
  }
  /* Dark gradient scrim for legible white text over the roofline */
  .et_pb_fullwidth_header_0_tb_header:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.32) 45%,
      rgba(0, 0, 0, 0.58) 100%);
    pointer-events: none;
  }
  /* Keep text above the scrim. Do NOT force width:100% here — the container
     keeps its ~39px side gutters; forcing 100% fought that margin and pushed
     the right edge off-screen (clipped headline). */
  .et_pb_fullwidth_header_0_tb_header .et_pb_fullwidth_header_container,
  .et_pb_fullwidth_header_0_tb_header .header-content-container {
    position: relative !important;
    z-index: 1 !important;
  }
  /* Widen the headline column: Divi's .header-content has ~31px side margins
     that squeezed the H1 to ~230px → 8 cramped lines. Trim them (margins only
     — never width, which would overflow) so the H1 wraps to ~4 lines. NOTE:
     do NOT touch the parent .et_pb_fullwidth_header_container margins — it uses
     `margin:0 auto` centering and overriding it re-narrows the headline. */
  .et_pb_fullwidth_header_0_tb_header .header-content {
    margin-left: 8px !important;
    margin-right: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  /* Fluid headline: ~20px on a 320 phone → caps at 26px on big phones, so it
     stays readable and wraps to ~4-5 lines across the whole phone range. */
  .et_pb_fullwidth_header_0_tb_header h1.et_pb_module_header {
    font-size: clamp(20px, 6.2vw, 26px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    padding-bottom: 6px !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important;
    overflow-wrap: break-word;
  }
  .et_pb_fullwidth_header_0_tb_header .et_pb_header_content,
  .et_pb_fullwidth_header_0_tb_header .et_pb_fullwidth_header_subhead {
    font-size: 16px !important;
    line-height: 1.5 !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55) !important;
  }
}

/* ---------------------------------------------------------------------------
   3) TYPOGRAPHY + SECTION SPACING  (phone only, <= 767px)
   Body copy rendered at 21px centered ("huge"). Tame paragraph text to ~17px;
   headings keep their own Divi sizes (only normalised where oversized).
   Trim heavy section padding so pages don't feel like padded whitespace.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .et-l--body .et_pb_text_inner {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }
  .et-l--body h1, body.home .et-l--body h1 { font-size: 30px !important; line-height: 1.2 !important; }
  .et-l--body h2 { font-size: 27px !important; line-height: 1.25 !important; }
  .et-l--body h3 { font-size: 22px !important; line-height: 1.3 !important; }

  .et-l--body .et_pb_section { padding-top: 30px !important; padding-bottom: 30px !important; }
  /* Buttons: readable, full-tap, not cartoonish */
  .et-l--body .et_pb_button { font-size: 16px !important; padding: 0.5em 1.2em !important; }
}

/* ---------------------------------------------------------------------------
   4) COOKIEYES CONSENT BANNER  (phone only, <= 767px)
   The bottom-left box (z-index 9999999, ~318px tall) covered the lower hero /
   intro — this is the "floating widget overlapping content". Re-style to a
   slim full-width bottom sheet with a compact wrapping button row. Consent
   logic untouched (legal); purely visual footprint reduction. Sits ABOVE the
   sticky call bar (see §5) via `bottom`.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .cky-consent-container.cky-box-bottom-left {
    left: 0 !important;
    right: 0 !important;
    bottom: 58px !important;          /* clear the sticky call bar */
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
  .cky-consent-container .cky-consent-bar {
    padding: 12px 14px !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12) !important;
    border-radius: 0 !important;
  }
  .cky-consent-container .cky-title { font-size: 15px !important; margin-bottom: 4px !important; }
  .cky-consent-container .cky-notice-des,
  .cky-consent-container .cky-notice-des * { font-size: 12.5px !important; line-height: 1.45 !important; }
  .cky-consent-container .cky-notice-btn-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }
  .cky-consent-container .cky-btn {
    flex: 1 1 auto !important;
    min-width: 92px !important;
    margin: 0 !important;
    padding: 9px 10px !important;
  }
  /* Keep Google's reCAPTCHA badge clear of the bottom UI */
  .grecaptcha-badge { bottom: 120px !important; }
}

/* ---------------------------------------------------------------------------
   5) STICKY MOBILE CLICK-TO-CALL CTA  (tablet + phone, <= 980px)
   The hero has no CTA and the only action was the small top phone link.
   functions.php prints `#gsr-mobile-callbar` in wp_footer (front-end only).
   This styles it as a persistent, thumb-reachable primary action. Hidden by
   default; only shown inside this media query so desktop never sees it.
   --------------------------------------------------------------------------- */
#gsr-mobile-callbar { display: none; }

@media (max-width: 980px) {
  #gsr-mobile-callbar {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99990;             /* below CookieYes so consent can sit above */
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 8px 16px;
    background: #5a8e22;        /* brand green = rgb(90,142,34) */
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-decoration: none;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
  }
  #gsr-mobile-callbar:hover,
  #gsr-mobile-callbar:focus,
  #gsr-mobile-callbar:visited { color: #fff; text-decoration: none; }
  #gsr-mobile-callbar .gsr-cb-icon { font-size: 18px; line-height: 1; }
  /* Reserve space so the fixed bar never hides footer content */
  body.gsr-has-callbar #page-container { padding-bottom: 52px; }
}