/* Shared across every page: design tokens, reset, nav, footer, buttons, reveal.
   Page-specific rules live in index.css / valvonta.css, which are loaded after
   this file and may override the tokens below. */

:root {
    /* 60% Dominant: Backgrounds */
    --bg-primary: #0A0A0A;
    --bg-card: #1A1A1A;

    /* 30% Secondary: Typography & Borders */
    --text-main: #FFFFFF;
    --text-muted: #E5E7EB;
    --border-subtle: #333333;

    /* 10% Accent: Highlights */
    --accent: #FFD700;
    --accent-glow: rgba(255, 215, 0, 0.3);

    /* Typography */
    --font-heading: 'Audiowide', cursive;
    --font-body: 'Montserrat', sans-serif;

    /* Animation Timing */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 150ms var(--ease-standard);
    --transition-slow: 600ms var(--ease-standard);

    /* Nav height, per breakpoint. The hero and the anchor offsets both key off
       this, so the three values below are the single source of truth. */
    --nav-height: 154px;
}

/* --- RESET & BASE --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Only the scroll container needs this — it was previously on `*`, where it had
   no effect on 200+ elements. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + 20px);
}

body {
    background-color: var(--bg-primary);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
}

h2 {
    font-size: 2.45rem;
    margin-bottom: 2rem;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/* Used inside translated strings that highlight part of a heading. */
.accent { color: var(--accent); }

/* --- NAVIGATION --- */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #000000;
    border-bottom: none;
    z-index: 1000;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: var(--nav-height);
    width: auto;
    object-fit: contain;
    display: block;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-links a {
    font-size: 1.15rem;
    font-weight: 700;
    transition: var(--transition-fast);
}

.nav-links a:hover,
.nav-links a.active { color: var(--accent); }

.nav-cta {
    background: var(--accent);
    color: var(--bg-primary) !important;
    padding: 0.9rem 1.8rem;
    font-size: 1.4rem;
    font-weight: 900;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    border-radius: 3px;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    min-height: 44px;
    touch-action: manipulation;
}

.nav-cta:hover {
    background: var(--text-main);
    color: var(--bg-primary) !important;
    box-shadow: 0 0 15px var(--accent-glow);
}

.nav-cta:active {
    transform: scale(0.98);
}

#lang-toggle {
    background: transparent;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--font-heading);
    cursor: pointer;
    border-radius: 3px;
    transition: var(--transition-fast);
    min-height: 44px;
    min-width: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

#lang-toggle:hover {
    background: var(--accent);
    color: var(--bg-primary);
}

#lang-toggle:active {
    transform: scale(0.96);
}

/* --- MOBILE MENU BUTTON --- */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0.5rem;
    min-width: 48px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    /* z-index is a no-op without a position — without this, the open drawer's
       backdrop-filter layer (its own stacking context) could paint over part of
       this button on iOS Safari, clipping the left side of the close (X) icon. */
    position: relative;
    z-index: 1100;
    transition: var(--transition-fast);
    touch-action: manipulation;
}

.mobile-menu-btn:hover {
    color: var(--accent);
}

.mobile-menu-btn svg line {
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Order matters here. A transform list acts on the geometry right-to-left, so
   rotate() translateY() slides the stroke onto the viewBox centre line
   (y 6 -> 12, y 18 -> 12) and only then spins it about that centre, leaving
   both strokes crossing at 12,12 with four equal arms.

   Written the other way round the rotation happened first and the 6px shift
   then moved the finished stroke down the screen, along its own diagonal. The
   two strokes ended up crossing at x 14.5 instead of 12 — an X sitting 5.7px
   right of centre whose upper-left and lower-left arms were half the length of
   the right-hand ones, so the left half of the X looked shorn off. */
.mobile-menu-btn[aria-expanded="true"] svg line:nth-child(1) {
    transform: rotate(45deg) translateY(6px);
}
.mobile-menu-btn[aria-expanded="true"] svg line:nth-child(2) {
    opacity: 0;
}
.mobile-menu-btn[aria-expanded="true"] svg line:nth-child(3) {
    transform: rotate(-45deg) translateY(-6px);
}

body.no-scroll {
    overflow: hidden;
}

/* --- BUTTONS --- */
.btn {
    padding: 1rem 2.5rem;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-fast);
    border: none;
    display: inline-block;
}

.btn-primary {
    background: var(--accent);
    color: var(--bg-primary);
}

.btn-primary:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 0 20px var(--accent-glow);
}

/* --- SHARED CTA BOX --- */
/* Appears at the end of the services list on the homepage and at the end of the
   supervision page. Identical on both, so it lives here. */
.cta-box {
    max-width: 900px;
    margin: 4rem auto 0 auto;
    padding: 3.5rem 2.5rem;
    background: linear-gradient(135deg, #141414 0%, #0a0a0a 100%);
    border: 1px solid var(--accent);
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.cta-box h3 {
    font-family: var(--font-heading);
    font-size: 1.94rem;
    color: var(--accent);
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.cta-box p {
    font-size: 1.2rem;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 750px;
    margin: 0 auto 2rem auto;
}

.cta-box .btn {
    font-size: 1.58rem;
    padding: 1.2rem 3.5rem;
}

/* --- REVEAL ANIMATIONS --- */
.reveal {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: no-preference) {
    .reveal-init {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 600ms var(--ease-standard), transform 600ms var(--ease-standard);
    }

    .reveal-init.active {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- FOOTER --- */
footer.site-footer {
    background-color: #050505;
    color: var(--text-main);
    padding: 80px 5% 40px;
    border-top: 1px solid var(--border-subtle);
    font-family: var(--font-body);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 50px;
}

.footer-logo {
    display: block;
    margin-bottom: 20px;
    width: fit-content;
}

.footer-logo-img {
    height: 141px;
    width: auto;
    object-fit: contain;
    display: block;
}

.footer-description {
    font-family: var(--font-heading);
    font-size: 1.44rem;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.5;
    max-width: 550px;
    margin-top: 1rem;
}

.footer-column-title {
    font-family: var(--font-heading);
    font-size: 1.62rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-column-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--accent);
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-list li {
    margin-bottom: 12px;
}

.footer-links-list a {
    color: #d1d5db;
    font-size: 17px;
    text-decoration: none;
    transition: padding-left 0.3s ease, color 0.3s ease;
}

.footer-links-list a:hover {
    color: var(--accent);
    padding-left: 4px;
}

.footer-contact-info {
    font-size: 17px;
    color: #d1d5db;
    line-height: 1.6;
}

.footer-contact-info p {
    margin-bottom: 12px;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-start;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-bottom-text {
    font-size: 16px;
    color: #9ca3af;
}

.footer-credit {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
}

.footer-credit:hover {
    color: var(--accent);
}

/* --- TIETOSUOJASELOSTE PANEL --- */
.footer-privacy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    color: #d1d5db;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.7rem 1.3rem;
    min-height: 44px;
    cursor: pointer;
    transition: var(--transition-fast);
    touch-action: manipulation;
}

.footer-privacy-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.footer-privacy-btn svg {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.footer-privacy-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Opened with showModal(), so the panel lives in the top layer — no z-index of
   its own is needed to clear the fixed nav (1000) or the drawer (1050). */
.privacy-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    max-height: 88dvh;
    padding: 0;
    border: none;
    border-bottom: 2px solid var(--accent);
    border-radius: 0 0 8px 8px;
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
    overflow: hidden;
    flex-direction: column;
    transform: translateY(-100%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* [open] is where the UA switches `display` on, so the flex layout that splits
   the fixed header from the scrolling body has to be declared against it. */
.privacy-dialog[open] {
    display: flex;
}

.privacy-dialog.active {
    transform: translateY(0);
}

/* ::backdrop does not inherit the page's custom properties in every engine, so
   these two rules are written out in full rather than via --bg-primary. */
.privacy-dialog::backdrop {
    background: rgba(0, 0, 0, 0);
    transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.privacy-dialog.active::backdrop {
    background: rgba(0, 0, 0, 0.72);
}

.privacy-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem clamp(1.25rem, 5vw, 3rem);
    background: #050505;
    border-bottom: 1px solid var(--border-subtle);
}

.privacy-title {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 2.6vw, 1.6rem);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.2;
    margin: 0;
}

.privacy-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    color: var(--text-main);
    cursor: pointer;
    transition: var(--transition-fast);
    touch-action: manipulation;
}

.privacy-close:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.privacy-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Keeps a flick at the end of the document from scrolling the page behind. */
    overscroll-behavior: contain;
    padding: 2rem clamp(1.25rem, 5vw, 3rem) 3rem;
}

.privacy-content {
    max-width: 900px;
    margin: 0 auto;
}

/* The document runs to fifteen numbered sections, so the headings use the body
   face rather than the display font the rest of the site gives h3/h4 — a page of
   uppercase Audiowide subheads is unreadable at this length. */
.privacy-content h3 {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: none;
    letter-spacing: 0.3px;
    margin: 2.4rem 0 0.9rem;
}

.privacy-content h4 {
    font-family: var(--font-body);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-main);
    text-transform: none;
    letter-spacing: 0.2px;
    margin: 1.6rem 0 0.6rem;
}

.privacy-content p {
    font-size: 1.02rem;
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 1.05rem;
}

/* site.css resets ul to list-style: none for the nav and footer lists. */
.privacy-content ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0 0 1.4rem;
}

.privacy-content li {
    font-size: 1.02rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 0.4rem;
}

.privacy-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.privacy-content a:hover {
    color: var(--text-main);
}

.privacy-meta {
    padding-bottom: 1.4rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 600;
    color: var(--text-main) !important;
}

/* Closing identification block. Mirrors .privacy-meta at the head of the
   document, with the rule above it rather than below. */
.privacy-signoff {
    padding-top: 1.6rem;
    margin-top: 2.6rem;
    border-top: 1px solid var(--border-subtle);
    font-weight: 600;
    color: var(--text-main) !important;
}

@media (max-width: 768px) {
    .privacy-head {
        padding: 1.1rem 1.25rem;
    }

    .privacy-body {
        padding: 1.5rem 1.25rem 2.5rem;
    }

    .privacy-content h3 {
        font-size: 1.08rem;
        margin-top: 2rem;
    }
}

/* --- NAV DRAWER ---
   Kept on its own breakpoint rather than folded into the tablet block below.
   The horizontal bar needs ~1186px to lay out (295px logo + 771px of links,
   inside nav's 5% side padding). It used to stay horizontal down to 1024px, so
   everything from 1025-1185px overflowed and body's overflow-x: hidden clipped
   the tail off in silence — at 1025px the EN toggle was cut off completely.
   Hand over to the drawer while the bar still fits, with margin to spare. */
@media (max-width: 1200px) {
    .mobile-menu-btn {
        display: flex;
        min-width: 56px;
        min-height: 56px;
    }

    .mobile-menu-btn svg {
        width: 32px;
        height: 32px;
    }

    .nav-links {
        display: flex;
        position: fixed;
        top: 0;
        right: -100%;
        width: min(320px, 85vw);
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background-color: rgba(10, 10, 10, 0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-left: 1px solid var(--border-subtle);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 1.6rem;
        padding: calc(var(--nav-height) + 1.5rem) 1.5rem 2.5rem 1.5rem;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
        z-index: 1050;
        /* Keeps the closed drawer out of the tab order. Without this a keyboard
           user tabs through five links that are off-screen and invisible. */
        visibility: hidden;
    }

    .nav-links.active {
        right: 0;
        visibility: visible;
    }

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links a {
        font-size: 1.15rem;
        display: block;
        padding: 0.75rem;
        letter-spacing: 2px;
    }

    .nav-cta {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        padding: 0.9rem 1.5rem !important;
    }
}

/* --- TABLET --- */
@media (max-width: 1024px) {
    :root {
        --nav-height: 116px;
    }

    .footer-logo-img {
        height: 112px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    :root {
        --nav-height: 100px;
    }

    h2 {
        font-size: 1.89rem;
        margin-bottom: 1.5rem;
    }

    .footer-logo-img {
        height: 94px;
    }

    .footer-grid {
        gap: 30px;
        text-align: center;
    }

    /* The whole footer centres on mobile, so undo the desktop left-alignment. */
    .footer-logo,
    .footer-description {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-column-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-contact-info {
        text-align: center;
    }

    .footer-contact-item {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

/* --- SMALL MOBILE --- */
@media (max-width: 480px) {
    :root {
        --nav-height: 88px;
    }

    .footer-description {
        font-size: 1.15rem;
    }

    .footer-column-title {
        font-size: 1.3rem;
    }

    .nav-links a {
        font-size: 1.05rem;
        padding: 0.6rem;
    }

    .cta-box {
        padding: 2.5rem 1.25rem;
    }

    .cta-box h3 {
        font-size: 1.44rem;
    }

    .cta-box .btn {
        font-size: 1.2rem;
        padding: 1rem 2rem;
        width: 100%;
    }
}

/* --- ACCESSIBILITY: Reduced Motion --- */
/* JS-driven motion (counters, the globe) is gated separately in motion.js — CSS
   alone cannot reach a requestAnimationFrame loop. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }
}