/* === Countdown Cash: additive spacing layer === */
:root { --cc-gap: 1rem; }
@media (min-width: 768px){ :root { --cc-gap: 1.25rem; } }
@media (min-width: 1024px){ :root { --cc-gap: 1.5rem; } }

.cc-container { padding-left: var(--cc-gap); padding-right: var(--cc-gap); }
.cc-footer { margin-top: 2rem; padding-top: 1.5rem; }
.cc-footer .cc-footer-grid {
  display: grid; gap: var(--cc-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .cc-footer .cc-footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* Add breathing room on small screens */
@media (max-width: 640px){
  body, .container { padding-left: .75rem; padding-right: .75rem; }
  main, .content, .page, .article { padding: .75rem; }
  header, footer { padding-left: .75rem; padding-right: .75rem; }
}

/* Safe defaults for cramped elements */
section, article { margin-bottom: 1.25rem; }


/* ===== Countdown Cash Header Enhancements (2025-10-09) ===== */
.site-header .container {
  display: flex;
  flex-direction: column; /* stack logo above nav */
  align-items: center;
  gap: 0.5rem;
}

/* Larger, responsive logo */
.site-header .brand img {
  height: clamp(56px, 7vw, 96px);
  width: auto;
  display: block;
}

/* Primary nav layout and spacing */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  justify-content: center;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  text-decoration: none;
  padding: .35rem .5rem;
  border-radius: .375rem;
}

.site-nav a.is-active {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Icon before Promotions */
.site-nav a.with-icon {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
}

.site-nav .nav-icon {
  width: 1.1em;
  height: 1.1em;
}

/* Small screens: keep things centered with some breathing room */
@media (max-width: 640px) {
  .site-header .container { gap: .35rem; }
  .site-nav { gap: .65rem .75rem; }
}


/* === Promotions Icon: Colorful Flash Animation (2025-10-09) === */
.site-nav a.with-icon {
  --promo-start: #ff6b6b;   /* warm red */
  --promo-mid:   #f7b500;   /* gold */
  --promo-end:   #22c55e;   /* green */
  --promo-glow:  rgba(247,181,0,.65);
  position: relative;
  color: var(--promo-mid);
}

.site-nav a.with-icon .nav-icon {
  display: inline-block;
  fill: currentColor; /* SVG path uses currentColor */
  stroke: none;
  /* Flash / pulse animation */
  animation: promoFlash 1600ms ease-in-out infinite;
  filter: drop-shadow(0 0 0 var(--promo-glow));
  transform-origin: center;
}

/* Add a subtle starburst pseudo-element for extra "promo" energy */
.site-nav a.with-icon::after {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 2px;
  background: radial-gradient(circle, #fff 0%, var(--promo-mid) 60%, transparent 70%);
  opacity: .0;
  pointer-events: none;
  animation: promoSpark 1600ms ease-in-out infinite;
}

/* Keyframes cycle color and add a glow pop */
@keyframes promoFlash {
  0%   { color: var(--promo-start); transform: scale(1);   filter: drop-shadow(0 0 0 var(--promo-glow)); }
  25%  { color: var(--promo-mid);   transform: scale(1.08); filter: drop-shadow(0 0 6px var(--promo-glow)); }
  50%  { color: var(--promo-end);   transform: scale(1.0);  filter: drop-shadow(0 0 0 var(--promo-glow)); }
  75%  { color: var(--promo-mid);   transform: scale(1.12); filter: drop-shadow(0 0 10px var(--promo-glow)); }
  100% { color: var(--promo-start); transform: scale(1);   filter: drop-shadow(0 0 0 var(--promo-glow)); }
}

@keyframes promoSpark {
  0%   { opacity: 0; transform: translateY(-50%) rotate(45deg) scale(0.6); }
  25%  { opacity: .85; transform: translateY(-50%) rotate(45deg) scale(1.0); }
  50%  { opacity: 0; transform: translateY(-50%) rotate(45deg) scale(0.6); }
  75%  { opacity: .9; transform: translateY(-50%) rotate(45deg) scale(1.05); }
  100% { opacity: 0; transform: translateY(-50%) rotate(45deg) scale(0.6); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-nav a.with-icon .nav-icon,
  .site-nav a.with-icon::after {
    animation: none !important;
  }
  .site-nav a.with-icon { color: var(--promo-mid); }
  .site-nav a.with-icon .nav-icon { transform: none; filter: none; }
}

.site-nav .nav-icon { width: 1.25em; height: 1.25em; }


/* === Promotions Megaphone Icon Animation (2025-10-09) === */
/* Keep link color same as other links: no special color rules on .with-icon */
.site-nav a.with-icon { color: inherit; }

/* Icon styling */
.nav-icon--megaphone { 
  display: inline-block;
  vertical-align: middle;
  transform-origin: center;
}

/* Megaphone body uses currentColor fill for consistency */
.nav-icon--megaphone .horn { fill: currentColor; }

/* Waves use currentColor stroke; animated for "sound" effect */
.nav-icon--megaphone .wave {
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  opacity: 0.0;
}

/* Fun but subtle animation: horn wiggle + waves pulse */
.site-nav a.with-icon .nav-icon--megaphone {
  animation: hornWiggle 2200ms ease-in-out infinite;
}

.site-nav a.with-icon .nav-icon--megaphone .wave1 {
  animation: wavePulse 2200ms ease-in-out infinite;
}

.site-nav a.with-icon .nav-icon--megaphone .wave2 {
  animation: wavePulse 2200ms 300ms ease-in-out infinite;
}

/* Keyframes */
@keyframes hornWiggle {
  0%   { transform: rotate(0deg) scale(1); }
  6%   { transform: rotate(-6deg) scale(1.02); }
  12%  { transform: rotate(5deg)  scale(1.02); }
  18%  { transform: rotate(-4deg) scale(1.01); }
  24%  { transform: rotate(3deg)  scale(1.01); }
  30%  { transform: rotate(0deg)  scale(1); }
  100% { transform: rotate(0deg)  scale(1); }
}

@keyframes wavePulse {
  0%   { opacity: 0; }
  10%  { opacity: .9; }
  30%  { opacity: .2; }
  50%  { opacity: .85; }
  70%  { opacity: .15; }
  100% { opacity: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-nav a.with-icon .nav-icon--megaphone,
  .site-nav a.with-icon .nav-icon--megaphone .wave {
    animation: none !important;
  }
}


/* === Footer Clock Mark (2025-10-09) === */
.footer-brand{
  display:flex; align-items:center; gap:.75rem; margin-bottom: .75rem;
  color:#0f172a;
}
.footer-brand .cc-clock{ flex:0 0 auto; }
.footer-brand-text{ line-height:1.15; }
.site-footer .footer-grid{ margin-top: 10px; }


/* === Footer Clock Dot (2025-10-09) === */
/* Inline decorative clock that follows the © line */
.clock-dot img{
  display:inline-block;
  width:18px; height:18px;
  margin-left:.4rem;
  vertical-align:middle;
  transform: translateY(-1px); /* nudge to align with text baseline */
}


/* === Footer Clock Hero (2025-10-09) === */
.footer-clock-wrap{
  display:flex;
  justify-content:flex-start; /* aligns with left of the first column */
  margin: 0 0 .5rem 0;
}
.footer-clock{
  width:64px; height:auto; display:block;
}
/* Remove any leftover spacing from old brand block */
.site-footer .footer-grid{ margin-top: 0; }

.footer-brand{display:none !important;}