/* ==========================================================================
   ECCPortalCore.css: the ECC portal's shared standards (Design System v1.1).
   Loaded by ECCCoreTemplate on every page, after CustomCSS. Pages use these
   variables and ecc- classes instead of typing their own colors and shapes.
   Source of truth: the ECC Portal Design System artifact (tokens.json,
   components/bundle.css). Change both together.
   Rules: a pill shape is always a button. Oswald is always 500.
   ========================================================================== */

:root {
  /* Color */
  --red: #DA291C;          /* things you act on: buttons, links, selected state */
  --red-press: #B3261E;    /* hover and pressed fill only, never at rest */
  --gold: #8B634B;         /* things you read: dates, stats, counts, line icons */
  --black: #000000;
  --white: #FFFFFF;
  --gray-100: #F2F2F2;     /* page background behind cards */
  --gray-600: #595959;     /* secondary text */
  --line: #DDDDDD;         /* borders and dividers */
  --band: #161919;         /* title band, dark panels */

  /* Shape and depth */
  --radius-card: 14px;
  --radius-inner: 10px;
  --radius-pill: 999px;    /* buttons only */
  --radius-tag: 4px;       /* labels that aren't buttons */
  --shadow-hover: 0 18px 40px rgba(0, 0, 0, .12);
  --shadow-float: 0 4px 14px rgba(0, 0, 0, .22);

  /* Space */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-14: 56px;

  /* Type */
  --font-display: Oswald, "Arial Narrow", sans-serif;
  --font-serif: Bressay, Georgia, serif; /* special use only, with Andy's sign-off (v1.3) */
  --font-sans: Inter, Arial, sans-serif;

  /* Site edges: the header nav's box (CustomBootstrap .container) at each width.
     Inset from the screen edge = calc((100% - var(--site-w)) / 2 + var(--site-pad)),
     with 100% being a full-width parent. */
  --site-w: 100%;
  --site-pad: 16px;
  --tap-min: 44px;
}
@media (min-width: 813px)  { :root { --site-w: 750px;  --site-pad: 15px; } }
@media (min-width: 992px)  { :root { --site-w: 970px; } }
@media (min-width: 1200px) { :root { --site-w: 1170px; } }

/* ---------- Focus rings (Design System v1.5.2): nothing on mouse or touch, a gold ring on
   keyboard focus only. The !importants beat CustomCSS's own :focus rules, which load first. ---------- */
a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus {
  outline: none !important; box-shadow: none !important;
  text-decoration: inherit !important; font-weight: inherit !important;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold) !important; outline-offset: 2px !important;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none !important; border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(218, 41, 28, .15) !important;
}

/* ---------- Site edge: content lines up with MENU and the last nav item ---------- */
.ecc-edge { box-sizing: border-box; width: 100%; max-width: var(--site-w); margin-left: auto; margin-right: auto; padding-left: var(--site-pad); padding-right: var(--site-pad); }

/* ---------- Buttons: the only pills ---------- */
.ecc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  height: 40px; min-width: 120px; padding: 0 24px; border-radius: var(--radius-pill);
  border: 1px solid var(--red); background: var(--white); color: var(--black);
  font: 700 12px/1 var(--font-sans); letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.ecc-btn:hover, .ecc-btn:focus-visible { background: var(--red); color: var(--white); text-decoration: none; }
.ecc-btn:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.ecc-btn--primary { background: var(--red); color: var(--white); }
.ecc-btn--primary:hover, .ecc-btn--primary:focus-visible { background: var(--red-press); border-color: var(--red-press); }
.ecc-on-band .ecc-btn { background: transparent; color: var(--white); }
.ecc-on-band .ecc-btn--primary { background: var(--white); border-color: var(--white); color: var(--black); }
.ecc-on-band .ecc-btn:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.ecc-on-band .ecc-btn:focus-visible { outline-color: var(--white); }
.ecc-btn[disabled], .ecc-btn--off { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* Buttons are always bold: the focus rule above resets a focused link's weight (and CustomCSS lightens links),
   so a Register link went thin after a popup handed focus back (vsc, Oct 24, 2026). */
.ecc-btn, .ecc-btn:focus, .ecc-btn:focus-visible, .ecc-btn:hover, a.ecc-btn { font-weight: 700 !important; }
/* A button that is a link: CustomCSS colors links red with !important, so the button text needs it too. */
a.ecc-btn { color: var(--black) !important; }
a.ecc-btn:hover, a.ecc-btn:focus-visible, a.ecc-btn--primary { color: var(--white) !important; }
.ecc-on-band a.ecc-btn { color: var(--white) !important; }
.ecc-on-band a.ecc-btn--primary { color: var(--black) !important; }

/* Section chips jump to a section, so they are buttons and keep the pill shape. */
.ecc-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.ecc-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 14px;
  border: 1px solid var(--red); border-radius: var(--radius-pill); background: var(--white); color: var(--black);
  font: 600 13px/1 var(--font-sans); text-decoration: none; white-space: nowrap;
}
.ecc-chip b { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--gray-100); display: inline-grid; place-items: center; font: 700 11px/1 var(--font-sans); box-sizing: border-box; }
.ecc-chip.is-here, .ecc-chip[aria-current] { background: var(--red); color: var(--white); }
.ecc-chip.is-here b, .ecc-chip[aria-current] b { background: var(--white); color: var(--red); }

/* ---------- Labels that aren't buttons: never pills ---------- */
/* Details line: IN-PERSON DINNER | BLACK TIE | 1632 OF 3000 SEATS AVAILABLE */
.ecc-meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; margin: 0; font: 700 12px/18px var(--font-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--black); }
.ecc-meta__item { display: inline-flex; align-items: center; }
.ecc-meta__item + .ecc-meta__item::before { content: ""; width: 1px; height: 12px; margin: 0 10px; background: var(--line); }
.ecc-meta__stat { color: var(--gold); }

/* A label on a photo (Registered, a date): dark glass, square corners. */
.ecc-photo-label {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 6px; box-sizing: border-box;
  border-radius: var(--radius-tag); background: rgba(22, 25, 25, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--white); font: 700 11px/1 var(--font-sans); letter-spacing: 1.5px; text-transform: uppercase;
}
.ecc-photo-label__check { width: 18px; height: 18px; border-radius: 50%; background: var(--red); display: inline-grid; place-items: center; font-size: 11px; color: var(--white); }

/* Status: a colored dot and the word; the word carries the meaning. */
.ecc-status { display: inline-flex; align-items: center; gap: 7px; font: 700 11px/1 var(--font-sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray-600); }
.ecc-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.ecc-status--pending { color: var(--gold); }
.ecc-status--approved { color: #2E6B3A; }   /* status green: semantic, not a brand color */
.ecc-status--declined { color: var(--gray-600); }

/* The Member Exchange Plus mark: a small tile with a "+" (Design System v1.4). Write
   MEMBER EXCHANGE<i class="ecc-plus" aria-hidden="true"></i><span>Plus</span>. Gold tile on dark
   backgrounds; pages set band black on light ones. */
.ecc-plus { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--gold); color: #fff; font: 500 18px/1 var(--font-display); font-style: normal; letter-spacing: 0; margin-left: 7px; vertical-align: -5px; text-transform: none; }
.ecc-plus::before { content: "+"; position: relative; top: -1px; }

/* ---------- Membership dues popup (c:ECCDuesPopup; Patterns, Popups). The card is dark with white
   sections inside so the rounded top corners never show a white sliver. ---------- */
.du-scrim { position: fixed; inset: 0; z-index: 9500; background: rgba(0, 0, 0, .5); display: grid; place-items: center; padding: 16px; animation: eccfade .2s ease; }
.du-scrim[hidden] { display: none !important; }
@keyframes eccfade { from { opacity: 0; } }
.du-pop { width: 100%; max-width: 480px; background: var(--band); border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); font: 400 14px/1.5 var(--font-sans); color: var(--black); text-align: left; }
.du-pop .bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--band); color: #fff; padding: 12px 14px 12px 18px; }
.du-pop .bar h3 { margin: 0 !important; padding: 0 !important; display: flex; align-items: center; gap: 10px; font: 500 18px/1 var(--font-display) !important; letter-spacing: 1.5px; text-transform: uppercase !important; color: #fff !important; }
.du-pop .bar h3 svg { width: 20px; height: 20px; color: #D9B99B; flex: none; }
.du-pop .x { width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s; }
.du-pop .x:hover { background: var(--red); color: #fff; }
.du-pop .x:focus-visible { outline: 2px solid #D9B99B !important; outline-offset: 2px !important; }
.du-pop .body { padding: 22px 20px 0; background: #fff; }
.du-pop .eb { font: 700 11px/1 var(--font-sans) !important; letter-spacing: 2px; text-transform: uppercase; color: var(--gold) !important; margin: 0 0 8px !important; }
.du-pop h4 { margin: 0 !important; font: 700 22px/28px var(--font-sans) !important; color: var(--black) !important; text-transform: none !important; }
.du-pop .st { display: inline-flex; align-items: center; gap: 7px; margin: 14px 0 0; font: 700 11px/1 var(--font-sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--black); }
.du-pop .st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.du-pop .acts { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 20px 20px; background: #fff; }
.du-pop .btn2 { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 22px; border-radius: var(--radius-pill); border: 1px solid var(--red); background: #fff; color: var(--black) !important; font: 700 12px/1 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; text-decoration: none !important; cursor: pointer; }
.du-pop .btn2.p { background: var(--red); color: #fff !important; }
.du-pop .btn2:hover { background: var(--red); color: #fff !important; }
.du-pop .btn2.p:hover { background: var(--red-press); border-color: var(--red-press); }
.du-pop .fine { margin: 0 !important; padding: 0 20px 18px; background: #fff; font-size: 12.5px; line-height: 18px; color: var(--gray-600); }
.du-pop .fine a { color: var(--red) !important; text-decoration: none !important; border-bottom: 1px solid var(--red); white-space: nowrap; }
@media (max-width: 812px), (orientation: landscape) and (max-height: 500px) {
  .du-scrim { place-items: end center; padding: 0; }
  .du-pop { max-width: none; border-radius: 18px 18px 0 0; }
  .du-pop .acts .btn2 { flex: 1 1 100%; height: 48px; }
}

/* ---------- Type ---------- */
.ecc-label { margin: 0; font: 700 12px/18px var(--font-sans); letter-spacing: 2.5px; text-transform: uppercase; color: var(--red); }
.ecc-name { margin: 0; font: 700 22px/28px var(--font-sans); letter-spacing: -.3px; color: var(--black); }
.ecc-sub { margin: 0; font: 400 14px/22px var(--font-sans); color: var(--gray-600); }
.ecc-body { margin: 0; font: 300 16px/26px var(--font-sans); letter-spacing: .5px; color: var(--black); }

/* ---------- Date block ---------- */
.ecc-date { display: inline-flex; flex-direction: column; align-items: center; padding-right: 18px; border-right: 2px solid var(--black); text-align: center; }
.ecc-date__m { font: 700 12px/1.2 var(--font-sans); letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); }
.ecc-date__d { font: 500 64px/1 var(--font-display); color: var(--black); margin: 4px 0; }
.ecc-date__w { font: 700 11px/1.2 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--gray-600); }

/* ---------- Card ---------- */
.ecc-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.ecc-card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.ecc-card__body { padding: var(--space-6); }

/* ---------- Title band ---------- */
.ecc-band { display: grid; place-items: center; min-height: 44px; padding: 0 16px; background: var(--band); color: var(--white); font: 500 24px/1.1 var(--font-display); letter-spacing: 3px; text-transform: uppercase; text-align: center; }

/* ---------- Phones, including phones turned sideways ---------- */
@media (max-width: 812px), (orientation: landscape) and (max-height: 500px) {
  .ecc-btn { height: 46px; font-size: 13px; }
  .ecc-btn--block-phone { display: flex; width: 100%; }
  .ecc-meta { font-size: 11px; letter-spacing: 1.5px; }
  .ecc-meta__item + .ecc-meta__item::before { margin: 0 8px; }
  .ecc-date__d { font-size: 48px; }
  .ecc-date { padding-right: 14px; }
  .ecc-card__body { padding: var(--space-4); }
  .ecc-name { font-size: 18px; line-height: 24px; letter-spacing: -.2px; }
  .ecc-card--lift:hover { transform: none; box-shadow: none; }
  .ecc-band { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .ecc-btn, .ecc-card { transition: none; } }

/* ---------- Footer social icons (10/24/26 vsc): inline line icons in ECCSiteFooter, white, red on hover.
   Replaced five images from production's file servlet. ---------- */
.social-right a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 4px; vertical-align: middle; color: var(--white) !important; text-decoration: none !important; transition: color .15s; }
.social-right a:hover, .social-right a:focus-visible { color: var(--red) !important; }
.social-right svg { width: 17px; height: 17px; display: block; }

/* ---------- Inline icons (10/24/26 vsc): replace Font Awesome on our own pages, so they never download its font.
   Sized by font-size like the old icons; color from the text (or a page rule). Font Awesome's stylesheet stays for
   Nimble's own components (My Account cards). ---------- */
.ecc-ico { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ecc-ico-excl.text-danger { color: var(--red); }