/*
Theme Name:   The Crossing
Theme URI:    https://thecrossingnineveh.com/
Description:  Block theme for The Crossing Nineveh. Full template control — header, footer, sermon pages and archives are all editable in the Site Editor. Open Doors brand tokens live in theme.json.
Author:       The Crossing Nineveh
Version:      2.0.0
Requires at least: 6.6
Tested up to: 6.6
Text Domain:  the-crossing
*/

/* -----------------------------------------------------------
   Brand tokens — mirror of theme.json for non-block CSS use.
   ----------------------------------------------------------- */
:root {
  --od-bg:       #faf6ef;
  --od-bg-2:     #efe7d6;
  --od-ink:      #0e0d0b;
  --od-ink-sub:  #3a3530;
  --od-dim:      #8a8378;
  --od-rule:     #e6dfd2;
  --od-brick:    #c8593a;
  --od-brick-dk: #a8401f;
  --od-gold:     #b8915a;
  --od-cream:    #f6efe1;
  --od-cream-2:  #c8c0b0;
  --od-rule-dk:  #2c2620;
}

/* -----------------------------------------------------------
   Eyebrow component
   Used above almost every section heading.
   Markup:
     <span class="od-eyebrow"><span class="od-eyebrow__rule"></span>Text</span>
   ----------------------------------------------------------- */
.od-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--od-brick);
  margin-bottom: 18px;
}
.od-eyebrow--on-dark { color: var(--od-gold); }
.od-eyebrow__rule {
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

/* Self-contained eyebrow used by the block patterns (no inner span needed).
   Add the class `is-on-dark` for the gold variant on dark sections. */
.od-eyebrow-simple {
  display: inline-flex;
  align-items: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--od-brick);
  margin: 0 0 18px;
}
.od-eyebrow-simple::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .5;
  margin-right: 10px;
}
.od-eyebrow-simple.is-on-dark { color: var(--od-gold); }

/* Mono tag used at the top of cards (01 · 02 · 03 …). */
.od-card-tag {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--od-brick);
  margin: 0 0 14px;
}
.od-card-tag.is-on-dark { color: var(--od-gold); }

/* Dashed "more to come" placeholder tile (leadership pattern). */
.od-placeholder-tile {
  border: 1px dashed var(--od-rule);
  border-radius: 4px;
  min-height: 320px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--od-dim);
}

/* -----------------------------------------------------------
   FAQ <details> styling
   theme.json also covers this; this is the fallback for when
   the editor outputs a bare <details> block.
   ----------------------------------------------------------- */
details.od-faq {
  border-top: 1px solid var(--od-rule);
  padding: 24px 0;
}
details.od-faq:last-child { border-bottom: 1px solid var(--od-rule); }
details.od-faq > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
details.od-faq > summary::-webkit-details-marker { display: none; }
details.od-faq > summary > h3 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
details.od-faq > summary > .od-faq__plus {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--od-rule);
  display: grid; place-items: center;
  transition: transform .2s, background .2s, color .2s;
  flex-shrink: 0;
}
details.od-faq[open] > summary > .od-faq__plus {
  transform: rotate(45deg);
  background: var(--od-ink);
  color: #fff;
  border-color: var(--od-ink);
}

/* -----------------------------------------------------------
   Chip selector (Plan-a-visit form)
   ----------------------------------------------------------- */
.od-chip {
  background: #fff;
  border: 1px solid var(--od-rule);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--od-ink);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.od-chip[aria-pressed="true"],
.od-chip:focus-visible {
  background: var(--od-ink);
  color: #fff;
  border-color: var(--od-ink);
}

/* -----------------------------------------------------------
   Sticky-nav scroll state
   Pair with a tiny JS snippet that toggles `.is-scrolled` on
   the site header after `scrollY > 30`.
   ----------------------------------------------------------- */
.ct-header-cta { transition: background .2s, backdrop-filter .2s; }
.od-header, header.wp-block-template-part { transition: background .2s, backdrop-filter .2s, border-color .2s; }
.od-header.is-scrolled, header.is-scrolled {
  background: rgba(250, 246, 239, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--od-rule);
}

/* -----------------------------------------------------------
   Mobile overrides
   The prototype is desktop-only. Until a proper mobile pass
   happens, soften the display type so it doesn't overflow.
   ----------------------------------------------------------- */
/* -----------------------------------------------------------
   Responsive
   The prototype was desktop-only; this is the mobile pass.
   Display type scales down, multi-column grids collapse, the
   oversized desktop section gutters tighten, and the header fits
   a 360px screen. Block inline styles win on specificity, so the
   padding overrides need !important.
   ----------------------------------------------------------- */

/* Tablet — three-up grids become two-up */
@media (max-width: 900px) {
  .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  :root {
    --wp--preset--font-size--h1: 3rem;
    --wp--preset--font-size--h2: 2rem;
    --wp--preset--font-size--mega: 3.5rem;
  }

  .wp-block-cover { min-height: 60vh; }

  /* Card grids go single column */
  .wp-block-post-template.is-layout-grid {
    grid-template-columns: 1fr !important;
  }

  /* Section gutters: the desktop 96-128px sides are unusable at 375px */
  .wp-block-group.alignfull,
  .wp-block-cover.alignfull,
  .od-header,
  .od-msg-hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Full-height dark heroes get shorter vertical padding too */
  .od-msg-hero {
    padding-top: var(--wp--preset--spacing--90) !important;
    padding-bottom: var(--wp--preset--spacing--70) !important;
  }

  /* Faces strip: five stacked full-width portraits is a very long scroll */
  .od-faces {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--20);
  }
  .od-faces > .wp-block-column { flex-basis: auto !important; }

  /* Featured message on the archive stacks; drop the fixed 58% column */
  .od-msg-featured .wp-block-column { flex-basis: 100% !important; }
  .od-msg-featured .wp-block-column:last-child {
    padding: var(--wp--preset--spacing--60) !important;
  }

  /* Reading copy */
  .od-msg-body { font-size: 1.0625rem; }
  .od-scripture {
    margin: 1.75rem 0;
    padding-left: 1rem;
    font-size: 1.125rem;
  }

  /* Prev/next and pagination wrap instead of squeezing onto one line */
  .od-msg-nav { gap: var(--wp--preset--spacing--40); }
  .wp-block-query-pagination { flex-wrap: wrap; gap: 12px; }

  /* Header: keep the Give button on the same row as the hamburger */
  .od-header .wp-block-button__link {
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
  }
}

@media (max-width: 480px) {
  :root {
    --wp--preset--font-size--h1: 2.5rem;
    --wp--preset--font-size--mega: 2.75rem;
  }
  /* The "Nineveh, Indiana" kicker crowds the Give button on small phones */
  .od-header .wp-block-site-title + p { display: none; }
}

/* -----------------------------------------------------------
   Block-theme header
   Sticky, transparent until scrolled. On pages that open with a
   dark cover, `.od-header--over-dark` inverts the link colors
   until `.is-scrolled` kicks in.
   ----------------------------------------------------------- */
.od-header{position:sticky;top:0;z-index:100;background:transparent;border-bottom:1px solid transparent}

/* Content pulled up under the transparent header.
   Was a hardcoded margin-top of calc(-1 * spacing-90) = -80px baked into six
   templates, which is a guess at the header height rather than the header
   height. It over-pulled by ~10px on desktop and had nothing to say about a
   header that grows on a narrow screen or when a logo is added.
   --od-header-h is measured in JS (functions.php) and re-measured on resize;
   the value here is only the pre-JS fallback. */
:root{--od-header-h:72px}
.od-flush-top{margin-top:calc(-1 * var(--od-header-h))}

/* ...and the first section must still clear the header it now sits under.
   max() only ever raises the padding, so the designed desktop value wins
   whenever it is already large enough. */
.od-flush-top > .wp-block-cover:first-child,
.od-flush-top > .wp-block-group:first-child,
.od-flush-top > .wp-block-post-content > .wp-block-cover:first-child,
.od-flush-top > .wp-block-post-content > .wp-block-group:first-child{
  padding-top:max(var(--wp--preset--spacing--110),calc(var(--od-header-h) + var(--wp--preset--spacing--40))) !important;
}
.od-header .wp-block-navigation{font-size:14px;font-weight:600;letter-spacing:.01em}
.od-header .wp-block-navigation a{text-decoration:none}
.od-header .wp-block-navigation a:hover{color:var(--od-brick)}
.od-header .wp-block-site-title a{text-decoration:none;font-weight:700;letter-spacing:-.02em}
/* Pages that open on a dark section get `od-opens-dark` on <body> from PHP
   (see tcn_first_block_is_dark in functions.php), so the header is already
   correct on first paint. The .od-header--over-dark selectors are kept so a
   hand-added class on the header part still works. */
.od-opens-dark .od-header:not(.is-scrolled),
.od-opens-dark .od-header:not(.is-scrolled) a,
.od-header--over-dark:not(.is-scrolled),
.od-header--over-dark:not(.is-scrolled) a{color:var(--od-cream)}
.od-opens-dark .od-header:not(.is-scrolled) .wp-block-navigation a:hover,
.od-header--over-dark:not(.is-scrolled) .wp-block-navigation a:hover{color:var(--od-gold)}

/* -----------------------------------------------------------
   Message (sermon) pages
   ----------------------------------------------------------- */
.od-msg-hero{background:var(--od-ink);color:var(--od-cream)}
.od-msg-hero .wp-block-post-title{color:var(--od-cream)}
.od-msg-meta{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--od-gold)}
.od-msg-body{font-size:1.125rem;line-height:1.7;max-width:68ch}
.od-msg-body p{margin-bottom:1.5rem}
.od-scripture{border-left:2px solid var(--od-brick);padding:.25rem 0 .25rem 1.5rem;margin:2.5rem 0;font-size:1.25rem;line-height:1.5;color:var(--od-ink-sub)}
.od-msg-nav a{text-decoration:none}
.od-msg-nav a:hover{color:var(--od-brick)}

/* Message cards in archives + related lists */
.od-msg-card{border-top:1px solid var(--od-rule);padding-top:1.25rem}
.od-msg-card .wp-block-post-title{font-size:1.375rem;line-height:1.15;letter-spacing:-.01em;margin:.5rem 0}
.od-msg-card .wp-block-post-title a{text-decoration:none}
.od-msg-card .wp-block-post-title a:hover{color:var(--od-brick)}
.od-msg-card .wp-block-post-featured-image img{border-radius:4px;aspect-ratio:16/9;object-fit:cover;width:100%}
.od-msg-card .wp-block-post-date,.od-msg-card .wp-block-post-terms{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--od-brick)}

/* Featured (latest) message on the archive */
.od-msg-featured{background:var(--od-bg-2);border-radius:6px;overflow:hidden}
.od-msg-featured .wp-block-post-featured-image img{border-radius:0;aspect-ratio:16/10;object-fit:cover;width:100%}

/* Pagination */
.wp-block-query-pagination{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-top:var(--wp--preset--spacing--80)}
.wp-block-query-pagination a{text-decoration:none}
.wp-block-query-pagination a:hover{color:var(--od-brick)}

/* Footer */
.od-footer{background:var(--od-ink);color:var(--od-cream)}
.od-footer a{color:var(--od-cream-2);text-decoration:none}
.od-footer a:hover{color:var(--od-gold)}
.od-footer h2,.od-footer h3{color:var(--od-cream)}
.od-footer .od-footer__label{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--od-gold);margin:0 0 12px}

/* Generic single/page fallbacks */
.od-page-header{border-bottom:1px solid var(--od-rule)}
.od-prose{max-width:68ch;font-size:1.0625rem;line-height:1.7}
.od-prose > *+*{margin-top:1.35rem}