/*
 * TDU NRW public website — brand alignment with https://tdu-nrw.de/de/startseite/
 * (docs/progress.md Faz 37.2 homepage). Colors/typography match the organization's own
 * site; layout/markup is this project's own (not a copy of their WordPress/Elementor
 * theme markup). Fonts are self-hosted (public/assets/vendor/fonts/) rather than linked
 * from Google Fonts — the nginx CSP for this vhost is `style-src 'self'`/no font-src
 * override, so an external font host would be silently blocked.
 */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/vendor/fonts/poppins-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/vendor/fonts/poppins-600-latinext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/vendor/fonts/poppins-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/vendor/fonts/poppins-700-latinext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/assets/vendor/fonts/poppins-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/assets/vendor/fonts/poppins-800-latinext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/vendor/fonts/roboto-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/vendor/fonts/roboto-var-latinext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF;
}

:root {
    --tdu-navy: #1f425d;
    --tdu-navy-dark: #16303f;
    --tdu-teal: #4ab9cf;
    --tdu-teal-dark: #2c98ba;
    --tdu-teal-tint: #eaf6f9;
    --tdu-gray-tint: #f6f6f6;
    --tdu-text: #4a5a63;
    --tdu-font-heading: 'Poppins', 'Segoe UI', sans-serif;
    --tdu-font-body: 'Roboto', 'Segoe UI', sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--tdu-font-body);
    color: var(--tdu-text);
}

main {
    flex: 1;
}

h1, h2, h3, h4, h5, h6,
.tdu-brand {
    font-family: var(--tdu-font-heading);
    color: var(--tdu-navy);
}

a {
    color: var(--tdu-teal-dark);
}

/* ---------- Top info bar ---------- */

.tdu-topbar {
    background: var(--tdu-teal-tint);
    border-bottom: 1px solid #dcecf0;
    font-size: .85rem;
}

.tdu-topbar a {
    color: var(--tdu-navy);
    text-decoration: none;
}

.tdu-topbar .fa-solid,
.tdu-topbar .fa-regular {
    color: var(--tdu-teal-dark);
    width: 1.1em;
}

/* ---------- Main navbar ---------- */

.tdu-navbar {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(31, 66, 93, .08);
}

.tdu-navbar .navbar-brand {
    font-family: var(--tdu-font-heading);
    font-weight: 800;
    color: var(--tdu-navy);
    letter-spacing: .01em;
}

.tdu-navbar .btn-outline-tdu {
    border: 1px solid var(--tdu-navy);
    color: var(--tdu-navy);
}

.tdu-navbar .btn-outline-tdu:hover {
    background: var(--tdu-navy);
    color: #fff;
}

.btn-tdu {
    background: var(--tdu-teal);
    border-color: var(--tdu-teal);
    color: #fff;
    font-weight: 500;
}

.btn-tdu:hover,
.btn-tdu:focus {
    background: var(--tdu-teal-dark);
    border-color: var(--tdu-teal-dark);
    color: #fff;
}

.btn-tdu-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .7);
    color: #fff;
    font-weight: 500;
}

.btn-tdu-outline:hover {
    background: rgba(255, 255, 255, .15);
    border-color: #fff;
    color: #fff;
}

/* ---------- Nav menu / dropdowns ---------- */

.tdu-navbar .navbar-toggler {
    border-color: rgba(31, 66, 93, .2);
}

.tdu-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(74, 185, 207, .35);
}

.tdu-navbar .navbar-nav .nav-link {
    color: var(--tdu-navy);
    font-weight: 500;
    padding: .5rem 1rem;
}

.tdu-navbar .navbar-nav .nav-link:hover,
.tdu-navbar .navbar-nav .nav-link:focus,
.tdu-navbar .navbar-nav .show > .nav-link {
    color: var(--tdu-teal-dark);
}

.tdu-navbar .navbar-nav .nav-link.disabled {
    color: #b7c1c6;
    pointer-events: none;
}

.tdu-navbar .dropdown-menu {
    border: 1px solid #e7eef1;
    border-radius: .5rem;
    box-shadow: 0 10px 24px rgba(31, 66, 93, .12);
}

.tdu-navbar .dropdown-item {
    font-size: .9rem;
    color: var(--tdu-navy);
}

.tdu-navbar .dropdown-item:hover,
.tdu-navbar .dropdown-item:focus {
    background: var(--tdu-teal-tint);
    color: var(--tdu-navy);
}

.tdu-navbar .dropdown-item.disabled {
    color: #b7c1c6;
    pointer-events: none;
}

.tdu-navbar .nav-link .badge,
.tdu-navbar .dropdown-item .badge {
    font-size: .65rem;
    font-weight: 500;
    vertical-align: middle;
}

/* ---------- Sections ---------- */

.tdu-section {
    padding: 4rem 0;
}

/* Neutral gray for alternating section backgrounds (matches the real site's
   #F6F6F6/#F8F8F8 usage); teal-tint stays reserved for branded accent blocks
   (topbar, badges, benefit cards) below — the two are not interchangeable. */
.tdu-section-alt {
    background: var(--tdu-gray-tint);
}

.tdu-eyebrow {
    display: inline-block;
    font-family: var(--tdu-font-body);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tdu-teal-dark);
    border-left: 3px solid var(--tdu-teal);
    padding-left: .6rem;
    margin-bottom: .5rem;
}

.tdu-section-title {
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.tdu-section-title .fa-solid,
.tdu-section-title .fa-regular {
    color: var(--tdu-teal);
    margin-right: .5rem;
}

/* ---------- Hero ---------- */

.tdu-hero {
    position: relative;
    /* §7.1 QA finding: the real site's hero uses a photo background (business/globe
       imagery, docs/reference/tdu-nrw-original/images/Adsiz-tasarim-...593.png — the
       exact source, no logos/identifiable people, safe to reuse), not a flat gradient.
       Same navy/teal gradient kept as a semi-transparent overlay on top so hero text
       stays legible/on-brand while showing the real photo underneath. */
    background:
        linear-gradient(120deg, rgba(22, 48, 63, .88), rgba(31, 66, 93, .82) 60%, rgba(53, 160, 182, .75)),
        url('/assets/images/site/hero-background.webp');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 6rem 0 7rem;
    overflow: hidden;
}

.tdu-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .12) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    opacity: .5;
    pointer-events: none;
}

.tdu-hero .container {
    position: relative;
}

.tdu-hero h1 {
    color: #fff;
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.25rem);
    max-width: 40rem;
}

.tdu-hero p.lead {
    color: rgba(255, 255, 255, .85);
    max-width: 34rem;
    font-size: 1.15rem;
}

/* ---------- Introduction ---------- */

.tdu-about-figure {
    background: var(--tdu-navy);
    border-radius: .5rem;
    color: #fff;
    padding: 2rem;
    text-align: center;
}

.tdu-about-figure .tdu-stat {
    font-family: var(--tdu-font-heading);
    font-weight: 800;
    font-size: 3rem;
    color: var(--tdu-teal);
    line-height: 1;
}

/* ---------- Cards ---------- */

.tdu-card {
    background: #fff;
    border: 1px solid #e7eef1;
    border-radius: .6rem;
    box-shadow: 0 4px 16px rgba(31, 66, 93, .06);
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}

.tdu-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(31, 66, 93, .12);
}

.tdu-card .card-title {
    font-family: var(--tdu-font-heading);
    font-weight: 600;
    color: var(--tdu-navy);
}

.tdu-card .badge {
    background: var(--tdu-teal-tint);
    color: var(--tdu-navy);
    font-weight: 500;
}

/* ---------- Membership benefits ---------- */

.tdu-benefit {
    background: var(--tdu-teal-tint);
    border-radius: .5rem;
    padding: 1.1rem 1.25rem;
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.tdu-benefit .fa-solid {
    color: var(--tdu-teal-dark);
    font-size: 1.1rem;
    margin-top: .15rem;
}

.tdu-benefit span {
    font-weight: 500;
    color: var(--tdu-navy);
}

/* ---------- Contact CTA ---------- */

.tdu-cta {
    background: linear-gradient(120deg, var(--tdu-navy-dark), var(--tdu-navy));
    color: #fff;
    border-radius: .75rem;
    padding: 3rem 2rem;
}

.tdu-cta h2 {
    color: #fff;
}

.tdu-cta p {
    color: rgba(255, 255, 255, .8);
}

/* ---------- Generic content pages (site/page.php + reused by contact/event detail) ---------- */

.tdu-page-hero {
    background: var(--tdu-navy);
    padding: 3rem 0;
}

.tdu-page-hero h1 {
    color: #fff;
    font-weight: 800;
    margin: 0;
}

.tdu-page-body {
    font-family: var(--tdu-font-body);
    color: var(--tdu-text);
    line-height: 1.75;
}

.tdu-page-body h2 {
    font-size: 1.4rem;
    margin-top: 2rem;
}

.tdu-page-body h2:first-child {
    margin-top: 0;
}

.tdu-page-body ul {
    padding-left: 1.25rem;
}

.tdu-page-body li {
    margin-bottom: .4rem;
}

.tdu-page-body img {
    max-width: 100%;
    height: auto;
    border-radius: .5rem;
}

/* ---------- Homepage-only static blocks (§3.1 — stats/logos) ---------- */

.tdu-stat-hero-number {
    display: block;
    font-family: var(--tdu-font-heading);
    font-weight: 800;
    font-size: 4.5rem;
    color: var(--tdu-teal-dark);
    line-height: 1;
}

.tdu-stat-hero-label {
    display: block;
    font-family: var(--tdu-font-body);
    color: var(--tdu-text);
    font-size: 1.1rem;
    margin-top: .5rem;
}

.tdu-logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
}

.tdu-logo-grid-item img {
    height: 64px;
    width: 64px;
    object-fit: contain;
    opacity: .8;
    transition: opacity .15s ease;
}

.tdu-logo-grid-item img:hover {
    opacity: 1;
}

/* ---------- Board grid (used inside a CMS page body — see 'board' page seed) ---------- */

.tdu-board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.tdu-board-member {
    text-align: center;
}

.tdu-board-member img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: .75rem;
}

.tdu-board-member h3 {
    font-family: var(--tdu-font-heading);
    font-size: 1rem;
    color: var(--tdu-navy);
    margin: 0;
}

.tdu-board-member p {
    font-size: .8rem;
    color: var(--tdu-teal-dark);
    margin: .2rem 0 0;
}

/* ---------- Footer ---------- */

.tdu-footer {
    background: var(--tdu-navy-dark);
    color: rgba(255, 255, 255, .75);
}

.tdu-footer h6 {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .06em;
}

.tdu-footer a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
}

.tdu-footer a:hover {
    color: var(--tdu-teal);
}

.tdu-footer .fa-solid,
.tdu-footer .fa-brands {
    color: var(--tdu-teal);
}

.tdu-footer-bottom {
    background: #12242f;
    font-size: .85rem;
}

/* ---------- Small layout utilities (§7.4.3 CSP audit — style-src 'self' has no
   'unsafe-inline', so any style="" attribute is silently dropped by the browser;
   these replace ones found on both new and pre-existing Faz 37 pages) ---------- */

.tdu-container-narrow {
    max-width: 480px;
}

.tdu-icon-lg {
    font-size: 3rem;
}

.tdu-card-narrow {
    max-width: 420px;
}

.tdu-activity-icon {
    color: var(--tdu-teal-dark);
}

.tdu-kkh-logo {
    max-width: 160px;
}

.tdu-card-medium {
    max-width: 640px;
}

.tdu-chat-bubble {
    max-width: 70%;
}