/*
Theme Name: Vienna Coffee Festival
Theme URI: https://www.viennacoffeefestival.cc
Author: Lefor Oberbauer
Description: Official WordPress theme for the Vienna Coffee Festival – 1:1 recreation of the original design
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: All rights reserved
Text Domain: vcf
*/

/* ============================================================
   FONTS
   ============================================================ */
@font-face {
  font-family: 'RobotoSlab-Bold';
  src: url(assets/fonts/RobotoSlab-Bold.woff2) format('woff2'),
       url(assets/fonts/RobotoSlab-Bold.woff) format('woff'),
       url(assets/fonts/RobotoSlab-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'RobotoSlab-Regular';
  src: url(assets/fonts/RobotoSlab-Regular.woff2) format('woff2'),
       url(assets/fonts/RobotoSlab-Regular.woff) format('woff'),
       url(assets/fonts/RobotoSlab-Regular.ttf) format('truetype');
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  overflow-x: hidden;
  color: #000;
  font-size: 20px;
  font-family: 'RobotoSlab-Regular', serif;
  font-weight: normal;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

img { max-width: 100%; height: auto; display: block; }

a, a:hover, a:focus, a:active { color: #ffffff; outline: none; }
p a { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  max-width: 100%;
  margin-bottom: 25px;
  font-family: 'RobotoSlab-Regular', serif;
  letter-spacing: -1px;
}

p { font-size: 18px; line-height: 1.22; }

/* ============================================================
   NAVBAR  — goldgelb, 110px hoch, RobotoSlab 22px dunkelbraun
   ============================================================ */
.navbar-default {
  background-color: #ddc900;
  border-color: transparent;
  min-height: 110px;
  margin-bottom: 0;
}

.navbar-default .navbar-brand {
  height: auto;
  padding: 0;
  margin-top: 59px;
}

.navbar-default .navbar-brand img {
  width: 280px;
  height: auto;
}

.navbar-default .navbar-collapse {
  margin-top: 25px;
}

.navbar-default .navbar-toggle {
  background-color: #ffffff;
  border-color: #ffffff;
  margin-top: 36px;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #4c2b20;
}

.navbar-default .navbar-nav li {
  margin-top: 32px;
}

.navbar-default .navbar-nav li a {
  letter-spacing: -1px;
  color: #4c2b20;
  line-height: 32px;
  padding: 0;
  margin: 0 10px;
  font-family: 'RobotoSlab-Regular', serif;
  font-weight: bold;
  font-size: 22px;
}

.navbar-default .navbar-nav li a:hover,
.navbar-default .navbar-nav li a:focus {
  color: #ffffff;
  outline: none;
  text-decoration: none;
  background-color: transparent;
}

.navbar-fixed-top { position: fixed; top: 0; width: 100%; z-index: 1000; }

/* Social icons in nav */
li.fb-cont   { margin-top: 22px !important; }
li.inst-cont { margin-top: 22px !important; }

#fb, #inst {
  width: 35px;
  height: 35px;
  background-size: cover;
  background-repeat: no-repeat;
}
#fb   { background-image: url('assets/images/fb.png'); }
#inst { background-image: url('assets/images/inst.png'); }

/* ============================================================
   HEADER (hero area – under nav)
   ============================================================ */
header {
  background: #ddc900 url('assets/images/header_hintergrund_green_2026.gif') no-repeat center center;
  background-size: cover;
  text-align: center;
  color: white;
  position: relative;
  margin-top: 110px; /* navbar height */
  padding-bottom: 40px;
}

#tasse-svg {
  max-width: 80%;
  margin-top: 260px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 993px)  { #tasse-svg { margin-top: 180px; } }
@media (max-width: 620px)  { #tasse-svg { max-width: 80%; margin-top: 150px; } }
@media (max-width: 520px)  { #tasse-svg { max-width: 90%; margin-top: 120px; } }
@media (max-width: 1920px) { #tasse-svg { width: 90%; margin-bottom: 30px; } }
@media (max-width: 1600px) { #tasse-svg { width: 80%; margin-bottom: 20px; padding-bottom: 20px; } }
@media (max-width: 1200px) { #tasse-svg { width: 70%; margin-bottom: 10px; padding-bottom: 10px; } }
@media (max-width: 1000px) { #tasse-svg { width: 90%; margin-bottom: 10px; padding-bottom: 10px; } }

/* Date/Location bars */
.bar {
  position: absolute;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 48px;
  font-weight: bold;
  font-family: 'RobotoSlab-Regular', serif;
  top: 50px;
  width: 100%;
  left: 0;
}

#bar-blue  { color: #2e6883; }
#bar-yellow { color: #ddc900; }

/* ============================================================
   SECTIONS – weißer Hintergrund
   ============================================================ */
section {
  padding: 40px 0;
  background-color: #ffffff;
}

.container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ============================================================
   SEPARATOR / TASSE TRENNER
   ============================================================ */
.separator {
  text-align: center;
  margin-bottom: 30px;
}

.tasse-trenner {
  text-align: center;
  margin: 20px 0;
}

.tasse-trenner img {
  margin: 0 auto;
  max-width: 200px;
}

.customH2 {
  font-size: 2em;
  font-weight: normal;
  font-family: 'RobotoSlab-Regular', serif;
}

/* Section headings style: inline-block on white bg */
.section-heading {
  display: inline-block;
  margin-top: -0.3em;
  background-color: #fff;
  padding: 0px 10px;
  font-weight: normal;
  font-size: 2em;
  font-family: 'RobotoSlab-Regular', serif;
}

/* ============================================================
   WELCOME SVG (clickable areas)
   ============================================================ */
#welcome { padding-top: 30px; }
#welcome svg { width: 100%; height: auto; }

/* ============================================================
   TICKETS SECTION
   ============================================================ */
#tickets_2024 { padding-top: 0.5em; }
#tickets_2024 img { margin: 20px auto 0; }
.bilderGrauOver { transition: filter .2s; }
.bilderGrauOver:hover { filter: brightness(0.85); }

/* ============================================================
   BLOG
   ============================================================ */
#div-meldungen {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.blog-image-div {
  max-height: 100%;
  overflow: visible;
  padding: 5px 20px;
  vertical-align: middle;
}

.blog-title-div {
  padding: 5px 15px 0 15px;
  text-align: left;
}

.blog-content-div {
  padding: 0 15px 5px 15px;
}

.blog-image-div-more {
  max-height: 100%;
  overflow: hidden;
  padding: 5px 20px;
  background-color: #ddc900;
  min-height: 247px;
}

@media (min-width: 768px) {
  .blog-image-div {
    max-height: 247px;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 0;
  }
  .blog-title-div {
    font-weight: bold;
    color: #60a6b9;
    font-size: 20px;
    padding: 0;
  }
  .blog-content-div { padding: 0; }
}

/* ============================================================
   FESTIVAL AREA / PLAN
   ============================================================ */
#plan { font-size: 14px; }
.planTitle { margin-bottom: 30px; }
.infoGerstenboden { padding-top: 20px; }
span.textRot  { color: #dd305a; }
span.textBlau { color: #296981; }

/* ============================================================
   KONTAKT / FOOTER – schwarzer Hintergrund
   ============================================================ */
#kontakt {
  background-color: #000000;
  color: white;
  border-top: 1px solid white;
  padding: 0 0 70px;
}

#kontakt a        { color: #ffffff; }
#kontakt a:hover  { color: #ddc900; }

.leftborder {
  border-left: 1px solid white;
  min-height: 150px;
}

/* ============================================================
   RESPONSIVE NAV
   ============================================================ */
@media (max-width: 767px) {
  .navbar-default { min-height: 70px; }
  .navbar-default .navbar-brand { margin-top: 10px; }
  .navbar-default .navbar-brand img { width: 180px; }
  .navbar-default .navbar-nav li { margin-top: 8px; }
  .navbar-default .navbar-nav li a { font-size: 18px; }
  header { margin-top: 70px; }
  .bar { font-size: 28px; top: 15px; }
}

/* ============================================================
   PAGE TEMPLATES (Unterseiten)
   ============================================================ */
.page-hero {
  background-color: #ddc900;
  padding: 140px 24px 50px;
  text-align: center;
}

.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #4c2b20;
}

.page-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 50px 24px 80px;
}

.page-content h2 {
  font-size: 1.5rem;
  margin: 40px 0 16px;
  color: #4c2b20;
}

.page-content p {
  margin-bottom: 16px;
  line-height: 1.7;
}

/* Forms */
.vcf-form label {
  display: block;
  font-size: .9rem;
  font-weight: bold;
  margin-bottom: 6px;
  color: #4c2b20;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.vcf-form input[type="email"],
.vcf-form input[type="text"],
.vcf-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #ddc900;
  font-size: 1rem;
  font-family: 'RobotoSlab-Regular', serif;
  margin-bottom: 18px;
  background: #fff;
}

.vcf-form input:focus,
.vcf-form textarea:focus {
  outline: 2px solid #4c2b20;
  outline-offset: 0;
}

.btn-vcf {
  background: #ddc900;
  color: #4c2b20;
  border: none;
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: bold;
  font-family: 'RobotoSlab-Regular', serif;
  cursor: pointer;
  letter-spacing: .05em;
  transition: background .2s;
}

.btn-vcf:hover { background: #c9b800; }

/* FAQ */
.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 18px 0;
}

.faq-question {
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #4c2b20;
}

.faq-question::after {
  content: '+';
  font-size: 1.5rem;
  color: #ddc900;
  transition: transform .2s;
}

.faq-item.is-open .faq-question::after { transform: rotate(45deg); }
.faq-answer { display: none; padding-top: 10px; line-height: 1.7; font-size: .95rem; }
.faq-item.is-open .faq-answer { display: block; }

/* Blog archive / single */
.archive-hero {
  background: #ddc900;
  padding: 140px 24px 50px;
  text-align: center;
}

.archive-hero h1 { color: #4c2b20; font-size: clamp(2rem, 5vw, 3.5rem); }

.archive-grid {
  max-width: 1170px;
  margin: 0 auto;
  padding: 50px 15px 80px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
}

.blog-card {
  display: block;
  color: #000;
  text-decoration: none;
  border: 1px solid #eee;
  transition: box-shadow .2s;
}

.blog-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.12); }

.blog-card-thumb { aspect-ratio: 16/9; overflow: hidden; background: #f5f5f5; }
.blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; }

.blog-card-body { padding: 16px 20px 20px; }
.blog-card-title { font-size: 1.1rem; margin-bottom: 8px; color: #4c2b20; }
.blog-card-excerpt { font-size: .9rem; color: #555; line-height: 1.6; }

.single-post-hero {
  background: #ddc900;
  padding: 140px 24px 50px;
}

.single-post-hero h1 { color: #4c2b20; max-width: 860px; }

.single-post-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 50px 24px 80px;
}

.single-post-content p  { margin-bottom: 18px; line-height: 1.8; }
.single-post-content h2 { font-size: 1.5rem; margin: 32px 0 12px; color: #4c2b20; }
.single-post-content a  { color: #4c2b20; }

/* Pagination */
.pagination { max-width: 1170px; margin: 0 auto; padding: 0 15px 60px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.pagination .page-numbers { padding: 6px 14px; border: 2px solid #ddc900; color: #4c2b20; font-size: .9rem; text-decoration: none; transition: background .2s; }
.pagination .current,
.pagination .page-numbers:hover { background: #ddc900; color: #4c2b20; }

/* Logo grids */
.logo-grid, .partners-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.logo-grid img, .partners-grid img {
  max-height: 60px;
  width: auto;
  transition: opacity .2s;
}

.logo-grid img:hover, .partners-grid img:hover { opacity: .7; }

/* image rows (exhibitor logos) */
.image-row-1 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.image-row-1 img { max-width: 170px; height: auto; margin: 5px; }

.image-row-2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.image-row-2 img { max-width: 220px; margin: 5px 10px; height: auto; }

@media (max-width: 1199px) {
  .image-row-1 img { max-width: 140px; }
  .image-row-2 img { max-width: 170px; }
}

@media (max-width: 450px) {
  .image-row-1 img { max-width: 100px; }
  .image-row-2 img { max-width: 140px; }
}