/* ============================================================
   Sveti Mauro — FAQ styles (shared by index.html and faq.html)
   Uses the site's existing CSS custom properties / type scale.
   ============================================================ */
.section-head .section-sub{margin:14px auto 0;color:var(--slate);font-size:clamp(1rem,2vw,1.1rem);line-height:1.6}
.faq-wrap{max-width:880px;margin:0 auto}
.faq-cat{margin-top:36px}
.faq-cat:first-child{margin-top:0}
.faq-cat-title{display:flex;align-items:center;gap:13px;font-family:"Fraunces",Georgia,serif;font-size:clamp(1.18rem,2.4vw,1.4rem);font-weight:600;color:var(--navy);margin:0 0 15px;padding-left:2px;letter-spacing:-.01em}
.faq-cat-ico{flex:none;width:42px;height:42px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;font-size:1.18rem;background:linear-gradient(180deg,#eaf3fb,#dbeaf6);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}

.faq-items{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.faq-item+.faq-item{border-top:1px solid var(--line)}

.faq-q{width:100%;display:flex;align-items:center;gap:18px;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;padding:21px 24px;color:var(--navy);transition:background .18s,color .18s}
.faq-q:hover{background:#f6fbff}
.faq-q:focus-visible{outline:none;background:#f0f7fe;box-shadow:inset 0 0 0 2px rgba(31,111,178,.35)}
.faq-q-txt{flex:1;font-size:1.03rem;font-weight:600;line-height:1.42}
.faq-item.open>.faq-q{color:var(--blue)}

/* animated + / − glyph */
.faq-q-ico{flex:none;position:relative;width:22px;height:22px}
.faq-q-ico::before,.faq-q-ico::after{content:"";position:absolute;background:var(--blue);border-radius:2px;transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .32s}
.faq-q-ico::before{top:10px;left:3px;width:16px;height:2px}
.faq-q-ico::after{top:3px;left:10px;width:2px;height:16px}
.faq-item.open>.faq-q .faq-q-ico::after{transform:scaleY(0);opacity:0}

/* smooth height with grid-template-rows (no JS measurement needed) */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1)}
.faq-item.open>.faq-a{grid-template-rows:1fr}
.faq-a-in{overflow:hidden}
.faq-a p{padding:0 24px 22px;margin:0;color:var(--slate);font-size:.99rem;line-height:1.72}

@media(max-width:560px){
  .faq-q{padding:17px 16px;gap:13px}
  .faq-q-txt{font-size:.97rem}
  .faq-a p{padding:0 16px 19px}
  .faq-cat-ico{width:38px;height:38px;font-size:1.08rem}
}

/* ---- footer links row (FAQ link lives here) ---- */
.footer-links{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:center}
.footer-links a{color:#9fc0dc;text-decoration:none;font-size:.9rem;font-weight:600;transition:color .2s}
.footer-links a:hover{color:#fff}

/* ---- dedicated /faq page header ---- */
.faq-page-head{max-width:820px;margin:0 auto;text-align:center;padding:66px 22px 8px}
.faq-page-head .kicker{justify-content:center}
.faq-page-head h1{font-size:clamp(2.1rem,5vw,3.1rem);color:var(--navy);margin:0 0 16px;letter-spacing:-.02em}
.faq-page-head p{max-width:60ch;margin:0 auto;color:var(--slate);font-size:clamp(1.02rem,2vw,1.14rem)}
.faq-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 6px;color:var(--blue);text-decoration:none;font-weight:600;font-size:.9rem;transition:color .2s}
.faq-back:hover{color:var(--navy)}

/* closing call-to-action on the faq page */
.faq-cta{max-width:880px;margin:52px auto 0;text-align:center;background:linear-gradient(160deg,var(--navy),var(--navy-2));color:#fff;border-radius:var(--radius);padding:44px 28px;box-shadow:var(--shadow)}
.faq-cta h2{color:#fff;font-size:clamp(1.5rem,3.4vw,2rem);margin:0 0 10px}
.faq-cta p{color:rgba(255,255,255,.86);max-width:52ch;margin:0 auto 24px}
.faq-cta .btn-primary{background:linear-gradient(180deg,var(--blue-2),var(--blue))}