/* Alberta Foundation Repair - Custom Styles v1.2 */

/* Force logo display */
.site-branding a.brand {
  display: flex;
  align-items: center;
  min-height: 70px;
}
.site-branding a.brand::before {
  content: '';
  display: block;
  width: 220px;
  height: 70px;
  background: url('https://albertafoundationrepair.ca/wp-content/uploads/2026/04/logo-white.png') no-repeat center/contain;
}

/* Navy header */
.site-header, #masthead { background: #1E3A5F !important; }
.site-header .site-branding .site-title,
.site-header .site-branding .site-title a,
.header-navigation .menu > li > a,
#primary-menu > li > a,
.site-header-wrap .primary-menu-container .menu > li > a { color: #FFFFFF !important; }
#primary-menu > li > a:hover { color: #C9A227 !important; }

/* Header CTA button */
.header-button .button, .header-button a.button {
  background: #F86008 !important;
  color: white !important;
  font-weight: 700;
  border-radius: 8px;
}

/* Top bar */
.site-header .site-top-header-wrap, .header-top, .kadence-top-header {
  background: #0A0A0A !important; color: #E8E6E1; font-size: 13px;
}
.site-header .site-top-header-wrap a, .header-top a { color: #C9A227 !important; }

/* Hide ALL Kadence/WP footer branding */
.site-footer { display: none !important; }
.powered-by-developer, .developer-link, .kadence-developer-link,
footer .developer-link, .site-info .developer-link { display: none !important; }

/* ===== CUSTOM FOOTER (Groundworks style) ===== */
.afr-footer {
  background: #1E3A5F;
  color: #9db4cc;
  padding: 50px 40px 0;
}
.afr-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}
.afr-footer-brand {
  font-size: 20px;
  font-weight: 700;
  color: white;
  margin-bottom: 16px;
}
.afr-footer-btn-primary {
  display: inline-block;
  padding: 12px 28px;
  background: #0A0A0A;
  color: white !important;
  font-weight: 700;
  font-size: 14px;
  border-radius: 4px;
  text-decoration: none;
  margin-bottom: 10px;
}
.afr-footer-btn-primary:hover { background: #C9A227; color: #0A0A0A !important; }
.afr-footer-btn-outline {
  display: inline-block;
  padding: 12px 28px;
  border: 2px solid white;
  color: white !important;
  font-weight: 600;
  font-size: 14px;
  border-radius: 4px;
  text-decoration: none;
}
.afr-footer-btn-outline:hover { background: white; color: #1E3A5F !important; }
.afr-footer-phone-wrap { margin-top: 24px; }
.afr-footer-label { font-size: 14px; color: #9db4cc; margin-bottom: 4px; }
.afr-footer-phone {
  font-size: 18px; font-weight: 700; color: white !important; text-decoration: none;
}
.afr-footer-heading {
  font-size: 14px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.afr-footer-col a {
  display: block;
  color: #9db4cc !important;
  text-decoration: none;
  font-size: 14px;
  padding: 4px 0;
}
.afr-footer-col a:hover { color: white !important; }
.afr-footer-bottom {
  max-width: 1200px;
  margin: 30px auto 0;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #6b8aaa;
}
.afr-footer-bottom a { color: #6b8aaa !important; text-decoration: none; }

/* FAQ details */
details.wp-block-details {
  border: 1px solid #E8E6E1; border-radius: 6px;
  padding: 16px 20px; margin-bottom: 12px;
}
details.wp-block-details summary { cursor: pointer; font-size: 16px; color: #1E3A5F; font-weight: 600; }
details.wp-block-details[open] summary {
  margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #E8E6E1;
}

/* Mobile sticky CTA */
.mobile-sticky-cta { display: none; }
@media (max-width: 768px) {
  .mobile-sticky-cta {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #1E3A5F; display: flex !important;
    z-index: 99999; box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
  }
  .mobile-sticky-cta a {
    flex: 1; text-align: center; padding: 15px;
    color: white; font-weight: 700; font-size: 15px; text-decoration: none;
  }
  .mobile-sticky-cta a.cta-call { background: #F86008; color: white; }

  /* Footer mobile */
  .afr-footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .afr-footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* Form grid fix */
  form div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Bottom padding for sticky CTA */
  body { padding-bottom: 55px; }

  /* Responsive text */
  h1.wp-block-heading { font-size: 28px !important; }
  h2.wp-block-heading { font-size: 22px !important; }
  h3.wp-block-heading { font-size: 20px !important; }

  /* Trust grid mobile */
  .afr-footer + div [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Parallax mobile fallback */
@media (max-width: 768px) {
  .parallax-stats, .parallax-cta,
  [style*="background-attachment:fixed"] {
    background-attachment: scroll !important;
  }
  /* STATS BAR - nuke the inline grid and font sizes */
  .parallax-stats,
  .parallax-stats > div,
  .parallax-stats > div > div {
    display: block !important;
  }
  .parallax-stats > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .parallax-stats div[style*="font-size"] {
    font-size: 20px !important;
    line-height: 1.2 !important;
    word-break: normal !important;
  }
  .parallax-stats { padding: 24px 16px !important; }

  /* TRUST SECTION - force single column cards */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Keep icon + text horizontal inside each card */
  div[style*="display:flex"][style*="gap:16px"] {
    flex-direction: row !important;
    align-items: flex-start !important;
  }
  div[style*="display:flex"][style*="gap:16px"] > div:first-child {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
  }
  div[style*="display:flex"][style*="gap:16px"] strong {
    font-size: 14px !important;
  }
  div[style*="display:flex"][style*="gap:16px"] span {
    font-size: 12px !important;
  }
}

/* ARTICLE TABLES — horizontal scroll on mobile */
@media (max-width: 768px) {
  .entry-content table,
  .afr-table-wrap table,
  article table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: auto !important;          /* must NOT be 100% — lets table be wider than screen */
    table-layout: auto !important;   /* must NOT be fixed — lets columns size to content */
    font-size: 13px !important;      /* readable, not the tiny 10px */
  }
  .entry-content table td,
  .afr-table-wrap table td {
    padding: 10px 12px !important;
    word-wrap: normal !important;    /* allow cells to stay wide so table scrolls */
    white-space: nowrap !important;  /* key: keeps row on one line, forces horizontal scroll */
  }
  .entry-content table th,
  .afr-table-wrap table th {
    white-space: nowrap !important;
    padding: 10px 12px !important;
  }
}
  /* Parallax CTA buttons - stack vertically on mobile */
  .parallax-cta [style*="display:flex"][style*="gap:16px"],
  [style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .parallax-cta [style*="display:flex"][style*="gap:16px"] > a,
  [style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] > a {
    display: block !important;
    width: 100% !important;
    padding: 14px 20px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
  }
}

/* Convert all gold CTAs to brand orange */
a[href="/free-estimate/"][style*="background:#C9A227"],
a[href="tel:5197321964"][style*="background:#C9A227"],
.mobile-sticky-cta a.cta-call,
[style*="background:#C9A227"][style*="color:#0A0A0A"] {
  background: #F86008 !important;
  color: white !important;
}

/* Header CTA button override */
.header-button .button, .header-button a.button {
  background: #F86008 !important;
  color: white !important;
}

/* CTA Button wrapper */
.afr-cta-wrap {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
@media (max-width: 768px) {
  .afr-cta-wrap {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
}

/* CTA Buttons - Parallax section */
.afr-cta-btn {
  display: inline-block !important;
  padding: 14px 28px !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  text-align: center !important;
  box-sizing: border-box !important;
  margin: 6px !important;
  transition: all 200ms;
}
.afr-cta-primary {
  background: #F86008 !important;
  color: white !important;
}
.afr-cta-primary:hover { background: #b86320 !important; }
.afr-cta-secondary {
  background: transparent !important;
  color: white !important;
  border: 2px solid white !important;
}
.afr-cta-secondary:hover { background: white !important; color: #1E3A5F !important; }

/* See the Difference button */
.afr-see-diff-btn {
  display: inline-block !important;
  padding: 16px 32px !important;
  background: #F86008 !important;
  color: white !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.afr-see-diff-btn:hover { background: #b86320 !important; }

@media (max-width: 768px) {
  .afr-cta-btn {
    display: block !important;
    width: 85% !important;
    max-width: 300px !important;
    margin: 8px auto !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
  .afr-see-diff-btn {
    padding: 14px 24px !important;
    font-size: 13px !important;
  }
}

/* Comparison cards grid */
.afr-compare-cards {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}
@media (max-width: 768px) {
  .afr-compare-cards {
    grid-template-columns: 1fr !important;
  }
  /* Keep See the Difference button on one line */
  a[href="/free-estimate/"][style*="background:#C9A227"][style*="padding:16px 36px"] {
    padding: 14px 20px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
}

/* Round all corners across the site */
.wp-block-cover,
.wp-block-image img,
.wp-block-button__link,
.wp-block-group,
figure.wp-block-image,
.parallax-stats,
.parallax-cta,
[class*="wp-block-columns"] > div[style*="background"],
.afr-compare-cards > div,
.afr-footer-btn-primary,
.afr-footer-btn-outline,
button, .btn, input[type="submit"], input[type="button"] {
  border-radius: 12px !important;
}

.entry-content table {
  border-radius: 12px !important;
  /* overflow: hidden removed — was preventing horizontal scroll */
}

/* Hide Kadence page title on ALL pages */
.entry-header.page-title,
/* header.entry-header -- removed: was hiding post titles */
.kadence-page-title {
  display: none !important;
}

/* ===== FULL-BLEED INTERIOR PAGES (desktop only) =====
   Pages (not home, not articles) get an edge-to-edge container
   so alignfull sections go 100vw. Direct text children are
   constrained to a readable width and centered. Mobile untouched. */
@media (min-width: 1025px) {
  body.page:not(.home) .content-container.site-container,
  body.page:not(.home) .entry-content-wrap,
  body.page:not(.home) .entry-content.single-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.page:not(.home) .entry-content > *:not(.alignfull):not(.alignwide):not(.wp-block-cover):not(.parallax-stats):not(.parallax-cta):not(.afr-footer) {
    max-width: 1290px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
  }
  body.page:not(.home) .entry-content > .alignfull,
  body.page:not(.home) .entry-content > .alignwide,
  body.page:not(.home) .entry-content > .wp-block-cover,
  body.page:not(.home) .entry-content > .parallax-stats,
  body.page:not(.home) .entry-content > .parallax-cta {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}