:root {
    /* Primary colors */
    --color-primary:  #0c7e92;
    --color-primary-hover: #dd5800;

    /* Accent / Secondary colors */
    --color-accent: #ffcc40;
    --color-accent-hover: #ffc116;

    /* Text colors */
    --color-text: #2c3e50;
    --color-text-light: #34495e;
    --color-text-lighter: #7f8c8d;

    /* Background colors */
    --color-background-light: #f5f7fa;
    --color-background-lighter: #e4e9f2;
    --color-background-navbar: #1f8ef1;
    --color-background-pagination: #1f8ef1;
    --color-background-pagination-active: #0c5dbd;
    --color-background-pagination-disabled: #e4e9f2;

    /* Navbar Gradient Colors */
    --navbar-gradient-start: #01435f;
    --navbar-gradient-middle: #02758a;
    --navbar-gradient-end: #449BC2;

    /* Tag colors (5 Levels) */
    --color-tag-0: #0d8a6f;
    --color-tag-1: #10ac84;
    --color-tag-2: #26C6DA;
    --color-tag-3: #4DD0E1;
    --color-tag-4: #80DEEA;

    /* Audience colors */
    --color-audience-all: #6b7680;
    --color-audience-beginner: #247c39;
    --color-audience-intermediate: #bb8001;
    --color-audience-advanced: #be0f21;
    --color-audience-women: #904aa5;

    /* Sponsor tiers */
    --color-diamond-sponsors: #a8e6cf;
    --color-gold-sponsors: #ffd93d;
    --color-silver-sponsors: #d1d1d1;
    --color-bronze-sponsors: #cd7f32;
    --color-iron-sponsors: #e0e0e0;
    --color-partners: #999999;

    /* Miscellaneous colors and heights */
    --color-shadow: rgba(0, 0, 0, 0.05);
    --color-navbar-text: white;
    --color-navbar-text-hover: #ffc116;
    --color-navbar-subtitle: #c0eee8;
    --color-info-box-border: #ecf0f1;
    --navbar-height: 70px;
    --navbar-height-sm: 60px;
    --navbar-underline-bottom: 12px; /* Distance of underline from bottom of navbar */
}

/* ===== Fonts ===== */
/* Normal + Bold */
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSans3-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* Italic + Italic Bold */
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSans3-Italic-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}

/* ===== Base Typography ===== */
html, body, h1, h2, h3, h4, h5, h6, p, li, blockquote, .navbar, .sidebar, footer {
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

#content p,
#content li,
.summary p,
.summary li {
    font-size: 1.7rem;
    line-height: 2.5rem;
}

p {
    padding-bottom: 1rem;
    line-height: 3.5rem;
}

.btn,
.btn-xs {
    font-size: 1.6rem;
}

/* Responsive formatting for headings */
#content h1, h1.entry-title { font-size: clamp(2.6rem, 4vw, 2.9rem); font-weight: 600; }  
#content h2, article h2 { font-size: clamp(2.3rem, 3.5vw, 2.6rem); font-weight: 500; } 
#content h3 { font-size: clamp(2.0rem, 3vw, 2.3rem); font-weight: 500; color: var(--color-text-light); }
#content h4 { font-size: clamp(1.8rem, 2.5vw, 2rem); font-weight: 500; color: var(--color-text-lighter); }

/* Header padding to fix visibility of anchor links */
#content h2, #content h3, #content h4 { padding: 1.5rem 0 0; }

/* ===== Blog Posts, Talks, and Workshops ===== */
.post-info .published,
.post-info .audience {
    margin-right: 2rem;
}

.speaker,
.article-date,
.audience {
    font-size: 1.7rem;
    color: var(--color-text);
}

.post-info .label {
    font-size: 1.5rem;
}

div.summary h2 {
    font-size: 2.8rem;
}

div.summary h3 {
    font-size: 2rem;
}

hr {
    border-width: 0.2rem;
}

.audience {
    text-transform: capitalize;
    white-space: nowrap;
}

/* ===== Footnotes ===== */
sup a.footnote-ref {
    white-space: nowrap;
    margin-left: 0.2rem;
    text-decoration: none;
}

/* ===== Links and Buttons ===== */
#content a, article a, footer a,
#content a:visited, article a:visited, footer a:visited {
    color: var(--color-primary);
}

#content a:hover, article a:hover, footer a:hover {
    color: var(--color-primary-hover);
}

#sidebar a {
    text-decoration: underline dotted var(--color-text-lighter);
    text-underline-offset: 0.5rem;
}

#sidebar a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline solid var(--color-primary-hover);
}

#content a.btn, article a.btn {
    background-color: var(--color-accent);
    color: var(--color-text);
    padding: 0.6rem 1rem;
    border: 0.2rem solid var(--color-text-lighter);
}

#content a.btn:hover, article a.btn:hover, #content a.btn:focus, article a.btn:focus  {
    background-color: var(--color-accent-hover);
    color: var(--color-text);
    border-color: var(--color-primary-hover);
}

a:focus-visible,
button:focus-visible {
    outline: 0.2rem solid var(--color-primary-hover);
    outline-offset: 0.2rem;
}

.navbar a:focus-visible { color: white !important; }

#content ul.pagination a {
    color: white;
    background-color: var(--color-background-pagination);
}

#content ul.pagination a:hover {
    background-color: var(--color-primary-hover);
}

#content ul.pagination li.active a {
    background-color: var(--color-background-pagination-active);
}

#content ul.pagination li.disabled a,
#content ul.pagination li.disabled a:hover {
    background-color: var(--color-background-pagination-disabled);
    color: black;
}

/* ===== Header ===== */
.page-header {
    margin: 0;
    padding: 0;
}

.page-header + article h2 {
    margin-top: 0.5rem;
}

h1.entry-title + .entry-content > p:first-of-type {
    margin-top: 3rem;
}

/* ===== Responsive YouTube Videos ===== */
.videobox,
.video-wrapper {
    position: relative;
    display: block;
    width: 100%;
    max-width: 64rem;
    margin: 2rem auto;
    overflow: hidden;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
}

.videobox iframe,
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 992px) {
    .videobox,
    .video-wrapper {
        max-width: 100%;
        margin: 4rem auto;
    }
}

/* ===== Metadata in Article Listings ===== */
.meta span i,
.meta .audience i {
    margin-right: 0.4rem;
}

.meta .speaker,
.meta .audiences .audience {
    margin-right: 1rem;
}

.audience-all { color: var(--color-audience-all); }
.audience-beginner { color: var(--color-audience-beginner); }
.audience-intermediate { color: var(--color-audience-intermediate); }
.audience-advanced { color: var(--color-audience-advanced); }
.audience-women { color: var(--color-audience-women); }

/* ===== Speaker Box Styling ===== */
.speaker-box {
    margin: 3rem 0;
    padding: 2.5rem;
    background-color: var(--color-background-light);
    border-left: 0.4rem solid var(--color-primary-hover);
    border-radius: 0.5rem;
    box-shadow: 0 0.2rem 0.5rem var(--color-shadow);
    overflow: hidden;
    clear: both;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
}

.speaker-photo {
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
}

.speaker-info {
    flex: 1;
}

.speaker-info h3 {
    margin: 0 0 1.5rem;
    color: var(--color-text);
    font-size: 1.4em;
}

.speaker-bio {
    margin: 1.5rem 0;
    line-height: 1.6;
    color: inherit;
}

.speaker-bio p {
    margin-bottom: 1.5rem;
}

.speaker-bio ul {
    margin-left: 2rem;
    padding-left: 0;
}

.speaker-social {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.speaker-social .social-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.2s ease;
    padding: 0.5rem 1rem;
    border-radius: 0.4rem;
}

.speaker-social .social-link:hover {
    color: var(--color-primary-hover);
    text-decoration: none;
    background-color: rgba(0, 123, 255, 0.1);
}

.speaker-social i {
    margin-right: 0.6rem;
    font-size: 1.1em;
    width: 1.8rem;
    text-align: center;
}

/* ===== Tag Cloud Styling ===== */
ul.tagcloud {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.tagcloud li {
    display: inline-block;
    margin: 0.3rem;
}

ul.tagcloud li a {
    border-radius: 0.4rem;
    color: #000;
    padding: 0.2rem 0.6rem;
}

ul.tagcloud li.tag-0 a {
    font-size: 2.1rem;
    background-color: var(--color-tag-0);
    padding: 0.6rem 1.2rem;
}

ul.tagcloud li.tag-1 a {
    font-size: 1.7rem;
    background-color: var(--color-tag-1);
    padding: 0.5rem 1rem;
}

ul.tagcloud li.tag-2 a {
    font-size: 1.4rem;
    background-color: var(--color-tag-2);
    padding: 0.4rem 0.8rem;
}

ul.tagcloud li.tag-3 a {
    font-size: 1.25rem;
    background-color: var(--color-tag-3);
    padding: 0.3rem 0.7rem;
}

ul.tagcloud li.tag-4 a {
    font-size: 1.1rem;
    background-color: var(--color-tag-4);
    padding: 0.2rem 0.6rem;
}

ul.tagcloud li a:hover {
    background-color: var(--color-primary-hover);
    color: #fff !important;
    text-decoration: none;
}


    /* Speaker box adjustments */
    .speaker-box {
        flex-direction: column;
        text-align: center;
    }

    .speaker-photo {
        margin: 0 auto 1.5rem;
    }

    .speaker-social {
        justify-content: center;
    }

/* ===== Hover Styles ===== */
a:hover,
button:hover {
    color: var(--color-primary-hover);
    text-decoration-style: solid;
}

/* ===== Info Box Styling ===== */
.info-box {
    border: 0.5rem solid var(--color-info-box-border);
    padding: 2rem;
    margin: 3rem 0;
}

/* ===== Sponsor Logos ===== */

/* Sponsor Grid Container (mit farbigem Rand) */
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 2rem 0 4rem;
  padding: 1rem;
  background-color: var(--color-background-light);
  border-radius: 8px;
  border-left: 4px solid transparent; /* Farbiger Rand für die Gruppe */
}

/* Farbige Ränder für die Gruppen */
.sponsor-grid.partner { border-left-color: var(--color-partners); }
.sponsor-grid.iron { border-left-color: var(--color-iron-sponsors); }
.sponsor-grid.bronze { border-left-color: var(--color-bronze-sponsors); }
.sponsor-grid.silver { border-left-color: var(--color-silver-sponsors); }
.sponsor-grid.gold { border-left-color: var(--color-gold-sponsors); }
.sponsor-grid.diamond { border-left-color: var(--color-diamond-sponsors); }

/* Sponsor Item Styling (ohne eigenen Rand) */
.sponsor-item {
  text-align: center;
  padding: 1rem;
  transition: transform 0.2s;
}

.sponsor-item:hover {
  transform: translateY(-5px); /* Leichter Hover-Effekt */
}

/* Sponsor Logo Styling */
.sponsor-logo {
  display: block;
  margin: 0 auto;
  max-width: 200px;
  max-height: 120px;
  object-fit: contain;
  filter: grayscale(0%);
  transition: filter 0.2s;
}

.sponsor-item:hover .sponsor-logo {
  filter: grayscale(0%) brightness(1.1);
}

.sponsor-name {
  margin-top: 0.5rem;
  font-weight: 500;
  color: #555;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .sponsor-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================
   Navbar Styling with Unified Underline
   ================================ */

/* Base colors and sizes */
:root {
    --navbar-height: 9.5rem;           /* Gesamt-Höhe der Navbar */
    --navbar-height-sm: 70px;        /* Mobile Höhe */
    --navbar-underline-bottom: 8px;  /* Abstand der Unterlinie vom unteren Rand */
}

/* Navbar Container */
.navbar {
    min-height: var(--navbar-height);
    padding: 0 15px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;

    /* Gradient background using custom properties */
    background: linear-gradient(
        90deg,
        var(--navbar-gradient-start),
        var(--navbar-gradient-middle),
        var(--navbar-gradient-end)
    );
}

/* Navbar Brand: Logo + Title + Subtitle */
.navbar-brand {
    display: flex;
    align-items: center;  /* Vertical alignment matches nav links */
    gap: 15px;
    height: var(--navbar-height);
}

/* Logo inside brand */
.navbar-brand img {
    height: 120%;
    width: auto;
    object-fit: contain;
}

/* Title + Subtitle Block */
.navbar-brand .title-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative; /* Needed for underline */
    height: 100%;       /* Full height of navbar for alignment */
    margin-right: 1rem;
}

/* Site Title */
.navbar-brand .site-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-navbar-text);
}

/* Subtitle */
.navbar-brand .navbar-subtitle {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-navbar-subtitle);
    margin-top: 0.6rem;
}

/* Nav Links */
.navbar-nav > li > a {
    display: flex;
    align-items: center;
    height: var(--navbar-height);
    color: var(--color-navbar-text);
    position: relative; /* For underline */
    font-size: 1.6rem;
}

/* Hover: Text color */
.navbar-brand:hover .site-title,
.navbar-nav > li > a:hover {
    color: var(--color-navbar-text-hover) !important;
}

/* Unified underline for Title-Container & Nav Links */
.navbar-nav > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: var(--navbar-underline-bottom);
    width: 0;
    height: 2px;
    background-color: var(--color-navbar-text-hover);
    transition: width 0.3s ease;
}

/* Hover effect: expand underline */
.navbar-brand:hover .title-container::after,
.navbar-nav > li > a:hover::after {
    width: 100%;
}

/* Body padding for fixed navbar */
body {
    padding-top: calc(var(--navbar-height) + 10px);
}

/* ================================
   Responsive Adjustments
   ================================ */
@media (max-width: 768px) {
    :root {
        --navbar-height: var(--navbar-height-sm);
    }

    .navbar {
        min-height: var(--navbar-height-sm);
    }

    .navbar-brand {
        gap: 10px;
        height: var(--navbar-height-sm);
    }

    .navbar-brand img {
        height: 100%;
    }

    .navbar-brand .site-title {
        font-size: 1.8rem;
    }

    .navbar-brand .navbar-subtitle {
        font-size: 1.2rem;
    }

    .navbar-brand .title-container::after,
    .navbar-nav > li > a::after {
        bottom: var(--navbar-underline-bottom);
    }

    .navbar-nav > li > a {
        display: block;
        width: 100%;
        padding: 0.8rem 1rem;
        font-size: 1.5rem;
        height: auto;
        position: relative;
    } 
    
    body {
        padding-top: calc(var(--navbar-height-sm) + 10px);
    }
}