/* A consistent offset for native anchors and links from other pages. */
html {
    scroll-padding-top: calc(var(--anchor-header-height, 80px) + 16px);
    scroll-behavior: smooth;
}

.nav-links a.btn-primary,
.page-content a.btn-primary { color: #fff; }

.navbar .logo,
.navbar .menu-toggle,
.navbar .lang-switcher { flex-shrink: 0; }

/* Leave enough space for translated labels and the language selector. */
@media (max-width: 1024px) {
    .navbar .menu-toggle { display: block; }
    .navbar .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 16px 24px;
        margin: 0;
        background: #fff;
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        max-height: calc(100dvh - var(--navigation-height, 80px) - 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .navbar .nav-links.open { display: flex; }
    .navbar .nav-links a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 12px;
    }
}

@media (max-width: 360px) {
    .navbar .nav-content { padding-left: 16px; padding-right: 16px; }
    .navbar .lang-switcher { margin-right: 0; gap: 2px; }
    .navbar .lang-switcher-btn { padding: 6px; }
}

/* Long translated copy must not widen the page or the anchor destinations. */
.page-hero,
.page-content,
.hero-text,
.category-card { overflow-wrap: anywhere; }

.hero-content > * { min-width: 0; }
.hero-badge { max-width: 100%; }
.hero-badge .dot { flex-shrink: 0; }
.hero-stats { flex-wrap: wrap; }
.hero-cta .btn { max-width: 100%; }

@media (max-width: 640px) {
    .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .category-card { min-width: 0; padding: 20px 12px; }
    .card-grid { grid-template-columns: minmax(0, 1fr); }
}

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

/* Discreet administrator entry, with a visible keyboard focus state. */
.footer .footer-analytics {
    display: inline-block;
    margin-top: 4px;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}
.footer .footer-analytics:hover { color: #fff; text-decoration: underline; }
.footer .footer-analytics:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }