/* =====================================================================
   Solar Harbour: FAQ page (faq.php)
   Loaded by faq.php. Upload to: assets/css/sh-fq.css
   Colours: navy #18457b, gold #f8bc2d and white. Every class starts with
   "sh-fq" so nothing here clashes with the theme.
   ===================================================================== */
.sh-fq {
  --sh-fq-navy: #18457b;
  --sh-fq-gold: #f8bc2d;
  --sh-fq-navy-rgb: 24, 69, 123;
  --sh-fq-gold-rgb: 248, 188, 45;
  --sh-fq-ink-2: rgba(24, 69, 123, .82);
  --sh-fq-line: rgba(24, 69, 123, .13);
  --sh-fq-head: var(--font-primary, "Exo"), system-ui, sans-serif;
  display: block; margin: 0; padding: 0; overflow-x: clip;
  font-family: var(--font-secondary, "Albert Sans"), system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.6; font-weight: 400; text-align: left; color: var(--sh-fq-navy);
}
.sh-fq *, .sh-fq *::before, .sh-fq *::after { box-sizing: border-box; }
.sh-fq [hidden] { display: none !important; }
/* keep the site's global p / ul / li / heading / button styles out (zero-specificity, so the rules below still win) */
:where(.sh-fq) p, :where(.sh-fq) h1, :where(.sh-fq) h2, :where(.sh-fq) h3, :where(.sh-fq) form { margin: 0; color: inherit; }
:where(.sh-fq) ul, :where(.sh-fq) ol, :where(.sh-fq) ul li, :where(.sh-fq) ol li { margin: 0; padding: 0; list-style: none; font-size: inherit; line-height: inherit; color: inherit; }
:where(.sh-fq) a { text-decoration: none; }
:where(.sh-fq) button { font: inherit; }
:where(.sh-fq) details, :where(.sh-fq) summary { margin: 0; padding: 0; }
.sh-fq a:focus-visible, .sh-fq button:focus-visible, .sh-fq summary:focus-visible { outline: 3px solid var(--sh-fq-gold); outline-offset: 3px; }
/* the site theme styles every button and input (for example width: 100%), so the page's own buttons start from a clean slate ("all: unset") further down */
#sh-fq-root button:focus-visible { outline: 3px solid var(--sh-fq-gold); outline-offset: 3px; }
.sh-fq__wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.sh-fq__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ===================================================================
   1. Banner: search and topics
   =================================================================== */
.sh-fq__banner { position: relative; isolation: isolate; overflow: hidden; color: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 60%), var(--sh-fq-navy); }
.sh-fq__banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--sh-fq-gold) 0%, rgba(var(--sh-fq-gold-rgb), .6) 55%, rgba(var(--sh-fq-gold-rgb), 0) 100%); }
.sh-fq__banner-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 80px; }
.sh-fq__crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, .75); }
.sh-fq__crumbs a, .sh-fq__crumbs a:visited { color: rgba(255, 255, 255, .88); }
.sh-fq__crumbs a:hover { color: var(--sh-fq-gold); }
.sh-fq__crumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, .45); }
.sh-fq__title { margin-top: 18px; font-family: var(--sh-fq-head); font-weight: 800; font-size: clamp(38px, 5vw, 62px); line-height: 1.04; letter-spacing: -0.025em; color: #ffffff; text-wrap: balance; }
.sh-fq__rule { display: block; width: 64px; height: 4px; margin-top: 22px; border-radius: 2px; background: var(--sh-fq-gold); }
.sh-fq__lead { margin-top: 20px; max-width: 50ch; font-size: 18.5px; line-height: 1.6; color: rgba(255, 255, 255, .9); }

/* search field */
.sh-fq__search { position: relative; display: flex; align-items: center; max-width: 580px; height: 62px; margin-top: 30px; padding: 0 8px 0 56px; border-radius: 14px;
  background: #ffffff; box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .6); transition: box-shadow .2s ease; }
.sh-fq__search:focus-within { box-shadow: 0 0 0 4px rgba(var(--sh-fq-gold-rgb), .9), 0 22px 44px -22px rgba(0, 0, 0, .6); }
.sh-fq__search > svg { position: absolute; left: 20px; top: 50%; width: 22px; height: 22px; margin-top: -11px; fill: none; stroke: var(--sh-fq-navy); stroke-width: 2.4; stroke-linecap: round; }
#sh-fq-root #sh-fq-q {
  all: unset; box-sizing: border-box; display: block;
  flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent;
  -webkit-appearance: none; appearance: none; font-family: inherit; font-size: 18px; font-weight: 500; line-height: 1.2; color: var(--sh-fq-navy);
}
#sh-fq-root #sh-fq-q::placeholder { color: rgba(var(--sh-fq-navy-rgb), .55); opacity: 1; }
#sh-fq-root #sh-fq-q::-webkit-search-cancel-button, #sh-fq-root #sh-fq-q::-webkit-search-decoration { -webkit-appearance: none; display: none; }
#sh-fq-root .sh-fq__clear { all: unset; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: rgba(var(--sh-fq-navy-rgb), .07); cursor: pointer; }
#sh-fq-root .sh-fq__clear:hover { background: var(--sh-fq-gold); }
.sh-fq__clear svg { width: 18px; height: 18px; fill: none; stroke: var(--sh-fq-navy); stroke-width: 2.4; stroke-linecap: round; }
/* popular searches */
.sh-fq__pops { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.sh-fq__pops > span { margin-right: 4px; font-size: 14px; color: rgba(255, 255, 255, .75); }
#sh-fq-root .sh-fq__pop { all: unset; box-sizing: border-box; flex: none; width: auto; display: inline-flex; align-items: center; height: 34px; margin: 0; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 999px; background: transparent; box-shadow: none;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; color: #ffffff; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
#sh-fq-root .sh-fq__pop:hover { background: var(--sh-fq-gold); border-color: var(--sh-fq-gold); color: var(--sh-fq-navy); }

/* soft gold glow with thin rings radiating out */
.sh-fq__glow { position: absolute; z-index: -1; right: 4%; bottom: -330px; width: 560px; height: 560px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--sh-fq-gold-rgb), .45) 0%, rgba(var(--sh-fq-gold-rgb), .14) 38%, rgba(var(--sh-fq-gold-rgb), 0) 68%); animation: sh-fq-rise 1.6s cubic-bezier(.16, .8, .24, 1) .1s both; }
.sh-fq__glow > span { position: absolute; inset: 22%; border-radius: 50%; border: 1px solid rgba(var(--sh-fq-gold-rgb), .5); opacity: 0; animation: sh-fq-radiate 9s linear infinite; }
.sh-fq__glow > span:nth-child(2) { animation-delay: 3s; }
.sh-fq__glow > span:nth-child(3) { animation-delay: 6s; }
@keyframes sh-fq-radiate { 0% { transform: scale(.7); opacity: 0; } 15% { opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes sh-fq-rise { from { transform: translateY(70px); opacity: 0; } to { transform: none; opacity: 1; } }

/* "browse by topic" card: the rows arrive one after another, once */
.sh-fq__card { position: relative; padding: 22px 16px 12px; border-radius: 22px; color: var(--sh-fq-navy); background: #ffffff; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55);
  animation: sh-fq-card .9s cubic-bezier(.16, .8, .24, 1) .2s both; }
@keyframes sh-fq-card { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.sh-fq__card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 8px; padding-bottom: 14px; border-bottom: 3px solid var(--sh-fq-gold); }
.sh-fq__card-title { font-family: var(--sh-fq-head); font-weight: 800; font-size: 19px; line-height: 1.25; }
.sh-fq__card-n { flex: none; padding: 4px 11px; border-radius: 999px; background: rgba(var(--sh-fq-gold-rgb), .3); font-size: 13px; font-weight: 700; }
.sh-fq__topics { display: grid; margin-top: 6px; }
.sh-fq__topics li { animation: sh-fq-row .6s cubic-bezier(.16, .8, .24, 1) both; animation-delay: calc(.55s + var(--i) * .08s); }
@keyframes sh-fq-row { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.sh-fq__topics a, .sh-fq__topics a:visited { display: flex; align-items: center; gap: 14px; padding: 9px 8px; border-radius: 12px; color: var(--sh-fq-navy); transition: background-color .2s ease; }
.sh-fq__topics a:hover { background: rgba(var(--sh-fq-navy-rgb), .05); }
.sh-fq__t-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(var(--sh-fq-gold-rgb), .24); transition: background-color .2s ease; }
.sh-fq__topics a:hover .sh-fq__t-ico { background: var(--sh-fq-gold); }
.sh-fq__t-ico svg, .sh-fq__r-ico svg, .sh-fq__g-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--sh-fq-navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh-fq__t-name { flex: 1 1 auto; min-width: 0; font-family: var(--sh-fq-head); font-weight: 700; font-size: 16px; line-height: 1.3; }
.sh-fq__t-n { flex: none; font-size: 14px; font-weight: 600; color: rgba(var(--sh-fq-navy-rgb), .6); }
.sh-fq__t-go { flex: none; width: 18px; height: 18px; fill: none; stroke: rgba(var(--sh-fq-navy-rgb), .45); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease, stroke .2s ease; }
.sh-fq__topics a:hover .sh-fq__t-go { transform: translateX(3px); stroke: var(--sh-fq-navy); }


/* ===================================================================
   2. The questions
   =================================================================== */
.sh-fq__body { padding: 80px 0 104px; background: #ffffff; scroll-margin-top: 70px; }
.sh-fq__layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 72px; align-items: start; }

/* topic rail: stays in view and marks the topic being read */
.sh-fq__rail { position: sticky; top: 100px; }
.sh-fq__rail-title { margin: 0 0 10px 12px; font-family: var(--sh-fq-head); font-weight: 800; font-size: 18px; line-height: 1.3; }
.sh-fq__rail ol { display: grid; gap: 2px; }
.sh-fq__rail a, .sh-fq__rail a:visited { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; color: rgba(var(--sh-fq-navy-rgb), .78); transition: background-color .2s ease, color .2s ease, opacity .2s ease; }
.sh-fq__rail a:hover { background: rgba(var(--sh-fq-navy-rgb), .05); color: var(--sh-fq-navy); }
.sh-fq__rail a[aria-current] { background: rgba(var(--sh-fq-gold-rgb), .22); color: var(--sh-fq-navy); }
.sh-fq__rail a[aria-current] .sh-fq__r-name { font-weight: 700; }
.sh-fq__rail a.is-none { opacity: .4; }
.sh-fq__r-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(var(--sh-fq-navy-rgb), .06); }
.sh-fq__r-ico svg { width: 17px; height: 17px; }
.sh-fq__rail a[aria-current] .sh-fq__r-ico { background: var(--sh-fq-gold); }
.sh-fq__r-name { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.3; }
.sh-fq__r-n { flex: none; min-width: 26px; padding: 1px 7px; border-radius: 999px; background: rgba(var(--sh-fq-navy-rgb), .07); font-size: 12.5px; font-weight: 700; text-align: center; color: var(--sh-fq-navy); }

.sh-fq__main { max-width: 840px; min-width: 0; }
.sh-fq__status:empty { display: none; }
.sh-fq__status { margin-bottom: 28px; padding: 12px 16px; border-radius: 12px; background: rgba(var(--sh-fq-gold-rgb), .18); font-size: 15px; font-weight: 600; color: var(--sh-fq-navy); }
.sh-fq__empty { padding: 32px; border: 2px dashed rgba(var(--sh-fq-navy-rgb), .2); border-radius: 18px; font-size: 16.5px; line-height: 1.65; color: var(--sh-fq-ink-2); }
.sh-fq__empty-title { margin-bottom: 6px; font-family: var(--sh-fq-head); font-weight: 800; font-size: 21px; line-height: 1.3; color: var(--sh-fq-navy); overflow-wrap: anywhere; }
.sh-fq__empty a, .sh-fq__empty a:visited { color: var(--sh-fq-navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--sh-fq-gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
#sh-fq-root .sh-fq__link-btn { all: unset; display: inline; width: auto; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; font-weight: 700; color: var(--sh-fq-navy); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--sh-fq-gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* a topic */
.sh-fq__group { scroll-margin-top: 100px; }
.sh-fq__group + .sh-fq__group { margin-top: 64px; }
.sh-fq__g-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 2px solid var(--sh-fq-navy); }
.sh-fq__g-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sh-fq-navy); }
.sh-fq__g-ico svg { stroke: var(--sh-fq-gold); }
.sh-fq__g-head h2 { flex: 1 1 auto; min-width: 0; font-family: var(--sh-fq-head); font-weight: 800; font-size: 27px; line-height: 1.2; letter-spacing: -0.01em; color: var(--sh-fq-navy); }
.sh-fq__g-n { flex: none; font-size: 14px; font-weight: 600; color: rgba(var(--sh-fq-navy-rgb), .6); }
.sh-fq.is-searching .sh-fq__g-n { display: none; }

/* a question */
.sh-fq__qa { border-bottom: 1px solid var(--sh-fq-line); scroll-margin-top: 100px; }
.sh-fq__qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; }
.sh-fq__qa summary::-webkit-details-marker { display: none; }
.sh-fq__qa summary::marker { content: ""; }
.sh-fq__qa h3 { font-family: var(--sh-fq-head); font-weight: 700; font-size: 18.5px; line-height: 1.4; color: var(--sh-fq-navy); }
.sh-fq__qa summary:hover h3 { text-decoration: underline; text-decoration-color: var(--sh-fq-gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* plus that turns into a minus */
.sh-fq__pm { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(var(--sh-fq-navy-rgb), .22); transition: background-color .25s ease, border-color .25s ease; }
.sh-fq__pm::before, .sh-fq__pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: var(--sh-fq-navy); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.sh-fq__pm::after { transform: rotate(90deg); }
.sh-fq__qa summary:hover .sh-fq__pm { border-color: var(--sh-fq-gold); }
.sh-fq__qa[open]:not(.is-closing) .sh-fq__pm { background: var(--sh-fq-gold); border-color: var(--sh-fq-gold); }
.sh-fq__qa[open]:not(.is-closing) .sh-fq__pm::after { transform: rotate(0deg); }
/* the answer */
.sh-fq__a { overflow: hidden; }
.sh-fq__a p { max-width: 68ch; padding: 0 54px 24px 0; font-size: 16.5px; line-height: 1.75; color: var(--sh-fq-ink-2); }
.sh-fq__a a, .sh-fq__a a:visited { color: var(--sh-fq-navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--sh-fq-gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sh-fq__a a:hover { background: rgba(var(--sh-fq-gold-rgb), .25); }
/* search matches */
.sh-fq mark.sh-fq__hl { padding: 0 2px; border-radius: 3px; background: rgba(var(--sh-fq-gold-rgb), .5); color: inherit; }


/* ===================================================================
   Responsive + reduced motion
   =================================================================== */
@media (max-width: 1100px) {
  .sh-fq__banner-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
  .sh-fq__layout { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 991px) {
  .sh-fq__banner-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sh-fq__card { max-width: 520px; }
  .sh-fq__glow { right: -120px; bottom: -280px; }
  .sh-fq__body { padding: 0 0 80px; }
  .sh-fq__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* the rail becomes a row of topic chips that sticks under the header */
  .sh-fq__rail { top: 64px; z-index: 5; margin: 0 -24px 32px; padding: 12px 0; background: #ffffff; border-bottom: 1px solid var(--sh-fq-line); }
  .sh-fq__rail-title { display: none; }
  .sh-fq__rail ol { display: flex; gap: 8px; overflow-x: auto; padding: 0 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sh-fq__rail ol::-webkit-scrollbar { display: none; }
  .sh-fq__rail li { flex: none; }
  .sh-fq__rail a, .sh-fq__rail a:visited { gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--sh-fq-line); border-radius: 999px; white-space: nowrap; }
  .sh-fq__rail a[aria-current] { border-color: var(--sh-fq-gold); }
  .sh-fq__r-ico { width: 28px; height: 28px; border-radius: 50%; }
  .sh-fq__r-ico svg { width: 15px; height: 15px; }
  .sh-fq__r-name { font-size: 14px; }
  .sh-fq__group, .sh-fq__qa { scroll-margin-top: 132px; }
  .sh-fq.is-searching .sh-fq__card { display: none; }   /* on phones and tablets, results come straight after the search box */
  .sh-fq__body { scroll-margin-top: 60px; }
}
@media (max-width: 767px) {
  .sh-fq__wrap { padding: 0 16px; }
  .sh-fq__banner-grid { padding-top: 40px; padding-bottom: 48px; }
  .sh-fq__lead { font-size: 17px; }
  .sh-fq__search { height: 56px; padding-left: 50px; }
  .sh-fq__search > svg { left: 17px; }
  #sh-fq-root #sh-fq-q { font-size: 16.5px; }
  .sh-fq__glow { width: 320px; height: 320px; bottom: -200px; }
  .sh-fq__card { padding: 18px 10px 8px; }
  .sh-fq__rail { margin: 0 -16px 28px; }
  .sh-fq__rail ol { padding: 0 16px; }
  .sh-fq__group + .sh-fq__group { margin-top: 48px; }
  .sh-fq__g-ico { width: 38px; height: 38px; }
  .sh-fq__g-head h2 { font-size: 22px; }
  .sh-fq__g-n { display: none; }
  .sh-fq__qa summary { gap: 14px; padding: 17px 0; }
  .sh-fq__qa h3 { font-size: 17px; }
  .sh-fq__pm { width: 30px; height: 30px; }
  .sh-fq__a p { padding-right: 0; font-size: 16px; line-height: 1.7; }
  .sh-fq__empty { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-fq *, .sh-fq *::before, .sh-fq *::after { animation: none !important; transition: none !important; }
  .sh-fq__glow > span { display: none; }
}

/* ---------- banner height: the same on every page (606px, as on the Incentives page) on laptops and desktops ---------- */
@media (min-width: 992px) {
  .sh-fq__banner { display: flex; align-items: center; height: 606px; }
  .sh-fq__banner > .sh-fq__banner-grid { width: 100%; padding-top: 0; padding-bottom: 12px; }
}