/*
Theme Name:  MMD Crimson Theme 2026
Theme URI:   https://murdermysteryco.com
Template:    mmd-parent-2026
Author:      American Immersion Theater
Description: Colour-scheme child of MMD Parent Theme 2026. Lightens the header shell and bottom bar to cream and puts the brand red on the chips (hamburger, phone pill, CTA pills, social circles), with the dark wordmark. Header and bottom bar only — every page section renders exactly as the parent does.
Version:     1.0.0
License:     Proprietary
Text Domain: mmd-crimson
*/

/* =============================================================================
   MMD Crimson 2026 — header + bottom bar recolour
   =============================================================================
   SCOPE. This theme changes colour and nothing else. It adds no templates, no
   shortcodes and no patterns, so every section, form and page template comes
   from mmd-parent-2026 untouched.

   WHAT IT IS NOT. This is NOT a drop-in replacement for mmd-child-2026. That
   child supplies the hero-video homepage: the [mmd_home_hero] section order, the
   front-page.php fallback and the "Homepage — With Hero Video (Full)" pattern. A
   site activating THIS theme instead gets the parent's default homepage with no
   video.

   THIS ONE IS THE INVERTING SCHEME, and that makes it the riskier of the pair.
   The parent's header is built on the premise that the shell is dark: the
   wordmark asset is white, the desktop nav pills are cream, and the chips are
   cream-on-oxblood. Lighting the shell breaks all three at once, so this file
   does more than swap two backgrounds — every rule below that exists because of
   the inversion says so. The wordmark is handled in PHP, not here; see
   functions.php.

   HOW THE OVERRIDES WIN. functions.php enqueues this file with 'mmd-main' as a
   dependency at priority 20, so it loads after the parent stylesheet. Selectors
   are copied at the SAME specificity as the parent rules they replace and win on
   source order — no !important. Exceptions are called out where they occur.

   COLOURS. Both are existing parent tokens; this theme introduces none.
     --mmd-cream    #E9E2D0  shell (header + bar)
     --mmd-red      #C0392B  chips
     --mmd-red-deep #940000  hover, and the desktop nav pills — see the contrast
                             note down there for why the pills can't use
                             --mmd-red.
   ============================================================================= */

/* -- Header -------------------------------------------------------------------
   The shell inverts oxblood → cream; the chips invert cream → red.
   -------------------------------------------------------------------------- */

/* Both are needed, not one: .mmd-site-top is the sticky wrapper that paints the
   full-bleed band (and the whole strip on desktop, where .mmd-header collapses
   to display:contents), while .mmd-header paints the bar itself at mobile
   widths. Setting only one leaves an oxblood remnant at one of the two layouts.

   INVERSION FIX — the hairline. .mmd-main is also --mmd-cream, so a cream header
   above it has no edge at all: the sticky bar dissolves into the page and,
   scrolled, content slides underneath with nothing marking the boundary. On the
   default dark shell that edge came free. --mmd-cream-400 is the palette's
   hairline-on-cream token, which is exactly this job. */
.mmd-site-top {
    background: var(--mmd-cream);
    border-bottom: 1px solid var(--mmd-cream-400);
}
.mmd-header { background: var(--mmd-cream); }

/* Hamburger. The bars must move too — the parent draws them --mmd-ox-800, which
   on a red button is nearly invisible. White on #C0392B is 5.4:1. */
.mmd-nav__hamburger { background: var(--mmd-red); }
.mmd-nav__hamburger span { background: var(--mmd-white); }

/* Phone pill. `color` carries the label and status spans (both display:none at
   every width today, but they are live markup — the availability script still
   fills the status — so they are coloured rather than left to inherit a value
   that would be wrong the day someone unhides them). The number sets its own
   colour in the parent and needs its own override. The :hover rule exists
   because the parent pins the hover colour back to --mmd-ox-800; without it the
   number turns near-black on red the moment the pill is hovered. */
.mmd-header__phone {
    background: var(--mmd-red);
    color: var(--mmd-white);
}
.mmd-header__phone:hover { color: var(--mmd-white); }
.mmd-header__phone-number { color: var(--mmd-white); }

/* Phone glyph. Straight inversion of the parent's dark-circle/light-glyph: on a
   red pill the circle goes white and the mark inside it red, which keeps the
   same figure/ground relationship the default has. */
.mmd-header__phone-icon {
    background: var(--mmd-white);
    color: var(--mmd-red);
}

/* -- Nav ----------------------------------------------------------------------
   INVERSION FIX. The mobile drawer is left alone deliberately: the parent opens
   it on --mmd-ox-700 with light text, which is still legible and still works
   under a cream header — a dark sheet dropping from a light bar. Recolouring it
   would be inventing a design the comp doesn't show. Flagging it here so it's a
   decision on the record rather than an oversight: if the drawer should be cream
   too, that's a one-rule change and the link colours move with it.

   The desktop pills are a different story — they are NOT optional. At ≥1024px
   the parent gives them cream text on a cream border, which on the cream shell
   is invisible: not "a bit low contrast", but a nav bar that renders blank.

   Why --mmd-red-deep and not --mmd-red like every other chip: the pill label is
   --mmd-text-xs (12px) at weight 600. That is normal text by WCAG, so it needs
   4.5:1, and #C0392B on #E9E2D0 is 4.2:1 — a near miss that fails. #940000 on
   the same cream is 7.2:1. The border could have stayed --mmd-red (4.2:1 clears
   the 3:1 bar for non-text), but a red outline around deeper-red text reads as a
   mistake, so both move together. Hover fills with the same deep red and white
   text (8.2:1), matching the parent's fill-on-hover behaviour.
   -------------------------------------------------------------------------- */
@media ( min-width: 1024px ) {
    .mmd-nav__item > a {
        color: var(--mmd-red-deep);
        border-color: var(--mmd-red-deep);
    }
    .mmd-nav__item > a:hover {
        background: var(--mmd-red-deep);
        color: var(--mmd-white);
    }
}


/* -- Bottom bar ---------------------------------------------------------------
   The 2026 theme has no traditional footer — .mmd-bottom-bar is the persistent
   bottom chrome (see footer.php). Same inversion as the header.
   -------------------------------------------------------------------------- */

/* INVERSION FIX — the shadow. Same problem as the header hairline, one worse:
   the bar is cream over cream page with a 24px top radius, so not only does the
   boundary vanish, the rounded corners it is drawn with disappear with it. A
   border can't render those corners against a matching background; a shadow can,
   and it also separates the bar from the .mmd-fine-print line sitting directly
   above it. Tinted with the oxblood rgb rather than neutral black so it reads
   warm against the cream. */
.mmd-bottom-bar {
    background: var(--mmd-cream);
    box-shadow: 0 -2px 12px rgba( 33, 0, 0, 0.15 );
}

/* CTA pills. The parent's hover brightens cream → white; inverted, the
   equivalent is red → deeper red. */
.mmd-bottom-bar__btn {
    background: var(--mmd-red);
    color: var(--mmd-white);
}
.mmd-bottom-bar__btn:hover {
    background: var(--mmd-red-deep);
    color: var(--mmd-white);
}

/* Social circles. SPECIFICITY EXCEPTION: scoped under .mmd-bottom-bar (0,2,0)
   where the parent rule is bare .mmd-social (0,1,0). The parent's own comment
   says .mmd-social is generic and reusable on any surface — recolouring it
   globally would reach outside this theme's stated scope the moment the mark is
   used somewhere other than the bar. The extra class is the scope, not a
   specificity fight. */
.mmd-bottom-bar .mmd-social {
    background: var(--mmd-red);
    color: var(--mmd-white);
}
.mmd-bottom-bar .mmd-social:hover { background: var(--mmd-red-deep); }