/* ============================================================================
   NYYRC 114th Annual Gala — sitewide banner
   Location: /wp-content/themes/salient-child/assets/css/gala-banner.css
   All url() paths are relative to THIS file.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. FONTS  (self-hosted — see README for where to download)
   ------------------------------------------------------------------------ */

/* Pinyon Script — SIL OFL 1.1. Single style, regular only, no italic. */
@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/pinyon-script-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/pinyon-script-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant — SIL OFL 1.1. Static files, weights 300–700, with true italic. */
@font-face {
  font-family: "Cormorant";
  src: url("../fonts/cormorant-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("../fonts/cormorant-latin-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   2. BANNER
   ------------------------------------------------------------------------ */

/* On :root so the Salient offset rules in section 3 can read it too. */
:root {
  --gala-banner-height: clamp(88px, 9vw, 132px);

  /* Extra left padding to clear Salient's fixed left-header column.
     The banner now sits inside #ajax-content-wrap, which already carries the
     sidebar offset on the left-header layout, so this should be 0.

     THE CHECK: if the date line is hidden behind the sidebar on desktop,
     the wrap isn't offsetting it — set this to 274px (nyyrc.com's measured
     #header-outer width) and it clears. Desktop only. */
  --gala-sidebar-width: 0px;
}

.gala-banner {
  /* --- swap either of these two lines to change typeface --- */
  --gala-script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --gala-serif: "Cormorant", "Times New Roman", Times, serif;

  --gala-maroon: #4a0d16;
  --gala-max-width: 1400px;
  --gala-pad-x: clamp(16px, 3vw, 40px);

  display: block;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: var(--gala-banner-height);
  background-color: var(--gala-maroon);
  background-image: -webkit-image-set(
    url("../img/gala-banner-bg.jpg") 1x,
    url("../img/gala-banner-bg@2x.jpg") 2x
  );
  background-image: image-set(
    url("../img/gala-banner-bg.jpg") 1x,
    url("../img/gala-banner-bg@2x.jpg") 2x
  );
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
}

/* Scrim. Slightly stronger than the Great Vibes version — Pinyon's strokes are
   finer and need more separation from the confetti to stay legible. */
.gala-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(46, 8, 15, 0.68) 0%,
    rgba(46, 8, 15, 0.38) 38%,
    rgba(46, 8, 15, 0.38) 62%,
    rgba(46, 8, 15, 0.68) 100%
  );
}

.gala-banner__inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
  max-width: var(--gala-max-width);
  min-height: var(--gala-banner-height);
  margin: 0 auto;
  padding: 10px var(--gala-pad-x);
  box-sizing: border-box;
}

.gala-banner__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
}

/* Eyebrow. */
.gala-banner__org {
  font-family: var(--gala-serif);
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.3;
  opacity: 0.88;
  text-shadow: 0 1px 4px rgba(28, 4, 9, 0.7);
}

/* The hero. Largest text in the banner.

   Script, matching the call to action. Two things follow from that and must
   not be reintroduced: no text-transform (a connecting script set in caps is
   barely legible) and no letter-spacing (it breaks the joins between letters,
   which is the whole point of the face).

   Pinyon overshoots its em box, so line-height is 1 with margins steering the
   spacing, exactly as on the detail line's date. */
.gala-banner__title {
  font-family: var(--gala-script);
  font-size: clamp(30px, 4.2vw, 62px);
  line-height: 1;
  margin-top: var(--gala-title-lead, 0.2em);
  margin-bottom: var(--gala-title-trail, -0.05em);
  text-shadow: 0 2px 10px rgba(28, 4, 9, 0.7);
}

/* Date, venue and tagline on one demoted line. */
.gala-banner__meta {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  font-family: var(--gala-serif);
  font-size: clamp(12px, 1.15vw, 17px);
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(28, 4, 9, 0.7);
}

.gala-banner__sep { opacity: 0.6; }

.gala-banner__date {
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.gala-banner__venue {
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.gala-banner__tagline {
  font-style: italic;
  font-weight: 500;
}

/* The action. Script, but no longer the biggest thing on the banner. */
.gala-banner__cta {
  flex: 0 0 auto;
  font-family: var(--gala-script);
  font-size: clamp(26px, 3vw, 45px);
  line-height: 1.1;
  text-shadow: 0 2px 11px rgba(28, 4, 9, 0.75);
}

/* Keyboard focus ring only. There is deliberately no hover state. */
.gala-banner:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -5px;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
  /* Tagline is the first thing to go — atmosphere, not information. Hide its
     leading separator with it, or a middot is left dangling at the end.

     Note this targets --tagline, not :last-of-type. :last-of-type matches by
     ELEMENT type, and every child here is a span, so it would resolve to the
     tagline itself and never hit a separator at all. */
  .gala-banner__tagline,
  .gala-banner__sep--tagline { display: none; }
}

@media (max-width: 780px) {
  .gala-banner__inner {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .gala-banner__copy {
    flex-basis: 100%;
    align-items: center;
    text-align: center;
  }

  .gala-banner__org { font-size: 12px; letter-spacing: 0.16em; }

  .gala-banner__title {
    font-size: 42px;
    text-align: center;

    /* At 42px the eyebrow and detail line sit proportionally closer than they
       do on desktop, so Pinyon's ascender overshoot crowds the line above
       while the descenders leave a gap below. Shift space upward.

       TUNING: move the pair in opposite directions by the same amount. */
    --gala-title-lead: 0.2em;
    --gala-title-trail: -0.06em;
  }

  /* A little air between all three copy lines at this size. */
  .gala-banner__copy { gap: 2px; }

  /* Date and venue stay on one line, separated by the middot. The tagline
     and its separator are already hidden by the 1100px rule above, so this
     reads "December 12th, 2026 · Cipriani Wall Street". */
  .gala-banner__meta {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 7px;
    font-size: 14px;
  }

  .gala-banner__cta {
    flex-basis: 100%;
    font-size: 34px;
    text-align: center;
  }
}

@media (max-width: 460px) {
  .gala-banner__org   { font-size: 11px; letter-spacing: 0.13em; }
  .gala-banner__title {
    font-size: 35px;
    --gala-title-lead: 0.22em;
    --gala-title-trail: -0.07em;
  }
  .gala-banner__meta  { font-size: 13px; }
  .gala-banner__cta   { font-size: 30px; }
}


/* ===========================================================================
   3. SALIENT COMPATIBILITY
   ========================================================================= */

/* Salient recolours links on hover. The banner is an <a>, so without these
   the white text flips to the theme's link colour mid-hover. Specificity here
   (body + element + class) beats Salient's generic `body a:hover`. */
body a.gala-banner,
body a.gala-banner:link,
body a.gala-banner:visited,
body a.gala-banner:hover,
body a.gala-banner:focus,
body a.gala-banner:active {
  color: #fff;
  text-decoration: none;
}
body a.gala-banner:hover span,
body a.gala-banner:focus span,
body a.gala-banner:active span {
  color: #fff;
}

/* Sit above Salient's fixed header layers. */
.gala-banner {
  z-index: 9000;
}

/* --- Left-header layout ---------------------------------------------------
   #header-outer is a fixed column overlaying the left edge of the viewport.
   The banner runs full width beneath it, so pad the content across so nothing
   lands underneath. Do NOT resize or reposition #header-outer itself — that
   leaves a gap at the bottom of the sidebar.

   DELETE THIS BLOCK if your <body> tag doesn't carry
   data-header-format="left-header".
   ---------------------------------------------------------------------- */
@media only screen and (min-width: 1000px) {
  body[data-header-format="left-header"] .gala-banner__inner {
    max-width: none;
    margin: 0;
    padding-left: calc(var(--gala-sidebar-width) + var(--gala-pad-x));
  }
}