/* ---------------------------------------------------------------------------
 * Sloppy Joe's custom overrides for the Atomik theme.
 * Loaded site-wide on the Atomik front-end theme via application/bootstrap/app.php
 * (on_before_render). NOT by editing core Atomik CSS and NOT by injecting into
 * theme files. All rules scoped under .ccm-page so the dashboard / in-context
 * edit toolbar (which live outside .ccm-page) are unaffected.
 * ------------------------------------------------------------------------- */

/* ===========================================================================
 * DESIGN TOKENS
 * ======================================================================== */
:root {
    --sj-cream:    #F4ECD8;  /* warm cream background        */
    --sj-charcoal: #1E1B18;  /* smoky charcoal text / header */
    --sj-red:      #9E2B25;  /* barn-brick red accent        */
    --sj-red-dark: #7E211C;  /* darker red for hover         */
    --sj-amber:    #C8852C;  /* burnt amber, secondary accent */

    --sj-font-heading: "Zilla Slab", "Roboto Slab", serif;
    --sj-font-body:    "Source Sans 3", "Public Sans", sans-serif;
    --sj-font-title:   "Alfa Slab One", "Roboto Slab", serif; /* H1 page titles ONLY */

    /* Solid-state header height: 68px logo + navbar(1rem) + brand(0.625rem) padding. */
    --sj-header-h: calc(68px + 1.625rem);
    /* Transparent-state header height: measured at runtime by custom.js; the
     * fallback (~210px) covers first paint before JS sets the real value. */
    --sj-trans-header-h: 210px;
}

/* ===========================================================================
 * FOUNDATION: page-base typography + color
 * ======================================================================== */
.ccm-page {
    background-color: var(--sj-cream);
    color: var(--sj-charcoal);
    font-family: var(--sj-font-body);
}

/* H2-H6 stay Zilla Slab (section headings, card titles, etc.). */
.ccm-page h2,
.ccm-page h3,
.ccm-page h4,
.ccm-page h5,
.ccm-page h6 {
    font-family: var(--sj-font-heading);
    font-weight: 700;
    color: var(--sj-charcoal);
}
/* H1 PAGE TITLES ONLY -> Alfa Slab One (heavy display, single weight 400).
 * Tighter line-height + slight tracking; responsive size that eases off on mobile
 * so the heavy face stays a confident title, not overwhelming. Color is inherited
 * (charcoal here; white over the hero/dark bands via existing rules). */
.ccm-page h1 {
    font-family: var(--sj-font-title);
    font-weight: 400;
    color: var(--sj-charcoal);
    line-height: 1.1;
    letter-spacing: 0.01em;
}
.ccm-page.theme-atomik h1 {
    font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.6rem);
}
@media (max-width: 575px) {
    .ccm-page.theme-atomik h1 {
        font-size: 1.65rem;
        letter-spacing: 0;
    }
}

.ccm-page a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sj-btn):not(.sj-btn-secondary) {
    color: var(--sj-red);
}
.ccm-page a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sj-btn):not(.sj-btn-secondary):hover,
.ccm-page a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sj-btn):not(.sj-btn-secondary):focus {
    color: var(--sj-red-dark);
}

.ccm-page ::selection {
    background-color: var(--sj-amber);
    color: var(--sj-charcoal);
}

/* ===========================================================================
 * REUSABLE BUTTON  (.sj-btn)
 * ======================================================================== */
.ccm-page .sj-btn,
.ccm-page.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text .btn {
    display: inline-block;
    background-color: var(--sj-red);
    color: #fff;
    border: none;
    padding: 0.75rem 1.85rem;
    border-radius: 0.4rem;
    font-family: var(--sj-font-body);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: background-color 0.2s ease, transform 0.05s ease;
}
.ccm-page .sj-btn:hover,
.ccm-page .sj-btn:focus,
.ccm-page.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text .btn:hover,
.ccm-page.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text .btn:focus {
    background-color: var(--sj-red-dark);
    color: #fff;
}

/* Secondary button: burnt-amber, less dominant than the primary brick-red. */
.ccm-page .sj-btn-secondary {
    display: inline-block;
    background-color: var(--sj-amber);
    color: var(--sj-charcoal);
    border: none;
    padding: 0.75rem 1.85rem;
    border-radius: 0.4rem;
    font-family: var(--sj-font-body);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
}
.ccm-page .sj-btn-secondary:hover,
.ccm-page .sj-btn-secondary:focus {
    background-color: #a96d1f; /* darker amber */
    color: var(--sj-charcoal);
}

/* ===========================================================================
 * HERO (home): taller, white centered text over a top-weighted overlay
 * ======================================================================== */

/* Taller hero so the logo + nav + motto + button read as one balanced centered
 * group with breathing room. Responsive with a floor for short viewports.
 * Override the block's inline min-height on all four hero layers. */
.ccm-page.theme-atomik .ccm-block-hero-image,
.ccm-page.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-cover,
.ccm-page.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-image,
.ccm-page.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text {
    min-height: max(70vh, 560px) !important;
}

/* White hero text. */
.ccm-page.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text,
.ccm-page.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text h1,
.ccm-page.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text h2,
.ccm-page.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text h3,
.ccm-page.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text p,
.ccm-page.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text a {
    color: #fff;
}

/* Vertical centering BELOW the fixed header: reserve the real transparent-header
 * height as top padding PLUS a clearance gap, so the flex-centered motto/button
 * group sits comfortably under the logo/nav (never tucked up against it) and
 * there is a transparent-over-hero scroll range before custom.js flips the
 * header solid (which it does as the motto approaches the header).
 * --sj-trans-header-h is measured by custom.js (fallback 210px). */
.ccm-page.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text {
    padding-top: calc(var(--sj-trans-header-h, 210px) + 3rem);
    padding-bottom: 0;
}

/* Motto headline: Alfa Slab One (H1), reduced size, on 2-3 lines. */
.ccm-page.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text h1 {
    font-family: var(--sj-font-title);
    font-weight: 400;
    font-size: clamp(1.4rem, 3.2vw, 2.25rem);
    line-height: 1.25;
    max-width: 20em;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Two-color motto: second clause in burnt amber. */
.ccm-page.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-text h1 .sj-amber-text {
    color: var(--sj-amber);
}

/* Overlay: lighter overall, stronger at the top behind the white logo/nav. */
.ccm-page.theme-atomik .ccm-block-hero-image .ccm-block-hero-image-cover {
    background-color: rgba(0, 0, 0, 0.34);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.36) 45%, rgba(0, 0, 0, 0.30) 100%);
}

/* ===========================================================================
 * FOOTER  (charcoal bar site-wide, bookending the charcoal header)
 * ======================================================================== */
.ccm-page.theme-atomik footer {
    background-color: var(--sj-charcoal);
    color: var(--sj-cream);
}
/* Footer headings legible on charcoal. */
.ccm-page.theme-atomik footer h1,
.ccm-page.theme-atomik footer h2,
.ccm-page.theme-atomik footer h3,
.ccm-page.theme-atomik footer h4,
.ccm-page.theme-atomik footer h5,
.ccm-page.theme-atomik footer h6 {
    color: var(--sj-cream);
}
/* Footer links: warm amber on charcoal (~5.5:1 contrast, AA). Excludes buttons.
 * Specificity tops the foundation brick-red link rule. */
.ccm-page.theme-atomik footer a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sj-btn):not(.sj-btn-secondary) {
    color: var(--sj-amber);
}
.ccm-page.theme-atomik footer a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sj-btn):not(.sj-btn-secondary):hover,
.ccm-page.theme-atomik footer a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sj-btn):not(.sj-btn-secondary):focus {
    color: #f0d9a8; /* light amber */
}

/* ===========================================================================
 * TWO-STATE HEADER  (transparent on home-top; solid charcoal otherwise)
 * ======================================================================== */

/* ---- SOLID STATE ---- */
.ccm-page.theme-atomik .ccm-block-top-navigation-bar .navbar {
    background-color: var(--sj-charcoal);
    transition: background-color 0.25s ease, padding 0.25s ease;
}
.ccm-page.theme-atomik .ccm-block-top-navigation-bar .navbar-brand .logo {
    display: block;
    max-height: none;
    height: 68px;
    width: auto;
}
.ccm-page.theme-atomik .ccm-block-top-navigation-bar .navbar-nav .nav-link {
    color: #fff;
}
.ccm-page.theme-atomik .ccm-block-top-navigation-bar .navbar-nav .nav-link:hover,
.ccm-page.theme-atomik .ccm-block-top-navigation-bar .navbar-nav .nav-link:focus {
    color: var(--sj-red);
}
.ccm-page.theme-atomik .ccm-block-top-navigation-bar .navbar-toggler .icon-bar {
    background-color: #fff;
}

/* ---- TRANSPARENT STATE (home page only, before scroll) ---- */
.ccm-page-id-1.theme-atomik .ccm-block-top-navigation-bar:not(.sj-scrolled) .navbar {
    background-color: transparent;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.ccm-page-id-1.theme-atomik .ccm-block-top-navigation-bar:not(.sj-scrolled) .navbar > .container-fluid {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ccm-page-id-1.theme-atomik .ccm-block-top-navigation-bar:not(.sj-scrolled) .navbar-collapse {
    flex-grow: 0;
    margin-top: 0.85rem;
}
.ccm-page-id-1.theme-atomik .ccm-block-top-navigation-bar:not(.sj-scrolled) .navbar-nav {
    flex-direction: row;
    justify-content: center;
}
.ccm-page-id-1.theme-atomik .ccm-block-top-navigation-bar:not(.sj-scrolled) .navbar-brand .logo {
    height: 115px;
}
.ccm-page-id-1.theme-atomik .ccm-block-top-navigation-bar:not(.sj-scrolled) .navbar-nav .nav-link:hover,
.ccm-page-id-1.theme-atomik .ccm-block-top-navigation-bar:not(.sj-scrolled) .navbar-nav .nav-link:focus {
    color: var(--sj-amber);
}

/* ===========================================================================
 * FIXED-HEADER CONTENT OFFSET (interior pages only; home hero is full-bleed)
 * ======================================================================== */
.ccm-page.theme-atomik:not(.ccm-page-id-1):has(.ccm-block-top-navigation-bar .navbar.fixed-top) {
    padding-top: var(--sj-header-h) !important;
}
html.ccm-toolbar-visible .ccm-page.theme-atomik:not(.ccm-page-id-1):has(.ccm-block-top-navigation-bar .navbar.fixed-top) {
    padding-top: calc(var(--sj-header-h) + 48px) !important;
}

/* ===========================================================================
 * FOOTER POLISH
 * (1) Rebalance the four footer columns at desktop so the contact/hours column
 *     is wide enough for each hours line to sit on one line. Scoped to the
 *     section.mb-4 row only (NOT the concrete-branding copyright row).
 * ======================================================================== */

/* Footer "Sign up for specials & events" link/button (footer.php, column 4). */
.ccm-page.theme-atomik footer .footer-signup-btn {
    display: inline-block;
}

/* Column rebalance (desktop only): narrow logo, widen contact for the hours;
 * social compact, signup roomy for the input + button. 16 / 38 / 14 / 32 = 100%. */
@media (min-width: 768px) {
    .ccm-page.theme-atomik footer section.mb-4 .row > div:nth-child(1) { flex: 0 0 16%; max-width: 16%; }
    .ccm-page.theme-atomik footer section.mb-4 .row > div:nth-child(2) { flex: 0 0 38%; max-width: 38%; }
    .ccm-page.theme-atomik footer section.mb-4 .row > div:nth-child(3) { flex: 0 0 14%; max-width: 14%; }
    .ccm-page.theme-atomik footer section.mb-4 .row > div:nth-child(4) { flex: 0 0 32%; max-width: 32%; }
}

/* ===========================================================================
 * SOLID HEADER LAYOUT (desktop): logo left, nav group centered in the full bar
 * Replaces Bootstrap's left-bunched flex with a 3-zone grid:
 *   [logo | 1fr]  [nav | auto]  [empty | 1fr]
 * The two 1fr side tracks are equal, so the nav centers in the full bar with
 * balanced empty space on the right; the left track never shrinks below the
 * logo's width (min: max-content), so the nav can shift but never overlaps it.
 * Scoped to the SOLID state only (interior pages + home when .sj-scrolled) and
 * to >=992px, so the TRANSPARENT home-top layout and the mobile hamburger are
 * untouched.
 * ======================================================================== */
@media (min-width: 992px) {
    .ccm-page.theme-atomik:not(.ccm-page-id-1) .ccm-block-top-navigation-bar .navbar > .container-fluid,
    .ccm-page-id-1.theme-atomik .ccm-block-top-navigation-bar.sj-scrolled .navbar > .container-fluid {
        display: grid;
        grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr);
        align-items: center;
        column-gap: 1rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ===========================================================================
 * MENU PAGE (cID 266) — reusable section pattern
 * ======================================================================== */

/* Compact full-bleed banner at the top of the Menu page. Holds the Menu title +
 * the two buttons over the food photo (fID 53). Breaks out of Atomik's grid
 * container to span the full viewport width. */
.ccm-page.theme-atomik .menu-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-image: url('/application/files/3017/8196/9973/menu_header.webp');
    background-size: cover;
    background-position: center;
    margin-bottom: 1.25rem;
}
@media (max-width: 991px) {
    .ccm-page.theme-atomik .menu-hero { min-height: 280px; }
}
@media (max-width: 575px) {
    .ccm-page.theme-atomik .menu-hero { min-height: 240px; }
}

/* Dark overlay biased darker in the CENTER (where title + buttons sit), lighter
 * at the edges so the food (incl. the burger on the right) stays visible. */
.ccm-page.theme-atomik .menu-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.62) 50%, rgba(0,0,0,0.42) 100%);
}

.ccm-page.theme-atomik .menu-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 820px;
    text-align: center;
    padding: 1.5rem 1rem;
}
.ccm-page.theme-atomik .menu-hero h1 {
    color: #fff;
    font-family: var(--sj-font-title);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0 0 1.1rem;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}
.ccm-page.theme-atomik .menu-hero .menu-order-top {
    margin: 0;
}

/* Tightened top-of-page flow for the cream area below the banner. */
.ccm-page-id-266.theme-atomik h1 {
    text-align: center;
    margin: 0 0 1rem;
}

/* Top buttons: two side-by-side, centered (Order Online + Gift Cards). */
.ccm-page.theme-atomik .menu-order-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

/* GF / NEW legend — small and close to the buttons. */
.ccm-page.theme-atomik .menu-legend {
    text-align: center;
    font-size: 0.95rem;
    margin: 0 0 0.85rem;
}
.ccm-page.theme-atomik .menu-legend img,
.ccm-page.theme-atomik .menu-legend picture {
    height: 1em;
    width: auto;
    vertical-align: -0.12em;
}

/* Sticky section-jump nav — CREAM bar, brick-red links, sticks below header. */
.ccm-page.theme-atomik .menu-jump {
    position: sticky;
    top: var(--sj-header-h);
    z-index: 100;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.25rem 1.5rem;
    padding: 0.7rem 1rem;
    margin: 0 0 2rem;
    background: var(--sj-cream);
    border-bottom: 1px solid rgba(30, 27, 24, 0.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    overflow-x: auto;
}
@media (min-width: 768px) {
    .ccm-page.theme-atomik .menu-jump { flex-wrap: wrap; justify-content: center; }
}
.ccm-page.theme-atomik .menu-jump a {
    color: var(--sj-red);          /* brick-red on cream: ~7:1 contrast, AA+ */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}
.ccm-page.theme-atomik .menu-jump a:hover,
.ccm-page.theme-atomik .menu-jump a:focus {
    color: var(--sj-red-dark);
    text-decoration: underline;
}

/* Section + anchor offset so jumps clear the fixed header + sticky nav */
.ccm-page.theme-atomik .menu-section {
    scroll-margin-top: calc(var(--sj-header-h) + 70px);
    margin-bottom: 2.5rem;
}

/* Menu container preset (menu_3column / menu_2column): spacing for the header
 * stripe and the editable column areas. Container's own .container shouldn't add
 * extra side padding beyond the page's. */
.ccm-page.theme-atomik .menu-container {
    margin-bottom: 2.5rem;
}
.ccm-page.theme-atomik .menu-container > .container {
    padding-left: 0;
    padding-right: 0;
}
.ccm-page.theme-atomik .menu-container .menu-category {
    margin-bottom: 1.5rem;
}
.ccm-page.theme-atomik .menu-container .menu-column {
    margin-bottom: 1rem;
}

/* Subsection headers within a column (Sandwiches / Burgers / Wraps, etc.) */
.ccm-page.theme-atomik .menu-subhead h3 {
    color: var(--sj-red);
    border-bottom: 2px solid rgba(158, 43, 37, 0.25);
    display: inline-block;
    padding-bottom: 0.2rem;
    margin-bottom: 0.4rem;
}

/* Salad dressings list: centered, no bullet markers or indent. */
.ccm-page.theme-atomik .menu-dressings {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    text-align: center;
}
.ccm-page.theme-atomik .menu-dressings li {
    margin-bottom: 0.15rem;
}

/* ===========================================================================
 * SECTION TEXTURES (wood + Cream City brick) — faded "whisper, not shout"
 *
 * FADE LEVEL: one variable controls BOTH textures at the SAME intensity. It is
 * the alpha of a cream overlay laid OVER the texture — higher = MORE faded
 * (less texture visible). To switch fade level, change ONLY this one line:
 *     ~25% texture visible  ->  --sj-tex-overlay: 0.75;
 *     ~15% texture visible  ->  --sj-tex-overlay: 0.85;   (current default)
 *     ~8%  texture visible  ->  --sj-tex-overlay: 0.92;
 * ======================================================================== */
:root {
    --sj-tex-overlay: 0.85;
}

/* Home - Weekly Specials band: WOOD */
.ccm-page-id-1.theme-atomik .section-container:has(.home-specials-img) {
    background-color: var(--sj-cream);
    background-image:
        linear-gradient(rgba(244, 236, 216, var(--sj-tex-overlay)), rgba(244, 236, 216, var(--sj-tex-overlay))),
        url('/application/files/4117/8214/0753/barnwood_bak.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Home - Story teaser band: BRICK */
.ccm-page-id-1.theme-atomik .section-container:has(.home-story-inner) {
    background-color: var(--sj-cream);
    background-image:
        linear-gradient(rgba(244, 236, 216, var(--sj-tex-overlay)), rgba(244, 236, 216, var(--sj-tex-overlay))),
        url('/application/files/6317/8214/0751/brick_bak.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Home - SJTV band: solid CHARCOAL, light text */
.ccm-page-id-1.theme-atomik .section-container:has(.sjtv-heading) {
    background-color: var(--sj-charcoal);
}
.ccm-page-id-1.theme-atomik .section-container:has(.sjtv-heading) .sjtv-heading h2,
.ccm-page-id-1.theme-atomik .section-container:has(.sjtv-heading) .sjtv-subtitle {
    color: var(--sj-cream);
}

/* Story page (cID 269): BRICK behind every section band (tie to the building) */
.ccm-page-id-269.theme-atomik .section-container {
    background-color: var(--sj-cream);
    background-image:
        linear-gradient(rgba(244, 236, 216, var(--sj-tex-overlay)), rgba(244, 236, 216, var(--sj-tex-overlay))),
        url('/application/files/6317/8214/0751/brick_bak.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ===========================================================================
 * GENERIC SECTION CONTAINERS (section_full / section_2col / section_3col)
 * Reusable across home, events, gallery. Header area + body/column areas.
 * ======================================================================== */
.ccm-page.theme-atomik .section-container {
    padding: 3.25rem 0;
}
.ccm-page.theme-atomik .section-container > .container {
    max-width: 70rem;
}
.ccm-page.theme-atomik .section-header .home-section-title,
.ccm-page.theme-atomik .section-header .sjtv-heading {
    text-align: center;
    margin-bottom: 1.5rem;
}
.ccm-page.theme-atomik .section-cols {
    row-gap: 1.5rem; /* spacing when columns wrap/stack */
}
@media (max-width: 767px) {
    .ccm-page.theme-atomik .section-cols .section-col {
        margin-bottom: 1.25rem;
    }
}

/* ===========================================================================
 * HOME PAGE section content (cID 1)
 * ======================================================================== */
.ccm-page-id-1.theme-atomik .home-section-title {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Weekly Specials: horizontal banner desktop/tablet, portrait on mobile (<768). */
.ccm-page-id-1.theme-atomik .home-specials-img {
    max-width: 960px; /* horizontal, < native 1774px so never upscaled */
    margin: 0 auto;
}
@media (max-width: 767px) {
    .ccm-page-id-1.theme-atomik .home-specials-img {
        max-width: 420px; /* portrait shown here; keep it from getting huge */
    }
}
.ccm-page-id-1.theme-atomik .home-specials-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* SJTV heading subtitle */
.ccm-page-id-1.theme-atomik .sjtv-heading h2 {
    margin-bottom: 0.1rem;
}
.ccm-page-id-1.theme-atomik .sjtv-subtitle {
    font-family: var(--sj-font-heading);
    font-weight: 600;
    color: var(--sj-charcoal);
    font-size: 1.1rem;
    margin: 0.1rem 0 0;
}

/* SJTV video box: aspect-ratio 16:9 (sizes to the column's own width; no black
 * void — replaces the padding-bottom hack that mis-resolved inside flex/columns). */
.ccm-page-id-1.theme-atomik .home-video-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    background: var(--sj-charcoal);
}
.ccm-page-id-1.theme-atomik .home-video-inner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Feature cards (one card per section_3col column; equal-height + hover lift) */
.ccm-page-id-1.theme-atomik .home-feature-card {
    background: #ffffff;
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ccm-page-id-1.theme-atomik .home-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
/* Card-top photo: fills a 4:3 landscape area, cover-cropped + centered. The
 * card TITLE lives in the white body below, so no overlay is needed over the
 * photo. Cream fallback shows only if an image fails to load. */
.ccm-page-id-1.theme-atomik .home-feature-card-image {
    flex: 0 0 auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sj-cream);
}
.ccm-page-id-1.theme-atomik .home-feature-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.ccm-page-id-1.theme-atomik .home-feature-card-body {
    padding: 1.25rem 1.4rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.ccm-page-id-1.theme-atomik .home-feature-card-body h3 { margin-bottom: 0.5rem; }
.ccm-page-id-1.theme-atomik .home-feature-card-body p { margin-bottom: 1.25rem; }
.ccm-page-id-1.theme-atomik .home-feature-card-body .sj-btn { margin-top: auto; align-self: center; }

/* Story teaser */
.ccm-page-id-1.theme-atomik .home-story-inner {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}
.ccm-page-id-1.theme-atomik .home-story-inner p {
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Location + hours + map (in section_2col columns) */
.ccm-page-id-1.theme-atomik .home-location-info h3 { margin-top: 0; }
.ccm-page-id-1.theme-atomik .home-hours-list {
    list-style: none;
    padding-left: 0;
    margin: 0.5rem 0 1rem;
}
.ccm-page-id-1.theme-atomik .home-hours-list li { margin-bottom: 0.3rem; }
.ccm-page-id-1.theme-atomik .home-location-map iframe {
    width: 100%;
    min-height: 320px;
    border: 0;
    border-radius: 0.5rem;
    display: block;
}

/* ===========================================================================
 * GALLERY PAGE (cID 268) — native gallery blocks + category tabs + GLightbox
 * Grids keep the native gallery presentation (no square/thumbnail overrides).
 * ======================================================================== */
.ccm-page-id-268.theme-atomik .gallery-intro {
    text-align: center;
    font-size: 1.1rem;
    max-width: 46rem;
    margin: 0 auto 1rem;
}
/* Filter tabs: brick-red active, cream/charcoal inactive */
.ccm-page-id-268.theme-atomik .gallery-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0.25rem;
}
.ccm-page-id-268.theme-atomik .gallery-tab {
    font-family: var(--sj-font-heading);
    font-weight: 600;
    font-size: 1rem;
    border: 2px solid var(--sj-charcoal);
    background: var(--sj-cream);
    color: var(--sj-charcoal);
    padding: 0.4rem 1.2rem;
    border-radius: 2rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ccm-page-id-268.theme-atomik .gallery-tab:hover {
    border-color: var(--sj-red);
    color: var(--sj-red);
}
.ccm-page-id-268.theme-atomik .gallery-tab.is-active,
.ccm-page-id-268.theme-atomik .gallery-tab.is-active:hover {
    background: var(--sj-red);
    border-color: var(--sj-red);
    color: #fff;
}
/* Category subheadings above each grid */
.ccm-page-id-268.theme-atomik .gallery-cat-label h3 {
    text-align: center;
    margin: 1.75rem 0 0.75rem;
}
/* Mobile: tabs scroll horizontally instead of cramming */
@media (max-width: 575px) {
    .ccm-page-id-268.theme-atomik .gallery-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 0.25rem;
    }
}
/* GLightbox: match site type on captions/counter (lib default dark UI kept) */
.glightbox-container .gslide-description,
.glightbox-container .gslide-title {
    font-family: var(--sj-font-body);
}

/* Even, consistent gutters across all three grids (native columns/aspect kept;
 * the native row is gutterless, so uniform padding per cell = even H+V gaps;
 * display:block kills inline-image baseline whitespace that caused thin gaps). */
.ccm-page-id-268.theme-atomik .ccm-block-gallery .row > a {
    padding: 5px;
}
.ccm-page-id-268.theme-atomik .ccm-block-gallery-image img,
.ccm-page-id-268.theme-atomik .ccm-block-gallery-image picture {
    display: block;
}

/* Wood texture page background — same faded "whisper" as home/Story (shared
 * --sj-tex-overlay). Full container width at natural aspect (NOT cover, which
 * zooms hugely on this tall page) and tiled down the page. Subtle, text legible. */
.ccm-page-id-268.theme-atomik .section-container {
    background-color: var(--sj-cream);
    background-image:
        linear-gradient(rgba(244, 236, 216, var(--sj-tex-overlay)), rgba(244, 236, 216, var(--sj-tex-overlay))),
        url('/application/files/4117/8214/0753/barnwood_bak.webp');
    background-size: 100% auto;
    background-position: top center;
    background-repeat: repeat-y;
}

/* ===========================================================================
 * INTERIOR PAGE BANNERS (Story / Gallery / Join Our Team) — replicate the
 * Menu banner: full-bleed, compact, cover image, dark overlay, white Alfa Slab
 * One H1 centered. Banner lives in a section_full container area (no flat blob).
 * ======================================================================== */
.ccm-page.theme-atomik .page-banner {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    margin-bottom: 1.5rem;
}
@media (max-width: 991px) { .ccm-page.theme-atomik .page-banner { min-height: 280px; } }
@media (max-width: 575px) { .ccm-page.theme-atomik .page-banner { min-height: 230px; } }
.ccm-page.theme-atomik .page-banner-overlay {
    position: absolute;
    inset: 0;
}
.ccm-page.theme-atomik .page-banner-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 820px;
    text-align: center;
    padding: 1.5rem 1rem;
}
.ccm-page.theme-atomik .page-banner h1 {
    color: #fff;
    font-family: var(--sj-font-title);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
/* Banner section: flush (no padding), no page texture behind the banner */
.ccm-page.theme-atomik .section-container:has(.page-banner) {
    padding: 0;
    background: var(--sj-cream);
}
/* Per-page image + overlay (overlay tuned to each photo's brightness) */
.ccm-page.theme-atomik .page-banner-story {
    background-image: url('/application/files/6517/8223/8303/story_header.jpg');
}
.ccm-page.theme-atomik .page-banner-story .page-banner-overlay {
    background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.60) 50%, rgba(0,0,0,0.45) 100%);
}
.ccm-page.theme-atomik .page-banner-gallery {
    background-image: url('/application/files/4317/8215/3792/712410708_2196301598475522_6002100261006375364_n.jpg');
}
.ccm-page.theme-atomik .page-banner-gallery .page-banner-overlay {
    background: linear-gradient(90deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.60) 50%, rgba(0,0,0,0.42) 100%);
}
.ccm-page.theme-atomik .page-banner-careers {
    background-image: url('/application/files/7117/8223/8304/join_our_team.webp');
}
.ccm-page.theme-atomik .page-banner-careers .page-banner-overlay {
    background: linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.68) 50%, rgba(0,0,0,0.50) 100%);
}

/* ===========================================================================
 * STORY PAGE (cID 269) — container sections with family photos
 * ======================================================================== */
.ccm-page-id-269.theme-atomik .section-header h1 {
    text-align: center;
    margin-bottom: 1.75rem; /* breathing room below the Our Story H1 */
}
/* Extra top padding above the H1 so it isn't tight under the fixed header */
.ccm-page-id-269.theme-atomik .section-container:has(h1) {
    padding-top: 4.75rem;
}
/* Vertically center the text column against its photo */
.ccm-page-id-269.theme-atomik .section-2col .section-cols {
    align-items: center;
}
/* Mobile: the photo always stacks ABOVE its text, regardless of desktop side */
@media (max-width: 767px) {
    .ccm-page-id-269.theme-atomik .section-cols .section-col:has(.story-photo) {
        order: -1;
    }
}
.ccm-page-id-269.theme-atomik .story-photo {
    max-width: 400px;
    margin: 0 auto;
}
.ccm-page-id-269.theme-atomik .story-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* ===========================================================================
 * JOIN OUR TEAM / CAREERS PAGE (cID 270)
 * ======================================================================== */
.ccm-page.theme-atomik .careers-intro {
    max-width: 52rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.ccm-page.theme-atomik .careers-intro .careers-lead {
    font-size: 1.2rem;
    line-height: 1.5;
}
.ccm-page.theme-atomik .careers-apply {
    margin-top: 1.5rem;
    text-align: center;
}
.ccm-page.theme-atomik .job-list {
    max-width: 56rem;
    margin: 0 auto;
}
.ccm-page.theme-atomik .job-card {
    background: #ffffff;
    border-left: 4px solid var(--sj-red);
    border-radius: 0.4rem;
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
}
.ccm-page.theme-atomik .job-card h2 {
    margin-bottom: 0.1rem;
    font-size: 1.5rem;
}
.ccm-page.theme-atomik .job-pay {
    color: var(--sj-red);
    font-family: var(--sj-font-heading);
    font-weight: 700;
    margin-bottom: 0.85rem;
}
.ccm-page.theme-atomik .job-card h4 {
    font-size: 1.05rem;
    margin: 0.9rem 0 0.35rem;
}
.ccm-page.theme-atomik .job-card ul {
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
}
.ccm-page.theme-atomik .job-card li {
    margin-bottom: 0.25rem;
}
.ccm-page.theme-atomik .careers-cta {
    text-align: center;
    margin: 2.5rem auto 1rem;
}
.ccm-page.theme-atomik .careers-cta p {
    margin-bottom: 0.85rem;
    font-weight: 600;
}
.ccm-page.theme-atomik .careers-phone-secondary {
    font-size: 1rem;
    margin-top: 0.75rem;
}

/* Application form (Express form block on the careers page) */
.ccm-page.theme-atomik .careers-apply-section {
    max-width: 46rem;
    margin: 2.5rem auto 1rem;
}
.ccm-page.theme-atomik .careers-apply-section h2 {
    text-align: center;
}
.ccm-page.theme-atomik .careers-apply-section .careers-apply-lead {
    text-align: center;
    margin-bottom: 1.5rem;
}
.ccm-page-id-270.theme-atomik .ccm-block-express-form-display {
    max-width: 46rem;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 1.75rem 1.75rem 2rem;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}
.ccm-page-id-270.theme-atomik .ccm-block-express-form-display label {
    font-family: var(--sj-font-heading);
    font-weight: 600;
    color: var(--sj-charcoal);
    margin-bottom: 0.25rem;
}
.ccm-page-id-270.theme-atomik .ccm-block-express-form-display .form-group,
.ccm-page-id-270.theme-atomik .ccm-block-express-form-display .mb-3 {
    margin-bottom: 1.1rem;
}
.ccm-page-id-270.theme-atomik .ccm-block-express-form-display .form-control,
.ccm-page-id-270.theme-atomik .ccm-block-express-form-display .form-select {
    border: 1px solid rgba(30, 27, 24, 0.3);
    border-radius: 0.35rem;
}
.ccm-page-id-270.theme-atomik .ccm-block-express-form-display .form-control:focus,
.ccm-page-id-270.theme-atomik .ccm-block-express-form-display .form-select:focus {
    border-color: var(--sj-red);
    box-shadow: 0 0 0 0.2rem rgba(158, 43, 37, 0.15);
}
/* Submit button -> site button style */
.ccm-page-id-270.theme-atomik .ccm-block-express-form-display button[type="submit"],
.ccm-page-id-270.theme-atomik .ccm-block-express-form-display input[type="submit"] {
    display: inline-block;
    background-color: var(--sj-red);
    color: #fff;
    border: none;
    padding: 0.75rem 1.85rem;
    border-radius: 0.4rem;
    font-family: var(--sj-font-body);
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.ccm-page-id-270.theme-atomik .ccm-block-express-form-display button[type="submit"]:hover,
.ccm-page-id-270.theme-atomik .ccm-block-express-form-display input[type="submit"]:hover {
    background-color: var(--sj-red-dark);
}

/* Health disclaimer at the bottom of the menu */
.ccm-page.theme-atomik .menu-disclaimer {
    text-align: center;
    font-size: 0.85rem;
    font-style: italic;
    color: rgba(30, 27, 24, 0.7);
    max-width: 60rem;
    margin: 2rem auto 1rem;
}

/* Category header: food-photo banner with centered H2 overlay */
.ccm-page.theme-atomik .menu-category-image {
    position: relative;
    height: 140px;
    overflow: hidden;
    border-radius: 0.4rem;
}
.ccm-page.theme-atomik .menu-category-image img,
.ccm-page.theme-atomik .menu-category-image picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ccm-page.theme-atomik .menu-category-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}
.ccm-page.theme-atomik .menu-category-overlay h2 {
    color: #fff;
    margin: 0;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.ccm-page.theme-atomik .menu-category-description {
    text-align: center;
    margin: 0.75rem auto 0.5rem;
    max-width: 60rem;
}
.ccm-page.theme-atomik .menu-category-description:empty {
    margin: 0;            /* no dead space when a section has no description */
}
.ccm-page.theme-atomik .menu-category-description h3 {
    font-size: 1.05rem;
    font-weight: 600;
}

/* Items: auto-balancing CSS multi-column. Items are a single flat list; the
 * browser distributes them across columns evenly by height, so no hand-balancing
 * is needed per section. Reading order is top-to-bottom then next column.
 * 3 columns desktop -> 2 tablet -> 1 mobile. */
.ccm-page.theme-atomik .menu-items {
    margin-top: 1.25rem;
    column-count: 3;
    column-gap: 2.5rem;
}
@media (max-width: 991px) {
    .ccm-page.theme-atomik .menu-items { column-count: 2; }
}
@media (max-width: 575px) {
    .ccm-page.theme-atomik .menu-items { column-count: 1; }
}
.ccm-page.theme-atomik .menu-item {
    text-align: center;
    margin: 0 0 1.5rem;
    break-inside: avoid;       /* keep each item whole within a column */
    -webkit-column-break-inside: avoid;
}
.ccm-page.theme-atomik .menu-item h3 {
    font-size: 1.15rem;
    margin-bottom: 0.25rem;
}
.ccm-page.theme-atomik .menu-item p {
    margin-bottom: 0.35rem;
}
.ccm-page.theme-atomik .menu-item .price {
    font-family: var(--sj-font-heading);
    font-weight: 700;
    color: var(--sj-red);
}
/* inline GF icon within item names */
.ccm-page.theme-atomik .menu-item h3 img,
.ccm-page.theme-atomik .menu-item h3 picture {
    height: 0.8em;
    width: auto;
    vertical-align: baseline;
}

/* Sticky mobile Order Online bar (menu page only) */
.ccm-page.theme-atomik .menu-sticky-order {
    display: none;
}
@media (max-width: 767px) {
    .ccm-page-id-266.theme-atomik .menu-sticky-order {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1020;
        padding: 0.6rem 1rem;
        background: rgba(30, 27, 24, 0.95);
        text-align: center;
    }
    .ccm-page-id-266.theme-atomik .menu-sticky-order .sj-btn {
        display: block;
        width: 100%;
    }
    .ccm-page-id-266.theme-atomik {
        padding-bottom: 84px;
    }
}

/* ===========================================================================
 * EVENTS & SPECIALS PAGE (cID 267)
 * Banner replicates the interior-page pattern (Story / Gallery / Careers):
 * full-bleed, ~320px, cover image, dark overlay, white Alfa Slab One H1.
 * Image: fID 105 (gallery_header.jpg, the bar-crowd interior photo). Body sections
 * texture band as the Story page for cohesion. The empty drop-zone container
 * below the intro is where the owner adds his Weekly Specials graphic and the
 * Friday/Saturday/Sunday banner image blocks from the dashboard.
 * ======================================================================== */
.ccm-page.theme-atomik .page-banner-events {
    background-image: url('/application/files/4617/8223/8334/gallery_header.jpg');
}
/* Overlay uses the shared interior-banner standard (matches Gallery). Center is
 * still weighted to hold the white title over this bar photo bright neon/TVs. */
.ccm-page.theme-atomik .page-banner-events .page-banner-overlay {
    background: linear-gradient(90deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.60) 50%, rgba(0,0,0,0.42) 100%);
}
/* Brick texture band behind the body sections (matches Story). The banner
 * section stays flush via the higher-specificity :has(.page-banner) rule. */
.ccm-page-id-267.theme-atomik .section-container {
    background-color: var(--sj-cream);
    background-image:
        linear-gradient(rgba(244, 236, 216, var(--sj-tex-overlay)), rgba(244, 236, 216, var(--sj-tex-overlay))),
        url('/application/files/6317/8214/0751/brick_bak.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Intro: centered title + tagline */
.ccm-page-id-267.theme-atomik .events-intro {
    text-align: center;
}
.ccm-page-id-267.theme-atomik .events-intro h2 {
    margin-bottom: 0.75rem;
}
.ccm-page-id-267.theme-atomik .events-intro-tagline {
    font-size: 1.15rem;
    color: var(--sj-charcoal);
    max-width: 46rem;
    margin: 0 auto;
}
/* Facebook line at the bottom */
.ccm-page-id-267.theme-atomik .events-fb-line {
    text-align: center;
    font-size: 1.05rem;
    margin: 0;
}

/* ===========================================================================
 * COOKIE CONSENT BANNER (GDPR/CCPA)
 * Fixed bottom bar, sitewide. Dark charcoal to match the footer; buttons reuse
 * the sitewide .sj-btn (primary, brick-red) / .sj-btn-secondary (amber)
 * treatment so it reads as part of the same system, not a bolted-on widget.
 * Injected by custom.js into .ccm-page so the .ccm-page-scoped .sj-btn rules
 * above apply without duplication.
 * ======================================================================== */
.sj-consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background-color: var(--sj-charcoal);
    color: var(--sj-cream);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.35);
}
.sj-consent-banner[hidden] {
    display: none;
}
.sj-consent-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}
.sj-consent-text {
    flex: 1 1 360px;
    margin: 0;
    font-family: var(--sj-font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--sj-cream);
}
.sj-consent-text a {
    color: var(--sj-cream);
    text-decoration: underline;
}
.sj-consent-text a:hover,
.sj-consent-text a:focus {
    color: var(--sj-amber);
}
.sj-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex: 0 0 auto;
}
.sj-consent-actions .sj-btn,
.sj-consent-actions .sj-btn-secondary {
    padding: 0.6rem 1.4rem;
    font-size: 0.95rem;
    white-space: nowrap;
}
@media (max-width: 575px) {
    .sj-consent-banner {
        padding: 1rem;
    }
    .sj-consent-actions {
        width: 100%;
    }
    .sj-consent-actions .sj-btn,
    .sj-consent-actions .sj-btn-secondary {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* Footer "Privacy Policy / Cookie Settings" link row (added in footer.php). */
.ccm-page.theme-atomik footer .sj-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
}
@media (max-width: 767px) {
    .ccm-page.theme-atomik footer .sj-footer-links {
        justify-content: flex-start;
        margin-top: 0.5rem;
    }
}

/* ===========================================================================
 * BIRTHDAY CLUB / MAILCHIMP SIGNUP (Events & Specials page, #signup)
 * Overrides Mailchimp's default embed look-and-feel with the site system.
 * Functional classes/IDs from the Mailchimp embed (mc_embed_signup,
 * mc-field-group, mc-embedded-subscribe-form, etc.) are left in the markup
 * untouched -- only presentation is overridden here.
 * ======================================================================== */
.ccm-page.theme-atomik .birthday-club {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
/* Explicit Alfa Slab One per the brief, distinct from the sitewide
 * Zilla-Slab H2 rule -- scoped to this promotional heading only. */
.ccm-page.theme-atomik .birthday-club h2 {
    font-family: var(--sj-font-title);
    font-weight: 400;
    color: var(--sj-charcoal);
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
    margin-bottom: 0.75rem;
}
.ccm-page.theme-atomik .birthday-club-blurb {
    font-size: 1.1rem;
    max-width: 46rem;
    margin: 0 auto 1.75rem;
    color: var(--sj-charcoal);
}
.ccm-page.theme-atomik .sj-mc-embed {
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
}
.ccm-page.theme-atomik .sj-mc-form .mc-field-group {
    margin-bottom: 1rem;
}
.ccm-page.theme-atomik .sj-mc-form label {
    display: block;
    font-family: var(--sj-font-body);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--sj-charcoal);
    margin-bottom: 0.3rem;
}
.ccm-page.theme-atomik .sj-mc-form .mc-required {
    color: var(--sj-red);
}
.ccm-page.theme-atomik .sj-mc-form input[type="email"],
.ccm-page.theme-atomik .sj-mc-form input[type="text"],
.ccm-page.theme-atomik .sj-mc-form select.sj-birthday-select {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--sj-font-body);
    font-size: 1rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(30, 27, 24, 0.25);
    border-radius: 0.35rem;
    background-color: #fff;
    color: var(--sj-charcoal);
}
.ccm-page.theme-atomik .sj-mc-form input[type="email"]:focus,
.ccm-page.theme-atomik .sj-mc-form input[type="text"]:focus,
.ccm-page.theme-atomik .sj-mc-form select.sj-birthday-select:focus {
    outline: none;
    border-color: var(--sj-red);
    box-shadow: 0 0 0 3px rgba(158, 43, 37, 0.15);
}
.ccm-page.theme-atomik .sj-mc-birthday-row {
    display: flex;
    gap: 1rem;
}
.ccm-page.theme-atomik .sj-mc-field-half {
    flex: 1 1 0;
    min-width: 0;
}
@media (max-width: 480px) {
    .ccm-page.theme-atomik .sj-mc-birthday-row {
        flex-direction: column;
        gap: 0;
    }
}
.ccm-page.theme-atomik .sj-birthday-hint {
    font-size: 0.88rem;
    color: var(--sj-red);
    margin: -0.5rem 0 1rem;
}
.ccm-page.theme-atomik .sj-mc-submit-row {
    text-align: center;
    margin-top: 1.5rem;
}
.ccm-page.theme-atomik .sj-mc-submit-row .sj-btn {
    width: 100%;
    max-width: 320px;
    border: none;
    font-family: var(--sj-font-body);
}
/* Mailchimp's inline response divs -- hidden by default via inline style;
 * if Mailchimp ever shows one, keep it readable in the site's palette. */
.ccm-page.theme-atomik #mce-responses .response {
    font-family: var(--sj-font-body);
    font-size: 0.9rem;
    margin-top: 0.75rem;
}
.ccm-page.theme-atomik #mce-error-response {
    color: var(--sj-red);
}
.ccm-page.theme-atomik #mce-success-response {
    color: var(--sj-charcoal);
}

@media (max-width: 991.98px) {
    div.ccm-page div.ccm-block-top-navigation-bar .nav-link {
        padding: 1rem;
        text-align: center;
    }
}