/*
Theme Name: Ottawa Parking Enforcement
Theme URI: https://ottawaparkingenforcement.ca/
Description: Custom theme for Ottawa Parking Enforcement. Warm-local light design system. Private property parking enforcement, towing, and lot management across the Ottawa-Gatineau area.
Version: 1.0
Author: Dali Strategy
Author URI: https://dalistrategy.com/
*/

/* ===========================================================
   GLOBAL BASE , Warm-Local 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: #CC0000; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-weight: 700;
    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 #CC0000;
    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: #CC0000; }

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

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

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

/* Page banner padding helper for guide-style service pages */
.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.
   =========================================================== */
.cta-box,
.bm-bottom-cta,
.bm-cta-section,
.bm-bottom {
    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 #CC0000 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}
.bm-cta-section,
.bm-bottom {
    background: #0a0a0a !important;
    color: #FFFFFF !important;
    padding: 80px 48px !important;
    text-align: center !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: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(2rem, 5vw, 3.4rem) !important;
    line-height: 1.05 !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: #CC0000 !important;
    color: #FFFFFF !important;
    padding: 22px 48px !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !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: #CC0000 !important;
    color: #FFFFFF !important;
    padding: 22px 48px !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !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; }
.ope-header + * { margin-top: 0 !important; }
section + section { margin-top: 0; }
.ope-hero + .ope-stats { margin-top: 0 !important; }
.ope-stats { margin-top: 0 !important; }
.ope-footer { margin-top: 0 !important; }
.ope-cta { margin-bottom: 0 !important; }
.ope-cta + .ope-footer { margin-top: 0 !important; }

/* ===========================================================
   INNER PAGE CONTENT , centered presentation
   Applies to .bm-wrap, .bm-section, and .bm-page.
   Centers text and centers constrained blocks via aggressive
   descendant selectors with !important so inline page CSS cannot
   override.
   =========================================================== */
.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; }
.bm-wrap .bm-section > div,
.bm-section > div {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* === Location-page sub-components === */
.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 grid */
.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 */
.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-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 */
.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;
}

/* ===========================================================
   GLOBAL SHARP CORNERS , buttons, cards, dropdowns, inputs
   =========================================================== */
button, .btn, input, select, textarea,
.cta-btn, .bm-cta-btn, .ope-btn-primary, .ope-btn-outline,
.ope-service-card, .ope-cat-sub .sub, .area-card,
.warm-cta-btn, .info-check-box, .step-box, .faq-item {
    border-radius: 0 !important;
}

/* ===========================================================
   PHONE CTA BUTTONS , phone number text must ALWAYS be visible
   Force white text on red background, both default and hover.
   Some plugin or CSS combine optimization was making text appear
   to require hover; explicit !important prevents that.
   =========================================================== */
.ope-btn-primary,
.ope-btn-primary:link,
.ope-btn-primary:visited,
.ope-btn-primary:active {
    background: #CC0000 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-indent: 0 !important;
    border-color: #CC0000 !important;
}
.ope-btn-primary:hover,
.ope-btn-primary:focus {
    background: #a30000 !important;
    color: #FFFFFF !important;
    border-color: #a30000 !important;
}
.ope-btn-outline,
.ope-btn-outline:link,
.ope-btn-outline:visited,
.ope-btn-outline:active {
    background: #FFFFFF !important;
    color: #CC0000 !important;
    border: 2px solid #CC0000 !important;
    opacity: 1 !important;
}
.ope-btn-outline:hover,
.ope-btn-outline:focus {
    background: #CC0000 !important;
    color: #FFFFFF !important;
}
.ope-header-cta,
.ope-header-cta:link,
.ope-header-cta:visited,
.ope-header-cta:active,
.ope-header-cta:hover,
.ope-header-cta:focus,
.ope-footer-phone-cta,
.ope-footer-phone-cta:link,
.ope-footer-phone-cta:visited,
.ope-footer-phone-cta:active,
.ope-footer-phone-cta:hover,
.ope-footer-phone-cta:focus,
.ope-float-call,
.ope-float-call:link,
.ope-float-call:visited,
.ope-float-call:active,
.ope-float-call:hover,
.ope-float-call:focus {
    background: #CC0000 !important;
    color: #FFFFFF !important;
    border-color: #CC0000 !important;
    opacity: 1 !important;
}
.ope-header-cta .ope-cta-label,
.ope-float-call .ope-float-label {
    display: inline !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===========================================================
   CONTENT IMAGE UTILITY , consistent inline images
   =========================================================== */
.ope-inline-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 36px auto;
    max-height: 460px;
    object-fit: cover;
    border-radius: 0;
}
.ope-inline-fig {
    margin: 36px auto;
    text-align: center;
    max-width: 100%;
}
.ope-inline-fig img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
    margin: 0 auto;
}
.ope-inline-fig figcaption {
    font-size: 0.85rem;
    color: #6A6A6A;
    margin-top: 10px;
    font-style: italic;
    letter-spacing: 0.02em;
}

/* Two-image side-by-side block on location pages */
.ope-img-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 36px 0;
}
.ope-img-pair img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}
@media (max-width: 680px) {
    .ope-img-pair { grid-template-columns: 1fr; }
    .ope-img-pair img { height: 220px; }
}

/* Image-rich service-card grids on category pages */
.ope-svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 36px 0 48px;
}
.ope-svc-grid .ope-svc-item {
    background: #FFFFFF;
    border: 1px solid #ECE5DC;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ope-svc-grid .ope-svc-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.07);
    border-color: #CC0000;
}
.ope-svc-grid .ope-svc-item img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.ope-svc-grid .ope-svc-body {
    padding: 22px 22px 26px;
    text-align: left;
}
.ope-svc-grid .ope-svc-body h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    margin: 0 0 8px;
    color: #1A1A1A;
}
.ope-svc-grid .ope-svc-body p {
    font-size: 0.95rem;
    color: #4A4A4A;
    margin: 0 0 14px;
    line-height: 1.6;
}
.ope-svc-grid .ope-svc-body a {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #CC0000;
}
@media (max-width: 900px) {
    .ope-svc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .ope-svc-grid { grid-template-columns: 1fr; }
}

/* Service-areas page , thumbnails on each card */
.area-card .area-thumb {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    margin: 0 -26px 18px;
    width: calc(100% + 52px);
    max-width: none;
}