/* Trainings shop: additions on top of the shared style.css (same colours: purple #67267a, orange #ff8f42, grey #f6f6f6) */

/* hero: shorter than on the start page, same image */
#hero.trainings .hero-content { height: 24em; }
#hero.trainings .hero-content h1 { text-transform: none; }
#hero.trainings .hero-content p.hero-kicker { color: #fff; text-transform: uppercase; letter-spacing: 3px; font-size: 14px; margin-bottom: 8px; }
@media (max-width: 1400px) { #hero.trainings .hero-content { height: 20em; } }
@media (max-width: 1081px) { #hero.trainings .hero-content { height: auto; min-height: 14em; width: 75%; } }
@media (max-width: 428px)  { #hero.trainings .hero-content { min-height: 11em; width: 100%; margin: 16px 0; } #hero.trainings .hero-content p.hero-kicker { font-size: 11px; letter-spacing: 2px; } }

/* training cards on the start page */
#trainings .card { border: 0; background-color: #f6f6f6; width: 100%; margin-bottom: 0; border-radius: 4px; overflow: hidden; }
/* 24px between rows of cards (a margin on the card is reset to 0 by a general rule for the last row in style.css) */
#trainings .row { row-gap: 24px; }
#trainings .title-row, #trainings .upcoming-row { row-gap: 0; } /* headings: no gap between their lines */
#trainings .upcoming-row { margin-top: 24px; }
#trainings .card .image { width: 100%; height: auto; aspect-ratio: 1080 / 1113; object-fit: cover; display: block; }
#trainings .card-body { padding: 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
#trainings .card-body h3 { font-size: 22px; font-weight: 500; color: #67267a; margin: 0 0 8px; }
#trainings .card-body h3 a { color: inherit; }
#trainings .card-body h3 a:hover { color: inherit; }
#trainings .card-text { color: #4d4d4d; margin-bottom: 16px; }
#trainings .training-meta { list-style: none; padding: 0; margin: 0 0 16px; color: #4d4d4d; font-size: 15px; }
#trainings .training-meta li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
#trainings .training-meta .icon { width: 20px; height: 20px; flex: 0 0 20px; color: #67267a; margin-top: 2px; }
#trainings .training-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.price { font-family: "Barlow", sans-serif; font-size: 26px; font-weight: 500; color: #67267a; line-height: 1; }
.price small { display: block; font-size: 12px; font-weight: 400; color: #4d4d4d; margin-top: 4px; }
.button, .button:focus { font-weight: 600; font-size: 14px; letter-spacing: 1px; display: inline-block; padding: 12px 24px; border-radius: 50px; transition: 0.5s; line-height: 1; text-align: center; color: #fff; background-color: #67267a; border: 0; cursor: pointer; text-decoration: none; }
.button:hover { background-color: #ff8f42; color: #fff; }
.button.secondary { background-color: #fff; color: #67267a; box-shadow: inset 0 0 0 2px #67267a; }
.button.secondary:hover { background-color: #ff8f42; color: #fff; box-shadow: inset 0 0 0 2px #ff8f42; }
/* on the training pages style.css sets a filled #sub-page .button, which would otherwise win */
#sub-page .button.secondary { background-color: #fff; color: #67267a; box-shadow: inset 0 0 0 2px #67267a; }
#sub-page .button.secondary:hover { background-color: #ff8f42; color: #fff; box-shadow: inset 0 0 0 2px #ff8f42; }
#hero .button:hover { background-color: #ff8f42; color: #fff; }
.button[disabled] { opacity: 0.6; cursor: not-allowed; }
.next-date { font-size: inherit; color: #4d4d4d; }
.next-date.soldout, .next-date.none { color: #4d4d4d; }
.next-date .next-label { display: block; margin-bottom: 6px; font-size: inherit; color: inherit; }
.next-date.soldout .next-label { color: #4d4d4d; }
.next-date .next-box { display: block; padding: 8px 10px; border: 1px solid #67267a; background: #fff; color: #4d4d4d; font-size: 14px; line-height: 1.3; text-align: center; }
.next-date .next-info { display: block; margin-top: 6px; font-size: 13px; color: #67267a; }
.next-date.soldout .next-box { border-color: #ddd; color: #999; }
/* training cards on the start page: the date is a white chip with a light grey outline, not a form-field box (the booking details page keeps the box) */
#trainings .next-date .next-box { display: inline-block; padding: 6px 16px; border: 1px solid #d9d9d9; border-radius: 0; background: #fff; text-align: left; }
#trainings .next-date.soldout .next-box { color: #999; }
/* a single, sold-out date: chip crossed out with a diagonal line */
#trainings .next-date .next-box.crossed { color: #999; border-color: #e0e0e0; background: linear-gradient(155deg, transparent calc(50% - 1px), #d6d6d6 calc(50% - 1px), #d6d6d6 calc(50% + 0px), transparent calc(50% + 0px)), #fff; }
.next-date.soldout .next-info { color: #4d4d4d; }

/* "how it works" steps */
.steps { background-color: #f6f6f6; }
.steps .step { background: #fff; border-radius: 4px; padding: 56px 20px 24px; height: 100%; position: relative; text-align: left; }
.steps .step-number { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); width: 48px; height: 48px; border-radius: 50%; background: #67267a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: "Barlow", sans-serif; font-size: 20px; font-weight: 500; }
.steps .step h3 { font-size: 20px; color: #67267a; font-weight: 500; text-align: center; margin-bottom: 8px; }
.steps .step p { margin: 0; color: #4d4d4d; }
.steps .row > [class*="col-"] { margin-top: 32px; }

/* detail page: booking card */
#sub-page .training-image { width: 100%; height: auto; border-radius: 4px; margin-bottom: 24px; }
#sub-page .facts { list-style: none; padding: 0; margin: 0 0 24px; }
#sub-page .facts li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; color: #4d4d4d; }
#sub-page .facts .icon { width: 22px; height: 22px; flex: 0 0 22px; color: #67267a; margin-top: 1px; }
#sub-page .text h2.h3 { margin-top: 24px; margin-bottom: 12px; }
/* numbered with counters (1. 2. 3. and sub-items 5.1, 5.2 ...), so the browser's own list numbering is not involved */
#sub-page .agenda { padding-left: 0; margin: 0 0 1rem; list-style: none; counter-reset: item; }
#sub-page .agenda > li { position: relative; padding-left: 1.6em; margin-bottom: 6px; counter-increment: item; }
#sub-page .agenda > li::before { content: counter(item) "."; position: absolute; left: 0; }
#sub-page .agenda ol { padding-left: 0; margin-top: 6px; list-style: none; counter-reset: sub; }
#sub-page .agenda ol li { position: relative; padding-left: 2.1em; margin-bottom: 6px; counter-increment: sub; }
#sub-page .agenda ol li::before { content: counter(item) "." counter(sub); position: absolute; left: 0; }
#sub-page .booking { border: 0; background-color: #f6f6f6; border-radius: 4px; width: 100%; }
#sub-page .booking .card-body { padding: 24px; }
#sub-page .booking h2 { font-size: 22px; font-weight: 500; color: #67267a; margin-bottom: 16px; }
#sub-page .booking .price { margin-bottom: 20px; }
#sub-page .booking label { display: block; font-size: 14px; color: #67267a; font-weight: 500; margin-bottom: 6px; }
#sub-page .booking select, #sub-page .booking input[type="number"] { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; font: inherit; color: #4d4d4d; background: #fff; margin-bottom: 16px; }
#sub-page .booking .field-label { display: block; font-size: 14px; color: #67267a; font-weight: 500; margin-bottom: 6px; }
#sub-page .booking .date-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
#sub-page .booking .date-option span { display: block; }
#sub-page .booking .date-option { width: 100%; padding: 12px 4px; line-height: 1.4; border: 1px solid #ddd; border-radius: 0; background: #fff; color: #4d4d4d; font: inherit; font-size: 15px; text-align: center; cursor: pointer; }
#sub-page .booking .date-option:hover { border-color: #67267a; }
#sub-page .booking .date-option.selected { border-color: #67267a; box-shadow: 0 0 0 1px #67267a; }
#sub-page .booking .date-option:focus-visible { outline: 2px solid #ff8f42; outline-offset: 2px; }
#sub-page .booking .date-option.soldout { color: #999; border-color: #eee; cursor: not-allowed; background: linear-gradient(to top right, transparent calc(50% - 1px), #ddd, transparent calc(50% + 1px)), #fff; }
#sub-page .booking .qty[hidden] { display: none; }
#sub-page .booking .book-row { display: flex; gap: 8px; align-items: stretch; margin-top: 20px; }
#sub-page .booking .book-row .button { flex: 1 1 auto; width: auto; margin-top: 0; display: flex; align-items: center; justify-content: center; min-height: 44px; }
#sub-page .booking .qty { display: inline-flex; align-items: center; border: 1px solid #ccc; background: #fff; }
#sub-page .booking .qty button { width: 36px; height: 100%; min-height: 44px; border: 0; background: transparent; font-size: 20px; color: #67267a; cursor: pointer; }
#sub-page .booking .qty button:disabled { color: #bbb; cursor: not-allowed; }
#sub-page .booking .qty button:focus-visible { outline: 2px solid #ff8f42; outline-offset: -2px; }
#sub-page .booking .qty-value { min-width: 32px; text-align: center; font-size: 16px; color: #4d4d4d; }
#sub-page .booking .date-loading { font-size: 14px; color: #4d4d4d; margin: 0 0 16px; }
#sub-page .booking .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #4d4d4d; margin-bottom: 12px; line-height: 1.4; }
#sub-page .booking .check input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; accent-color: #67267a; }
#sub-page .booking .check a { color: #67267a; text-decoration: underline; }
#sub-page .booking .check a:hover { color: #ff8f42; }
#sub-page .booking .button { width: 100%; margin-top: 8px; }
#sub-page .booking .payment-note { font-size: 13px; color: #4d4d4d; margin: 16px 0 0; line-height: 1.4; }
#sub-page .booking .local-time { font-size: 13px; color: #4d4d4d; margin: -8px 0 0; }
#sub-page .booking .local-time + .check { margin-top: 20px; }
#sub-page .booking .seats-note { font-size: 13px; color: #67267a; margin: -8px 0 16px; }
.booking-alert { border-radius: 4px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; line-height: 1.4; }
.booking-alert.error { background: #fdecea; color: #a12622; }
.booking-alert.info { background: #fff; color: #4d4d4d; border: 1px solid #ddd; }
.waitlist p { color: #4d4d4d; }
.waitlist-more { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e3e3e3; }
.waitlist-more p { color: #4d4d4d; font-size: 15px; margin-bottom: 12px; }
.visually-hidden-noscript { display: none; }

/* thank-you / cancel pages */
#status .summary { background-color: #f6f6f6; border-radius: 4px; padding: 24px; margin: 24px 0; }
#status .summary dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
#status .summary dt { color: #67267a; font-weight: 500; }
#status .summary dd { margin: 0; color: #4d4d4d; overflow-wrap: anywhere; }
#status .status-pill { display: inline-block; padding: 6px 14px; border-radius: 50px; font-size: 14px; font-weight: 600; letter-spacing: 1px; }
#status .status-pill.confirmed { background: #e6f4ea; color: #1e6b36; }
#status .status-pill.pending { background: #fff4e5; color: #b26a00; }
#status .status-pill.failed, #status .status-pill.unknown { background: #fdecea; color: #a12622; }
#status .status-pill.refunded { background: #ececec; color: #4d4d4d; }

/* Thank-you page: skeleton while api/order-status.php loads (shop.js removes .is-loading) */
#status .skeleton-text { display: none; }
#status .is-loading .skeleton-text { display: block; margin: 0 0 16px; }
#status .is-loading .skeleton-text span,
#status .is-loading .status-pill,
#status .is-loading .summary dd { display: block; height: 14px; border-radius: 4px; color: transparent; background: linear-gradient(90deg, #e6e6e6 0%, #f3f3f3 50%, #e6e6e6 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; }
#status .is-loading .skeleton-text span { margin: 0 0 10px; }
#status .is-loading .skeleton-text span:nth-child(2) { width: 92%; }
#status .is-loading .skeleton-text span:nth-child(3) { width: 60%; }
#status .is-loading .status-pill { display: inline-block; width: 120px; height: 31px; border-radius: 50px; }
#status .is-loading .summary dd { margin-top: 5px; }
#status .is-loading .summary dd[data-field="training"] { width: 75%; }
#status .is-loading .summary dd[data-field="session"] { width: 60%; }
#status .is-loading .summary dd[data-field="quantity"] { width: 32px; }
#status .is-loading .summary dd[data-field="email"] { width: 50%; }
@keyframes skeleton-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { #status .is-loading .skeleton-text span, #status .is-loading .status-pill, #status .is-loading .summary dd { animation: none; } }
@media (max-width: 600px) { #status .summary dl { grid-template-columns: 1fr; gap: 2px 0; } #status .summary dd { margin-bottom: 10px; } }

/* legal text pages */
#sub-page.legal h2 { font-size: 22px; margin-top: 28px; }
#sub-page.legal h3 { font-size: 18px; margin-top: 20px; }
#sub-page.legal p, #sub-page.legal li { color: #4d4d4d; }

/* FAQ accordion on the start page uses the same look as the sub pages */
#faq .accordion-button { font-weight: 400; color: #fff; font-size: 18px; background-color: #67267a; margin: 1px 0; padding: 16px; }
#faq .accordion-button::after { filter: brightness(0) invert(1); }
#faq .card3 { border: 0; background-color: #f6f6f6; margin-bottom: 8px; }
#faq .accordion-body { color: #4d4d4d; }

/* phones/tablets: the booking card is below the text, so offer a jump link near the top */
.book-jump { display: none; }
@media (max-width: 991.98px) { .book-jump { display: block; margin: 0 0 24px; } }

/* booking button is a link to the Stripe Payment Link; greyed out until a date is chosen and consents are ticked */
#sub-page .booking a.book-button[aria-disabled="true"] { cursor: not-allowed; }
#sub-page .booking a.book-button[aria-disabled="true"]:hover { background-color: #67267a; }

/* newsletter sign-up: image banner with claim + dark band with the e-mail form */
/* the generic 40px section padding (style.css, #main-content > section) would leave a dark strip above the image */
#main-content > section.newsletter { padding-top: 0; padding-bottom: 0; margin: 0; }
.newsletter { padding: 0; background: #f6f6f6; color: #4d4d4d; }
.newsletter .newsletter-banner { min-height: 30em; display: flex; align-items: center; background: #3a1d3f url('../img/newsletter.webp') center / cover no-repeat; }
@media (max-width: 1920px) { .newsletter .newsletter-banner { background-image: url('../img/newsletter@1920.webp'); } }
@media (max-width: 1280px) { .newsletter .newsletter-banner { background-image: url('../img/newsletter@1280.webp'); } }
@media (max-width: 844px)  { .newsletter .newsletter-banner { background-image: url('../img/newsletter@844.webp'); } }
@media (max-width: 640px)  { .newsletter .newsletter-banner { background-image: url('../img/newsletter@640.webp'); } }
.newsletter .newsletter-claim { margin: 0; max-width: 14em; color: #fff; font-size: 48px; line-height: 1.2; font-weight: 300; font-family: inherit; }
.newsletter .newsletter-body { padding: 56px 0 64px; text-align: center; }
.newsletter .newsletter-body h2 { color: #4d4d4d; margin-bottom: 12px; text-align: center; }
.newsletter .newsletter-sub { color: #4d4d4d; margin: 0 0 28px; text-align: center; }
.newsletter .newsletter-form { max-width: 704px; margin: 0 auto; text-align: left; }
.newsletter .newsletter-field { display: flex; align-items: center; background: #fff; border: 1px solid #767676; border-radius: 999px; padding: 4px 8px 4px 28px; }
.newsletter .newsletter-field:focus-within { border-color: #67267a; outline: 2px solid #67267a; outline-offset: 2px; }
.newsletter .newsletter-field input { flex: 1; min-width: 0; background: transparent; border: 0; color: #333; font-size: 18px; padding: 14px 0; box-shadow: none; outline: none; }
.newsletter .newsletter-field input::placeholder { color: #6b6b6b; opacity: 1; }
.newsletter .newsletter-field button { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #67267a; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.newsletter .newsletter-field button { transition: background-color .3s; }
.newsletter .newsletter-field button:hover, .newsletter .newsletter-field button:focus-visible { background: #ff8f42; }
.newsletter .newsletter-field button[disabled] { opacity: .5; cursor: wait; }
.newsletter .newsletter-consent { display: flex; gap: 10px; align-items: flex-start; margin: 16px 8px 0; font-size: 14px; line-height: 1.4; color: #4d4d4d; cursor: pointer; }
.newsletter .newsletter-consent input { margin-top: 3px; flex: none; }
.newsletter .newsletter-consent a { color: #67267a; text-decoration: underline; }
.newsletter .newsletter-consent a:hover { color: #ff8f42; }
.newsletter .newsletter-msg { margin: 16px 8px 0; font-size: 16px; color: #3f3f3f; text-align: center; }
.newsletter .newsletter-msg.error { color: #b3261e; }
.newsletter .nl-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
.newsletter .nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 767px) {
  .newsletter .newsletter-banner { min-height: 20em; }
  .newsletter .newsletter-claim { font-size: 32px; }
  .newsletter .newsletter-body { padding: 40px 0 48px; }
  .newsletter .newsletter-field input { font-size: 16px; }
}

/* whole course card is clickable: the title link stretches over the card */
#trainings article.card { position: relative; transition: box-shadow 0.3s; }
#trainings article.card:hover { box-shadow: 0 4px 16px rgba(103, 38, 122, 0.18); }
#trainings article.card h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
#trainings article.card .training-footer .button { position: relative; z-index: 2; }