/* DJC Banner — Skeleton

 * Structural layout only + skeleton defaults for the banner component.
 * All visual properties are driven by --banner-* CSS custom properties.
 *
 * Variants (set via modifier class on .djc-banner):
 *   --announcement — centered text banner, compact padding
 *   --promo        — larger padding, allows image alongside text
 *
 * Position modifiers:
 *   --top    — default document flow (static)
 *   --bottom — fixed to viewport bottom
 *
 * State modifiers:
 *   --closing — opacity transition for dismiss animation
 *   --closed  — hidden (display none)
 *
 * NO SKIN: renders a visible skeleton — neutral colors, positioned elements,
 * standard sizing. Functional but unbranded.
 *
 * TO SKIN: set --banner-* variables on .djc-banner
 * See /skins/banner.djc.css for the DJC brand skin.

*/

@import url('skins/banner.djc.css');

.djc-banner {
  /* colors */
  --banner-bg: #333;
  --banner-text: #fff;
  --banner-cta-bg: #e74c3c;
  --banner-cta-text: #fff;
  --banner-cta-hover: #c0392b;
  --banner-close-color: rgba(255, 255, 255, 0.6);
  --banner-close-hover: #fff;
  --banner-border: none;
  --banner-countdown-bg: rgba(0, 0, 0, 0.25);
  --banner-countdown-text: #fff;

  /* typography */
  --banner-font: inherit;
  --banner-font-size: 15px;
  --banner-cta-size: 13px;
  --banner-cta-weight: 600;
  --banner-countdown-size: 14px;

  /* spacing */
  --banner-padding: 12px 20px;
  --banner-gap: 16px;

  /* effects */
  --banner-transition: 0.3s ease;
  --banner-shadow: none;
}


/* reset */
.djc-banner *,
.djc-banner *::before,
.djc-banner *::after {
  box-sizing: border-box;
}


/* ═══════════════════════════════════════════════
   BASE: wrapper
   ═══════════════════════════════════════════════ */

.djc-banner {
  position: relative;
  width: 100%;
  z-index: 100;
  font-family: var(--banner-font);
  border-bottom: var(--banner-border);
  box-shadow: var(--banner-shadow);
}


/* ═══════════════════════════════════════════════
   INNER: flexbox container
   ═══════════════════════════════════════════════ */

.djc-banner__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--banner-gap);
  padding: var(--banner-padding);
  background: var(--banner-bg);
  color: var(--banner-text);
}


/* ═══════════════════════════════════════════════
   CONTENT: text + cta wrapper
   ═══════════════════════════════════════════════ */

.djc-banner__content {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--banner-gap);
}


/* ═══════════════════════════════════════════════
   TEXT
   ═══════════════════════════════════════════════ */

.djc-banner__text {
  flex: 1;
  margin: 0;
  font-size: var(--banner-font-size);
}


/* ═══════════════════════════════════════════════
   CTA: call-to-action button/link
   ═══════════════════════════════════════════════ */

.djc-banner__cta {
  display: inline-block;
  background: var(--banner-cta-bg);
  color: var(--banner-cta-text);
  text-decoration: none;
  padding: 8px 20px;
  border-radius: 4px;
  font-size: var(--banner-cta-size);
  font-weight: var(--banner-cta-weight);
  white-space: nowrap;
  transition: background var(--banner-transition);
}

.djc-banner__cta:hover {
  background: var(--banner-cta-hover);
  color: var(--banner-cta-text);
  text-decoration: none;
}


/* ═══════════════════════════════════════════════
   CLOSE: dismiss button
   ═══════════════════════════════════════════════ */

.djc-banner__close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--banner-close-color);
  font-size: 18px;
  padding: 4px;
  line-height: 1;
  transition: color var(--banner-transition);
}

.djc-banner__close:hover {
  color: var(--banner-close-hover);
}


/* ═══════════════════════════════════════════════
   IMAGE
   ═══════════════════════════════════════════════ */

.djc-banner__image {
  flex-shrink: 0;
}

.djc-banner__image img {
  display: block;
  max-height: 40px;
  width: auto;
}


/* ═══════════════════════════════════════════════
   COUNTDOWN
   ═══════════════════════════════════════════════ */

.djc-banner__countdown {
  font-variant-numeric: tabular-nums;
  font-size: var(--banner-countdown-size);
  background: var(--banner-countdown-bg);
  color: var(--banner-countdown-text);
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════
   MODIFIER: position — top (default)
   ═══════════════════════════════════════════════ */

.djc-banner--top {
  /* default flow — no overrides needed */
}


/* ═══════════════════════════════════════════════
   MODIFIER: position — bottom (fixed)
   ═══════════════════════════════════════════════ */

.djc-banner--bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
}


/* ═══════════════════════════════════════════════
   MODIFIER: state — closing / closed
   ═══════════════════════════════════════════════ */

.djc-banner--closing {
  opacity: 0;
  transition: opacity var(--banner-transition);
}

.djc-banner--closed {
  display: none;
}


/* ═══════════════════════════════════════════════
   VARIANT: announcement
   Centered text, compact padding, max-width inner.
   ═══════════════════════════════════════════════ */

.djc-banner--announcement .djc-banner__inner {
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px;
}


/* ═══════════════════════════════════════════════
   VARIANT: promo
   Slightly larger padding, allows image alongside text.
   ═══════════════════════════════════════════════ */

.djc-banner--promo .djc-banner__inner {
  padding: 16px 24px;
}


/* ═══════════════════════════════════════════════
   RESPONSIVE: stack at small screens
   ═══════════════════════════════════════════════ */

@media (max-width: 600px) {

  .djc-banner__inner {
    flex-direction: column;
    padding: 10px 14px;
  }

  .djc-banner__content {
    flex-direction: column;
    text-align: center;
  }

  .djc-banner__image {
    display: none;
  }

  .djc-banner__close {
    top: 6px;
    right: 8px;
  }
}