/* ==========================================================================
   Spas Bangkok — Cassiopeia preset for Joomla 6   (v1.1) — Spas Bangkok
   Place in: media/templates/site/<cassiopeia or child>/css/user.css
   Fonts in: media/templates/site/<cassiopeia or child>/fonts/

   Concept
   - DARK zones : header, topbar, footer, and anything with .spa-dark / .spa-band
   - LIGHT zone : everything else (body, article, cards, forms)
   - Each dark zone re-defines a few tokens (--spa-heading, --bs-link-color …) so
     headings, links, buttons and form fields inside it adapt automatically.
   Verified against Cassiopeia 6.1-dev markup/SCSS (header.container-header,
   .container-nav, .mod-menu, .grid-child, .footer, .card, .btn-primary …).
   ========================================================================== */

/* ---- Fonts (self-hosted, Latin + Latin-Ext + Vietnamese, OFL licence) ---- */
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/marcellus-regular.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/lato-regular.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/lato-bold.woff2") format("woff2")}

/* ---- Tokens -------------------------------------------------------------
   html:root (specificity 0,1,1) is deliberate: Cassiopeia prints its own
   :root{…} block inline AFTER the stylesheets, so plain :root would lose.   */
html:root{
  /* palette: Spas Bangkok — teal + gold  (gold = the site's accent colour) */
  --spa-deep:#0b3d3a;  --spa-deep-2:#082d2b;
  --spa-deep-rgb:11,61,58;  --spa-deep-2-rgb:8,45,43;
  --spa-teal:#0f766e;  --spa-teal-rgb:15,118,110;
  --spa-gold:#b8893b;  --spa-gold-text:#8a6322;  --spa-gold-light:#d9b872;
  --spa-gold-rgb:184,137,59;  --spa-gold-light-rgb:217,184,114;  --spa-gold-hover:#e6d0a2;
  --spa-cream:#f6f1e7; --spa-paper:#fbf9f4;
  --spa-ink:#1f2d2c;   --spa-muted:#5b6b69;      --spa-line:#e3ddcf;
  --spa-radius:.75rem;
  --spa-shadow:0 1px 2px rgba(var(--spa-deep-rgb),.06),0 8px 20px rgba(var(--spa-deep-rgb),.07);

  --spa-heading:var(--spa-deep);

  /* Cassiopeia */
  --cassiopeia-color-primary:var(--spa-deep);
  --cassiopeia-color-hover:var(--spa-teal);
  --cassiopeia-color-link:var(--spa-teal);
  --cassiopeia-font-family-headings:"Marcellus",Georgia,"Times New Roman","Noto Serif Thai",serif;
  --cassiopeia-font-weight-headings:400;
  --cassiopeia-font-family-body:"Lato","Noto Sans Thai","Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --cassiopeia-font-weight-normal:400;
  --cassiopeia-scroll-margin-top:7rem;
  --link-color:var(--spa-teal);
  --link-hover-color:var(--spa-deep);
  --template-bg-light:var(--spa-cream);
  --template-special-color:var(--spa-deep);
  --template-link-color:var(--spa-teal);
  --template-link-hover-color:var(--spa-deep);
  --template-contrast:var(--spa-teal);

  /* Bootstrap 5.3 */
  --bs-body-bg:var(--spa-paper);--body-bg:var(--spa-paper);
  --bs-body-color:var(--spa-ink);--body-color:var(--spa-ink);
  --bs-body-line-height:1.65;--body-line-height:1.65;
  --bs-secondary-color:var(--spa-muted);--secondary-color:var(--spa-muted);
  --bs-border-color:var(--spa-line);--border-color:var(--spa-line);
  --bs-primary:var(--spa-teal);--primary:var(--spa-teal);
  --bs-primary-rgb:var(--spa-teal-rgb);--primary-rgb:var(--spa-teal-rgb);
  --bs-link-color:var(--spa-teal);--link-color:var(--spa-teal);
  --bs-link-color-rgb:var(--spa-teal-rgb);--link-color-rgb:var(--spa-teal-rgb);
  --bs-link-hover-color:var(--spa-deep);--link-hover-color:var(--spa-deep);
  --bs-link-hover-color-rgb:var(--spa-deep-rgb);--link-hover-color-rgb:var(--spa-deep-rgb);
  --bs-border-radius:.5rem;--border-radius:.5rem;
  --bs-border-radius-lg:var(--spa-radius);--border-radius-lg:var(--spa-radius);
}

/* ---- Dark zones -------------------------------------------------------- */
.container-header,.container-topbar,.container-below-top,.footer,
.spa-dark,.spa-band{
  --spa-heading:var(--spa-cream);
  --spa-fg-muted:rgba(246,241,231,.78);
  --bs-body-color:var(--spa-cream);--body-color:var(--spa-cream);
  --bs-secondary-color:rgba(246,241,231,.78);--secondary-color:rgba(246,241,231,.78);
  --bs-border-color:rgba(var(--spa-gold-light-rgb),.28);--border-color:rgba(var(--spa-gold-light-rgb),.28);
  --bs-link-color:var(--spa-gold-light);--link-color:var(--spa-gold-light);
  --bs-link-color-rgb:var(--spa-gold-light-rgb);--link-color-rgb:var(--spa-gold-light-rgb);
  --bs-link-hover-color:#fff;--link-hover-color:#fff;
  --bs-link-hover-color-rgb:255,255,255;--link-hover-color-rgb:255,255,255;
  color:var(--spa-cream);
}

/* ---- Base (light zone) ------------------------------------------------- */
html{background-color:var(--spa-paper)}
body.site{background-color:var(--spa-paper);color:var(--spa-ink)}
::selection{background:var(--spa-gold-light);color:var(--spa-deep)}
:focus-visible{outline:2px solid var(--spa-teal);outline-offset:2px}
.container-header :focus-visible,.footer :focus-visible,
.spa-dark :focus-visible,.spa-band :focus-visible{outline-color:var(--spa-gold-light)}

h1,h2,h3,h4,h5,h6{color:var(--spa-heading);font-family:var(--cassiopeia-font-family-headings);font-weight:var(--cassiopeia-font-weight-headings);line-height:1.2;letter-spacing:.01em}
a:not([class]){text-underline-offset:.2em;text-decoration-thickness:1px}
.text-muted,.small.text-muted{color:var(--spa-muted)!important}

/* Page headings: short gold rule as accent */
.page-header h1,.page-header h2{margin-bottom:1.25rem}
.page-header h1::after{content:"";display:block;width:3rem;height:3px;margin-top:.7rem;
  background:var(--spa-gold);border-radius:2px}

/* ---- Header (dark) ----------------------------------------------------- */
.container-header{
  background-color:var(--spa-deep);background-image:none;box-shadow:none;
  border-bottom:3px solid var(--spa-gold);
}
.container-header .navbar-brand,
.container-header .navbar-brand a{
  font-family:var(--cassiopeia-font-family-headings);letter-spacing:.08em;color:var(--spa-cream);
}
.container-header .navbar-brand:hover,.container-header .navbar-brand a:hover{color:#fff}
.container-header .brand-logo img,.container-header .navbar-brand img{
  width:auto;height:auto;max-height:56px;display:block;
}
.container-header .site-description{color:var(--spa-fg-muted);font-size:.9rem}
.container-topbar{background:var(--spa-deep-2);font-size:.85rem}
.container-topbar .grid-child,.container-below-top{padding-block:.35rem}

/* Main menu */
.container-header .mod-menu>li>a,
.container-header .mod-menu>li>span,
.container-header .mod-menu>li>button{
  color:var(--spa-cream);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding-block:.4rem;
}
.container-header .mod-menu>li>a:hover,
.container-header .mod-menu>li>button:hover,
.container-header .mod-menu>li.active>a,
.container-header .mod-menu>li.active>span,
.container-header .mod-menu>li.active>button{color:var(--spa-gold-light);text-decoration:none}
@media (min-width:992px){
  .container-header .mod-menu>li.active::after,
  .container-header .mod-menu>li:hover::after,
  .container-header .metismenu>li>a:hover::after,
  .container-header .metismenu>li>button:hover::before,
  .container-header .metismenu>li.active>a::after,
  .container-header .metismenu>li.active>button::before{background:var(--spa-gold);opacity:1}
}
/* Drop-down / sub menus */
.container-header .mod-menu :where(.mod-menu__sub:not(.mod-menu__sub *)),
.container-header .mod-menu .mod-menu__sub,
.container-header .metismenu.mod-menu .mm-collapse{
  background-color:var(--spa-deep-2);border-top:2px solid var(--spa-gold);
  box-shadow:0 12px 24px rgba(0,0,0,.25);
}
.container-header .mod-menu .parent>ul,
.container-header .mod-menu .mod-menu__sub a,
.container-header .mod-menu .mod-menu__sub span,
.container-header .mod-menu .mm-collapse a{color:var(--spa-cream)}
.container-header .mod-menu .mod-menu__sub a,
.container-header .mod-menu .mm-collapse a{display:block;padding:.55rem 1rem;text-decoration:none}
.container-header .mod-menu .mod-menu__sub a:hover,
.container-header .mod-menu .mm-collapse a:hover{color:var(--spa-gold-light);background:rgba(255,255,255,.05);text-decoration:none}

/* Mobile toggler + search */
.container-header .navbar-toggler{color:var(--spa-cream);border-color:rgba(246,241,231,.45)}
.container-header .navbar-toggler:hover{border-color:var(--spa-gold-light);color:var(--spa-gold-light)}
.container-header .container-search .form-control,
.container-header .mod-finder input[type="search"],
.container-header .mod-finder input[type="text"]{
  background:rgba(255,255,255,.08);border:1px solid rgba(246,241,231,.28);color:var(--spa-cream);
}
.container-header .mod-finder input::placeholder{color:rgba(246,241,231,.6)}
.container-header .mod-finder .awesomplete>ul{background:#fff}

/* ---- Footer (dark) ----------------------------------------------------- */
.footer{
  background-color:var(--spa-deep-2);background-image:none;
  border-top:3px solid var(--spa-gold);margin-top:3rem;
}
.footer a:not(.btn),.footer .btn-link{color:var(--spa-gold-light)}
.footer a:not(.btn):hover,.footer a:not(.btn):focus{color:#fff}
.footer .metismenu.mod-menu .mm-collapse{background:var(--spa-deep-2)}

/* ---- Buttons ----------------------------------------------------------- */
.btn-primary{
  --bs-btn-bg:var(--spa-teal);--btn-bg:var(--spa-teal);--bs-btn-border-color:var(--spa-teal);--btn-border-color:var(--spa-teal);--bs-btn-color:#fff;--btn-color:#fff;
  --bs-btn-hover-bg:var(--spa-deep);--btn-hover-bg:var(--spa-deep);--bs-btn-hover-border-color:var(--spa-deep);--btn-hover-border-color:var(--spa-deep);--bs-btn-hover-color:#fff;--btn-hover-color:#fff;
  --bs-btn-active-bg:var(--spa-deep-2);--btn-active-bg:var(--spa-deep-2);--bs-btn-active-border-color:var(--spa-deep-2);--btn-active-border-color:var(--spa-deep-2);
  background-color:var(--spa-teal);border-color:var(--spa-teal);color:#fff;
}
.btn-primary:hover,.btn-primary:focus{background-color:var(--spa-deep);border-color:var(--spa-deep);color:#fff}
.btn-outline-primary{
  --bs-btn-color:var(--spa-teal);--btn-color:var(--spa-teal);--bs-btn-border-color:var(--spa-teal);--btn-border-color:var(--spa-teal);
  --bs-btn-hover-bg:var(--spa-teal);--btn-hover-bg:var(--spa-teal);--bs-btn-hover-border-color:var(--spa-teal);--btn-hover-border-color:var(--spa-teal);--bs-btn-hover-color:#fff;--btn-hover-color:#fff;
  --bs-btn-active-bg:var(--spa-deep);--btn-active-bg:var(--spa-deep);--bs-btn-active-border-color:var(--spa-deep);--btn-active-border-color:var(--spa-deep);
}
/* Affiliate "Book now" call-to-action — gold */
.btn-cta,.btn-warning{
  --bs-btn-color:var(--spa-deep);--btn-color:var(--spa-deep);
  background-color:var(--spa-gold-light);border-color:var(--spa-gold-light);
  color:var(--spa-deep);font-weight:700;letter-spacing:.02em;
}
.btn-cta:hover,.btn-cta:focus,.btn-warning:hover,.btn-warning:focus{
  background-color:var(--spa-gold-hover);border-color:var(--spa-gold-hover);color:var(--spa-deep);
}
/* Inside dark zones the primary button flips to gold for contrast */
.spa-dark .btn-primary,.spa-band .btn-primary,.footer .btn-primary,.container-header .btn-primary{
  background-color:var(--spa-gold-light);border-color:var(--spa-gold-light);color:var(--spa-deep);
}
.spa-dark .btn-primary:hover,.spa-band .btn-primary:hover,
.footer .btn-primary:hover,.container-header .btn-primary:hover{background-color:#fff;border-color:#fff;color:var(--spa-deep)}
.spa-dark .btn-outline-primary,.spa-band .btn-outline-primary{
  --bs-btn-color:var(--spa-gold-light);--btn-color:var(--spa-gold-light);--bs-btn-border-color:var(--spa-gold-light);--btn-border-color:var(--spa-gold-light);
  --bs-btn-hover-bg:var(--spa-gold-light);--btn-hover-bg:var(--spa-gold-light);--bs-btn-hover-color:var(--spa-deep);--btn-hover-color:var(--spa-deep);--bs-btn-hover-border-color:var(--spa-gold-light);--btn-hover-border-color:var(--spa-gold-light);
  --bs-btn-active-bg:var(--spa-gold-hover);--btn-active-bg:var(--spa-gold-hover);--bs-btn-active-color:var(--spa-deep);--btn-active-color:var(--spa-deep);--bs-btn-active-border-color:var(--spa-gold-hover);--btn-active-border-color:var(--spa-gold-hover);
}

/* ---- Cards / module chrome (module class suffix: " spa-dark" for dark card) */
.card{
  --bs-card-bg:#fff;--card-bg:#fff;--bs-card-border-color:var(--spa-line);--card-border-color:var(--spa-line);
  --bs-card-border-radius:var(--spa-radius);--card-border-radius:var(--spa-radius);--bs-card-inner-border-radius:calc(var(--spa-radius) - 1px);--card-inner-border-radius:calc(var(--spa-radius) - 1px);
  --bs-card-cap-bg:var(--spa-cream);--card-cap-bg:var(--spa-cream);--bs-card-cap-color:var(--spa-deep);--card-cap-color:var(--spa-deep);
  box-shadow:var(--spa-shadow);overflow:hidden;
}
.card-header{font-family:var(--cassiopeia-font-family-headings);font-size:1.15rem;color:var(--spa-deep);
  border-bottom:1px solid var(--spa-line)}
.card.spa-dark{
  --bs-card-bg:var(--spa-deep);--card-bg:var(--spa-deep);--bs-card-color:var(--spa-cream);--card-color:var(--spa-cream);
  --bs-card-border-color:rgba(var(--spa-gold-light-rgb),.35);--card-border-color:rgba(var(--spa-gold-light-rgb),.35);--bs-card-cap-bg:var(--spa-deep-2);--card-cap-bg:var(--spa-deep-2);--bs-card-cap-color:var(--spa-gold-light);--card-cap-color:var(--spa-gold-light);
}
.card.spa-dark .card-header{color:var(--spa-gold-light);border-bottom-color:rgba(var(--spa-gold-light-rgb),.35)}

/* ---- Articles / blog lists --------------------------------------------- */
.blog-item,.com-content-category-blog__item .blog-item{
  background:#fff;border:1px solid var(--spa-line);border-radius:var(--spa-radius);
  padding:1.25rem;margin-bottom:1.25rem;box-shadow:var(--spa-shadow);
}
.blog-item .item-image img,.com-content-article .item-image img{border-radius:calc(var(--spa-radius) - .25rem)}
.article-info,.article-info .article-info-term{color:var(--spa-muted);font-size:.875rem}
.com-content-article__body table,.com-content-article table.table{margin-block:1.5rem}
.com-content-article blockquote{border-left:3px solid var(--spa-gold);padding:.25rem 1rem;color:var(--spa-muted)}

/* ---- Breadcrumbs, pagination, tabs ------------------------------------- */
.breadcrumb{--bs-breadcrumb-divider-color:var(--spa-gold-text);--breadcrumb-divider-color:var(--spa-gold-text);--bs-breadcrumb-item-active-color:var(--spa-muted);--breadcrumb-item-active-color:var(--spa-muted);
  background:transparent;font-size:.875rem;padding-inline:0}
.pagination{--bs-pagination-color:var(--spa-teal);--pagination-color:var(--spa-teal);--bs-pagination-hover-color:var(--spa-deep);--pagination-hover-color:var(--spa-deep);
  --bs-pagination-active-bg:var(--spa-teal);--pagination-active-bg:var(--spa-teal);--bs-pagination-active-border-color:var(--spa-teal);--pagination-active-border-color:var(--spa-teal);
  --bs-pagination-focus-color:var(--spa-deep);--pagination-focus-color:var(--spa-deep)}
.pagination .page-item.active .page-link{background-color:var(--spa-teal);border-color:var(--spa-teal);color:#fff}
.nav-tabs .nav-link.active,.nav-tabs .nav-item.show .nav-link{color:var(--spa-deep);border-bottom-color:var(--spa-gold)}

/* ---- Forms ------------------------------------------------------------- */
.form-control:focus,.form-select:focus{
  border-color:var(--spa-teal);box-shadow:0 0 0 .2rem rgba(var(--spa-teal-rgb),.2);
}
.form-check-input:checked{background-color:var(--spa-teal);border-color:var(--spa-teal)}
.form-check-input:focus{border-color:var(--spa-teal);box-shadow:0 0 0 .2rem rgba(var(--spa-teal-rgb),.2)}
.spa-dark .form-control,.spa-band .form-control,.footer .form-control{
  background:rgba(255,255,255,.08);border-color:rgba(246,241,231,.3);color:var(--spa-cream);
}

/* ---- Back to top -------------------------------------------------------- */
.back-to-top-link{background-color:var(--spa-deep);color:var(--spa-gold-light);border:1px solid var(--spa-gold)}
.back-to-top-link:hover,.back-to-top-link:focus{background-color:var(--spa-teal);color:#fff}

/* ==========================================================================
   Utilities for content editors (Custom module / article HTML / suffixes)
   ========================================================================== */
.bg-spa-deep{background-color:var(--spa-deep)!important;color:var(--spa-cream)}
.bg-spa-cream{background-color:var(--spa-cream)!important}
.bg-spa-paper{background-color:var(--spa-paper)!important}
.text-spa-deep{color:var(--spa-deep)!important}
.text-spa-teal{color:var(--spa-teal)!important}
.text-spa-gold{color:var(--spa-gold-text)!important}            /* AA on light backgrounds */
.text-spa-gold-light{color:var(--spa-gold-light)!important}      /* for dark backgrounds   */
.border-spa-gold{border-color:var(--spa-gold)!important}

/* Dark content band — put a Custom module with suffix " spa-band" in
   banner / top-a / bottom-a. In `banner` (full-width) it spans the page. */
.spa-band{background:var(--spa-deep);padding:2.5rem 1.5rem;border-radius:var(--spa-radius)}
.container-banner .spa-band{border-radius:0;padding-block:4rem}
.spa-band h1,.spa-band h2,.spa-band h3{color:var(--spa-cream)}
.spa-eyebrow{display:inline-block;margin-bottom:.5rem;font-size:.78rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--spa-gold-text)}
.spa-dark .spa-eyebrow,.spa-band .spa-eyebrow{color:var(--spa-gold-light)}
.spa-rule{width:3rem;height:3px;border:0;border-radius:2px;background:var(--spa-gold);opacity:1;margin:1rem 0}

@media (max-width:575.98px){
  .container-header .brand-logo img,.container-header .navbar-brand img{max-height:40px}
  .spa-band{padding:2rem 1rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ==========================================================================
   Content blocks — home page & landing pages
   Used by the paste-ready HTML in sites/<site>/home/home-blocks.html
   ========================================================================== */
.spa-prose{max-width:46rem}
.spa-prose h2{margin:2.25rem 0 .75rem}
.spa-prose h3{margin:1.5rem 0 .5rem;font-size:1.2rem}
.spa-prose p,.spa-prose li{line-height:1.75}
.spa-prose ul,.spa-prose ol{padding-left:1.25rem}
.spa-prose a{font-weight:700}
.spa-section-title{margin:2.75rem 0 1rem}
.com-content-article__body>.spa-section-title:first-child{margin-top:0}
.spa-section-title::after{content:"";display:block;width:3rem;height:3px;margin-top:.7rem;background:var(--spa-gold);border-radius:2px}

/* Trust strip */
.spa-trust{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem 1.5rem;margin:0;padding:1rem 1.25rem;list-style:none;
  background:#fff;border:1px solid var(--spa-line);border-radius:var(--spa-radius);box-shadow:var(--spa-shadow);
}
.spa-trust li{display:flex;align-items:center;gap:.75rem;font-size:.88rem;line-height:1.35;color:var(--spa-muted)}
.spa-trust svg{flex:none;width:1.7rem;height:1.7rem;color:var(--spa-teal)}
.spa-trust strong{display:block;font-size:.95rem;color:var(--spa-deep)}
@media (max-width:991.98px){.spa-trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575.98px){.spa-trust{grid-template-columns:1fr}}

/* How it works */
.spa-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;counter-reset:step;list-style:none;padding:0;margin:1.25rem 0}
.spa-steps li{
  position:relative;counter-increment:step;padding:1.2rem 1.2rem 1.2rem 4rem;
  background:#fff;border:1px solid var(--spa-line);border-radius:var(--spa-radius);color:var(--spa-muted);line-height:1.55;
}
.spa-steps li::before{
  content:counter(step);position:absolute;left:1.1rem;top:1.1rem;display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;
  font-family:var(--cassiopeia-font-family-headings);background:var(--spa-deep);color:var(--spa-gold-light);
}
.spa-steps strong{display:block;margin-bottom:.15rem;font-family:var(--cassiopeia-font-family-headings);font-weight:400;font-size:1.12rem;color:var(--spa-deep)}
@media (max-width:767.98px){.spa-steps{grid-template-columns:1fr}}

/* Price guide table */
.spa-table-wrap{overflow-x:auto;margin:1.25rem 0;background:#fff;border:1px solid var(--spa-line);border-radius:var(--spa-radius)}
.spa-table{width:100%;margin:0;border-collapse:collapse;font-size:.95rem}
.spa-table caption{caption-side:bottom;padding:.65rem 1rem;font-size:.8rem;color:var(--spa-muted);text-align:left}
.spa-table th,.spa-table td{padding:.75rem 1rem;border-bottom:1px solid var(--spa-line);text-align:left;vertical-align:top}
.spa-table thead th{background:var(--spa-cream);color:var(--spa-deep);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--spa-gold)}
.spa-table tbody tr:last-child td{border-bottom:0}
.spa-table td:nth-child(2){white-space:nowrap;font-weight:700;color:var(--spa-deep)}

/* FAQ (native <details>, no JavaScript) */
.spa-faq{margin:1.25rem 0}
.spa-faq details{margin-bottom:.6rem;background:#fff;border:1px solid var(--spa-line);border-radius:.6rem}
.spa-faq summary{position:relative;cursor:pointer;list-style:none;padding:.9rem 2.75rem .9rem 1.1rem;font-weight:700;color:var(--spa-deep)}
.spa-faq summary::-webkit-details-marker{display:none}
.spa-faq summary::after{
  content:"";position:absolute;right:1.2rem;top:1.15rem;width:.55rem;height:.55rem;
  border-right:2px solid var(--spa-gold);border-bottom:2px solid var(--spa-gold);transform:rotate(45deg);transition:transform .18s ease,top .18s ease;
}
.spa-faq details[open] summary{border-bottom:1px solid var(--spa-line)}
.spa-faq details[open] summary::after{top:1.4rem;transform:rotate(-135deg)}
.spa-faq summary:focus-visible{outline:2px solid var(--spa-teal);outline-offset:2px;border-radius:.6rem}
.spa-faq details>div{padding:.9rem 1.1rem 1.1rem;line-height:1.7}
.spa-faq details>div p:last-child{margin-bottom:0}

/* Call-to-action band + small print */
.spa-cta{text-align:center;padding:3rem 1.5rem}
.spa-cta h2{margin-bottom:.5rem}
.spa-cta p{max-width:34rem;margin:0 auto 1.5rem;color:var(--spa-fg-muted,var(--spa-muted))}
.spa-cta .btn{margin:.25rem}
.spa-note{font-size:.82rem;line-height:1.5;color:var(--spa-muted)}
.spa-band .spa-note,.spa-dark .spa-note,.footer .spa-note{color:var(--spa-fg-muted)}
.spa-sisters{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;margin:.6rem 0 0;padding:0;list-style:none}
@media (prefers-reduced-motion:reduce){.spa-faq summary::after{transition:none}}


/* Header styling */
@media (min-width: 992px) {
 .container-header .container-nav nav {
    margin-left: auto;
    margin-right: auto;
 }
}
.container-header .container-nav nav {
    margin-top: 5px;
}

/* Offcanvas menu styling */
.offcanvas {
    background-color: var(--cassiopeia-color-primary);
}
@media (max-width: 991.98px) {
    .offcanvas {
        max-width: 80%;
   }
}