/* ===== INSPIRED CONFERENCE ===== */
/* Loaded only on the "Inspired Conference" page template (see inc/assets.php).
 *
 * Desktop is built to the design comp: every size is a multiple of --u, which is 1% of the page width
 * (capped at 14px, i.e. a 1400px page). That keeps the whole layout scaling exactly like the comp.
 */

@font-face {
  font-family: "Dripdrop";
  src: url("../fonts/conference%20fonts/Dripdrop.ttf") format("truetype"),
    url("../fonts/conference%20fonts/Dripdrop.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Dripdrop Alt";
  src: url("../fonts/conference%20fonts/Dripdrop%20Alt.ttf") format("truetype"),
    url("../fonts/conference%20fonts/Dripdrop%20Alt.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Perfectly Nineties";
  src: url("../fonts/PerfectlyNineties-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Perfectly Nineties";
  src: url("../fonts/PerfectlyNineties-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/HelveticaNowDisplay-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("../fonts/HelveticaNowDisplay-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Edge-to-edge page: no browser-default body gutter around the video hero */
body.page-template-page-conference {
  margin: 0;
}

.conf,
.conf-footer {
  --u: min(1vw, 14px);
  --conf-pink: #e01a79;
  --conf-green: #029b70;
  --conf-yellow: #fccb02;
  --conf-blue: #294ab2;
  --conf-ink: #000;
  --conf-display: "Dripdrop", cursive;
  --conf-display-alt: "Dripdrop Alt", "Dripdrop", cursive;
  --conf-cond: "Roboto Condensed", "Arial Narrow", sans-serif;
  --conf-serif: "Perfectly Nineties", Georgia, serif;
  --conf-sans: "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif;
}

/* :where() keeps this reset at zero extra specificity so the component rules below always win */
.conf :where(h1, h2, h3, p, blockquote, ul) {
  margin: 0;
  padding: 0;
}

/* ----- Hero (looping video; the group photo is its poster) ----- */
.conf-hero {
  position: relative;
  isolation: isolate;
  /* 16:9 to match the footage, but never taller than the screen (width stays pinned to the page) */
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100vh;
  max-height: 100svh;
  background: #cfd2cf;
  overflow: hidden;
}

.conf-hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 53%;
}

/* Soft scrim behind the transparent site header so the white nav stays readable on the bright photo */
.conf-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: calc(var(--u) * 11);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.conf-hero__wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.conf-hero__title {
  position: absolute;
  left: calc(var(--u) * 4.7);
  bottom: calc(var(--u) * 1.15);
  font-family: var(--conf-display);
  font-weight: 400;
  font-size: calc(var(--u) * 8.99);
  letter-spacing: 0.0163em;
  line-height: 1;
  color: var(--conf-blue);
  white-space: nowrap;
  text-align: center;
}

/* ----- Name / place / date band ----- */
.conf-band {
  height: calc(var(--u) * 17.07);
  background: var(--conf-pink);
  color: #fff;
  text-align: center;
}

.conf-band__wrap {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-top: calc(var(--u) * 2.56);
}

.conf-band__title {
  font-family: var(--conf-display);
  font-weight: 400;
  font-size: calc(var(--u) * 5.88);
  letter-spacing: 0.0176em;
  line-height: 1;
  color: #fff;
}

.conf-band__meta {
  display: flex;
  justify-content: space-between;
  width: calc(var(--u) * 61.35);
  margin: calc(var(--u) * 2.54) auto 0;
  font-family: var(--conf-cond);
  font-weight: 500;
  font-size: calc(var(--u) * 2.25);
  line-height: 1.2;
}

/* ----- Parallax background (photo stays put, the page scrolls over it) -----
   The photo is position:fixed to the viewport and the section clips it with clip-path, so it only
   shows through while this section is on screen. Works on iOS, unlike background-attachment: fixed. */
.conf-parallax {
  position: relative;
  clip-path: inset(0);
  background: #d9d6cf;
}

.conf-parallax__bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}

/* The comp shows the photo mirrored (canvas on the left, behind the verse) */
.conf-parallax__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 43%;
  transform: scaleX(-1);
}

/* ----- Verse ----- */
.conf-verse {
  display: flex;
  align-items: flex-end;
  height: calc(var(--u) * 35.14);
}

.conf-verse__wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0 calc(var(--u) * 3.5) calc(var(--u) * 5.7);
}

.conf-verse__text {
  font-family: var(--conf-serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--u) * 2.43);
  line-height: calc(var(--u) * 2.4);
  color: var(--conf-blue);
  white-space: nowrap;
  /* The comp sets this heavier than the theme's Regular/Italic files; a hairline stroke matches the weight */
  -webkit-text-stroke: 0.03em var(--conf-blue);
}

.conf-verse__ref {
  margin-top: calc(var(--u) * 1.7);
  font-family: var(--conf-serif);
  font-style: normal;
  font-weight: 400;
  font-size: calc(var(--u) * 2.99);
  line-height: 1.2;
  color: var(--conf-blue);
  -webkit-text-stroke: 0.011em var(--conf-blue);
}

/* ----- Schedule + registration (green) ----- */
.conf-details {
  /* min-height: calc(var(--u) * 57.99); */
  background: var(--conf-green);
  color: var(--conf-yellow);
}

.conf-details__wrap {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--u) * 4.57) 0 calc(var(--u) * 4) calc(var(--u) * 5.85);
}

.conf-schedule {
  flex: 0 0 calc(var(--u) * 42.55);
  width: calc(var(--u) * 42.55);
}

.conf-register {
  flex: 0 0 calc(var(--u) * 33.25);
  width: calc(var(--u) * 33.25);
  margin-top: calc(var(--u) * -1.3);
  margin-left: calc(var(--u) * 12.2);
  text-align: center;
}

.conf-schedule__title,
.conf-register__title {
  font-family: var(--conf-display-alt);
  font-weight: 400;
  font-size: calc(var(--u) * 7.07);
  line-height: 1;
  color: var(--conf-yellow);
}

.conf-schedule__title {
  padding-left: calc(var(--u) * 1.77);
  letter-spacing: 0.047em;
}

.conf-register__title {
  letter-spacing: 0.035em;
}

.conf-schedule__intro {
  padding: 0 calc(var(--u) * 4.5) 0 calc(var(--u) * 1.05);
  margin-top: calc(var(--u) * 0.8);
  font-family: var(--conf-cond);
  font-weight: 500;
  font-size: calc(var(--u) * 1.68);
  line-height: calc(var(--u) * 2.17);
  text-align: justify;
}

.conf-acc {
  margin-top: calc(var(--u) * 1.4);
}

.conf-acc__item {
  border-top: 1px solid var(--conf-yellow);
}

.conf-acc__item:last-child {
  border-bottom: 1px solid var(--conf-yellow);
}

.conf-acc__heading {
  font: inherit;
}

.conf-acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: calc(var(--u) * 7);
  padding: 0 calc(var(--u) * 2.3) 0 calc(var(--u) * 1.05);
  border: 0;
  background: transparent;
  color: var(--conf-yellow);
  font-family: var(--conf-cond);
  font-weight: 500;
  font-size: calc(var(--u) * 2.86);
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.conf-acc__trigger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* Plus mark: the vertical bar collapses when open, turning + into a minus */
.conf-acc__plus {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--u) * 2.5);
  height: calc(var(--u) * 2.5);
}

.conf-acc__plus::before,
.conf-acc__plus::after {
  content: "";
  position: absolute;
  background: var(--conf-yellow);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.conf-acc__plus::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: max(1.5px, calc(var(--u) * 0.14));
  margin-top: calc(var(--u) * -0.07);
}

.conf-acc__plus::after {
  top: 0;
  left: 50%;
  width: max(1.5px, calc(var(--u) * 0.14));
  height: 100%;
  margin-left: calc(var(--u) * -0.07);
}

.conf-acc__item.is-open .conf-acc__plus::after {
  transform: scaleY(0);
  opacity: 0;
}

/* Collapsed panels are visibility:hidden so their contents leave the tab order */
.conf-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.35s ease, visibility 0s linear 0.35s;
}

.conf-acc__item.is-open .conf-acc__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.35s ease, visibility 0s linear 0s;
}

.conf-acc__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.conf-acc__times {
  padding: 0 calc(var(--u) * 1.05) calc(var(--u) * 1.76);
  list-style: none;
  font-family: var(--conf-serif);
  font-style: italic;
  font-size: calc(var(--u) * 2.05);
  line-height: calc(var(--u) * 3.17);
  /* Lighter than the Italic file on green in the comp: a green hairline thins the strokes slightly */
  -webkit-text-stroke: 0.014em var(--conf-green);
}

/* Register column */
.conf-register__note {
  margin-top: calc(var(--u) * 0.2);
  font-family: var(--conf-serif);
  font-style: italic;
  font-size: calc(var(--u) * 1.866);
  line-height: 1.2;
  color: #fff;
  -webkit-text-stroke: 0.023em var(--conf-green);
}

.conf-tickets {
  margin-top: calc(var(--u) * 0.7);
}

.conf-ticket {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.3);
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--u) * 6.5);
  margin-bottom: calc(var(--u) * 1.2);
  text-decoration: none;
}

.conf-ticket__label {
  font-family: var(--conf-cond);
  font-weight: 700;
  font-size: calc(var(--u) * 3.4);
  line-height: 1;
  text-transform: uppercase;
}

.conf-ticket__price {
  font-family: var(--conf-display);
  font-size: calc(var(--u) * 4.1);
  line-height: 1;
}

/* Early Bird: solid yellow, clickable; highlights on hover/focus */
.conf-ticket--link .conf-ticket__label {
  -webkit-text-stroke: 0.012em currentColor;
}

.conf-ticket--link {
  background: var(--conf-yellow);
  color: #000;
  cursor: pointer;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.conf-ticket--link:hover,
.conf-ticket--link:focus-visible,
.conf-ticket--link:active {
  background: #fff;
  color: #000;
  box-shadow: 0 0 0 max(3px, calc(var(--u) * 0.3)) var(--conf-yellow), 0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgba(0, 0, 0, 0.35);
  transform: scale(1.03);
}

.conf-ticket--link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: calc(var(--u) * 0.6);
}

/* Standard: outlined, display only */
.conf-ticket--static {
  border: max(2px, calc(var(--u) * 0.22)) solid var(--conf-yellow);
  color: #fff;
  cursor: default;
  user-select: none;
}

/* ----- Footer ----- */
.conf-footer {
  height: calc(var(--u) * 20.23);
  background: #fff;
  color: var(--conf-ink);
}

.conf-footer__wrap {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
}

.conf-footer__logo {
  position: absolute;
  top: calc(var(--u) * 1.48);
  left: calc(var(--u) * 4.54);
  display: block;
  width: calc(var(--u) * 41.85);
  height: auto;
}

.conf-footer__address {
  position: absolute;
  top: calc(var(--u) * 12.1);
  left: calc(var(--u) * 5.81);
  font-family: var(--conf-sans);
  font-style: normal;
  font-weight: 300;
  font-size: calc(var(--u) * 1.675);
  line-height: calc(var(--u) * 1.5);
}

.conf-footer__address strong {
  display: block;
  font-weight: 700;
  font-size: calc(var(--u) * 1.97);
  line-height: calc(var(--u) * 2.1);
}

.conf-footer__right {
  position: absolute;
  top: calc(var(--u) * 3);
  left: calc(var(--u) * 56.69);
  width: calc(var(--u) * 36.96);
}

/* The footer sits outside .conf, so zero the browser's default paragraph margin here */
.conf-footer :where(p) {
  margin: 0;
}

.conf-footer__tagline {
  padding-bottom: calc(var(--u) * 0.05);
  border-bottom: 1px solid #222;
  font-family: var(--conf-cond);
  font-weight: 700;
  font-size: calc(var(--u) * 2.8);
  line-height: 1.2;
  white-space: nowrap;
}

.conf-footer__tagline em {
  font-family: var(--conf-serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--u) * 2.57);
}

.conf-footer__links {
  display: grid;
  grid-template-columns: calc(var(--u) * 20.55) 1fr;
  margin-top: calc(var(--u) * 2.9);
  row-gap: calc(var(--u) * 1.18);
}

.conf-footer__links a {
  font-family: var(--conf-sans);
  font-weight: 300;
  font-size: calc(var(--u) * 1.75);
  line-height: calc(var(--u) * 1.8);
  color: var(--conf-ink);
  text-decoration: none;
  -webkit-text-stroke: 0.02em currentColor;
}

.conf-footer__links a:hover,
.conf-footer__links a:focus-visible {
  color: var(--conf-pink);
}

/* ----- Mobile: the comp is desktop-only, so the same pieces restack at phone sizes ----- */
@media (max-width: 860px) {

  /* Phone scale: 1vw, capped so tablets (up to 860px) keep phone-sized type instead of ballooning */
  .conf,
  .conf-footer {
    --m: min(1vw, 4.4px);
  }

  .conf-hero__wrap,
  .conf-band__wrap,
  .conf-verse__wrap,
  .conf-details__wrap,
  .conf-footer__wrap {
    max-width: 640px;
  }

  .conf-hero {
    aspect-ratio: auto;
    height: calc(var(--m) * 118);
  }

  .conf-hero__wrap {
    display: flex;
    align-items: flex-end;
  }

  .conf-hero__title {
    position: static;
    padding: 0 calc(var(--m) * 5) calc(var(--m) * 7);
    font-size: calc(var(--m) * 14);
    line-height: 0.95;
    white-space: normal;
  }

  .conf-band {
    height: auto;
    padding: calc(var(--m) * 8) calc(var(--m) * 5) calc(var(--m) * 9);
  }

  .conf-band__wrap {
    padding-top: 0;
  }

  .conf-band__title {
    font-size: calc(var(--m) * 12);
  }

  .conf-band__meta {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--m) * 2);
    width: auto;
    margin-top: calc(var(--m) * 6);
    font-size: calc(var(--m) * 5.6);
  }

  .conf-verse {
    height: auto;
    min-height: calc(var(--m) * 100);
  }

  /* On phones the fixed photo scales up behind the text, so soften it for legibility */
  .conf-verse::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.4));
    pointer-events: none;
  }

  .conf-verse__wrap {
    padding: calc(var(--m) * 40) calc(var(--m) * 5) calc(var(--m) * 8);
  }

  .conf-verse__text {
    font-size: calc(var(--m) * 5.6);
    line-height: calc(var(--m) * 6.6);
  }

  .conf-verse__ref {
    margin-top: calc(var(--m) * 6);
    font-size: calc(var(--m) * 6.4);
  }

  .conf-details {
    min-height: 0;
  }

  .conf-details__wrap {
    display: block;
    padding: calc(var(--m) * 9) calc(var(--m) * 5) calc(var(--m) * 12);
  }

  .conf-schedule,
  .conf-register {
    width: auto;
    margin-left: 0;
  }

  .conf-schedule__title,
  .conf-register__title {
    padding-left: 0;
    font-size: calc(var(--m) * 17);
  }

  .conf-schedule__intro {
    padding: 0;
    margin-top: calc(var(--m) * 4);
    font-size: calc(var(--m) * 4.7);
    line-height: calc(var(--m) * 6.2);
    text-align: left;
  }

  .conf-acc {
    margin-top: calc(var(--m) * 6);
  }

  .conf-acc__trigger {
    height: calc(var(--m) * 17);
    padding: 0 calc(var(--m) * 1) 0 0;
    font-size: calc(var(--m) * 6.6);
  }

  .conf-acc__plus {
    width: calc(var(--m) * 6);
    height: calc(var(--m) * 6);
  }

  .conf-acc__times {
    padding: 0 0 calc(var(--m) * 4);
    font-size: calc(var(--m) * 5.2);
    line-height: calc(var(--m) * 8);
  }

  .conf-register {
    margin-top: calc(var(--m) * 14);
  }

  .conf-register__note {
    margin-top: calc(var(--m) * 2);
    font-size: calc(var(--m) * 4.8);
  }

  .conf-tickets {
    margin-top: calc(var(--m) * 5);
  }

  .conf-ticket {
    height: calc(var(--m) * 17);
    gap: calc(var(--m) * 3);
    margin-bottom: calc(var(--m) * 3.5);
  }

  .conf-ticket__label {
    font-size: calc(var(--m) * 7.8);
  }

  .conf-ticket__price {
    font-size: calc(var(--m) * 9.4);
  }

  .conf-footer {
    height: auto;
    padding: calc(var(--m) * 8) calc(var(--m) * 5) calc(var(--m) * 10);
  }

  .conf-footer__wrap {
    height: auto;
  }

  .conf-footer__logo,
  .conf-footer__address,
  .conf-footer__right {
    position: static;
  }

  .conf-footer__logo {
    width: 100%;
  }

  .conf-footer__address {
    margin-top: calc(var(--m) * 7);
    font-size: calc(var(--m) * 4.2);
    line-height: calc(var(--m) * 5.4);
  }

  .conf-footer__address strong {
    font-size: calc(var(--m) * 4.8);
    line-height: calc(var(--m) * 5.8);
  }

  .conf-footer__right {
    width: auto;
    margin-top: calc(var(--m) * 9);
  }

  .conf-footer__tagline {
    font-size: calc(var(--m) * 6.2);
    padding-bottom: calc(var(--m) * 1.4);
    white-space: normal;
  }

  .conf-footer__tagline em {
    font-size: calc(var(--m) * 5.7);
  }

  .conf-footer__links {
    grid-template-columns: 1fr 1fr;
    margin-top: calc(var(--m) * 6);
    row-gap: calc(var(--m) * 4);
  }

  .conf-footer__links a {
    font-size: calc(var(--m) * 4.2);
    line-height: calc(var(--m) * 5);
  }
}

@media (prefers-reduced-motion: reduce) {

  .conf-ticket--link,
  .conf-acc__plus::before,
  .conf-acc__plus::after,
  .conf-acc__panel {
    transition: none;
  }

  /* No scroll-linked motion: let the photo scroll with the page */
  .conf-parallax {
    clip-path: none;
  }

  .conf-parallax__bg {
    position: absolute;
    height: 100%;
  }
}