/* kafeblu.com — brand-overrides.css */
/* Red/black primary, silver card accent */
:root {
  --brand-primary:   #C0202A;
  --brand-accent:    #E8C060;
  --brand-gradient:  linear-gradient(135deg, #C0202A 0%, #8B0000 100%);
  --brand-gradient-h:linear-gradient(135deg, #D4242F 0%, #A00000 100%);
  --card-accent:     #C0C0C0;  /* silver */
}
.footer-btt { background: var(--brand-gradient) !important; }
.nav-link.active { color: #E8C060; }
.nav-link.active::after { background: #E8C060; }
.btn--primary { background: var(--brand-gradient); }
.btn--primary:hover { background: var(--brand-gradient-h); opacity: 1; }
/* Gold accent for KafeBlu promo strip */
.footer-promo {
  border-top-color: rgba(232,192,96,.45) !important;
  border-bottom-color: rgba(232,192,96,.45) !important;
}
/* ═══════════════════════════════════════════════════════════
   VIBZ DESIGN PATCH — brand-overrides.css additions
   Apply to all brands: vibz.live, caribbeanvibz.live,
   kafeblu.com, indeyard.live, jazzartists.co
   ═══════════════════════════════════════════════════════════ */

/* ── #1 Container — more breathing room on sides ─────────── */
.container {
  padding: 0 40px;
  max-width: 1440px;
}
@media (max-width: 768px) {
  .container { padding: 0 16px; }
}

/* ── #2 Header border — brighter, more defined ───────────── */
#site-header {
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.06),
              0 4px 24px rgba(0,0,0,.4);
}

/* ── #6 Why Vibz — golden yellow feature headings ────────── */
.feature-card__title,
.features-grid .feature h3,
.why-vibz__title,
[class*="feature"] h3,
[class*="feature"] h4 {
  color: #F6A211 !important;
}

/* ── #7 Feature tiles — three columns ────────────────────── */
.features-grid,
.feature-grid,
[class*="features"] .grid,
[class*="why"] .grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 900px) {
  .features-grid,
  .feature-grid,
  [class*="features"] .grid,
  [class*="why"] .grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 600px) {
  .features-grid,
  .feature-grid,
  [class*="features"] .grid,
  [class*="why"] .grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── #11 Ken Burns hero effect ───────────────────────────── */
.hero-slide__bg,
.hero-slide > img,
.hero-slide [style*="background-image"] {
  animation: kenBurns 12s ease-in-out infinite alternate;
  transform-origin: center center;
}

@keyframes kenBurns {
  0%   { transform: scale(1)    translate(0,     0);     }
  25%  { transform: scale(1.04) translate(-0.5%, -0.5%); }
  50%  { transform: scale(1.06) translate(0.5%,  -1%);   }
  75%  { transform: scale(1.04) translate(-0.5%,  0.5%); }
  100% { transform: scale(1)    translate(0,     0);     }
}

/* Hero viewport height — full screen on desktop */
.hero { min-height: 90vh; }
.hero-slide {
  min-height: 90vh;
  overflow: hidden;
}
@media (max-width: 768px) {
  .hero, .hero-slide { min-height: 70vh; }
}

/* ── Footer text — brighter, more legible ────────────────── */
.footer-copy,
.footer-legal a,
#site-footer {
  color: rgba(255,255,255,.55) !important;
  font-size: 12px;
}
.footer-legal a:hover {
  color: rgba(255,255,255,.9) !important;
}
.footer-copy strong {
  color: rgba(255,255,255,.65) !important;
}

/* Ken Burns — single clean version */
@keyframes kbZoomIn  { from { background-size:100%; background-position:50% 50%; } to { background-size:118%; background-position:54% 46%; } }
@keyframes kbZoomOut { from { background-size:118%; background-position:46% 54%; } to { background-size:100%; background-position:50% 50%; } }
.hero-slide { transition: opacity 1.2s ease-in-out !important; }
.hero-slide.active:nth-child(odd)  { animation: kbZoomIn  12s ease-in-out forwards !important; }
.hero-slide.active:nth-child(even) { animation: kbZoomOut 12s ease-in-out forwards !important; }

/* Why cards — correct class names */
.why-card h3 { color: #F6A211 !important; }
.why-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 24px; }
@media(max-width:900px){ .why-grid { grid-template-columns:1fr 1fr !important; } }
@media(max-width:600px){ .why-grid { grid-template-columns:1fr !important; } }