/**
 * Fast Tracking — universal call bar stylesheet.
 *
 * Pairs with /template-parts/callbar-ft.php
 *
 * Sits above .masthead in document flow. Scrolls away with the page;
 * .masthead remains the sticky element below (no changes to masthead CSS needed).
 *
 * Aligned with masthead-inner geometry:
 *   - max-width: 1440px (matches .masthead-inner)
 *   - horizontal padding: 48px (24px below 720px)
 *
 * Design rationale:
 *   - Dark ink background creates a clear "trust band" above the lighter masthead
 *   - Brass accent on the phone link (the actionable element) draws the eye
 *   - Italic Fraunces tagline maintains the editorial brand voice
 *   - Mono font on hours mirrors the existing .stats-table and .footer-contact-hours treatment
 *
 * Location: /wp-content/themes/astra-child/assets/shared/style-callbar.css
 */

/* ===== Bar container ===== */
.callbar {
  position: relative;
  z-index: 99;                        /* below masthead's z-index: 100 */
  background: var(--ink-deep, #061826);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--sans, 'Inter Tight', -apple-system, sans-serif);
  font-size: 0.8125rem;               /* 13px */
  line-height: 1.4;
  border-bottom: 1px solid rgba(201, 152, 106, 0.25);
}

.callbar-inner {
  max-width: 1440px;                  /* matches .masthead-inner */
  margin: 0 auto;
  padding: 9px 48px;                  /* horizontal matches masthead */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  overflow: hidden;
}

/* ===== Tagline (italic, hidden on mobile) ===== */
.callbar-tagline {
  font-family: var(--serif, 'Fraunces', 'Times New Roman', serif);
  font-style: italic;
  font-weight: 380;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.62);
}

/* ===== Separators ===== */
.callbar-sep {
  color: var(--brass, #C9986A);
  opacity: 0.55;
  font-weight: 500;
  flex-shrink: 0;
}

/* ===== Phone link ===== */
.callbar-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--brass, #C9986A);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-feature-settings: 'tnum';
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.callbar-phone:hover {
  color: #ffffff;
}

.callbar-phone:focus-visible {
  color: #ffffff;
  outline: 2px solid rgba(201, 152, 106, 0.6);
  outline-offset: 3px;
  border-radius: 2px;
}

.callbar-phone-icon {
  flex-shrink: 0;
  margin-top: -1px;                   /* optical alignment with text baseline */
}

/* ===== Hours ===== */
.callbar-hours {
  font-family: var(--mono, 'JetBrains Mono', 'SF Mono', monospace);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

/* ===== Mobile (matches existing 720px breakpoint) ===== */
@media (max-width: 720px) {
  .callbar {
    font-size: 0.78rem;
  }

  .callbar-inner {
    padding: 8px 24px;                /* horizontal matches masthead at this breakpoint */
    gap: 10px;
    justify-content: flex-start;      /* left-aligned per spec */
  }

  /* Hide tagline + the separator immediately after it.
     Phone + hours remain, left-aligned. */
  .callbar-tagline,
  .callbar-tagline + .callbar-sep {
    display: none;
  }

  .callbar-phone {
    gap: 6px;
  }

  .callbar-hours {
    font-size: 0.68rem;
  }
}

/* ===== Very narrow phones — drop hours if there's no room ===== */
@media (max-width: 380px) {
  .callbar-hours,
  .callbar-phone + .callbar-sep {
    display: none;
  }
}