/* =====================================================================
   Ward Newsletter – web viewer styles
   CSS custom properties are overwritten at runtime by newsletter.js
   from the active NewsletterTheme database row. Values here are the
   fallback defaults, matching sacrament.css's own fallback (both mirror
   the live theme row's churchofjesuschrist.org-inspired palette - see
   database/05_update_theme_palette.sql).
   ===================================================================== */

:root {
  --nl-primary:     #007da5;
  --nl-secondary:   #005a78;
  --nl-accent:      #00a3cc;
  --nl-accent-alt:  #00a3cc;
  --nl-text:        #212225;
  --nl-muted:       #5f6368;
  --nl-bg:          #f7f8f9;
  --nl-card-bg:     #ffffff;
  --nl-header-bg:   #007da5;
  --nl-header-text: #ffffff;
  --nl-tab-active-bg: #00a3cc;
  --nl-tab-active-text: #ffffff;

  --nl-font-heading: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  --nl-font-body:    'Roboto', 'Segoe UI', system-ui, sans-serif;

  --nl-radius:    10px;
  --nl-radius-sm: 6px;
  --nl-shadow:    0 2px 10px rgba(0,0,0,0.09);
  --nl-shadow-lg: 0 4px 20px rgba(0,0,0,0.13);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* The [hidden] attribute must always win over any class also setting
   display (e.g. .nl-header-action-link's display:inline-flex on
   #nl-login-btn) - otherwise an element hidden via JS/markup can still
   be forced visible by an unrelated component class. */
[hidden] { display: none !important; }

body {
  font-family: var(--nl-font-body);
  color: var(--nl-text);
  background: var(--nl-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* =====================================================================
   Header
   ===================================================================== */
.nl-header {
  background: var(--nl-header-bg);
  color: var(--nl-header-text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nl-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  /* Extra right-hand room so brand/actions never run under the
     absolutely-positioned .nl-header-corner (Login/Print). Extra bottom
     room so the header bar is always tall enough to contain the corner's
     two stacked buttons, since an absolutely-positioned child doesn't
     contribute to its parent's auto height. */
  padding-right: 8rem;
  padding-bottom: 1.9rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.nl-brand { display: flex; flex-direction: column; gap: 0; }

.nl-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.75;
  font-weight: 600;
}

.nl-site-title {
  margin: 0;
  font-family: var(--nl-font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Login/Print - pinned to the header's top-right corner at every viewport
   size (see .nl-header-inner's position:relative + padding-right above),
   Print stacked directly underneath Login rather than folding into the
   wrapping .nl-header-actions row. */
.nl-header-corner {
  position: absolute;
  top: 0.85rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  z-index: 2;
}

/* ---- Header actions: Book the Chapel / Post Article ------------------ */
.nl-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.nl-header-action-link {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.8rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  color: rgba(255,255,255,0.92);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.nl-header-action-link:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.5);
}
.nl-header-action-btn { font-family: inherit; }

/* ---- Print button -------------------------------------------------- */
.nl-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.8rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  color: rgba(255,255,255,0.92);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.nl-print-btn:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.5);
}
.nl-print-btn svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}
@media print {
  .nl-print-btn { display: none !important; }
}

/* =====================================================================
   Tab navigation
   ===================================================================== */
.nl-tabnav {
  background: var(--nl-card-bg);
  border-bottom: 2px solid color-mix(in srgb, var(--nl-primary) 12%, transparent);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  position: sticky;
  top: var(--nl-header-h, 64px);
  z-index: 90;
  overflow-x: auto;
  scrollbar-width: none;
}
.nl-tabnav::-webkit-scrollbar { display: none; }

.nl-tabnav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: stretch;
  gap: 0;
}

.nl-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.15rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--nl-muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  position: relative;
  bottom: -2px;
}

.nl-tab:hover {
  color: var(--nl-primary);
  border-bottom-color: color-mix(in srgb, var(--nl-accent) 50%, transparent);
}

.nl-tab.active {
  color: var(--nl-accent);
  border-bottom-color: var(--nl-accent);
}

.nl-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.3rem;
  background: var(--nl-accent);
  color: #fff;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}
.nl-tab:not(.active) .nl-tab-badge {
  background: color-mix(in srgb, var(--nl-muted) 35%, transparent);
  color: var(--nl-text);
}

/* Secondary tab strip - the Events tab's per-auxiliary filter, nested
   inside the page content rather than pinned under the header, so it
   overrides .nl-tabnav's sticky positioning and uses a lighter, rounded
   card-like treatment instead of the primary bar's full-bleed chrome. */
.nl-tabnav--sub {
  position: static;
  z-index: auto;
  background: var(--nl-card-bg);
  border: 1px solid color-mix(in srgb, var(--nl-primary) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--nl-primary) 12%, transparent);
  border-radius: var(--nl-radius);
  box-shadow: none;
  margin-bottom: 1.25rem;
  /* .nl-tabnav's overflow-x: auto makes sense for the primary bar (fixed
     five tabs, scroll rather than reflow the sticky header), but this
     strip can have many more entries - wrap onto multiple lines instead
     of forcing a horizontal scroll, especially on narrow/mobile widths. */
  overflow-x: visible;
}
.nl-tabnav--sub .nl-tabnav-inner {
  max-width: none;
  padding: 0.25rem 0.5rem;
  flex-wrap: wrap;
}
.nl-tabnav--sub .nl-tab {
  padding: 0.6rem 0.65rem;
  font-size: 0.82rem;
  /* Unlike the primary bar, this strip isn't pinned under a sticky header
     with its own bottom border to blend into, so the -2px underline-overlap
     offset only pushed text past this box's edge - clipping descenders
     (e.g. "Young at Heart") once .nl-tabnav's overflow-x: auto forced
     overflow-y to auto too per spec. */
  bottom: 0;
  border-right: 1px solid color-mix(in srgb, var(--nl-primary) 10%, transparent);
}
.nl-tabnav--sub .nl-tab:last-child {
  border-right: none;
}

/* =====================================================================
   Body / content area
   ===================================================================== */
.nl-body {
  flex: 1;
  padding: 1.75rem 1.5rem 3rem;
}

.nl-main {
  max-width: 1100px;
  margin: 0 auto;
}

.nl-pane { display: none; }
.nl-pane.active { display: block; }

/* =====================================================================
   Section heading (shared across tabs)
   ===================================================================== */
.nl-section { margin-bottom: 1.5rem; }

.nl-section-title {
  font-family: var(--nl-font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--nl-primary);
  margin: 0 0 0.85rem;
  padding: 0.35rem 0.85rem 0.35rem 0.7rem;
  background: color-mix(in srgb, var(--nl-primary) 8%, transparent);
  border-left: 4px solid var(--nl-accent);
  border-radius: 0 var(--nl-radius-sm) var(--nl-radius-sm) 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---- Meeting date/time (top of Sacrament tab) ------------------------ */
.nl-meeting-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--nl-primary);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.nl-meeting-info .nl-meta-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}
.nl-meeting-info .nl-dot-sep { opacity: 0.5; }

/* ---- Theme banner -------------------------------------------------- */
.nl-theme-banner {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--nl-primary) 90%, transparent),
    color-mix(in srgb, var(--nl-secondary) 85%, transparent));
  color: #fff;
  border-radius: var(--nl-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  font-style: italic;
  font-size: 1.05rem;
  font-family: var(--nl-font-heading);
  text-align: center;
  display: none;
}

/* ---- Home tab landing page ------------------------------------------ */
.nl-welcome-title {
  font-family: var(--nl-font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--nl-primary);
  margin: 0 0 1.25rem;
}

.nl-prose-card {
  padding: 1rem 1.25rem;
}

.nl-prose-text {
  margin: 0;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Reuses .nl-theme-banner's quote treatment for the Scripture of the Day. */
.nl-scripture-card {
  display: block;
}

/* Optional per-entry image (dbo.MOTD.Image, "images/MOTD/" prepended by
   ApiNewsletter.ashx.vb) - same cap-on-display
   treatment as the Come Follow Me image (.nl-cfm-img), just centered
   above the quote instead of atop an event-card layout. */
.nl-scripture-img {
  display: block;
  width: auto;
  max-width: min(512px, 100%);
  max-height: 512px;
  margin: 0 auto 0.85rem;
  border-radius: var(--nl-radius-sm);
}

.nl-scripture-reference {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 600;
  opacity: 0.85;
}

.nl-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.nl-quick-link {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

/* ---- Leadership cards --------------------------------------------- */
.nl-leadership {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

.nl-lead-card {
  background: var(--nl-card-bg);
  border-radius: var(--nl-radius-sm);
  padding: 0.6rem 0.8rem;
  box-shadow: var(--nl-shadow);
  border-top: 3px solid var(--nl-accent);
}

.nl-lead-role {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nl-accent);
  font-weight: 700;
  margin: 0 0 2px;
}

.nl-lead-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--nl-text);
  margin: 0;
}

/* ---- Order of meeting --------------------------------------------- */
.nl-order-card {
  background: var(--nl-card-bg);
  border-radius: var(--nl-radius);
  box-shadow: var(--nl-shadow);
  overflow: hidden;
}

.nl-order {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nl-order-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  font-size: 0.92rem;
  border-bottom: 1px solid color-mix(in srgb, var(--nl-primary) 6%, transparent);
}
.nl-order-item:last-child { border-bottom: none; }
.nl-order-item:nth-child(even) {
  background: color-mix(in srgb, var(--nl-primary) 3%, transparent);
}

.nl-order-label { font-weight: 600; color: var(--nl-text); white-space: nowrap; }

.nl-order-leader {
  flex: 1;
  border-bottom: 1px dotted color-mix(in srgb, var(--nl-muted) 50%, transparent);
  align-self: flex-end;
  transform: translateY(-0.25em);
  min-width: 0.5rem;
}

.nl-order-value { color: var(--nl-secondary); text-align: right; white-space: nowrap; }
.nl-order-value--wrap { white-space: normal; }

/* Ward Missionaries - a name-per-cell grid, 3 columns on wide screens,
   2 once the card gets too narrow for 3 to stay readable (see the 900px
   tablet breakpoint below). */
.nl-order-value--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.2rem 0.75rem;
}

.nl-order-topic {
  list-style: none;
  padding: 0.1rem 1rem 0.45rem 1.6rem;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--nl-muted);
  border-bottom: 1px solid color-mix(in srgb, var(--nl-primary) 6%, transparent);
}

.nl-order-item--span {
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--nl-primary);
  background: color-mix(in srgb, var(--nl-accent) 11%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--nl-accent) 25%, transparent) !important;
  letter-spacing: 0.02em;
}
.nl-order-item--span .nl-order-leader { display: none; }

.nl-hymn-badge {
  display: inline-block;
  color: var(--nl-accent);
  font-weight: 700;
  font-size: 0.85rem;
}

.nl-hymn-link {
  color: var(--nl-primary);
  text-decoration: none;
}
.nl-hymn-link:hover { text-decoration: underline; }

.nl-hymn-badge--link { text-decoration: none; }
.nl-hymn-badge--link:hover { text-decoration: underline; }

/* =====================================================================
   Events (shared – Home column and auxiliary tabs)
   ===================================================================== */
.nl-events {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.nl-events--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Kids tiles (activity sheets and word searches) size to their own content
   rather than stretching to match the tallest tile in their row - grid's
   default align-items: stretch is what left so much blank space under a
   short tile (e.g. Easy) sitting next to a taller one (e.g. Hard). */
.nl-kids-grid { align-items: start; }

/* Kids tab - each activity sheet is just a plain <button> wrapping an
   <img>, so it's keyboard/screen-reader reachable like any other
   control, styled to look like a plain thumbnail rather than a button. */
.nl-kids-item {
  display: block;
  padding: 0;
  border: none;
  background: var(--nl-card-bg);
  border-radius: var(--nl-radius);
  box-shadow: var(--nl-shadow);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.18s, transform 0.18s;
}
.nl-kids-item:hover,
.nl-kids-item:focus-visible {
  box-shadow: var(--nl-shadow-lg);
  transform: translateY(-2px);
}
.nl-kids-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* Word search tiles are no longer a single clickable button (their thumb
   opens a print view, but Generate new/Solve now below it are separate
   controls) - see buildKidsWordSearchItem in newsletter.js. */
.nl-kids-wordsearch-item {
  display: flex;
  flex-direction: column;
  cursor: default;
}
.nl-kids-wordsearch-thumb-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--nl-card-bg);
  border-radius: var(--nl-radius) var(--nl-radius) 0 0;
  overflow: hidden;
  cursor: pointer;
}
.nl-kids-wordsearch-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.65rem;
  background: var(--nl-card-bg);
  border-radius: 0 0 var(--nl-radius) var(--nl-radius);
}
.nl-kids-wordsearch-actions .nl-kids-generate-btn {
  flex: 1 1 0;
  justify-content: center;
}

/* An HTML activity sheet has no single image to show, so it gets a
   *live* thumbnail instead - the file loaded into a fixed-size iframe
   (see KIDS_HTML_THUMB_WIDTH/HEIGHT in newsletter.js), scaled down with a
   CSS transform (applied in JS, since it depends on this card's actual
   rendered width) to fill the same width an <img> would. aspect-ratio
   reserves the matching height without needing JS to set it too, so the
   card doesn't collapse before the iframe's transform is applied.
   pointer-events: none on the iframe lets clicks fall through to the
   wrapping <button> instead of being swallowed by the embedded document. */
.nl-kids-html-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 850 / 1100;
  overflow: hidden;
  background: #fff;
}
.nl-kids-html-thumb iframe {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  border: none;
  pointer-events: none;
}

/* Word searches generated live from this week's Come Follow Me lesson
   Keywords (see ApiKidsWordSearch.ashx.vb) - sits below the static
   activity-sheet grid in the same Kids tab. */
.nl-kids-wordsearch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 1rem;
}
.nl-kids-wordsearch-header h3 {
  font-family: var(--nl-font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  margin: 0;
  color: var(--nl-text);
}
.nl-kids-generate-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.1rem;
  background: var(--nl-primary);
  border: none;
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.nl-kids-generate-btn:hover:not(:disabled) { background: var(--nl-secondary); }
.nl-kids-generate-btn:disabled { opacity: 0.6; cursor: default; }

/* "Generate new", replicated onto each word search tile (see
   buildKidsWordSearchItem) - styled as the secondary action next to that
   tile's "Solve now" so the pair doesn't read as two equally-weighted
   buttons. */
.nl-kids-generate-btn--ghost {
  background: transparent;
  color: var(--nl-primary);
  box-shadow: inset 0 0 0 1px var(--nl-primary);
}
.nl-kids-generate-btn--ghost:hover:not(:disabled) {
  background: var(--nl-primary);
  color: #fff;
}

.nl-event-card {
  background: var(--nl-card-bg);
  border-radius: var(--nl-radius);
  box-shadow: var(--nl-shadow);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s, transform 0.18s;
}
.nl-event-card:hover {
  box-shadow: var(--nl-shadow-lg);
  transform: translateY(-2px);
}

.nl-event-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* Card itself no longer clips (so the address popover below isn't cropped),
     so the image rounds its own top corners to match the card shape. */
  border-radius: var(--nl-radius) var(--nl-radius) 0 0;
}
.nl-event-img--only { border-radius: var(--nl-radius); }

/* Come Follow Me lesson image - the Home tab's section column is much
   wider than an event grid card, so without a cap this (already ≤512px
   wide on disk - see manage.js's upload-time downscale) would stretch to
   fill the whole column via .nl-event-img's width:100%. */
.nl-cfm-img {
  width: auto;
  max-width: min(512px, 100%);
  max-height: 512px;
  margin: 0 auto;
}

.nl-event-body-wrap {
  padding: 0.85rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.nl-event-title {
  font-family: var(--nl-font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--nl-primary);
  margin: 0 0 0.3rem;
}

/* Leaves room for .nl-expand-btn in the corner so a long title never
   wraps under it. */
.nl-event-title--expandable { padding-right: 1.7rem; }

.nl-event-title-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.nl-event-title-btn:hover,
.nl-event-title-btn:focus-visible { text-decoration: underline; }

/* Small "maximise" affordance, right-aligned to the card, that opens the
   same item in the detail popup - see buildExpandableTitle/openDetailPopup
   in newsletter.js. The title itself is also clickable for the same
   action; this button just makes that discoverable at a glance. */
.nl-expand-btn {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nl-accent) 12%, transparent);
  color: var(--nl-accent);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nl-expand-btn:hover,
.nl-expand-btn:focus-visible { background: var(--nl-accent); color: #fff; }

.nl-expand-icon { width: 0.85em; height: 0.85em; }

.nl-event-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: stretch;
  color: var(--nl-accent);
  background: color-mix(in srgb, var(--nl-accent) 11%, transparent);
  padding: 0.3rem 0.6rem;
  border-radius: var(--nl-radius-sm);
  margin-bottom: 0.5rem;
}

.nl-event-date,
.nl-event-location-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
}

.nl-event-location-line { color: var(--nl-secondary); }

.nl-meta-icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
a.nl-meta-icon-link:hover { opacity: 0.9; }

.nl-pod-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  background: var(--nl-accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.nl-pod-btn:hover { opacity: 0.8; }

.nl-meta-icon {
  width: 0.9em;
  height: 0.9em;
  flex-shrink: 0;
}

.nl-event-content {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--nl-text);
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.nl-event-content :first-child { margin-top: 0; }
.nl-event-content :last-child  { margin-bottom: 0; }
.nl-event-content img { max-width: 100%; border-radius: var(--nl-radius-sm); }

/* Card view only (never applied inside .nl-popup--detail, which always
   shows the full item) - a long BodyHtml is capped to this height with a
   fade-out hint, and .nl-content-toggle (see wireClampableContent in
   newsletter.js) below it expands the card in place without needing the
   detail popup. */
.nl-event-content--clamped {
  max-height: 12.5rem;
  overflow: hidden;
  position: relative;
}
.nl-event-content--clamped::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.5rem;
  background: linear-gradient(to bottom, transparent, var(--nl-card-bg));
  pointer-events: none;
}

.nl-content-toggle {
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.2rem 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--nl-accent);
  cursor: pointer;
}
.nl-content-toggle:hover,
.nl-content-toggle:focus-visible { text-decoration: underline; }

/* ---- Announcements (Home tab, ahead of everything else) -------------- */
.nl-announcements {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.nl-announcement-card {
  border-left: 4px solid var(--nl-accent);
}

.nl-events-empty {
  font-size: 0.95rem;
  color: var(--nl-muted);
  font-style: italic;
  text-align: center;
  padding: 2.5rem 1rem;
}

/* ---- Load error (API/database unreachable) -------------------------- */
.nl-load-error {
  max-width: 30rem;
  margin: 3rem auto;
  padding: 2rem 1.75rem;
  background: var(--nl-card-bg);
  border-radius: var(--nl-radius);
  box-shadow: var(--nl-shadow);
  text-align: center;
}
.nl-load-error h2 {
  font-family: var(--nl-font-heading);
  color: var(--nl-primary);
  margin: 0 0 0.5rem;
}
.nl-load-error p {
  color: var(--nl-muted);
  margin: 0;
  line-height: 1.5;
}

/* ---- Event location + address popover ------------------------------ */
.nl-event-location {
  position: relative;
  font-weight: 600;
}
.nl-event-location.has-popover {
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
}

.nl-location-popover {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.4rem);
  transform: translateX(-50%);
  min-width: 10rem;
  max-width: 16rem;
  padding: 0.5rem 0.7rem;
  background: var(--nl-primary);
  color: #fff;
  border-radius: var(--nl-radius-sm);
  box-shadow: var(--nl-shadow-lg);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  text-align: left;
  z-index: 10;
}

.nl-event-location.has-popover:hover .nl-location-popover,
.nl-event-location.has-popover:focus .nl-location-popover {
  display: block;
}

.nl-location-popover-thumb {
  display: block;
  width: 100%;
  max-height: 8rem;
  object-fit: cover;
  border-radius: var(--nl-radius-sm);
  margin-bottom: 0.4rem;
}

/* ---- Missionaries tab / Contacts tab --------------------------------
   Both reuse .nl-order-item's label/leader/value row, which was built for
   short single-line pairs (dotted leader stretching to fill the gap, e.g.
   "Opening Hymn ......... 123"). Once a value can run to several lines or
   a whole block of rich text (a contact's Notes, a temple's closure-date
   list), the leader's flex-sizing math makes each row's value column
   start at a different x position depending on that row's own content
   width - rows visibly stop lining up with each other. Stacking label
   above value instead (and dropping the now-pointless leader) sidesteps
   that entirely: every row is self-contained top-to-bottom, so nothing
   to misalign regardless of how long or short its content is. */
.nl-mission-contact .nl-order-item {
  display: block;
}
.nl-mission-contact .nl-order-label {
  display: block;
  margin-bottom: 0.3rem;
}
.nl-mission-contact .nl-order-leader { display: none; }
.nl-mission-contact .nl-order-value {
  text-align: left;
  white-space: normal;
}

.nl-mission-phone {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--nl-muted);
  margin-top: 0.15rem;
}

.nl-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: inherit;
  text-decoration: none;
}
.nl-phone-link:hover { text-decoration: underline; }

.nl-missionary-location,
.nl-missionary-dates,
.nl-missionary-quote,
.nl-missionary-address,
.nl-missionary-email {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
}
.nl-missionary-location .nl-meta-icon,
.nl-missionary-dates .nl-meta-icon,
.nl-missionary-quote .nl-meta-icon,
.nl-missionary-address .nl-meta-icon,
.nl-missionary-email .nl-meta-icon {
  margin-top: 0.15em;
}

.nl-missionary-location {
  font-size: 0.82rem;
  color: var(--nl-secondary);
  font-weight: 600;
  margin: 0 0 0.2rem;
}

.nl-missionary-dates {
  font-size: 0.8rem;
  color: var(--nl-muted);
  margin: 0 0 0.4rem;
  overflow-wrap: anywhere;
}

.nl-missionary-quote {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--nl-text);
  margin: 0 0 0.4rem;
}

.nl-missionary-address {
  font-size: 0.78rem;
  color: var(--nl-muted);
  margin: 0 0 0.4rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.nl-missionary-email {
  font-size: 0.82rem;
  color: var(--nl-primary);
  text-decoration: none;
  font-weight: 600;
}
.nl-missionary-email:hover { text-decoration: underline; }

/* ---- Auxiliary tab header ----------------------------------------- */
.nl-aux-header {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--nl-primary) 88%, transparent),
    color-mix(in srgb, var(--nl-secondary) 80%, transparent));
  border-radius: var(--nl-radius);
  color: #fff;
}

.nl-aux-header h2 {
  font-family: var(--nl-font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  margin: 0 0 0.15rem;
}

.nl-aux-header p {
  margin: 0;
  font-size: 0.88rem;
  opacity: 0.82;
}

/* Family History tab - a short curated link list (see FAMILY_HISTORY_GROUPS
   in newsletter.js), grouped under headings rather than one flat list. */
.nl-familyhistory-group + .nl-familyhistory-group {
  margin-top: 2rem;
}
.nl-familyhistory-group h3 {
  font-family: var(--nl-font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  color: var(--nl-text);
}
.nl-familyhistory-intro {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  color: var(--nl-muted);
}
.nl-familyhistory-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.nl-familyhistory-link {
  display: block;
  padding: 0.9rem 1.1rem;
  background: var(--nl-card-bg);
  border-radius: var(--nl-radius);
  box-shadow: var(--nl-shadow);
  text-decoration: none;
  transition: box-shadow 0.18s, transform 0.18s;
}
.nl-familyhistory-link:hover,
.nl-familyhistory-link:focus-visible {
  box-shadow: var(--nl-shadow-lg);
  transform: translateY(-2px);
}
.nl-familyhistory-link-title {
  font-weight: 700;
  color: var(--nl-primary);
}
.nl-familyhistory-link-desc {
  margin-top: 0.25rem;
  font-size: 0.88rem;
  color: var(--nl-text);
}

/* =====================================================================
   Footer
   ===================================================================== */
.nl-footer {
  background: color-mix(in srgb, var(--nl-primary) 8%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--nl-primary) 12%, transparent);
  padding: 1rem 1.5rem;
  margin-top: auto;
}

.nl-contact {
  text-align: center;
  font-size: 0.84rem;
  color: var(--nl-muted);
  margin: 0;
}
.nl-contact a { color: var(--nl-primary); font-weight: 600; text-decoration: none; }
.nl-contact a:hover { text-decoration: underline; }

/* =====================================================================
   Popup (Post Article)
   ===================================================================== */
.nl-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 300;
}
.nl-popup-overlay[hidden] { display: none; }

.nl-popup {
  background: var(--nl-card-bg);
  border-radius: var(--nl-radius);
  box-shadow: var(--nl-shadow-lg);
  width: 100%;
  max-width: 26rem;
}

.nl-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--nl-primary) 12%, transparent);
}
.nl-popup-title {
  margin: 0;
  font-family: var(--nl-font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--nl-text);
}
.nl-popup-close {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  border: none;
  background: none;
  color: var(--nl-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.nl-popup-close:hover { background: var(--nl-bg); color: var(--nl-text); }

.nl-popup-body { padding: 1.1rem; }
.nl-popup-body .nl-contact { text-align: left; font-size: 0.9rem; }

/* Event/announcement detail popup (see openDetailPopup in newsletter.js) -
   wider than the default popup and scrollable, since a description with an
   inline image can run much longer than the contact popup ever does; the
   header stays put while only the body scrolls. */
.nl-popup--detail {
  /* Nearly the full display width on a laptop/desktop (minimal ~2vw margin
     each side), capped so text doesn't stretch into unreadably long lines
     on an ultra-wide monitor. On narrow/mobile viewports this is wider
     than the viewport and the overlay's own padding (see .nl-popup-overlay)
     takes over as the effective margin instead. */
  width: 96vw;
  max-width: 1600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.nl-popup--detail .nl-popup-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.nl-popup--detail .nl-event-img {
  border-radius: var(--nl-radius-sm);
}

/* =====================================================================
   Responsive
   ===================================================================== */

/* Tablet – 900px */
@media (max-width: 900px) {
  .nl-body      { padding: 1.25rem 1.1rem 2.5rem; }
  .nl-order-value--grid { grid-template-columns: repeat(2, 1fr); }
}

/* Small tablet / large phone – 650px */
@media (max-width: 650px) {
  /* Header: brand row full-width, then actions row full-width below -
     .nl-header-corner (Login/Print) stays pinned top-right throughout,
     see the padding-right reserved for it below. */
  .nl-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    padding-right: 7rem;
  }
  .nl-header-actions {
    width: 100%;
    order: 3;
  }
  .nl-header-corner {
    top: 0.7rem;
    right: 1rem;
  }

  .nl-body      { padding: 1rem 0.75rem 2.5rem; }
  .nl-leadership { grid-template-columns: repeat(2, 1fr); }
  .nl-events--grid { grid-template-columns: 1fr; }
  .nl-tab       { padding: 0.75rem 0.9rem; font-size: 0.85rem; }

  /* The primary bar's six tabs don't all fit on one line on a phone -
     rather than the horizontal-scroll .nl-tabnav otherwise relies on
     (easy to miss; a user who never scrolls it never finds Missionaries/
     Kids/Sacrament), wrap onto a second row instead, same trade-off
     already made for the Events sub-tab strip (see .nl-tabnav--sub). */
  .nl-tabnav {
    overflow-x: visible;
  }
  .nl-tabnav-inner {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Phone – 420px */
@media (max-width: 420px) {
  .nl-header-inner { padding: 0.6rem 0.85rem; padding-right: 5.5rem; }
  .nl-site-title   { font-size: 1.2rem; }
  .nl-eyebrow      { font-size: 0.65rem; }
  .nl-header-corner { top: 0.6rem; right: 0.85rem; }

  /* Hide print label text; show icon only */
  .nl-print-label  { display: none; }
  .nl-print-btn    { padding: 0.38rem 0.55rem; }

  .nl-body         { padding: 0.85rem 0.6rem 2rem; }
  .nl-section-title { font-size: 0.9rem; }
  .nl-tab          { padding: 0.65rem 0.75rem; font-size: 0.8rem; }

  .nl-order-item   { font-size: 0.85rem; padding: 0.45rem 0.75rem; }
  .nl-order-topic  { padding-left: 0.75rem; }

  .nl-leadership   { grid-template-columns: 1fr 1fr; gap: 0.45rem; }
  .nl-lead-role    { font-size: 0.6rem; }
  .nl-lead-name    { font-size: 0.88rem; }

  .nl-aux-header h2 { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}