/*** Tango Spirit – Custom CSS ***/

/*** Vars ***/
:root{
  --nl-pull: 10rem;              /*** how far the newsletter box is pulled upward ***/
  --nl-gap-footer: 1rem;         /*** visible gap between newsletter box and footer content ***/
  --nl-max-width: 980px;         /*** max width of newsletter widget ***/

  --ust-logo-height-mobile: 160px;
  --ust-logo-shift-mobile-offset: 48px;
}

/*** Headlines ***/
h1,h2,h3,h4{ font-weight:300; text-align:center; color:#660000; }

/*** No rounding ***/
body *{ border-radius:0 !important; }

/*** Hero mask ***/
.wp-block-ust-hero-slider{ position:relative; }
.wp-block-ust-hero-slider::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('/wp-content/themes/ust/customs/img/tango-spirit-hero-mask.svg');
  background-repeat:no-repeat;
  background-size:102%;
  background-position:center bottom;
  z-index:1;
  pointer-events:none;
}

/*** Header colors without hero ***/
body:not(.has-hero) .site-header{
  --ust-header-sticky-link-initial: var(--ust-header-sticky-link-scrolled);
  --ust-header-sticky-text-initial: var(--ust-header-sticky-text-scrolled);
  --ust-header-link: var(--ust-header-sticky-link-scrolled);
  --ust-header-text: var(--ust-header-sticky-text-scrolled);
}

/*** Sticky header gradient ***/
body.ust-has-tophero.ust-hsticky-sticky .site-header,
body.ust-has-tophero.ust-hsticky-sticky .ust-header{
  background:linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
}

/*** Content top reset ***/
.site-content{
  margin-top:0;
  padding-top:0 !important;
}

/*** Footer overlap basics ***/
.site-footer.ust-footer,
.site-footer.ust-footer .ust-footer-inner,
.site-footer.ust-footer .ust-footer-widgets,
.site-footer.ust-footer .ust-after-content-widgets{
  overflow:visible !important;
}

/*** Reserve space in content for the pulled-up newsletter box ***/
#content,
.site-content{
  padding-bottom: var(--nl-pull) !important;
}

/*** Do not artificially push footer content down ***/
.site-footer.ust-footer .ust-footer-inner{
  padding-top:0 !important;
  margin-top:0 !important;
}

/*** Pull newsletter area upwards and remove leftover layout space ***/
.site-footer.ust-footer .ust-after-content-widgets{
  margin-top:0 !important;
  margin-bottom:calc((-1 * var(--nl-pull)) + var(--nl-gap-footer)) !important;
  transform:translateY(calc(-1 * var(--nl-pull))) !important;
  position:relative;
  z-index:10;
}

/*** Upper widget area: always one column, centered, limited width ***/
.site-footer.ust-footer .ust-after-content-widgets .ust-widget-grid{
  display:grid;
  grid-template-columns:1fr !important;
  justify-content:center;
}

.site-footer.ust-footer .ust-after-content-widgets .ust-widget-grid > *{
  grid-column:1 / -1 !important;
  width:min(100%, var(--nl-max-width)) !important;
  max-width:var(--nl-max-width) !important;
  margin-inline:auto !important;
}

/*** Footer widgets area only: responsive grid ***/
.ust-footer-widgets .ust-widget-grid{
  display:grid;
}

@media (max-width:1024px){
  .ust-footer-widgets .ust-widget-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:640px){
  .ust-footer-widgets .ust-widget-grid{
    grid-template-columns:1fr;
  }
}

/*** Event tables ***/
.wp-block-table table,
.entry-content table{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0 0.6rem !important;
  border:0 !important;
  background:transparent !important;
  font-size:0.95rem;
  line-height:1.35;
}
.wp-block-table td,
.entry-content table td{
  border:0 !important;
  vertical-align:top;
  background:transparent !important;
}
.wp-block-table tbody tr,
.entry-content table tbody tr{ background:rgba(0,0,0,0.03); }
.wp-block-table td:last-child,
.entry-content table td:last-child{
  white-space:nowrap;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/*** Event tables mobile ***/
@media (max-width:720px){
  .wp-block-table table,
  .entry-content table{ border-spacing:0; }

  .wp-block-table tbody,
  .entry-content tbody{ display:block; }

  .wp-block-table tr,
  .entry-content tr{
    display:grid;
    grid-template-columns:auto auto auto 1fr;
    grid-template-areas:
      "dow date time price"
      "title title title title";
    gap:0.35rem 0.75rem;
    padding:0.75rem 0.85rem;
    margin:0 0 0.6rem 0;
    background:rgba(0,0,0,0.02);
  }

  .wp-block-table td,
  .entry-content td{
    padding:0 !important;
    border:0 !important;
    white-space:normal;
    min-width:0;
  }

  .wp-block-table td:nth-child(1),
  .entry-content td:nth-child(1){ grid-area:dow; font-weight:600; }
  .wp-block-table td:nth-child(2),
  .entry-content td:nth-child(2){ grid-area:date; opacity:0.85; }
  .wp-block-table td:nth-child(3),
  .entry-content td:nth-child(3){ grid-area:time; opacity:0.85; }
  .wp-block-table td:nth-child(4),
  .entry-content td:nth-child(4){ grid-area:title; }
  .wp-block-table td:nth-child(5),
  .entry-content td:nth-child(5){ grid-area:price; justify-self:end; }
}

/*** Gutenberg tables (4 cols) ***/
figure.wp-block-table > table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 0.6rem !important;
  border:0 !important;
  background:transparent !important;
  font-size:0.95rem;
  line-height:1.35;
}
figure.wp-block-table > table thead th{
  padding:0.6rem 0.75rem !important;
  border:0 !important;
  background:rgba(0,0,0,0.05) !important;
  font-weight:600 !important;
  text-align:left !important;
  white-space:nowrap !important;
  vertical-align:top !important;
}
figure.wp-block-table > table thead th:first-child{ border-radius:8px 0 0 8px !important; }
figure.wp-block-table > table thead th:last-child{
  border-radius:0 8px 8px 0 !important;
  text-align:right !important;
}
figure.wp-block-table > table td{
  padding:0.5rem 0.75rem !important;
  border:0 !important;
  vertical-align:top !important;
  background:transparent !important;
}
figure.wp-block-table > table tbody tr{ background:rgba(0,0,0,0.03) !important; }
figure.wp-block-table > table td:last-child{
  white-space:nowrap;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
figure.wp-block-table > table tbody tr:has(td:nth-child(3):empty):has(td:nth-child(4):empty){ display:none; }

/*** Gutenberg tables mobile ***/
@media (max-width:720px){
  figure.wp-block-table > table{ border-spacing:0 !important; }
  figure.wp-block-table > table tbody{ display:block; }

  figure.wp-block-table > table tbody tr{
    display:grid !important;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "c1 c2 c3"
      "c4 c4 c4";
    gap:0.35rem 0.75rem;
    padding:0.75rem 0.85rem;
    margin:0 0 0.6rem 0;
    border:1px solid rgba(0,0,0,0.14);
    border-radius:12px;
    background:rgba(0,0,0,0.02) !important;
  }

  figure.wp-block-table > table tbody td{
    padding:0 !important;
    border:0 !important;
    white-space:normal;
    min-width:0;
  }

  figure.wp-block-table > table tbody td:nth-child(1){ grid-area:c1; font-weight:600; }
  figure.wp-block-table > table tbody td:nth-child(2){ grid-area:c2; opacity:0.85; }
  figure.wp-block-table > table tbody td:nth-child(3){ grid-area:c3; justify-self:end; white-space:nowrap; }
  figure.wp-block-table > table tbody td:nth-child(4){ grid-area:c4; }

  figure.wp-block-table > table tbody td:nth-child(3):last-child{ grid-area:c3; }
}

/*** CF7 base ***/
form.wpcf7-form{
  --cf7-gap:14px;
  --cf7-radius:12px;
  --cf7-border:rgba(0,0,0,0.14);
  --cf7-soft:rgba(0,0,0,0.04);
  --cf7-text:rgba(0,0,0,0.85);
  --cf7-muted:rgba(0,0,0,0.60);
  --cf7-focus:rgba(0,0,0,0.25);

  display:grid;
  grid-template-columns:1fr;
  gap:var(--cf7-gap);
  color:var(--cf7-text);
}
form.wpcf7-form p{ margin:0; }
form.wpcf7-form label{
  display:block;
  font-size:0.92rem;
  margin:0 0 6px;
  color:var(--cf7-text);
}
form.wpcf7-form input[type="text"],
form.wpcf7-form input[type="email"],
form.wpcf7-form input[type="tel"],
form.wpcf7-form input[type="url"],
form.wpcf7-form input[type="number"],
form.wpcf7-form select,
form.wpcf7-form textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding:11px 12px;
  border-radius:var(--cf7-radius);
  border:1px solid var(--cf7-border);
  background:rgba(255,255,255,0.75);
  color:var(--cf7-text);
  outline:none;
  transition:border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
form.wpcf7-form textarea{ min-height:110px; resize:vertical; }
form.wpcf7-form input::placeholder,
form.wpcf7-form textarea::placeholder{ color:var(--cf7-muted); }
form.wpcf7-form input:focus,
form.wpcf7-form select:focus,
form.wpcf7-form textarea:focus{
  border-color:var(--cf7-focus);
  box-shadow:0 0 0 4px rgba(0,0,0,0.06);
  background:rgba(255,255,255,0.95);
}
form.wpcf7-form select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.45) 50%),
    linear-gradient(135deg, rgba(0,0,0,0.45) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:38px;
}
form.wpcf7-form .wpcf7-list-item{ margin:0 14px 8px 0; }
form.wpcf7-form .wpcf7-list-item label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:0.95rem;
}
form.wpcf7-form input[type="checkbox"],
form.wpcf7-form input[type="radio"]{ width:18px; height:18px; margin:0; }
form.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label{
  color:var(--cf7-muted);
  font-size:0.92rem;
  line-height:1.35;
}
form.wpcf7-form hr{
  border:0;
  height:1px;
  background:rgba(0,0,0,0.10);
  margin:18px 0;
}
form.wpcf7-form input[type="submit"]{
  width:100%;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--cf7-border);
  background:rgba(0,0,0,0.86);
  color:rgba(255,255,255,0.95);
  cursor:pointer;
  transition:transform 120ms ease, filter 120ms ease;
}
form.wpcf7-form input[type="submit"]:hover{ filter:brightness(1.05); }
form.wpcf7-form input[type="submit"]:active{ transform:translateY(1px); }
form.wpcf7-form .wpcf7-response-output{
  border-radius:var(--cf7-radius);
  border:1px solid var(--cf7-border);
  padding:12px 14px;
  margin:14px 0 0;
  background:var(--cf7-soft);
}
form.wpcf7-form span.wpcf7-not-valid-tip{
  font-size:0.88rem;
  color:rgba(160,0,0,0.85);
  margin-top:6px;
}
@media (min-width:820px){
  form.wpcf7-form{ grid-template-columns:1fr 1fr; align-items:start; }
  form.wpcf7-form p:not(.cf7-half){ grid-column:1 / -1; }
  form.wpcf7-form p.cf7-half{ grid-column:auto; }
}
form.wpcf7-form p:has(input[type="submit"]){ grid-column:1 / -1; }

/*** Nav mobile ***/
@media (max-width:1360px){
  #ust-primary-menu{
    background:var(--ust-header-sticky-bg, #ffffff);
    color:var(--ust-header-sticky-text-scrolled, #111111);
    --ust-header-sticky-link-initial: var(--ust-header-sticky-link-scrolled);
    --ust-header-sticky-text-initial: var(--ust-header-sticky-text-scrolled);
    --ust-header-link: var(--ust-header-sticky-link-scrolled);
    --ust-header-text: var(--ust-header-sticky-text-scrolled);
  }

  #ust-primary-menu li.menu-item-has-children > ul.sub-menu{
    display:none;
    margin:.25rem 0 .5rem;
    padding-left:1rem;
    list-style:none;
  }
  #ust-primary-menu li.ust-submenu-open > ul.sub-menu{ display:block; }

  #ust-primary-menu a,
  #ust-primary-menu a:visited{
    color:var(--ust-header-sticky-link-scrolled, var(--ust-header-sticky-text-scrolled, #111));
  }
}

/*** Nav desktop ***/
@media (min-width:1361px){
  #ust-primary-menu > li{ position:relative; }

  #ust-primary-menu > li > ul.sub-menu{
    display:none;
    position:absolute;
    top:calc(100% + 0.5rem);
    left:0;
    min-width:14rem;
    margin:.75rem 0 0;
    padding:.65rem 0;
    list-style:none;
    background:var(--ust-header-sticky-bg, #ffffff);
    color:var(--ust-header-sticky-text-scrolled, #111111);
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.14);
    z-index:9999;
  }

  #ust-primary-menu > li.ust-submenu-open > ul.sub-menu{ display:block; }

  .ust-nav ul.sub-menu a{
    display:block;
    padding:.55rem .95rem;
    color:inherit;
  }
}

/*** Mobile header/logo + content shift ***/
@media (max-width:1360px){
  .ust-header .ust-header-branding{ min-height:100%; }
  #content{ margin-top:10vh; }
}

/*** Logo shift controlled by JS var ***/
.site-header .site-logo{
  transform:translateY(var(--logo-shift, 0px));
  will-change:transform;
}
.ust-nav-toggle:hover{ color:#FFF; }

/*** Gutenberg groups without background ***/
:root :where(.wp-block-group):not(.has-background):not([style*="background"]){
  background-color:transparent !important;
}

/*** Event post type meta + accordion ***/
.ust-event-meta{
  border:none;
  text-align:center;
  margin-top:-2em;
  font-weight:400;
}
details.ust-acc{
  border:none;
  background:rgba(204,197,94,.25);
}

/* =========================================
   Tango Spirit Tickets im Gutenberg-Accordion
   Wrapper:
   <details class="wp-block-ust-event-accordion-section ust-acc" id="tango-spirit-pakete">
   ========================================= */

#tango-spirit-pakete {
  --ticket-border:var(--ust-button-bg);
  --ticket-text:#3d0000;
  --ticket-muted:var(--ust-button-bg);
  --ticket-label:#c2a57a;
  --ticket-gap:1.75rem;
  --ticket-radius:1.75rem;
  --ticket-padding:1.5rem;
}

/* etwas Luft im Inhaltsbereich */
#tango-spirit-pakete[open] > *:not(summary) {
  margin-top:1.25rem;
}

/* Überschriften innerhalb des Ticketbereichs */
#tango-spirit-pakete h2 {
  margin:0 0 1rem;
}

#tango-spirit-pakete h3 {
  margin:0 0 0.9rem;
  line-height:1.15;
}

/* Gutenberg Columns als Ticket-Grid */
#tango-spirit-pakete .wp-block-columns {
  display:flex;
  flex-wrap:wrap;
  gap:var(--ticket-gap);
  margin-bottom:2rem;
  align-items:stretch;
}

/* 3 Spalten Desktop */
#tango-spirit-pakete .wp-block-columns > .wp-block-column {
  flex:1 1 0;
  min-width:0;
  display:flex;
}

/* eigentliche Karte */
#tango-spirit-pakete .wp-block-columns > .wp-block-column > .wp-block-group {
  display:flex;
  flex-direction:column;
  width:100%;
  padding:var(--ticket-padding);
  border:1px solid var(--ticket-border);
  border-radius:var(--ticket-radius);
  background:var(--ticket-bg);
  box-sizing:border-box;
}

/* Label */
#tango-spirit-pakete .ts-ticket-label {
  margin:0 0 1rem;
  font-size:0.82rem;
  line-height:1.2;
  letter-spacing:0.05em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ticket-label);
}

/* Standard-Absätze in Karten */
#tango-spirit-pakete .wp-block-columns > .wp-block-column > .wp-block-group > p {
  margin-top:0;
  margin-bottom:0.85rem;
}

/* Preis hervorheben:
   im aktuellen Markup ist das meist der Absatz direkt vor der Liste */
#tango-spirit-pakete .wp-block-columns > .wp-block-column > .wp-block-group > ul,
#tango-spirit-pakete .wp-block-columns > .wp-block-column > .wp-block-group > ol {
  margin:0 0 1rem 1.2rem;
  padding-left:0.2rem;
}

#tango-spirit-pakete .wp-block-columns > .wp-block-column > .wp-block-group > ul li,
#tango-spirit-pakete .wp-block-columns > .wp-block-column > .wp-block-group > ol li {
  margin-bottom:0.2rem;
}

/* letzter Hinweis vor dem Button */
#tango-spirit-pakete .wp-block-columns > .wp-block-column > .wp-block-group > p:last-of-type {
  color:var(--ticket-muted);
}

/* Buttons immer nach unten drücken */
#tango-spirit-pakete .wp-block-columns > .wp-block-column > .wp-block-group .wp-block-buttons {
  margin-top:auto;
  padding-top:0.75rem;
}

/* Button vollbreit */
#tango-spirit-pakete .wp-block-columns > .wp-block-column > .wp-block-group .wp-block-buttons .wp-block-button {
  width:100%;
}

#tango-spirit-pakete .wp-block-columns > .wp-block-column > .wp-block-group .wp-block-button__link {
  display:inline-flex;
  width:100%;
  justify-content:center;
  align-items:center;
  text-align:center;
  box-sizing:border-box;
  min-height:3.25rem;
  padding:0.9rem 1.2rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
}

/* Tablet */
@media (max-width:980px) {
  #tango-spirit-pakete .wp-block-columns > .wp-block-column {
    flex:1 1 calc(50% - var(--ticket-gap));
  }
}

/* Mobil */
@media (max-width:640px) {
  #tango-spirit-pakete .wp-block-columns {
    display:block;
  }

  #tango-spirit-pakete .wp-block-columns > .wp-block-column {
    display:block;
    width:100%;
    margin-bottom:1.25rem;
  }
}

/* Gemeinsame Formularbasis */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="url"],
form input[type="number"],
form input[type="date"],
form select,
form textarea {
  width:100%;
  min-height:54px;
  padding:0 1rem;
  border:1px solid #d8d8d8;
  background:#fff;
  color:#222;
  font:inherit;
  line-height:1.4;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  box-sizing:border-box;
}

form textarea {
  min-height:140px;
  padding-top:0.9rem;
  padding-bottom:0.9rem;
  resize:vertical;
}

form input:focus,
form select:focus,
form textarea:focus {
  outline:none;
  border-color:#8a6a3d;
  box-shadow:0 0 0 3px rgba(138,106,61,.12);
}

form label {
  display:block;
  margin:0 0 .45rem;
  font-size:.95rem;
  line-height:1.35;
  color:#222;
}

form .form-row,
form p {
  margin:0 0 1.1rem;
}

form input[type="checkbox"],
form input[type="radio"] {
  accent-color:#8a6a3d;
}

form button,
form input[type="submit"],
form .wp-element-button {
  min-height:54px;
  padding:.85rem 1.25rem;
  border:0;
  background:#8a6a3d;
  color:#fff;
  font:inherit;
  font-weight:600;
  cursor:pointer;
  transition:transform .15s ease, opacity .2s ease, background-color .2s ease;
}

form button:hover,
form input[type="submit"]:hover,
form .wp-element-button:hover {
  opacity:.92;
}

form button:active,
form input[type="submit"]:active,
form .wp-element-button:active {
  transform:translateY(1px);
}

/* Newsletter visuell an Hauptform angleichen */
.newsletter,
.mailpoet_form,
.mc4wp-form {
  margin-top:2rem;
  width:100%;
  max-width:100%;
  text-align:center;
}

.newsletter form,
.mailpoet_form form,
.mc4wp-form form {
  width:100%;
  max-width:100%;
}

.newsletter small,
.mailpoet_form small,
.mc4wp-form small {
  color:#666;
  font-size:.875rem;
  line-height:1.45;
}

/* Honeypot oder technische Hilfsfelder komplett neutral halten */
.newsletter .hp,
.mailpoet_form .hp,
.mc4wp-form .hidden,
.mailpoet-hp-wrap {
  position:absolute !important;
  left:-9999px !important;
}