/* content.css — shared document styling for pages migrated off Beaver Builder.
 *
 * Served by femsculpt-chrome to pages on templates/template-femsculpt.php only.
 * Scoped entirely under .fsc-doc so it cannot touch the editorial pages, which
 * wrap their markup in .fsed and harden their own typography with !important.
 * Nothing here uses !important, for that reason.
 *
 * What it has to style: the markup Beaver Builder actually stored. That is plain
 * semantic HTML with ZERO classes, and a lot of body copy sitting as bare text
 * nodes with no element around it, so the base typography lives on the container
 * itself and is inherited rather than applied per tag.
 *
 * Tokens copied from components/femsculpt-header.html. Do not invent values.
 */

.fsc-doc{
  --fsc-oxblood:#7A3230;
  --fsc-gold:#AD974F;
  --fsc-gold-deep:#7A6528;
  --fsc-oxblood-soft:rgba(122,50,48,.3);
  --fsc-rule:rgba(48,45,38,.16);
  --fsc-lift:rgba(48,45,38,.45);
  --fsc-cream:#FAF8F5;
  --fsc-cream-deep:#F3EFE8;
  --fsc-ink:#302D26;
  --fsc-ink-soft:#5A5450;
  --fsc-serif:'Cormorant Garamond',Georgia,serif;
  --fsc-sans:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fsc-ease:cubic-bezier(.32,.72,0,1);
  --fsc-measure:68ch;

  background:var(--fsc-cream);
  color:var(--fsc-ink);
  font-family:var(--fsc-sans);
  font-size:clamp(16px,1.05vw,17.5px);
  font-weight:400;
  line-height:1.75;
  padding:clamp(40px,6vw,88px) clamp(20px,5vw,56px) clamp(56px,8vw,112px);
  -webkit-font-smoothing:antialiased;
}

/* the measure column. Bare text nodes are direct children of this element on many
   pages, which is exactly why the reading width is set here and not on p. */
.fsc-doc .fsc-body{
  max-width:var(--fsc-measure);
  margin:0 auto;
}

.fsc-doc ::selection{background:#D8AFA5;color:var(--fsc-ink)}
.fsc-doc :focus-visible{outline:2px solid var(--fsc-oxblood);outline-offset:3px}

/* ---------- headings ---------- */
/* h3 is the most common heading in this content and is used two ways: as a real
   subhead, and as a pulled patient quote. Sized restrained so both read. */

.fsc-doc h1,.fsc-doc h2,.fsc-doc h3,.fsc-doc h4,.fsc-doc h5,.fsc-doc h6{
  font-family:var(--fsc-serif);
  font-weight:500;
  line-height:1.15;
  color:var(--fsc-ink);
  text-wrap:balance;
}

.fsc-doc h1{
  font-size:clamp(34px,5.2vw,58px);
  letter-spacing:-.01em;
  margin:0 0 .6em;
}
.fsc-doc h2{
  font-size:clamp(26px,3.4vw,38px);
  margin:2.1em 0 .55em;
}
.fsc-doc h3{
  font-size:clamp(20px,2.2vw,25px);
  line-height:1.28;
  margin:1.7em 0 .45em;
}
.fsc-doc h4{
  font-family:var(--fsc-sans);
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.02em;
  margin:1.6em 0 .4em;
}
.fsc-doc h5,.fsc-doc h6{
  font-family:var(--fsc-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fsc-ink-soft);
  margin:1.8em 0 .8em;
}

/* an h1 opening the document should not carry its heading top margin */
.fsc-doc .fsc-body > h1:first-child,
.fsc-doc .fsc-body > h2:first-child{margin-top:0}

/* a hairline under the page title. Neutral, not brand-tinted: a colored rule
   under a heading reads as a decorative accent bar (banned decoration rule). */
.fsc-doc h1{
  padding-bottom:.42em;
  border-bottom:1px solid var(--fsc-rule);
}

/* ---------- body copy ---------- */

.fsc-doc p{margin:0 0 1.15em}
.fsc-doc strong,.fsc-doc b{font-weight:600;color:var(--fsc-ink)}
.fsc-doc em,.fsc-doc i{font-style:italic}
.fsc-doc small{font-size:.85em;color:var(--fsc-ink-soft)}
.fsc-doc hr{
  border:0;
  border-top:1px solid var(--fsc-oxblood-soft);
  margin:2.4em 0;
}

/* ---------- links ---------- */

.fsc-doc a{
  color:var(--fsc-oxblood);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:var(--fsc-oxblood-soft);
  transition:text-decoration-color .3s var(--fsc-ease),color .3s var(--fsc-ease);
}
.fsc-doc a:hover{
  color:var(--fsc-gold-deep);
  text-decoration-color:currentColor;
}

/* Action links only. The migration tool adds this class from a short allowlist of
   CTA phrases. It is deliberately NOT applied to every uppercase link, because most
   uppercase links on these pages are procedure names in navigation lists, and
   buttoning those would produce a wall of buttons. */
.fsc-doc a.fsc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin:.35em .5em .35em 0;
  padding:12px 26px;
  border:1px solid var(--fsc-oxblood);
  border-radius:0;
  font-family:var(--fsc-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--fsc-oxblood);
  background:transparent;
  transition:background .35s var(--fsc-ease),color .35s var(--fsc-ease);
}
.fsc-doc a.fsc-btn:hover{
  background:var(--fsc-oxblood);
  color:var(--fsc-cream);
}

/* Two or more CTAs next to each other must be identical in width and height
   (house rule). The transform wraps consecutive .fsc-btn links in this element;
   inline-grid keeps the row hugging its content while 1fr equalises columns. */
.fsc-doc .fsc-btn-group{
  display:inline-grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:16px;
  margin:.35em 0;
}
.fsc-doc .fsc-btn-group a.fsc-btn{margin:0;width:100%}
@media (max-width:767px){
  .fsc-doc .fsc-btn-group{display:grid;grid-auto-flow:row;width:100%}
}

/* ---------- lists ---------- */
/* Astra and the site reset strip list markers and indent; put them back. */

.fsc-doc ul,.fsc-doc ol{
  margin:0 0 1.35em;
  padding-left:1.35em;
}
.fsc-doc ul{list-style:disc}
.fsc-doc ol{list-style:decimal}
.fsc-doc li{margin:0 0 .55em;padding-left:.2em}
.fsc-doc li::marker{color:var(--fsc-oxblood)}
.fsc-doc li > ul,.fsc-doc li > ol{margin:.55em 0 .2em}

/* the service-list pattern: <li><h3><a>Name</a></h3> description text */
.fsc-doc li > h3{margin:0 0 .25em;font-size:clamp(19px,2vw,22px)}
.fsc-doc li > h3 + p{margin-bottom:0}

/* ---------- quotes ---------- */

.fsc-doc blockquote{
  margin:1.9em 0;
  padding:clamp(20px,3vw,30px) clamp(22px,3.4vw,34px);
  background:var(--fsc-cream-deep);
  font-family:var(--fsc-serif);
  font-size:clamp(20px,2.2vw,24px);
  font-style:italic;
  line-height:1.42;
  color:var(--fsc-ink);
}
.fsc-doc blockquote p:last-child{margin-bottom:0}
.fsc-doc cite{
  display:block;
  margin-top:.7em;
  font-family:var(--fsc-sans);
  font-size:11px;
  font-style:normal;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fsc-ink-soft);
}

/* ---------- media ---------- */

.fsc-doc img{
  display:block;
  max-width:100%;
  height:auto;
  margin:1.6em auto;
}
.fsc-doc figure{margin:2em 0}
.fsc-doc figure img{margin:0 auto}
.fsc-doc figcaption{
  margin-top:.75em;
  font-size:13px;
  line-height:1.5;
  color:var(--fsc-ink-soft);
  text-align:center;
}
.fsc-doc iframe{
  display:block;
  max-width:100%;
  margin:2em auto;
  border:0;
}
/* video embeds keep their ratio instead of collapsing on a phone */
.fsc-doc iframe[src*="youtube"],
.fsc-doc iframe[src*="youtu.be"],
.fsc-doc iframe[src*="vimeo"],
.fsc-doc iframe[src*="wistia"]{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
}

/* ---------- tables ---------- */

.fsc-doc table{
  width:100%;
  margin:2em 0;
  border-collapse:collapse;
  font-size:15px;
  line-height:1.55;
}
.fsc-doc th,.fsc-doc td{
  padding:12px 14px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--fsc-oxblood-soft);
}
.fsc-doc th{
  font-family:var(--fsc-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fsc-ink-soft);
  background:var(--fsc-cream-deep);
}
.fsc-doc tbody tr:last-child th,
.fsc-doc tbody tr:last-child td{border-bottom:0}

/* A wide table scrolls inside itself rather than pushing the page sideways.
   The migration transform wraps every <table> in .fsc-scroll; the media query
   below is the fallback for any table that arrives without the wrapper. */
.fsc-doc .fsc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:2em 0}
.fsc-doc .fsc-scroll table{margin:0}

/* ---------- structural elements ---------- */

.fsc-doc section{margin:0 0 1em}
.fsc-doc aside{
  margin:2em 0;
  padding:clamp(20px,3vw,30px);
  background:var(--fsc-cream-deep);
  border:1px solid var(--fsc-rule);
}
.fsc-doc aside > :last-child{margin-bottom:0}

/* form remnants: a handful of pages carry a stray label or button */
.fsc-doc label{
  display:inline-block;
  margin-bottom:.4em;
  font-size:13px;
  font-weight:600;
  color:var(--fsc-ink-soft);
}
.fsc-doc button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  font-family:var(--fsc-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:12px 26px;
  border:1px solid var(--fsc-oxblood);
  border-radius:0;
  color:var(--fsc-oxblood);
  background:transparent;
  cursor:pointer;
  transition:background .35s var(--fsc-ease),color .35s var(--fsc-ease);
}
.fsc-doc button:hover{background:var(--fsc-oxblood);color:var(--fsc-cream)}

/* ---------- narrow screens ---------- */

@media (max-width:600px){
  .fsc-doc{line-height:1.7}
  /* a table the transform did not wrap still must not push the page sideways */
  .fsc-doc .fsc-body > table{display:block;overflow-x:auto}
  .fsc-doc .fsc-scroll table{min-width:32em}
  .fsc-doc h1{font-size:clamp(30px,8vw,38px)}
  .fsc-doc img,.fsc-doc figure{margin-left:0;margin-right:0}
}

@media (prefers-reduced-motion:reduce){
  .fsc-doc a,.fsc-doc a.fsc-btn,.fsc-doc button{transition:none}
}