/* ================================================================
   Trinity Episcopal Church — site search (styles)
   Pairs with site-search.js. To remove the feature, delete both
   files and the two tags marked "SITE SEARCH" in each page.
   Uses the site's own colour variables, with fallbacks.
   ================================================================ */

/* ----- Header button (magnifier) ----- */
.site-header .site-search-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 0.35rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 2px;
  color: rgba(255,255,255,0.84);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.site-header .site-search-toggle:hover,
.site-header.search-open .site-search-toggle {
  color: #fff;
  background: rgba(255,255,255,0.12);
}
.site-header .site-search-toggle:focus-visible,
.site-search-close:focus-visible,
.site-search-chip:focus-visible,
.site-search-item:focus-visible {
  outline: 2px solid var(--gold-light, #E8B84B);
  outline-offset: 2px;
}

/* Keep the menu pushed to the right of the logo now that a third item is in the row */
.site-header .main-nav { margin-left: auto; }

/* The "Search" entry inside the phone menu is only shown on phones (see below) */
.site-header .site-search-menu-item { display: none; }

/* Small laptops: tighten the menu spacing a little so the new button fits
   without pushing the header past the edge of the screen. */
@media (min-width: 1151px) and (max-width: 1250px) {
  .site-header .nav-link { padding-left: 0.55rem; padding-right: 0.55rem; }
}

/* Tablets and narrow windows (721px - 1150px): the full menu is wider than the
   screen here, so use the same collapsed hamburger menu the site already uses
   on phones. These rules mirror the phone menu rules in each page's own
   stylesheet; the search button stays in the header beside the hamburger. */
@media (min-width: 721px) and (max-width: 1150px) {
  .site-header .main-nav { display: none; }
  .site-header .site-search-toggle { margin-left: auto; margin-right: 0.5rem; }
  .site-header .nav-toggle {
    display: block;
    background: none;
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    padding: 0.35rem 0.65rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 2px;
  }
  .site-header.nav-open { position: relative; }
  .site-header.nav-open .main-nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--nav-height, 70px);
    left: 0;
    right: 0;
    margin-left: 0;
    background: var(--green-dark, #1E4A12);
    z-index: 199;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    padding-bottom: 0.5rem;
  }
  .site-header.nav-open .nav-item { width: 100%; }
  .site-header.nav-open .nav-link {
    height: auto;
    line-height: 1.4;
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .site-header.nav-open .nav-dropdown {
    display: block;
    position: static;
    box-shadow: none;
    border-top: none;
    background: rgba(0,0,0,0.2);
  }
  .site-header.nav-open .nav-dropdown a { padding: 0.6rem 2rem; }
}

/* ----- The drop-down panel under the header ----- */
.site-search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 250;
  background: var(--green-dark, #1E4A12);
  border-top: 2px solid var(--gold, #C8901F);
  box-shadow: 0 12px 28px rgba(0,0,0,0.3);
  padding: 1.1rem 0 1.3rem;
}
.site-search-panel[hidden] { display: none; }

.site-search-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.site-search-field { position: relative; }
.site-search-input {
  display: block;
  width: 100%;
  padding: 0.8rem 3rem 0.8rem 1rem;
  font-family: var(--font-sans, 'Source Sans 3', Arial, sans-serif);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--text-dark, #1A1A18);
  background: var(--cream, #FAF7F2);
  border: 2px solid transparent;
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.site-search-input:focus { border-color: var(--gold-light, #E8B84B); }
.site-search-input::placeholder { color: var(--text-light, #7A7A72); }
.site-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.site-search-close {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-medium, #4A4A46);
  background: transparent;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.site-search-close:hover { color: var(--text-dark, #1A1A18); background: rgba(0,0,0,0.06); }

.site-search-status {
  min-height: 1.2em;
  margin: 0.4rem 0 0.3rem;
  font-family: var(--font-sans, 'Source Sans 3', Arial, sans-serif);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
}

/* ----- Results ----- */
.site-search-results {
  max-height: calc(100vh - var(--nav-height, 70px) - 9.5rem);
  max-height: calc(100dvh - var(--nav-height, 70px) - 9.5rem);
  overflow-y: auto;
  background: var(--cream, #FAF7F2);
  border-radius: 2px;
}
.site-search-results:empty { display: none; }

.site-search-list { list-style: none; margin: 0; padding: 0; }
.site-search-list li { border-bottom: 1px solid var(--stone, #E2D9CC); }
.site-search-list li:last-child { border-bottom: 0; }

.site-search-item {
  display: block;
  padding: 0.75rem 1.1rem;
  text-decoration: none;
  color: inherit;
}
.site-search-item:hover,
.site-search-item:focus { background: var(--green-light, #EAF0E5); }

.site-search-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; }
.site-search-crumb {
  font-family: var(--font-sans, 'Source Sans 3', Arial, sans-serif);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold, #C8901F);
}
.site-search-item-title {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--green-primary, #2D5A1B);
}
.site-search-snippet {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-sans, 'Source Sans 3', Arial, sans-serif);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-medium, #4A4A46);
}
.site-search-snippet mark {
  background: rgba(232,184,75,0.45);
  color: var(--text-dark, #1A1A18);
  padding: 0 1px;
  border-radius: 1px;
}

.site-search-msg,
.site-search-more {
  margin: 0;
  padding: 0.9rem 1.1rem;
  font-family: var(--font-sans, 'Source Sans 3', Arial, sans-serif);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-medium, #4A4A46);
}
.site-search-more {
  font-size: 0.82rem;
  color: var(--text-light, #7A7A72);
  border-top: 1px solid var(--stone, #E2D9CC);
}

/* ----- Suggestions shown before typing ----- */
.site-search-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.1rem;
}
.site-search-suggest-label {
  width: 100%;
  font-family: var(--font-sans, 'Source Sans 3', Arial, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light, #7A7A72);
}
.site-search-chip {
  padding: 0.35rem 0.85rem;
  font-family: var(--font-sans, 'Source Sans 3', Arial, sans-serif);
  font-size: 0.9rem;
  color: var(--green-primary, #2D5A1B);
  background: #fff;
  border: 1px solid var(--stone, #E2D9CC);
  border-radius: 999px;
  cursor: pointer;
}
.site-search-chip:hover { background: var(--green-light, #EAF0E5); border-color: var(--green-primary, #2D5A1B); }

/* ----- Phones ----- */
@media (max-width: 720px) {
  /* The header has no room for a second button, so search lives in the menu. */
  .site-header .site-search-toggle { display: none; }
  .site-header .site-search-menu-item { display: block; }
  .site-header .site-search-menu-link { display: flex; align-items: center; gap: 0.6rem; }
  .site-search-input { font-size: 1rem; }   /* 16px+ stops iOS from zooming in on focus */
  .site-search-panel { padding-top: 0.85rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .site-search-panel:not([hidden]) { animation: site-search-in 0.16s ease-out; }
  @keyframes site-search-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}