:root {
  --hyphon-navy: #062238;
  --hyphon-navy-deep: #071d2d;
  --hyphon-gold: #e7b52d;
  --hyphon-burgundy: #820d2c;
  --hyphon-cream: #fbf7ef;
  --hyphon-ink: #17202c;
}

/* Twenty Twenty-Five typography override: one fast, consistent system sans stack. */
html body,
html body button,
html body input,
html body select,
html body textarea,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* App-style pages provide their own accessible H1; remove the duplicate theme title. */
body.page-id-11 .wp-block-post-title,
body.page-id-156 .wp-block-post-title,
body.page-id-157 .wp-block-post-title {
  display: none;
}

/* Hyphon's event layout already supplies the branded hero artwork. */
body.single-hyphon_event .wp-block-post-featured-image {
  display: none;
}

/* Demo landing page: use the same black, navy, gold and burgundy language as My Tickets. */
body.page-id-157 main.wp-block-group {
  color: var(--hyphon-ink);
}

body.page-id-157 main.wp-block-group > .wp-block-group:first-child {
  background: linear-gradient(135deg, #050505 0%, var(--hyphon-navy-deep) 100%) !important;
  border: 2px solid var(--hyphon-gold);
  border-radius: 22px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
}

body.page-id-157 main.wp-block-group > .wp-block-group:first-child h1 {
  color: #f0bd31;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 800;
  font-size: clamp(2.35rem, 6vw, 4rem) !important;
  line-height: 1.04;
}

body.page-id-157 main.wp-block-group > .wp-block-group:first-child p {
  color: #fff;
}

body.page-id-157 .wp-block-button__link,
.hyphon-event-card-body .button,
.single-hyphon_event .hyphon-pay-button {
  background: var(--hyphon-burgundy) !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 800;
  padding: 11px 17px;
  text-decoration: none;
}

body.page-id-157 .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border: 1px solid var(--hyphon-gold) !important;
  color: #fff !important;
}

body.page-id-157 main.wp-block-group > h2 {
  color: var(--hyphon-navy);
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 2.7rem);
  margin-top: 46px;
}

body.page-id-157 main.wp-block-group > .wp-block-columns {
  gap: 18px;
}

body.page-id-157 main.wp-block-group > .wp-block-columns > .wp-block-column {
  background: #fff;
  border: 1px solid #ded8cd;
  border-radius: 18px;
  border-top: 5px solid var(--hyphon-gold);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .07);
  padding: 24px;
}

body.page-id-157 .wp-block-column h3,
.hyphon-event-card-body h2 {
  color: var(--hyphon-navy);
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 800;
}

body.page-id-157 main.wp-block-group > ul {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.page-id-157 main.wp-block-group > ul li {
  background: #fff;
  border: 1px solid #ded8cd;
  border-left: 6px solid var(--hyphon-gold);
  border-radius: 12px;
  padding: 15px 18px;
}

body.page-id-157 main.wp-block-group > ul a {
  color: var(--hyphon-burgundy);
  font-weight: 800;
}

/* Event cards now match the white My Tickets cards. */
.hyphon-event-card {
  border: 1px solid #ded8cd;
  border-top: 5px solid var(--hyphon-gold);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .08) !important;
}

.hyphon-event-card-meta {
  color: var(--hyphon-burgundy) !important;
}

.hyphon-event-card-body .button:hover,
body.page-id-157 .wp-block-button__link:hover,
.single-hyphon_event .hyphon-pay-button:hover {
  background: #650922 !important;
  color: #fff !important;
}

/* Carry the same card finish into the event booking panel. */
.single-hyphon_event .hyphon-booking-form {
  border-color: var(--hyphon-gold) !important;
  box-shadow: 0 14px 34px rgba(6, 34, 56, .16) !important;
}

.single-hyphon_event .hyphon-booking-form::before {
  background: var(--hyphon-gold) !important;
  color: #111 !important;
}

@media (max-width: 700px) {
  body.page-id-157 main.wp-block-group > .wp-block-group:first-child {
    border-radius: 16px !important;
    padding: 30px 20px !important;
  }

  body.page-id-157 main.wp-block-group > .wp-block-columns > .wp-block-column {
    padding: 20px;
  }
}