/**
 * TVK Basketball – Layout
 * TVK-Layout und Styling, aktuell bis Phase 7.2.
 */

:root {
    --tvk-black: rgb(0 0 0);
    --tvk-dark: rgb(20 60 20);
    --tvk-green: rgb(75 160 45);
    --tvk-brown: rgb(135 100 90);
    --tvk-taupe: rgb(165 130 115);
    --tvk-orange: rgb(205 95 15);
    --tvk-gold: rgb(235 125 40);
    --tvk-beige: rgb(235 205 165);
    --tvk-white: rgb(255 255 255);
}

/* Header / Navigation */
.tvk-site-header {
    --bs-navbar-color: var(--tvk-white);
    --bs-navbar-hover-color: var(--tvk-white);
    --bs-navbar-active-color: var(--tvk-white);
    --bs-navbar-brand-color: var(--tvk-white);
    --bs-navbar-brand-hover-color: var(--tvk-white);
    background-color: var(--tvk-dark);
    color: var(--tvk-white);
}

/* Bootscore gibt der Navbar eine eigene Hintergrundfarbe.
 * Header und Navbar bilden beim TVK bewusst eine durchgehende Fläche. */
.tvk-site-header .navbar {
    background-color: var(--tvk-dark);
}

.tvk-site-header .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

.tvk-site-header .navbar-nav .nav-link,
.tvk-site-header .navbar-brand,
.tvk-site-header .navbar-toggler,
.tvk-site-header .btn {
    color: var(--tvk-white);
}

.tvk-site-header .navbar-nav .nav-link {
    font-family: "Oswald", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.tvk-site-header .navbar-nav .nav-link:hover,
.tvk-site-header .navbar-nav .nav-link:focus,
.tvk-site-header .navbar-nav .current-menu-item > .nav-link,
.tvk-site-header .navbar-nav .current-menu-ancestor > .nav-link {
    color: var(--tvk-white);
    background-color: var(--tvk-orange);
}

.tvk-site-header .dropdown-menu {
    --bs-dropdown-bg: var(--tvk-white);
    --bs-dropdown-color: var(--tvk-black);
    --bs-dropdown-link-color: var(--tvk-black);
    --bs-dropdown-link-hover-color: var(--tvk-white);
    --bs-dropdown-link-hover-bg: var(--tvk-dark);
    --bs-dropdown-link-active-color: var(--tvk-white);
    --bs-dropdown-link-active-bg: var(--tvk-dark);
    background-color: var(--tvk-white);
    color: var(--tvk-black);
    border-radius: 0;
    border-color: var(--tvk-beige);
}

.tvk-site-header .dropdown-item {
    color: var(--tvk-black);
}

.tvk-site-header .dropdown-item:hover,
.tvk-site-header .dropdown-item:focus,
.tvk-site-header .dropdown-item.active,
.tvk-site-header .dropdown-item:active {
    color: var(--tvk-white);
    background-color: var(--tvk-dark);
}

.tvk-header-widget-area {
    background-color: var(--tvk-beige);
    color: var(--tvk-dark);
}

.tvk-header-widget-area a {
    color: var(--tvk-dark);
}

.tvk-header-widget-area a:hover,
.tvk-header-widget-area a:focus {
    color: var(--tvk-orange);
}

.tvk-header-widget-area .widget:last-child {
    margin-bottom: 0;
}

/* Footer */
.tvk-footer-top,
.tvk-footer-columns,
.tvk-footer-info {
    background-color: var(--tvk-white);
    color: var(--tvk-black);
}

.tvk-footer-top *,
.tvk-footer-columns *,
.tvk-footer-info * {
    color: inherit;
}

.tvk-footer-top a,
.tvk-footer-columns a,
.tvk-footer-info a {
    color: var(--tvk-black);
}

.tvk-footer-top a:hover,
.tvk-footer-columns a:hover,
.tvk-footer-info a:hover,
.tvk-footer-top a:focus,
.tvk-footer-columns a:focus,
.tvk-footer-info a:focus {
    color: var(--tvk-orange);
}

/* Die drei Bootscore-Footerbereiche gleichmäßig über die Breite verteilen. */
@media (min-width: 768px) {
    .tvk-footer-columns .row > [class*="col"] {
        flex: 0 0 33.333333%;
        width: 33.333333%;
        max-width: 33.333333%;
    }
}

@media (max-width: 1199.98px) {
    .tvk-site-header .offcanvas,
    .tvk-site-header .offcanvas-body,
    .tvk-site-header .offcanvas-header {
        background-color: var(--tvk-dark);
        color: var(--tvk-white);
    }

    .tvk-site-header .offcanvas .navbar-nav .nav-link {
        display: block;
    }
}

/* Allgemeines TVK-Layout */
body {
    background-color: var(--tvk-white);
    color: var(--tvk-black);
}

a {
    color: var(--tvk-dark);
    text-decoration: none;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):hover,
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):focus-visible {
    color: var(--tvk-orange);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

.btn-primary {
    --bs-btn-bg: var(--tvk-dark);
    --bs-btn-border-color: var(--tvk-dark);
    --bs-btn-hover-bg: var(--tvk-orange);
    --bs-btn-hover-border-color: var(--tvk-orange);
    --bs-btn-active-bg: var(--tvk-orange);
    --bs-btn-active-border-color: var(--tvk-orange);
}

/* Inhaltsbereiche */
#content.site-content {
    padding-top: 1.125rem;
}

.entry-title,
.page-title {
    text-transform: none;
}

.post-thumbnail {
    float: left;
    margin-right: 1.25rem;
}

.post-thumbnail img {
    display: block;
}

.entry-content {
    overflow: hidden;
    margin-top: 0.5rem;
}

.entry-header {
    position: relative;
    overflow: hidden;
}

.entry-meta {
    margin-bottom: 0.3125rem;
}

/* Widgets */
.widget_nav_menu ul {
    padding-left: 1.25rem;
}

.widget_nav_menu ul li {
    list-style: disc;
    margin-bottom: 0.6rem;
}

.widget_nav_menu ul li::marker {
    color: var(--tvk-orange);
}

.widget_nav_menu ul li a {
    color: var(--tvk-brown);
}

.widget_nav_menu ul li a:hover,
.widget_nav_menu ul li a:focus {
    color: var(--tvk-orange);
}

/* Cards */
.card {
    --bs-card-bg: var(--tvk-white);
    --bs-card-color: var(--tvk-black);
    --bs-card-border-color: var(--tvk-beige);
    background-color: var(--tvk-white);
    color: var(--tvk-black);
    border-color: var(--tvk-beige);
}

.card .card-title,
.card .card-text {
    color: var(--tvk-black);
}

.card a:not(.btn) {
    color: var(--tvk-dark);
}

.card a:not(.btn):hover,
.card a:not(.btn):focus {
    color: var(--tvk-orange);
}

/* Phase 7.1 – Globales TVK-Styling */
html {
    scroll-behavior: smooth;
}

body {
    font-size: 1rem;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--tvk-dark);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

h1,
.h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
}

h2,
.h2 {
    font-size: clamp(1.6rem, 3vw, 2.15rem);
}

h3,
.h3 {
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}

p,
ul,
ol,
blockquote,
.table-responsive {
    margin-bottom: 1rem;
}

.entry-content > :last-child,
.widget > :last-child {
    margin-bottom: 0;
}

/* Textlinks bleiben ruhig und werden erst bei Hover/Fokus unterstrichen. */
.entry-content a:not(.btn):hover,
.entry-content a:not(.btn):focus-visible,
.widget a:not(.btn):hover,
.widget a:not(.btn):focus-visible {
    text-decoration-thickness: 0.12em;
}

hr {
    border-color: var(--tvk-beige);
    opacity: 1;
}

blockquote {
    padding: 0.75rem 1rem;
    border-left: 0.25rem solid var(--tvk-green);
    background-color: rgb(235 205 165 / 0.25);
}

.btn {
    border-radius: 0.25rem;
    font-weight: 600;
}

.btn-secondary {
    --bs-btn-color: var(--tvk-white);
    --bs-btn-bg: var(--tvk-brown);
    --bs-btn-border-color: var(--tvk-brown);
    --bs-btn-hover-color: var(--tvk-white);
    --bs-btn-hover-bg: var(--tvk-orange);
    --bs-btn-hover-border-color: var(--tvk-orange);
    --bs-btn-active-color: var(--tvk-white);
    --bs-btn-active-bg: var(--tvk-orange);
    --bs-btn-active-border-color: var(--tvk-orange);
}

.btn-outline-primary {
    --bs-btn-color: var(--tvk-dark);
    --bs-btn-border-color: var(--tvk-dark);
    --bs-btn-hover-color: var(--tvk-white);
    --bs-btn-hover-bg: var(--tvk-dark);
    --bs-btn-hover-border-color: var(--tvk-dark);
    --bs-btn-active-color: var(--tvk-white);
    --bs-btn-active-bg: var(--tvk-orange);
    --bs-btn-active-border-color: var(--tvk-orange);
}

.form-control,
.form-select {
    border-color: var(--tvk-taupe);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--tvk-green);
    box-shadow: 0 0 0 0.2rem rgb(75 160 45 / 0.2);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 0.2rem solid var(--tvk-gold);
    outline-offset: 0.15rem;
}

::selection {
    background-color: var(--tvk-beige);
    color: var(--tvk-black);
}

.entry-title,
.page-title {
    color: var(--tvk-dark);
    margin-bottom: 1rem;
}

.entry-meta {
    color: var(--tvk-brown);
    font-size: 0.925rem;
}

@media (max-width: 767.98px) {
    #content.site-content {
        padding-top: 0.875rem;
    }

    .post-thumbnail {
        float: none;
        margin: 0 0 1rem;
    }
}

/* Phase 7.2 – Header & Navigation */
.tvk-site-header .navbar {
    min-height: 4.75rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.tvk-site-header .navbar-brand {
    display: flex;
    align-items: center;
    margin-right: 1.5rem;
}

.tvk-site-header .navbar-brand img {
    width: auto;
    max-height: 3.5rem;
}

@media (min-width: 1200px) {
    .tvk-site-header .navbar-nav {
        align-items: stretch;
        gap: 0.125rem;
    }

    .tvk-site-header .navbar-nav > .menu-item > .nav-link {
        display: flex;
        align-items: center;
        min-height: 3rem;
        padding: 0.7rem 0.8rem;
        border-radius: 0.2rem;
        letter-spacing: 0.025em;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .tvk-site-header .dropdown-menu {
        min-width: 13rem;
        margin-top: 0.35rem;
        padding: 0.35rem 0;
        border-top: 0.2rem solid var(--tvk-orange);
        box-shadow: 0 0.5rem 1.25rem rgb(0 0 0 / 0.12);
    }

    .tvk-site-header .dropdown-item {
        padding: 0.55rem 1rem;
        font-size: 0.95rem;
        font-weight: 500;
    }
}

.tvk-site-header .navbar-toggler {
    padding: 0.45rem 0.6rem;
    border: 1px solid rgb(255 255 255 / 0.55);
    border-radius: 0.25rem;
}

.tvk-site-header .navbar-toggler:hover,
.tvk-site-header .navbar-toggler:focus-visible {
    background-color: var(--tvk-orange);
    border-color: var(--tvk-orange);
}

.tvk-site-header .navbar-toggler:focus {
    box-shadow: none;
}

@media (max-width: 1199.98px) {
    .tvk-site-header .navbar {
        min-height: 4.25rem;
    }

    .tvk-site-header .navbar-brand img {
        max-height: 3rem;
    }

    .tvk-site-header .offcanvas {
        --bs-offcanvas-width: min(22rem, 88vw);
        border-left: 1px solid rgb(255 255 255 / 0.16);
    }

    .tvk-site-header .offcanvas-header {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid rgb(255 255 255 / 0.16);
    }

    .tvk-site-header .offcanvas-body {
        padding: 0.75rem 1.25rem 1.5rem;
    }

    .tvk-site-header .offcanvas .navbar-nav {
        gap: 0.2rem;
    }

    .tvk-site-header .offcanvas .navbar-nav .nav-link {
        padding: 0.7rem 0.8rem;
        border-radius: 0.2rem;
        font-size: 1rem;
    }

    .tvk-site-header .offcanvas .dropdown-menu {
        margin: 0.25rem 0 0.5rem;
        padding: 0.25rem;
        border: 0;
        border-left: 0.2rem solid var(--tvk-orange);
        box-shadow: none;
    }

    .tvk-site-header .offcanvas .dropdown-item {
        padding: 0.55rem 0.75rem;
        white-space: normal;
    }
}

/* Phase 7.2.2 – TVK Basketball Custom Logo + kompakte Desktop-Navigation */
.tvk-site-header .navbar-brand {
    flex: 0 0 auto;
    margin-right: 1.25rem;
}

.tvk-site-header .navbar-brand img {
    width: auto;
    height: auto;
    max-width: 15rem;
    max-height: 4rem;
    object-fit: contain;
}

@media (min-width: 1200px) {
    .tvk-site-header .navbar-nav > .menu-item > .nav-link {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        white-space: nowrap;
    }
}

@media (max-width: 1199.98px) {
    .tvk-site-header .navbar-brand {
        margin-right: 0.75rem;
    }

    .tvk-site-header .navbar-brand img {
        max-width: 11rem;
        max-height: 3.25rem;
    }
}

/* Phase 7.5.1: Social-Media-Grafiken in Sidebar-Widgets kompakt halten. */
.widget_media_image img,
.widget .wp-block-social-links .wp-social-link {
    width: auto;
    max-width: 2.5rem;
    height: auto;
    max-height: 2.5rem;
}

.widget_media_image a {
    display: inline-block;
    margin: 0 0.4rem 0.4rem 0;
}

/* Phase 7.5.2: Navigationslisten in Sidebar-Widgets wieder als echte Aufzählung darstellen. */
.widget_nav_menu ul {
    list-style: disc outside;
    padding-left: 1.25rem;
}

.widget_nav_menu ul > li {
    display: list-item;
    list-style: disc outside;
}

.widget_nav_menu ul > li::marker {
    color: var(--tvk-dark);
}

/* Phase 7.5.2: Simple Social Icons verwendet SVG statt Bilddateien. */
.widget li[class^="ssi-"] svg,
.widget li[class*=" ssi-"] svg {
    width: 2rem;
    height: 2rem;
    max-width: 2rem;
    max-height: 2rem;
}

/* Phase 7.5.3: Sidebar-Menüs mit robusten, theme-unabhängigen Aufzählungspunkten. */
.widget_nav_menu .menu {
    list-style: none;
    padding-left: 0;
}

.widget_nav_menu .menu > li.menu-item {
    position: relative;
    display: block;
    list-style: none;
    padding-left: 1.15rem;
}

.widget_nav_menu .menu > li.menu-item::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--tvk-dark);
    font-weight: 700;
}

/* Phase 7.5.4: Spielpläne-Menü gezielt und unabhängig von Theme-Listenstilen markieren. */
.menu-spielplaene-container > ul.menu {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.menu-spielplaene-container > ul.menu > li.menu-item {
    position: relative;
    display: block;
    padding-left: 1.15rem;
    list-style: none;
}

.menu-spielplaene-container > ul.menu > li.menu-item::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--tvk-dark);
    font-weight: 700;
}

/* Phase 7.5.4: Simple Social Icons im Widget waagerecht nebeneinander. */
#simple-social-icons-2 > ul,
.widget_simple_social_icons > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#simple-social-icons-2 > ul > li,
.widget_simple_social_icons > ul > li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

#simple-social-icons-2 > ul > li::before,
.widget_simple_social_icons > ul > li::before {
    content: none;
}

/* Phase 7.5.5: Alle normalen WordPress-Menüs in Sidebar-Widgets erhalten TVK-Aufzählungspunkte. */
.widget .menu:not(:has(> li[class^="ssi-"])) {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.widget .menu:not(:has(> li[class^="ssi-"])) > li.menu-item {
    position: relative;
    display: block;
    padding-left: 1.15rem;
    list-style: none;
}

.widget .menu:not(:has(> li[class^="ssi-"])) > li.menu-item::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--tvk-dark);
    font-weight: 700;
}

/* Phase 7.5.5: Simple Social Icons unabhängig von der automatisch vergebenen Widget-ID horizontal. */
.widget ul:has(> li[class^="ssi-"]),
.widget ul:has(> li[class*=" ssi-"]) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.widget ul:has(> li[class^="ssi-"]) > li,
.widget ul:has(> li[class*=" ssi-"]) > li {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.widget ul:has(> li[class^="ssi-"]) > li::before,
.widget ul:has(> li[class*=" ssi-"]) > li::before {
    content: none;
}

.widget li[class^="ssi-"] > a,
.widget li[class*=" ssi-"] > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.widget li[class^="ssi-"] svg,
.widget li[class*=" ssi-"] svg {
    display: block;
    width: 2rem;
    height: 2rem;
    max-width: 2rem;
    max-height: 2rem;
}

/* Phase 7.5.8: Sidebar-Menüs – TVK-Pfeile statt runder Aufzählungspunkte. */
.widget .menu:not(:has(> li[class^="ssi-"])) > li.menu-item::before,
.menu-spielplaene-container > ul.menu > li.menu-item::before,
.menu-dbb-spielplaene-container > ul.menu > li.menu-item::before {
    content: ">";
    color: var(--tvk-orange);
    font-weight: 700;
}

/* Phase 7.5.8: TVK-Logo darf auf Desktop über die Navbar hinausragen. */
@media (min-width: 1200px) {
    .tvk-site-header .navbar {
        overflow: visible;
    }

    .tvk-site-header .navbar-brand {
        position: relative;
        z-index: 10;
        align-self: center;
        margin-top: -1rem;
        margin-bottom: -1rem;
    }

    .tvk-site-header .navbar-brand img {
        width: auto;
        height: auto;
        max-width: 18rem;
        max-height: 6.5rem;
        object-fit: contain;
    }
}