/* ============================================
   Blueprint 1122, V2 shared additions
   1. Header responsive fix + bold mobile drawer
   2. Sticky CTA bar (Lazyweb F1: CTAs disappear on scroll)
   Loaded on every page after brand.css.
   ============================================ */

/* --- Header: stop the desktop nav from colliding with the logo ---------
   brand.css only collapses to the hamburger at 720px, but the full nav
   needs about 950px once the logo and the Let's Talk button are counted.
   Between those widths "Our Team" wrapped to two lines and "About" ran
   into the wordmark. Links never wrap now, and the drawer takes over
   below 1000px. */

.site-header .container { gap: 1.5rem; }
/* z-index keeps the wordmark above the open drawer so branding never
   disappears mid-navigation. */
.site-header .logo { flex: 0 0 auto; position: relative; z-index: 10; }
.site-header .logo img { display: block; }
.site-nav a { white-space: nowrap; }

/* The drawer wordmark (injected by v2.js) belongs to the mobile menu only.
   Hidden by default so it never doubles up with the header logo on desktop. */
.site-nav .nav-brand { display: none; }

@media (max-width: 1180px) and (min-width: 1001px) {
  .site-nav { gap: 1.75rem; }
  .site-nav a { font-size: 0.88rem; letter-spacing: 0.09em; }
  .site-nav .btn { padding: 0.8em 1.5em; }
}

/* --- Mobile drawer: bold, modern, thumb-friendly ----------------------- */

@media (max-width: 1000px) {
  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0 0 2rem;
    background: var(--bp-dark);
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform 0.45s var(--ease-out);
  }
  .site-nav.open { transform: none; }

  /* The wordmark sits at the top of the drawer (injected by v2.js) and
     lines up with where the header logo was, so the brand never vanishes
     while the menu is open. */
  .site-nav .nav-brand {
    display: block;
    padding: 22px clamp(1.5rem, 6vw, 3rem) 2.2rem;
    border-bottom: none;
  }
  .site-nav .nav-brand img { display: block; height: 30px; width: auto; }
  .site-header .logo { transition: opacity 0.2s; }
  body.nav-open .site-header .logo { opacity: 0; pointer-events: none; }

  /* Full-width tap rows with hairline dividers. Each row is 72px tall,
     well past the 44px touch-target minimum. */
  .site-nav a:not(.btn):not(.nav-brand) {
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 0 clamp(1.5rem, 6vw, 3rem);
    font-size: clamp(1.5rem, 6vw, 2.1rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(231, 228, 224, 0.16);
    transition: background 0.2s, padding-left 0.25s var(--ease-out);
  }
  .site-nav .nav-brand + a { border-top: 1px solid rgba(231, 228, 224, 0.16); }
  .site-nav a:not(.btn):not(.nav-brand):hover,
  .site-nav a:not(.btn):not(.nav-brand):active {
    background: rgba(231, 228, 224, 0.08);
    padding-left: calc(clamp(1.5rem, 6vw, 3rem) + 10px);
  }

  /* The red underline flourish reads as a stray line in the drawer. */
  .site-nav a::after { display: none; }

  /* Active page gets a solid red edge instead. */
  .site-nav a:not(.btn):not(.nav-brand).active {
    box-shadow: inset 5px 0 0 var(--bp-red);
    background: rgba(231, 228, 224, 0.06);
  }

  /* Let's Talk stays the loud primary action, full width at the bottom. */
  .site-nav .btn {
    margin: 2rem clamp(1.5rem, 6vw, 3rem) 0;
    padding: 1.15em 2em;
    font-size: 0.95rem;
    text-align: center;
  }

  /* Staggered entrance so the drawer feels built, not dumped. */
  .site-nav.open a {
    animation: navRowIn 0.4s var(--ease-out) both;
  }
  .site-nav.open a:nth-child(3) { animation-delay: 0.04s; }
  .site-nav.open a:nth-child(4) { animation-delay: 0.08s; }
  .site-nav.open a:nth-child(5) { animation-delay: 0.12s; }
  .site-nav.open a:nth-child(6) { animation-delay: 0.16s; }

  /* Bigger, easier hamburger target. */
  .nav-toggle { width: 52px; height: 52px; padding: 15px 11px; }
  .nav-toggle span { width: 30px; height: 2.5px; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}

/* --- Photos bloom from blueprint gray into color on scroll -------------
   brand.css already fades photos to full color on hover, but hover does
   not exist on touch, so on a phone the color never arrived. The reveal
   observer in site.js adds .visible when a photo scrolls into view, so
   the same gray-to-color beat now plays for everyone: blueprint before,
   finished building after. Hover still works as a desktop bonus. */

/* Selectors are scoped to .split / .card to outrank the base rules in
   brand.css, which are more specific than a bare .photo-frame img. */
.split .photo-frame img,
.card.card-photo img {
  transition: filter 1.2s var(--ease-out), transform 0.6s var(--ease-out);
}
/* Identity values rather than `filter: none`. Browsers will not interpolate
   a filter list to the none keyword, so the fade would never run. Matching
   the function list on both ends makes it animate. */
.split .photo-frame.visible img,
.card.card-photo.visible img {
  filter: grayscale(0) sepia(0) hue-rotate(0deg) saturate(1) brightness(1);
}

@media (prefers-reduced-motion: reduce) {
  .photo-frame img, .card-photo img { transition: none; }
}

/* --- Hero eyebrow: keep it on one line on phones -----------------------
   "Building Spaces. Building Ministry." was breaking with a lone
   "Ministry." on line two. Tightening size and tracking fits it on one
   line down to 360px, and the hero gets real breathing room under the
   fixed header. */

@media (max-width: 720px) {
  .hero .hero-eyebrow,
  .page-hero .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    margin-bottom: 1.6rem;
    text-wrap: balance;
  }
  .hero .hero-eyebrow::before { width: 12px; margin-right: 0.45em; }
  .hero { padding-top: 92px; }
  .hero h1 { line-height: 1.06; }
}

@media (max-width: 400px) {
  .hero .hero-eyebrow { font-size: 0.63rem; letter-spacing: 0.07em; }
}

@keyframes navRowIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Keep the page from scrolling behind an open drawer. */
body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .site-nav { transition: none; }
  .site-nav.open a { animation: none; }
  .site-nav a:not(.btn):not(.nav-brand):hover { padding-left: clamp(1.5rem, 6vw, 3rem); }
}

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: rgba(31, 33, 33, 0.96);
  backdrop-filter: blur(6px);
  transform: translateY(110%);
  transition: transform 0.35s var(--ease-out, ease-out);
}

.sticky-cta.visible {
  transform: translateY(0);
}

.sticky-cta .sticky-cta-label {
  color: var(--bp-paper, #e7e4e0);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 0.5rem;
  white-space: nowrap;
}

.sticky-cta .btn {
  padding: 0.55rem 1.1rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

.sticky-cta .btn-ghost {
  color: var(--bp-paper, #e7e4e0);
  border: 1px solid rgba(231, 228, 224, 0.4);
  background: transparent;
}

.sticky-cta .btn-ghost:hover {
  border-color: var(--bp-paper, #e7e4e0);
}

@media (max-width: 720px) {
  .sticky-cta .sticky-cta-label { display: none; }
  .sticky-cta { gap: 0.5rem; padding: 0.6rem 0.6rem; }
  .sticky-cta .btn { padding: 0.5rem 0.8rem; font-size: 0.72rem; }
  .sticky-cta .btn:nth-child(4) { display: none; } /* drop tertiary on phones */
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}