/* Site-wide look, loaded last on every front-end page (inc/avesta-site.php).
   1. One continuous gradient behind every page (the treatment-page one), no band of colour from one section to the next.
   2. One FAQ design everywhere: centred heading, single column of separate cards, + / - marker (the /location/ design).
   px only (the root font size is 62.5%). */

/* ============ 1. canvas ============ */
body #brx-content {
  background: repeating-linear-gradient(180deg, #fbfcfe 0px, #d1e1f0 900px, #fbfcfe 1800px) !important;
  background-attachment: local;
}
/* the older per-page body gradients are replaced by the canvas above */
body[class] { background-image: none !important; }

/* no full-width coloured band behind a section (add class avesta-keep-bg to a section to opt out) */
body #brx-content > section:not(.avesta-keep-bg),
body #brx-content > .brxe-template > section:not(.avesta-keep-bg) {
  background: none !important;
}

/* location page: "Inside our clinic" stays dark, but as a contained rounded panel instead of a full-width band */
body .avesta-lp.avesta-lp__inside { color: inherit; overflow: visible; }
body .avesta-lp.avesta-lp__inside::before { display: none !important; }
body .avesta-lp.avesta-lp__inside > .avesta-lp__wrap.brxe-container {
  position: relative;
  overflow: hidden;
  background: var(--lp-ultra-dark, #0a2229);
  color: #fff;
  border-radius: var(--av-radius-banner, 24px);
  width: calc(100% - 2 * var(--lp-gutter, 24px));
  max-width: calc(var(--lp-max, 1240px) - 2 * var(--lp-gutter, 24px));
  margin-inline: auto;
  padding: clamp(28px, 5vw, 64px) clamp(22px, 4vw, 56px);
}
body .avesta-lp.avesta-lp__inside > .avesta-lp__wrap.brxe-container::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(50, 163, 195, .28), transparent 65%);
  pointer-events: none;
}

/* blog / news article: the closing call-to-action is a contained dark band, not a full-width one */
body .avesta-post__bottomcta-grid {
  background: linear-gradient(135deg, var(--primary-dark, #1a5565) 0%, var(--primary-ultra-dark, #0a2229) 100%);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 44px);
}

/* ============ 2. FAQ ============ */
/* 2a. every FAQ is <details> (location, pricing, contact, home, treatment, condition, article; also FAQs turned into cards by avesta-pages.js) */
.avesta-la__faq, .avesta-faq, .avesta-lp__faq-list, .avesta-home__faq-list {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
  text-align: left;
}
.avesta-la__qa, .avesta-faq details, .avesta-lp__faq-list details, .avesta-home__faq-list details {
  background: #fff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(10, 34, 41, .06);
  overflow: hidden;
}
.avesta-la__qa summary, .avesta-faq details summary, .avesta-lp__faq-list details summary, .avesta-home__faq-list details summary {
  display: block;
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 18px 56px 18px 22px;
  font: 800 17.5px/1.4 'Karla', system-ui, sans-serif;
  color: #0c1a27;
  background: none;
  border: 0;
}
.avesta-la__qa summary::-webkit-details-marker, .avesta-faq details summary::-webkit-details-marker, .avesta-lp__faq-list details summary::-webkit-details-marker, .avesta-home__faq-list details summary::-webkit-details-marker { display: none; }
.avesta-la__qa summary::after, .avesta-faq details summary::after, .avesta-lp__faq-list details summary::after, .avesta-home__faq-list details summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  width: auto;
  height: auto;
  background: none;
  -webkit-mask: none;
  mask: none;
  transform: translateY(-50%);
  font: 400 24px/1 'Karla', system-ui, sans-serif;
  color: #32a3c3;
}
.avesta-la__qa[open] summary::after, .avesta-faq details[open] summary::after, .avesta-lp__faq-list details[open] summary::after, .avesta-home__faq-list details[open] summary::after { content: "\2212"; transform: translateY(-50%); }
.avesta-la__qa[open] summary, .avesta-faq details[open] summary, .avesta-lp__faq-list details[open] summary, .avesta-home__faq-list details[open] summary { color: #1a5565; }
.avesta-la__qa > div, .avesta-faq details > div, .avesta-lp__faq-list details > div, .avesta-home__faq-list details > div {
  padding: 0 22px 20px;
  font: 400 16.5px/1.7 'Karla', system-ui, sans-serif;
  color: #33485c;
}
.avesta-faq details > div p { margin: 0 0 .8em; }
.avesta-faq details > div p:last-child { margin-bottom: 0; }
.avesta-la__qa > div a, .avesta-faq details > div a, .avesta-lp__faq-list details > div a, .avesta-home__faq-list details > div a { color: #1a5565; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.avesta-la__qa summary:focus-visible, .avesta-faq details summary:focus-visible, .avesta-lp__faq-list details summary:focus-visible, .avesta-home__faq-list details summary:focus-visible { outline: 3px solid #1a5565; outline-offset: -3px; border-radius: 14px; }

/* 2b. answers written as paragraphs (treatment, condition, article) */
.avesta-la__qa > div p { margin: 0 0 .8em; font: inherit; color: inherit; opacity: 1; }
.avesta-la__qa > div p:last-child { margin-bottom: 0; }
.avesta-tx__faq-section .avesta-la__faq, .avesta-cond__content .avesta-la__faq, .avesta-post__faq-wrap .avesta-la__faq { margin-block: 1.5rem; }

/* 2c. centred headings */
.avesta-tx__faq-section .avesta-tx__inner { text-align: center; max-width: 900px !important; }
.avesta-tx__faq-section .avesta-tx__eyebrow, .avesta-tx__faq-section .avesta-tx__section-heading { text-align: center !important; }
.avesta-cond__faq-inner { text-align: center; }
.avesta-cond__faq-inner > .avesta-cond__eyebrow, .avesta-cond__faq-inner > h2.avesta-cond__section-heading, .avesta-cond__faq-inner .avesta-cond__section-heading { text-align: center !important; }
.avesta-cond__faq-inner .avesta-cond__content { text-align: left; }
.avesta-lp .avesta-lp__faq { grid-template-columns: 1fr; gap: clamp(22px, 3vw, 36px); }
.avesta-lp .avesta-lp__faq-head { text-align: center; max-width: 720px; margin-inline: auto; }
.avesta-lp .avesta-lp__faq-head .avesta-lp__lead { margin-inline: auto; }
.avesta-home__faq-section .avesta-home__head { text-align: center; }
.avesta-home__faq-section .avesta-home__lead, .avesta-home__faq-section .avesta-home__h2 { margin-inline: auto; }

/* 2d. FAQ pulled out of a page's text into its own centred section (avesta-pages.js) */
.avesta-lp.avesta-faq-sec { padding-block: clamp(36px, 5vw, 72px) clamp(44px, 6vw, 84px) !important; scroll-margin-top: 90px; }

@media (max-width: 640px) {
  .avesta-la__qa summary, .avesta-faq details summary, .avesta-lp__faq-list details summary, .avesta-home__faq-list details summary { font-size: 16.5px; padding: 16px 50px 16px 18px; }
  .avesta-la__qa > div, .avesta-faq details > div, .avesta-lp__faq-list details > div, .avesta-home__faq-list details > div { padding: 0 18px 18px; }
}

/* 2e. the lp FAQ (location, pricing, contact) already has stronger rules: match the shared design */
.avesta-lp .avesta-lp__qa { border-radius: 14px; box-shadow: 0 8px 24px rgba(10, 34, 41, .06); }
.avesta-lp .avesta-lp__qa summary { display: block; position: relative; padding: 18px 56px 18px 22px; font: 800 17.5px/1.4 'Karla', system-ui, sans-serif; color: #0c1a27; }
.avesta-lp .avesta-lp__qa summary::after { content: "+"; position: absolute; right: 22px; top: 50%; width: auto; height: auto; border: 0; margin: 0; transform: translateY(-50%); font: 400 24px/1 'Karla', system-ui, sans-serif; color: #32a3c3; }
.avesta-lp .avesta-lp__qa[open] summary::after { content: "\2212"; margin: 0; transform: translateY(-50%); }
.avesta-lp .avesta-lp__qa[open] summary { color: #1a5565; }
.avesta-lp .avesta-lp__qa div { padding: 0 22px 20px; font: 400 16.5px/1.7 'Karla', system-ui, sans-serif; color: #33485c; }
@media (max-width: 640px) {
  .avesta-lp .avesta-lp__qa summary { font-size: 16.5px; padding: 16px 50px 16px 18px; }
  .avesta-lp .avesta-lp__qa div { padding: 0 18px 18px; }
}

/* 2f. the lists fill their column (up to 860px) even when a Bricks code wrapper would shrink them */
.avesta-la__faq, .avesta-faq, .avesta-lp__faq-list, .avesta-home__faq-list { width: 100%; box-sizing: border-box; }
.brxe-code:has(> .avesta-la__faq), .brxe-code:has(> .avesta-home__faq-list) { display: block; width: 100%; }
.avesta-lp .avesta-lp__faq-list { margin-inline: auto; }

/* wide tables inside articles scroll in their own box instead of widening the page on phones */
.avesta-post__content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- heading outline: keep the look of headings whose tag was corrected (inc/avesta-a11y.php) ----------
   avesta-hv-N = the heading used to be an hN. The font-size follows the original level; margins/line-height/weight come from the new tag. */
:where(#brx-content) .avesta-hv-1 { font-size: var(--h1); }
:where(#brx-content) .avesta-hv-3 { font-size: var(--h3); }
:where(#brx-content) .avesta-hv-4 { font-size: var(--h4); }
:where(#brx-content) .avesta-hv-5 { font-size: var(--h5); }
:where(#brx-content) .avesta-hv-6 { font-size: var(--h6); }
:where(#brx-content) p.avesta-hv-lbl { font-family: "Gentium Plus"; font-size: var(--h4); font-weight: 700; line-height: 1.2; margin: 1.2em 0 0; color: var(--text-dark, #0c1a27); }
/* the automatic archive cards (a Posts element with no template): title is an h2 now, sized like the old h3 */
body.archive .brxe-posts .content-wrapper h2.dynamic { font-size: var(--h3); }

/* ============ 3. Cards: one radius scale and two shadows ============
   Tokens: card 14px (content cards, tiles), panel 18px (large blocks, media, form/map), banner 24px (hero/CTA bands).
   Shadows: --av-shadow-card (resting), --av-shadow-raised (floating stat bars, media, banners), --av-shadow-hover (cards that lift on hover).
   :not(#av) only lifts the specificity so these win over the older per-component rules without !important.
   To change the whole site's card look, edit the tokens below. */
:root {
  --av-radius-card: 14px;
  --av-radius-panel: 18px;
  --av-radius-banner: 24px;
  --av-shadow-card: 0 8px 24px rgba(10, 34, 41, .06);
  --av-shadow-raised: 0 20px 48px rgba(10, 34, 41, .14);
  --av-shadow-hover: 0 12px 32px rgba(10, 34, 41, .12);
}
.avesta-loc__card:not(#av),
.avesta-lp__ins:not(#av),
.avesta-lp__step:not(#av),
.avesta-ct__clinic:not(#av),
.avesta-la__tile:not(#av),
.avesta-cond__mech-card:not(#av),
.avesta-cond__tcard:not(#av),
.avesta-cond__ins-card:not(#av),
.avesta-cond__measured-tile:not(#av),
.avesta-cond__tried-box:not(#av),
.avesta-cond__candidacy-col:not(#av),
.avesta-cond__quick-answer:not(#av),
.avesta-cond__other-conditions:not(#av),
.avesta-cond__safety:not(#av),
.avesta-cond__cta-card:not(#av),
.avesta-tx__candidacy-col:not(#av),
.avesta-tx__schedule-card:not(#av),
.avesta-tx__quick-answer:not(#av),
.avesta-tx__risks-box:not(#av),
.avesta-tx__table-wrap:not(#av),
.avesta-ab__leader:not(#av),
.avesta-ab__promise:not(#av),
.avesta-pr__payer:not(#av),
.avesta-e4__post:not(#av),
.avesta-e4__link:not(#av),
.avesta-post__keepreading-card:not(#av),
.avesta-post__quick-answer:not(#av),
.avesta-post__table-wrap:not(#av),
.avesta-post__author-section:not(#av),
.avesta-post__toc:not(#av),
.avesta-post__cta-card:not(#av),
.avesta-sp__toc:not(#av),
.avesta-sp__clinic:not(#av),
.avesta-sp__card:not(#av),
.avesta-sp__table:not(#av),
.avesta-payer-table-wrap:not(#av),
.avesta-home__news:not(#av),
.avesta-home__story-quote:not(#av) { border-radius: var(--av-radius-card); }
.avesta-la__card:not(#av),
.avesta-la__panel:not(#av),
.avesta-sp__main:not(#av),
.avesta-sp__others:not(#av),
.avesta-pr__panel:not(#av),
.avesta-pr__quick:not(#av),
.avesta-pr__table-block:not(#av),
.avesta-pr__vet:not(#av),
.avesta-pr__refs:not(#av),
.avesta-tp__bio-card:not(#av),
.avesta-tp__glance:not(#av),
.avesta-lp__panel:not(#av),
.avesta-lp__glance-grid:not(#av),
.avesta-lp__stats:not(#av),
.avesta-lp__map:not(#av),
.avesta-ct__privacy:not(#av),
.avesta-ct__map:not(#av),
.avesta-ct__form-card:not(#av),
.avesta-tx__hero-media:not(#av),
.avesta-tx__hero-stats:not(#av),
.avesta-tx__story-frame:not(#av),
.avesta-tx__expect-media:not(#av),
.avesta-home__compare-wrap:not(#av),
.avesta-home__vet:not(#av),
.avesta-home__story-frame:not(#av) { border-radius: var(--av-radius-panel); }
.avesta-home__clinic-card:not(#av),
.avesta-home__proof-card:not(#av),
.avesta-lp__cta-box:not(#av),
.avesta-ab__mission:not(#av) { border-radius: var(--av-radius-banner); }
.avesta-home__compare-wrap:not(#av),
.avesta-home__vet:not(#av),
.avesta-home__story-quote:not(#av),
.avesta-post__quick-answer:not(#av),
.avesta-post__table-wrap:not(#av),
.avesta-loc__card:not(#av),
.avesta-e4__post:not(#av),
.avesta-post__keepreading-card:not(#av) { box-shadow: var(--av-shadow-card); }
.avesta-lp__stats:not(#av),
.avesta-tx__hero-stats:not(#av),
.avesta-lp__glance-grid:not(#av),
.avesta-home__clinic-card:not(#av),
.avesta-home__proof-card:not(#av),
.avesta-home__story-frame:not(#av),
.avesta-tx__story-frame:not(#av),
.avesta-tx__expect-media:not(#av) { box-shadow: var(--av-shadow-raised); }
.avesta-loc__card:hover:not(#av),
.avesta-e4__post:hover:not(#av),
.avesta-post__keepreading-card:hover:not(#av) { box-shadow: var(--av-shadow-hover); }

/* ============ 4. Type scale: headings and small text ============
   px + clamp on purpose: the site's root font size is 62.5%, so rem values are misleading. Only the main page/section headings are on the scale;
   label-style headings (eyebrows, card titles with their own size) keep their own sizes. To retune the whole site, edit the tokens.
   Phones: H1 30px, H2 26px; everywhere: card/secondary text 15px (was 13-14.5px), body text stays 16px+. :not(#av) only lifts the specificity. */
:root {
  --av-fs-h1: clamp(30px, 2.4vw + 12px, 46px);
  --av-fs-h2: clamp(26px, 1.2vw + 20px, 34px);
  --av-fs-h3: clamp(20px, .4vw + 18px, 24px);
  --av-fs-body: clamp(16px, .25vw + 15px, 18px);
  --av-fs-small: 15px;
}
.avesta-home__title:not(#av),
.avesta-tx__title:not(#av),
.avesta-cond__title:not(#av),
.avesta-lp__h1:not(#av),
.avesta-post__title:not(#av),
.avesta-tp__h1:not(#av) { font-size: var(--av-fs-h1); }
.avesta-home__h2:not(#av),
.avesta-cta__heading:not(#av),
.avesta-tx__section-heading:not(#av),
.avesta-cond__section-heading:not(#av),
.avesta-loc__heading:not(#av),
.avesta-lp__h2:not(#av),
.avesta-post__section-heading:not(#av),
.avesta-post__bottomcta-heading:not(#av),
.avesta-post__content h2:not(.avesta-post__eyebrow):not(.avesta-post__callout-eyebrow):not(#av) { font-size: var(--av-fs-h2); }
@media (max-width: 767px) {
.avesta-home__step p:not(#av),
.avesta-home__facts p:not(#av),
.avesta-tx__help-cell p:not(#av),
.avesta-cond__mech-card p:not(#av),
.avesta-cond__ins-card p:not(#av),
.avesta-cond__tcard p:not(#av),
.avesta-post__keepreading-excerpt:not(#av),
.avesta-tx__schedule-card p:not(#av),
.avesta-cond__section-sub:not(#av),
.avesta-home__vet-text:not(#av),
.avesta-tx__quick-answer p:not(#av) { font-size: var(--av-fs-small); }
}