/*
Theme Name: Kuppingen
Version: 2
Description: Lauftreff Kuppingen Theme
Author: Sam
Author URI: http://www.samgeorge.co.uk
Tags: Kuppingen
Private use, (c) Lauftreff Kuppingen
*/

/* =========================================================
   1. FONTS
   ========================================================= */
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/rubik-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/rubik-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/rubik-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/rubik-400-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/rubik-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/rubik-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/rubik-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/rubik-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/rubik-600-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/rubik-600-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* =========================================================
   2. TOKENS
   ========================================================= */
:root {
  --c-blue: #1E5BA8;
  --c-blue-deep: #154078;
  --c-blue-darker: #0D2B52;
  --c-sky: #6BA8DC;
  --c-sun: #F5B82E;
  --c-sun-deep: #E0A21A;
  --c-orange: #E8501F;
  --c-orange-deep: #C13F12;

  --c-ink: #14171F;
  --c-text: #383E4D;
  --c-muted: #6F7585;

  --c-paper: #FFFFFF;
  --c-cream: #F2F4F7;
  --c-pale-blue: #E8F1FA;
  --c-pale-yellow: #FCF2D5;
  --c-line: rgba(20, 23, 31, .12);
  --c-line-soft: rgba(20, 23, 31, .07);

  --font-display: 'Rubik', system-ui, sans-serif;
  --font-body: 'Rubik', system-ui, sans-serif;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-full: 999px;

  --shadow-card: 0 1px 2px rgba(20, 23, 31, .04), 0 6px 18px rgba(20, 23, 31, .07);
  --shadow-card-hover: 0 2px 4px rgba(20, 23, 31, .05), 0 16px 36px rgba(20, 23, 31, .12);

  --max: 1100px;
  --gutter: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.22,.8,.2,1);
}

/* =========================================================
   3. RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background: var(--c-paper);
  color: var(--c-text);
  font-size: clamp(15px, .2vw + 14px, 16px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--c-blue); font-weight: 600; text-decoration: none; }
a:hover { color: var(--c-orange); }
a img { border: 0; outline: 0; }
::selection { background: var(--c-sun); color: var(--c-ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--c-blue);
  line-height: 1.1;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(32px, 5vw, 54px); }
h2 { font-size: clamp(24px, 3.4vw, 34px); }
h3 { font-size: clamp(18px, 2.4vw, 22px); }
h4 { font-size: 16px; }

p { margin: 0 0 1em; }
blockquote {
  margin: 0 0 1em 20px;
  padding: 0 0 0 16px;
  border-left: 3px solid var(--c-sky);
  color: var(--c-muted);
}

/* =========================================================
   4. LAYOUT
   ========================================================= */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
  padding: clamp(24px, 4vw, 40px) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 780px) {
  .site-main {
    grid-template-columns: 1fr 260px;
    align-items: start;
  }
  .site-main.no-sidebar {
    grid-template-columns: 1fr;
  }
}

.site-content {
  min-width: 0;
}

/* =========================================================
   5. HEADER
   ========================================================= */
.site-header {
  background: var(--c-blue);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-card);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--gutter);
}
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand img {
  height: 40px;
  width: auto;
  display: block;
}

.nav-list {
  display: none;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  gap: 4px;
}
.nav-list li { display: inline-flex; }
.nav-list a {
  display: inline-block;
  padding: 10px 14px;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  border-radius: var(--radius-full);
  transition: background .2s var(--ease);
}
.nav-list a:hover,
.current_page_item a,
.nav-list .current_page_parent a {
  background: rgba(255,255,255,.16);
  color: #fff;
}

.burger {
  margin-left: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  position: relative;
  transition: transform .25s var(--ease), opacity .15s;
}
.burger span::before, .burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: transform .25s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { transform: translateY(6px) rotate(45deg); }
.burger.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: none;
  background: var(--c-blue-deep);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 8px var(--gutter) 16px;
  display: grid;
  gap: 2px;
}
.mobile-nav a {
  display: block;
  padding: 12px 14px;
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.mobile-nav a:hover,
.mobile-nav .current_page_item a {
  background: rgba(255,255,255,.14);
}

@media (min-width: 780px) {
  .nav-list { display: flex; }
  .burger { display: none; }
  .mobile-nav { display: none !important; }
}

/* =========================================================
   6. SIDEBAR
   ========================================================= */
#sidebar {
  background: var(--c-pale-blue);
  border-radius: var(--radius);
  padding: 20px;
}
#sidebar h3 {
  margin: 0 0 10px;
}
#sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#sidebar ul ul {
  margin: 4px 0 8px 12px;
}
#sidebar ul li {
  padding: 0 0 4px 0;
}
#sidebar .menu {
  margin-top: 0;
}
.menu a {
  display: block;
  color: var(--c-blue);
  font-weight: 600;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}
.menu a:hover,
.menu .current_page_item a,
.menu .current_page_parent a {
  background: var(--c-sky);
  color: #fff;
}
.tsvlogo {
  margin: 20px 0 0;
  text-align: center;
}
.tsvlogo img {
  display: inline-block;
}

/* =========================================================
   7. POSTS & CONTENT
   ========================================================= */
.post-card {
  padding: 20px clamp(20px, 3vw, 32px);
  margin-bottom: 20px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.post-card h2 {
  margin-bottom: 12px;
}
.main {
  text-align: left;
}
.main p { line-height: 1.65; margin: 0 0 1em; }
.main ol, .main ul { line-height: 1.65; margin: 0 0 1em 24px; }
.main li { margin: 0 0 6px; }

.meta,
.postmetadata {
  font-size: 13px;
  color: var(--c-muted);
}

.navigation {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  font-weight: 600;
}

/* =========================================================
   8. EVENTS / CALENDAR
   ========================================================= */
.event_FP {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 16px;
  margin: 0 0 16px;
}
h3.date {
  color: var(--c-blue);
  margin-bottom: 8px;
  font-size: 15px;
  text-transform: none;
  font-style: normal;
  font-weight: 700;
}
.event_Inside {
  margin-bottom: 10px;
}
.event_tile {
  font-weight: 700;
  color: var(--c-orange);
  font-size: 14px;
  margin: 0 0 2px;
}
.event_desc_FP {
  clear: both;
  display: block;
  color: var(--c-text);
  font-weight: normal;
}

/* =========================================================
   9. FOOTER
   ========================================================= */
.site-footer {
  margin-top: 40px;
  border-top: 1px solid var(--c-line);
  background: var(--c-cream);
  padding: 32px var(--gutter);
  color: var(--c-muted);
  font-size: 13px;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-brand img {
  height: 22px;
  width: auto;
}
.footer-tsv {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-tsv img {
  height: 18px;
  width: auto;
}
.site-footer a {
  color: var(--c-muted);
  font-weight: 500;
}
.site-footer a:hover {
  color: var(--c-orange);
}

/* =========================================================
   10. COMMENTS
   ========================================================= */
#comments {
  list-style: none;
  margin: 24px 0;
  padding: 0;
}
#comments li {
  padding: 16px;
  margin-bottom: 12px;
  background: var(--c-cream);
  border-radius: var(--radius);
}
#comments li.alt {
  background: var(--c-pale-blue);
}
.gravatar {
  float: right;
  border-radius: 50%;
}
.comment-form {
  display: grid;
  gap: 14px;
  max-width: 520px;
}
.comment-form .field {
  display: grid;
  gap: 4px;
}
.comment-form label {
  font-size: 13px;
  color: var(--c-muted);
}
.comment-form .actions {
  display: flex;
  justify-content: flex-end;
}

input, textarea, select {
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-paper);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--c-text);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--c-sky);
  outline-offset: 1px;
}

button[type="submit"],
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .02em;
  background: var(--c-orange);
  color: #fff;
  border: 0;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--c-orange-deep);
  transform: translateY(-1px);
}

/* =========================================================
   11. UTILITIES
   ========================================================= */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin-right: 16px; }
.alignright { float: right; margin-left: 16px; }
.clear { clear: both; }

.wp-caption {
  border: 1px solid var(--c-line);
  background: var(--c-cream);
  border-radius: var(--radius-sm);
  text-align: center;
  padding-top: 4px;
  margin: 10px 0;
}
.wp-caption img { margin: 0; padding: 0; border: 0; }
.wp-caption-dd {
  font-size: 12px;
  line-height: 1.4;
  padding: 4px 8px 8px;
  margin: 0;
  color: var(--c-muted);
}