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

/*** Vars ***/
:root{
  --nl-pull: 10rem;          /*** Footer overlap height ***/
  --nl-clear: 2.5rem;        /*** Gap to footer content ***/

  --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 ***/
.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;
}

/*** Space for overlap ***/
#content,
.site-content{
  padding-bottom: calc(var(--nl-pull) + var(--nl-clear)) !important;
}

/*** (optional) push footer content ***/
.site-footer.ust-footer .ust-footer-inner{
  /*padding-top: calc(var(--nl-pull) + var(--nl-clear)) !important;*/
}

/*** Pull widget area upwards ***/
.site-footer.ust-footer .ust-after-content-widgets{
  margin-top: 0 !important;
  transform: translateY(calc(-1 * var(--nl-pull))) !important;
  position: relative;
  z-index: 10;
}

/*** 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);
}