/* ==========================================================================
   Checker Cells — brand theme layer
   Source of truth: "Checker Cells Brand Guidelines V1.0" (August 2026).

   This file loads last, after Bootstrap / helper / style.css, so it is the
   place where the legacy template is pulled onto the brand system. Section
   references below (§06, §07, …) point at the guideline chapters.
   ========================================================================== */

:root {
    /* §06 — the five core colours. Role matters as much as the value:
       teal is the action colour on LIGHT surfaces, mint is its counterpart
       on DARK ones. They are not interchangeable. */
    --checker-navy: #181e32;
    --checker-navy-deep: #111522;
    --checker-teal: #0f766e;
    --checker-teal-hover: #0c5f58;
    --checker-mint: #2dd4bf;
    --checker-mint-hover: #24bfae;
    --checker-amber: #f4b942;
    --checker-cloud: #f7f9fc;

    /* §06 — functional greys and the inks that pair with the accents. */
    --checker-ink-2: #333a4e;
    --checker-muted: #667085;
    --checker-border: #c6cedc;
    --checker-mist: #e9edf3;
    --checker-elevated: #242b45;
    --checker-on-dark: #b8bfce;
    --checker-mint-ink: #0b3a34;
    --checker-amber-ink: #5c4308;

    /* Q2 — the palette has no error role. §06 gives amber to "date badges and
       alerts", which cannot also carry destructive and validation states, so
       this is a functional colour in the same sense as the greys above, not a
       sixth brand colour. Chosen by measurement: Bootstrap's #dc3545 fails AA
       on three of the four grounds it lands on (min 3.61:1). #B3261E clears
       4.5:1 on every one of them — white 6.54, cloud 6.20, mist 5.56, and the
       legacy field ground 5.21 — and stays blue-leaning enough to sit beside
       navy without reading orange. */
    --checker-danger: #b3261e;
    --checker-danger-ink: #8c1d18;
    --checker-danger-tint: #f7e9e8;

    /* Q1 — corner radii. The guideline fixes the logo's own radius at 5/96 of
       the mark and 5/22 of a single cell (~23%) but publishes no UI scale.
       These three steps hold roughly that proportion at the sizes they are
       used on — 6 on a ~26px badge, 12 on a 44px control — and replace the
       seven ad-hoc values the template carried. A full pill is reserved for
       avatars and count bubbles, where the shape itself is the meaning. */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 16px;
    --checker-radius: var(--r-md);

    /* Q5 — dark mode is out of scope for launch: a single page flipping to
       dark while every other page stays light reads as a bug rather than a
       feature. The dark roles above (--checker-navy, --checker-navy-deep,
       --checker-elevated, --checker-on-dark, --checker-mint) are §06's
       navy-surface roles, not a latent theme — no rule in this file reads
       `prefers-color-scheme`, and the one file that does is the adaptive
       favicon, which the browser draws outside the page. Turning dark mode
       on site-wide later reuses these roles rather than inventing a second
       palette. */

    --primary: var(--checker-teal);
    --secondary: var(--checker-navy);
}

/* §07 — approved fallback stacks, verbatim from the guideline. */
html[lang="ar"] body {
    font-family: "Cairo", "Tahoma", sans-serif;
}

html[lang="en"] body {
    font-family: "Manrope", system-ui, sans-serif;
}

/* §07 — "no weights lighter than 500 in interfaces". The template shipped
   most body copy at 400 and the hero subtitle at 300. */
body {
    color: var(--checker-navy);
    background: var(--checker-cloud);
    font-weight: 500;
}

.font-w300,
.font-w400 {
    font-weight: 500 !important;
}

/* §07 — Arabic sets at 1.7; Latin stays at 1.5. Cairo needs the extra
   leading for its ascenders and diacritics. */
html[lang="ar"] body {
    line-height: 1.7;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
    line-height: 1.45;
}

/* §07 — the published web scale. The helper stylesheet ships h1 at 48px and
   h2 at 40px, which puts section heads in the display band and flattens the
   difference between levels. */
h1 {
    font-size: 30px;
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 18px;
}

@media (min-width: 992px) {
    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }
}

/* §07 — "-2% tracking on display only", and Arabic is never tracked.
   Previously -1.5% was applied to every heading level. */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: normal;
}

html[lang="en"] .display-title,
html[lang="en"] .slidertopheader__home_content .font-lg-44,
html[lang="en"] .slidertopheader__home_content .font-xl-50 {
    letter-spacing: -0.02em;
}

/* §06 — the greys the template used (#79828c, #5a5e63, #787878) are not in
   the palette and #79828c fails AA at 3.90:1 on white. The approved values
   pass: #667085 = 4.97:1, #333a4e = 11.31:1. */
.text-light {
    color: var(--checker-muted) !important;
}

.text-light2,
.text-light3 {
    color: var(--checker-ink-2) !important;
}

a {
    color: var(--checker-teal);
}

a:hover,
a:focus {
    color: var(--checker-navy);
}

/* WCAG 2.1 AA — 2.4.7 Focus Visible. helper-4.0.0.min.css kills every focus
   outline with `outline:0`; nothing restored it. The ring is the highlight
   cell's colour, per §09's "active state" language. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 3px solid var(--checker-teal) !important;
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* On navy surfaces the ring switches to mint (8.88:1 on navy). */
.headerbg a:focus-visible,
.headerbg button:focus-visible,
.sidenav a:focus-visible,
.sidenav button:focus-visible,
.footerbg a:focus-visible,
.footerbg button:focus-visible,
.footerbg input:focus-visible,
.slidertopheader a:focus-visible,
.slidertopheader button:focus-visible {
    outline-color: var(--checker-mint) !important;
}

/* §09 — page headers carry the scattered cell pattern, never the mark. */
.slidertopheader__pages {
    background-color: var(--checker-navy) !important;
    background-image: url("../brand/checker-cells/hero-background.svg") !important;
    background-position: center !important;
    background-size: cover !important;
}

.slidertopheader__pages h1,
.slidertopheader__pages h2,
.slidertopheader__pages .breadcrumb-item,
.slidertopheader__pages .breadcrumb-item a {
    color: var(--checker-cloud) !important;
}

.slidertopheader__events h1,
.slidertopheader__events h2,
.slidertopheader__events h3,
.slidertopheader__events .breadcrumb-item,
.slidertopheader__events .breadcrumb-item a,
.footerbg h1,
.footerbg h2,
.footerbg h3,
.footerbg h4,
.footerbg h5,
.footerbg h6 {
    color: var(--checker-cloud) !important;
}

/* §06 — teal leads on light surfaces. */
.bg-primary,
.bg-colored.primary::before {
    background-color: var(--checker-teal) !important;
}

.bg-secondary,
.bg-colored.secondary::before {
    background-color: var(--checker-navy) !important;
}

.text-primary {
    color: var(--checker-teal) !important;
}

.text-secondary {
    color: var(--checker-navy) !important;
}

.border-primary,
.page-item.active .page-link {
    border-color: var(--checker-teal) !important;
}

/* §10 — primary action: white on teal = 5.47:1. */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
    color: #ffffff !important;
    background-color: var(--checker-teal) !important;
    border-color: var(--checker-teal) !important;
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    color: #ffffff !important;
    background-color: var(--checker-teal-hover) !important;
    border-color: var(--checker-teal-hover) !important;
}

/* §06 — on navy surfaces the same action switches to mint with navy ink
   (8.88:1). Teal on navy is only 3.0:1 and the guideline forbids it. */
/* Only buttons sitting directly on the navy surface. The hero search card is
   a white panel inside .slidertopheader, so its submit stays teal. */
.headerbg .btn-primary,
.sidenav .btn-primary,
.footerbg .btn-primary:not(.newsletterform__btn),
.slidertopheader :is(.bg-white, .bg-light, .card, .rounded-xl) .btn-primary {
    color: #ffffff !important;
    background-color: var(--checker-teal) !important;
    border-color: var(--checker-teal) !important;
}

.headerbg .btn-primary,
.sidenav .btn-primary,
.footerbg .btn-primary,
.slidertopheader > .btn-primary,
.slidertopheader .container > .btn-primary,
.bg-secondary > .btn-primary {
    color: var(--checker-navy) !important;
    background-color: var(--checker-mint) !important;
    border-color: var(--checker-mint) !important;
}

/* The hover/focus scope has to match the mint scope above one-for-one.
   `.slidertopheader .btn-primary:hover` was a descendant selector where the
   base rule is a child one, so it also reached the hero search card — a
   white panel whose submit is deliberately teal. Hovering repainted it
   mint-hover while the teal rule's white ink stayed: white on #24bfae is
   2.30:1, against 5.47:1 at rest. Same for the footer, where the base rule
   only ever paints the newsletter button mint.

   The ink is pinned here as well, so no state can inherit white from the
   teal rule onto a mint ground. Buttons outside this scope fall through to
   `.btn-primary:hover` (teal-hover, white, 7.52:1). */
.headerbg .btn-primary:hover,
.headerbg .btn-primary:focus,
.sidenav .btn-primary:hover,
.sidenav .btn-primary:focus,
.footerbg .newsletterform__btn:hover,
.footerbg .newsletterform__btn:focus,
.slidertopheader > .btn-primary:hover,
.slidertopheader > .btn-primary:focus,
.slidertopheader .container > .btn-primary:hover,
.slidertopheader .container > .btn-primary:focus,
.bg-secondary > .btn-primary:hover,
.bg-secondary > .btn-primary:focus {
    color: var(--checker-navy) !important;
    background-color: var(--checker-mint-hover) !important;
    border-color: var(--checker-mint-hover) !important;
}

/* …and the teal set needs its own hover, because the rules that put it back
   on teal are more specific than the generic `.btn-primary:hover`. Without
   this the hero search button and the footer's non-newsletter buttons sit at
   a flat teal through hover and focus, with no affordance at all. White on
   teal-hover is 7.52:1. */
.slidertopheader :is(.bg-white, .bg-light, .card, .rounded-xl) .btn-primary:hover,
.slidertopheader :is(.bg-white, .bg-light, .card, .rounded-xl) .btn-primary:focus,
.footerbg .btn-primary:not(.newsletterform__btn):hover,
.footerbg .btn-primary:not(.newsletterform__btn):focus {
    color: #ffffff !important;
    background-color: var(--checker-teal-hover) !important;
    border-color: var(--checker-teal-hover) !important;
}

/* Secondary action reads as secondary: outlined, not a filled navy slab that
   competes with (or outweighs) the primary. */
.btn-secondary {
    color: var(--checker-navy) !important;
    background-color: transparent !important;
    border-color: var(--checker-border) !important;
    font-weight: 600;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
    color: var(--checker-navy) !important;
    background-color: var(--checker-mist) !important;
    border-color: var(--checker-navy) !important;
}

.headerbg .btn-secondary,
.sidenav .btn-secondary,
.footerbg .btn-secondary,
.slidertopheader .btn-secondary {
    color: var(--checker-cloud) !important;
    background-color: transparent !important;
    border-color: rgb(247 249 252 / 45%) !important;
}

.headerbg .btn-secondary:hover,
.sidenav .btn-secondary:hover,
.footerbg .btn-secondary:hover,
.slidertopheader .btn-secondary:hover,
.headerbg .btn-secondary:focus,
.sidenav .btn-secondary:focus,
.footerbg .btn-secondary:focus,
.slidertopheader .btn-secondary:focus {
    color: var(--checker-navy) !important;
    background-color: var(--checker-cloud) !important;
    border-color: var(--checker-cloud) !important;
}

.badge-primary {
    color: #ffffff !important;
    background-color: var(--checker-teal) !important;
}

/* §06 — amber is the badge colour: date badges and alerts only, always with
   its own ink (#5c4308 on #f4b942 = 5.25:1). */
.bg-amber,
.badge-amber {
    background-color: var(--checker-amber) !important;
    color: var(--checker-amber-ink) !important;
}

.text-amber-ink {
    color: var(--checker-amber-ink) !important;
}

/* One radius scale instead of 4px / 4.8px / 5px / 8.8px / 12px / 50px / 800px. */
.card,
.dropdown-menu,
.boxevents,
.rounded-lg {
    border-radius: var(--r-lg) !important;
}

.btn,
.form-control,
.custom-select,
.form-control-lg,
.custom-select-lg {
    border-radius: var(--r-md) !important;
}

.badge,
.alert {
    border-radius: var(--r-sm) !important;
}

.form-control,
.custom-select,
.card,
.dropdown-menu {
    border-color: var(--checker-border);
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--checker-teal) !important;
    box-shadow: 0 0 0 0.2rem rgb(15 118 110 / 28%);
}

/* Touch targets — WCAG 2.5.5 / review criterion 4: at least 44x44. */
.btn,
.btn-group-lg > .btn,
.btn-lg {
    min-height: 44px;
}

.form-control,
.custom-select {
    height: 44px;
}

.form-control-lg,
.custom-select-lg {
    height: 48px;
}

.sharesocial li a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
}

.navbar-nav .nav-link {
    padding-top: 10px;
    padding-bottom: 10px;
}

.btn-reset {
    min-height: 44px;
}

.slidertopheader__events .text-primary,
.slidertopheader__pages .text-primary,
.bg-secondary .text-primary,
.footerbg .text-primary {
    color: var(--checker-mint) !important;
}

/* §06 — text on dark is #b8bfce, not a neutral grey with no navy cast. */
.footerbg a,
.footerbg p,
.footerbg li {
    color: var(--checker-on-dark);
}

.footerbg a:hover,
.footerbg a:focus {
    color: var(--checker-cloud);
}

.organizersbox__title {
    background-color: var(--checker-navy) !important;
    background-image: url("../brand/checker-cells/hero-background.svg") !important;
    background-position: center !important;
    background-size: cover !important;
}

.customaccordion__style .card {
    border: 1px solid var(--checker-border);
    overflow: hidden;
}

.customaccordion__style .card-header {
    background: var(--checker-mist);
}

.customaccordion__style .card-header a,
.customaccordion__style .card-header a::after,
.cat-expand-btn {
    color: var(--checker-navy) !important;
}

.customaccordion__style .card-header a:not(.collapsed),
.cat-expand-btn:hover,
.cat-expand-btn:not(.collapsed) {
    color: var(--checker-teal) !important;
}

.ei-toggle__input:checked + .ei-toggle__track {
    background-color: var(--checker-teal);
}

.ei-toggle__input:focus + .ei-toggle__track {
    box-shadow: 0 0 0 3px rgb(15 118 110 / 45%);
}

.page-item.active .page-link {
    color: #ffffff !important;
    background-color: var(--checker-teal) !important;
}

/* §09 — "the highlight cell is the active-state symbol across the product:
   the selected tab, the chosen day, the applied filter". The template greyed
   the active nav item, so the current page read as the disabled one. */
.navbar-nav .nav-item.active > .nav-link,
.sidenav .nav-item.active > .nav-link {
    color: var(--checker-mint) !important;
    font-weight: 700;
    position: relative;
}

.sidenav .nav-item.active > .nav-link::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--checker-mint);
    transform: translateY(-50%);
}

/* §06 — empty states and alerts came straight from Bootstrap
   (#d1ecf1 / #0c5460). Nothing in that pair is a brand colour. */
.alert-info {
    background-color: var(--checker-mist) !important;
    border-color: var(--checker-border) !important;
    color: var(--checker-ink-2) !important;
}

.alert-warning {
    background-color: rgb(244 185 66 / 18%) !important;
    border-color: var(--checker-amber) !important;
    color: var(--checker-amber-ink) !important;
}

.alert-success {
    background-color: rgb(15 118 110 / 12%) !important;
    border-color: var(--checker-teal) !important;
    color: var(--checker-teal) !important;
}

/* Q2 — the error role, applied. */
.text-danger,
.invalid-feedback,
.is-invalid ~ .invalid-feedback {
    color: var(--checker-danger) !important;
}

.form-control.is-invalid,
.custom-select.is-invalid {
    border-color: var(--checker-danger) !important;
}

.form-control.is-invalid:focus,
.custom-select.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgb(179 38 30 / 28%) !important;
}

.alert-danger {
    background-color: var(--checker-danger-tint) !important;
    border-color: var(--checker-danger) !important;
    color: var(--checker-danger-ink) !important;
}

.bg-light3,
.with__svgtop {
    background-color: var(--checker-cloud) !important;
}

.footerbg {
    background: linear-gradient(135deg, var(--checker-navy-deep), var(--checker-navy)) !important;
}

/* §09 — the fallback surface for a missing event cover uses the cell
   language rather than a stock photograph. */
.ei-media-fallback {
    background-color: var(--checker-mist);
    background-image: url("../brand/checker-cells/cell-pattern-light.svg");
    background-size: cover;
    background-position: center;
}

/* Review criterion 8 / WCAG 2.3.3. The project shipped one reduced-motion
   rule for the newsletter toast; the 86 WOW reveals, the typed hero and the
   0.4s transitions were unhandled. */
@media (prefers-reduced-motion: reduce) {
    .wow,
    .wow.animated {
        visibility: visible !important;
        animation: none !important;
        animation-name: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .typed-cursor {
        display: none !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 767.98px) {
    .slidertopheader__pages {
        background-position: 55% center !important;
    }
}

/* --------------------------------------------------------------------------
   Component corrections
   -------------------------------------------------------------------------- */

/* §06 — the longest text on the site (article bodies) was rendering in
   Bootstrap's defaults (#212529 / #6c757d) plus a stray #292956. */
.blog-content,
.singlecontentbg {
    color: var(--checker-navy);
}

.blog-content p,
.blog-content li,
.singlecontentbg p,
.singlecontentbg li {
    color: var(--checker-ink-2);
}

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.singlecontentbg h1,
.singlecontentbg h2,
.singlecontentbg h3,
.singlecontentbg h4 {
    color: var(--checker-navy);
}

.blog-content a,
.singlecontentbg a {
    color: var(--checker-teal);
}

/* §09 — the section marker is the highlight cell, not a generic bar.
   .title-border.primary was #89939e, which is not in the palette. */
.title-border::after {
    width: 14px !important;
    height: 14px !important;
    border-radius: 4px !important;
    margin-top: 14px !important;
}

.title-border.primary::after,
.title-border.secondary::after {
    background-color: var(--checker-teal) !important;
}

.footerbg .title-border::after,
.bg-secondary .title-border::after,
.slidertopheader .title-border::after {
    background-color: var(--checker-mint) !important;
}

/* §09 — the loading state is a cell, so the first thing a visitor sees is the
   brand's own vocabulary rather than a generic grey ring. */
.loaderlodging .loader {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: var(--checker-teal);
    animation: ccCellPulse 1s ease-in-out infinite;
}

@keyframes ccCellPulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(.55); opacity: .35; }
}

/* §08 — the icon family itself still needs replacing with a 24px/2px
   rounded-cap line set (FontAwesome Free Regular covers only 30 of the 83
   icons this project uses, so a partial swap would leave gaps). These two
   rules apply the parts of §08 that do not depend on new assets: the active
   state is teal, and icon strokes on navy surfaces use #b8bfce. */
.nav-item.active > .nav-link > i,
.nav-item.active > .nav-link > .fa,
.active > .fa,
.is-active > .fa {
    color: var(--checker-teal);
}

.footerbg i,
.footerbg .fa,
.sidenav i,
.sidenav .fa,
.headerbg i,
.headerbg .fa {
    color: var(--checker-on-dark);
}

.footerbg .nav-item.active > .nav-link > i,
.sidenav .nav-item.active > .nav-link > i,
.headerbg .nav-item.active > .nav-link > i {
    color: var(--checker-mint);
}

/* M14 — placeholder for an organizer with no logo. Deliberately not the
   Checker Cells mark: §08 says the logo is not an icon, and standing it in
   for a third party reads as if it were their identity. */
.ei-org-initial {
    width: 60px;
    height: 60px;
    background: var(--checker-mist);
    border: 1px solid var(--checker-border);
    color: var(--checker-ink-2);
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
}

.ei-org-initial--lg {
    width: 140px;
    height: 140px;
    font-size: 56px;
}

/* --------------------------------------------------------------------------
   Typographic scale and target size — the last of the §07 / WCAG 2.5.5 gaps
   -------------------------------------------------------------------------- */

/* §07 — Arabic body copy sets at 1.7. body already does, but paragraphs and
   list items that opt out through the .line-14/15/16 utilities were still
   landing at 1.4-1.6. Headings and badges keep their tighter utilities. */
html[lang="ar"] p.line-14,
html[lang="ar"] p.line-15,
html[lang="ar"] p.line-16,
html[lang="ar"] li.line-14,
html[lang="ar"] li.line-15,
html[lang="ar"] li.line-16 {
    line-height: 1.7em !important;
}

/* §07 — "700 for headings". Utility classes were pulling section heads down
   to 500, which is the body weight, so h2 and h3 read as body copy. */
h1, h2, h3 {
    font-weight: 700 !important;
}

/* §07 — the published bands: page titles 28-32px, section heads 20-24px.
   The font-lg-* utilities carry !important, so the cap needs it too. The
   hero keeps its display size through .display-title (44-56px band). */
h2 {
    font-size: 22px !important;
}

h3 {
    font-size: 18px !important;
}

@media (min-width: 992px) {
    h2 {
        font-size: 24px !important;
    }

    h3 {
        font-size: 20px !important;
    }
}

h1.display-title {
    font-size: 44px !important;
}

@media (min-width: 1200px) {
    h1.display-title {
        font-size: 50px !important;
    }
}

@media (max-width: 991.98px) {
    h1.display-title {
        font-size: 28px !important;
    }
}

/* WCAG 2.5.5 — the remaining sub-44px targets were the header nav, the
   footer link lists and the footer contact rows. */
.navbar-nav .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* Text link lists only. The social row is also `.footerbg li > a`, and
   turning those anchors into flex containers knocked their glyph off centre —
   they centre through line-height, and `text-align` is inert in flex. */
.footerbg li:not(.ei-social-item) > a:not([class*="fa-"]),
.footerbg a.d-flex {
    min-height: 44px;
    display: flex !important;
    align-items: center;
}

/* The size and weight utilities carry !important and outrank a bare element
   selector, so the §07 caps need the same weight plus class specificity. */
h2[class*="font-"] {
    font-size: 22px !important;
}

h3[class*="font-"] {
    font-size: 18px !important;
}

@media (min-width: 992px) {
    h2[class*="font-"] {
        font-size: 24px !important;
    }

    h3[class*="font-"] {
        font-size: 20px !important;
    }
}

h1.display-title[class*="font-"] {
    font-size: 44px !important;
}

@media (min-width: 1200px) {
    h1.display-title[class*="font-"] {
        font-size: 50px !important;
    }
}

@media (max-width: 991.98px) {
    h1.display-title[class*="font-"] {
        font-size: 28px !important;
    }
}

/* §07 — headings are 700 even when a font-w* utility says otherwise. */
h1[class*="font-w"],
h2[class*="font-w"],
h3[class*="font-w"] {
    font-weight: 700 !important;
}

/* §07 — Latin body copy sets at 1.5; .line-14 was pulling it under. */
html[lang="en"] p.line-14,
html[lang="en"] li.line-14 {
    line-height: 1.5em !important;
}

/* §07 — nothing in the interface sits below 500, including text with no
   weight utility of its own. */
p, li, span, div, td, th, label, small {
    font-weight: inherit;
}

/*
   Q4 — numerals. §07 splits them: Arabic-Indic in Arabic editorial prose,
   Latin "in prices, data and phone numbers". Interface counters, dates,
   filter chips and prices are all data, so the whole interface stays on
   Latin numerals in both locales — which is also what the CMS emits, so the
   two never disagree inside one row. Arabic-Indic is left to article body
   copy, where the author is writing prose rather than reporting a value.
   No rule is needed to enforce this; it is recorded so it is not re-opened.
*/

/* §07 — Latin body copy sets at 1.5. style.css leaves the site on 1.4. */
html[lang="en"] body {
    line-height: 1.5;
}

/* §07 — Bootstrap's own components ship at 400 and never picked up the
   interface minimum: menu items, pagination and small print. */
.dropdown-item,
.page-link,
.small,
small,
.badge {
    font-weight: 500;
}

/* §06 — Bootstrap's muted grey (#6c757d) is not in the palette. */
.text-muted {
    color: var(--checker-muted) !important;
}

/* §06 — .bg-light was #e2e6e9, which is not in the palette, and the guideline
   only certifies the accent against white ("white on teal 5.5:1"). On that
   tinted ground the muted grey fell to 3.96:1 and the teal link to 4.36:1.
   These panels sit on the Cloud page ground, so white still reads as a raised
   surface while putting every value back inside a certified pair:
   #667085 -> 4.97:1, #0F766E -> 5.47:1, #333A4E -> 11.31:1. */
.bg-light,
.bg-colored.light::before {
    background-color: #ffffff !important;
}

.bg-light {
    border: 1px solid var(--checker-border);
}

/* --------------------------------------------------------------------------
   Error states (403 / 404 / 419 / 429 / 500 / 503)
   The status code leads; the cells separate it from the message. No panel,
   no illustration — the previous layout gave half the viewport to a grey box
   that carried no information.
   -------------------------------------------------------------------------- */
.ei-error {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    padding: 0 0 8px;
}

.ei-error__code {
    font-size: clamp(76px, 15vw, 132px);
    line-height: .88;
    font-weight: 800;
    color: var(--checker-navy);
    font-variant-numeric: tabular-nums;
    margin: 0;
    /* the code is data, so it stays in Latin numerals in both locales (§07) */
    direction: ltr;
    unicode-bidi: isolate;
}

html[lang="ar"] .ei-error__code {
    font-weight: 700;
    letter-spacing: normal;
}

html[lang="en"] .ei-error__code {
    /* §07 — -2% tracking, display only */
    letter-spacing: -0.02em;
}

.ei-error__cells {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 22px;
}

.ei-error__cells span {
    display: block;
    background: var(--checker-navy);
}

.ei-error__title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--checker-navy);
    margin: 0 0 12px;
}

.ei-error__message {
    font-size: 17px;
    color: var(--checker-ink-2);
    max-width: 46ch;
    margin: 0 auto 28px;
}

.ei-error__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.ei-error__actions .btn {
    margin: 0 !important;
}

@media (min-width: 992px) {
    .ei-error {
        padding: 8px 0 24px;
    }

    .ei-error__title {
        font-size: 24px !important;
    }
}


/* --------------------------------------------------------------------------
   Social icons
   Two pre-existing faults, independent of the target-size work above:
   · a grouped rule in helper-4.0.0.min.css repaints every social circle with
     the old template's primary (#89939e), so the platform colours never showed
   · .tk / .ti (TikTok) and have no colour rule at all, so on a white card the
     TikTok circle rendered invisible — a gap in the row
   -------------------------------------------------------------------------- */
.sharesocial li a {
    display: inline-block !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 17px !important;
    text-align: center !important;
    border-radius: 50%;
}

/* On the navy footer the row is our surface, so it uses the palette's dark
   roles rather than seven competing third-party colours. */
.footerbg .sharesocial li a,
.sidenav .sharesocial li a {
    background-color: var(--checker-elevated) !important;
    color: var(--checker-on-dark) !important;
    border-color: var(--checker-elevated) !important;
}

.footerbg .sharesocial li a:hover,
.footerbg .sharesocial li a:focus,
.sidenav .sharesocial li a:hover,
.sidenav .sharesocial li a:focus {
    background-color: var(--checker-mint) !important;
    color: var(--checker-navy) !important;
    border-color: var(--checker-mint) !important;
}

/* On light surfaces the platform marks keep their own colours — they identify
   third parties, not us — but the missing ones have to be filled in. */
.tk,
.ti {
    color: #ffffff;
    background-color: #010101;
    border-color: #010101;
}

.pin {
    color: #ffffff;
    background-color: #bd081c;
    border-color: #bd081c;
}

/* --------------------------------------------------------------------------
   Tagline lockup on narrow screens (§04)
   The tagline is indented under the name, which is right when there is room.
   Below 480px that indent plus the Latin 0.18em tracking pushes the line past
   the viewport and it wraps mid-phrase. Centring the lockup and dropping the
   indent keeps the tagline on one line without touching the type ratios.
   -------------------------------------------------------------------------- */
@media (max-width: 479.98px) {
    .loaderlodging [role="img"] {
        align-items: center;
        max-width: 100%;
    }

    .loaderlodging [role="img"] > span:last-child {
        padding-inline-start: 0 !important;
        text-align: center;
        font-size: 13.5px !important;
        white-space: nowrap;
    }

    /* The Latin tagline is 24 characters carrying 0.18em of tracking, so it
       needs a touch less size than the Arabic one to stay on one line. */
    html[lang="en"] .loaderlodging [role="img"] > span:last-child {
        font-size: 11.5px !important;
    }

    .loaderlodging [role="img"] > span:first-child {
        font-size: 24px !important;
    }
}

/* ==========================================================================
   §06 / §08 / §10 — dark-chrome repairs from the 2026-08-30 staging review.
   Three defects, one shared cause: the legacy template's floating chrome was
   tuned to sit on LIGHT pages, and the brand made both ends of the page navy.
   ========================================================================== */

/* 1 — The scrolled header. ga-custom.js adds .sticky past 200px and the
   legacy sheet makes it position:fixed with a TRANSPARENT wrapper — no
   shadow, no edge. At the end of a page the navy bar sat flush on the navy
   footer and read as the menu sinking into it. Navy-deep plus a hairline and
   a real shadow separate it on navy and on cloud alike; the legacy rounded
   bottom corners stay. */
.headerbg.sticky .navbar {
    background-color: var(--checker-navy-deep);
    border: 1px solid var(--checker-elevated);
    border-top: 0;
    box-shadow: 0 14px 30px rgb(0 0 0 / 45%);
}

/* 2 — Every .styledropdown menu still wore the OLD template's primary grey
   (#89939e, from helper-4.0.0): its own white items are 3.1:1 on it, and its
   hover tint is BLACK-alpha, invisible on a dark ground. The menu is a dark
   elevated surface now — white ink on --checker-elevated is 13.9:1 — with a
   light-alpha hover that actually reads there. Selector shapes mirror the
   helper's own so this layer, loading last, wins on order. */
.styledropdown .dropdown-menu {
    background-color: var(--checker-elevated);
    border: 1px solid rgb(255 255 255 / 12%);
    box-shadow: 0 18px 40px rgb(0 0 0 / 40%);
}

.styledropdown .dropdownuser li + li {
    border-top-color: rgb(255 255 255 / 8%);
}

.styledropdown .dropdown-menu li a:hover,
.styledropdown .dropdown-menu li a:focus,
.styledropdown .dropdown-menu li .dropdown-item:hover,
.styledropdown .dropdown-menu li .dropdown-item:focus,
.styledropdown .dropdown-menu .dropdown-item:hover,
.styledropdown .dropdown-menu .dropdown-item:focus {
    background-color: rgb(255 255 255 / 10%);
    color: #ffffff;
}

/* 3 — §08 paints icon strokes on navy chrome with --checker-on-dark, but the
   account chip inside that chrome is a MINT .btn-primary carrying navy ink:
   #b8bfce on mint is ~1.0:1 — an invisible icon, reported from the live
   header. Inside any button the icon takes the button's own ink instead.
   Same conflict and same fix for the mobile .sidenav chip; .footerbg joins
   for symmetry with the §08 trio. */
.headerbg .btn-primary i,
.headerbg .btn-primary .fa,
.sidenav .btn-primary i,
.sidenav .btn-primary .fa,
.footerbg .btn-primary i,
.footerbg .btn-primary .fa {
    color: inherit;
}

/* 4 — The sticky bar behaves exactly like production: always visible once
   scrolled, footer included — the park-before-footer experiment made it
   vanish completely and the owner rejected that against the live reference
   (2026-08-31). What stays from that round is the one real defect it fixed:
   the legacy ≤768px media rule (`.headerbg{padding: 30px 0}`) left a
   transparent 30px gap above the fixed bar. */
.headerbg.sticky {
    padding-top: 0 !important;
}

/* 5 — Production's sticky bar COMPACTS: the legacy rules shrink its logo to
   30px and the bar to ~72px, and that slimming is a visible part of the old
   site's scroll action. The Checker lockup ships its sizes INLINE from the
   blade (40px symbol, 21px wordmark), which no stylesheet rule can reach —
   so the compact mode is restated here for the new markup, !important to
   clear the inline styles, scoped to .sticky so the resting header keeps its
   full size. Measured before/after on the live desktop viewport: 89px bar →
   79px (production's own sits at 72 — the difference lives in the language
   and notification controls, untouched here). */
.headerbg.sticky .headerbg__logo_logo img {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
}

.headerbg.sticky .headerbg__logo_logo span[role="img"] {
    font-size: 16px !important;
    gap: 10px !important;
}

/* This theme's 44px touch-target min-height on the links is what holds the
   compact bar at 85px (the legacy header already zeroes their paddings). In
   the sticky state 32px matches production's slim bar and still clears the
   24px WCAG 2.5.8 AA minimum; the resting header keeps the full 44px. */
.headerbg.sticky .navbar-nav .nav-link {
    min-height: 32px;
}

/* 6 — The resting menu sits directly on the hero image, and this design's
   scrim was bottom-heavy: rgba(24,30,50,.15) at the very top where the white
   nav lives, so over a bright photograph the links drown (owner report, the
   GEM-skylight hero). Production darkens the OTHER end — solid navy at the
   top fading down. The top now darkens like production's while the bottom
   keeps this design's .78 for the hero copy and the search card. */
.slidertopheader__home::before,
.slidertopheader__events::before {
    background: linear-gradient(
        180deg,
        rgba(24, 30, 50, 0.9) 0%,
        rgba(24, 30, 50, 0.2) 32%,
        rgba(24, 30, 50, 0.78) 100%
    );
}