/* ==========================================================================
   FAQ  —  /faq/
   Paired with: pages/faq.php

   SCOPING: every rule is prefixed with .ihfaq and every design token lives on
   the .ihfaq wrapper, never on :root, so neither the palette nor the type
   scale can leak into the rest of the site.

   NO JAVASCRIPT. The category filter is a set of hidden radio inputs read by
   sibling selectors; the questions are native <details>/<summary>. Both keep
   working with the keyboard and with JS switched off.
   ========================================================================== */

.ihfaq{
  /* --- palette (sampled from the Involved Holidays logo) --- */
  --ihfaq-blue-900:#152f4e;
  --ihfaq-blue-800:#1f4675;
  --ihfaq-blue-700:#285993;   /* logo deep blue */
  --ihfaq-blue-600:#316aad;
  --ihfaq-blue-500:#2595c6;   /* logo sky blue */
  --ihfaq-blue-050:#f3f9fc;
  --ihfaq-gold-600:#8f7c45;
  --ihfaq-gold-500:#ab8b44;
  --ihfaq-gold-400:#c99c43;
  --ihfaq-gold-300:#dcbc74;
  --ihfaq-sand:#f6f2e9;
  --ihfaq-ink:#39434e;
  --ihfaq-ink-soft:#6f7c8a;
  --ihfaq-line:#e6eaee;
  --ihfaq-line-strong:#d3dae0;
  --ihfaq-white:#ffffff;

  /* --- shape --- */
  --ihfaq-font:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ihfaq-radius:10px;
  --ihfaq-pill:999px;
  --ihfaq-max:1240px;
  --ihfaq-ease:cubic-bezier(.4,0,.2,1);

  /* Clearance under the site's sticky nav for in-page jumps. */
  --ihfaq-anchor-offset:120px;

  /* THE BANNER IMAGE — swap this one URL to change the hero photo. */
  --ihfaq-hero-image:url("https://involvedholidays.com/wp-content/uploads/Walking-in-Menorca-product-Image-6.webp");

  font-family:var(--ihfaq-font);
  color:var(--ihfaq-ink);
  background:var(--ihfaq-white);
}

.ihfaq,.ihfaq *,.ihfaq *::before,.ihfaq *::after{box-sizing:border-box}
.ihfaq img{max-width:100%;display:block}

/* --------------------------------------------------------------- hero --- */

.ihfaq-hero{
  position:relative;
  background-color:var(--ihfaq-blue-800);
  background-image:var(--ihfaq-hero-image);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.ihfaq-hero::after{content:"";position:absolute;inset:0;background:rgba(20,44,74,.52)}
.ihfaq-hero__inner{
  position:relative;
  z-index:1;
  max-width:var(--ihfaq-max);
  margin:0 auto;
  padding:clamp(56px,9vw,112px) 24px clamp(40px,6vw,80px);
}
.ihfaq-hero__copy{max-width:760px}

.ihfaq-eyebrow{
  font-weight:700;
  font-size:13px;
  line-height:1.35;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ihfaq-gold-300);
  margin:0;
}

/* the_title() output — the theme's own heading colour wins here without
   !important, so the white is forced. */
.ihfaq-hero__title{
  margin:16px 0 0!important;
  font-weight:900!important;
  font-size:clamp(32px,6.2vw,54px)!important;
  line-height:1.1!important;
  letter-spacing:-.01em;
  color:var(--ihfaq-white)!important;
  text-transform:none!important;
  text-wrap:balance;
}
.ihfaq-hero__lead{
  margin:16px 0 0;
  font-weight:300;
  font-size:clamp(17px,2.2vw,19px);
  line-height:1.6;
  color:rgba(255,255,255,.9);
  max-width:56ch;
  text-wrap:pretty;
}
.ihfaq-hero__actions{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:32px;align-items:center}
.ihfaq-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:13px;
  line-height:1.35;
  color:var(--ihfaq-white);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  padding:9px 16px;
  border-radius:var(--ihfaq-pill);
}

/* ------------------------------------------------------------ buttons --- */

.ihfaq-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 26px;
  border-radius:var(--ihfaq-pill);
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  border:1px solid transparent;
  transition:background-color .16s var(--ihfaq-ease),color .16s var(--ihfaq-ease),border-color .16s var(--ihfaq-ease);
}
.ihfaq-btn--gold{background:linear-gradient(90deg,var(--ihfaq-gold-600) 0%,var(--ihfaq-gold-400) 100%);color:var(--ihfaq-white)}
.ihfaq-btn--gold:hover,.ihfaq-btn--gold:focus{background:var(--ihfaq-gold-600);color:var(--ihfaq-white);text-decoration:none}
.ihfaq-btn--inverse{background:transparent;border-color:rgba(255,255,255,.5);color:var(--ihfaq-white)}
.ihfaq-btn--inverse:hover,.ihfaq-btn--inverse:focus{background:rgba(255,255,255,.12);color:var(--ihfaq-white);text-decoration:none}
.ihfaq-btn--full{width:100%}

/* ------------------------------------------- category filter (no JS) --- */

/* The radios drive everything below them via sibling selectors, so they must
   stay direct children of .ihfaq, immediately before .ihfaq-filter. They are
   hidden from view but not from the keyboard. */
.ihfaq-cat{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.ihfaq-filter{border-bottom:1px solid var(--ihfaq-line);background:var(--ihfaq-white)}
.ihfaq-filter__inner{
  max-width:var(--ihfaq-max);
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.ihfaq-pill{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:10px 18px;
  border-radius:var(--ihfaq-pill);
  border:1px solid var(--ihfaq-line-strong);
  background:var(--ihfaq-white);
  color:var(--ihfaq-blue-700);
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  user-select:none;
  transition:background-color .16s var(--ihfaq-ease),color .16s var(--ihfaq-ease),border-color .16s var(--ihfaq-ease);
}
.ihfaq-pill:hover{background:var(--ihfaq-blue-050);border-color:var(--ihfaq-blue-500)}

/* Active pill. The categories are numbered rather than named, so the panel in
   the admin can add, rename and reorder them without anyone touching this
   file. Rules are written out to 12 categories — add more pairs here if the
   FAQ ever grows past that. */
#ihfaq-cat-all:checked ~ .ihfaq-filter [for="ihfaq-cat-all"],
#ihfaq-cat-1:checked ~ .ihfaq-filter [for="ihfaq-cat-1"],
#ihfaq-cat-2:checked ~ .ihfaq-filter [for="ihfaq-cat-2"],
#ihfaq-cat-3:checked ~ .ihfaq-filter [for="ihfaq-cat-3"],
#ihfaq-cat-4:checked ~ .ihfaq-filter [for="ihfaq-cat-4"],
#ihfaq-cat-5:checked ~ .ihfaq-filter [for="ihfaq-cat-5"],
#ihfaq-cat-6:checked ~ .ihfaq-filter [for="ihfaq-cat-6"],
#ihfaq-cat-7:checked ~ .ihfaq-filter [for="ihfaq-cat-7"],
#ihfaq-cat-8:checked ~ .ihfaq-filter [for="ihfaq-cat-8"],
#ihfaq-cat-9:checked ~ .ihfaq-filter [for="ihfaq-cat-9"],
#ihfaq-cat-10:checked ~ .ihfaq-filter [for="ihfaq-cat-10"],
#ihfaq-cat-11:checked ~ .ihfaq-filter [for="ihfaq-cat-11"],
#ihfaq-cat-12:checked ~ .ihfaq-filter [for="ihfaq-cat-12"]{
  background:var(--ihfaq-blue-700);
  border-color:var(--ihfaq-blue-700);
  color:var(--ihfaq-white);
}

/* Keyboard focus ring on the visible pill, since the radio itself is hidden */
#ihfaq-cat-all:focus-visible ~ .ihfaq-filter [for="ihfaq-cat-all"],
#ihfaq-cat-1:focus-visible ~ .ihfaq-filter [for="ihfaq-cat-1"],
#ihfaq-cat-2:focus-visible ~ .ihfaq-filter [for="ihfaq-cat-2"],
#ihfaq-cat-3:focus-visible ~ .ihfaq-filter [for="ihfaq-cat-3"],
#ihfaq-cat-4:focus-visible ~ .ihfaq-filter [for="ihfaq-cat-4"],
#ihfaq-cat-5:focus-visible ~ .ihfaq-filter [for="ihfaq-cat-5"],
#ihfaq-cat-6:focus-visible ~ .ihfaq-filter [for="ihfaq-cat-6"],
#ihfaq-cat-7:focus-visible ~ .ihfaq-filter [for="ihfaq-cat-7"],
#ihfaq-cat-8:focus-visible ~ .ihfaq-filter [for="ihfaq-cat-8"],
#ihfaq-cat-9:focus-visible ~ .ihfaq-filter [for="ihfaq-cat-9"],
#ihfaq-cat-10:focus-visible ~ .ihfaq-filter [for="ihfaq-cat-10"],
#ihfaq-cat-11:focus-visible ~ .ihfaq-filter [for="ihfaq-cat-11"],
#ihfaq-cat-12:focus-visible ~ .ihfaq-filter [for="ihfaq-cat-12"]{
  outline:none;
  box-shadow:0 0 0 3px rgba(37,149,198,.45);
}

/* Show only the chosen category. "All" needs no rule. */
#ihfaq-cat-1:checked ~ .ihfaq-layout .ihfaq-group:not([data-cat="1"]),
#ihfaq-cat-2:checked ~ .ihfaq-layout .ihfaq-group:not([data-cat="2"]),
#ihfaq-cat-3:checked ~ .ihfaq-layout .ihfaq-group:not([data-cat="3"]),
#ihfaq-cat-4:checked ~ .ihfaq-layout .ihfaq-group:not([data-cat="4"]),
#ihfaq-cat-5:checked ~ .ihfaq-layout .ihfaq-group:not([data-cat="5"]),
#ihfaq-cat-6:checked ~ .ihfaq-layout .ihfaq-group:not([data-cat="6"]),
#ihfaq-cat-7:checked ~ .ihfaq-layout .ihfaq-group:not([data-cat="7"]),
#ihfaq-cat-8:checked ~ .ihfaq-layout .ihfaq-group:not([data-cat="8"]),
#ihfaq-cat-9:checked ~ .ihfaq-layout .ihfaq-group:not([data-cat="9"]),
#ihfaq-cat-10:checked ~ .ihfaq-layout .ihfaq-group:not([data-cat="10"]),
#ihfaq-cat-11:checked ~ .ihfaq-layout .ihfaq-group:not([data-cat="11"]),
#ihfaq-cat-12:checked ~ .ihfaq-layout .ihfaq-group:not([data-cat="12"]){
  display:none;
}

/* ------------------------------------------------------------- layout --- */

.ihfaq-layout{
  max-width:var(--ihfaq-max);
  margin:0 auto;
  padding:clamp(40px,5vw,64px) 24px clamp(48px,6vw,96px);
  display:flex;
  flex-wrap:wrap;
  gap:clamp(32px,4vw,56px);
  align-items:flex-start;
}
.ihfaq-main{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:clamp(32px,4vw,56px)}

.ihfaq-group{scroll-margin-top:var(--ihfaq-anchor-offset)}
.ihfaq-group__head{
  display:flex;
  align-items:baseline;
  gap:16px;
  flex-wrap:wrap;
  padding-bottom:20px;
  border-bottom:2px solid var(--ihfaq-gold-500);
  margin-bottom:24px;
}
.ihfaq-group__title{
  margin:0!important;
  font-weight:700;
  font-size:clamp(23px,3.2vw,34px);
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ihfaq-blue-700);
  text-transform:none!important;
}
.ihfaq-group__count{
  margin:0;
  font-weight:700;
  font-size:13px;
  line-height:1.35;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ihfaq-ink-soft);
}
.ihfaq-list{display:flex;flex-direction:column;gap:12px}

/* ---------------------------------------------- questions (<details>) --- */

.ihfaq-item{
  background:var(--ihfaq-white);
  border:1px solid var(--ihfaq-line);
  border-radius:var(--ihfaq-radius);
  overflow:hidden;
}
.ihfaq-q{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  width:100%;
  min-height:44px;
  padding:clamp(16px,2.2vw,22px) clamp(16px,2.4vw,26px);
  cursor:pointer;
  list-style:none;
  transition:background-color .16s var(--ihfaq-ease);
}
.ihfaq-q::-webkit-details-marker{display:none}
.ihfaq-q::marker{content:""}
.ihfaq-q:hover{background:var(--ihfaq-blue-050)}
.ihfaq-q:focus-visible{outline:none;box-shadow:inset 0 0 0 3px rgba(37,149,198,.45)}
.ihfaq-q__text{
  font-weight:700;
  font-size:clamp(16px,1.9vw,19px);
  line-height:1.4;
  color:var(--ihfaq-blue-700);
  text-wrap:pretty;
}
.ihfaq-q__chev{
  flex:0 0 auto;
  width:30px;
  height:30px;
  border-radius:var(--ihfaq-pill);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--ihfaq-blue-050);
  color:var(--ihfaq-blue-700);
  transition:background-color .16s var(--ihfaq-ease),color .16s var(--ihfaq-ease),transform .16s var(--ihfaq-ease);
}
.ihfaq-q__chev::before{
  content:"";
  width:8px;
  height:8px;
  border-right:2.5px solid currentColor;
  border-bottom:2.5px solid currentColor;
  border-radius:1px;
  transform:translateY(-2px) rotate(45deg);
}
.ihfaq-item[open] .ihfaq-q__chev{
  background:var(--ihfaq-blue-700);
  color:var(--ihfaq-white);
  transform:rotate(180deg);
}

.ihfaq-a{
  padding:0 clamp(16px,2.4vw,26px) clamp(20px,2.4vw,26px);
  animation:ihfaqRise 240ms var(--ihfaq-ease) both;
}
.ihfaq-a__inner{max-width:68ch;display:flex;flex-direction:column;gap:16px}
.ihfaq-p{margin:0;font-size:17px;line-height:1.6;color:var(--ihfaq-ink);text-wrap:pretty}
.ihfaq-a__link{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:13px;
  line-height:1.35;
  color:var(--ihfaq-blue-500);
  border-bottom:1px solid rgba(37,149,198,.35);
  padding-bottom:3px;
  text-decoration:none;
  transition:color .16s var(--ihfaq-ease),border-color .16s var(--ihfaq-ease);
}
.ihfaq-a__link::after{content:"\2192";font-weight:700;line-height:1}
.ihfaq-a__link:hover,.ihfaq-a__link:focus{
  color:var(--ihfaq-blue-700);
  border-bottom-color:var(--ihfaq-blue-700);
  text-decoration:none;
}

@keyframes ihfaqRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* -------------------------------------------------------------- aside --- */

.ihfaq-aside{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:16px}

.ihfaq-help{
  background:var(--ihfaq-blue-800);
  border-radius:var(--ihfaq-radius);
  padding:clamp(22px,2.6vw,28px);
  color:var(--ihfaq-white);
}
.ihfaq-help__title{
  margin:12px 0!important;
  font-weight:700;
  font-size:23px;
  line-height:1.35;
  color:var(--ihfaq-white)!important;
  text-transform:none!important;
}
.ihfaq-help__text{margin:0 0 20px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.82);text-wrap:pretty}
.ihfaq-help__actions{display:flex;flex-direction:column;gap:12px}
.ihfaq-help__hours{margin:20px 0 0;font-size:13px;line-height:1.35;color:rgba(255,255,255,.62)}

.ihfaq-useful{background:var(--ihfaq-sand);border-radius:var(--ihfaq-radius);padding:clamp(22px,2.6vw,28px)}
.ihfaq-useful .ihfaq-eyebrow{color:var(--ihfaq-gold-600)}
.ihfaq-useful__list{display:flex;flex-direction:column;gap:4px;margin-top:16px}
.ihfaq-useful__link{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:15px;
  font-weight:400;
  line-height:1.5;
  color:var(--ihfaq-blue-700);
  padding:10px 0;
  border-bottom:1px solid rgba(171,139,68,.24);
  text-decoration:none;
  transition:color .16s var(--ihfaq-ease);
}
.ihfaq-useful__link:last-child{border-bottom:0}
.ihfaq-useful__link:hover,.ihfaq-useful__link:focus{color:var(--ihfaq-blue-500);text-decoration:none}
.ihfaq-useful__arrow{color:var(--ihfaq-gold-500);flex:none}

@media (prefers-reduced-motion:reduce){
  .ihfaq *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}