/* Indy Shirt Printing — visual polish pass.
   Loaded site-wide as an additive override (same pattern as hero-overrides.css)
   so no existing markup, RSC payload, or layout logic has to change.

   Covers: typography system, motion easing, and the arrow-icon fix
   (browsers were substituting a colored emoji glyph for the ↗ / → characters
   used in every button and link; U+FE0E has been appended to those characters
   sitewide to force text-style rendering, and font-variant-emoji below is a
   second line of defense on top of that). */

:root {
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Outfit", var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Force text-style (monochrome, current-color) presentation for symbol
   characters everywhere, so no arrow/glyph ever renders as a colored emoji
   regardless of platform emoji-font defaults. */
html {
  font-variant-emoji: text;
}

body {
  font-family: var(--font-body);
}

/* Own the whole heading stack, including every compound selector the base
   stylesheet uses (.service-card h3, .detail-content h3, .related-grid h3,
   etc.) — !important is intentional here, this file's entire job is to win
   that cascade without having to enumerate every existing selector. */
h1,
h2,
h3 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.015em !important;
}

.brand span,
.hero-stamp {
  font-family: var(--font-display) !important;
}

.hero h1,
.detail-hero-copy h1 {
  font-weight: 600;
}

.eyebrow,
.section-kicker,
.detail-hero-label,
nav a,
.button,
.button-dark,
.underlined-link,
.service-number,
.hero-notes b {
  font-family: var(--font-body);
}

/* Motion: replace the default `ease` timing with a slower-out, premium curve
   on every interactive element that already declares a transition. */
.button,
.service-card,
.card-arrow,
.underlined-link,
.header-cta,
a {
  transition-timing-function: var(--ease-premium);
}

/* Arrow / icon refinement — a touch more breathing room and a slightly
   larger, more confident mark, with its own subtle motion on hover so it
   reads as a considered detail rather than default punctuation. */
.button span,
.header-cta span,
.card-arrow,
.underlined-link span {
  display: inline-block;
  transition: transform 0.35s var(--ease-premium);
}

.button:hover span,
.header-cta:hover span,
.service-card:hover .card-arrow,
.underlined-link:hover span {
  transform: translate(2px, -2px);
}

.card-arrow {
  font-size: 1.05rem;
  opacity: 0.85;
}

.service-card:hover .card-arrow {
  opacity: 1;
}

/* --- Call-now CTAs: AI receptionist answers 24/7. Number lives only in the
   tel: href, never in visible text, per instruction. --- */

.cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.button-outline {
  background: transparent;
  color: var(--paper, #f4f1eb);
  border: 1.5px solid currentColor;
  box-shadow: none;
}

.button-outline:hover {
  background: var(--paper, #f4f1eb);
  color: var(--dark, #1e2926);
}

/* On light (paper) backgrounds — e.g. inside cards or light sections —
   swap the outline to the dark ink color so it stays legible. */
.light-surface .button-outline,
.footer-contact .button-outline {
  color: var(--ink, #1e2926);
}
.light-surface .button-outline:hover {
  background: var(--ink, #1e2926);
  color: var(--paper, #f4f1eb);
}

.call-sub {
  display: block;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-top: 0.15rem;
}

.header-call-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.2rem;
  white-space: nowrap;
}

.header-call-badge {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent, #b94f36);
}

/* Sticky mobile call bar — hidden on desktop, always visible on small
   screens where tap-to-call converts best. */
.mobile-call-bar {
  display: none;
}

@media (max-width: 720px) {
  .mobile-call-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    padding: 0.7rem 0.85rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: var(--dark, #1e2926);
    box-shadow: 0 -6px 24px rgba(6, 10, 9, 0.35);
  }

  .mobile-call-bar a {
    width: 100%;
    justify-content: center;
    margin-top: 0;
  }

  .mobile-call-bar .call-sub {
    opacity: 0.85;
  }

  /* keep the fixed bar from covering footer content on mobile */
  body {
    padding-bottom: 4.75rem;
  }

  .header-call-link {
    display: none;
  }
}