/* =========================================
   Freilichtspiele Tecklenburg – Custom Theme
   Farben: Dunkelblau (#000430), Rot (#DC0414), Weiß (#fff)
   ========================================= */

/* ======== Grundlayout ======== */
body {
  background: #e7e6e6a6 !important;
  color: #fff !important;
}

/* Header (fixierter Balken oben) */
header#header, #header {
  background-color: #fff !important;
  /* persistent red line under the header (thicker and high specificity) */
  border-bottom: 4px solid #DC0414 !important;
  color: #fff;
  box-shadow: none !important;
}

/* ======== Überschriften ======== */
h1, h2, h3, h4, h5 {
  color: #DC0414 !important;
}

/* ======== Karten & Inhaltsboxen ======== */
.card, .modular, .content {
  background: #ffffff;
  color: #111;
  border: none;
}

/* =========================================
   DESKTOP-NAVIGATION
   ========================================= */

/* Standardfarbe der Menülinks */
header#header nav#navbar a,
header#header .navigation a,
header#header .navbar-section a {
  color: #ffffff !important;
  text-decoration: none;
}

/* Hover- & aktiver Zustand */
header#header nav#navbar a:hover,
header#header .navigation a:hover,
header#header .navbar-section a:hover {
  color: #DC0414 !important;
}

/* Aktiver Menüpunkt */
header#header .navigation li.active > a,
header#header .navigation li > a.active {
  color: #DC0414 !important;
  border-bottom: 2px solid #DC0414 !important;
}

/* =========================================
   MOBILE-MENÜ (Offcanvas)
   ========================================= */

/* Hintergrundfarbe */
.mobile-menu,
.mobile-menu .navigation,
.mobile-menu .menu {
  background: #000430 !important;
}

/* Linkfarbe (weiß, Hover rot) */
.mobile-menu .navigation a,
.mobile-menu .menu a,
.mobile-menu a {
  color: #ffffff !important;
}
.mobile-menu .navigation a:hover,
.mobile-menu .menu a:hover,
.mobile-menu .navigation li.active > a,
.mobile-menu .menu li.active > a {
  color: #DC0414 !important;
}

/* Trennlinien */
.mobile-menu .navigation li,
.mobile-menu .menu li {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* =========================================
   HAMBURGER-ICON
   ========================================= */
.menu-toggle,
.menu-toggle:focus,
.menu-toggle:hover {
  color: #ffffff !important;
}
.menu-toggle .bars span {
  background: #ffffff !important; /* die drei Striche */
}

/* =========================================
   TICKET-BUTTONS: mobile visibility + full red buttons
   - sorgt dafür, dass Buttons in ft-card-Actions nicht abgeschnitten werden
   - macht Buttons vollrot mit weißer Schrift (hohe Priorität via !important)
   ========================================= */

@media (max-width: 900px) {
  /* Buttons in Karten sichtbar und zentriert */
  .ft-card__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: .5rem !important;
    position: relative !important;
    z-index: 0 !important;
  }

  /* Buttons selbst sicher anzeigen */
  .ft-card__actions .ft-btn,
  .ft-card__actions a.ft-btn,
  .ft-card__actions .button {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Verhindert, dass die Karte die Buttons abschneidet */
  .ft-card,
  .ft-card__media {
    overflow: visible !important;
  }
}

/* Universelles Styling für Ticket- / Aktions-Buttons (hohe Priorität)
   Falls du nur bestimmte Buttons färben willst, sag mir kurz welche
   Klasse/Seiten—ich passe die Selektoren an. */
.ft-card__actions .ft-btn,
.ft-card__actions a.ft-btn,
.ft-btn--primary,
.ft-btn {
  background-color: #DC0414 !important; /* kräftiges rot */
  color: #ffffff !important;
  border: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  padding: 0.5rem 1rem !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

.ft-card__actions .ft-btn:hover,
.ft-btn--primary:hover,
.ft-btn:hover {
  filter: brightness(0.92) !important;
}

/* Center buttons horizontally inside card actions on all viewports */
.ft-card__actions {
  justify-content: center !important;
  align-items: center !important;
}

/* =========================================
   MOBILE MENU: replace circular markers with down-arrow chevrons
   - overrides treemenu .toggler:before to show a chevron pointing down
   - on opened nodes (.tree-opened) flip the chevron to point up
   ========================================= */

/* Use a compact CSS-only chevron so we don't depend on icon fonts */
.treemenu .toggler:before {
  content: '' !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin-right: .6rem !important;
  vertical-align: middle !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 7px solid #DC0414 !important; /* red chevron */
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Open node: point chevron upwards */
.treemenu li.tree-opened > .toggler:before {
  border-top: none !important;
  border-bottom: 7px solid #DC0414 !important;
  transform: translateY(-1px) !important;
}

/* Keep small / muted marker for empty nodes, but as a small square */
.treemenu li.tree-empty > .toggler:before {
  border: none !important;
  width: .45rem !important;
  height: .45rem !important;
  background: #DC0414 !important;
  display: inline-block !important;
  margin-right: .6rem !important;
  vertical-align: middle !important;
  border-radius: 2px !important;
  opacity: .6 !important;
}

/* =========================================
   FOOTER – mobile: center links & make top-level columns centered
   - Stack the three footer columns and center their contents on small screens
   - Center the list of links and make them vertical for easy tapping
   ========================================= */

@media (max-width: 900px) {
  #footer .footer-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1.25rem 0 !important;
  }

  /* make each column full width and center text */
  #footer .footer-main .column {
    width: 100% !important;
    max-width: 720px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 0 .75rem !important;
  }

  /* center the nav links and stack them vertically */
  #footer .footer-links ul {
    display: flex !important;
    flex-direction: column !important;
    gap: .5rem !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  #footer .footer-links ul li {
    width: auto !important;
  }

  #footer .footer-links ul li a {
    display: inline-block !important;
    color: inherit !important;
    text-decoration: none !important;
    padding: .25rem 0 !important;
    font-weight: 600 !important;
  }

  /* ensure address and hours block spacing looks good */
  .footer-address, .footer-hours {
    margin: 0 auto !important;
  }
}