/* ==========================================================================
   faqs.css
   /faqs/ — Frequently Asked Questions. A light editorial screen: a big
   centred masthead with a canary lightning-bolt behind it, then the questions
   grouped into native <details> accordions, closed on a dark footer band.

   DESIGN MATH (why every number is what it is)
   - Spacing: every padding / gap / margin snaps to the 8px scale in tokens.css
     (--space-2xs 4 · -xs 8 · -sm 12 · -md 16 · -lg 24 · -xl 32 · -2xl 48 · -3xl 72).
   - Type:    sizes come from the fluid modular scale (--fs-*); hierarchy is set
     by weight + size. Display tightens (~1.02), body opens (~1.6).
   - Layout:  the top bar, masthead and answer column share ONE horizontal
     gutter (--gutter); the reading column caps at --content-max so questions
     stay a comfortable measure. One canary accent, nothing else.
   - Zero JS: the accordions are native <details>/<summary>, so they work with
     the keyboard and without scripts (mirrors /vip-transport/ shipping no JS).
   ========================================================================== */

/* Vendored display face for the brand wordmark (mirrors the homepage logo). */
@font-face {
  font-family: 'Plaster';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/assets/fonts/plaster.woff2') format('woff2');
}

:root {
  --accent: #e5ff00;

  /* LIGHT SURFACE OVERRIDE (page-scoped): this stylesheet loads after
     tokens.css, so re-pointing the neutral tokens here flips ONLY /faqs/ to a
     warm off-white (#f3f1ed) background with dark text. The canary-yellow
     accent stays. Global dark tokens are untouched. */
  --color-bg: #f3f1ed;
  --color-text: #0d0d0d;
  --color-text-muted: #4a4a4a;
  --color-text-faint: #8a8a8a;
  --color-line: rgba(0, 0, 0, 0.14);
  --color-bg-raised: rgba(0, 0, 0, 0.05);

  /* --- Page layout constants (the "math") ------------------------------ */
  --gutter: var(--container-pad);          /* shared L/R page gutter: 20→48px */
  --content-max: 46rem;                    /* reading column: 736px           */
  --card-radius: var(--radius-md);         /* 12px                            */

  /* Light text tints for the dark footer band (derived from #f4f5f7). */
  --on-dark:        #f4f5f7;
  --on-dark-muted:  rgba(244, 245, 247, 0.66);
  --on-dark-faint:  rgba(244, 245, 247, 0.42);
  --on-dark-line:   rgba(244, 245, 247, 0.14);
}

/* Border-box so padding never fights track widths. This page loads only
   tokens.css (which sets no reset), so it must own this itself. */
*, *::before, *::after { box-sizing: border-box; }

.faq-page {
  margin: 0;
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
}
/* Let the content region grow so the footer band sits at the bottom even on
   very tall screens (body is the flex column; main is the elastic child). */
.faq-page > main { flex: 1 1 auto; }

/* Keyboard skip target. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--accent);
  color: #000;
  padding: var(--space-xs) var(--space-sm);
  font-weight: 700;
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

/* ------------------------------------------------------------- top bar -----
   Ported verbatim from /vip-transport/ (the "chauffeur page nav"): brand mark
   left, a mini section-nav right that lifts to canary on hover / focus. */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  /* STANDARD BAR (site-wide): one exact size on every light page —
     --header-h (4.5rem) tall, --container-pad inline gutter; content
     centers inside the fixed band. box-sizing is pinned here because some of
     these pages set a global border-box reset and others don't — without it
     the same min-height + padding renders 72px on one page and 96px on
     another. Keep this block in sync across
     vehicles / bosnia-tours / vip-transport / faqs / about-listing. */
  box-sizing: border-box;
  min-height: var(--header-h);
  padding: var(--space-sm) var(--container-pad);
}

/* Exact mirror of the homepage HUD logo: Plaster "Listing" mark + accent bold
   "Rent A Car" sub, on one baseline row. (Brand-mark sizing is intentional and
   shared site-wide — do not fold it into the type scale.) */
.topbar__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55ch;
  line-height: 1;
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight, -0.01em);
  white-space: nowrap;
}
.topbar__brand strong {
  font-family: 'Plaster', var(--font-display, sans-serif);
  font-weight: 400;
  font-size: calc(var(--fs-400) * 1.2);
  text-transform: uppercase;
}
.topbar__brand span {
  font-size: calc(var(--fs-100) * 1.35);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps, 0.12em);
  text-transform: uppercase;
  /* Tiger-flame (the intro orange) instead of canary: on the light page
     background the canary sub-line has almost no contrast. */
  color: var(--color-accent-hi);
}

.topbar__nav {
  display: flex;
  flex-wrap: wrap;                        /* wrap gracefully before it crowds the brand */
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);   /* row 12 (when wrapped) · column 24 */
}
.topbar__link {
  font-size: var(--fs-100);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.topbar__link:hover,
.topbar__link:focus-visible { color: var(--accent); }
/* Current page reads at full strength (canary on off-white would be too faint
   to signal "you are here"), with a canary tick under it. */
.topbar__link[aria-current="page"] {
  color: var(--color-text);
  position: relative;
}
.topbar__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.5em;
  height: 2px;
  background: var(--accent);
}

/* ============================================================== masthead ===
   Big centred title with a canary lightning-bolt behind it. The bolt bleeds
   off the edges; the heading sits on top (z-index 1) so where it overlaps the
   canary it reads as black-on-yellow — the highest-contrast pairing there is. */
.faq-hero {
  position: relative;
  overflow: hidden;                        /* clips the bolts to the masthead */
  isolation: isolate;
  padding: clamp(var(--space-2xl), 8vw, var(--space-4xl)) var(--gutter)
           clamp(var(--space-xl), 5vw, var(--space-3xl));
}

/* Decorative lightning: ONE horizontal strike. The narrow tail bleeds off the
   RIGHT edge (right: -3%); the wide body + pointed tip stretch LEFT so the tip
   lands past the horizontal midpoint (width 72vw → tip ~31% from the left). A
   small clockwise tilt drops the tip for a right-high → left-low diagonal.
   TUNE: `width` = how far left the tip reaches · `top` = vertical height ·
   `transform: rotate()` = tilt. aria-hidden in the markup. */
.faq-hero__bolt {
  position: absolute;
  z-index: 0;
  top: clamp(2.5rem, 7vw, 6rem);
  right: -3%;
  width: clamp(34rem, 72vw, 66rem);
  color: var(--accent);                    /* the SVG fills with currentColor */
  transform: rotate(6deg);
  transform-origin: right center;
  pointer-events: none;
  filter: drop-shadow(0 14px 34px rgba(229, 255, 0, 0.20));
}

.faq-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}
.faq-hero__title {
  margin: 0;
  font-family: "Raleway", var(--font-display, var(--font-sans));
  font-weight: 800;
  font-size: var(--fs-800);                /* 2.5→4.5rem masthead */
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.faq-hero__lead {
  margin: 0;
  max-width: 48ch;
  color: var(--color-text-muted);
  font-size: var(--fs-400);
  line-height: 1.6;
  text-wrap: pretty;
}
.faq-hero__lead a {
  color: var(--color-text);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.faq-hero__lead a:hover { color: var(--color-accent-hi, #ff5a1f); }

/* ================================================================ answers ===
   One centred reading column. Each category is a group: a heading, then a
   stack of accordion rows. */
.faqs {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl)) var(--gutter)
           var(--space-4xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);                    /* 72px between categories */
}

.faq-group__title {
  margin: 0 0 var(--space-lg);
  font-family: "Raleway", var(--font-display, var(--font-sans));
  font-weight: 700;
  font-size: var(--fs-600);                 /* 1.5→2rem */
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);                     /* 12px between rows */
}

/* A single accordion row = a native <details>. White bar lifts off the warm
   off-white page; opening turns the border and toggle canary. */
.faq {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--card-radius);
  box-shadow: 0 1px 2px rgba(13, 13, 13, 0.04);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.faq[open] {
  border-color: rgba(13, 13, 13, 0.22);
  box-shadow: 0 10px 30px -14px rgba(13, 13, 13, 0.22);
}

/* The clickable question row. Strip the native disclosure triangle. */
.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: clamp(var(--space-md), 2.4vw, var(--space-lg));
  font-weight: var(--fw-bold);
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.125rem);
  line-height: 1.35;
  color: var(--color-text);
}
.faq__q::-webkit-details-marker { display: none; }  /* Safari triangle */
.faq__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--card-radius);
}
.faq:hover .faq__q { color: #000; }

/* Circular +/− toggle on the right. Dark by default; canary when hovered or
   open. On open the vertical bar collapses so "+" becomes "−". */
.faq__icon {
  position: relative;
  flex: none;
  width: 2.25rem;                           /* 36px */
  height: 2.25rem;
  border-radius: 50%;
  background: #0d0d0d;
  transition: background var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--on-dark);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.faq__icon::before {                        /* horizontal bar */
  width: 0.875rem;                          /* 14px */
  height: 2px;
  transform: translate(-50%, -50%);
}
.faq__icon::after {                         /* vertical bar */
  width: 2px;
  height: 0.875rem;
  transform: translate(-50%, -50%);
}
.faq:hover .faq__icon,
.faq[open] .faq__icon { background: var(--accent); }
.faq:hover .faq__icon::before,
.faq:hover .faq__icon::after,
.faq[open] .faq__icon::before,
.faq[open] .faq__icon::after { background: #0d0d0d; }
.faq[open] .faq__icon { transform: rotate(180deg); }
.faq[open] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }  /* + → − */

/* The answer. Padding matches the question minus its top so the two read as
   one block; the measure is capped for readability. */
.faq__a {
  padding: 0 clamp(var(--space-md), 2.4vw, var(--space-lg))
             clamp(var(--space-md), 2.4vw, var(--space-lg));
}
.faq__a p {
  margin: 0;
  max-width: 60ch;
  color: var(--color-text-muted);
  font-size: var(--fs-300);
  line-height: 1.65;
}

/* ================================================================ footer ===
   Dark band under the light page (mirrors the reference's near-black footer),
   with the canary brand mark. Colours are set explicitly here — the page-scoped
   token overrides above are light, so this band opts back into dark. */
.faq-footer {
  flex: 0 0 auto;
  background: #0d0d0d;
  color: var(--on-dark);
  padding: var(--space-3xl) var(--gutter) var(--space-xl);
}
.faq-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}
.faq-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}
@media (min-width: 48rem) {
  .faq-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--space-xl);
  }
}

.faq-footer__name {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-500);
  letter-spacing: var(--tracking-tight);
}
.faq-footer__name .mark { color: var(--accent); }
.faq-footer__desc {
  margin: 0 0 var(--space-md);
  max-width: 32ch;
  color: var(--on-dark-muted);
  font-size: var(--fs-200);
  line-height: 1.6;
}
.faq-footer__contact {
  font-style: normal;
  font-size: var(--fs-200);
  line-height: 1.7;
  color: var(--on-dark-muted);
}
.faq-footer__contact a { color: var(--on-dark); text-decoration: none; }
.faq-footer__contact a:hover { color: var(--accent); }

.faq-footer__col-title {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--on-dark-faint);
  font-weight: var(--fw-semibold);
}
.faq-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.faq-footer__list a {
  color: var(--on-dark-muted);
  text-decoration: none;
  font-size: var(--fs-200);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-footer__list a:hover { color: var(--on-dark); }

.faq-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--on-dark-line);
  font-size: var(--fs-100);
  color: var(--on-dark-faint);
}

/* --------------------------------------------------- entrance --------------
   The site's signature on-load reveal (opacity 0→1, 30px rise, 0.6s ease-out),
   staggered in reading order — same DNA as /vip-transport/'s CSS cascade and
   the JS choreography elsewhere. Scoped to `no-preference` so the hidden
   pre-state is NEVER applied under reduced motion or if the animation can't
   run; content then simply renders at rest, fully visible. */
@media (prefers-reduced-motion: no-preference) {
  .topbar,
  .faq-hero__title,
  .faq-hero__lead,
  .faqs {
    animation: faq-rise 0.6s var(--ease-out) both;
  }
  .topbar         { animation-delay: 0.05s; }
  .faq-hero__title{ animation-delay: 0.13s; }
  .faq-hero__lead { animation-delay: 0.21s; }
  .faqs           { animation-delay: 0.29s; }

  /* Answer reveal each time a row opens: fade + settle down from -6px. */
  .faq[open] .faq__a { animation: faq-open 0.45s var(--ease-out); }
}

@keyframes faq-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------- responsive ------------ */
@media (max-width: 30rem) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  .topbar__nav { justify-content: flex-start; }  /* nav sits left under the brand */
}

/* --------------------------------------------------- reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  .faq,
  .faq__icon,
  .faq__icon::before,
  .faq__icon::after,
  .topbar__link { transition: none; }
}