/* ==========================================================
   TRUE NORTH – Header with Background Image
   Matches reference design: sunset bg, logo left,
   phone+email right, nav centered on image, ~120px height.
   ========================================================== */

/* --- Hide the original nav-menu branding/logo --- */
.fixedhead .nav-menu-wrapper .branding {
  display: none !important;
}

/* --- Hide address button & its parent column across ALL pages --- */
/* Target by aria-label so it works regardless of per-page element IDs */
.fixedhead .c-button:has(a[aria-label*="4913 Yorkshire"]),
.fixedhead .c-button:has(button[aria-label*="4913 Yorkshire"]),
.fixedhead .c-column:has(a[aria-label*="4913 Yorkshire"]),
.fixedhead .c-column:has(button[aria-label*="4913 Yorkshire"]),
.fixedhead a[aria-label*="4913 Yorkshire"],
.fixedhead button[aria-label*="4913 Yorkshire"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Ensure header is always fixed --- */
.fixedhead {
  position: fixed !important;
  width: 100% !important;
  top: 0 !important;
  z-index: 99 !important;
  background: #f1f1f1 !important;

}

/* --- Desktop: Grid layout --- */
@media only screen and (min-width: 768px) {

  /* Section inner becomes a 2-column grid */
  .fixedhead>.inner {
    display: grid !important;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto auto;
    align-items: stretch;
    max-height: 200px;
  }

  /* Logo via ::before pseudo-element, spans both rows */
  .fixedhead>.inner::before {
    content: '';
    grid-column: 1;
    grid-row: 1 / 3;
    background: url('/local_assets/custom/icon-header.png') left center / cover no-repeat;
    margin: -10px 0 -10px -10px;
    min-height: 180px;
    z-index: 2;
  }

  /* --- Fix white space gap below header on subpages --- */
  /* The preview-container margin-top and section paddings can leave excess space */
  #preview-container {
    margin-top: 160px !important;
  }

  /* Reduce over-large top padding on the About Us hero banner section */
  .hl_page-preview--content .section-5SZAiBVcIf {
    padding-top: 20px !important;
  }


  /* All rows go into column 2 */
  .fixedhead>.inner>.c-row {
    grid-column: 2;
  }

  /* Row 1 (Contact bar): semi-transparent strip on right */
  .fixedhead>.inner>.c-row:nth-of-type(2) {
    padding: 6px 20px 6px 0 !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.0) !important;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0;
    border-bottom: none;
  }

  /* Contact bar text: white on background */
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button a,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button button,
  .fixedhead>.inner>.c-row:nth-of-type(2) .main-heading-button,
  .fixedhead>.inner>.c-row:nth-of-type(2) .sub-heading-button {
    color: #1a2a3a !important;
    font-weight: 600 !important;
  }

  /* Contact bar font-size */
  .fixedhead .c-button .main-heading-button {
    font-size: 15px !important;
  }

  /* Contact bar inner containers: transparent background */
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-column,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-column>.inner,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button a,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button button {
    background: transparent !important;
  }

  /* Contact bar columns: auto-width, inline */
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-column {
    width: auto !important;
    flex: none !important;
  }

  .fixedhead>.inner>.c-row:nth-of-type(2) .inner {
    padding: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px;
  }

  /* Phone/email icon styling via font-awesome or unicode */
  .fixedhead>.inner>.c-row:nth-of-type(2) .button-icon-start {
    color: #1a2a3a !important;
    font-size: 14px !important;
  }

  /* Row 2 (Nav): centered on background */
  .fixedhead>.inner>.c-row:nth-of-type(3) {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Nav column: take full width */
  .fixedhead .c-column:has(.c-nav-menu),
  .fixedhead .c-column:has(.c-nav-menu)>.inner {
    width: 100% !important;
  }

  /* --- Desktop Nav Bar Styling --- */
  .fixedhead .nav-menu-wrapper {
    background: transparent;
    padding: 0;
    border-radius: 0;
  }

  .fixedhead .nav-menu-wrapper .cart-nav-wrapper {
    justify-content: center !important;
    width: 100%;
    background: transparent;
    padding: 0 5px;
    width: fit-content;
    margin: 0 auto;
    border-radius: 4px;
  }

  .fixedhead .nav-menu-wrapper .nav-menu {
    display: flex !important;
    justify-content: center !important;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
  }

  .fixedhead .nav-menu-wrapper .nav-menu .nav-menu-item {
    margin: 0 2px;
  }

  .fixedhead .nav-menu-wrapper .nav-menu .nav-menu-item>a {
    color: #080606 !important;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 14px 30px;
    margin: 0;
    display: block;
    text-decoration: none;
    letter-spacing: 1.5px;
    transition: color 0.2s, text-shadow 0.2s;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }

  .fixedhead .nav-menu-wrapper .nav-menu .nav-menu-item>a:hover {
    color: #4a589a !important;
    background: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  }

  /* Dropdown styling */
  .fixedhead .nav-menu-wrapper .nav-menu .nav-menu-item.dropdown,
  .fixedhead .cart-nav-wrapper .nav-menu .nav-menu-item.dropdown {
    position: relative;
  }

  .fixedhead .nav-menu-wrapper .dropdown-menu,
  .fixedhead .cart-nav-wrapper .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    min-width: 220px;
    padding: 6px 0;
    list-style: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .fixedhead .nav-menu-wrapper .nav-menu .nav-menu-item.dropdown:hover>.dropdown-menu,
  .fixedhead .cart-nav-wrapper .nav-menu .nav-menu-item.dropdown:hover>.dropdown-menu {
    display: block;
  }

  .fixedhead .nav-menu-wrapper .dropdown-menu .dropdown-item a,
  .fixedhead .cart-nav-wrapper .dropdown-menu .dropdown-item a {
    color: #333 !important;
    font-size: 15px;
    padding: 10px 20px;
    display: block;
    text-decoration: none;
    font-weight: 500;
    text-shadow: none;
    transition: background 0.2s, color 0.2s;
  }

  .fixedhead .nav-menu-wrapper .dropdown-menu .dropdown-item a:hover,
  .fixedhead .cart-nav-wrapper .dropdown-menu .dropdown-item a:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #e65100 !important;
  }

  /* Row 3+ (spacer/extras): span full width, collapse */
  .fixedhead>.inner>.c-row:nth-of-type(n+4) {
    grid-column: 1 / -1;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }
}

/* --- Tablet: Scale down contact & nav to prevent horizontal overflow --- */
@media only screen and (min-width: 768px) and (max-width: 1200px) {

  /* Reduce logo column width slightly */
  .fixedhead>.inner {
    grid-template-columns: 180px 1fr !important;
  }

  /* Adjust logo sizing for tablet */
  .fixedhead>.inner::before {
    margin-bottom: 0 !important;
    min-height: 110px;
  }

  /* Scale down contact phone/email text */
  .fixedhead .c-button .main-heading-button {
    font-size: 12px !important;
  }

  /* Reduce padding on nav items */
  .fixedhead .nav-menu-wrapper .nav-menu .nav-menu-item>a {
    font-size: 14px !important;
    padding: 12px 14px !important;
    letter-spacing: 1px !important;
  }
}

/* --- Mobile: 3-row grid (Call bar | Logo row | Hamburger + CALL row) --- */
@media only screen and (max-width: 767px) {

  .fixedhead {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    background: #ffffff !important;
  }

  /* Grid: 3 rows. Row 2 = fixed height so logo fills the row completely */
  .fixedhead>.inner {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto 95px auto;
    position: relative;
    background: #ffffff !important;
  }

  /* ROW 1: Full-width Call Now bar */
  .tn-mobile-phone-bar {
    grid-column: 1;
    grid-row: 1;
    display: block !important;
    text-align: center;
    background: #122c4a !important;
    padding: 10px 14px;
  }

  .tn-mobile-phone-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
  }

  .tn-mobile-phone-bar a::before {
    content: '\260E';
    font-size: 16px;
  }

  .tn-mobile-phone-bar .main-heading-button {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0;
  }

  .tn-mobile-phone-bar .main-heading-button::after {
    content: 'Call Now: +1 (423) 813-9237';
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
  }

  .tn-mobile-phone-bar .sub-heading-button {
    display: none !important;
  }

  .tn-mobile-phone-bar * {
    text-decoration: none !important;
  }

  /* ROW 2: Logo fills the entire grid row */
  .fixedhead>.inner::before {
    content: '';
    grid-column: 1;
    grid-row: 2;
    display: flex;
    width: 82%;
    height: 122%;
    min-height: 90%;
    background: url('/local_assets/custom/icon-header.png') left center / cover no-repeat;
    background-color: #ffffff;
  }

  .fixedhead>.inner>.c-row:nth-of-type(2) {
    grid-column: 1;
    grid-row: 2;
    padding: 0;
    margin: 0;
    height: 0;
    overflow: hidden !important;
    position: static !important;
    /* so CALL button’s absolute position uses .inner */
  }

  .fixedhead>.inner>.c-row:nth-of-type(2) .c-column,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button {
    position: static !important;
  }

  .fixedhead #button-VXMe-Mg60J,
  .fixedhead #button-g7vHkmfN5Q,
  .fixedhead #button-7DJQJ1Xzqa {
    display: none !important;
  }

  /* ROW 3: 3-column grid — Hamburger | space | CALL */
  .fixedhead>.inner>.c-row:nth-of-type(3) {
    grid-column: 1;
    grid-row: 3;
    padding: 0;
    margin: 0;
    min-height: 48px;
    background: #ffffff !important;
    border-top: 1px solid #e8ecf1;
  }

  .fixedhead>.inner>.c-row:nth-of-type(3)>.inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    width: 100% !important;
  }

  .fixedhead>.inner>.c-row:nth-of-type(3)>.inner>.c-column {
    grid-column: 1 !important;
    justify-self: start;
    width: auto !important;
  }

  .fixedhead>.inner>.c-row:nth-of-type(3) .nav-menu-wrapper {
    padding: 0 !important;
    background: transparent !important;
  }

  .fixedhead>.inner>.c-row:nth-of-type(3) .nav-menu-wrapper .nav-menu {
    display: none;
  }

  .fixedhead>.inner>.c-row:nth-of-type(3) .nav-menu-wrapper .nav-menu-mobile {
    display: block !important;
    margin-left: 10px !important;
  }

  /* CALL button: same row as nav (row 3), right-aligned — index (by ID) and all pages (by tel: link in row 2) */
  .fixedhead #button-iyat8w2bnQ,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button:has(a[href^="tel:"]) {
    display: block !important;
    position: absolute !important;
    right: 14px !important;
    bottom: 10px !important;
    top: auto !important;
    left: auto !important;
    z-index: 6 !important;
  }

  /* Ensure .inner is the positioning context so bottom = end of header (nav row) */
  .fixedhead>.inner {
    position: relative !important;
  }

  /* Pill styling: index button and any row-2 tel: button on other pages */
  .fixedhead #button-iyat8w2bnQ_btn,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button:has(a[href^="tel:"]) a,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button:has(a[href^="tel:"]) [id$="_btn"] {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 20px !important;
    font-size: 100px !important;
    /* Added font size for button text */
    background: #1b3a5c !important;
    border-radius: 22px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    color: #ffffff !important;
    text-decoration: none !important;
    border: 0 !important;
  }

  .fixedhead #button-iyat8w2bnQ_btn .main-heading-group,
  .fixedhead #button-iyat8w2bnQ_btn .sub-heading-group,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button:has(a[href^="tel:"]) .main-heading-group,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button:has(a[href^="tel:"]) .sub-heading-group,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button:has(a[href^="tel:"]) .main-heading-button,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button:has(a[href^="tel:"]) .sub-heading-button {
    display: none !important;
  }

  .fixedhead #button-iyat8w2bnQ_btn::before,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button:has(a[href^="tel:"]) a::before,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button:has(a[href^="tel:"]) [id$="_btn"]::before {
    content: '\260E';
    font-size: 16px;
    margin-right: 8px;
  }

  .fixedhead #button-iyat8w2bnQ_btn::after,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button:has(a[href^="tel:"]) a::after,
  .fixedhead>.inner>.c-row:nth-of-type(2) .c-button:has(a[href^="tel:"]) [id$="_btn"]::after {
    content: 'CALL';
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #ffffff;
  }

  .fixedhead>.inner>.c-row:nth-of-type(n+4) {
    grid-column: 1 / -1;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  .preview-container.hl_page-preview--content {
    margin-top: 155px !important;
  }

  /* Footer — tighten spacing between links on mobile */
  .section-Q8Ox7JckpQ .c-column,
  .section-qqLT9Dr-eu .c-column,
  .section-AolTGdg7ZD .c-column,
  .section-0XuG6Iqi3L .c-column {
    padding: 5px 10px !important;
  }

  .section-Q8Ox7JckpQ .c-button,
  .section-qqLT9Dr-eu .c-button,
  .section-AolTGdg7ZD .c-button,
  .section-0XuG6Iqi3L .c-button {
    margin: 2px 0 !important;
    padding: 0 !important;
  }

  .section-Q8Ox7JckpQ .c-button a,
  .section-qqLT9Dr-eu .c-button a,
  .section-AolTGdg7ZD .c-button a,
  .section-0XuG6Iqi3L .c-button a,
  .section-Q8Ox7JckpQ .c-button button,
  .section-qqLT9Dr-eu .c-button button,
  .section-AolTGdg7ZD .c-button button,
  .section-0XuG6Iqi3L .c-button button {
    padding: 4px 0 !important;
  }

  .section-Q8Ox7JckpQ .c-sub-heading,
  .section-qqLT9Dr-eu .c-sub-heading,
  .section-AolTGdg7ZD .c-sub-heading,
  .section-0XuG6Iqi3L .c-sub-heading {
    margin: 5px 0 !important;
    padding: 0 !important;
  }
}

/* Hide phone bar on desktop */
.tn-mobile-phone-bar {
  display: none;
}

/* ==========================================================
   Footer icon — force icon-footer.png on every page (desktop)
   Use background-image so it works regardless of img src in HTML.
   ========================================================== */
@media only screen and (min-width: 768px) {

  .section-Q8Ox7JckpQ .c-row .c-column:first-child .c-image .image-container,
  .section-qqLT9Dr-eu .c-row .c-column:first-child .c-image .image-container,
  .section-AolTGdg7ZD .c-row .c-column:first-child .c-image .image-container,
  .section-0XuG6Iqi3L .c-row .c-column:first-child .c-image .image-container {
    background-image: url('/local_assets/custom/icon-footer.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    /* min-height: 80px !important; */
  }

  .section-Q8Ox7JckpQ .c-row .c-column:first-child .c-image .image-container img,
  .section-qqLT9Dr-eu .c-row .c-column:first-child .c-image .image-container img,
  .section-AolTGdg7ZD .c-row .c-column:first-child .c-image .image-container img,
  .section-0XuG6Iqi3L .c-row .c-column:first-child .c-image .image-container img {
    opacity: 0 !important;
    max-width: 300px !important;
    height: auto !important;
    /* margin-bottom: -15px; */
  }
}

/* ==========================================================
   Footer service links — bold text
   ========================================================== */
a[href*="roofingandgutters"] .main-heading-button,
a[href*="sidingandwindows"] .main-heading-button,
a[href*="garagedoorsandflooring"] .main-heading-button {
  font-weight: 700 !important;
}

/* ==========================================================
   Home page footer — fix About Us / Contact Us / Codes column
   The inline styles have 30px top + 40px left padding on the
   column and 80px right margin + 20px top padding on buttons.
   ========================================================== */
@media only screen and (min-width: 768px) {
  #col-GKtKHCf0Jd {
    padding: 30px 0 0 40px !important;
  }

  #col-GKtKHCf0Jd .c-button {
    margin: 0 !important;
  }

  #col-GKtKHCf0Jd .c-button a,
  #col-GKtKHCf0Jd .c-button button {
    padding: 20px 0 0 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #col-GKtKHCf0Jd .c-button .main-heading-group {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  #col-GKtKHCf0Jd .c-button .button-icon-start,
  #col-GKtKHCf0Jd .c-button .button-icon-end {
    margin: 0 !important;
  }
}

/* ==========================================================
   Clickable phone & email — visual cues
   ========================================================== */

/* Phone button in header contact bar (rendered as <a>) */
.fixedhead>.inner>.c-row:nth-of-type(2) a[aria-label*="(423) 813-9237"],
/* Email button in header contact bar (rendered as <button>) */
.fixedhead>.inner>.c-row:nth-of-type(2) button[aria-label*="Glenn.e@tnroofingandrestoration.com"],
/* Footer phone & email */
a[aria-label*="(423) 813-9237"],
button[aria-label*="Glenn.e@tnroofingandrestoration.com"] {
  cursor: pointer !important;
}

.fixedhead>.inner>.c-row:nth-of-type(2) a[aria-label*="(423) 813-9237"] .main-heading-button,
.fixedhead>.inner>.c-row:nth-of-type(2) button[aria-label*="Glenn.e@tnroofingandrestoration.com"] .main-heading-button {
  text-decoration: underline !important;
}

.fixedhead>.inner>.c-row:nth-of-type(2) a[aria-label*="(423) 813-9237"]:hover .main-heading-button,
.fixedhead>.inner>.c-row:nth-of-type(2) button[aria-label*="Glenn.e@tnroofingandrestoration.com"]:hover .main-heading-button {
  color: #e65100 !important;
}

/* ==========================================================
   Footer — mobile landscape fix (481px–767px)
   The inline styles only handle 0–480px (portrait) and 481px+
   (desktop). Landscape mobile falls into the desktop range,
   breaking the 4-column layout on a narrow screen.
   Footer section IDs differ per page, so we target all of them.
   ========================================================== */
@media only screen and (min-width: 481px) and (max-width: 767px) {

  /* Hero Contact Us buttons — fix huge side margins crushing them */
  .button-TcKpyJsd4f,
  .button-NTwG6xO874 {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  /* Footer sections — uniform padding */
  .section-Q8Ox7JckpQ,
  .section-qqLT9Dr-eu,
  .section-AolTGdg7ZD,
  .section-0XuG6Iqi3L {
    padding: 20px 20px !important;
    margin: 0 !important;
  }

  /* Footer rows — uniform spacing */
  .section-Q8Ox7JckpQ .c-row,
  .section-qqLT9Dr-eu .c-row,
  .section-AolTGdg7ZD .c-row,
  .section-0XuG6Iqi3L .c-row {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Stack footer columns vertically — all pages */
  .section-Q8Ox7JckpQ .c-row>.inner,
  .section-qqLT9Dr-eu .c-row>.inner,
  .section-AolTGdg7ZD .c-row>.inner,
  .section-0XuG6Iqi3L .c-row>.inner {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Make each footer column full width with equal spacing */
  .section-Q8Ox7JckpQ .c-column,
  .section-qqLT9Dr-eu .c-column,
  .section-AolTGdg7ZD .c-column,
  .section-0XuG6Iqi3L .c-column {
    width: 100% !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Column inner — equal spacing */
  .section-Q8Ox7JckpQ .c-column>.inner,
  .section-qqLT9Dr-eu .c-column>.inner,
  .section-AolTGdg7ZD .c-column>.inner,
  .section-0XuG6Iqi3L .c-column>.inner {
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
  }

  /* Center text headings with uniform margin */
  .section-Q8Ox7JckpQ .c-sub-heading,
  .section-qqLT9Dr-eu .c-sub-heading,
  .section-AolTGdg7ZD .c-sub-heading,
  .section-0XuG6Iqi3L .c-sub-heading {
    text-align: center !important;
    margin: 5px 0 !important;
    padding: 0 !important;
  }

  /* Center buttons with uniform spacing */
  .section-Q8Ox7JckpQ .c-button,
  .section-qqLT9Dr-eu .c-button,
  .section-AolTGdg7ZD .c-button,
  .section-0XuG6Iqi3L .c-button {
    text-align: center !important;
    margin: 2px 0 !important;
    padding: 0 !important;
  }

  /* Center the footer logo with uniform spacing */
  .section-Q8Ox7JckpQ .c-image,
  .section-qqLT9Dr-eu .c-image,
  .section-AolTGdg7ZD .c-image,
  .section-0XuG6Iqi3L .c-image {
    text-align: center !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
  }

  /* Reduce footer logo size in landscape */
  .section-Q8Ox7JckpQ .c-image img,
  .section-qqLT9Dr-eu .c-image img,
  .section-AolTGdg7ZD .c-image img,
  .section-0XuG6Iqi3L .c-image img {
    max-width: 120px !important;
    height: auto !important;
  }

  /* Copyright bar — all page variants, equal spacing */
  .section-IfLmpmDKts,
  .section-84QQFZ1l-X,
  .section-D_tUgGT_ww {
    padding: 15px 20px !important;
    margin: 0 !important;
  }

  .section-IfLmpmDKts .c-column,
  .section-84QQFZ1l-X .c-column,
  .section-D_tUgGT_ww .c-column {
    padding: 10px 20px !important;
    margin: 0 !important;
    text-align: center !important;
  }
}

/* ==========================================================
   Footer icon — mobile: force icon-footer.png and ensure it shows
   ========================================================== */
@media only screen and (max-width: 767px) {

  /* Force icon-footer.png as background so footer icon shows on every page */
  .section-Q8Ox7JckpQ .c-row .c-column:first-child .c-image .image-container,
  .section-qqLT9Dr-eu .c-row .c-column:first-child .c-image .image-container,
  .section-AolTGdg7ZD .c-row .c-column:first-child .c-image .image-container,
  .section-0XuG6Iqi3L .c-row .c-column:first-child .c-image .image-container {
    background-image: url('/local_assets/custom/icon-footer.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    min-height: 180px !important;
    display: block !important;
    width: 100% !important;
    max-width: var(--tn-footer-icon-mobile, 280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .section-Q8Ox7JckpQ .c-row .c-column:first-child .c-image img,
  .section-qqLT9Dr-eu .c-row .c-column:first-child .c-image img,
  .section-AolTGdg7ZD .c-row .c-column:first-child .c-image img,
  .section-0XuG6Iqi3L .c-row .c-column:first-child .c-image img {
    opacity: 0 !important;
    max-width: var(--tn-footer-icon-mobile, 280px) !important;
    height: auto !important;
  }

  /* Ensure first column (logo) is visible on mobile — override desktop-only */
  .section-Q8Ox7JckpQ .c-row .c-column:first-child,
  .section-qqLT9Dr-eu .c-row .c-column:first-child,
  .section-AolTGdg7ZD .c-row .c-column:first-child,
  .section-0XuG6Iqi3L .c-row .c-column:first-child {
    display: block !important;
    visibility: visible !important;
  }

  .section-Q8Ox7JckpQ .c-row .c-column:first-child .c-image,
  .section-qqLT9Dr-eu .c-row .c-column:first-child .c-image,
  .section-AolTGdg7ZD .c-row .c-column:first-child .c-image,
  .section-0XuG6Iqi3L .c-row .c-column:first-child .c-image {
    display: block !important;
    visibility: visible !important;
  }
}

/* ==========================================================
   Banner Video - Exact match to live tnroofingandrestoration.com
   ========================================================== */

/* Ensure video focal point shows the roof */
.section-nEKlP5H8L5 .bgVideo.cover {
  object-position: center top !important;
}

/* Fill full viewport height and center text with padding (no flex — avoids layout conflicts) */
.section-nEKlP5H8L5 {
  min-height: calc(100vh + 135px) !important;
  padding-top: calc(50vh - 15px) !important;
  padding-bottom: 100px !important;
  box-sizing: border-box !important;
}

/* Mobile: use fixed padding instead of calc */
@media screen and (min-width: 0px) and (max-width: 480px) {
  .section-nEKlP5H8L5 {
    padding-top: 140px !important;
    padding-bottom: 140px !important;
  }
}

/* ==========================================================
   NEW FOOTER STYLES & HIDING OLD BUILDER FOOTERS
   ========================================================== */

/* HIDE OLD FOOTERS */
.section-Q8Ox7JckpQ,
.section-IfLmpmDKts,
.section-qqLT9Dr-eu,
.section-AolTGdg7ZD,
.section-0XuG6Iqi3L,
.section-84QQFZ1l-X,
.section-D_tUgGT_ww {
  display: none !important;
}

/* 2. FOOTER BACKGROUND */
.footer {
  margin-top: auto;
  /* Pushes footer to bottom */
  background:
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.85)),
    url('../local_assets/custom/footer-bg3.jpg') top/cover no-repeat;
  color: #fff;
  padding: 80px 15px 0px;
  /* 0 bottom padding because bottom-bar handles it */
}

/* 3. GLASS CARD CONTAINER */
.footer-container {
  max-width: 1150px;
  margin: 0 auto 50px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 50px 40px;

  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1fr;
  gap: 30px;
  align-items: center;
}

/* 4. LOGO */
.footer-logo {
  text-align: center;
}

.footer-logo img {
  width: 250px;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s ease;
}

.footer-logo img:hover {
  transform: scale(1.05);
}

/* 5. HEADINGS */
.footer-links h3,
.footer-contact h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 25px;
  letter-spacing: 1.5px;
  color: #4da3ff;
  /* Professional Blue Accent */
  text-transform: uppercase;
}

/* 6. LINKS GRID (Fixes the drifting look) */
.links-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 15px 20px;
}

.links-grid a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 500;
  transition: 0.3s;
  white-space: nowrap;
}

.links-grid a:hover {
  color: #4da3ff;
  transform: translateX(5px);
}

/* 7. CONTACT SECTION (Centered Alignment) */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-contact p {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.footer-contact span {
  font-size: 18px;
  background: rgba(255, 255, 255, 0.08);
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.footer-contact a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s;
}

.footer-contact a:hover {
  color: #4da3ff;
}

/* 8. BOTTOM COPYRIGHT BAR */
.footer-bottom {
  text-align: center;
  padding: 30px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.2);
}

.bottom-nav {
  margin-bottom: 10px;
}

.bottom-nav a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  margin: 0 10px;
}

.bottom-nav a:hover {
  color: #fff;
}

/* ================= MOBILE OPTIMIZATION ================= */
@media (max-width: 900px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
    padding: 40px 20px;
  }

  .footer-links h3,
  .footer-contact h3 {
    text-align: center;
  }

  .links-grid {
    grid-template-columns: 1fr;
    /* Single column for better thumb-tap space */
    justify-items: center;
  }

  .footer-contact {
    align-items: center;
  }

  .footer-contact p {
    flex-direction: column;
    /* Icon above text */
    gap: 8px;
    word-break: break-all;
  }
}