/* ============================================================================
   ApaOne / Duseci.rs — brand styles layered on top of Tailwind.
   Brand palette (ApaOne Color Palette-01.png):
     Midnight Express #000040 | Free Speech Red #D00707 | White #FFFFFF | Whisper #E6E6E6
   Typography: Montserrat (variable, local).
   ========================================================================== */

:root {
    --primary-color: #000040;   /* Midnight Express */
    --accent-color:  #D00707;   /* Free Speech Red  */
    --surface-color: #FFFFFF;   /* White            */
    --muted-color:   #E6E6E6;   /* Whisper          */
    --text-color:    #1a1a2e;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    color: var(--text-color);
    background: var(--surface-color);
    -webkit-font-smoothing: antialiased;
}

/* --- reveal-on-scroll primitives (GSAP toggles these) --------------------- */
.gsap-reveal,
.gsap-reveal-left,
.gsap-reveal-right,
.gsap-stagger > * {
    opacity: 0;
    will-change: transform, opacity;
}

.no-js .gsap-reveal,
.no-js .gsap-reveal-left,
.no-js .gsap-reveal-right,
.no-js .gsap-stagger > * {
    opacity: 1;
}

/* --- micro-interactions ---------------------------------------------------- */
.card-hover {
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 64, .35);
}

.btn-primary {
    background: var(--primary-color);
    color: #fff;
    transition: background .25s ease, transform .15s ease, box-shadow .25s ease;
}
.btn-primary:hover {
    background: var(--accent-color);
    box-shadow: 0 10px 26px -12px rgba(208, 7, 7, .55);
}
.btn-primary:active {
    transform: scale(.97);
}

.btn-outline {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    transition: all .25s ease;
}
.btn-outline:hover {
    background: var(--primary-color);
    color: #fff;
}

.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: var(--accent-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* --- product gallery ------------------------------------------------------- */
.gallery-thumb {
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .2s ease, opacity .2s ease;
    opacity: .7;
}
.gallery-thumb:hover,
.gallery-thumb.active {
    border-color: var(--accent-color);
    opacity: 1;
}

/* --- prose (CMS page content) ---------------------------------------------- */
.cms-prose h2 { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); margin: 1.5em 0 .6em; }
.cms-prose h3 { font-size: 1.25rem; font-weight: 600; color: var(--primary-color); margin: 1.2em 0 .5em; }
.cms-prose p  { margin: .8em 0; line-height: 1.75; }
.cms-prose ul { list-style: disc; padding-left: 1.5em; margin: .8em 0; }
.cms-prose ol { list-style: decimal; padding-left: 1.5em; margin: .8em 0; }
.cms-prose a  { color: var(--accent-color); text-decoration: underline; }
.cms-prose img { max-width: 100%; height: auto; border-radius: .75rem; margin: 1em 0; }
.cms-prose table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.cms-prose td, .cms-prose th { border: 1px solid var(--muted-color); padding: .5em .75em; }

/* --- scrollbar (subtle, brand) --------------------------------------------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--muted-color); }
::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }

/* --- page transition veil (GSAP) ------------------------------------------- */
#page-veil {
    position: fixed;
    inset: 0;
    background: var(--primary-color);
    z-index: 9999;
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: top;
}

/* --- toast ------------------------------------------------------------------ */
#toast-stack {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}