/* ==========================================================================
   PneuTireCanada — brand palette
   Loaded LAST by this theme's layouts/default.htm (after custom.css).
   Not loaded by child themes (theme-magster has its own layout), so the
   palette below never leaks into them.

   Colours sampled from the logo (assets/images/logo-pneutirecanada.webp):
     red  #be181c  — "tirecanada", maple leaf, speed lines  → primary / CTA
     blue #2756a1  — "pneu"                                  → accent / links
     ink  #111418  — tyre, ".com"                            → dark surfaces
   ========================================================================== */

:root,
[data-bs-theme=light] {
    --ptc-red: #be181c;
    --ptc-red-dark: #9a1317;
    --ptc-red-light: #ec4a4e;   /* red readable on dark backgrounds */
    --ptc-blue: #2756a1;
    --ptc-blue-dark: #1d4280;
    --ptc-ink: #111418;
    --ptc-ink-2: #1c2026;

    /* Around (ar-*) */
    --ar-primary: var(--ptc-red);
    --ar-primary-rgb: 190, 24, 28;
    --ar-primary-text-emphasis: var(--ptc-red-dark);
    --ar-primary-bg-subtle: #fbe9e9;
    --ar-primary-border-subtle: #f3c4c5;
    --ar-secondary: var(--ptc-ink);
    --ar-secondary-rgb: 17, 20, 24;
    --ar-info: var(--ptc-blue);
    --ar-info-rgb: 39, 86, 161;
    --ar-info-text-emphasis: var(--ptc-blue-dark);
    --ar-info-bg-subtle: #e9eff8;
    --ar-info-border-subtle: #c6d4ea;
    --ar-danger: var(--ptc-red);
    --ar-danger-rgb: 190, 24, 28;
    --ar-link-color: var(--ptc-blue);
    --ar-link-color-rgb: 39, 86, 161;
    --ar-link-hover-color: var(--ptc-red);
    --ar-link-hover-color-rgb: 190, 24, 28;

    /* Bootstrap (bs-*) — kept in sync for the few rules that read them */
    --bs-primary: var(--ptc-red);
    --bs-primary-rgb: 190, 24, 28;
    --bs-secondary: var(--ptc-ink);
    --bs-secondary-rgb: 17, 20, 24;
}

.text-primary { color: var(--ptc-red) !important; }
.bg-primary { background-color: var(--ptc-red) !important; }
.bg-secondary { background-color: var(--ptc-ink) !important; }
.text-info { color: var(--ptc-blue) !important; }
.bg-info { background-color: var(--ptc-blue) !important; }
.border-primary { border-color: var(--ptc-red) !important; }

/* ---------- Buttons ----------
   No generic `.btn` override here: loaded after theme.css, it would beat every
   variant (.btn-link, .btn-outline-*, …) that sets --ar-btn-color. */
.btn-link {
    --ar-btn-color: var(--ptc-red);
    --ar-btn-hover-color: var(--ptc-red-dark);
    --ar-btn-active-color: var(--ptc-red-dark);
}

.btn-primary {
    --ar-btn-color: #fff;
    --ar-btn-bg: var(--ptc-red);
    --ar-btn-border-color: var(--ptc-red);
    --ar-btn-hover-color: #fff;
    --ar-btn-hover-bg: var(--ptc-red-dark);
    --ar-btn-hover-border-color: var(--ptc-red-dark);
    --ar-btn-active-color: #fff;
    --ar-btn-active-bg: var(--ptc-red-dark);
    --ar-btn-active-border-color: var(--ptc-red-dark);
    --ar-btn-disabled-color: #fff;
    --ar-btn-disabled-bg: var(--ptc-red);
    --ar-btn-disabled-border-color: var(--ptc-red);
}

.btn-outline-primary {
    --ar-btn-color: var(--ptc-red);
    --ar-btn-border-color: var(--ptc-red);
    --ar-btn-hover-color: #fff;
    --ar-btn-hover-bg: var(--ptc-red);
    --ar-btn-hover-border-color: var(--ptc-red);
    --ar-btn-active-color: #fff;
    --ar-btn-active-bg: var(--ptc-red-dark);
    --ar-btn-active-border-color: var(--ptc-red-dark);
    --ar-btn-disabled-color: var(--ptc-red);
    --ar-btn-disabled-border-color: var(--ptc-red);
}

.btn-info {
    --ar-btn-color: #fff;
    --ar-btn-bg: var(--ptc-blue);
    --ar-btn-border-color: var(--ptc-blue);
    --ar-btn-hover-color: #fff;
    --ar-btn-hover-bg: var(--ptc-blue-dark);
    --ar-btn-hover-border-color: var(--ptc-blue-dark);
}

.btn-secondary,
.btn-light,
.card-hover-primary:hover .btn-primary {
    --ar-btn-color: var(--ptc-ink) !important;
    --ar-btn-hover-color: var(--ptc-ink) !important;
    --ar-btn-active-color: var(--ptc-ink) !important;
}

/* ---------- Scrollbars (tire size picker) ---------- */
#tire_size_checkboxes::-webkit-scrollbar-thumb { background: var(--ptc-red); }
#tire_size_checkboxes::-webkit-scrollbar-thumb:hover { background: var(--ptc-red-dark); }
#tire_size_checkboxes { scrollbar-color: var(--ptc-red) #f1f1f1; }

/* ---------- Header: white bar so the full-colour logo reads ---------- */
.header .navbar.ptc-navbar {
    background-color: #fff !important;
    border-bottom: 3px solid var(--ptc-red);
    box-shadow: 0 2px 10px rgba(17, 20, 24, 0.08);
    --ar-navbar-color: var(--ptc-ink);
    --ar-navbar-hover-color: var(--ptc-red);
    --ar-navbar-active-color: var(--ptc-red);
    --ar-nav-link-color: var(--ptc-ink) !important;
    --ar-nav-link-hover-color: var(--ptc-red);
}

.header .navbar.ptc-navbar .navbar-brand img {
    display: block;
    height: 52px;
    width: auto;
}

.header .navbar.ptc-navbar .nav-link,
.header .navbar.ptc-navbar .nav-icon-link {
    color: var(--ptc-ink);
}

.header .navbar.ptc-navbar .nav-link:hover,
.header .navbar.ptc-navbar .nav-link:hover .nav-icon-link,
.header .navbar.ptc-navbar .nav-link.active {
    color: var(--ptc-red);
}

.header .navbar.ptc-navbar .nav-item:hover {
    background-color: rgba(190, 24, 28, 0.06);
    border-color: var(--ptc-red);
}

/* Mobile toggler (custom.css paints it white for the old dark bar) */
.header .navbar.ptc-navbar .navbar-toggler-icon,
.header .navbar.ptc-navbar .navbar-toggler-icon::before,
.header .navbar.ptc-navbar .navbar-toggler-icon::after {
    background-color: var(--ptc-ink);
}

/* Mobile off-canvas stays dark; its header gets a white strip for the logo.
   Scoped to < lg: on desktop the off-canvas is the inline menu bar. */
@media (max-width: 991.98px) {
    .header .navbar.ptc-navbar #primaryMenu .offcanvas-header {
        background-color: #fff;
        border-bottom: 3px solid var(--ptc-red);
    }

    .header .navbar.ptc-navbar #primaryMenu .offcanvas-header .ai-circle-x {
        color: var(--ptc-ink) !important;
    }

    .header .navbar.ptc-navbar #primaryMenu .nav-link {
        color: #fff;
    }
}

.navbar-stuck {
    background-color: #fff !important;
}

/* ---------- Footer ---------- */
.ptc-footer-logo {
    background-color: #fff;
    border-bottom: 3px solid var(--ptc-red);
    padding: 1.5rem 0;
}

.ptc-footer-logo img {
    display: block;
    height: 64px;
    width: auto;
    margin: 0 auto;
}

footer h3 {
    color: #fff;
    position: relative;
    padding-bottom: .5rem;
}

footer h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    background-color: var(--ptc-red);
}

@media (min-width: 768px) {
    footer .text-md-center h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    footer .text-md-end h3::after {
        left: auto;
        right: 0;
    }
}

footer a:hover,
.footer-menu .nav-item:hover .nav-link {
    color: var(--ptc-red-light);
}

footer .text-primary {
    color: var(--ptc-red-light) !important;
}