/* ==========================================================================
   churchit: page layout shared by every website theme
   Structure for the pages this app renders (home landing page, portal,
   sermon series, missions map) plus two fixes for frappe's web template.
   Colours come only from frappe's tokens (--primary-color, --heading-color,
   --text-muted, --border-color, ...), so a page follows whichever Website
   Theme is active. The Churchit theme's look lives in scss/website.scss.
   ========================================================================== */

/* ---- Breadcrumbs ------------------------------------------------------------
   Keep frappe's breadcrumbs (the portal's way back: form -> list -> My
   Account), but hide them on Web Page documents and the Contact Us page,
   where the lone "Home" crumb is clutter. */
.page-content-wrapper:has(.web-page-content) .page-breadcrumbs,
.page-content-wrapper:has(.contact-content) .page-breadcrumbs {
  display: none;
}

.web-page-content audio {
  width: 100%;
}

/* ---- Navbar menu button -----------------------------------------------------
   frappe's navbar strips the stroke from the toggler icon, a rule from its
   filled icon set; the lucide menu icon it ships now is stroke-only, so on a
   phone the button that holds the whole nav painted nothing. */
.navbar-light .navbar-toggler .icon {
  stroke: var(--icon-stroke);
}

/* ---- Space before the footer ------------------------------------------------
   frappe's <main> has no bottom spacing, so the gap above the footer was
   whatever margin the page's last element happened to have: none on the
   home page. Give every page the same one. */
.page-content-wrapper > main {
  padding-bottom: 3rem;
}

/* ---- Footer ---------------------------------------------------------------
   templates/includes/footer/footer.html: church name and founding year on
   the left, copyright in the middle, phone and address on the right, then
   the footer links centred underneath. Replaces frappe's stacked logo /
   link / info blocks, which sit in 3rem of padding and a 140px minimum
   height even when empty. That minimum was also what kept frappe's flex
   body from squashing the footer under a tall page. */
.web-footer {
  padding: 2rem 0 1.5rem;
  min-height: 0;
  flex-shrink: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-muted);
}
.web-footer .footer-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 1rem 2rem;
}
.web-footer .footer-identity {
  grid-column: 1;
}
.web-footer .footer-copyright {
  grid-column: 2;
  align-self: center;
  text-align: center;
}
.web-footer .footer-contact {
  grid-column: 3;
  text-align: right;
}
.web-footer .footer-church-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--heading-color);
}
.web-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  margin-top: 1.5rem;
}
.web-footer .footer-links:first-child {
  margin-top: 0;
}
.web-footer .footer-top a,
.web-footer .footer-link {
  color: var(--text-muted);
}
.web-footer .footer-link {
  font-weight: 500;
}
.web-footer .footer-top a:hover,
.web-footer .footer-link:hover {
  color: var(--primary-color);
  text-decoration: none;
}
@media (max-width: 575.98px) {
  .web-footer .footer-top {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .web-footer .footer-identity,
  .web-footer .footer-copyright,
  .web-footer .footer-contact {
    grid-column: 1;
    text-align: center;
  }
  .web-footer .footer-copyright {
    order: 1;
  }
}
/* ---- Light/dark switch and dark mode ----------------------------------------
   theme_mode.js sets data-theme on <html>. frappe's website bundle flips only
   its Espresso surface/ink tokens for that attribute and leaves bootstrap's
   compiled colours alone, so this maps the tokens the layouts and frappe's own
   pages read onto that dark palette and re-skins the bootstrap parts the site
   uses. Moon means "go dark", sun means "go light". */
.theme-switch {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
}
.theme-switch-sun,
[data-theme="dark"] .theme-switch-moon {
  display: none;
}
[data-theme="dark"] .theme-switch-sun {
  display: inline;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-color: var(--surface-white);
  --fg-color: var(--surface-cards);
  --card-bg: var(--surface-cards);
  --subtle-fg: var(--surface-gray-1);
  --subtle-accent: var(--surface-gray-2);
  --control-bg: var(--surface-gray-1);
  --heading-color: var(--ink-gray-9);
  --text-color: var(--ink-gray-8);
  --text-muted: var(--ink-gray-7);
  --text-light: var(--ink-gray-6);
  --border-color: var(--outline-gray-2);
  --dark-border-color: var(--outline-gray-3);
  --bg-light-gray: var(--subtle-fg);
  --primary-color: var(--ink-gray-9);
  /* the menu button and theme switch icons are stroked; frappe leaves this at
     its light-mode gray, invisible on the dark navbar */
  --icon-stroke: var(--ink-gray-8);
}
[data-theme="dark"] body {
  color: var(--text-color);
  background-color: var(--bg-color);
}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] a,
[data-theme="dark"] a:hover {
  color: var(--heading-color);
}
[data-theme="dark"] .text-muted {
  color: var(--text-muted) !important;
}
[data-theme="dark"] hr {
  border-top-color: var(--border-color);
}

/* navbar and footer */
[data-theme="dark"] .navbar-light {
  background: var(--bg-color);
  border-bottom-color: var(--border-color);
}
[data-theme="dark"] .navbar-light .navbar-brand,
[data-theme="dark"] .navbar-light .navbar-brand:hover,
[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
[data-theme="dark"] .navbar-light .navbar-nav .nav-link:focus,
[data-theme="dark"] .navbar-light .navbar-nav .active > .nav-link {
  color: var(--heading-color);
}
[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
[data-theme="dark"] .navbar-light .navbar-toggler,
[data-theme="dark"] .web-footer,
[data-theme="dark"] .web-footer a {
  color: var(--text-muted);
}
[data-theme="dark"] .web-footer {
  border-top-color: var(--border-color);
}

/* surfaces, menus, controls */
[data-theme="dark"] .card,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu {
  color: var(--text-color);
  background-color: var(--card-bg);
  border-color: var(--border-color);
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background-color: var(--subtle-fg);
  border-color: var(--border-color);
}
[data-theme="dark"] .dropdown-item {
  color: var(--text-color);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  color: var(--heading-color);
  background-color: var(--subtle-fg);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] .input-group-text {
  color: var(--text-color);
  background-color: var(--control-bg);
  border-color: var(--border-color);
}
[data-theme="dark"] .form-control:focus {
  color: var(--heading-color);
  background-color: var(--subtle-accent);
  border-color: var(--border-color);
}
[data-theme="dark"] .btn-primary {
  color: var(--surface-white);
  background-color: var(--ink-gray-9);
  border-color: var(--ink-gray-9);
}
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-default {
  color: var(--text-color);
  background-color: var(--surface-gray-3);
  border-color: var(--surface-gray-3);
}
[data-theme="dark"] .table {
  color: var(--text-color);
}
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
  border-color: var(--border-color);
}
[data-theme="dark"] .portal-row a {
  color: var(--text-color);
}

/* ---- Account menu ---------------------------------------------------------
   v16 renders the navbar avatar dropdown (My Account / Log out) with an inline
   display:none and reveals it via client JS after load. Key it off the
   server-rendered session attribute instead so it can never fail to appear. */
body[frappe-session-status="logged-in"] #website-post-login {
  /* flex, not list-item: frappe centers the avatar via .logged-in's flex */
  display: flex !important;
}
body[frappe-session-status="logged-in"] .btn-login-area {
  display: none !important;
}
/* the avatar inside the dropdown is also JS-injected; show a placeholder
   until (or in case) the script doesn't fill it */
#website-post-login .user-image-wrapper:empty::before {
  content: "👤";
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-color);
  font-size: 0.95rem;
}

/* ---- Home landing page ------------------------------------------------------
   The home Web Page is a landing page rather than a card grid: a two-column
   hero, a stats strip, and panels for the latest sermon and what is coming
   up. The panels reuse .card, so the active theme's card look applies. The
   Web Page record sets text-align: Center on the article, so blocks that read
   left declare it. */
#home .home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
  padding: 0.4em 0.9em;
  border-radius: 999px;
}

#home .home-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 5vw, 3.5rem) 0 clamp(2rem, 5vw, 3.5rem);
}
/* the second column only exists when there is a gathering to put in it */
#home .home-hero:has(.home-aside) {
  grid-template-columns: 1.05fr 0.95fr;
}
#home .home-hero-copy {
  text-align: left;
}
#home .home-title {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.12;
  margin: 0.7rem 0 0.6rem;
}
#home .home-lead {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--text-muted);
  max-width: 46ch;
  margin-bottom: 0;
}
#home .home-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}
#home .home-btn-ghost {
  color: var(--heading-color);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  font-weight: 600;
}

/* hero side panel: the next gathering, or a welcome note when nothing is scheduled */
#home .home-aside {
  text-align: left;
}
#home .home-aside-label,
#home .home-schedule-date {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-color);
}
#home .home-aside-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--heading-color);
  letter-spacing: -0.02em;
  margin: 0.35rem 0 0.2rem;
}
#home .home-aside-when {
  font-weight: 600;
  color: var(--text-color);
}
#home .home-aside-text {
  color: var(--text-muted);
  margin: 0.7rem 0 0;
}
#home .home-aside-where {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-top: 0.7rem;
}
#home .home-aside-link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 700;
  color: var(--primary-color);
  text-decoration: none;
}
#home .home-aside-link:hover {
  text-decoration: underline;
}

/* stats strip, flex not grid: a theme's card ::before accent bar would
   occupy every auto-fit track and stop the empty ones collapsing */
#home .home-stats {
  display: flex;
  /* .card is itself a column flexbox, so the direction has to be reset */
  flex-direction: row;
  flex-wrap: wrap;
}
#home .home-stats::before {
  flex: 0 0 100%;
}
#home .home-stat {
  flex: 1 1 140px;
  padding: 1.4rem 1rem;
}
#home .home-stat + .home-stat {
  border-left: 1px solid var(--border-color);
}
#home .home-stat-number {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700;
  color: var(--heading-color);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
#home .home-stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#home .home-section {
  padding: clamp(2.2rem, 6vw, 4rem) 0 0;
}
#home .home-about-text {
  max-width: 68ch;
  margin: 1rem auto 0;
  text-align: left;
  font-size: 1.05rem;
}
#home .home-split {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
#home .home-panel {
  text-align: left;
}
#home .home-panel-title {
  font-size: 1.25rem;
  margin: 0.7rem 0 0.2rem;
}
#home .home-panel-meta {
  color: var(--text-muted);
  font-size: 0.92rem;
}
#home .home-panel-text {
  color: var(--text-muted);
  margin: 0.7rem 0 0;
}

#home .home-schedule {
  list-style: none;
  padding: 0;
  margin: 0.9rem 0 0;
}
#home .home-schedule li {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-top: 1px solid var(--border-color);
}
#home .home-schedule li:first-child {
  border-top: none;
}
#home .home-schedule-name {
  font-weight: 600;
  color: var(--heading-color);
}
#home .home-schedule-time {
  color: var(--text-muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

@media (max-width: 900px) {
  #home .home-hero:has(.home-aside) {
    grid-template-columns: 1fr;
  }
  #home .home-schedule li {
    grid-template-columns: 6.5rem 1fr;
  }
  #home .home-schedule-time {
    grid-column: 2;
  }
}

/* ---- Portal landing (/portal) --------------------------------------------- */
.portal-home {
  padding: 1rem 0 2rem;
}
.portal-home .lead {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 52ch;
}
.portal-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.portal-home-grid .card {
  color: var(--heading-color);
  text-decoration: none;
}
.portal-home-grid .card:hover {
  text-decoration: none;
}
.portal-home-grid .card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 600;
}
.portal-card-arrow {
  color: var(--primary-color);
  transition: transform 0.15s ease;
}
.portal-home-grid .card:hover .portal-card-arrow {
  transform: translateX(3px);
}

/* ---- Recipient search (prayer-request web form) -----------------------------
   The form's client script builds this list itself; colours come from the
   same tokens as frappe's Link-field dropdown so it follows the theme. */
.recipient-search-results {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  margin: 0;
  padding: var(--padding-xs);
  list-style: none;
  max-height: 180px;
  overflow-y: auto;
  color: var(--text-color);
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
}
.recipient-search-results li {
  padding: var(--padding-sm);
  border-radius: var(--border-radius);
  cursor: pointer;
}
.recipient-search-results li:hover {
  background-color: var(--awesomplete-hover-bg);
}

/* ---- Sermon series cards (sermons template) ------------------------------- */
.series-tag {
  font-size: 0.7em;
  font-weight: 700;
  color: var(--bg-color);
  background: var(--primary-color);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.series-sermon-list li { border-bottom: 1px solid var(--border-color); }
.series-sermon-list li:last-child { border-bottom: none; }
.series-sermon-link {
  display: block;
  padding: 8px 6px;
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.series-sermon-link:hover {
  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
  color: var(--primary-color);
  text-decoration: none;
}
.series-back {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--primary-color);
  text-decoration: none;
}

/* ---- Missions map (missions.html) ----------------------------------------- */
.missions-map-card {
  margin-bottom: 2rem;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.missions-map {
  height: 420px;
  width: 100%;
  z-index: 1;
}
.missions-map-pin {
  display: flex;
  align-items: center;
  justify-content: center;
}
.missions-map-pin img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  background: #fff;
}
.missions-map-popup {
  min-width: 140px;
}
.missions-map-popup-title {
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 2px;
}
.missions-map-popup-country {
  color: var(--text-muted);
  font-size: 0.85em;
}
.missions-map-notice {
  text-align: center;
  margin-top: 10px;
}
.missions-map-pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--subtle-fg);
  color: var(--text-muted);
  font-size: 0.8em;
  font-weight: 600;
}