/* =============================================================================
   style.css — OLS Industries base theme (Phase 2)
   =============================================================================
   Loaded after Bootstrap 5, so rules here override Bootstrap defaults.
   Palette: matte black + gunmetal with a brass accent, evoking a loaded
   cartridge. Phase 3 adds homepage-specific parallax/hero styling on top
   of this base layer.
   ============================================================================= */

:root {
    --ols-black: #16161a;
    --ols-charcoal: #1f1f24;
    --ols-gunmetal: #2a2a30;
    --ols-steel: #3a3a42;
    --ols-brass: #b08d57;
    --ols-brass-light: #d8b46a;
    --ols-off-white: #f2f2f0;
    --ols-muted: #a3a3ab;

    --bs-primary: var(--ols-brass);
    --bs-primary-rgb: 176, 141, 87;
    --bs-link-color: var(--ols-brass-light);
    --bs-link-color-rgb: 216, 180, 106;
    --bs-link-hover-color: var(--ols-off-white);
    --bs-link-hover-color-rgb: 242, 242, 240;
    --bs-body-bg: var(--ols-black);
    --bs-body-color: var(--ols-off-white);

    --ols-nav-height: 76px;
    --ols-font-heading: 'Oswald', 'Segoe UI', Arial, sans-serif;
    --ols-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

html {
    scroll-padding-top: var(--ols-nav-height);
}

body {
    background-color: var(--ols-black);
    color: var(--ols-off-white);
    font-family: var(--ols-font-body);
    padding-top: var(--ols-nav-height);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ols-font-heading);
    letter-spacing: 0.02em;
    color: var(--ols-off-white);
}

a {
    text-decoration: none;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 2000;
    background: var(--ols-brass);
    color: var(--ols-black);
    padding: 8px 16px;
    border-radius: 0 0 6px 6px;
}

.skip-link:focus {
    top: 0;
}

/* -----------------------------------------------------------------------
   Navbar
   ----------------------------------------------------------------------- */
.ols-navbar {
    min-height: var(--ols-nav-height);
    background-color: var(--ols-black);
    border-bottom: 1px solid var(--ols-steel);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.ols-navbar.is-scrolled {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.brand-logo {
    height: 52px;
    width: auto;
    display: block;
}

/* Homepage only: navbar stays fully hidden over the hero (not just
   transparent) until main.js adds .is-scrolled, then fades/slides in and
   solidifies. Every other page has no hero image behind the navbar, so it
   stays solid and visible always. The visibility transition is delayed on
   the way out (0.3s) and instant on the way in, so it un-hides immediately
   but only truly leaves the accessibility/tab order once the fade-out
   finishes — otherwise keyboard users could tab into invisible nav links.
   Reusing .is-scrolled (rather than a separate scroll listener) means this
   inherits main.js's hysteresis thresholds, so it can't flicker in/out from
   the same scroll-position jitter that used to flicker the background. */
body.page-home .ols-navbar {
    background-color: transparent;
    border-bottom-color: transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease,
        opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

body.page-home .ols-navbar.is-scrolled,
body.page-home .ols-navbar.menu-open {
    background-color: var(--ols-black);
    border-bottom-color: var(--ols-steel);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: background-color 0.2s ease, box-shadow 0.2s ease,
        opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
}

.ols-navbar .nav-link {
    color: var(--ols-off-white);
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: 0.03em;
    padding: 0.6rem 1rem;
    text-transform: uppercase;
}

.ols-navbar .nav-link:hover,
.ols-navbar .nav-link:focus,
.ols-navbar .nav-link.active {
    color: var(--ols-brass-light);
}

.ols-navbar .dropdown-menu {
    background-color: var(--ols-charcoal);
    border: 1px solid var(--ols-steel);
}

.ols-navbar .dropdown-item {
    color: var(--ols-off-white);
}

.ols-navbar .dropdown-item:hover,
.ols-navbar .dropdown-item:focus {
    background-color: var(--ols-gunmetal);
    color: var(--ols-brass-light);
}

.ols-nav-icons .nav-link {
    font-size: 1.1rem;
    padding: 0.5rem 0.6rem;
}

.cart-badge {
    position: absolute;
    top: 2px;
    right: -2px;
    background-color: var(--ols-brass);
    color: var(--ols-black);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
}

.flash-wrap {
    padding-top: 1rem;
}

/* -----------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------- */
.btn-brass {
    background-color: var(--ols-brass);
    border-color: var(--ols-brass);
    color: var(--ols-black);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.btn-brass:hover,
.btn-brass:focus {
    background-color: var(--ols-brass-light);
    border-color: var(--ols-brass-light);
    color: var(--ols-black);
}

.btn-outline-brass {
    background-color: transparent;
    border: 1px solid var(--ols-brass);
    color: var(--ols-brass-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.btn-outline-brass:hover,
.btn-outline-brass:focus {
    background-color: var(--ols-brass);
    color: var(--ols-black);
}

/* -----------------------------------------------------------------------
   Cards (used across products, phase 2 status panel, etc.)
   ----------------------------------------------------------------------- */
.ols-card {
    background-color: var(--ols-charcoal);
    border: 1px solid var(--ols-steel);
    border-radius: 10px;
}

/* -----------------------------------------------------------------------
   Features strip — sits above the footer on every page (moved out of
   home.css since it's no longer homepage-only)
   ----------------------------------------------------------------------- */
.features-strip {
    padding: 3.5rem 0;
    border-top: 1px solid var(--ols-steel);
}

.features-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.feature-flag {
    /* Fixed box for both, sized to the American flag SVG's own 1.9:1 ratio
       so it fills edge-to-edge. The Texas state-outline image is a very
       different (near-square) shape, not a rectangle — object-fit: contain
       scales it down to fit inside the same box without cropping or
       distorting it, same outcome SVG's own preserveAspectRatio gives the
       American flag automatically. */
    width: 190px;
    height: 100px;
    object-fit: contain;
    flex-shrink: 0;
}

.feature-item {
    text-align: center;
    padding: 0 1rem;
    max-width: 220px;
}

.feature-icon {
    width: 64px;
    height: 64px;
    line-height: 64px;
    border-radius: 50%;
    border: 1px solid var(--ols-steel);
    color: var(--ols-brass);
    font-size: 1.6rem;
    margin: 0 auto 1.25rem;
}

.feature-item h3 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.feature-item p {
    color: var(--ols-muted);
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------- */
.ols-footer {
    background-color: var(--ols-charcoal);
    border-top: 1px solid var(--ols-steel);
    padding: 3.5rem 0 2rem;
    margin-top: 4rem;
    font-size: 0.9rem;
}

.footer-logo {
    height: 84px;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5rem;
}

.footer-tagline {
    color: var(--ols-brass-light);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.footer-heading {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    color: var(--ols-brass-light);
    margin-bottom: 1rem;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: var(--ols-muted);
}

.footer-links a:hover {
    color: var(--ols-off-white);
}

.footer-divider {
    border-color: var(--ols-steel);
    margin: 2rem 0 1.25rem;
}

.footer-bottom {
    color: var(--ols-muted);
    font-size: 0.82rem;
}

.footer-age-notice {
    color: var(--ols-muted);
}

/* -----------------------------------------------------------------------
   Generic page-building blocks — a button-group, a section divider, and a
   CTA banner — reused across the homepage and any content page (about,
   faq, legal, ...).
   ----------------------------------------------------------------------- */
.hero-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.intro-divider {
    width: 64px;
    height: 3px;
    background-color: var(--ols-brass);
    margin: 0 auto 1.75rem;
    border: none;
}

.cta-banner {
    background: linear-gradient(120deg, var(--ols-charcoal), var(--ols-gunmetal));
    border-top: 1px solid var(--ols-steel);
    border-bottom: 1px solid var(--ols-steel);
    padding: 4.5rem 0;
    text-align: center;
}

.cta-banner p {
    color: var(--ols-muted);
    max-width: 560px;
    margin: 0 auto 2rem;
}