/* Legacy detail v2: editorial overlay for the bootstrap _base2 pages.
 * Covers /conditions/{slug} and /diets/{slug}.
 * Includes Fraunces + Inter font load (legacy uses Poppins) and
 * targets the existing .cv-title / #statement / .mainleft structure. */

/* Pull in our brand fonts (the legacy layout only loads Poppins). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter:wght@400;500;600&display=swap');

:root {
  --leg-coral: #FF8A73;
  --leg-charcoal: #2B2B2B;
  --leg-sage: #B4C7A8;
  --leg-cream: #FFF8F0;
  --leg-soft-gray: #F5F2EE;
}

/* ---------- Container width: wider, more editorial ---------- */
body .container {
  max-width: 1100px !important;
}

/* ---------- Body baseline: warmer, modern ---------- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--leg-charcoal) !important;
  background: #FFFCF9 !important;
}

/* ---------- Editorial hero (the .cv-title block) ---------- */
.cv-title {
  padding: 2.5rem 0 0.5rem;
  border-bottom: 1px solid rgba(43, 43, 43, 0.08);
  margin-bottom: 2rem !important;
}
.cv-title > .row:first-child {
  align-items: flex-start;
}
.cv-title h1 {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem) !important;
  line-height: 1.05 !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: var(--leg-charcoal) !important;
  margin: 0.4rem 0 1rem !important;
  font-variation-settings: "opsz" 96;
  max-width: 22ch;
}
.cv-title h2,
.cv-title h2 a {
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1.2rem !important;
  line-height: 1.55 !important;
  color: #5a5a5a !important;
  text-decoration: none !important;
  margin: 0 0 1.5rem !important;
  max-width: 60ch;
}

/* Eyebrow utility (added via blade) */
.cv-title .legacy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--leg-coral);
  margin-bottom: 0.5rem;
}
.cv-title .legacy-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

/* AddToAny share button: ghost chip */
.cv-title .dl-share .a2a_dd {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(43, 43, 43, 0.14) !important;
  background: #fff !important;
  color: var(--leg-charcoal) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
  box-shadow: none !important;
}
.cv-title .dl-share .a2a_dd:hover {
  background: var(--leg-charcoal) !important;
  border-color: var(--leg-charcoal) !important;
  color: #fff !important;
}

/* Hide the heavy "firsthr" divider in favor of the cv-title border */
.firsthr {
  display: none !important;
}

/* ---------- Section blocks (#statement rows) ---------- */
#statement,
.mainleft #statement,
.mainleft > .row.mobmid {
  padding: 1.75rem 0 !important;
  border-bottom: 1px solid rgba(43, 43, 43, 0.08) !important;
  margin: 0 !important;
}
.mainleft > .row.mobmid:last-of-type,
.mainleft > #statement:last-of-type {
  border-bottom: 0 !important;
}

/* Section icon column: simplified to a tiny coral dot */
.mainleft .secicon {
  font-size: 0 !important;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--leg-coral) !important;
  display: inline-block;
  margin-top: 0.6rem;
  color: transparent !important;
}
.mainleft .secicon::before {
  content: '' !important;
}
.mainleft .col-sm-1 {
  text-align: left;
  padding-top: 0.25rem;
}

/* Section headings */
.mainleft h3,
.mainleft .col-sm-11 h3 {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--leg-charcoal) !important;
  margin: 0 0 0.9rem !important;
  font-variation-settings: "opsz" 36;
}
.mainleft h4 {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  font-size: 1.15rem !important;
  margin: 1.25rem 0 0.5rem !important;
  color: var(--leg-charcoal) !important;
}
.mainleft p {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
  color: #3a3a3a !important;
  max-width: 68ch;
  margin: 0 0 1.1rem !important;
}
.mainleft a {
  color: var(--leg-charcoal) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 138, 115, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500 !important;
  transition: color 0.2s !important;
}
.mainleft a:hover {
  color: var(--leg-coral) !important;
  text-decoration-color: var(--leg-coral);
}
.mainleft ul,
.mainleft ol {
  padding-left: 1.5rem;
  margin: 0.5rem 0 1.25rem;
}
.mainleft li {
  font-family: 'Inter', sans-serif;
  font-size: 1.025rem;
  line-height: 1.65;
  color: #3a3a3a;
  margin-bottom: 0.4rem;
}
.mainleft ul > li::marker { color: var(--leg-coral); }
.mainleft ol > li::marker { font-family: 'Fraunces', serif; font-weight: 500; color: var(--leg-coral); }

/* Hide the legacy <hr>s between sections; our border-bottom does the job */
.mainleft > hr {
  display: none !important;
}

/* ---------- Sidebar / right column ---------- */
body .col-md-4,
body .sidebar {
  font-family: 'Inter', sans-serif !important;
}
body .col-md-4 h3 {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.005em !important;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 768px) {
  .cv-title h1 { font-size: clamp(1.85rem, 7vw, 2.5rem) !important; }
  .mainleft .col-sm-1 { display: none; }
  .mainleft .col-sm-11 { width: 100%; padding: 0; }
}