/* ---------------------------------------------------------------------------
   Middlebolt brand layer
   ---------------------------------------------------------------------------
   Typography and colour follow an industrial black-and-yellow look:

     display  - Oswald, weights 400-700. A tall condensed gothic set in
                uppercase; the closest free Google Fonts match to condensed
                industrial headline faces such as Knockout. Used for the
                wordmark, headings and stat figures.
     body     - Arimo. A neutral grotesque that stays readable at 15px over
                long paragraphs.

   Loaded from every page via mb_brand_assets() in seo.php, so this file is the
   only place site-wide type and brand colour are defined. Element selectors are
   used deliberately: no page applies a Tailwind font-family utility, so these
   win over the inherited body font without needing !important.
   --------------------------------------------------------------------------- */

:root {
    /* Black and safety yellow. The --mb-navy names are kept so existing rules still resolve. */
    --mb-navy:        #1a1a1a;
    --mb-navy-soft:   #333333;
    --mb-yellow:      #ffcd11;
    --mb-yellow-deep: #e6b800;

    --mb-font-display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    --mb-font-body:    'Arimo', Arial, 'Helvetica Neue', sans-serif;
}

/* --- Display type ------------------------------------------------------- */

/* Oswald is condensed, so it needs slight positive tracking rather than the
   negative tracking a wide face wants. */
h1, h2, h3, h4, h5, h6,
.mb-display {
    font-family: var(--mb-font-display);
    letter-spacing: 0.01em;
    word-spacing: 0.02em;
}

h1 {
    letter-spacing: 0.005em;
}

/* Small uppercase eyebrow headings read better with positive tracking. */
h2.uppercase, h3.uppercase, h4.uppercase,
.tracking-widest {
    letter-spacing: 0.12em;
}

/* --- Brand lockup ------------------------------------------------------- */

.mb-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

.mb-lockup__mark {
    display: block;
    width: auto;
    /* The eagle emblem is transparent line art, so no plate, radius or shadow. */
    object-fit: contain;
}

.mb-wordmark {
    font-family: var(--mb-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
}

/* The bolt in the logo cuts through the M and B; echoing that colour on the
   word "Bolt" ties the HTML wordmark back to the artwork. */
.mb-wordmark__bolt {
    color: var(--mb-yellow);
}

/* --- Breadcrumb / hero clearance ---------------------------------------- */

/* The site header is position:fixed, so every hero carries pt-32 (md:pt-40) purely
   to clear it. When a breadcrumb bar sits between them the breadcrumb takes over
   that job, and the hero only needs ordinary section padding — otherwise the two
   clearances stack and open a large empty band above the H1. */
nav[aria-label="Breadcrumb"] + header {
    padding-top: 2.5rem;
}

@media (min-width: 768px) {
    nav[aria-label="Breadcrumb"] + header {
        padding-top: 4rem;
    }
}

/* --- Utilities ---------------------------------------------------------- */

.mb-text-brand   { color: var(--mb-yellow); }
.mb-bg-brand     { background-color: var(--mb-yellow); color: var(--mb-navy); }
.mb-bg-navy      { background-color: var(--mb-navy); }

/* Keep focus rings visible now that links sit on dark brand surfaces. */
.mb-lockup:focus-visible {
    outline: 2px solid var(--mb-yellow);
    outline-offset: 3px;
    border-radius: 0.5rem;
}

/* --- Accessibility and touch -------------------------------------------- */

/* A visible focus ring for keyboard users on every link, button and FAQ row.
   :focus-visible does not fire on mouse or touch clicks, so the look is unchanged there. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[role="button"]:focus-visible {
    /* Yellow ring with a black edge stays visible on both white and black sections. */
    outline: 3px solid #ffcd11;
    box-shadow: 0 0 0 2px #000;
    outline-offset: 2px;
    border-radius: 0.375rem;
}

/* --- Decorative patterns -------------------------------------------------- */

/* Faint plus-sign texture behind the call-to-action banners. It used to be a Tailwind
   arbitrary class holding an inline SVG with escaped quotes, which Tailwind cannot parse,
   so the pattern never rendered. */
.mb-cta-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Footer and breadcrumb links are text-sized (about 20px tall), which is hard to hit on a
   phone. A 32px minimum height gives each one a comfortable touch area without changing
   the visual design. */
footer ul a,
footer address a,
nav[aria-label="Breadcrumb"] a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
}

@media (prefers-reduced-motion: reduce) {
    html, body { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Homepage hero ---------------------------------------------------------- */

/* Soft yellow light behind the black hero. */
.mb-hero-glow {
    background:
        radial-gradient(40rem 28rem at 85% 20%, rgba(255, 205, 17, 0.16), transparent 60%),
        radial-gradient(36rem 30rem at 5% 100%, rgba(255, 255, 255, 0.06), transparent 60%);
}