/* trevarn.com shared layout: header, footer, demo modal. Rendered by site_layout.py on every page.
   Class names are namespaced (site-header / sh-*, site-footer / sf-*, demo-modal / dm-*) so a page's
   own stylesheet cannot collide with them. */
:root {
    --sl-ink: #11181C; --sl-slate: #1F3A4A; --sl-storm: #556970; --sl-muted: #5F676C;
    --sl-cloud: #E5E7EB; --sl-pearl: #F8F9FA; --sl-white: #FFFFFF;
    --sl-glaz: #4A6FA5; --sl-glaz-700: #3A5A8A; --sl-glaz-900: #2A4470; --sl-glaz-300: #7BA3D4; --sl-glaz-50: #E0EBF5;
    --product-glanik: #4A6FA5; --product-spacen: #4D7731; --product-placen: #B8862E;
    --sl-header-h: 64px;
}
html { scroll-padding-top: calc(var(--sl-header-h) + 16px); }
body { margin: 0; }
@media (max-width: 900px) { :root { --sl-header-h: 112px; } }

/* Skip link: visible on keyboard focus only */
.skip-link {
    position: absolute; left: 12px; top: -48px; z-index: 300;
    background: var(--sl-ink); color: var(--sl-white); padding: 10px 16px; border-radius: 8px;
    font: 600 14px/1.2 Inter, system-ui, sans-serif; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ── Header ──────────────────────────────────────────── */
.site-header {
    position: sticky; top: 0; z-index: 200;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--sl-cloud);
    font-family: Inter, system-ui, -apple-system, sans-serif;
    --accent: var(--sl-glaz);
}
.site-header[data-page="glanik"] { --accent: var(--product-glanik); }
.site-header[data-page="spacen"] { --accent: var(--product-spacen); }
.site-header[data-page="placen"] { --accent: var(--product-placen); }
.sh-wrap {
    max-width: 1200px; margin: 0 auto; padding: 0 24px;
    min-height: var(--sl-header-h); display: flex; align-items: center; gap: 28px;
}
.sh-brand {
    display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
    color: var(--sl-slate); font-weight: 600; font-size: 15px; letter-spacing: 0.12em;
}
.sh-brand .sh-mark { color: var(--sl-glaz); }
.sh-nav { display: flex; gap: 6px; margin-left: auto; }
.sh-nav a {
    position: relative; color: var(--sl-storm); text-decoration: none; font-size: 15px; font-weight: 500;
    padding: 10px 10px; border-radius: 8px; white-space: nowrap;
}
.sh-nav a:hover { color: var(--sl-slate); background: var(--sl-pearl); }
.sh-nav a[aria-current="page"] { color: var(--sl-slate); font-weight: 600; }
.sh-nav a[aria-current="page"]::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; border-radius: 2px;
    background: var(--accent);
}
.sh-langs { display: flex; gap: 2px; }
.sh-langs a {
    color: var(--sl-storm); text-decoration: none; font-size: 13px; font-weight: 600;
    min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
}
.sh-langs a:hover { color: var(--sl-slate); background: var(--sl-pearl); }
.sh-langs a[aria-current] { background: var(--sl-glaz-50); color: var(--sl-glaz-900); }
.sh-cta {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
    border-radius: 8px; background: var(--sl-glaz-700); color: var(--sl-white);
    font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.sh-cta:hover { background: var(--sl-glaz-900); }
.sh-cta-short { display: none; }
.site-header a:focus-visible, .site-footer a:focus-visible, .demo-modal a:focus-visible,
.demo-modal button:focus-visible, .demo-modal input:focus-visible {
    outline: 2px solid var(--sl-glaz); outline-offset: 2px;
}

@media (max-width: 900px) {
    .sh-wrap { flex-wrap: wrap; gap: 0 12px; padding: 0 16px; min-height: 0; }
    .sh-brand { min-height: 56px; }
    .sh-langs { margin-left: auto; }
    .sh-nav {
        order: 3; width: 100%; margin: 0 -10px; padding-bottom: 6px; gap: 0;
        overflow-x: auto; scrollbar-width: none;
    }
    .sh-nav::-webkit-scrollbar { display: none; }
    .sh-nav a { padding: 10px; }
}
@media (max-width: 600px) {
    .sh-brand span { display: none; }
    .sh-cta { padding: 0 14px; min-height: 40px; font-size: 14px; }
    .sh-cta-long { display: none; }
    .sh-cta-short { display: inline; }
    .sh-langs a { min-width: 36px; }
}

/* ── Footer ──────────────────────────────────────────── */
.site-footer {
    background: var(--sl-ink); color: #A9B0B4; font: 14px/1.6 Inter, system-ui, sans-serif;
    padding: 48px 24px 32px;
}
.sf-wrap {
    max-width: 1200px; margin: 0 auto; display: grid; gap: 32px;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto; align-items: start;
}
.sf-brand { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; color: var(--sl-white); }
.sf-brand .sh-mark { color: var(--sl-glaz-300); }
.sf-brand span { font-weight: 600; letter-spacing: 0.12em; font-size: 15px; }
.sf-brand p { grid-column: 1 / -1; margin: 6px 0 0; color: #A9B0B4; }
.sf-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.sf-nav a { color: var(--sl-white); text-decoration: none; font-weight: 600; }
.sf-nav a:hover { text-decoration: underline; }
.sf-nav span { color: #A9B0B4; margin-left: 6px; }
.sf-langs { display: flex; flex-direction: column; gap: 6px; }
.sf-langs a { color: #A9B0B4; text-decoration: none; }
.sf-langs a:hover { color: var(--sl-white); }
.sf-langs a[aria-current] { color: var(--sl-white); font-weight: 600; }
.sf-legal {
    max-width: 1200px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px; color: #A9B0B4;
}
.sf-legal p { margin: 0 0 4px; }
@media (max-width: 900px) {
    .site-footer { padding: 40px 16px 28px; }
    .sf-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .sf-langs { flex-direction: row; gap: 16px; }
}
@media (max-width: 480px) { .sf-nav ul { grid-template-columns: minmax(0, 1fr); } }

/* ── Demo modal (no JavaScript: opens with :target, posts to /contact) ── */
.demo-modal {
    position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center;
    padding: 16px; background: rgba(17, 24, 28, 0.62); font: 16px/1.6 Inter, system-ui, sans-serif;
}
.demo-modal:target { display: flex; }
.dm-box {
    position: relative; width: 100%; max-width: 440px; background: var(--sl-white); border-radius: 12px;
    padding: 28px 24px 24px; box-shadow: 0 20px 60px rgba(17, 24, 28, 0.35); color: var(--sl-slate);
    max-height: calc(100vh - 32px); overflow-y: auto;
}
.dm-box h2 { font: 700 24px/1.2 "IBM Plex Sans", Inter, sans-serif; margin: 0 0 8px; color: var(--sl-slate); }
.dm-box p { margin: 0 0 16px; font-size: 15px; color: var(--sl-muted); }
.dm-box label { display: block; font-size: 14px; font-weight: 600; color: var(--sl-slate); margin: 12px 0 6px; }
.dm-box input[type="text"], .dm-box input[type="email"] {
    width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #B9C0C4; border-radius: 8px;
    font: inherit; font-size: 16px; color: var(--sl-slate); background: var(--sl-white); box-sizing: border-box;
}
.dm-box input:focus { outline: 2px solid var(--sl-glaz); outline-offset: 1px; border-color: var(--sl-glaz); }
.dm-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.dm-btn {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 20px;
    border: 0; border-radius: 8px; background: var(--sl-glaz-700); color: var(--sl-white);
    font: 600 15px Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer; box-sizing: border-box;
}
.dm-btn:hover { background: var(--sl-glaz-900); color: var(--sl-white); }
.dm-privacy { margin: 14px 0 0 !important; font-size: 13px !important; }
.dm-privacy a { color: var(--sl-glaz-700); }
.sf-legal a { color: #A9B0B4; }
.sf-legal a:hover { color: var(--sl-white); }
.dm-x {
    position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; display: flex; align-items: center;
    justify-content: center; color: var(--sl-storm); text-decoration: none; font-size: 26px; line-height: 1; border-radius: 8px;
}
.dm-x:hover { background: var(--sl-pearl); color: var(--sl-slate); }

/* ── 404 ─────────────────────────────────────────────── */
.nf { max-width: 640px; margin: 0 auto; padding: 120px 24px; font-family: Inter, system-ui, sans-serif; color: var(--sl-slate); }
.nf h1 { font: 700 36px/1.2 "IBM Plex Sans", Inter, sans-serif; margin: 0 0 12px; }
.nf p { color: var(--sl-muted); margin: 0 0 8px; }
.nf .dm-btn { width: auto; display: inline-flex; padding: 0 22px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }