/* Theme customizations (loaded after screen.css)
   (c) 2026 KOCH ESSEN Kommunikation + Design GmbH <https://koch-essen.de/>
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Pretix widget
   Restyles the embedded pretix.eu ticket-shop widget (v2) so that it
   matches the rest of the theme. Pretix exposes class names prefixed
   with `pretix-widget`, see https://docs.pretix.eu/guides/widget/. */

/* Outer container — blend into the page, no box */
.post-content pretix-widget,
.post-content .pretix-widget-wrapper {
   display: block;
   width: 100%;
   border: 0;
   background-color: transparent;
}

.post-content .pretix-widget-wrapper {
   padding: 0;
}

/* Inner widget container (also used by the noscript fallback) */
.post-content .pretix-widget {
   margin: 0;
   padding: 0;
   min-height: 0;
   border: 0;
   background-color: transparent;
   color: var(--color-font-one);
   font-size: var(--font-size-xxs);
}

/* Typography */
.post-content .pretix-widget :is(h1, h2, h3, h4) {
   font-family: var(--font-family-one);
   font-weight: var(--font-weight-one-bold);
   padding: 0;
}

.post-content .pretix-widget h3 {
   font-size: var(--font-size-m);
   margin: 0 0 12px;
}

/* Form fields */
.post-content .pretix-widget :is(button, input, select, textarea),
.post-content .pretix-widget-wrapper :is(button, input, select, textarea) {
   font-family: var(--font-family-post-content);
}

.post-content .pretix-widget :is(input[type="text"], input[type="number"], input[type="email"], select, textarea) {
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   background-color: var(--color-body);
   color: var(--color-font-one);
   box-shadow: none;
}

.post-content .pretix-widget :is(input, select, textarea):focus {
   outline: 2px solid var(--ghost-accent-color);
   outline-offset: 2px;
}

/* Buttons — keep Pretix's (brand-blue) colors, just match the page's
   4px corners instead of Pretix's pill default. */
.post-content .pretix-widget :is(button, input[type="submit"], a.pretix-widget-button, .pretix-widget-primary-action),
.post-content .pretix-widget-wrapper :is(button, input[type="submit"], a.pretix-widget-button, .pretix-widget-primary-action),
.post-content .pretix-button {
   border-radius: 4px;
   font-weight: var(--font-weight-post-content-bold);
   transition: opacity .15s ease;
}

.post-content .pretix-widget :is(button, input[type="submit"], a.pretix-widget-button, .pretix-widget-primary-action):hover,
.post-content .pretix-widget-wrapper :is(button, input[type="submit"], a.pretix-widget-button, .pretix-widget-primary-action):hover,
.post-content .pretix-button:hover {
   opacity: .9;
}

/* Quantity +/- spinner buttons — square, 4px corners, centered glyph */
.post-content .pretix-widget .pretix-widget-item-count-group :is(.pretix-widget-item-count-dec, .pretix-widget-item-count-inc) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   border-radius: 4px;
}

.post-content .pretix-widget .pretix-widget-item-count-group :is(.pretix-widget-item-count-dec, .pretix-widget-item-count-inc) span {
   display: block;
   line-height: 1;
}

/* Event list — stacked entries separated by thin rules */
.post-content .pretix-widget .pretix-widget-event-list {
   padding: 0;
}

.post-content .pretix-widget .pretix-widget-event-list-entry {
   flex-direction: column;
   align-items: stretch;
   gap: 10px;
   padding: 24px 0;
   margin: 0;
   border: 0;
   border-top: 1px solid var(--color-border);
   border-radius: 0;
   background-color: transparent;
   color: var(--color-font-one);
}

.post-content .pretix-widget .pretix-widget-event-list-entry:first-child {
   border-top: 0;
}

.post-content .pretix-widget .pretix-widget-event-list-entry:is(:hover, :focus-visible) {
   padding-left: 16px;
   padding-right: 16px;
   margin-left: -16px;
   margin-right: -16px;
   border-top-color: transparent;
   border-radius: 4px;
   background-color: var(--color-two);
}

.post-content .pretix-widget .pretix-widget-event-list-entry:is(:hover, :focus-visible) + .pretix-widget-event-list-entry {
   border-top-color: transparent;
}

.post-content .pretix-widget .pretix-widget-event-list-entry-name {
   width: 100%;
   padding: 0;
   font-family: var(--font-family-one);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-one-bold);
}

.post-content .pretix-widget .pretix-widget-event-list-entry-date {
   width: 100%;
   padding: 0;
   font-size: var(--font-size-xxxs);
   opacity: .7;
}

/* Availability "button" — full-width pink CTA like the page's "Anmelden".
   Pretix injects its own (brand-blue) stylesheet AFTER ours, so these rules
   need extra specificity (the entry + entry-availability classes) and a few
   !important properties to win against its runtime-injected styles. */
.post-content .pretix-widget .pretix-widget-event-list-entry .pretix-widget-event-list-entry-availability {
   text-align: center;
   padding: 0;
}

.post-content .pretix-widget .pretix-widget-event-list-entry .pretix-widget-event-list-entry-availability span {
   display: block !important;
   box-sizing: border-box;
   padding: 12px 22px !important;
   border: 0 !important;
   border-radius: 4px !important;
   background-color: var(--ghost-accent-color) !important;
   color: var(--color-font-white) !important;
   font-size: var(--font-size-xxs);
   font-weight: var(--font-weight-post-content-bold);
   text-transform: none;
   letter-spacing: 0;
   white-space: nowrap;
}

@media (max-width: 768px) {
   .post-content .pretix-widget .pretix-widget-event-list-entry .pretix-widget-event-list-entry-availability {
      width: 100% !important;
      max-width: 100%;
   }

   .post-content .pretix-widget .pretix-widget-event-list-entry .pretix-widget-event-list-entry-availability span {
      width: 100% !important;
      max-width: 100%;
   }
}

/* Remove the colored left stripe entirely */
.post-content .pretix-widget .pretix-widget-event-list-entry .pretix-widget-event-list-entry-availability span:before {
   display: none !important;
}

/* Sold-out keeps a clear (themed) red */
.post-content .pretix-widget .pretix-widget-event-availability-red .pretix-widget-event-list-entry-availability span {
   background-color: #d23c3c !important;
}

/* Calendar view */
.post-content .pretix-widget .pretix-widget-event-calendar-event {
   border-radius: calc(var(--radius) * 1.5);
   font-weight: var(--font-weight-post-content-bold);
}

/* Filter form & "load more" spacing */
.post-content .pretix-widget .pretix-widget-event-list-filter-form {
   margin-bottom: 16px;
}

.post-content .pretix-widget .pretix-widget-event-list-load-more {
   margin-top: 16px;
}

.post-content .pretix-widget .pretix-widget-event-description {
   margin-top: 32px;
   margin-bottom: 32px;
}

.post-content .pretix-widget .pretix-widget-event-description blockquote:not([class]) {
   line-height: 1.4;
   padding-left: 2rem;
   border-left: 2px solid var(--ghost-accent-color);
}

.post-content .pretix-widget .pretix-widget-event-description blockquote:not([class]) blockquote {
   margin: 0;
   padding-left: 0;
   border-left: 0;
}

/* Loading spinner & primary fill */
.post-content .pretix-widget .pretix-widget-primary-color {
   fill: var(--ghost-accent-color);
}

/* "powered by pretix" footer link — make it subtle */
.post-content .pretix-widget a[href*="pretix.eu"] {
   font-size: var(--font-size-xxxs);
   opacity: .6;
}

/* Checkout overlay (lives outside .post-content, hence no prefix) */
.pretix-widget-frame-inner,
.pretix-widget-lightbox-inner,
.pretix-widget-alert-box {
   border-radius: calc(var(--radius) * 3);
   background: var(--color-body);
}

.pretix-widget-frame-close button,
.pretix-widget-lightbox-close button {
   background: var(--ghost-accent-color);
}

/* Blockquote — flatten nested quotes, add vertical spacing */
.post-content blockquote:not([class]) {
   margin-top: 2.5vh;
   margin-bottom: 2.5vh;
}

.post-content > * + blockquote:not([class]),
.post-content > blockquote:not([class]) + *,
.post-content > blockquote:not([class]) + [id]:not(:first-child) {
   margin-top: 2.5vh;
}

.post-content blockquote:not([class]) blockquote {
   margin: 0;
   padding-left: 0;
   border-left: 0;
}

/* Topics buttons (home feed) — all public tags as centered chips */
.topics-section {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: calc(var(--grid-gap) / 3);
   margin: 0 auto calc(var(--grid-gap) / 1.2);
   padding-top:.45em;
}

.topics-section .g-btn.is-topic {
   padding: .45em 1.25em;
   font-size: var(--font-size-xs);
   border: 2px solid var(--color-font-one);
   color: var(--color-font-one);
}

/* Override g-btn's solid accent fill: keep it transparent until hover */
.topics-section .g-btn.is-topic::after {
   background-color: transparent;
   transition: background-color .2s ease, opacity .2s ease;
}

.topics-section .g-btn.is-topic:hover {
   color: var(--color-font-white);
   border-color: var(--ghost-accent-color);
}
  
.topics-section .g-btn.is-topic:hover::after {
    opacity: 1;
    background-color: var(--ghost-accent-color);
}

/* About section */
.special-section + .about-wrap .about-overlay {
   top: min(18vh, 170px);
}

.special-section + .about-wrap {
   margin-top: clamp(40px, 1.4vw + 33.3px, 60px);
}

.about-overlay {
   position: absolute;
   z-index: -1;
   top: 0;
   right: var(--site-gap);
   bottom: -0;
   left: var(--site-gap);
   margin: 0;
}