/* ---------------------------------------------------------------------- *
 * The shared surface of Catholic Spot.
 *
 * Ministries, Groups and Events & Places all ask a person the same kind of
 * question in the same kind of card, and each page used to hold its own copy
 * of the rules for it. Three copies drift: four title sizes, three card
 * paddings, two shapes of search box, rows of examples that differed by two
 * pixels of padding. This file is the one copy. A page keeps only what is
 * genuinely its own.
 *
 * Loaded by /about, /ministries, /groups and /events.
 * ---------------------------------------------------------------------- */

:root {
  --h1: clamp(30px, 7.5vw, 52px);
  --gap-nav: 28px;
  --gap-title: 28px;   /* title  → band */
  --gap-band: 34px;    /* band   → the card you type into */
  --band-h: 132px;
  --band-gap: 44px;
  /* The question is reserved two lines and no more. Every wording on every
     page was measured at 320, 375 and 430: below ~508px the size has to track
     the width or the longest question takes a third line and pushes the box
     down. Above that it holds at 30. */
  --ask-title: clamp(18px, calc(6.2vw - 1.5px), 30px);
}
@media (max-width: 560px) {
  :root { --gap-nav: 18px; --gap-title: 20px; --gap-band: 26px; --band-h: 104px; --band-gap: 28px; }
}

/* --- the name, above everything ------------------------------------- */
.brand {
  display: block; text-align: center; padding: 16px 20px 0;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 600; letter-spacing: .01em; color: var(--ink); text-decoration: none;
}
.brand:hover { color: var(--navy); }
/* The account button is placed by account.js against the top of the page.
   With the name as the only thing on that row it belongs on the same line as
   the name. The extra element in the selector wins against the rule that
   script writes at runtime. */
body #acctCorner { top: 15px; }
@media (max-width: 560px) { body #acctCorner { top: 12px; } }
.topnav { padding-top: 10px; }
@media (max-width: 560px) { .brand { padding-top: 12px; } }
/* At the narrow end the name shares its line with About on one side and the
   account button on the other, so it gives way rather than crowding them. */
@media (max-width: 400px) { .brand { font-size: 21px; padding-left: 78px; padding-right: 56px; } }

/* About is a page about the site rather than a place to search, so it sits
   out of the row of three and holds the top-left corner, opposite the account
   button. Absolute, so it takes no height from the rhythm below it. */
.corner {
  position: absolute; top: 16px; left: 20px; z-index: 30;
  font-size: 14px; color: var(--soft); text-decoration: none;
  padding: 6px 14px; border-radius: 999px; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.corner:hover { color: var(--ink); background: rgba(31, 42, 68, .05); }
.corner[aria-current] {
  color: var(--ink); font-weight: 600;
  background: rgba(200, 155, 60, .16); border-color: rgba(200, 155, 60, .45);
}
@media (max-width: 560px) { .corner { top: 12px; left: 12px; padding: 5px 10px; } }
@media (max-width: 380px) { .corner { padding: 4px 8px; font-size: 13px; } }

/* --- header, title -------------------------------------------------- */
.topnav {
  padding: 20px 20px 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; font-size: 14px;
  margin-bottom: var(--gap-nav);
}
.topnav a {
  color: var(--soft); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.topnav a svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.topnav a[aria-current] svg { opacity: 1; color: var(--gold); }
.topnav a:hover { color: var(--ink); background: rgba(31, 42, 68, .05); }
/* The page you are on is a chip, not an underline: it reads as a place you
   are standing rather than a link you have already used. */
.topnav a[aria-current] {
  color: var(--ink); font-weight: 600;
  background: rgba(200, 155, 60, .16); border-color: rgba(200, 155, 60, .45);
}
/* A nav that wraps to two lines reads as two navs. At the narrow end the
   chips give up padding first, and the longest label drops its tail, so the
   three of them still hold one line on a 320px phone. */
@media (max-width: 430px) {
  .topnav { padding: 16px 10px 0; gap: 5px; font-size: 13px; }
  .topnav a { padding: 6px 9px; gap: 5px; }
  .topnav a svg { width: 15px; height: 15px; }
  .topnav .wide { display: none; }
}
@media (max-width: 340px) {
  .topnav { gap: 3px; }
  .topnav a { padding: 5px 7px; gap: 4px; font-size: 12.5px; }
}
h1 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--h1);
  font-weight: 600; letter-spacing: -1px; margin: 4px 0 0;
}
.cross { color: var(--gold); font-size: .62em; vertical-align: middle; margin-right: .12em; }

/* --- the line at the top of the card ----------------------------------------- */
.pagecap {
  /* Inside the card, above the question: the line that says what this page
     finds, quiet enough that the question below it is still the loudest
     thing in the card. Same 14px as a nav link, same colour. */
  text-align: center; margin: 0 0 10px;
  font-size: 14px; line-height: 1.4; color: var(--soft);
}
/* On a phone the longest of the three captions takes a second line. The space
   is reserved on all three so the box below sits at the same height whichever
   page you are on. */
@media (max-width: 430px) { .pagecap { min-height: 2.8em; } }

/* --- the band of drawings ------------------------------------------- */
.gband {
  overflow: hidden; margin: var(--gap-title) auto 0; max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* The band is the welcome. Once a person has asked something, the room
   belongs to the answer, so it steps aside on every page that has one. The
   name and the three tabs stay. */
body.searched .gband { display: none; }
.gtrk { display: flex; width: max-content; animation: gmarch 90s linear infinite; }
.grun { display: flex; align-items: flex-end; gap: var(--band-gap); padding-right: var(--band-gap); }
.grun img { height: var(--band-h); width: auto; display: block; }
@keyframes gmarch { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .gtrk { animation: none; } }

/* --- the card a person types into ----------------------------------- */
.askcard {
  background: #fff; border-radius: 20px; padding: 20px 22px 22px;
  margin-top: var(--gap-band); box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  border: 1px solid rgba(31, 42, 68, .08); text-align: left; min-width: 0;
}
.ask-title { transition: opacity .42s ease;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--ask-title);
  font-weight: 700; line-height: 1.2; margin: 0 0 14px; text-align: center;
  /* Two lines, always. The question rotates and every page words it
     differently, so the space it occupies is reserved rather than measured:
     otherwise the box below sits at a different height on each page, and
     moves as the wording turns. */
  min-height: 2.4em;
  display: flex; align-items: center; justify-content: center;
}
.ask-title.turning { opacity: 0; }

/* --- the box itself ------------------------------------------------- */
.searchbox {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  margin: 0; padding: 6px 8px 6px 16px; background: #fff;
  border: 1px solid rgba(31, 42, 68, .14); border-radius: 999px;
}
/* The box grows downward as a person types, so the icon and the button hold
   the top line rather than drifting to the middle of a tall box. The height of
   an empty box is the button's height, and it is the same on all three pages. */
.searchbox { align-items: flex-start; }
.searchbox > svg { flex: none; color: var(--gold); margin-top: 13px; }
.qwrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.searchbox textarea, .searchbox input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; resize: none; background: transparent;
  font: inherit; font-size: 17px; line-height: 1.45; color: var(--ink); padding: 9px 0; border-radius: 0;
  display: block; margin: 0; min-height: 44px; max-height: 40vh; overflow-y: auto;
}
.searchbox textarea::placeholder, .searchbox input::placeholder { color: #8a8f9c; }
.searchbox button {
  flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--navy); color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.searchbox button:hover { transform: scale(1.04); }
.searchbox button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.searchbox .ic { display: none; }

/* --- example requests ----------------------------------------------- */
.ex-label {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 12px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft);
}
.ex-label::before, .ex-label::after { content: ''; flex: 1; border-top: 1px solid rgba(31, 42, 68, .14); }
.ex {
  display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 10px;
  padding: 14px 16px; text-align: left; background: #faf6ee;
  border: 1px solid rgba(200, 155, 60, .28); border-radius: 14px;
  color: var(--ink); font: inherit; cursor: pointer; text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.ex:hover { border-color: var(--gold); box-shadow: 0 4px 12px rgba(200, 155, 60, .18); }
.ex:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ex-ic { flex: none; width: 32px; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.ex-ic svg { width: 28px; height: 28px; }
.ex-q { flex: 1; min-width: 0; font-size: 16px; line-height: 1.35; }
.ex-q b { font-weight: 700; }
.ex-ch { flex: none; color: var(--ink); display: flex; }
.ex-ch svg { width: 18px; height: 18px; }
.ex-more {
  justify-content: flex-start; background: rgba(200, 155, 60, .10);
  margin-bottom: 0; font-weight: 600; font-size: 15px;
}
.ex-more .ex-plus { flex: none; display: flex; color: var(--gold); }
.ex-more .ex-plus svg { width: 22px; height: 22px; }
.ex-more .ex-ch { margin-left: auto; }
@media (max-width: 480px) {
  .ex { gap: 12px; padding: 12px 14px; }
  .ex-ic { width: 28px; }
  .ex-ic svg { width: 26px; height: 26px; }
  .ex-q { font-size: 15px; }
}