/* ==========================================================================
   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;
  --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; } }

/* ---------- 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; }

/* 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); }

/* ---------- 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 24px/32px var(--font-serif); letter-spacing: -.4px; 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: 20px; line-height: 26px; letter-spacing: -.3px; }
  .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; } }