/* =========================================================================
   Tikkun Sanctuary — staging layer over site.css (owned by the main session).
   site.css is the Tikkun Retreats system re-tokened to navy / cream / gold;
   this file adds only what the new architecture needs.
   ========================================================================= */

:root { --util-h: 34px; }

/* the thin utility strip above the fixed header: the way back to Ha'Nefesh */
.utility-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 101; height: var(--util-h);
  display: flex; align-items: center;
  background: var(--forest-deep); color: rgba(245, 240, 232, 0.82);
  font-size: 0.8125rem; letter-spacing: 0.02em;
}
.utility-bar__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: min(100% - (var(--gutter) * 2), var(--maxw-wide)); margin-inline: auto; }
.utility-bar a { color: var(--sage); text-decoration: none; }
.utility-bar a:hover { color: var(--white); text-decoration: underline; }
.site-header { top: var(--util-h); }
@media (max-width: 720px) {
  .utility-bar__inner > span:first-child { display: none; }
  .utility-bar__inner { justify-content: center; }
  .utility-bar { font-size: 0.75rem; }
}

/* the Sanctuary has no logo yet: a set wordmark stands in (flagged in HANDOFF) */
.brand--word { color: var(--white); }
.brand__word {
  font-family: var(--font-display); font-weight: 500; font-size: 1.65rem; line-height: 1;
  letter-spacing: 0.01em; color: inherit; white-space: nowrap;
}
.brand__word em { font-style: italic; color: var(--sage); }
.site-header--solid .brand--word, .site-header.is-solid .brand--word { color: var(--white); }
.site-footer .brand--word { color: var(--white); }
.site-footer .brand__word { font-size: 2rem; }
@media (max-width: 400px) { .brand__word { font-size: 1.35rem; } }

.nav-mobile-only { display: none !important; }
@media (max-width: 1100px) { .js .nav .nav-mobile-only { display: block !important; } }
@media (min-width: 1101px) and (max-width: 1280px) { .nav { gap: 1.25rem; } .nav__link { font-size: 0.9rem; } }

.staging-note { margin: 1.5rem 0 0; font-size: 0.75rem; opacity: 0.6; text-align: center; }

/* the staging form notice (assets/js/staging.js) */
.staging-notice {
  margin-top: 1.25rem; padding: 1rem 1.25rem; border-left: 3px solid var(--clay);
  background: var(--cream-deep); color: var(--ink); font-size: 0.95rem;
}

/* everything that measured from the top of the viewport now also clears the utility strip */
html { scroll-padding-top: calc(var(--header-h) + var(--util-h) + 1.5rem); }
.hero { padding-top: calc(var(--header-h) + var(--util-h) + 3rem); }
body[data-header="solid"] #main { margin-top: var(--util-h); }
@media (max-width: 1100px) {
  .js .nav {
    inset: calc(var(--header-h) + var(--util-h)) 0 auto 0;
    max-height: calc(100dvh - var(--header-h) - var(--util-h));
  }
}

/* a general callout (e.g. the staging note on the legal pages) */
.notice {
  margin: 0 0 2rem; padding: 1rem 1.25rem; border-left: 3px solid var(--clay);
  background: var(--cream-deep); color: var(--ink); font-size: 0.95rem;
}

/* long addresses in the footer must wrap rather than push the page sideways */
.footer-list a { overflow-wrap: anywhere; }

/* inside a grid form the notice spans every column */
form .staging-notice { grid-column: 1 / -1; }

/* Brighter heroes (brief §27: "bright and clear, not dark"). Hero type sits at the BOTTOM,
   so the bottom of the scrim keeps its full strength for legibility; only the middle,
   where the photograph is, is opened up. The top keeps enough to hold the cream nav. */
.hero__media::after {
  background:
    linear-gradient(to top, rgba(6, 12, 22, 0.84) 0%, rgba(6, 12, 22, 0.5) 30%, rgba(6, 12, 22, 0.08) 58%, rgba(6, 12, 22, 0.08) 78%, rgba(6, 12, 22, 0.34) 100%);
}

/* footer blurb: .small defaults to ink-soft, which is unreadable on navy */
.site-footer .small { color: rgba(245, 240, 232, 0.82); }

/* the temporary Tikkun Sanctuary logo (docs/brand-source/) is squarer than the old
   Retreats one, so it needs more height to keep "SANCTUARY" legible */
.brand__logo { height: 66px; }
.brand__logo--footer { height: 104px; }
@media (max-width: 1100px) { .brand__logo { height: 54px; } .brand__logo--footer { height: 88px; } }
/* over a bright sky the cream logo needs a little separation; not once the bar is solid */
.site-header:not(.is-solid):not(.site-header--solid) .brand__logo { filter: drop-shadow(0 1px 10px rgba(6, 12, 22, 0.45)); }