/* ===== Policy pages (/terms, /policy, /cookies) ===== */

/* The homepage reveals the navbar logo via a scroll handler that policy pages
   do not have, so keep it permanently visible here. It stays absolutely
   positioned (out of flow) so the bar keeps the homepage's 71px height.
   Pinned with an explicit top instead of a negative margin, so it does not
   depend on the browser's resolved static position. */
.policy-page .main-navbar .navbar-logo {
    top: 10px;
    margin-top: 0;
    opacity: 1;
    visibility: visible;
}

/* Home link shown only where the navbar is hidden (below lg) */
.policy-home {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1rem;
}

.policy-home-logo {
    height: 46px;
    width: auto;
    filter: brightness(0) invert(1);
    transition: transform var(--transition), opacity var(--transition);
}

.policy-home:hover .policy-home-logo {
    transform: translateY(-2px);
    opacity: 0.85;
}

.policy-wrap {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding: 7.5rem 1.25rem 4rem;
}

/* Reuse the homepage gradient, but anchored to the viewport so it covers the
   full width (the panel is only 880px) and stays aligned with the fixed
   background photo. The homepage gradient runs light-at-top, which is the
   wrong way round here: the policy text starts at the very top of the page,
   so this one is darkest at the top and eases off downwards. */
.policy-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(var(--color-dark-rgb), 0.72) 0%,
        rgba(var(--color-dark-rgb), 0.64) 45%,
        rgba(var(--color-dark-rgb), 0.52) 100%
    );
}

/* Keep the footer and its links above the fixed overlay */
.policy-page .site-footer {
    position: relative;
    z-index: 2;
}

.policy-panel {
    position: relative;
    z-index: 2;
    background: rgba(var(--color-dark-rgb), 0.42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2.75rem 2.75rem;
}

/* ===== Header + language toggle ===== */

.policy-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.policy-title {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fff;
    margin: 0;
}

.policy-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--color-accent);
    margin-top: 0.75rem;
}

.lang-toggle {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}

.lang-toggle button {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.45rem 1.15rem;
    cursor: pointer;
    transition: all var(--transition);
}

.lang-toggle button:hover {
    color: var(--color-text);
}

.lang-toggle button.active {
    background: var(--color-accent);
    color: var(--color-dark);
    font-weight: 600;
}

/* ===== Language visibility ===== */

body.lang-nl .p-en,
body.lang-en .p-nl {
    display: none !important;
}

/* ===== Content ===== */

.policy-panel h1 {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 500;
    color: #fff;
    margin: 0 0 1.5rem;
}

.policy-panel h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-accent);
    margin: 2.25rem 0 0.6rem;
}

.policy-panel p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--color-text);
    margin-bottom: 0.9rem;
}

.policy-panel u {
    color: var(--color-text);
    text-decoration-color: var(--color-accent);
    text-underline-offset: 3px;
}

.policy-panel a:not(.policy-nav-link) {
    color: var(--color-accent);
    text-decoration: none;
    word-break: break-word;
}

.policy-panel a:not(.policy-nav-link):hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.policy-domain {
    color: var(--color-text);
    font-weight: 500;
}

/* ===== Cookie tables ===== */

.cookie-table-wrap {
    overflow-x: auto;
    margin: 1.25rem 0 2rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.policy-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.88rem;
    color: var(--color-text);
}

.policy-table thead th {
    background: rgba(255, 255, 255, 0.06);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    padding: 0.8rem 1rem;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.policy-table tbody td {
    padding: 0.8rem 1rem;
    line-height: 1.6;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.policy-table tbody tr:last-child td {
    border-bottom: 0;
}

.policy-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.policy-table td:first-child {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    color: #fff;
    white-space: nowrap;
}

/* ===== Cross navigation ===== */

.policy-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.policy-nav-link {
    display: inline-block;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    transition: all var(--transition);
}

.policy-nav-link:hover {
    color: var(--color-dark);
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.policy-nav-link.active {
    color: var(--color-dark);
    background: var(--color-accent);
    border-color: var(--color-accent);
    font-weight: 600;
}

.policy-updated {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 1.25rem;
}

/* ===== Responsive ===== */

/* Below lg the top navbar is hidden (site-wide) and the mobile bottom bar takes over */
@media (max-width: 991.98px) {
    .policy-wrap {
        padding: 2rem 1rem 3rem;
    }
}

@media (max-width: 767.98px) {
    .policy-wrap {
        padding: 1.5rem 0.85rem 2.5rem;
    }

    .policy-panel {
        padding: 1.75rem 1.35rem 2rem;
        border-radius: var(--radius-md);
    }

    .policy-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .policy-title {
        font-size: 1.7rem;
    }
}