/*
Theme Name: Barrhaven Towing
Theme URI: https://barrhaventowing.com/
Description: Custom theme for Barrhaven Towing. Bold minimal light design system. Ottawa-Gatineau area towing, locksmith, tire, maintenance, and junk removal services.
Version: 1.0
Author: Dali Strategy
Author URI: https://dalistrategy.com/
*/

/* ===========================================================
   GLOBAL BASE , Bold Minimal Light Theme
   Most page-level styles live inline in page templates and in
   header-custom.php. This stylesheet sets baseline resets and
   the design tokens the chrome relies on.
   =========================================================== */

html, body {
    background: #FFFFFF;
    color: #1A1A1A;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

img { max-width: 100%; height: auto; display: block; }

a {
    color: #1A1A1A;
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: #FF6600; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Bebas Neue', 'Inter', sans-serif;
    font-weight: 400;
    color: #1A1A1A;
    letter-spacing: 0.02em;
    line-height: 1.15;
    margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

/* WordPress content wrappers , transparent background so chrome is intact */
.entry-content, .post-content, .site-content,
#content, #primary, .site-main, .wp-site-blocks,
.entry, article { background: transparent; }

/* Focus ring */
a:focus-visible, button:focus-visible {
    outline: 2px solid #FF6600;
    outline-offset: 3px;
}

/* Scrollbar */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #F4F4F4; }
::-webkit-scrollbar-thumb { background: #1A1A1A; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #FF6600; }

/* Selection */
::selection {
    background: #FF6600;
    color: #FFFFFF;
}

/* Buttons , sharp, minimal */
button {
    font-family: inherit;
    cursor: pointer;
    border-radius: 0;
}

/* Utility class some pages may use */
.bt-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Page banner padding helper for guide-style service pages so the
   first H1 sits below the banner with breathing room */
.guide-page,
.bm-page,
.bm-wrap,
.bm-body {
    background: #FFFFFF;
}

/* ===========================================================
   INNER PAGE BOTTOM CTA , global polish override
   Edge-to-edge full viewport width. Dark, centered, prominent.
   The original per-page CTA boxes were constrained by their
   content container; this breaks them out to full viewport.
   =========================================================== */
.cta-box,
.bm-bottom-cta {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    margin-top: 72px !important;
    margin-bottom: 0 !important;
    border-top: 4px solid #FF6600 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}
.cta-box {
    background: #0a0a0a !important;
    color: #FFFFFF !important;
    padding: 80px 48px !important;
    text-align: center !important;
    position: relative !important;
}
.bm-bottom-cta {
    background: #0a0a0a !important;
    color: #FFFFFF !important;
    padding: 80px 48px !important;
    text-align: center !important;
    display: block !important;
    grid-template-columns: none !important;
}
.bm-bottom-cta > div {
    max-width: 760px;
    margin: 0 auto !important;
    text-align: center !important;
}
.bm-bottom-cta .right {
    text-align: center !important;
    margin-top: 28px !important;
}
.cta-box h2,
.bm-bottom-cta h2 {
    color: #FFFFFF !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(2rem, 5vw, 3.4rem) !important;
    line-height: 1 !important;
    margin: 0 0 18px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    text-align: center !important;
}
.cta-box p,
.bm-bottom-cta p {
    color: rgba(255,255,255,0.78) !important;
    max-width: 640px !important;
    margin: 0 auto 32px !important;
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    text-align: center !important;
}
.bm-cta-btn {
    background: #FF6600 !important;
    color: #FFFFFF !important;
    padding: 22px 48px !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 1.4rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-block !important;
    border-radius: 0 !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
.bm-cta-btn:hover {
    background: #FFFFFF !important;
    color: #0a0a0a !important;
}
.bm-foot-links { display: none !important; }
.cta-btn,
.cta-box .cta-btn {
    background: #FF6600 !important;
    color: #FFFFFF !important;
    padding: 22px 48px !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 1.4rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-block !important;
    border-radius: 0 !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
.cta-btn:hover,
.cta-box .cta-btn:hover {
    background: #FFFFFF !important;
    color: #0a0a0a !important;
}
.foot-links {
    display: none !important;
}

/* ===========================================================
   ELIMINATE WHITE GAPS , header to hero, sections to sections
   =========================================================== */
body { margin: 0 !important; padding: 0 !important; }
.bt-header + * { margin-top: 0 !important; }
section + section { margin-top: 0; }
.bt-hero + .bt-stats { margin-top: 0 !important; }
.bt-stats { margin-top: 0 !important; }
.bt-footer { margin-top: 0 !important; }
.bt-cta { margin-bottom: 0 !important; }
.bt-cta + .bt-footer { margin-top: 0 !important; }

/* ===========================================================
   INNER PAGE CONTENT , centered presentation
   Applies to .bm-wrap (location pages), .bm-section, and .bm-page.
   Centers text and centers constrained blocks via aggressive
   descendant selectors with !important so inline page CSS cannot
   override (inline page CSS does not use !important on its
   margin/text-align declarations).
   =========================================================== */
.bm-wrap,
.bm-section,
.bm-page {
    text-align: center !important;
}
.bm-wrap *,
.bm-section *,
.bm-page * {
    text-align: inherit;
}
.bm-wrap h1, .bm-wrap h2, .bm-wrap h3, .bm-wrap h4, .bm-wrap p, .bm-wrap blockquote,
.bm-wrap .bm-eyebrow, .bm-wrap .bm-h1, .bm-wrap .bm-h2, .bm-wrap .bm-h3,
.bm-wrap .bm-lede, .bm-wrap .bm-lead, .bm-wrap .bm-body,
.bm-wrap .bm-rule, .bm-wrap .bm-cta-btn, .bm-wrap .bm-ghost,
.bm-wrap img, .bm-wrap figure,
.bm-section h1, .bm-section h2, .bm-section h3, .bm-section h4, .bm-section p,
.bm-section .bm-eyebrow, .bm-section .bm-h1, .bm-section .bm-h2, .bm-section .bm-h3,
.bm-section .bm-lede, .bm-section .bm-lead, .bm-section .bm-body,
.bm-section .bm-rule, .bm-section .bm-cta-btn, .bm-section .bm-ghost,
.bm-section img, .bm-section figure,
.bm-page h1, .bm-page h2, .bm-page h3, .bm-page h4, .bm-page p,
.bm-page .bm-eyebrow, .bm-page .bm-lead, .bm-page .bm-lede,
.bm-page .bm-rule, .bm-page img, .bm-page figure {
    margin-left: auto !important;
    margin-right: auto !important;
}
.bm-wrap .bm-rule,
.bm-section .bm-rule,
.bm-page .bm-rule { display: block; }
.bm-wrap ul, .bm-wrap ol,
.bm-section ul, .bm-section ol,
.bm-page ul, .bm-page ol {
    text-align: left;
    display: inline-block;
    margin-left: auto !important;
    margin-right: auto !important;
}
.bm-wrap img,
.bm-section img,
.bm-page img { display: block; }
/* The button row inside location/areas pages uses an inline div, center it */
.bm-wrap .bm-section > div,
.bm-section > div {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* === Location-page sub-components (grid lists, rows, FAQ, warn box) === */
.bm-wrap .bm-grid-2,
.bm-section .bm-grid-2 {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1100px;
}
.bm-wrap .bm-row,
.bm-section .bm-row {
    text-align: center !important;
    padding: 28px 24px !important;
}
.bm-wrap .bm-row:nth-child(even),
.bm-section .bm-row:nth-child(even) {
    padding-left: 24px !important;
}
.bm-wrap .bm-row-title,
.bm-wrap .bm-row-desc,
.bm-section .bm-row-title,
.bm-section .bm-row-desc { text-align: center !important; }

/* FAQ , centered */
.bm-wrap .bm-faq,
.bm-section .bm-faq {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 900px;
}
.bm-wrap .bm-faq-item,
.bm-section .bm-faq-item { text-align: center !important; }
.bm-wrap .bm-faq-q,
.bm-section .bm-faq-q {
    text-align: center !important;
    padding: 26px 40px 26px 40px !important;
}
.bm-wrap .bm-faq-q::after,
.bm-section .bm-faq-q::after {
    right: 14px !important;
}
.bm-wrap .bm-faq-a,
.bm-section .bm-faq-a {
    text-align: center !important;
    padding: 0 24px 26px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 780px;
}

/* Warn box and border box */
.bm-wrap .bm-warn,
.bm-section .bm-warn,
.bm-wrap .bm-border-box,
.bm-section .bm-border-box {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 780px;
}

/* Stats inside location pages stay grid-aligned (no center override) */
.bm-wrap .bm-stats,
.bm-section .bm-stats {
    margin-left: auto !important;
    margin-right: auto !important;
}
.bm-wrap .bm-stats .bm-stat,
.bm-section .bm-stats .bm-stat { text-align: center !important; }
.bm-wrap .bm-stat-num,
.bm-wrap .bm-stat-lbl,
.bm-section .bm-stat-num,
.bm-section .bm-stat-lbl { text-align: center !important; }

/* Categories grid on location pages (the 6-card grid at bottom) */
.bm-wrap .bm-categories,
.bm-section .bm-categories {
    margin-left: auto !important;
    margin-right: auto !important;
}
.bm-wrap .bm-categories .item,
.bm-section .bm-categories .item { text-align: center !important; }

/* ===========================================================
   Bottom CTA sections on location pages
   .bm-cta-section (orange bar) and .bm-bottom (dark bar) had
   their own internal grid/flex layouts left-aligning content.
   Override to center everything.
   =========================================================== */
.bm-wrap .bm-cta-section,
.bm-wrap .bm-bottom {
    text-align: center !important;
    display: block !important;
    grid-template-columns: none !important;
}
.bm-wrap .bm-cta-section .bm-h2,
.bm-wrap .bm-cta-section h2,
.bm-wrap .bm-cta-section p,
.bm-wrap .bm-cta-section .bm-cta-btn,
.bm-wrap .bm-bottom .bm-h2,
.bm-wrap .bm-bottom h2,
.bm-wrap .bm-bottom p,
.bm-wrap .bm-bottom .bm-cta-btn,
.bm-wrap .bm-bottom .bm-ghost {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 760px;
}
.bm-wrap .bm-bottom .bm-cta-btn { margin-top: 24px !important; }

/* Step numbered list inside .bm-border-box , each step centered on its own line */
.bm-wrap .bm-border-box p,
.bm-section .bm-border-box p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 760px;
}
.bm-wrap .step-num,
.bm-section .step-num {
    display: inline-block !important;
    margin-right: 14px !important;
}