/* ---------------------------------------------------------------
   VIP Reblocking & Underpinnings — Global FAQ

   Brand tokens and type mirror the live site:
     h2.font-40   Gilroy-Bold, uppercase, 800, line-height 1.2,
                  margin-bottom 1.375rem (colour left to the site)
     h5.font-20   uppercase, 400, letter-spacing .5px,
                  line-height 1, margin-bottom 10px
   --font-40 / --font-20 are referenced with fallbacks, so the site's
   own values take over once this markup is embedded.
----------------------------------------------------------------*/
:root{
  --primary:      #ffffff;
  --black-color:  #000000;
  --secondary:    #f5ae3f;
  --bule-color:   #0c4e79;

  /* Derived neutrals — adjust to taste. */
  --vip-section:  #f4f6f8;
  --vip-line:     #e2e7ec;
  --vip-body:     #4a5560;

  --vip-font-heading: "Gilroy-Bold", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --vip-font-body:    "Gilroy", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --vip-radius: 6px;
  --vip-max:    1440px;
}

.vip-faq,
.vip-faq *,
.vip-faq *::before,
.vip-faq *::after{ box-sizing:border-box; }

/* Scoped to the section: the theme owns body/typography defaults. */
.vip-faq{
  background:var(--vip-section);
  color:var(--vip-body);
  -webkit-font-smoothing:antialiased;
}

.vip-faq{ padding:clamp(48px,7vw,96px) 20px; }

.vip-faq__inner{ max-width:var(--vip-max); margin:0 auto; }

/* ---------------------------------------------------------------
   Theme overrides

   A WordPress theme will style bare h2/h3 and every <button> on the
   page, and those rules reach inside this section. The declarations
   below are the ones a theme is most likely to contest, so they are
   forced — scoped to .vip-faq, so nothing outside the FAQ is touched.

   Notes:
     - The question sits inside an h3 for SEO, so it inherits the
       theme's heading font and any uppercase transform. Both are
       refused here; font-family:inherit chains past the h3 up to
       .vip-faq, i.e. the theme's body font.
     - Themes commonly paint button backgrounds on :hover/:focus.
       The states below use the background shorthand, so a gradient
       or image is cleared rather than only its colour.
----------------------------------------------------------------*/
.vip-faq h3.vip-item__h,
.vip-faq h3.vip-item__h button.vip-item__q{
  font-family:inherit !important;
  text-transform:none !important;
  font-variant:normal !important;
  font-variant-caps:normal !important;
  font-feature-settings:normal !important;
  letter-spacing:normal !important;
  text-align:left !important;
  text-decoration:none !important;
}

/* The centred header must not drag the answers with it, and themes often
   centre text inside footer widget areas on mobile. */
.vip-faq .vip-item__a,
.vip-faq .vip-item__a div,
.vip-faq .vip-item__a p,
.vip-faq .vip-item__a li{
  text-align:left !important;
}

/* ---------- Heading ---------- */
.vip-faq__head{
  text-align:center;
  margin:0 auto clamp(36px,5vw,60px);
}

/* mirrors the site's h5.font-20 */
.vip-faq h5.font-20{
  font-size:var(--font-20, 20px);
  margin-top:0;
  margin-bottom:10px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:0.5px;
  position:relative;
  font-weight:400;
  color:var(--bule-color);
  font-family:var(--vip-font-body);
}

/* mirrors the site's h2.font-40 */
.vip-faq h2.font-40{
  font-size:var(--font-40, clamp(1.75rem,3.4vw,2.5rem));
  margin-top:0;
  margin-bottom:1.375rem;
  text-transform:uppercase;
  line-height:1.2;
  font-family:var(--vip-font-heading);
  font-weight:800;
  color:var(--black-color);
}

.vip-faq__rule{
  display:block;
  width:64px;
  height:3px;
  background:var(--secondary);
  margin:0 auto 22px;
}

.vip-faq .vip-faq__intro{
  margin:0 auto;
  font-size:19px !important;
  line-height:1.8 !important;
  color:var(--vip-body) !important;
}

/* wpautop wraps the intro in <p>, which a theme's own p rule would otherwise
   reach. The wrapper owns the type; the paragraphs inherit it. */
.vip-faq .vip-faq__intro p{
  font-size:19px !important;
  line-height:inherit !important;
  color:inherit !important;
  margin:0 0 12px;
}
.vip-faq .vip-faq__intro p:last-child{ margin-bottom:0; }

/* ---------- Two column layout ---------- */
.vip-faq__cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.4vw,30px);
  align-items:start;
}

.vip-faq__col{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ---------- Accordion item ---------- */
.vip-item{
  background:var(--primary);
  border:1px solid var(--vip-line);
  border-radius:var(--vip-radius);
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}

.vip-item:hover{ border-color:#c9d3dc; }

.vip-item.is-open{
  border-color:var(--bule-color);
  box-shadow:0 12px 30px -20px rgba(12,78,121,.55);
}

.vip-item__h{ margin:0; }

/* The h3 keeps the semantics; the button sets its own font so the
   questions stay in the body face rather than the uppercase heading one. */
.vip-faq .vip-item h3.vip-item__h button.vip-item__q{
  width:100% !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  min-height:0 !important;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  font-size:17px !important;
  font-weight:600 !important;
  line-height:1.5 !important;
  color:var(--black-color) !important;
  padding:22px 60px 22px 24px !important;
  position:relative;
  display:block;
  transition:background-color .25s ease, color .25s ease;
}

/* Hover, keyboard focus and the open question share one blue bar. */
.vip-faq .vip-item h3.vip-item__h button.vip-item__q:hover,
.vip-faq .vip-item h3.vip-item__h button.vip-item__q:focus,
.vip-faq .vip-item h3.vip-item__h button.vip-item__q:active,
.vip-faq .vip-item.is-open h3.vip-item__h button.vip-item__q{
  background:var(--bule-color) !important;
  color:var(--primary) !important;
}

.vip-faq .vip-item h3.vip-item__h button.vip-item__q:focus-visible{
  outline:2px solid var(--secondary);
  outline-offset:-4px;
}

/* plus / minus icon */
.vip-item__icon{
  position:absolute;
  top:50%;
  right:22px;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  pointer-events:none;
}
.vip-item__icon::before,
.vip-item__icon::after{
  content:"";
  position:absolute;
  background:var(--secondary) !important;
  border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.vip-item__icon::before{ top:8px; left:0; width:18px; height:2px; }
.vip-item__icon::after { left:8px; top:0; width:2px; height:18px; }

.vip-item.is-open .vip-item__icon::after{ transform:scaleY(0); opacity:0; }

/* answer panel */
.vip-item__a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}
.vip-item.is-open .vip-item__a{ grid-template-rows:1fr; }

.vip-item__a-inner{ overflow:hidden; }

.vip-item__a-inner > div{
  padding:0 24px 24px;
  border-top:1px solid transparent;
}

.vip-item.is-open .vip-item__a-inner > div{
  border-top-color:var(--vip-line);
  padding-top:18px;
}

.vip-faq .vip-item__a p{
  margin:0 0 16px;
  font-size:16px !important;
  line-height:1.8 !important;
  color:var(--vip-body) !important;
}
.vip-item__a p:last-child{ margin-bottom:0; }

/* ---------- Responsive ---------- */
/* Column stack. */
@media (max-width:860px){
  .vip-faq__cols{ grid-template-columns:1fr; gap:14px; }
  .vip-faq .vip-item h3.vip-item__h button.vip-item__q{ padding:20px 52px 20px 20px !important; }
  .vip-item__a-inner > div{ padding:0 20px 20px; }
}

/* Phones. Sizes are stated outright rather than inherited from the
   theme's type scale, which is free to shrink at these widths. 16px is
   the floor for body copy — below that it reads small on a handset. */
@media (max-width:767px){
  .vip-faq{ padding:44px 16px; }

  .vip-faq h2.font-40{ font-size:26px; }
  .vip-faq h5.font-20{ font-size:16px; }

  .vip-faq .vip-item h3.vip-item__h button.vip-item__q{
    padding:18px 48px 18px 18px !important;
    font-size:16px !important;
    line-height:1.45 !important;
  }

  .vip-faq .vip-item__a p,
  .vip-faq .vip-faq__intro,
  .vip-faq .vip-faq__intro p{
    font-size:16px !important;
    line-height:1.7 !important;
  }

  .vip-item__a-inner > div{ padding:0 18px 18px; }
  .vip-item__icon{ right:18px; }
}

@media (max-width:400px){
  .vip-faq h2.font-40{ font-size:23px; }
}

@media (prefers-reduced-motion:reduce){
  .vip-faq *{ transition:none !important; }
}