/* ==========================================================================
   Majestic Renovations — promotion components
   Loaded on every page. Copy edits live in the HTML; timing lives in offer.js.
   ========================================================================== */

/* ---------- announcement bar ---------- */
/* The bar is fixed on EVERY viewport and the nav sits directly beneath it at
   whatever height the bar actually is. offer.js measures the bar and writes
   --bar-h, so wrapping text can never clip or leave a gap under the nav. */
#ann-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  background: var(--charcoal);
  min-height: 44px; height: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 9px 52px;
  transition: transform 0.3s ease;
}
#ann-bar.hidden { transform: translateY(-100%); }
body.has-bar { padding-top: var(--bar-h, 44px); }
body.has-bar #navbar { top: var(--bar-h, 44px); }
/* keep the homepage hero a full screen tall with the bar above it */
body.has-bar #hero { height: calc(100vh - var(--bar-h, 44px)); }
.ann-text {
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.9); text-align: center; line-height: 1.45;
  margin: 0;
}
.ann-text strong { color: var(--gold-pale); font-weight: 600; }
.ann-text a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4); }
.ann-text a:hover { border-color: #fff; }
.ann-days {
  display: inline-block; margin-left: 6px;
  color: var(--gold-pale); font-weight: 600;
}
.ann-close {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(255,255,255,0.5);
  font-size: 16px; cursor: pointer; line-height: 1; padding: 4px;
  transition: color 0.2s;
}
.ann-close:hover { color: #fff; }

/* Progressive shortening — the bar must stay one or two lines, never three.
   Nothing load-bearing is hidden: the offer name, the countdown and the phone
   number survive all the way down to 320px. */
@media (max-width: 860px) {
  .ann-long { display: none; }
  #ann-bar { padding: 9px 46px; }
  .ann-text { font-size: 11.5px; letter-spacing: 0.03em; }
}
@media (max-width: 560px) {
  .ann-deadline { display: none; }
  #ann-bar { padding: 8px 40px; }
  .ann-text { font-size: 11px; }
  .ann-close { right: 10px; }
}

/* ---------- offer band (interior pages) ---------- */
.offer-band {
  background: var(--dark);
  border-top: 3px solid var(--gold);
  padding: 62px 80px;
}
.offer-inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.offer-badge {
  display: inline-block; font-size: 9px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-pale); border: 1px solid var(--gold);
  padding: 6px 16px; margin-bottom: 20px;
}
.offer-band h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(28px, 5vw, 44px); line-height: 1.15;
  color: var(--white); margin-bottom: 16px;
}
.offer-band h2 em { font-style: italic; color: var(--gold-pale); }
.offer-lede {
  font-size: 15.5px; line-height: 1.8; font-weight: 300;
  color: rgba(255,255,255,0.72); max-width: 62ch; margin: 0 auto 34px;
}
.offer-lede strong { color: var(--white); font-weight: 500; }

/* the three upgrades */
.upgrades {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 860px; margin: 0 auto 34px;
}
.upgrade {
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.03);
  padding: 24px 20px; text-align: center;
  transition: border-color 0.25s, background 0.25s;
}
.upgrade:hover { border-color: var(--gold); background: rgba(184,146,42,0.08); }
.upgrade-mark {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-pale); display: block; margin-bottom: 10px;
}
.upgrade h3 {
  font-family: var(--font-display); font-size: 21px; font-weight: 400;
  color: var(--white); line-height: 1.25; margin-bottom: 8px;
}
.upgrade p {
  font-size: 13px; line-height: 1.7; font-weight: 300;
  color: rgba(255,255,255,0.6);
}
.offer-actions {
  display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap;
}
.offer-phone {
  font-size: 15px; font-weight: 500; color: var(--gold-pale);
  letter-spacing: 0.04em; padding: 16px 8px;
}
.offer-phone:hover { color: var(--white); }
.offer-fine {
  font-size: 11.5px; line-height: 1.7; color: rgba(255,255,255,0.42);
  max-width: 68ch; margin: 26px auto 0;
}
.offer-deadline {
  display: inline-block; margin-top: 18px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-pale);
}

/* ---------- referral tag ---------- */
.referral-tag {
  border-top: 1px solid rgba(255,255,255,0.1);
  background: var(--black);
  padding: 26px 80px;
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap; text-align: center;
}
.referral-mark {
  font-size: 9px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--dark);
  background: var(--gold-pale); padding: 6px 14px; white-space: nowrap;
}
.referral-copy {
  font-size: 13.5px; line-height: 1.7; font-weight: 300;
  color: rgba(255,255,255,0.6); max-width: 74ch;
}
.referral-copy strong { color: var(--gold-pale); font-weight: 600; }
.referral-copy a { color: rgba(255,255,255,0.85); border-bottom: 1px solid rgba(255,255,255,0.3); }
.referral-copy a:hover { color: var(--gold-pale); border-color: var(--gold-pale); }

/* light variant, for use on a pale section */
.referral-tag.light { background: var(--warm-gray); border-top: 1px solid var(--mid-gray); }
.referral-tag.light .referral-copy { color: var(--text-mid); }
.referral-tag.light .referral-copy strong { color: var(--gold); }
.referral-tag.light .referral-copy a { color: var(--text-dark); border-bottom-color: var(--stone); }
.referral-tag.light .referral-mark { background: var(--gold); color: #fff; }

/* ---------- popup additions ---------- */
.sm-upgrades {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.sm-upgrades li {
  font-size: 13.5px; font-weight: 300; line-height: 1.6;
  color: rgba(255,255,255,0.82); padding-left: 20px; position: relative;
}
.sm-upgrades li::before {
  content: '\2713'; position: absolute; left: 0; top: 0;
  color: var(--gold-pale); font-weight: 700; font-size: 12px;
}
.sm-referral {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--mid-gray);
  font-size: 11.5px; line-height: 1.6; color: var(--text-mid); text-align: center;
}
.sm-referral strong { color: var(--gold); font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .offer-band { padding: 52px 40px; }
  .referral-tag { padding: 24px 40px; }
}
@media (max-width: 900px) {
  .upgrades { grid-template-columns: 1fr; max-width: 420px; }
}
@media (max-width: 640px) {
  .offer-band { padding: 44px 24px; }
  .referral-tag { padding: 22px 24px; flex-direction: column; gap: 12px; }
  .offer-actions { flex-direction: column; width: 100%; }
  .offer-actions > * { width: 100%; text-align: center; }
}

/* The announcement bar directly above already carries the offer, so the hero
   line drops its descriptive half on phones rather than running to 3 lines. */
@media (max-width: 560px) {
  .hero-offer-long { display: none; }
}