/* IOV website stylesheet — no build step, no framework. Replaces the
   orphaned Tailwind output (assets/app-...css, compiled with tooling that
   no longer exists in this repo). Inspired by rijksoverheid.nl / belgium.be:
   sans-serif, one accent colour, generous whitespace, no decoration. */

:root {
    --iov-primary: #2563eb;
    --iov-primary-dark: #1d4ed8;
    --iov-text: #1f2933;
    --iov-text-muted: #5a6470;
    --iov-border: #e0e4e8;
    --iov-bg-soft: #f7f8fa;
    --iov-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--iov-font);
    color: var(--iov-text);
    line-height: 1.5;
}
a { color: var(--iov-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ── Skip link (WCAG) ── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--iov-primary);
    color: #fff;
    padding: 0.75em 1.25em;
    z-index: 1000;
}
.skip-link:focus { left: 0; }

/* ── Header / nav ── */
.site-header { border-bottom: 1px solid var(--iov-border); }
.site-header-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0.9em 1.5em;
    display: flex;
    align-items: center;
    gap: 1.5em;
}
.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { display: block; height: 40px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 0.25em; flex-wrap: wrap; flex: 1; }
.nav-link {
    padding: 0.5em 0.6em;
    white-space: nowrap;
    border-radius: 6px;
    color: var(--iov-text);
    font-weight: 500;
    font-size: 0.95em;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.nav-link:hover { background: var(--iov-bg-soft); text-decoration: none; }
.nav-link-active { color: var(--iov-primary); }

.nav-dropdown { position: relative; }
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.3em;
    background: #fff;
    border: 1px solid var(--iov-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    min-width: 220px;
    padding: 0.4em;
    z-index: 20;
}
.dropdown-item {
    display: block;
    padding: 0.6em 0.8em;
    border-radius: 6px;
    color: var(--iov-text);
    font-size: 0.92em;
}
.dropdown-item:hover { background: var(--iov-bg-soft); text-decoration: none; }

.site-header-actions { display: flex; gap: 0.6em; flex-shrink: 0; }

.mobile-menu-btn {
    display: none;
    border: none;
    background: var(--iov-bg-soft);
    border-radius: 8px;
    padding: 0.5em 0.75em;
    font-size: 1.1em;
    cursor: pointer;
}
.mobile-menu {
    display: none;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease-in-out;
    overflow: hidden;
    border-top: 1px solid var(--iov-border);
}
.mobile-menu > nav { overflow: hidden; }
.mobile-nav-link {
    display: block;
    padding: 0.8em 1.5em;
    color: var(--iov-text);
    font-weight: 500;
}
.mobile-nav-link:hover { background: var(--iov-bg-soft); text-decoration: none; }
.mobile-nav-sub { padding-left: 2.5em; font-weight: 400; color: var(--iov-text-muted); }
.mobile-nav-divider { border-top: 1px solid var(--iov-border); margin: 0.4em 0; }

@media (max-width: 860px) {
    .site-nav, .site-header-actions { display: none; }
    .mobile-menu-btn { display: block; margin-left: auto; }
    .mobile-menu { display: grid; }
}

/* ── Buttons (shared by header + page CTAs) ── */
.cta-btn {
    display: inline-block;
    padding: 0.6em 1.3em;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    font-size: 0.92em;
    white-space: nowrap;
}
.cta-btn-primary { background: var(--iov-primary); color: #fff; }
.cta-btn-primary:hover { background: var(--iov-primary-dark); text-decoration: none; }
.cta-btn-outline { border-color: var(--iov-border); color: var(--iov-text); }
.cta-btn-outline:hover { background: var(--iov-bg-soft); text-decoration: none; }

/* ── Footer ── */
.site-footer { border-top: 1px solid var(--iov-border); margin-top: 3em; }
.site-footer-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0.9em 1.5em;
    display: flex;
    align-items: center;
    gap: 1.5em;
    flex-wrap: wrap;
}
.site-footer-inner .site-logo img { height: 28px; opacity: 0.75; }
.site-footer-nav { display: flex; gap: 1.25em; flex-wrap: wrap; }
.site-footer-nav a { color: var(--iov-text-muted); font-size: 0.9em; }
.site-footer-copy { color: var(--iov-text-muted); font-size: 0.85em; margin: 0 0 0 auto; }

/* ── Generic page shell ── */
main { max-width: 960px; margin: 0 auto; padding: 2em 1.5em 0; }

/* ── Text pages (about/contact/international law) ── */
.text-page { padding: 2.5em 0 4em; }
.text-page h1 { font-size: 2em; margin: 0 0 1.25em; }
.prose { max-width: 42em; font-size: 1.02em; }
.prose p { margin: 0 0 1.1em; }
.prose h2 { font-size: 1.3em; margin: 1.75em 0 0.75em; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.prose li { margin-bottom: 0.4em; }

/* ── Home page ── */
.hero-image-full {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    object-position: center;
}
.hero { text-align: center; padding: 0 0 3em; }
.hero h1 { font-size: 2.25em; font-weight: 700; margin: 0 0 0.5em; }
.hero-sub { font-size: 1.1em; color: var(--iov-text-muted); max-width: 38em; margin: 0 auto 1.75em; }
.hero-actions { display: flex; gap: 0.75em; justify-content: center; flex-wrap: wrap; }
.hero-actions .cta-btn { padding: 0.7em 1.5em; font-size: 1em; }

.cards-section { padding: 3em 0; border-top: 1px solid var(--iov-border); }
.cards-section h2 { text-align: center; font-size: 1.5em; margin: 0 0 2em; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5em; }
.info-card { border: 1px solid var(--iov-border); border-radius: 8px; padding: 1.5em; }
.info-card-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.8em; height: 1.8em; border-radius: 50%;
    background: var(--iov-primary); color: #fff; font-weight: 700; font-size: 0.9em;
    margin-bottom: 0.75em;
}
.info-card h3 { margin: 0 0 0.5em; font-size: 1.05em; }
.info-card p { margin: 0; color: var(--iov-text-muted); font-size: 0.94em; }

.cta-section { text-align: center; padding: 3em 0 4em; border-top: 1px solid var(--iov-border); }
.cta-section h2 { font-size: 1.4em; margin: 0 0 0.5em; }
.cta-section p { color: var(--iov-text-muted); margin: 0 0 1.5em; }

/* ── Widget embed pages (sign-in / register) ── */
.widget-embed-page { padding: 2.5em 0 4em; }
.widget-embed-full { width: 100%; }
.widget-embed-full iframe { width: 100%; border: 0; display: block; min-height: 400px; }
.text-muted { color: var(--iov-text-muted); }

/* ── Social sharing row ── */
.share-row {
    display: flex; align-items: center; gap: 1em;
    margin-top: 2.5em; padding-top: 1.5em;
    border-top: 1px solid var(--iov-border);
    flex-wrap: wrap;
}
.share-label { font-size: 0.95em; font-weight: 600; color: var(--iov-text-muted); white-space: nowrap; }
.share-icons { display: flex; align-items: center; gap: 0.6em; list-style: none; margin: 0; padding: 0; }
.share-btn {
    display: flex; align-items: center; justify-content: center;
    width: 2.5em; height: 2.5em; border-radius: 50%;
    border: 1px solid var(--iov-border); color: var(--iov-text-muted);
    text-decoration: none; transition: border-color 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.share-btn:hover { border-color: var(--iov-primary); color: var(--iov-primary); background: #eff6ff; }
.share-btn svg { width: 1em; height: 1em; display: block; fill: currentColor; }

@media (max-width: 600px) {
    .hero { padding: 2.5em 0 2em; }
    .hero h1 { font-size: 1.7em; }
    .share-row { gap: 0.75em; }
}