/*
Theme Name: OFFISS Theme
Theme URI: https://offiss.club
Author: Offiss
Description: Optimiertes, responsives WordPress-Theme für OFFISS Club (Home + Events + Reservierung).
Version: 3.1.8
Text Domain: offiss-optimized
*/

/* === Base / Reset === */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #e9e9e9;
  background: #000;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: #ffda00; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
img { max-width: 100%; height: auto; display:block; }

/* === Icon Font (local) === */
@font-face {
  font-family: "FontAwesome";
  src: url("assets/fonts/fontawesome-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.fa-user:before { content: "\f007"; }
.fa-mobile:before { content: "\f10b"; }
.fa-users:before { content: "\f0c0"; }
.fa-calendar:before { content: "\f073"; }
.fa-cube:before { content: "\f1b2"; }
.fa-facebook:before { content: "\f09a"; }
.fa-instagram:before { content: "\f16d"; }
.fa-map-marker:before { content: "\f041"; }
.fa-envelope:before { content: "\f0e0"; }

/* === Layout Grid (Bootstrap-like lite) === */
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
[class^="col-"], [class*=" col-"] { padding: 0 15px; }

/* xs: default 100% */
.col-xs-12 { width: 100%; }

/* sm breakpoint */
@media (min-width: 576px) {
  .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.333%; }
  .col-sm-5 { width: 41.666%; }
  .col-sm-6 { width: 50%; }
  .col-sm-7 { width: 58.333%; }
  .col-sm-10 { width: 83.333%; }
  .col-sm-12 { width: 100%; }
}

/* md breakpoint */
@media (min-width: 768px) {
  .col-md-2 { width: 16.666%; }
  .col-md-4 { width: 33.333%; }
  .col-md-10 { width: 83.333%; }
  .col-md-12 { width: 100%; }
}

/* Header / Nav */
#header { position: sticky; top:0; z-index:999; background: rgba(0,0,0,.85); border-bottom: 1px solid rgba(255,255,255,.06); }
.logo { padding: 12px 0; }
.logo img, .logo .custom-logo { max-height: 56px; margin: 6px auto; }
.navbar { display:flex; align-items:center; justify-content:center; }
.navbar .nav { list-style:none; display:flex; gap:28px; margin: 0; padding: 0; }
.navbar .nav li a { color:#fff; font-weight:600; letter-spacing:.08em; }
.navbar .nav li a:hover { color:#ffda00; }

/* Sections */
.module { position: relative; padding: 72px 0; }
.module h1 { text-transform: uppercase; letter-spacing: .12em; text-align:center; margin:0 0 16px; }
.module p { text-align:center; margin: 0 0 24px; }

.parallax { background-attachment: fixed; background-position: center; background-size: cover; }
.parallax::before { content:""; position:absolute; inset:0; background: radial-gradient(ellipse at center, rgba(0,0,0,.25) 0%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.85) 100%); z-index:0; }
.module > .container, .module > .container-fluid { position:relative; z-index:1; }

/* === Banner / Hero Typography === */
#banner { min-height: 420px; display:flex; align-items:center; }

/* Hero Title - dynamisch über Customizer steuerbar */
#banner .title,
h1.title {
  font-size: clamp(28px, 6vw, 54px);
  text-align: center;
  margin-bottom: 20px;
  color: #fff;
  position: relative;
  display: inline-block;
  width: 100%;
  /* Diese Werte werden durch functions.php überschrieben */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Dekorative Linien links und rechts vom Titel */
.title::before,
.title::after {
  content: "";
  display: inline-block;
  width: 200px;
  height: 1px;
  background: #fff;
  vertical-align: middle;
  margin: 0 20px;
}

/* Hero Subtitle - dynamisch über Customizer steuerbar */
#banner .subtitle,
h3.subtitle {
  font-size: clamp(16px, 2.6vw, 26px);
  text-align: center;
  opacity: .9;
  color: #fff;
  margin-bottom: 30px;
  /* Diese Werte werden durch functions.php überschrieben */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Responsive Anpassungen für Hero-Typografie */
@media (max-width: 768px) {
  .title::before,
  .title::after {
    width: 50px;
    margin: 0 10px;
  }
  
  #banner .title {
    font-size: clamp(24px, 8vw, 36px);
    letter-spacing: 2px;
  }
  
  #banner .subtitle {
    font-size: clamp(14px, 4vw, 18px);
    letter-spacing: 1px;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .title::before,
  .title::after {
    width: 30px;
    margin: 0 8px;
  }
}

/* Buttons */
.btn { display:inline-block; font-weight:700; padding:14px 26px; border-radius:6px; border:0; cursor:pointer; transition: transform .08s ease, opacity .2s ease; }
.btn-primary { background:#ffda00; color:#111; }
.btn:hover { transform: translateY(-1px); opacity:.9; }

/* Events */
.event-list { list-style:none; display:flex; flex-wrap:wrap; gap:20px; justify-content:center; padding:0; margin:28px 0 0; }
.event-item { flex:1 1 300px; max-width:360px; }
.event-box { background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); backdrop-filter: blur(1.5px); }
.event-title { padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.08); font-weight:700; text-align:center; }
.event-box-content { display:flex; }
.event-box-left, .event-box-right { padding:12px; }
.event-box-left { background:#000; min-width:140px; text-align:center; }
.event-box-left h2 { margin:0; font-size:40px; line-height:1; }
.event-box-left .month { display:block; font-size:14px; letter-spacing:.12em; color:#ffda00; margin-top: 4px; }
.event-box-right h2 { margin:0 0 8px; font-size:18px; }
.event-box-right { background:#313131; }

/* Special Event Box Styles for Messages */
.event-box-info {
  background: rgba(52, 152, 219, 0.1) !important;
  border: 1px solid rgba(52, 152, 219, 0.3) !important;
}

.event-box-info .event-title {
  background: rgba(52, 152, 219, 0.2);
  color: #3498db;
  border-bottom: 1px solid rgba(52, 152, 219, 0.3);
}

.event-box-warning {
  background: rgba(241, 196, 15, 0.1) !important;
  border: 1px solid rgba(241, 196, 15, 0.3) !important;
}

.event-box-warning .event-title {
  background: rgba(241, 196, 15, 0.2);
  color: #f1c40f;
  border-bottom: 1px solid rgba(241, 196, 15, 0.3);
}

/* Single content area for message boxes */
.event-box-single {
  padding: 20px;
  text-align: center;
  width: 100%;
  background: rgba(255,255,255,.02);
}

.event-box-single h3 {
  margin: 0 0 10px 0;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.event-box-single p {
  margin: 0;
  color: #cfcfcf;
  line-height: 1.5;
}

.event-box-single a {
  color: #ffda00;
  text-decoration: none;
  font-weight: 600;
}

.event-box-single a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Icons in event titles */
.event-title .fa {
  margin-right: 8px;
  font-size: 16px;
}

/* === Reservation form === */
.reservation-form { margin-top: 24px; max-width: 760px; margin-left: auto; margin-right: auto; }
.form-group { margin-bottom:18px; }
.control-label { display:block; font-weight:600; margin-bottom:8px; color: #fff; }
.input-field .input-group { display:flex; align-items:stretch; }

/* Form Controls - Verbessertes Styling für bessere Lesbarkeit */
.form-control {
  flex:1;
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #333 !important;
  padding:14px 16px;
  font-size:16px;
  outline:none;
}

.form-control::placeholder { 
  color: #aaa !important;
  opacity: 1;
}

.form-control:focus {
  background: #111 !important;
  color: #fff !important;
  border-color: #555 !important;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2) !important;
}

/* Select Options */
.form-control option {
  background: #000 !important;
  color: #fff !important;
}

/* Input Group Addons */
.input-group-addon {
  display:flex; 
  align-items:center; 
  justify-content:center;
  padding: 0 14px;
  background: #333 !important; 
  color: #fff !important; 
  border: 1px solid #333 !important;
}

.input-group-addon i {
  color: #fff !important;
  font-size: 16px !important;
}

/* Date Input Calendar Icon Fix */
input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgM2gtMVYxaC0ydjJIOFYxSDZ2Mkg1Yy0xLjExIDAtMS45OS44OS0xLjk5IDJMMTcgNXYxNGMwIDEuMS44OSAyIDIgMmgxMmMxLjEgMCAyLS45IDItMlY1YzAtMS4xMS0uOS0yLTItMnptMCAxNkg1VjhoMTR2MTF6TTcgMTBoNXYxSDd6Ii8+PC9zdmc+') !important;
  background-size: 18px 18px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
  border: none !important;
  width: 20px !important;
  height: 20px !important;
  cursor: pointer !important;
}

select.form-control { 
  appearance:none; 
  -moz-appearance:none; 
  -webkit-appearance:none; 
  background-image: none; 
}

.btn-booking { 
  background:#ffda00; 
  color:#111; 
  font-size:18px; 
  text-transform:uppercase; 
  letter-spacing:.08em;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn-booking:hover {
  background: #e6c300;
}

.btn-booking:disabled {
  background: #666;
  cursor: not-allowed;
}

/* Footer */
#footer { background:#000; padding: 40px 0; }
.footer-text { color:#cfcfcf; }

/* Footer Logo Section */
.footer-logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.footer-logo,
.footer-logo img {
  max-height: 80px !important;
  width: auto !important;
  margin: 0 auto !important;
}

/* Footer Social Media Icons */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #333;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-social a:hover {
  background: #ffda00;
  color: #000;
  transform: translateY(-2px);
}

.footer-social .fa {
  font-size: 18px;
}

/* Address Link Styling */
.address-link {
  color: #cfcfcf !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

.address-link:hover {
  color: #ffda00 !important;
  text-decoration: underline;
}

/* Remove old social styling */
.social.affix-social {
  display: none;
}

.social a { display:inline-block; margin: 0 6px; color:#fff; }
#copy-right { padding: 12px 0; background:#000; color:#fff; border-top:1px solid rgba(255,255,255,.08); }

/* Utilities */
.text-center { text-align:center; }
.affix-social a { opacity:.9; }
.phone-icon { min-width:44px; }

/* Small devices */
@media (max-width: 575.98px) {
  #header .navbar .nav { gap:16px; }
  .control-label { margin-bottom:6px; }
  .input-group-addon { padding:0 12px; }
}

/* === OFFISS v3.0 critical fixes === */

/* Sticky header visible on all pages */
#header {
  position: sticky;
  top: 0;
  z-index: 10000;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(3px);
}

/* Ensure sections have offset when jumping via anchors */
.module { scroll-margin-top: 90px; }

/* Parallax sections: show backgrounds full-bleed and never block clicks */
.module.parallax {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  position: relative;
}
.parallax-header::before,
.parallax-events::before,
.parallax-reservation::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  pointer-events: none; /* overlay must not block inputs/links */
}

/* Center the reservation form and keep it tappable */
.reservation-form {
  max-width: 760px;
  margin: 24px auto;
}
.input-group { display: flex; }
.input-group .input-group-addon {
  pointer-events: auto; /* Icons should be clickable for date picker */
}

/* Small polish */
.navbar a { color: #fff; }
.title-lines span { letter-spacing: .08em; }

/* WordPress Admin Bar Compatibility */
body.admin-bar #header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar #header {
    top: 46px;
  }
}

/* Form Row Layout für bessere mobile Darstellung */
.form-group.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .form-group.row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-group.row .control-label {
    margin-bottom: 8px;
  }
}

/* === OFFISS Reservation: harte Overrides, damit es lesbar ist === */

/* Overlay (legacy + neue Variante) */
#reservationModal,
.offiss-modal {
  background: rgba(0,0,0,0.75) !important;
}

/* Inhalt dunkel + helle Schrift (legacy: .modal-content; neu: .offiss-modal__content) */
#reservationModal .modal-content,
.offiss-modal .offiss-modal__content {
  background: #0d0d0d !important;
  color: #eaeaea !important;
  border: 1px solid #222 !important;
}

/* Sämtliche Texte im Modal dunkel, egal was body setzt */
#reservationModal,
#reservationModal * ,
.offiss-modal,
.offiss-modal * {
  color: #FFFFFF !important;
}

/* Titel-Farben je Status (falls du die Klassen nutzt) */
.offiss-modal .offiss-modal__title.is-success { color: #8be28b !important; }
.offiss-modal .offiss-modal__title.is-error   { color: #ff7a7a !important; }

/* Links/Buttons im Modal */
#reservationModal a,
.offiss-modal a { color: #4CAF50 !important; }

#reservationModal .offiss-modal__button,
.offiss-modal .offiss-modal__button {
  min-width: 160px;
}

/* Optional: Info-/Hinweisbox im Reservierungsbereich (außerhalb des Modals) */
.reservation-info,
.expMessage {
  background: #0d0d0d !important;
  color: #eaeaea !important;
  border: 1px solid #222 !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
}

/* === OFFISS Reservation – Lesbarkeit erzwingen === */

/* Legacy-Modal (#reservationModal) UND neues Modal (.offiss-modal) */
#reservationModal .modal-content,
.offiss-modal .offiss-modal__content {
  background: #0d0d0d !important;
  color: #ffffff !important;
  border: 1px solid #222 !important;
}

/* Alle Standardtexte im Modal: sattes Weiß + volle Deckkraft */
#reservationModal .modal-content p,
#reservationModal .modal-content div,
#reservationModal .modal-content li,
#reservationModal .modal-content span,
.offiss-modal .offiss-modal__content p,
.offiss-modal .offiss-modal__content div,
.offiss-modal .offiss-modal__content li,
.offiss-modal .offiss-modal__content span {
  color: #f1f1f1 !important;
  opacity: 1 !important;
}

/* Überschriften im Modal gut sichtbar */
#reservationModal .modal-content h1,
#reservationModal .modal-content h2,
#reservationModal .modal-content h3,
.offiss-modal .offiss-modal__content h1,
.offiss-modal .offiss-modal__content h2,
.offiss-modal .offiss-modal__content h3 {
  color: #ffffff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Erfolg-/Fehlerfarben der Titel (falls genutzt) */
.offiss-modal .offiss-modal__title.is-success { color: #8be28b !important; }
.offiss-modal .offiss-modal__title.is-error   { color: #ff7a7a !important; }

/* Buttons in der Fußzeile mittig und einheitlich */
#reservationModal .offiss-modal__actions,
.offiss-modal .offiss-modal__actions {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
}

/* Close-Icon immer sichtbar */
#reservationModal .offiss-modal__close,
.offiss-modal .offiss-modal__close {
  color: #ffffff !important;
  opacity: 0.9 !important;
}
/* === OFFISS Reservation – Lesbarkeit erzwingen === */

/* Legacy-Modal (#reservationModal) UND neues Modal (.offiss-modal) */
#reservationModal .modal-content,
.offiss-modal .offiss-modal__content {
  background: #0d0d0d !important;
  color: #ffffff !important;
  border: 1px solid #222 !important;
}

/* Alle Standardtexte im Modal: sattes Weiß + volle Deckkraft */
#reservationModal .modal-content p,
#reservationModal .modal-content div,
#reservationModal .modal-content li,
#reservationModal .modal-content span,
.offiss-modal .offiss-modal__content p,
.offiss-modal .offiss-modal__content div,
.offiss-modal .offiss-modal__content li,
.offiss-modal .offiss-modal__content span {
  color: #f1f1f1 !important;
  opacity: 1 !important;
}

/* Überschriften im Modal gut sichtbar */
#reservationModal .modal-content h1,
#reservationModal .modal-content h2,
#reservationModal .modal-content h3,
.offiss-modal .offiss-modal__content h1,
.offiss-modal .offiss-modal__content h2,
.offiss-modal .offiss-modal__content h3 {
  color: #ffffff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Erfolg-/Fehlerfarben der Titel (falls genutzt) */
.offiss-modal .offiss-modal__title.is-success { color: #8be28b !important; }
.offiss-modal .offiss-modal__title.is-error   { color: #ff7a7a !important; }

/* Buttons in der Fußzeile mittig und einheitlich */
#reservationModal .offiss-modal__actions,
.offiss-modal .offiss-modal__actions {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
}

/* Close-Icon immer sichtbar */
#reservationModal .offiss-modal__close,
.offiss-modal .offiss-modal__close {
  color: #ffffff !important;
  opacity: 0.9 !important;
}