/* ============================================================
   Submefast — Public Site Design System
   ------------------------------------------------------------
   A single, restrained visual language for every public-facing
   page (homepage, contact, privacy policy, terms). Built on the
   real brand colors extracted from the Submefast logo — ink black
   + dark gold — not a generic SaaS palette. No glassmorphism, no
   gradient text, no floating decorative cards, no stock photography.
   Tailwind (loaded via CDN on each page) handles layout utilities;
   this file defines the actual visual identity on top of it.
   ============================================================ */

:root {
    --ink: #0a0a0a;
    --ink-soft: #171717;
    --gold: #b17304;
    --gold-dark: #8f5c03;
    --gold-tint: #fcf1de;
    --paper: #fafaf9;
    --line: #e7e5e4;
}

html { -webkit-tap-highlight-color: transparent; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; }

/* Kicker label — a short line above a section heading, restrained
   (no pill/badge chrome), the one recurring rhythm device used to
   orient a reader instead of decorative icon clusters. */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-dark);
}
.kicker::before {
    content: '';
    width: 1.25rem;
    height: 2px;
    background: var(--gold);
    display: inline-block;
}

/* Buttons — one solid primary treatment (ink), one outline secondary.
   No gradients, no glow shadows. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.875rem 1.75rem;
    border-radius: 10px;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    line-height: 1.2;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #262626; }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-dark); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-outline:hover { border-color: var(--ink); }
.btn-ghost-light { background: rgba(255,255,255,0.08); color: #fff; border: 1.5px solid rgba(255,255,255,0.25); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.4); }

/* Cards — flat, hairline border, no drop shadow by default. A card
   earns emphasis through spacing and content, not chrome. */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
}
.card-hover { transition: border-color 0.2s ease, transform 0.2s ease; }
.card-hover:hover { border-color: #d6d3d1; transform: translateY(-2px); }

/* Service row icon — small, contained, never the oversized "2xl icon
   in a giant colored blob" pattern. */
.svc-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* Focus ring — accessible, uses the real brand gold. */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(177,115,4,0.22), 0 0 0 1.5px var(--gold);
    border-radius: 8px;
}
button, a, [role="button"] { touch-action: manipulation; }

/* Entrance animation — one subtle fade+rise, used sparingly. Content is
   visible by default (no JS = no animation, but never invisible content);
   the JS in public-footer.php adds .js-armed only once it has actually set
   up the IntersectionObserver, so the "start hidden" state can never
   outlive a JS error/block — a page with JS disabled just shows every
   .reveal element already in place. */
@media (prefers-reduced-motion: no-preference) {
    .js-armed .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); }
    .js-armed .reveal.in { opacity: 1; transform: translateY(0); }
}

/* Long-form document content (Privacy Policy / Terms) — deliberately
   plain, readable prose, not a marketing layout. */
.doc-body h2 { font-family: 'Outfit', sans-serif; font-size: 1.375rem; font-weight: 700; color: var(--ink); margin-top: 2.5rem; margin-bottom: 0.75rem; scroll-margin-top: 6rem; }
.doc-body p { margin-bottom: 1rem; line-height: 1.75; color: #404040; }
.doc-body ul { margin: 0 0 1rem 1.25rem; list-style: disc; color: #404040; line-height: 1.75; }
.doc-body li { margin-bottom: 0.5rem; }
.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-body a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px; }

.doc-nav a { display: block; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.875rem; color: #57534e; border-left: 2px solid transparent; }
.doc-nav a:hover { background: #f5f5f4; }
.doc-nav a.active { color: var(--ink); font-weight: 600; border-left-color: var(--gold); background: var(--gold-tint); }

/* Mobile nav drawer */
#mobile-menu { transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); }