/*
 * Promo top bar + "Deal ends in" countdown on the inner layouts (2026-10-08).
 *
 * Markup: resources/views/frontend/layouts/partials/promo_bar.blade.php, shared
 * with the home page. The home page styles it from its own inlined bundle
 * (public/frontend_assets/home/home.css, sources resources/css/home/30-countdown.css
 * and 90-overrides.css); this file carries the same rules, taken from that bundle,
 * for layouts.app and layouts.app_no_menu. Everything is scoped to #topHead so it
 * cannot touch other .container / .col / .flex markup on the page.
 *
 * Sizes are px: the home bundle already uses px for this bar, and the main layout
 * keeps html at 16px. If the home bar's look changes, change it here too.
 */

#topHead.main-top-content {
  background-color: var(--sc-navy);
  min-height: 56px;
}

/* Same box as the 2025 menu's #sc2025-nav .container, so the offer text lines up
   with the logo and the countdown with Start Here: 90px sides, 40px at <=992px,
   20px at <=576px. Max width 1880px, which scancafe.css caps at 1370px (>=1401px)
   and 1780px (>=1919px) with !important. The home bundle mirrors all of this in
   resources/css/home/90-overrides.css. */
#topHead .container {
  width: 100%;
  max-width: 1880px;
  margin: 0 auto;
  padding: 0 90px;
}

#topHead .flex {
  display: flex;
}

#topHead .col {
  flex: 1 0 0%;
  width: auto;
}

#topHead .main-top-row {
  justify-content: space-between;
  align-items: center;
}

#topHead .deal-col {
  justify-content: flex-end;
}

#topHead .main-top-text {
  color: var(--sc-on-brand);
  font-size: 18px;
}

#topHead .main-top-text a,
#topHead .main-top-text a:hover {
  color: var(--sc-on-brand);
  text-decoration: none;
}

#topHead .deal-text {
  color: var(--sc-on-brand);
  padding-right: 8px;
  padding-top: 8px;
  font-size: 16px;
}

/* Countdown (home 30-countdown.css) */
#topHead .sc-countdown {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-2);
  font-variant-numeric: tabular-nums;
}

#topHead .sc-cd-seg {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
  padding: 2px 6px;
  border-radius: var(--sc-radius-sm);
  background: rgba(255, 255, 255, .15);
}

#topHead .sc-cd-num,
#topHead .sc-cd-label {
  color: var(--sc-on-brand);
}

/* Fixed-width digits stop the bar reflowing every second. */
#topHead .sc-cd-num {
  font-size: 20px;
  font-weight: var(--sc-weight-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

#topHead .sc-cd-label {
  font-size: 10px;
  font-weight: var(--sc-weight-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media all and (max-width: 1100px) {
  #topHead .deal-text { display: none; }
  #topHead .main-top-text { font-size: 16px; }
}

@media (max-width: 992px) {
  #topHead .container { padding: 0 40px; }
}

@media (max-width: 576px) {
  #topHead .container { padding: 0 20px; }
}

@media all and (max-width: 768px) {
  #topHead.main-top-content { padding: 4px 0; }
  #topHead .col { flex: unset; }
  #topHead .main-top-row { flex-wrap: wrap; justify-content: center; }
  #topHead .main-top-row > .col { width: auto; padding: 2px 0; }
  #topHead .main-top-text { font-size: 12px; }
}

@media (max-width: 767px) {
  #topHead .sc-cd-seg { min-width: 34px; }
  #topHead .sc-cd-num { font-size: 16px; }
  #topHead .sc-cd-label { font-size: 9px; }
}