/* Springboks vs Italy weekend, Fri 6 Nov 15:00 to Sun 8 Nov 2026 (Nathan, 2026-11-06: "i want to make my site Springbok
   and Italy themed"). Loaded by _Layout only while Shared.Domain.CallTheMargin.ThemeOn, with html.theme-boksitaly.
   Bok green and gold through the site's own custom properties (so buttons and highlights follow), the Italian tricolore
   as the accent. Red stays red: it means "sale" on this site. No team crests or logos - colours only. */

:root.theme-boksitaly {
    --yellow: #FFB81C;
    --yellow-700: #E9A100;
    --navy: #00563A;
    --navy-800: #003D29;
    --ring: 0 0 0 3px rgba(0,86,58,.22);
    --bi-green: #007749;
    --bi-deep: #00563A;
    --bi-night: #003322;
    --bi-gold: #FFB81C;
    --bi-it-green: #009246;
    --bi-it-red: #CE2B37;
    --bi-azzurri: #1F5FAD;
}

/* The thin strip above the header: Bok green and gold, then the tricolore. */
.theme-boksitaly .sw-topstrip {
    height: 6px;
    background: linear-gradient(90deg, var(--bi-deep) 0 25%, var(--bi-gold) 25% 50%,
                                var(--bi-it-green) 50% 66.66%, #fff 66.66% 83.33%, var(--bi-it-red) 83.33% 100%);
}

/* ---------- The strip under the header ---------- */
.bi-strip { background: linear-gradient(90deg, var(--bi-night), var(--bi-green) 55%, var(--bi-azzurri)); color: #fff; border-bottom: 3px solid var(--bi-gold); }
.bi-strip-in { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; padding: 7px 18px; text-align: center; min-height: 48px; }
.bi-flags { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.bi-flag { display: inline-block; width: 30px; height: 20px; border-radius: 3px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); }
.bi-flag-za { background: linear-gradient(180deg, var(--bi-deep) 0 50%, var(--bi-gold) 50% 100%); }
.bi-flag-it { background: linear-gradient(90deg, var(--bi-it-green) 0 33.3%, #fff 33.3% 66.6%, var(--bi-it-red) 66.6% 100%); }
.bi-strip-text { display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.bi-strip-name { font-family: 'Montserrat', sans-serif; font-weight: 900; color: var(--bi-gold); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; }
.bi-strip-sub { font-size: .95rem; font-weight: 600; }
.bi-left { display: inline-block; background: var(--bi-gold); color: var(--bi-night); font-family: 'Montserrat'; font-weight: 800; font-size: .82rem; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.bi-strip-cta { display: inline-block; background: #fff; color: var(--bi-night); font-weight: 800; font-size: .9rem; border-radius: 999px; padding: 5px 14px; text-decoration: none; white-space: nowrap; }
.bi-strip-cta:hover { background: var(--bi-gold); color: var(--bi-night); }

/* The home page hero in Bok colours. */
.theme-boksitaly .hero { background: radial-gradient(120% 95% at 22% 8%, #0A8A58 0%, var(--bi-deep) 48%, var(--bi-night) 100%); }
.theme-boksitaly .hero::after { background: linear-gradient(90deg, var(--bi-gold) 0 50%, var(--bi-it-green) 50% 66.66%, #fff 66.66% 83.33%, var(--bi-it-red) 83.33% 100%); }

/* A tricolore line along the top of the footer. */
.theme-boksitaly footer { border-top: 4px solid transparent; border-image: linear-gradient(90deg, var(--bi-deep) 0 25%, var(--bi-gold) 25% 50%, var(--bi-it-green) 50% 66.66%, #fff 66.66% 83.33%, var(--bi-it-red) 83.33% 100%) 1; }

@media (max-width: 575.98px) {
    .bi-strip-in { padding: 6px 10px; gap: 5px 8px; }
    .bi-strip-name { font-size: .95rem; }
    .bi-strip-sub { font-size: .85rem; }
    .bi-flag { width: 24px; height: 16px; }
}