@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* SV09 Loverich-Floverich — Marine Blue & White
/*------------------------*/

:root {
    --textDarker: #0a1833;                  /* deep navy — headings, dark header bg */
    --textDark: rgba(10, 24, 51, 1);        /* deep navy — body text */
    --textMedium: rgba(10, 24, 51, 0.65);   /* medium navy — secondary text */
    --borderMedium: rgba(10, 24, 51, 0.2);
    --borderLight: rgba(10, 24, 51, 0.08);
    --accent: #003080;                      /* marine blue — buttons, links, highlights */
    --accentDarker: #002060;                /* darker marine blue — hover states */
    --light: rgba(0, 48, 128, 0.06);        /* faint blue tint — card backgrounds */
}

img { filter: grayscale(0); }

/* White logo on dark footer background */
footer.dark a.logo img { filter: brightness(0) invert(1); }

.colorize_image { filter: contrast(1) sepia(1) hue-rotate(195deg) grayscale(0.6) !important; }
.map:not(section)::after, .black_2_textDark { filter: contrast(0.7) sepia(1) hue-rotate(195deg) !important; }
.black_2_textMedium { filter: contrast(0.3) sepia(0.3) hue-rotate(195deg) brightness(1.4) !important; }
.black_2_accent { filter: contrast(0.15) sepia(1) hue-rotate(195deg) contrast(10) !important; }

/*------------------------*/
/* Map embed in contact brick
/*------------------------*/

section.contact .box.map-embed {
    padding: 0;
    overflow: hidden;
    border-radius: 1rem;
    min-height: 22rem;
}
section.contact .box.map-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 22rem;
}

/*------------------------*/
/* Layout widths
/*------------------------*/

.container { max-width: 84rem; }
section .container.small { max-width: 56rem; }
section .container.medium { max-width: 72rem; }

/*------------------------*/
/* Posts listing date & spacing
/*------------------------*/

.posts .post-date {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--textMedium);
    margin-bottom: 0.25rem;
}
.posts .post-date img {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Theme sets padding-top: 1rem on h3 and .meta gets 1rem margin-bottom,
   both designed for when no date precedes the title. Collapse both. */
section.posts .grid .item .meta { margin-bottom: 0; }
section.posts .grid .item h3 { padding-top: 0.35rem; }

/* Space between tag badges and the summary text */
section.posts .post-tags { margin-bottom: 0.5rem; }

/*------------------------*/
/* Tag badges
/*------------------------*/

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}
.tag-badge {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--light);
    color: var(--accent);
    border: 1px solid rgba(0, 48, 128, 0.15);
    white-space: nowrap;
}

/*------------------------*/
/* Post container width
/*------------------------*/

section.post .container { max-width: 68rem; }

/*------------------------*/
/* Post with image layout
/*------------------------*/

.post-with-image {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}
.post-with-image .post-body { flex: 1 1 0; min-width: 0; }
.post-with-image .post-image { flex: 0 0 36%; }
.post-with-image .post-image img {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
}
@media (max-width: 640px) {
    .post-with-image { flex-direction: column; }
    .post-with-image .post-image { flex: 0 0 auto; width: 100%; }
}

/*------------------------*/
/* Post prev/next navigation
/*------------------------*/

.post-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0 1rem;
    border-top: 1px solid var(--borderLight);
    font-size: 0.95rem;
}
.post-nav a { color: var(--accent); text-decoration: none; }
.post-nav a:hover { color: var(--accentDarker); text-decoration: underline; }
.post-nav-prev { flex: 1; text-align: left; }
.post-nav-overview { flex: 0 0 auto; text-align: center; }
.post-nav-next { flex: 1; text-align: right; }

/*------------------------*/
/* Center desktop navigation
/*------------------------*/

header > .container:not(.has_cta) > div:nth-child(3) { flex: 1; }
header .navnav > ul { justify-content: center; }

/*------------------------*/
/* Mobile nav: active page on dark background
/*------------------------*/

body.mobilemenu header .navnav > ul li.active > a {
    color: white !important;
    text-decoration: underline;
}
body.mobilemenu header .navnav > ul > li.active.haschildren > a::after {
    border-color: white;
}

/*------------------------*/
/* Recent news section on sport pages
/*------------------------*/

p.recent-news-more { text-align: center; margin-top: 1.5rem; }

/*------------------------*/
/* Tinted variant of brick_small (used on Datenschutz page)
/*------------------------*/

section.small.tinted {
    background: var(--light);
    border-top: 0.1rem solid var(--borderLight);
    border-bottom: 0.1rem solid var(--borderLight);
}

/*------------------------*/
/* Club name in mobile header
/*------------------------*/

.club-name { display: none; }

body.mobilemenu header > .container > div:first-child {
    display: flex;
    align-items: center;
}
body.mobilemenu .club-name {
    display: block;
    padding-left: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--textDarker);
}