/* =========================================================================
   Brand overrides for the Roast theme.
   Layered AFTER the theme's custom.css. Use this file (not the theme's css)
   for Brew-Haha-specific tweaks so the theme stays vendor-clean.
   ========================================================================= */

/* Site banners (impersonation, dev DB) sit above the topbar — make sure they
   don't get overlapped by Roast's sticky header transitions. */
.alert.rounded-0 {
    z-index: 9999;
}

/* Daily-special and countdown banners — slot them visually between header
   and main content. */
.daily-special-banner,
.countdown-banner {
    background: #FAF6F0;
    border-bottom: 1px solid rgba(201, 165, 129, 0.3);
}

/* Toast notifications above the preloader. */
.toast-container {
    z-index: 10000;
}

/* Site page wrapper — admin-created pages go here. */
.cms-page-wrapper > section,
.cms-page-wrapper > div {
    /* No extra padding by default; blocks are responsible for their own spacing. */
}

/* Skeleton-loader colors blended with the Roast palette. */
.skeleton {
    background: linear-gradient(90deg, #F4EDE2 25%, #FAF6F0 37%, #F4EDE2 63%);
}

/* Fallback nav colors — Roast uses light cream backgrounds and warm browns;
   adjust the focus ring used by the WCAG keyboard-skip helpers to match. */
a.visually-hidden-focusable:focus,
a.visually-hidden-focusable:focus-visible {
    outline: 3px solid #C9A581;
    outline-offset: 4px;
    background: #fff;
    color: #121D23;
    padding: 8px 16px;
}

/* Disable Roast's "magic cursor" follow-dot. The script still attaches a
   .cb-cursor element to the body; hiding it keeps native cursor behaviour. */
.cb-cursor { display: none !important; }
html, body { cursor: auto !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Readability fix — Roast's default heading/body color is white because the
   theme assumes a dark page bg. Brew-Haha home page uses cream and white
   sections, so headings/copy here must be dark to remain readable.
   ───────────────────────────────────────────────────────────────────────── */
.our-services .service-item h3,
.our-services .service-item h4,
.our-services .service-item p,
.our-services .service-item li,
.cta-box .section-title h2,
.cta-box .section-title h3,
.cta-box .section-title p,
.cta-box ul li,
.cta-box .list-unstyled li,
.newsletter-block .section-title h2,
.newsletter-block .section-title h3,
.newsletter-block .section-title p {
    color: #2A1F15 !important;
}

/* Section "eyebrow" h3 keeps the brand accent (gold) on cream — better
   visual hierarchy than pure dark. */
.cta-box .section-title h3,
.newsletter-block .section-title h3 {
    color: #8B5A2B !important;
}

/* The animated headline plugin wraps each char in <span>; force inheritance. */
.cta-box .section-title h2 *,
.newsletter-block .section-title h2 * {
    color: inherit !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Page-header tightening — Roast's stock .page-header has padding:160px 0
   (so a 160px gap appears below the tagline) and the next section adds its
   own `py-5` (48px). Combined that's >200px between the tagline and the
   first real content. Cap the total gap at ~40px by squeezing the bottom of
   the header and the top of the next sibling section.
   ───────────────────────────────────────────────────────────────────────── */
.page-header {
    padding-top: 110px !important;
    padding-bottom: 14px !important;
}
.page-header + section,
.page-header + div > section:first-child {
    padding-top: 18px !important;
}

/* Local blog header (Blog/Category, Blog/Tag) — same idea. */
.blog-header {
    padding: 24px 0 14px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Light-section readability — Trailer, Portable Bar, Event Space and other
   public pages have alternating cream sections (`background:#FAF6F0`) where
   Roast's white-on-dark heading defaults become unreadable. Force dark text
   inside any cream-coloured section.
   ───────────────────────────────────────────────────────────────────────── */
section[style*="#FAF6F0"],
section[style*="#FAF6F0"] .section-title h1,
section[style*="#FAF6F0"] .section-title h2,
section[style*="#FAF6F0"] .section-title h3,
section[style*="#FAF6F0"] .section-title p,
section[style*="#FAF6F0"] p,
section[style*="#FAF6F0"] li,
section[style*="#FAF6F0"] a:not(.btn-default):not(.site-btn) {
    color: #2A1F15 !important;
}
/* Animated headline plugin wraps each char in <span>; force inheritance. */
section[style*="#FAF6F0"] .section-title h2 *,
section[style*="#FAF6F0"] .section-title h3 * {
    color: inherit !important;
}
/* Sub-heading "eyebrow" h3 keeps the brand accent gold. */
section[style*="#FAF6F0"] .section-title h3 {
    color: #8B5A2B !important;
}
section[style*="#FAF6F0"] .section-title h3 * {
    color: #8B5A2B !important;
}
/* Inline links that are not buttons stay in the brand accent. */
section[style*="#FAF6F0"] .section-title a,
section[style*="#FAF6F0"] p a {
    color: #8B5A2B !important;
    text-decoration: underline;
}
section[style*="#FAF6F0"] .section-title a:hover,
section[style*="#FAF6F0"] p a:hover {
    color: #6F4520 !important;
}