/* ============================================================
   FAQ page styles (faq/index.html). Loaded after style.css, so the
   shared tokens, header, buttons and footer all come from there and this
   file only carries what the FAQ adds: the page head, the topic links and
   the question cards.
   ============================================================ */

/* ---------- Page head ---------- */
/* The same three layers as every photo section (style.css, "Photo slideshow
   section"): photo, scrim, copy. The photo is basecamp from the air, since
   most of what's asked here is about getting to and staying at it. */
.faq-head {
  color: #fff;
  padding: clamp(6rem, 12vw, 9rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}
.faq-head .section-bg {
  background-image:
    url("../assets/img/ulster-fairground.jpg"),
    linear-gradient(165deg, var(--color-forest) 0%, var(--color-forest-dk) 100%);
  background-size: cover, auto;
  background-position: center 40%, center;
  background-repeat: no-repeat;
}
.faq-head h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  margin: 0 0 0.75rem; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.faq-head .eyebrow { color: var(--color-accent-light); text-shadow: 0 2px 10px rgba(0,0,0,0.55); }
.faq-head .lead { margin-bottom: 0; text-wrap: pretty; }

/* ---------- Body ---------- */
/* Same ground as the clinics list: pinned to #14251f at both ends so the rope
   dividers' feather band disappears into it. */
.faq-section {
  position: relative; z-index: 1;
  background: linear-gradient(to bottom, #14251f 0%, #1b3128 22%, #1b3128 78%, #14251f 100%);
  color: rgba(255,255,255,0.9);
}

/* Topic links. Plain in-page anchors, so they work with scripting off and
   leave a real URL (faq/#weather) someone can paste to a friend. Ten of them,
   so a size down from the clinics page's day tabs, to keep the rows they wrap
   to at phone width short. */
.faq-topics { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.faq-topics a {
  display: inline-block; padding: 0.35rem 0.85rem; border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.32); background: rgba(255,255,255,0.07);
  color: #fff; font-size: 0.92rem; font-weight: 700; text-decoration: none;
}
.faq-topics a:hover { border-color: var(--color-accent-light); background: rgba(255,255,255,0.16); }

/* "Check your ticket": the one thing to do before arriving, so it's always
   open and set apart. Cream on the dark ground, the reverse of everything
   around it, which is enough to say "read this first" without an icon. */
.faq-callout {
  background: var(--color-sand); color: var(--color-ink);
  border-radius: var(--radius); padding: 1.4rem 1.5rem; margin: 0 0 2.5rem;
  scroll-margin-top: 1.5rem;
}
.faq-callout h2 { color: var(--color-forest); font-size: clamp(1.3rem, 3vw, 1.6rem); margin: 0 0 0.6rem; }
.faq-callout p { margin: 0 0 0.75rem; }
.faq-callout p:last-child { margin-bottom: 0; }
.faq-callout a { color: var(--color-accent-dk); font-weight: 600; }

.faq-group { margin: 0 0 2.75rem; scroll-margin-top: 1.5rem; }
.faq-group h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 0 0 1rem; }

/* Each question is a <details>: the browser does the open/close, the keyboard
   handling and the "expanded/collapsed" announcement, with no script. Find in
   page searches inside closed ones and opens the match in current browsers. */
.faq-item {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  margin: 0 0 0.6rem;
}
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem; cursor: pointer; list-style: none;
  color: #fff; font-weight: 700; font-size: 1.05rem;
}
/* The default disclosure triangle, removed in both the standard and the
   WebKit spelling; the plus below replaces it. */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; font-size: 1.5rem; line-height: 1; font-weight: 400;
  color: var(--color-accent-light); transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--color-accent-light); }
.faq-item summary:focus-visible { outline: 3px solid var(--color-accent-dk); outline-offset: 2px; border-radius: var(--radius); }
.faq-answer { padding: 0 1.2rem 1.1rem; }
.faq-answer > :first-child { margin-top: 0; }
.faq-answer > :last-child { margin-bottom: 0; }
.faq-answer a { color: #fff; font-weight: 600; }
.faq-answer ul { padding-left: 1.2rem; }