/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Stardos+Stencil:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap");

/* ── Brand CSS Custom Properties ─────────────────────────────────────────── */
:root {
    --color-primary: #5e5c48;
    --color-secondary: #2d2a23;
    --color-accent: #e2e3e2;
    --font-stencil: "Stardos Stencil", serif;
    --font-body: "Roboto", sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--color-secondary);
    background-color: #ffffff;
}

/* ── Stencil / Display Font ───────────────────────────────────────────────── */
.stencil-font {
    font-family: var(--font-stencil);
    letter-spacing: 0.05em;
}

h1,
h2,
h3,
h4 {
    text-transform: uppercase;
}

/* ── Logo SVG ─────────────────────────────────────────────────────────────── */
.logo-svg {
    display: inline-block;
    height: 2.5rem;
    width: auto;
}

.logo-svg-lg {
    display: inline-block;
    height: 6rem;
    width: auto;
}

/* ── Camo Hero Background ─────────────────────────────────────────────────── */
.camo-bg {
    background-color: #f5f2eb;
    position: relative;
    isolation: isolate;
}

.camo-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/camo-texture.png");
    background-repeat: repeat;
    background-size: 400px auto;
    opacity: 1;
    pointer-events: none;
    z-index: -1;
}

/* Subtle camo texture overlay for olive/dark sections */
.camo-tint {
    background-image: url("../img/camo-texture.png");
    background-repeat: repeat;
    background-size: 400px auto;
    background-blend-mode: multiply;
}

/* ── Image Placeholder ────────────────────────────────────────────────────── */
.img-placeholder {
    background-color: #eeebe3;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 20px,
        rgba(67, 82, 48, 0.05) 20px,
        rgba(67, 82, 48, 0.05) 21px
    );
}

/* Dark variant for sections with dark bg */
.img-placeholder-dark {
    background-color: rgba(67, 82, 48, 0.12);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 20px,
        rgba(42, 51, 24, 0.08) 20px,
        rgba(42, 51, 24, 0.08) 21px
    );
}

/* ── Nav Scroll Shadow ────────────────────────────────────────────────────── */
.nav-scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.28);
}

/* ── Transitions ──────────────────────────────────────────────────────────── */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}