/**
* 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. This is the design size and the
     ceiling; the desktop block redefines it against the viewport so the whole
     composition scales down with the window rather than being clipped by it. */
  --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;
  /* The vh half of each pair is the height governor for the text-only layout, and
     every size below pairs off the same way. They are tuned so a portrait phone
     (~812px tall) still lands on exactly the values it always had, and only shorter
     or landscape windows scale down. The headline is the one that shrinks sooner:
     it is three lines and dominates the height budget. */
  gap: min(22px, 2.7vh);
  padding: min(44px, 5.4vh) min(28px, 7vw);
  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;
  /* min() wraps the whole clamp on purpose: on a very short screen the 2.5rem floor
     is itself the thing that overflows, so height has to be allowed to win. */
  font-size: min(clamp(2.5rem, 9vw, 6.75rem), 9vh);
  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: min(18px, 2.2vh);
}

.event-modal__powered {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: max(0.75rem, min(clamp(0.95rem, 2.2vw, 1.3rem), 2.3vh));
  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: max(0.8rem, min(clamp(1rem, 2.2vw, 1.2rem), 2.1vh));
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  /* Horizontal padding is untouched: width was never the problem, and shrinking it
     would narrow the button on phones where it reads correctly today. */
  padding: min(15px, 1.85vh) 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: max(0.8rem, min(clamp(1.15rem, 2.8vw, 1.75rem), 3vh));
  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: max(0.7rem, min(15px, 1.85vh));
  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: min(18px, 2.2vh);
  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;
}

/* On a short window the text-only layout that phones already use is the better
   answer, so it is claimed by height as well as width. Below 1200px Bootstrap caps
   .modal-xl at 800px, which would squeeze the flyer to roughly 390px and make its
   baked-in text illegible; the same illegibility arrives from the other direction
   on a short window, since the flyer's height is its width times 1474/1236. Where
   the flyer cannot be read the facts block carries the details instead.

   The height condition is not a second breakpoint to keep in sync: every
   flyer-specific rule lives in this one block, so the layout swaps as a unit. */
@media (min-width: 1200px) {
  /* Without a flyer beside it, a column of text has no business being the 1140px
     that .modal-xl gives it up here. Set on the dialog rather than on .event-modal:
     .modal-xl declares this variable on the dialog itself, so a value inherited
     from the parent would never be read. */
  .event-modal .modal-dialog {
    --bs-modal-width: 800px;
  }
}

@media (min-width: 1200px) and (min-height: 581px) {
  .event-modal {
    /* The one size authority for this layout. 1236/1474 turns the height the
       viewport can spare into the flyer width that fits it, so the artwork scales
       with the window instead of being clipped by it. The 440px floor is where the
       baked-in text stops being legible (~78% of design size); its matching 581px
       of viewport height is this block's own min-height, so reaching the floor
       hands over to the text-only layout rather than shrinking past it, and the
       floor itself only guards the seam. No vw term: at 1200px the 1140px dialog
       and its 56px of margin already fit, so width never binds in here. */
    --event-flyer-width: max(440px, min(560px, calc((100vh - 3.5rem) * 1236 / 1474)));
    /* 16px at design size. Every length below is a multiple of it, so type, spacing
       and artwork scale by one factor and the composition holds its proportions. */
    --event-unit: calc(var(--event-flyer-width) / 35);
  }

  /* The shell scales with its contents rather than holding 1140px around a
     shrinking flyer. 1140/560 keeps the split between the two panels identical at
     every size. */
  .event-modal .modal-dialog {
    --bs-modal-width: calc(var(--event-flyer-width) * 1140 / 560);
  }

  /* 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 at design size, and since the panel's
     contents scale by the same factor as its height, it stays ~27px at every size. */
  .event-modal__grid {
    height: calc(var(--event-flyer-width) * 1474 / 1236);
    overflow: hidden;
  }

  .event-modal__pitch {
    padding: calc(var(--event-unit) * 2.25) calc(var(--event-unit) * 2.75)
      calc(var(--event-unit) * 2.25) calc(var(--event-unit) * 3.25);
    gap: calc(var(--event-unit) * 1.375);
  }

  .event-modal__headline {
    font-size: calc(var(--event-unit) * 6);
    /* 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;
  }

  .event-modal__stack {
    gap: calc(var(--event-unit) * 1.125);
  }

  .event-modal__powered {
    font-size: calc(var(--event-unit) * 1.3);
  }

  .event-modal__cta {
    font-size: calc(var(--event-unit) * 1.2);
    padding: calc(var(--event-unit) * 0.9375) calc(var(--event-unit) * 2.75);
  }

  .event-modal__schedule {
    font-size: calc(var(--event-unit) * 1.75);
  }

  /* 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 bulge scales with everything
     else and still stops well short of the schedule text. It lives in this block
     alone: outside it there is no flyer, so there is nothing for the arc to join. */
  .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: calc(var(--event-unit) * 7.5);
    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. The button keeps its own fixed size at
     every scale, since a control should not shrink below a comfortable target. */
  .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;
  }
}