/**
* Golf Summit event promo. TEMPORARY, remove after 2026-10-12.
* Removal steps live at the top of assets/js/event-modal.js.
*
* Everything is scoped under .event-modal / .event-bar so none of it reaches the
* BootstrapMade template, and the palette sits in local custom properties rather
* than the global :root for the same reason.
*/

.event-modal,
.event-bar,
.event-nav-link,
.event-hero-btn {
  /* Sampled from the flyer artwork, not from the Canva page background, which is
     the slightly duller #5fdee3. The two differ in the source file; matching the
     image is what makes the seam between the panels disappear, and the image is
     the half we cannot restyle. */
  --event-cyan: #6cf9fe;
  --event-navy: #265470;
  /* Pitch-panel height times the flyer aspect (1236:1474 after the register bar crop). The trail overlay is
     anchored off this too, so the two stay in step. */
  --event-flyer-width: 560px;
}

/*--------------------------------------------------------------
# Announcement bar
--------------------------------------------------------------*/
/* Sits before <header> in normal flow, so it scrolls away and leaves the sticky
   header behaving exactly as it did before. */
.event-bar {
  background: var(--event-navy);
  color: var(--event-cyan);
  font-family: var(--nav-font, "Poppins", sans-serif);
  font-size: 15px;
}

.event-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 48px 10px 16px;
  position: relative;
  text-align: center;
}

.event-bar__text {
  color: #fff;
}

.event-bar__link {
  color: var(--event-cyan);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.event-bar__link:hover {
  color: #fff;
}

.event-bar__close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--event-cyan);
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}

.event-bar__close:hover {
  color: #fff;
}

/* The bar is meant to be a slim strip. Left at desktop sizing it wraps to three
   lines on a phone and eats the top of the hero. */
@media (max-width: 575px) {
  .event-bar {
    font-size: 13px;
  }

  .event-bar__inner {
    gap: 8px;
    padding: 8px 40px 8px 12px;
  }
}

/*--------------------------------------------------------------
# Nav item and hero button
--------------------------------------------------------------*/
.navmenu .event-nav-link {
  color: var(--event-navy);
  font-weight: 600;
}

.navmenu .event-nav-link::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--event-cyan);
  margin-right: 7px;
  vertical-align: 1px;
  flex-shrink: 0;
}

/* The mobile menu lays links out as space-between flex rows so dropdown chevrons
   sit on the right. Our dot is a flex child too, so without this it gets flung to
   the far left with the label stranded on the right. */
@media (max-width: 1199px) {
  .navmenu .event-nav-link {
    justify-content: flex-start;
  }

  /* With the menu open, main.js pins its close X at top:15px/right:15px, which
     lands straight on top of the bar's own dismiss button. Only one X should be
     reachable there, and it should be the menu's. */
  .mobile-nav-active .event-bar__close {
    display: none;
  }
}

.hero .event-hero-btn {
  color: var(--event-navy);
  background: var(--event-cyan);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 14px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin-top: 30px;
  margin-left: 12px;
}

.hero .event-hero-btn:hover {
  color: var(--event-navy);
  background: color-mix(in srgb, var(--event-cyan), #fff 25%);
}

/*--------------------------------------------------------------
# Modal shell
--------------------------------------------------------------*/
.event-modal .modal-content {
  background: var(--event-cyan);
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}

.event-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--event-navy);
  /* This sits over the flyer, whose top band is dark navy, so it carries its own
     solid ground instead of relying on the cyan panel showing through. */
  background: var(--event-cyan);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  color: var(--event-navy);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
}

/* Bootstrap's default focus ring is invisible against this cyan. */
.event-modal__close:focus-visible {
  outline: 3px solid var(--event-navy);
  outline-offset: 3px;
}

.event-modal__close:hover {
  background: var(--event-navy);
  color: var(--event-cyan);
}

.event-modal__grid {
  display: flex;
}

/*--------------------------------------------------------------
# Pitch panel
--------------------------------------------------------------*/
.event-modal__pitch {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 44px 28px;
  box-sizing: border-box;
  min-width: 0;
}

.event-modal__headline {
  margin: 0;
  font-family: "Anton", "Arial Narrow", sans-serif;
  /* Anton ships a single weight. Inheriting the h2 default made the browser
     synthesise a heavier one, which thickens and distorts the letterforms. */
  font-weight: 400;
  font-size: clamp(2.5rem, 9vw, 6.75rem);
  line-height: 0.94;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--event-navy);
  text-align: center;
}

.event-modal__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.event-modal__powered {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: clamp(0.95rem, 2.2vw, 1.3rem);
  color: var(--event-navy);
  text-align: center;
}

.event-modal__powered em {
  font-weight: 500;
}

.event-modal__cta {
  display: inline-block;
  background: var(--event-navy);
  color: var(--event-cyan);
  font-family: "Poppins", sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 15px 44px;
  border-radius: 999px;
  transition: 0.3s;
}

.event-modal__cta:hover {
  background: color-mix(in srgb, var(--event-navy), #000 15%);
  color: var(--event-cyan);
}

.event-modal__schedule {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Abril Fatface", Georgia, serif;
  font-size: clamp(1.15rem, 2.8vw, 1.75rem);
  line-height: 1.34;
  color: var(--event-navy);
  text-align: center;
}

/*--------------------------------------------------------------
# Facts and flyer
--------------------------------------------------------------*/
.event-modal__facts {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--event-navy);
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--event-navy), transparent 75%);
  padding-top: 18px;
  width: 100%;
  max-width: 30rem;
}

.event-modal__facts strong {
  display: block;
  font-weight: 600;
}

/* The trail lives inside the flyer, so hiding the flyer hides it too. There is
   deliberately no separate rule for the trail: it cannot outlive the artwork it
   connects to, and there is no second breakpoint to keep in sync. */
.event-modal__flyer {
  display: none;
}

/* Below 1200px Bootstrap caps .modal-xl at 800px, which would squeeze the flyer
   to roughly 390px and make its baked-in text illegible. So the flyer is desktop
   only, and the facts block carries the details everywhere else. */
@media (min-width: 1200px) {
  /* The flyer is the height authority, not the winner of a race with the pitch
     panel. Deriving the grid's height from the artwork's aspect means no amount of
     added copy can push the modal taller and strand the flyer with cyan beneath
     it, which is what the trail's anchoring depends on. overflow guards the
     pathological case: copy that outgrows the panel clips rather than silently
     breaking the alignment. Headroom is ~27px, so ordinary edits have room. */
  .event-modal__grid {
    height: calc(var(--event-flyer-width) * 1474 / 1236);
    overflow: hidden;
  }

  .event-modal__pitch {
    padding: 36px 44px 36px 52px;
  }

  .event-modal__headline {
    font-size: 6rem;
    /* Lines stay left-aligned against each other as in the Canva, but the block
       shrinks to its widest line and centres on the same axis as everything
       below it, so the headline sits over the stack rather than being pinned to
       the padding edge. */
    text-align: left;
    align-self: center;
  }

  /* Width is the pitch panel height times the flyer aspect (1236:1474), so the
     artwork fills the panel edge to edge with nothing clipped and no cyan rim. */
  .event-modal__flyer {
    display: block;
    width: var(--event-flyer-width);
    flex-shrink: 0;
    /* Positioning context for the trail, so the arc measures itself against the
       artwork rather than against the modal. If the pitch panel ever grew taller
       than the flyer it would win the height race, and a modal-anchored arc would
       silently drift off both of its join points. */
    position: relative;
  }

  /* Bridges the two dotted fly trails that run off the flyer's left edge. Top and
     height are percentages of the flyer's own height so the arc stays welded to
     both exit points if the modal height shifts. The 120px bulge stops well short
     of the schedule text. Desktop only: below this width there is no flyer, so
     there is nothing for the arc to connect to. */
  .event-modal__trail {
    display: block;
    position: absolute;
    /* Measured against the flyer itself, so top/height are percentages of the
       artwork's own height and the arc stays welded to both exit points whatever
       the modal does around it. right:100% parks it just outside the left edge. */
    right: 100%;
    top: 77.8%;
    height: 17.0%;
    width: 120px;
    pointer-events: none;
  }

  /* height:auto, so the artwork keeps its own proportions and the modal takes its
     height from the flyer rather than the flyer being stretched to fit a height
     the pitch panel decided. The pitch panel then stretches to match. */
  .event-modal__flyer img {
    display: block;
    width: 100%;
    height: auto;
    /* Only the outer corners round. The left edge butts against the pitch panel,
       and modal-content runs overflow:visible here for the close button, so the
       image has to respect the shell's radius itself. */
    border-radius: 0 12px 12px 0;
  }

  /* The flyer fills the right half and puts its own title across the top, so a
     close button tucked inside that corner lands on the words. Float it just
     outside the corner instead. Only needed here: below this width the flyer is
     gone and the inside position is clear. */
  .event-modal .modal-content {
    overflow: visible;
  }

  .event-modal__close {
    top: -15px;
    right: -15px;
  }

  /* The flyer already shows all of this, so keep it for screen readers only
     rather than printing every detail twice. */
  .event-modal__facts {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-modal.fade,
  .event-modal.fade .modal-dialog {
    transition: none;
  }
}