/* ===== Specials Banner (no CTA / no divider) ===== */
:root{
  --specials-offset: 0px;
  --specials-speed: 900ms;            
}

#specials-banner{
  position: sticky; top: 0; z-index: 9999;
  display: flex; align-items: center; gap: 0;
  padding: 22px 16px;
  background: #69513f; color: #fff;
  font-family: 'Prata', serif; font-size: 24px;
  box-shadow: 0 3px 12px rgba(0,0,0,.25);

  /* pop-down animation */
  transform: translateY(-100%);
  opacity: 0;
  animation: specials-in var(--specials-speed) cubic-bezier(.22,1,.36,1) forwards;
  will-change: transform, opacity;
}

/* animate out when closing */
#specials-banner.is-closing{
  animation: specials-out var(--specials-speed) cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes specials-in { to { transform: translateY(0); opacity: 1; } }
@keyframes specials-out { to { transform: translateY(-100%); opacity: 0; } }

/* Centered + stacked copy */
#specials-banner .txt{
  flex: 1;
  display: flex;
  flex-direction: column;      
  align-items: center;
  justify-content: center;
  text-align: center;
}
#specials-banner .headline{
  display: block;              /* override global span inline-block */
  font-weight: 500;
  color: #fdf7e3;
  text-shadow: 1px 1px #000;
  line-height: 1.6;
  margin: 0 0 .25rem;          /* space above subline */
}
#specials-banner .subline{
  display: block;              /* override global span inline-block */
  margin: 0;                   /* remove old inline left-gap */
  opacity: .9;
  font-size: 1.0rem;
  color: #fff;
  text-shadow: 1px 1px #000;
}

/* Close button (far right) */
#specials-banner .x{
  margin-left: 12px;
  background: transparent; border: 0; color: #fff;
  font-size: 54px; line-height: 1; cursor: pointer; padding: 2px 4px;
}

/* Offset absolute/fixed headers by banner height */
.navbar{
  position: absolute; left: 0; right: 0; top: var(--specials-offset);
  width: 100%; height: 140px !important;
  z-index: 2000; transition: none; /* avoid lag */
}
header.sticky, .header, .site-header{ top: var(--specials-offset, 0px); }
/* Make sub-page hero sit below the specials banner */


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #specials-banner{ animation: none; transform: none; opacity: 1; }
  #specials-banner.is-closing{ animation: none; }
}

/* ===== Responsive ===== */
@media (max-width:640px){
  #specials-banner{ flex-wrap: wrap; gap: 8px; }
  #specials-banner .headline{ font-weight: 400; font-size: 13px; }
  #specials-banner .subline{ font-size: .81rem; }
}