/* ==========================================================================
   Home Church, base layer
   Reset, typography primitives, safe areas, utilities.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

/* Several components set an explicit display, which beats the UA rule for
   [hidden]. Restate it once, loudly, so hiding always wins. */
[hidden] { display: none !important; }

html, body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, fieldset, legend {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

/* Dynamic Type.

   The app has its own three step text size control on Profile, and it also
   honours the size somebody already set once in iOS Settings. Those are the
   people most likely to need it and least likely to go hunting through a new
   app's settings for a second switch.

   THIS PROPERTY IS NOT HOW IT DOES THAT, AND LETTING IT GO TO AUTO WAS A
   BUG. `auto` asks WKWebView for two things at once: the accessibility text
   size, which was wanted, and WebKit's text autosizing, which was not. Text
   autosizing boosts every font on the page by roughly the ratio of the
   viewport width to the layout width, so turning the phone sideways made all
   of the type bigger, and turning it back left the boost in place, because
   WebKit does not recompute it on the way down. One rotation and the app
   stayed oversized until it was killed and reopened.

   So it is pinned, and the accessibility size is read deliberately instead:
   js/store.js measures a hidden -apple-system-body probe and folds the ratio
   into --hc-text-scale, which is the same multiplication `auto` was doing,
   done once and only when the setting actually changes.

   The layout survives that because nothing here is sized to fit exactly: the
   type scale is in rem-free px multiplied by a custom property, every touch
   target has a min-height rather than a fixed one, and the one scroll
   container simply gets taller. What it does not survive is being scaled
   again underneath, by a number nothing in the app can see or reset. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
}

body {
  min-height: 100%;
  background: var(--hc-paper);
  color: var(--hc-ink);
  font-family: var(--hc-sans);
  font-size: var(--hc-body-sans);
  line-height: var(--hc-body-sans-line);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* iOS: kill the rubber band on the document. Inner scrollers keep momentum. */
  overscroll-behavior: none;
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;

  -webkit-tap-highlight-color: transparent;
}

img, svg, video { display: block; max-width: 100%; }
svg { fill: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

button { cursor: pointer; -webkit-tap-highlight-color: transparent; }

a { color: inherit; text-decoration: none; }

/* Controls should not select or show the iOS callout. Reading content still can. */
button, .hc-tab, .hc-eyebrow, .hc-numeral, .hc-section__toggle,
.hc-tabbar, .hc-navmenu {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

:focus-visible {
  outline: 2px solid var(--hc-accent-deep);
  outline-offset: 2px;
  border-radius: var(--hc-radius-sm);
}

/* --- App frame ------------------------------------------------------------ */

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--hc-paper);
}

/* The one scroll container. Momentum scrolling lives here, not on body. */
.hc-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* No smooth default. A new view must land at the top instantly, and the one
     place that wants easing asks for it per call. */
  scroll-behavior: auto;

  /* The scrollbar is chrome this design does not use. On a phone it is not
     drawn at all, and on the desktop build it was a grey bar down the side of
     a warm page. What replaces it is the index rail on the right edge, which
     says more than a scrollbar did: see js/index-rail.js. Hidden rather than
     styled, and only the drawing goes — wheel, trackpad, thumb and momentum
     are all untouched. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hc-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

.hc-screen {
  padding-left: var(--hc-screen-pad);
  padding-right: var(--hc-screen-pad);
  /* Clear the fixed header, plus the tab bar and home indicator at the end.

     --hc-pin-h is the pinned announcement strip under the header, and it is
     0px on every screen of every week nobody has pinned anything: js/app.js
     publishes the strip's measured height onto #app when it draws one and
     zeroes it when it does not. Measured rather than a constant because the
     strip is a title, and a long one wraps to two lines on a small phone. */
  padding-top: calc(var(--hc-header-h) + var(--hc-pin-h, 0px)
                    + env(safe-area-inset-top) + var(--hc-space-sm));
  padding-bottom: calc(var(--hc-chrome-space) + env(safe-area-inset-bottom) + var(--hc-space-xxl));
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

/* --- Type primitives ------------------------------------------------------ */

.hc-display-xl,
.hc-display-l,
.hc-display-m {
  font-family: var(--hc-serif);
  /* 500, not the 300 this was under Cormorant. A light weight on a high
     contrast serif still has thick strokes carrying the word; the same 300 on
     a sans is just thin, and thinner again as light text on the dark theme.
     Every former Cormorant Light slot in the app moved to 500 together. */
  font-weight: 500;
  color: var(--hc-ink);
  /* Negative now. Cormorant needed opening up; Manrope is fitted tighter by
     default and wants closing at display sizes. */
  letter-spacing: -0.015em;
}

.hc-display-xl { font-size: calc(var(--hc-display-xl) * var(--hc-text-scale)); line-height: 1.1; }
.hc-display-l  { font-size: calc(var(--hc-display-l)  * var(--hc-text-scale)); line-height: 1.125; }
.hc-display-m  { font-size: calc(var(--hc-display-m)  * var(--hc-text-scale)); line-height: 1.155; }

/* The eyebrow is the brand's signature move, and its default color changed.

   It used to be --hc-accent, which the design system is explicit about:
   decorative only, fails contrast, never set readable text in it. The trouble
   was that eyebrows had quietly become one of the app's main ways of carrying
   real information. The scripture passage on every guide row is an eyebrow.
   So is the day and time on a group card, the series name above a sermon, and
   the word that tells you a card is about the next gathering. All of that was
   being set at 2.12:1, in eleven pixel uppercase, in a church app that older
   people use.

   So the default is now the legible taupe and ornament is the opt out, rather
   than the other way around. That is the safer direction to fail in: forget
   the modifier and you get readable text, instead of forgetting it and
   quietly shipping something nobody over fifty can read.

   Visually this is a small deepening of the same warm taupe, not a new color.
   .hc-eyebrow--legible is kept as an alias so existing markup is unaffected. */

.hc-eyebrow {
  font-family: var(--hc-sans);
  font-weight: 600;
  font-size: var(--hc-eyebrow);
  line-height: var(--hc-eyebrow-line);
  letter-spacing: var(--hc-track-eyebrow);
  text-transform: uppercase;
  color: var(--hc-accent-deep);
}

/* Was the way to opt in to legibility. Now the default, kept so no markup
   has to change. */
.hc-eyebrow--legible { color: var(--hc-accent-deep); }

/* Genuinely decorative only. Brand texture with no information in it, sitting
   next to something that already says the same thing in readable type. If you
   are unsure whether an eyebrow qualifies, it does not. */
.hc-eyebrow--ornament { color: var(--hc-accent); }

.hc-body-serif {
  font-family: var(--hc-serif);
  font-weight: 400;
  font-size: calc(var(--hc-body-serif) * var(--hc-text-scale));
  line-height: 1.53;
  color: var(--hc-ink);
}

.hc-body-sans {
  font-family: var(--hc-sans);
  font-weight: 400;
  font-size: calc(var(--hc-body-sans) * var(--hc-text-scale));
  line-height: 1.5;
}

.hc-question {
  font-family: var(--hc-serif);
  font-weight: 400;
  font-size: calc(var(--hc-question) * var(--hc-text-scale));
  line-height: 1.5;
  color: var(--hc-ink);
}

.hc-quote {
  font-family: var(--hc-serif);
  font-weight: 400;
  font-style: italic;
  font-size: calc(var(--hc-quote) * var(--hc-text-scale));
  line-height: 1.45;
  color: var(--hc-ink);
}

.hc-caption {
  font-family: var(--hc-sans);
  font-weight: 400;
  font-size: var(--hc-caption);
  line-height: var(--hc-caption-line);
  color: var(--hc-mid);
}

.hc-meta {
  font-family: var(--hc-sans);
  font-weight: 400;
  font-size: var(--hc-caption);
  line-height: var(--hc-caption-line);
  color: var(--hc-mid);
}

/* Long-form serif paragraphs, spaced rather than indented. */
.hc-prose p + p { margin-top: var(--hc-space-base); }

/* --- Utilities ------------------------------------------------------------ */

.hc-hairline {
  height: var(--hc-hairline);
  background: var(--hc-rule);
  border: 0;
  width: 100%;
}

.hc-stack > * + * { margin-top: var(--hc-space-md); }
.hc-stack-sm > * + * { margin-top: var(--hc-space-sm); }
.hc-stack-lg > * + * { margin-top: var(--hc-space-lg); }

.hc-center { text-align: center; }
.hc-mt-md { margin-top: var(--hc-space-md); }
.hc-mt-lg { margin-top: var(--hc-space-lg); }
.hc-mt-xl { margin-top: var(--hc-space-xl); }
.hc-mb-md { margin-bottom: var(--hc-space-md); }

.hc-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}