/*
Theme Name:   StarBright Bookkeeping
Description:  StarBright Bookkeeping child theme of GeneratePress
Template:     generatepress
Version:      2.2.1
Author:       StarBright Bookkeeping LLC
Author URI:   https://starbrightbookkeeping.net
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  starbright-bookkeeping
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --sb-red:   #cc2f3f;
  --sb-dark:  #351b1d;
  --sb-white: #ffffff;
  --sb-gray:  #f2f2f2;
  --sb-text:  #2d2d2d;
}

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--sb-text);
  background: var(--sb-white) !important; /* kill dark body bg */
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif !important;
  color: var(--sb-dark);
  line-height: 1.25;
}

a { color: var(--sb-red); text-decoration: none; }
a:hover { color: var(--sb-dark); }
p { margin-bottom: 1.2em; }

/* ============================================================
   LAYOUT — force full width, kill GP sidebar/container limits
   ============================================================ */
.site-content,
.content-area,
.entry-content,
.site-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* GP wraps pages in .page-hero / .content-area / article — ensure no dark bg bleeds */
.site-content { background: var(--sb-white) !important; }

/* Container for actual readable text — applied inside blocks */
.sb-content-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 30px;
}

/* Remove GP's default article padding */
.entry-content { padding: 0 !important; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  background: var(--sb-white) !important;
  border-bottom: 3px solid var(--sb-red) !important;
  padding: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.site-header .inside-header {
  display: flex !important;
  align-items: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 10px 30px !important;
  width: 100% !important;
  box-sizing: border-box;
  gap: 20px;
}

/* Logo image */
.site-header .site-logo img,
.site-header img.custom-logo {
  max-height: 80px !important;
  width: auto !important;
}

/* Site branding: logo + title + description stacked */
.site-header .site-branding {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Hide tagline and site title text — logo image identifies the brand */
.site-header .site-description {
  display: none !important;
}

/* Hide the text title only when a logo image is present */
.site-header .has-logo .site-title,
.site-header .site-logo + .site-title,
body.has-custom-logo .site-header .site-title {
  display: none !important;
}

/* Keep title visible as fallback when no logo uploaded */
.site-header .site-title,
.site-header .site-title a {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: var(--sb-dark) !important;
  text-decoration: none !important;
  line-height: 1.2;
  white-space: nowrap;
}

/* ============================================================
   HEADER RIGHT (badge + phone — injected via generate_after_logo)
   ============================================================ */
.sb-header-right {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  flex-shrink: 0;
}

.sb-header-badge {
  border: 2px solid var(--sb-dark);
  color: var(--sb-dark);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  text-align: center;
  line-height: 1.4;
}

.sb-header-phone { display: flex; flex-direction: column; text-align: right; }

.sb-call-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-text);
  display: block;
}

.sb-header-phone a {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sb-red) !important;
  text-decoration: none !important;
  line-height: 1.2;
}

.sb-header-phone a:hover { color: var(--sb-dark) !important; }

/* ============================================================
   NAVIGATION — dark red bar
   GP classes: .nav-below-header > .nav-primary > .inside-navigation > ul.menu
   ============================================================ */

/* The outer wrapper GP adds when location = below-header */
.nav-below-header {
  background: var(--sb-dark) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* GP's nav element */
.nav-primary {
  background: var(--sb-dark) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* GP's inner nav container */
.nav-primary .inside-navigation {
  background: var(--sb-dark) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 30px !important;
  display: flex !important;
  align-items: stretch !important;
}

/* Force the ul itself dark */
.nav-primary .main-nav,
.nav-primary .main-nav ul,
.nav-primary ul.menu,
.nav-primary ul.nav-menu {
  background: var(--sb-dark) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
}

/* TOP LEVEL LINKS — high specificity to beat GP default link color */
.nav-below-header .nav-primary .main-nav ul > li > a,
.nav-below-header .nav-primary ul.menu > li > a,
.nav-primary .main-nav ul > li > a,
.nav-primary ul.menu > li > a,
.main-navigation ul > li > a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: transparent !important;
  padding: 15px 18px !important;
  display: block !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
  border: none !important;
}

.nav-below-header .nav-primary .main-nav ul > li > a:hover,
.nav-below-header .nav-primary ul.menu > li.current-menu-item > a,
.nav-below-header .nav-primary ul.menu > li.current_page_item > a,
.nav-below-header .nav-primary ul.menu > li:hover > a,
.nav-primary .main-nav ul > li > a:hover,
.nav-primary ul.menu > li.current-menu-item > a,
.nav-primary ul.menu > li.current_page_item > a,
.nav-primary ul.menu > li:hover > a {
  background: #cc2f3f !important;
  color: #ffffff !important;
}

/* DROPDOWN menus */
.nav-primary .main-nav ul ul,
.nav-primary ul.menu ul {
  display: none;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: var(--sb-dark) !important;
  border-top: 2px solid var(--sb-red) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
  min-width: 210px !important;
  z-index: 9999 !important;
  flex-direction: column !important;
}

.nav-primary .main-nav ul li:hover > ul,
.nav-primary ul.menu li:hover > ul,
.nav-primary ul.menu li.sfHover > ul {
  display: flex !important;
  flex-direction: column !important;
}

.nav-primary .main-nav ul ul li a,
.nav-primary ul.menu ul li a {
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.88) !important;
  background: var(--sb-dark) !important;
  white-space: nowrap !important;
}

.nav-primary .main-nav ul ul li a:hover {
  background: var(--sb-red) !important;
  color: var(--sb-white) !important;
}

/* Position parent li correctly for dropdown */
.nav-primary ul.menu > li {
  position: relative !important;
}

/* Dropdown arrow */
.nav-primary .main-nav ul li.menu-item-has-children > a::after {
  content: '' !important;
  display: inline-block !important;
  border: 4px solid transparent !important;
  border-top-color: rgba(255,255,255,0.7) !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  position: relative !important;
  top: 1px !important;
}

/* Kill any white gaps GP might add around nav */
.nav-below-header + *,
.nav-primary + * { margin-top: 0 !important; }

/* Mobile hamburger */
button.menu-toggle,
.menu-toggle {
  background: var(--sb-dark) !important;
  color: var(--sb-white) !important;
  border: none !important;
  padding: 13px 20px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  width: 100% !important;
}

/* ============================================================
   HERO
   ============================================================ */
.sb-hero {
  background: linear-gradient(125deg, var(--sb-dark) 0%, var(--sb-red) 100%) !important;
  color: var(--sb-white) !important;
  padding: 72px 60px !important;
  text-align: left;
  /* Full bleed — break out of any container */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  box-sizing: border-box;
}

.sb-remote-badge {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.55);
  color: var(--sb-white);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 50px;
  margin-bottom: 24px;
}

.sb-hashtag {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem) !important;
  font-weight: 600 !important;
  color: var(--sb-white) !important;
  line-height: 1.12;
  margin: 0 0 0.05em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.2);
  display: block;
}

.sb-tagline {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-size: clamp(1.8rem, 3.8vw, 2.8rem) !important;
  font-weight: 600 !important;
  color: var(--sb-white) !important;
  line-height: 1.15;
  margin: 0 0 0.75em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.15);
  display: block;
}

.sb-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,0.88);
  max-width: 420px;
  margin-bottom: 2em;
  line-height: 1.65;
  display: block;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.sb-btn {
  display: inline-block;
  background: var(--sb-red);
  color: var(--sb-white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 13px 28px;
  border-radius: 3px;
  border: 2px solid var(--sb-red);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  cursor: pointer;
  margin: 4px;
}

.sb-btn:hover {
  background: var(--sb-dark) !important;
  border-color: var(--sb-dark) !important;
  color: var(--sb-white) !important;
}

.sb-hero .sb-btn {
  border-color: rgba(255,255,255,0.6);
}
.sb-hero .sb-btn:hover {
  background: var(--sb-white) !important;
  color: var(--sb-red) !important;
  border-color: var(--sb-white) !important;
}

.sb-btn-outline {
  background: transparent !important;
  color: var(--sb-red) !important;
  border: 2px solid var(--sb-red) !important;
}
.sb-btn-outline:hover {
  background: var(--sb-red) !important;
  color: var(--sb-white) !important;
}

/* ============================================================
   FULL-BLEED STRIPS
   These break out of any container GP might impose
   ============================================================ */
.sb-testimonials,
.sb-cta-strip,
.sb-subscribe-strip,
.sb-page-hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  box-sizing: border-box;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.sb-testimonials {
  background: var(--sb-gray);
  padding: 52px 40px;
  text-align: center;
}

.sb-testimonials h2 { color: var(--sb-dark) !important; margin-bottom: 32px; }

.sb-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
  max-width: 1000px;
  margin: 0 auto;
}

.sb-testimonial-item {
  background: var(--sb-white);
  border-radius: 5px;
  padding: 22px 18px;
  border-top: 3px solid var(--sb-red);
  font-style: italic;
  font-size: 0.9rem;
  color: #444;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  text-align: left;
}

/* ============================================================
   CTA STRIP
   ============================================================ */
.sb-cta-strip {
  background: var(--sb-red);
  color: var(--sb-white);
  padding: 52px 40px;
  text-align: center;
}

.sb-cta-strip h2 { color: var(--sb-white) !important; margin-bottom: 0.4em; font-size: 1.9rem; }
.sb-cta-strip p  { opacity: 0.9; max-width: 580px; margin: 0 auto 1.5em; }

.sb-cta-strip .sb-btn {
  background: var(--sb-white);
  color: var(--sb-red) !important;
  border-color: var(--sb-white);
}
.sb-cta-strip .sb-btn:hover {
  background: var(--sb-dark) !important;
  color: var(--sb-white) !important;
  border-color: var(--sb-dark) !important;
}

/* ============================================================
   PAGE HERO (interior pages)
   ============================================================ */
.sb-page-hero {
  background: var(--sb-gray);
  border-bottom: 3px solid var(--sb-red);
  padding: 32px 40px;
  margin-bottom: 0;
}

.sb-breadcrumb { font-size: 0.78rem; color: #888; margin-bottom: 6px; }
.sb-breadcrumb a { color: var(--sb-red); }

.sb-page-hero h1 {
  color: var(--sb-dark) !important;
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
}

/* ============================================================
   SUBSCRIBE STRIP
   ============================================================ */
.sb-subscribe-strip {
  background: var(--sb-dark);
  color: var(--sb-white);
  padding: 44px 40px;
  text-align: center;
}

.sb-subscribe-strip h3 { color: var(--sb-white) !important; margin-bottom: 0.3em; font-size: 1.3rem; }
.sb-subscribe-strip p  { opacity: 0.82; margin-bottom: 1.2em; font-size: 0.92rem; }

.sb-subscribe-strip form {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 480px;
  margin: 0 auto;
}

.sb-subscribe-strip input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 11px 14px;
  border: none;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  color: var(--sb-text);
}

.sb-subscribe-strip button[type="submit"] {
  background: var(--sb-red);
  color: var(--sb-white);
  border: none;
  border-radius: 4px;
  padding: 11px 22px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s;
}

.sb-subscribe-strip button[type="submit"]:hover { background: var(--sb-white); color: var(--sb-red); }

.sb-sub-ok  { color: #2a6e2a; font-weight: 600; margin: 6px 0; }
.sb-sub-err { color: var(--sb-red); font-weight: 600; margin: 6px 0; }

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.sb-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
  margin: 28px 0;
}

.sb-service-card {
  background: var(--sb-white);
  border: 1px solid #e2e2e2;
  border-top: 4px solid var(--sb-red);
  border-radius: 5px;
  padding: 24px 22px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s, transform 0.2s;
}

.sb-service-card:hover {
  box-shadow: 0 6px 22px rgba(204,47,63,0.13);
  transform: translateY(-3px);
}

.sb-service-card h3 { font-size: 1rem !important; color: var(--sb-red) !important; margin: 0 0 0.6em; }
.sb-service-card p  { font-size: 0.9rem; color: #555; line-height: 1.6; margin: 0; }

/* ============================================================
   INDUSTRY CARDS
   ============================================================ */
.sb-industries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
  margin: 28px 0;
}

.sb-industry-card {
  background: var(--sb-gray);
  border-left: 4px solid var(--sb-red);
  border-radius: 4px;
  padding: 20px 18px;
}

.sb-industry-card h3 { font-size: 1rem !important; color: var(--sb-dark) !important; margin: 0 0 0.4em; }
.sb-industry-card p  { font-size: 0.88rem; color: #555; margin: 0; }

/* ============================================================
   SECTION NAV BOX
   ============================================================ */
.sb-section-nav {
  background: var(--sb-gray);
  border-left: 4px solid var(--sb-red);
  border-radius: 4px;
  padding: 18px 20px;
  margin: 32px 0;
}

.sb-section-nav h4 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sb-red) !important;
  margin: 0 0 10px;
  font-weight: 700;
}

.sb-section-nav ul { list-style: none; padding: 0; margin: 0; }
.sb-section-nav ul li { margin-bottom: 5px; }
.sb-section-nav ul li a { color: var(--sb-dark); font-size: 0.88rem; font-weight: 600; }
.sb-section-nav ul li a:hover { color: var(--sb-red); }

/* ============================================================
   QB BADGE
   ============================================================ */
.sb-qb-badge {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--sb-gray);
  border-radius: 5px;
  padding: 14px 18px;
  margin-bottom: 26px;
  font-size: 0.83rem;
  color: #555;
  font-style: italic;
  line-height: 1.5;
}

.sb-qb-badge strong { color: var(--sb-dark); }

/* ============================================================
   VALUES LIST
   ============================================================ */
.sb-values-list { list-style: none; padding: 0; margin: 24px 0; }
.sb-values-list li { display: flex; gap: 14px; margin-bottom: 20px; align-items: flex-start; }

.sb-icon {
  width: 38px; height: 38px;
  background: var(--sb-red);
  color: var(--sb-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* ============================================================
   CONTACT FORM 7
   ============================================================ */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 11px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  margin-bottom: 12px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  border-color: var(--sb-red);
  outline: none;
  box-shadow: 0 0 0 3px rgba(204,47,63,0.1);
}

.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
  background: var(--sb-red);
  color: var(--sb-white);
  border: none;
  border-radius: 4px;
  padding: 12px 28px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s;
}

.wpcf7-form input[type="submit"]:hover { background: var(--sb-dark); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--sb-dark) !important;
  color: rgba(255,255,255,0.72) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide GP's auto-generated footer content */
.site-footer .inside-footer { display: none !important; }

.sb-footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 48px 30px 0;
}

.sb-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 36px;
}

.sb-footer-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sb-white) !important;
  text-decoration: none !important;
  display: block;
  margin-bottom: 12px;
}

.sb-footer-brand p     { font-size: 0.87rem; line-height: 1.65; color: rgba(255,255,255,0.62); margin: 0 0 8px; }
.sb-footer-hash        { font-style: italic; font-size: 0.82rem !important; color: rgba(255,255,255,0.38) !important; }

.sb-footer-col h4 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sb-white) !important;
  border-bottom: 1px solid rgba(255,255,255,0.13);
  padding-bottom: 9px;
  margin-bottom: 14px;
}

.sb-footer-col ul { list-style: none; padding: 0; margin: 0; }
.sb-footer-col ul li { margin-bottom: 7px; }
.sb-footer-col ul li a { color: rgba(255,255,255,0.6) !important; font-size: 0.85rem; }
.sb-footer-col ul li a:hover { color: var(--sb-white) !important; }

.sb-footer-phone-big a { color: var(--sb-white) !important; font-size: 1.05rem; font-weight: 700; }
.sb-footer-email a     { color: rgba(255,255,255,0.6) !important; font-size: 0.84rem; }
.sb-footer-location    { font-size: 0.84rem; color: rgba(255,255,255,0.48); line-height: 1.6; margin-bottom: 14px; }
.sb-footer-cta         { font-size: 0.72rem !important; padding: 9px 16px !important; }

.sb-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 16px 0 22px;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.38);
}

.sb-footer-bottom a { color: rgba(255,255,255,0.48) !important; margin: 0 4px; }
.sb-footer-bottom a:hover { color: var(--sb-white) !important; }

/* ============================================================
   DIVIDER
   ============================================================ */
.sb-divider { border: none; border-top: 2px solid var(--sb-gray); margin: 40px 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .sb-footer-grid { grid-template-columns: 1fr 1fr; }
  .sb-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .site-header .inside-header { flex-wrap: wrap; padding: 10px 16px !important; }
  .sb-header-right { width: 100%; justify-content: space-between; margin-left: 0; }
  .sb-hero { padding: 48px 24px !important; }
  .sb-page-hero { padding: 26px 20px; }
  .sb-testimonials, .sb-cta-strip, .sb-subscribe-strip { padding: 36px 20px; }
  .sb-footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .sb-services-grid, .sb-industries-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   OVERRIDES — appended last so these always win
   ============================================================ */

/* Nav links: white always, no exceptions */
.nav-primary a,
.nav-below-header a,
.nav-primary .main-nav a,
.nav-primary ul a,
.site-navigation a {
  color: #ffffff !important;
}

/* Dropdown links slightly dimmed but still white */
.nav-primary ul ul a,
.nav-below-header ul ul a {
  color: rgba(255,255,255,0.88) !important;
}

/* Active / hover = red bg */
.nav-primary ul li.current-menu-item > a,
.nav-primary ul li.current_page_item > a,
.nav-primary ul li:hover > a,
.nav-primary ul li.sfHover > a {
  background-color: #cc2f3f !important;
  color: #ffffff !important;
}

/* Dropdown hover */
.nav-primary ul ul li:hover > a,
.nav-primary ul ul li a:hover {
  background-color: #cc2f3f !important;
  color: #ffffff !important;
}

/* Kill any inherited blue from GP's a{color} in nav */
.nav-primary a:link,
.nav-primary a:visited,
.nav-primary a:active {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Hide site title text when logo image is present */
body.has-custom-logo .site-header .site-title {
  display: none !important;
}

/* Ensure no white gap between nav and content */
.nav-below-header { margin-bottom: 0 !important; }
.hfeed, .home .site-content { padding-top: 0 !important; margin-top: 0 !important; }

/* ============================================================
   v1.5 TARGETED FIXES
   ============================================================ */

/* --- Kill the white bar (GP page-header / .page-hero) --- */
.page-header,
.generate-page-header,
.page-hero,
.entry-header.grid-container {
  display: none !important;
}

/* --- Body/content background always white --- */
html, body,
.site, .site-content,
.hfeed, .hentry,
.content-area, .entry-content,
.inside-article, .post-inner {
  background: #ffffff !important;
}

/* Clear any top spacing GP adds after nav */
.site-content,
.inside-article {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* --- Header: fix cramped layout --- */
/* Make the header taller so logo + elements have room */
.site-header .inside-header {
  min-height: 90px !important;
  flex-wrap: nowrap !important;
  padding: 8px 30px !important;
}

/* Limit logo size */
.site-header .site-logo img,
.site-header .custom-logo-link img {
  max-height: 72px !important;
  width: auto !important;
}

/* Header right: make phone number always visible */
.sb-header-right {
  flex-shrink: 0 !important;
  min-width: 220px !important;
}

.sb-header-phone a {
  font-size: 1rem !important;
  white-space: nowrap !important;
  display: block !important;
}

/* --- Full width page content --- */
.no-sidebar .site-content .content-area {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* --- Contained content blocks get their own padding --- */
.sb-content-wrap,
.entry-content > p,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}

/* But full-bleed blocks ignore that */
.sb-hero,
.sb-testimonials,
.sb-cta-strip,
.sb-subscribe-strip,
.sb-page-hero {
  max-width: none !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
}

/* ============================================================
   v1.5 CONTAINER / LAYOUT FIXES
   Force GP's "Separate Containers" to behave like One Container
   and kill all dark-background gaps
   ============================================================ */

/* GP Separate Containers adds margin between blocks — kill it */
.site-content .inside-article > *,
.site-content .entry-content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* The white-bar gap is .sep-container or an empty .grid-container */
.sep-container,
.inside-article > .grid-container:empty,
.entry-header:empty,
.page-header:empty,
.generate-page-header:empty {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* GP "Separate Containers" wraps each block in a .inside-article container
   with its own background. Force them all white and full-width */
.inside-article,
.inside-article .grid-container,
.site-content .grid-container,
.wp-block,
.entry-content .wp-block-group,
.entry-content .wp-block-group__inner-container {
  background: #ffffff !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* But our own colored blocks override that ^ */
.sb-hero,
.sb-hero *,
.sb-testimonials,
.sb-cta-strip,
.sb-subscribe-strip,
.sb-page-hero {
  background: revert;  /* let our specific rules apply */
}

/* Specifically: hero keeps its gradient */
.sb-hero { background: linear-gradient(125deg, #351b1d 0%, #cc2f3f 100%) !important; }
.sb-testimonials { background: #f2f2f2 !important; }
.sb-cta-strip { background: #cc2f3f !important; }
.sb-subscribe-strip { background: #351b1d !important; }
.sb-page-hero { background: #f2f2f2 !important; }

/* Full-bleed: break out of ANY container GP wraps us in */
.sb-hero,
.sb-testimonials,
.sb-cta-strip,
.sb-subscribe-strip,
.sb-page-hero {
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
}

/* Spacer between hero and next section — none */
.sb-hero + *,
.sb-hero + div,
.wp-block-separator.sb-divider { margin-top: 0 !important; }

/* The "Bookkeeping is what we do best" and body content sections */
.entry-content > div:not([class*="sb-"]),
.entry-content > p,
.entry-content > h2,
.entry-content > h3 {
  max-width: 900px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}

/* Text-align center blocks keep their centering */
.has-text-align-center { text-align: center !important; }

/* ============================================================
   v1.6 FIXES
   ============================================================ */

/* --- HEADER: give it enough height and stop clipping --- */
.site-header {
  overflow: visible !important;
  height: auto !important;
  min-height: 80px !important;
}

.site-header .inside-header {
  overflow: visible !important;
  height: auto !important;
  min-height: 80px !important;
  /* Remove any max-width constraint that clips the phone */
  max-width: none !important;
  width: 100% !important;
  padding: 10px 40px !important;
  box-sizing: border-box !important;
}

/* Branding takes only what it needs */
.site-header .site-branding {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

/* Header right: never shrink, always show full phone */
.sb-header-right {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  white-space: nowrap !important;
}

.sb-header-badge {
  flex-shrink: 0 !important;
}

.sb-header-phone {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.sb-call-label {
  display: block !important;
  font-size: 0.58rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #2d2d2d !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.sb-header-phone a {
  display: block !important;
  white-space: nowrap !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #cc2f3f !important;
  text-decoration: none !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* --- CONTENT DARK SIDES: GP "Boxes" adds a centered container.
   Force the content and body backgrounds fully white edge-to-edge --- */
html { background: #ffffff !important; }

body.page,
body.home,
body.front-page,
body {
  background: #ffffff !important;
}

/* GP outputs .site-content > .content-area > article.hentry > .inside-article
   The hentry/inside-article have inline-styled backgrounds in Boxes mode */
.hentry,
.inside-article,
.content-area,
.site-content {
  background: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
}

/* GP "Boxes" adds border-radius and box-shadow to .inside-article */
.inside-article {
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* The main wrapper GP creates around content area */
.site-inner,
.grid-container.grid-parent {
  background: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* --- OUTLINE BUTTON: make it visible on white backgrounds --- */
.sb-btn-outline {
  background: transparent !important;
  color: #cc2f3f !important;
  border: 2px solid #cc2f3f !important;
  text-decoration: none !important;
}

.sb-btn-outline:hover {
  background: #cc2f3f !important;
  color: #ffffff !important;
}

/* Also fix any wp-block button that uses outline style */
.entry-content a[style*="outline"],
.entry-content .sb-btn-outline {
  color: #cc2f3f !important;
  border-color: #cc2f3f !important;
}

/* ============================================================
   v1.7 — Nav visibility + header phone + white bar
   ============================================================ */

/* NAV: when Inner Header Width = Full, GP wraps nav differently.
   Cover every possible wrapper with dark background + min-height */
.nav-below-header,
.nav-primary,
.site-navigation,
#site-navigation,
.main-navigation {
  background-color: #351b1d !important;
  min-height: 48px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.nav-below-header .inside-navigation,
.nav-primary .inside-navigation {
  background-color: #351b1d !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: stretch !important;
  padding: 0 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Nav UL — must be flex row, dark bg */
.nav-primary ul.menu,
.nav-primary ul.nav-menu,
.nav-primary .main-nav > ul,
#site-navigation ul {
  background-color: #351b1d !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 48px !important;
  align-items: stretch !important;
}

/* Every nav link — white on dark, always */
.nav-primary ul li a,
.nav-primary ul li a:link,
.nav-primary ul li a:visited,
.nav-primary ul li a:active,
.nav-below-header ul li a,
.main-navigation ul li a,
#site-navigation ul li a {
  color: #ffffff !important;
  background-color: transparent !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.nav-primary ul li a:hover,
.nav-primary ul li.current-menu-item > a,
.nav-primary ul li.current_page_item > a {
  background-color: #cc2f3f !important;
  color: #ffffff !important;
}

/* Dropdown */
.nav-primary ul ul {
  background-color: #351b1d !important;
  border-top: 2px solid #cc2f3f !important;
  position: absolute !important;
  z-index: 9999 !important;
  min-width: 200px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
  flex-direction: column !important;
}

.nav-primary ul ul li a {
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 10px 18px !important;
  display: block !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

/* WHITE STRIP between nav and hero:
   GP adds a .site-content padding-top or an empty .entry-header.
   Cover all variants. */
.entry-header,
.entry-header.grid-container,
.page-header,
.site-content > .inside-article > .entry-header {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  min-height: 0 !important;
}

/* The strip itself is sometimes .site-content padding */
.site-content,
.content-area,
.inside-article,
.grid-container.grid-parent {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* HEADER PHONE — force full display */
/* Give header more horizontal space with smaller logo */
.site-header .site-logo img {
  max-height: 60px !important;
  width: auto !important;
}

/* Allow inside-header to scroll/wrap if very small screen,
   but on desktop keep it one row */
@media (min-width: 769px) {
  .site-header .inside-header {
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
  
  /* Ensure sb-header-right always gets full space */
  .sb-header-right {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    min-width: 250px !important;
  }
}


/* ============================================================
   v1.8 FINAL POLISH
   ============================================================ */

/* Hero button — solid red with white border (matches original) */
.sb-hero .sb-btn {
  background: #cc2f3f !important;
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,0.6) !important;
  padding: 14px 30px !important;
}

.sb-hero .sb-btn:hover {
  background: #ffffff !important;
  color: #cc2f3f !important;
  border-color: #ffffff !important;
}

/* Site title — hide text when logo is present (belt + suspenders) */
body.has-custom-logo .site-branding .site-title,
body.has-custom-logo .site-header .site-title {
  display: none !important;
}

/* Phone number — ensure never clipped, always full width available */
.sb-header-right {
  overflow: visible !important;
  flex: 1 1 auto !important;
  max-width: none !important;
  justify-content: flex-end !important;
}

/* If site title IS showing (no logo), keep it styled */
.site-header .site-title a {
  color: #351b1d !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Footer copyright — override GP's */
.site-footer .site-info,
.site-footer .inside-footer p {
  display: none !important;
}

/* ============================================================
   v1.9 — INNER PAGE POLISH
   ============================================================ */

/* --- GP's breadcrumb + page title banner ---
   GP outputs this as .page-hero-container > .inside-page-hero
   or directly as breadcrumbs + h1 in .entry-header.
   Style it to match our brand. */
.page-hero-container,
.entry-header.grid-container,
.entry-header {
  background: #f2f2f2 !important;
  border-bottom: 3px solid #cc2f3f !important;
  padding: 28px 40px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important; /* override any hide rules for inner pages */
}

/* Only hide it on the front page (we have our own hero there) */
.home .entry-header,
.home .page-hero-container,
.front-page .entry-header {
  display: none !important;
}

/* Breadcrumb text inside GP's header */
.entry-header .breadcrumb,
.entry-header nav.breadcrumb,
.page-hero-container .breadcrumb {
  font-size: 0.78rem !important;
  color: #888 !important;
  margin-bottom: 6px !important;
}

.entry-header .breadcrumb a,
.page-hero-container .breadcrumb a {
  color: #cc2f3f !important;
}

/* Page H1 inside GP's header area */
.entry-header .entry-title,
.page-hero-container h1,
.entry-header h1 {
  color: #351b1d !important;
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  margin: 0 !important;
  font-weight: 600 !important;
}

/* --- Inner page content: left-align and give breathing room --- */
.page:not(.home) .entry-content,
.page:not(.home) .inside-article {
  padding: 40px !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  text-align: left !important;
}

/* But full-bleed blocks still break out */
.page:not(.home) .entry-content .sb-services-grid,
.page:not(.home) .entry-content .sb-industries-grid,
.page:not(.home) .entry-content .sb-cta-strip,
.page:not(.home) .entry-content .sb-section-nav,
.page:not(.home) .entry-content .sb-qb-badge {
  text-align: left !important;
}

/* Services/Industries pages — cards shouldn't be centered */
.sb-services-grid,
.sb-industries-grid {
  text-align: left !important;
}

.sb-service-card,
.sb-industry-card {
  text-align: left !important;
}

/* Contact page two-column layout */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 700px) {
  .contact-grid { grid-template-columns: 1fr; }
  .page:not(.home) .entry-content,
  .page:not(.home) .inside-article { padding: 24px 20px !important; }
}

/* --- HOME breadcrumb + title: definitely hidden --- */
body.home .entry-header { display: none !important; }

/* --- Testimonials on home page — ensure white cards show --- */
.sb-testimonials { color: #2d2d2d !important; }
.sb-testimonial-item { color: #444 !important; background: #ffffff !important; }

/* --- Footer: ensure it renders (not hidden by entry-content rules) --- */
.site-footer,
.site-footer .sb-footer-inner,
.site-footer .sb-footer-grid,
.site-footer .sb-footer-col {
  display: block !important;
}
.site-footer .sb-footer-grid { display: grid !important; }

/* --- Small final touches --- */
/* Remove GP's default margin above first heading on pages */
.entry-content > h2:first-child,
.entry-content > h1:first-child {
  margin-top: 0 !important;
}

/* Ensure inline-article on home has no top padding (kills any remaining white gap) */
body.home .inside-article,
body.front-page .inside-article {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ============================================================
   v2.0 — FINAL FIXES
   ============================================================ */

/* 1. HOME: Kill the white gap between nav and hero.
   GP outputs a .site-content > .grid-container that adds padding. */
body.home .site-content,
body.home .content-area,
body.home .inside-article,
body.home .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Also target the grid-container GP wraps the home page in */
body.home .grid-container.grid-parent {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 2. INNER PAGES: Hide GP's floating page title box.
   This is .page-hero-container which floats separately from
   the .entry-header breadcrumb strip we styled. */
.page-hero-container {
  display: none !important;
}

/* Keep the entry-header breadcrumb strip on inner pages */
body:not(.home) .entry-header {
  display: block !important;
  background: #f2f2f2 !important;
  border-bottom: 3px solid #cc2f3f !important;
  padding: 28px 40px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body:not(.home) .entry-header .entry-title {
  color: #351b1d !important;
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
  margin: 0 !important;
  font-weight: 600 !important;
}

/* Hide home entry-header (we have the hero instead) */
body.home .entry-header {
  display: none !important;
}

/* 3. CONTENT: left-align inner page text, reasonable width */
body:not(.home) .entry-content {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 36px 40px !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

/* But full-bleed elements still break out */
body:not(.home) .entry-content .sb-services-grid,
body:not(.home) .entry-content .sb-industries-grid,
body:not(.home) .entry-content .sb-section-nav,
body:not(.home) .entry-content .sb-cta-strip,
body:not(.home) .entry-content .sb-subscribe-strip {
  max-width: none !important;
  text-align: left !important;
}

/* 4. CONTACT: make the raw HTML form invisible so only CF7 shows
   (The Contact page still has our old HTML form in the wp:html block) */
.sb-form-wrap { display: none !important; }

/* ============================================================
   v2.1 — Kill GP Page Hero feature (the floating title box
   and the white gap it creates when empty on the home page)
   ============================================================ */

/* GP Page Hero — all variants of the container it outputs */
.generate-page-header,
.page-hero-container,
.inside-page-hero,
.page-header-image,
.page-header-wrap,
[class*="page-hero"],
[class*="page-header"] {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* The white strip is sometimes a ::before or padding on site-content */
.site-content::before,
.content-area::before,
.inside-article::before {
  display: none !important;
  height: 0 !important;
  content: none !important;
}

/* Absolute kill on any top spacing after nav on home */
body.home > div,
body.home .site-inner,
body.home .site-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ============================================================
   v2.2 — Target GP Premium Page Hero more precisely
   The floating box is .generate-page-header rendered by GP Premium
   ============================================================ */

/* GP Premium Page Hero — every class variant */
.generate-page-header,
.generate-page-header *,
.gp-page-header-wrap,
.gp-page-header-wrap *,
#generate-page-header,
.page-header-full-screen,
.generate-hero-section {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: none !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Also any element with data-type="generate-page-header" */
[data-type="generate-page-header"],
[class^="generate-page"],
[id^="generate-page"] {
  display: none !important;
}

/* The white strip below the nav on inner pages is sometimes
   GP adding padding-top to .site-inner when page hero is "on" */
body:not(.home) .site-inner {
  padding-top: 0 !important;
}

/* The breadcrumb + page title strip we DO want to show */
body:not(.home) .entry-header {
  display: block !important;
  background: #f2f2f2 !important;
  border-bottom: 3px solid #cc2f3f !important;
  padding: 28px 40px !important;
  margin: 0 0 0 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body:not(.home) .entry-header .entry-title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.4rem, 2.8vw, 2rem) !important;
  color: #351b1d !important;
  margin: 0 !important;
  font-weight: 600 !important;
}

/* ============================================================
   v2.2 PATCH — Hide sb-page-hero blocks from page content
   (these are our HTML blocks that render as floating title boxes)
   The entry-header breadcrumb strip replaces them.
   ============================================================ */
.sb-page-hero {
  display: none !important;
}