/* Public enhancements — Owner Review Round 1.
 * Loaded on every public page: on PHP pages via partials/site-head.php (after pages.css so it can
 * override), and on captured Elementor pages via App\Web\PublicShell::injectHead(). Additive only —
 * it does not restyle the approved design beyond the owner-requested corrections.
 */

/* ---- 1. Sticky navigation --------------------------------------------------------------------- */

/* Shared PHP header (about, projects, blog, donate, newsletter, monthly-giving, previews). */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;                 /* above page content and Elementor stacking contexts */
}

/* Jesuser storefront header. */
.ju-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Captured Elementor global header — the header container is tagged at runtime by
 * public-enhancements.js (its element id differs per page, so we key off a class instead). */
.ichurch-sticky-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: #ffffff;           /* keeps the header readable over any section it overlaps */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Anchor targets clear the sticky header instead of hiding beneath it. */
:target { scroll-margin-top: 100px; }

/* Keyboard focus stays visible on nav links even when sticky. */
.site-header a:focus-visible,
.ju-header a:focus-visible,
.ichurch-sticky-header a:focus-visible {
  outline: 3px solid #ccff00;
  outline-offset: 2px;
}

/* ---- 1b. Header navigation wordmark (owner review) --------------------------------------------
 * The owner-supplied rectangular logo (220x70, already contains the "iChurch Initiative" wording) is the
 * visible nav logo. Narrow selectors + !important on the captured Elementor header defeat inherited
 * width/height attributes. object-fit:contain keeps the aspect ratio (never stretched/distorted). */
.site-header .brand { display: inline-flex; align-items: center; gap: 10px; }
.site-header .brand--wordmark { gap: 0; }               /* wordmark contains the text; no separate label */
.site-header .brand b { line-height: 1.05; }
.site-header__in { padding: 10px 0; }                   /* keep the nav balanced with the taller wordmark */
.site-header .brand__logo {
  width: 220px; height: 70px; max-width: 220px; object-fit: contain; object-position: left center; flex-shrink: 0; display: block;
}
.mnav .brand__logo { width: 180px; height: 56px; max-width: 60vw; object-fit: contain; object-position: left center; }
/* Captured Elementor global header logo (desktop bar + mobile offcanvas panel). */
.ichurch-sticky-header .elementor-widget-image img,
.elementskit-nav-logo img {
  width: 220px !important; height: 70px !important; max-width: 220px !important;
  object-fit: contain !important; object-position: left center !important; min-height: 0 !important;
}
@media (max-width: 767px) {
  .site-header .brand__logo,
  .ichurch-sticky-header .elementor-widget-image img,
  .elementskit-nav-logo img {
    width: 165px !important; height: auto !important; max-width: 165px !important;
  }
}
@media (max-width: 380px) {
  .site-header .brand__logo,
  .ichurch-sticky-header .elementor-widget-image img { width: 150px !important; max-width: 150px !important; }
}

/* ---- 1c. Homepage newsletter (owner review) --------------------------------------------------
 * The obsolete MetForm widget (CSP unsafe-eval) was removed from home.html; this styles the static
 * replacement form on the existing /newsletter/ flow. */
.ich-newsletter { max-width: 560px; margin: 8px auto 0; }
.ich-nl-label { display: block; font-weight: 600; margin: 0 0 8px; }
.ich-nl-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ich-nl-input {
  flex: 1 1 240px; min-width: 0; padding: 14px 16px; font-size: 16px; border: 1px solid #d5d5db;
  border-radius: 8px; background: #fff; color: #111;
}
.ich-nl-btn {
  flex: 0 0 auto; padding: 14px 26px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  border: 0; border-radius: 8px; background: #ccff00; color: #0a0a0a; cursor: pointer;
}
.ich-nl-btn:hover { filter: brightness(0.95); }
.ich-nl-msg { margin: 12px 0 0; font-weight: 600; min-height: 1.2em; }
.ich-nl-banner { margin: 0 auto 14px; max-width: 560px; padding: 12px 16px; border-radius: 8px; font-weight: 600; }
.ich-nl-banner--ok { background: #ccff00; color: #0a0a0a; }
.ich-nl-banner--err { background: #ffd9d9; color: #7a1020; border-left: 4px solid #e05a5a; }
@media (max-width: 480px) { .ich-nl-btn { flex: 1 1 100%; } }

/* ---- 2. Form required marker + accessible groups (Join / Contact / Donate) -------------------- */
.ich-required-marker { color: #e05a5a; font-weight: 700; margin-left: 2px; }
.ich-group-error {
  display: block;
  color: #c0392b;
  font-weight: 600;
  font-size: 14px;
  margin: 8px 0 0;
}
fieldset.ich-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.ich-fieldset > legend { padding: 0; }
