/* ==========================================================
   LUCERN CLINIC – DESIGN TOKENS (with CSS Nesting)
   ========================================================== */

/* --------------------------------------------------
   1. Color Palette & Typography Tokens
   -------------------------------------------------- */
:root {
  /* ==================================================
     1. Colors
     ================================================== */

  /* Primary Brand */
  --clr-primary-500: #BAAE92;
  /* Gold / Beige */
  --clr-primary-600: #A89B7D;
  --clr-primary-700: #8C7F63;
  /* DUPLICATE from Adobe: ---baae92: #BAAE92; */

  /* Accent */
  --clr-accent-500: #FFBE98;
  /* Peach */
  --clr-accent-600: #F5A97F;
  --clr-danger-500: #FF0093;
  /* Pink */
  /* DUPLICATE from Adobe: --unnamed-color-ffbe98: #FFBE98; */
  /* DUPLICATE from Adobe: --unnamed-color-ff0093: #FF0093; */

  /* Neutrals */
  --clr-neutral-000: #FFFFFF;
  --clr-neutral-050: #FAFAFA;
  --clr-neutral-100: #F4F4F4;
  --clr-neutral-200: #E6E0CE;
  --clr-neutral-400: #B4B4B4;
  --clr-neutral-600: #555756;
  --clr-neutral-800: #2D2D2D;
  --clr-neutral-900: #243D58;
  /* Dark blue-gray */
  /* DUPLICATE from Adobe: ---ffffff: #FFFFFF; */
  /* DUPLICATE from Adobe: --unnamed-color-fafafa: #FAFAFA; */
  /* DUPLICATE from Adobe: --unnamed-color-e6e0ce: #E6E0CE; */
  /* DUPLICATE from Adobe: ---b4b4b4: #B4B4B4; */
  /* DUPLICATE from Adobe: --unnamed-color-555756: #555756; */
  /* DUPLICATE from Adobe: ---2d2d2d: #2D2D2D; */
  /* DUPLICATE from Adobe: --unnamed-color-243d58: #243D58; */

  /* NEW from Adobe (not in your original) */
  --clr-neutral-warm: #FAF6F0;
  /* from Adobe: --unnamed-color-faf6f0 */
  --clr-neutral-100-transparent: #F4F4F400;
  /* from Adobe: --unnamed-color-f4f4f400 */

  /* --------------------------------------------------
     2. Typography
     -------------------------------------------------- */

  /* Text */
  --clr-text-primary: var(--clr-neutral-800);
  --clr-text-secondary: var(--clr-neutral-600);
  --clr-text-light: var(--clr-neutral-000);

  /* Font Families */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  /* DUPLICATE from Adobe: --unnamed-font-family-montserrat: Montserrat; */
  /* DUPLICATE from Adobe: --unnamed-font-family-open-sans: Open Sans; */

  /* Font Sizes */
  --fs-xs: 0.625rem;
  /* 10px */
  --fs-sm: 0.8125rem;
  /* 13px */
  --fs-normal: 1rem;
  /* 16px */
  --fs-base: 1.125rem;
  /* 18px */
  --fs-lg: 1.25rem;
  /* 20px */
  --fs-xl: 2.5625rem;
  /* 41px */
  /* DUPLICATE from Adobe: --unnamed-font-size-10: 10px; */
  /* DUPLICATE from Adobe: --unnamed-font-size-13: 13px; */
  /* DUPLICATE from Adobe: --unnamed-font-size-18: 18px; */
  /* DUPLICATE from Adobe: --unnamed-font-size-20: 20px; */
  /* DUPLICATE from Adobe: --unnamed-font-size-41: 41px; */

  /* Font Weights */
  --fw-extra-light: 100;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* DUPLICATE from Adobe: --unnamed-font-weight-normal: normal; */
  /* DUPLICATE from Adobe: --unnamed-font-weight-medium: medium; */

  /* Font Style */
  --font-style-normal: normal;
  /* DUPLICATE from Adobe: --unnamed-font-style-normal: normal; */

  /* Line Heights */
  --lh-none: 1;
  --lh-tight: 1.2;
  --lh-normal: 1.4;
  --lh-loose: 1.8;

  /* NEW from Adobe - Specific line heights in px */
  --lh-18: 18px;
  /* from Adobe: --unnamed-line-spacing-18 */
  --lh-19: 19px;
  /* from Adobe: --unnamed-line-spacing-19 */
  --lh-24: 24px;
  /* from Adobe: --unnamed-line-spacing-24 */
  --lh-32: 32px;
  /* from Adobe: --unnamed-line-spacing-32 */
  --lh-41: 41px;
  /* from Adobe: --unnamed-line-spacing-41 */

  /* Letter Spacing */
  --ls-normal: 0;
  --ls-wide: 0.05em;
  /* DUPLICATE from Adobe: --unnamed-character-spacing-0: 0px; */

  /* Text Transform */
  --text-uppercase: uppercase;
  /* DUPLICATE from Adobe: --unnamed-text-transform-uppercase: uppercase; */

  /* --------------------------------------------------
     3. Layout
     -------------------------------------------------- */

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Spacing */
  --flow-spacer: 1.5rem;
}


/* ==================================================
   Character Styles (from Adobe)
   Updated to use your variable naming convention
   ================================================== */


.ui-kit {
  font-family: var(--font-heading);
  font-style: var(--font-style-normal);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  line-height: var(--lh-18);
  letter-spacing: var(--ls-normal);
  color: var(--clr-danger-500);
}

/* --------------------------------------------------
   3. Global Typography Reset
   -------------------------------------------------- */
html {
  font-size: 100%;
  /* 16px base */
  line-height: 1.5;
  word-break: break-word;
  scroll-behavior: smooth;

  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }

    /* allow size interpolation */
    interpolate-size: allow-keywords;
  }

  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
  }
}

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

body {
  margin: 0;
  zoom: 0.95;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--clr-text-primary);
  background-color: var(--clr-neutral-000);

  @media (max-width: 981px) {
    font-size: var(--fs-normal);
    line-height: var(--lh-tight);
  }
}

pre {
  white-space: pre-wrap;
}

b,
strong {
  font-weight: 600;
}

/* Links inside paragraphs inherit parent font */
p a {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  margin: 0;
}

/* Headings that should be uppercase */
h1,
h2,
.h1,
.h2 {
  text-transform: uppercase;
}

/* Lists (with nested list padding)
   Hanging indent: bullets sit outside the text block so wrapped lines
   align with the text rather than running under the bullet. */
ul,
ol,
dl {
  margin: 0;
  padding-left: 1.1em;
  list-style-position: outside;

  ul,
  ol,
  dl {
    padding-inline-start: 2ch;
  }
}

/* Form elements */
input,
select,
textarea,
button {
  font: inherit;
}

label {
  display: block;
}

input:not(:where([type="submit"],
    [type="checkbox"],
    [type="radio"],
    [type="button"],
    [type="reset"])) {
  inline-size: 100%;
}

button,
input:where([type="submit"], [type="reset"], [type="button"]) {
  background: CanvasText;
  color: Canvas;
  border: 1px solid transparent;
}

textarea {
  field-sizing: content;
  min-block-size: 5lh;
  inline-size: 100%;
  max-inline-size: 100%;
}

/* Tables */
table {
  caption-side: bottom;
  border-collapse: collapse;

  td {
    font-size: 90%;
  }

  td,
  th {
    word-break: normal;
    border: 1px solid gray;
    padding: 0.5rem;
  }
}

[role="region"][aria-labelledby][tabindex] {
  overflow: auto;
}

caption {
  font-size: 90%;
}

/* --------------------------------------------------
   4. Headings & Text Styles
   -------------------------------------------------- */
.h1,
h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-normal);
  color: var(--clr-text-primary);
  text-transform: uppercase;
  margin-bottom: var(--size-11);
  padding: 1rem 0;
  position: relative;

  &::after,
  &::before {
    content: "";
    width: 57px;
    height: 5px;
    position: absolute;
    left: 0;
    background: var(--clr-text-primary);
  }

  &::after {
    top: 0;
  }

  &::before {
    bottom: 0;
  }

  @media (max-width: 981px) {
    font-size: 24px;
    line-height: var(--lh-tight);
    margin-bottom: var(--size-9);

    &::after,
    &::before {
      width: 34px;
      height: 5px;
    }
  }
}

/* When a .h1 (or h1) is also center-aligned, drop the left-anchored decorative
   bars — they look wrong when the text is centered. Catches both
   `<h1 class="h1 text-center">` and `<h2 class="h1 text-center">`. */
.h1.text-center::before,
.h1.text-center::after,
h1.text-center::before,
h1.text-center::after {
  content: none;
}

.h2,
h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--clr-text-primary);
  margin-bottom: var(--size-11);
  padding: 1rem 0;
  position: relative;

  /* share the same bars as h1 */
  &::after,
  &::before {
    content: "";
    width: 57px;
    height: 5px;
    position: absolute;
    left: 0;
    background: var(--clr-text-primary);
  }

  &::after {
    top: 0;
  }

  &::before {
    bottom: 0;
  }

  @media (max-width: 981px) {
    font: normal normal 500 25px/25px 'Montserrat', sans-serif !important;
    margin-bottom: var(--size-9);

    &::after,
    &::before {
      width: 34px;
      height: 5px;
    }
  }
}

/* When an h2 is styled as h1 (class="h1" on an <h2>), the h2 mobile rule
   above wins due to its !important + later source order. This override forces
   the h1 mobile size (24px) for that case. */
@media (max-width: 981px) {
  h2.h1 {
    font-size: 24px !important;
  }
}

.lead-text {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: calc(var(--fs-sm) * 2);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--clr-text-primary);
  margin-bottom: var(--size-8);
  position: relative;


  @media (max-width: 981px) {
    font-size: 22px;
    line-height: 25px;
    margin-bottom: var(--size-6);
  }
}

.lauftext,
p {
  font-family: var(--font-body);
  font-style: var(--font-style-normal);
  font-weight: var(--fw-normal);
  font-size: var(--fs-base);
  line-height: var(--lh-32);
  letter-spacing: var(--ls-normal);
  color: var(--clr-neutral-800);
  margin: 0;

  @media (max-width: 981px) {
    font-size: var(--fs-normal);
    line-height: 25px;
  }
}

.legende,
small,
.caption {
  font-family: var(--font-body);
  font-style: var(--font-style-normal);
  font-weight: var(--fw-normal);
  font-size: var(--fs-sm);
  line-height: var(--lh-19);
  letter-spacing: var(--ls-normal);
  color: var(--clr-neutral-800);
  margin: 0;
}

.ui-kit,
.label,
.tag {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
  color: var(--clr-danger-500);
  text-transform: uppercase;
}


a {
  font-family: var(--font-heading, sans-serif);
  color: var(--clr-neutral-600, #666);
  text-decoration: none;
  display: inline;
  align-items: baseline;
  gap: 6px;
  transition: color .2s;
  font-weight: var(--fw-semibold, 600);
  font-size: 0.75rem;
  line-height: 1.25;
  text-decoration: underline;

  @media (min-width: 1024px) {
    font-size: 1rem;
    line-height: 1.19;
  }
}


.fs-base {
  font-family: var(--fs-base);
  color: var(--clr-neutral-600);
}


.list-style {
  list-style: none;
}

.text-center {
  text-align: center;
}

/* --------------------------------------------------
   5. Utility Classes
   -------------------------------------------------- */
.text-primary {
  color: var(--clr-primary-500);
}

.text-accent {
  color: var(--clr-accent-500);
}

.bg-light {
  background-color: var(--clr-neutral-050);
}

.bg-beige {
  background-color: var(--clr-neutral-200);
}

.m-top--0 {
  margin-top: 0;
}

.m-top--1 {
  margin-top: var(--size-1);
}

.m-top--2 {
  margin-top: var(--size-2);
}

.m-top--3 {
  margin-top: var(--size-3);
}

.m-top--4 {
  margin-top: var(--size-4);
}

.m-top--5 {
  margin-top: var(--size-5);
}

.m-top--6 {
  margin-top: var(--size-6);
}

.m-top--7 {
  margin-top: var(--size-7);
}

.m-top--8 {
  margin-top: var(--size-8);
}

.m-top--9 {
  margin-top: var(--size-9);
}

.m-top--10 {
  margin-top: var(--size-10);
}

.m-top--11 {
  margin-top: var(--size-11);
}

.m-top--12 {
  margin-top: var(--size-12);
}

.m-bottom--0 {
  margin-bottom: 0;
}

.m-bottom--1 {
  margin-bottom: var(--size-1);
}

.m-bottom--2 {
  margin-bottom: var(--size-2);
}

.m-bottom--3 {
  margin-bottom: var(--size-3);
}

.m-bottom--4 {
  margin-bottom: var(--size-4);
}

.m-bottom--5 {
  margin-bottom: var(--size-5);
}

.m-bottom--6 {
  margin-bottom: var(--size-6);
}

.m-bottom--7 {
  margin-bottom: var(--size-7);
}

.m-bottom--8 {
  margin-bottom: var(--size-8);
}

.m-bottom--9 {
  margin-bottom: var(--size-9);
}

.m-bottom--10 {
  margin-bottom: var(--size-10);
}

.m-bottom--11 {
  margin-bottom: var(--size-11);
}

.m-bottom--12 {
  margin-bottom: var(--size-12);
}

.p-top--0 {
  padding-top: 0;
}

.p-top--1 {
  padding-top: var(--size-1);
}

.p-top--2 {
  padding-top: var(--size-2);
}

.p-top--3 {
  padding-top: var(--size-3);
}

.p-top--4 {
  padding-top: var(--size-4);
}

.p-top--5 {
  padding-top: var(--size-5);
}

.p-top--6 {
  padding-top: var(--size-6);
}

.p-top--7 {
  padding-top: var(--size-7);
}

.p-top--8 {
  padding-top: var(--size-8);
}

.p-top--9 {
  padding-top: var(--size-9);
}

.p-top--10 {
  padding-top: var(--size-10);
}

.p-top--11 {
  padding-top: var(--size-11);
}

.p-top--12 {
  padding-top: var(--size-12);
}

.p-bottom--0 {
  padding-bottom: 0;
}

.p-bottom--1 {
  padding-bottom: var(--size-1);
}

.p-bottom--2 {
  padding-bottom: var(--size-2);
}

.p-bottom--3 {
  padding-bottom: var(--size-3);
}

.p-bottom--4 {
  padding-bottom: var(--size-4);
}

.p-bottom--5 {
  padding-bottom: var(--size-5);
}

.p-bottom--6 {
  padding-bottom: var(--size-6);
}

.p-bottom--7 {
  padding-bottom: var(--size-7);
}

.p-bottom--8 {
  padding-bottom: var(--size-8);
}

.p-bottom--9 {
  padding-bottom: var(--size-9);
}

.p-bottom--10 {
  padding-bottom: var(--size-10);
}

.p-bottom--11 {
  padding-bottom: var(--size-11);
}

.p-bottom--12 {
  padding-bottom: var(--size-12);
}

.flow {
  > :where(:not(:first-child)) {
    margin-top: var(--flow-spacer, 1em);
  }
}

.gradient-box {
  background: linear-gradient(135deg,
      #f5f5f0 0%,
      #faf9f6 25%,
      #f8f6f0 50%,
      #f0ebe5 100%);
  border-radius: 24px;
  padding: 48px 40px;
  /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); */
  /* margin: 0 auto; */
}

@media (min-width: 982px) {
  .gradient-box {
    padding: 66px 40px 82px;
  }
}


/* ---- Triangle gradient card (meet on bottom) ---- */
.triangle-card {
  --bg: #fbf7f1;
  --beige-1: #f0ebe5;
  --beige-2: #efe8dd;
  --beige-dark: #e0d6c8;

  position: relative;
  background: var(--bg);
  border-radius: 18px;
  overflow: hidden;
}

/* Mobile: SVG rays background */
@media (max-width: 981px) {
  .triangle-card {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 170'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.906' y1='0.294' x2='0' y2='0.295' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23f4f4f4' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%239b660f' stop-opacity='0.278'/%3E%3C/linearGradient%3E%3ClinearGradient id='linear-gradient-2' x1='0.094' y1='0.294' x2='2.554' y2='2.631' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23baae92' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ddd6c3' stop-opacity='0.8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-6982.114,10289.448-6746.477,10147v142.448Z' transform='translate(7076.477 -10119.448)' opacity='0.369' fill='url(%23linear-gradient)'/%3E%3Cpath d='M-6746.477,10289.448-6982.114,10147v142.448Z' transform='translate(6982 -10119.448)' opacity='0.63' fill='url(%23linear-gradient-2)' style='mix-blend-mode: multiply;isolation: isolate'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
  }
}

/* Desktop: SVG rays background for triangle-card */
@media (min-width: 982px) {
  .triangle-card {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1640 554'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.593' y1='0.092' x2='-1.74' y2='2.588' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23baae92' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ddd6c3' stop-opacity='0.8'/%3E%3C/linearGradient%3E%3ClinearGradient id='linear-gradient-2' x1='0.5' x2='0.5' y2='0.904' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%239b660f' stop-opacity='0.282'/%3E%3Cstop offset='1' stop-color='%23f4f4f4' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath d='M443.19-.1,6.883,790.338,20.808-7.471Z' transform='matrix(-0.017, -1, 1, -0.017, 185.914, 574.675)' opacity='0.627' fill='url(%23linear-gradient)' style='mix-blend-mode: multiply;isolation: isolate'/%3E%3Cg transform='translate(669.744 -20.711)'%3E%3Cpath d='M560.76,936.078,6.76,11.105V936.078Z' transform='translate(0.178 581.471) rotate(-90)' opacity='0.373' fill='url(%23linear-gradient-2)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
  }
}

/* --- Optional: varijante po background klasi --- */
.pattern-beige .triangle-card {
  --bg: #fbf7f1;
  --beige-1: #f0ebe5;
  --beige-2: #efe8dd;
}

.pattern-light .triangle-card {
  --bg: #fefcf9;
  --beige-1: #f5f2ed;
  --beige-2: #f1ede8;
}

.pattern-dark .triangle-card {
  --bg: #2b2a28;
  --beige-1: #3a3937;
  --beige-2: #464541;
}

.footer__signature {
  width: 124px !important;
  height: auto;
}


/* --------------------------------------------------
   6. Responsive Tweaks
   -------------------------------------------------- */
@media (max-width: 981px) {
  a {
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
  }

  h3 {
    font-size: var(--fs-normal);
  }
}

/* --------------------------------------------------
   7. Main Site Content Layout
   -------------------------------------------------- */
body main.site-main {
  display: flex;
  flex-direction: column;
  gap: 127px;
}

@media (max-width: 981px) {
  body main.site-main {
    gap: 72px;
  }

  body.single-korper main.site-main {
    overflow: hidden;
  }
}

/* Section padding reset — gap on main.site-main handles all spacing.
   Padding-block on sections is zeroed out so gap is the sole spacing mechanism.
*/
body main.site-main > section.section:not(.bg-gray),
body main.site-main > .section.section--collapse-top:not(.footer):not(.bg-gray),
.toc-content > .section:not(.bg-gray) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* Mobile: sections inside mobile accordion have 48px padding-bottom */
@media (max-width: 981px) {
  body .mobile-accordion__body-inner > .section {
    padding-bottom: 48px !important;
  }
}

.mobile-accordion__body-inner > .sig-block.section:not(:last-child) {
  margin-bottom: 122px;
}

@media (max-width: 768px) {
  .mobile-accordion__body-inner > .sig-block.section:not(:last-child) {
    margin-bottom: 48px;
    padding-bottom: 0 !important;
  }
}

/* Page 36778: first section padding-top */
.page-id-36778 main > .sig-block.section:first-of-type {
  padding-top: 45px !important;
}

@media (min-width: 65em) {
  .page-id-36778 main > .sig-block.section:first-of-type {
    padding-top: 122px !important;
  }
}

/* Post 36981: first section padding-top */
.postid-36981 main > .sig-block.section:first-of-type {
  padding-top: 45px !important;
}

@media (min-width: 65em) {
  .postid-36981 main > .sig-block.section:first-of-type {
    padding-top: 122px !important;
  }
}

/* single-achsel: remove margin-bottom on patientenstorys section */
.single-achsel:not(.postid-35976) #patientenstorys {
  margin-bottom: 0 !important;
}

/* single-brust: remove margin-bottom on patientenstory h2 */
.single-brust:not(.postid-37202) h2#patientenstory {
  margin-bottom: 0 !important;
}
/* single treatment pages: remove arrow-list margin-bottom */
.single .content-section__arrow-list {
  margin-bottom: 0;
}

/* Page 37163: first section padding-top */
.page-id-37163 main > .sig-block.section:first-of-type {
  padding-top: 45px !important;
}

@media (min-width: 65em) {
  .page-id-37163 main > .sig-block.section:first-of-type {
    padding-top: 122px !important;
  }
}

/* Page 37209: padding-top on the main wrapper itself (matches the
   standard .section padding-top — 45px mobile / 122px desktop). */
.page-id-37209 main.site-main {
  padding-top: 45px;
}

@media (min-width: 65em) {
  .page-id-37209 main.site-main {
    padding-top: 122px;
  }
}

/* Pages 37303 + 37311 + 37170: padding-top on the main wrapper itself (matches
   the standard .section padding-top — 45px mobile / 122px desktop). */
.page-id-37303 main.site-main,
.page-id-37311 main.site-main,
.page-id-37317 main.site-main,
.page-id-37170 main.site-main,
.page-id-38212 main.site-main,
.postid-38193 main.site-main {
  padding-top: 45px;
}

@media (min-width: 65em) {
  .page-id-37303 main.site-main,
  .page-id-37311 main.site-main,
  .page-id-37317 main.site-main,
  .page-id-37170 main.site-main,
  .page-id-38212 main.site-main,
  .postid-38193 main.site-main {
    padding-top: 122px;
  }
}

/* AUTO top-spacing for any flexible-content page WITHOUT a Hero block.
   The `lc-no-hero` body class is added in functions.php (lucern_no_hero_body_class).
   This is the permanent replacement for the per-page rules above — new hero-less
   pages get the spacing automatically, no per-page CSS needed. Same 45/122px
   values, so it never conflicts with the page-id rules. */
.lc-no-hero main.site-main {
  padding-top: 45px;
}

@media (min-width: 65em) {
  .lc-no-hero main.site-main {
    padding-top: 122px;
  }
}

/* Pages 37311 + 37317: 45px gap between the main content sections (tablet &
   desktop). `gap` needs the wrapper to be flex, so main becomes a flex column. */
@media (min-width: 768px) {
  .page-id-37303 main.site-main,
  .page-id-37311 main.site-main,
  .page-id-37317 main.site-main {
    display: flex;
    flex-direction: column;
    gap: 45px;
  }
}

/* Page 37973: padding-top on the main wrapper itself (matches the
   standard .section padding-top — 45px mobile / 122px desktop). */
.page-id-37973 main.site-main {
  padding-top: 45px;
}

@media (min-width: 65em) {
  .page-id-37973 main.site-main {
    padding-top: 122px;
  }
}

/* Page 37173: render h2 (and .h2) with the same visual weight as h3 on
   this page — no uppercase, no decorative top/bottom bars, no extra
   block margin/padding. Used on the legal/disclaimer-style page where
   the heading hierarchy should read as flat sub-headings rather than
   loud section titles. */
.page-id-37173 main h2,
.page-id-37173 main .h2 {
  font-size: 1.17em;            /* same intrinsic size as <h3> */
  text-transform: none;
  margin: 0;
  margin-top: var(--flow-spacer, 1em);
  padding: 0;
  position: static;
}

.page-id-37173 main h2,
.page-id-37173 main .h2,
.page-id-37173 main h3,
.page-id-37173 main .h3 {
  font-weight: 600;
}

.page-id-37173 main h2::before,
.page-id-37173 main h2::after,
.page-id-37173 main .h2::before,
.page-id-37173 main .h2::after {
  content: none;
}

/* Page 37135: drop the decorative top/bottom bars on the page H1 and on
   .page-card__title (which uses the .h2 class for typography but should not
   carry the bar decoration on this page). */
.page-id-37135 main h1::before,
.page-id-37135 main h1::after,
.page-id-37135 .page-card__title::before,
.page-id-37135 .page-card__title::after {
  content: none !important;
}

/* WP Privacy Policy page: first section padding-top.
   Targets the WP-native body.privacy-policy class so this works regardless
   of which page is set as the privacy policy in Settings → Privacy. */
.privacy-policy main > .sig-block.section:first-of-type {
  padding-top: 45px !important;
}

@media (min-width: 65em) {
  .privacy-policy main > .sig-block.section:first-of-type {
    padding-top: 122px !important;
  }
}

/* Blog card titles — unified size: desktop 22/24, mobile 20/24 (≤768 block).
   The `.blog-card` scope (specificity 0,2,1) beats the per-template inline
   `.blog-card__title a` rules (0,1,1) so both regular and single-brust match. */
.blog-card .blog-card__title a,
.single-brust .blog-card__title a {
  font: normal normal 600 22px/24px var(--font-heading);
}

@media (max-width: 768px) {
  .blog-card .blog-card__title a,
  .single-brust .blog-card__title a {
    font: normal normal 600 20px/24px var(--font-heading);
  }

  .single-brust .feature-steps__buttons-row {
    flex-direction: column;
  }
}

@media (max-width: 981px) {
  .btn-video,
  .btn-video.js-open-feature-video,
  .feature-video .btn-video,
  .friends-video .btn--accent {
    font-size: var(--fs-sm) !important;
    padding: var(--size-2) var(--size-3) !important;
    font-weight: 600 !important;
    line-height: var(--lh-normal) !important;
  }

  .feature-video .btn-video svg,
  .btn-video svg {
    width: 16px !important;
    height: 16px !important;
  }

  .pe-pro-seal {
    bottom: 100px !important;
    left: 5px !important;
  }

  .pe-pro-seal .svelte-pfoy3r {
    width: 50px !important;
    height: 50px !important;
  }
}

/* ProvenExpert seal: lift above neighboring positioned elements (sidebar,
   sticky CTAs, etc.). Applied globally so it persists across breakpoints. */
.pe-pro-seal {
  z-index: 3 !important;
}

/* When a treatment-selector content column is open, fade out the floating
   sidebars + scroll-to-top button so they don't overlap with the open panel.
   Bases get smooth opacity transitions so the fade plays in both directions.
   z-index is also dropped (with !important) as a safety net — the existing
   scroll-show/hide JS on .fixed-sidebar manipulates opacity on a CHILD
   (.fixed-sidebar__mobile-cta), not the parent, but if anything else
   overrides our fade later, the z-index stacking still keeps them behind
   the panel. */
.fixed-sidebar,
.fixed-sidebar-right,
#scrollToTopBtn {
  transition: opacity 0.3s ease, visibility 0.3s ease, z-index 0s linear 0.3s;
}

body:has(.treatment-selector .content-column.is-open) .fixed-sidebar,
body:has(.treatment-selector .content-column.is-open) .fixed-sidebar-right,
body:has(.treatment-selector .content-column.is-open) #scrollToTopBtn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0 !important;
  transition: opacity 0.3s ease, visibility 0.3s ease, z-index 0s linear;
}

/* Page 37147: h3 font-weight */
.page-id-37147 h3 {
  font-weight: 500;
}

/* Homepage mobile: pull the treatment-selector closer to the section
   above by overriding part of the main.site-main flex gap. -36px is half
   of the 72px mobile gap, so the visual gap shrinks from 72px → 36px. */
@media (max-width: 981px) {
  body.home .treatment-selector {
    margin-top: -36px;
  }
}

/* Mobile nav (vertical secondary list): match the same heading font +
   weight as the level-1 nav buttons (button[data-level="1"] .nav-text-wrap)
   so the typography reads consistently across the menu. */
.mobile-nav.mobile-secondary-vertical .mobile-nav-item {
  font-family: var(--font-heading, 'Montserrat');
  font-weight: 600;
}

/* Inner .nav-text-wrap (and any other span inside) should inherit the
   parent's font-family — overrides any plugin-injected inline font. */
.mobile-nav.mobile-secondary-vertical .mobile-nav-item .nav-text-wrap,
.mobile-nav.mobile-secondary-vertical .mobile-nav-item span {
  font-family: inherit;
}

/* Mobile-only: buttons inside the mobile accordion / mobile nav drawer
   shrink to fit their content instead of stretching to the global
   .btn { width: 100% } mobile rule (these are inline contextual links,
   not full-width section CTAs). */
@media (max-width: 981px) {
  .mobile-accordion-content .btn,
  .mobile-panel .mobile-nav .btn {
    width: fit-content;
  }
}

.page-id-37147 .feature-steps__heading {
  margin-top: 0;
}

/* ----------------------------------------------------------------------------
   Narrow-container cap — SITE-WIDE.
   Caps eligible containers at 60rem (≈960px), responsive (never wider than the
   available space, so no horizontal overflow on small laptops).
   Excludes: full-width & wide containers, .image-grid, and the
   treatment-selector section (and its descendants).
   --------------------------------------------------------------------------*/
@media (min-width: 60rem) {
  .container:not([data-type="full-width"]):not([data-type="wide"]):not(.image-grid):not(:has(section.treatment-selector)):not(:has(.image-grid)):not(section.treatment-selector *) {
    width: min(100%, 60rem);
    max-width: 60rem;
  }
}

/* ----------------------------------------------------------------------------
   Responsive embeds inside prose content (WP oEmbed YouTube/Vimeo etc.)
   WordPress oEmbed output for pasted video URLs renders a bare
   <iframe width="500" height="281"> inside .entry-content, which overflows
   narrow screens and looks small on desktop. Override the hardcoded
   dimensions so the iframe fills its container at 16:9. Scoped to
   .entry-content so we don't touch feature/patient-section iframes,
   form iframes, or the Chatbase widget.
   --------------------------------------------------------------------------*/
.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="youtu.be"],
.entry-content iframe[src*="vimeo"],
.entry-content iframe[src*="player.vimeo"] {
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  margin-inline: auto;
  border: 0;
}

/* If the iframe already sits inside a .wp-has-aspect-ratio wrapper
   (block editor video embeds), don't fight its layout — only fix width.
   Mirror all 4 sources from the main rule so short-URL (youtu.be) and
   player-URL (player.vimeo) embeds are handled consistently. */
.entry-content .wp-has-aspect-ratio iframe[src*="youtube"],
.entry-content .wp-has-aspect-ratio iframe[src*="youtu.be"],
.entry-content .wp-has-aspect-ratio iframe[src*="vimeo"],
.entry-content .wp-has-aspect-ratio iframe[src*="player.vimeo"] {
  aspect-ratio: revert;
  height: 100%;
}