/*
 * Home V2 look for all static content guides.
 *
 * tools/sync-content-chrome.tsx links this last in <head>, after each page's
 * inline <style>, /treatments/seo-aeo-page.css or
 * /clinical-k-beauty/authority.css. All page styles use the same token names, so
 * remapping them here reskins every page; the rules below cover what the
 * tokens don't reach. Values come from app/globals.css, home-v2.css and
 * Fonts.site in lib/fonts.ts.
 */

:root {
  --paper: #f5f0ea;
  --cream: #f3e7db;
  --surface-raised: #fbf7f1;
  --surface-grouped: #e8ddd0;
  --ink: #2e2723;
  --ink-secondary: #645a52;
  --clay: #825c43;
  --border-warm: rgb(46 39 35 / 0.1);
  /* content-site-footer.css reads the Next font variable. */
  --font-geist-sans: 'Geist';

  --background: var(--paper);
  --neutral-50: var(--surface-raised);
  --neutral-100: #efe7de;
  --neutral-200: #e1dbd4;
  --neutral-300: #cdc4bb;
  --neutral-400: #9a8f86;
  --neutral-500: #7d7168;
  --neutral-600: var(--ink-secondary);
  --neutral-700: #4d443e;
  --neutral-800: #3a322d;
  --neutral-900: var(--ink);
  --neutral-950: #1f1a17;
  --primary: #b5373a;
  --primary-50: #fbeded;
  --primary-100: #f6dadb;
  --primary-200: #eebabb;
  --primary-300: #e08f91;
  --primary-400: #cf6063;
  --primary-600: #9e2d30;
  --primary-700: #842427;
  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
}

/* Legacy styles use overflow-x: hidden on html and body, which makes body a
   scroll container and stops the header from sticking. clip doesn't. */
html,
body {
  overflow-x: clip;
}

html {
  scroll-padding-top: 80px;
}

body {
  background: var(--paper);
  color: var(--ink);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 4px;
}

/* Type: Fonts.site scale, Geist throughout like the homepage. */
h1,
.hero h1 {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}

:is(section, article, main, div, .body-section, .faq-section, .sources-section, .comparison, .app-cta, .footer-cta) h2,
.app-cta .app-cta-heading {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 400;
  line-height: 29px;
  letter-spacing: -0.01em;
  color: var(--clay);
}

:is(section, article, main, div, .body-section) h3 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

@media (min-width: 1024px) {
  h1,
  .hero h1 {
    font-size: 44px;
    line-height: 46px;
    letter-spacing: -0.02em;
  }

  :is(section, article, main, div, .body-section, .faq-section, .sources-section, .comparison, .app-cta, .footer-cta) h2,
  .app-cta .app-cta-heading {
    font-size: 32px;
    line-height: 34px;
    letter-spacing: -0.02em;
  }
}

/* Two style families set the sources heading as an uppercase label. */
:is(.sources-section, .sources) h2 {
  text-transform: none;
}

.hero-label,
.eyebrow,
.section-kicker,
.mid-page-cta-label,
.targets-label,
.also-research-label,
.app-cta-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--clay);
}

.hero-aliases,
.aliases {
  font-style: normal;
}

/* Hero: flat paper like the About and Legal pages. */
.hero {
  background: var(--paper);
  border-bottom-color: var(--border-warm);
}

.hero::before {
  content: none;
}

.hero-cta,
.mid-cta {
  border-top-color: var(--border-warm);
}

/* Scan CTAs: the ink button from the homepage sticky scan. */
.btn-pill-black,
.btn,
.faq-inline-cta-card a[data-scan-cta],
.link-pills a[data-scan-cta] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.btn-pill-black:hover,
.btn:hover,
.faq-inline-cta-card a[data-scan-cta]:hover,
.link-pills a[data-scan-cta]:hover {
  background: #4a3f39;
  color: #fff;
  text-decoration: none;
}

.mid-page-cta,
.mid-cta,
.faq-inline-cta-card {
  background: var(--cream);
  border: 0;
  border-radius: 4px;
}

.app-cta,
.footer-cta {
  background: var(--cream);
  border-top: 0;
  border-bottom: 0;
}

.app-cta-actions {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* Cards and tables that hard-code white. */
.review-card,
.directory-card,
.info-card,
.table-wrap,
.before-after-panel,
.before-after-panel.is-contain img,
.directory-card.is-featured:hover,
.link-pills a:hover,
.also-research-pills a:hover {
  background: var(--surface-raised);
}

.ba-handle {
  background: var(--paper);
}

/* Header: static twin of app/(landing)/_ui/site/site-header.tsx. */
.cs-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--border-warm);
  background: rgb(245 240 234 / 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.cs-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1280px;
  height: 64px;
  margin: 0 auto;
  padding: 0 16px;
}

.cs-header-logo img {
  display: block;
  width: 74px;
  height: auto;
}

.cs-header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cs-header-link {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 18px;
  color: var(--ink-secondary);
  text-decoration: none;
  text-underline-offset: 4px;
}

.cs-header-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

.cs-header-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  background: var(--cream);
  color: #310e0f;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.cs-header-action:hover {
  background: var(--surface-grouped);
}

.cs-header-action img {
  width: 16px;
  height: 16px;
}

/* Only the section link fits beside the primary action on phones. */
@media (max-width: 639px) {
  .cs-header-link:not(:first-child) {
    display: none;
  }
}

/* Below 360px even the section link would push the scan button off-screen. */
@media (max-width: 359px) {
  .cs-header-link {
    display: none;
  }
}

@media (min-width: 640px) {
  .cs-header-nav {
    gap: 32px;
  }
}

@media (min-width: 1024px) {
  .cs-header-inner {
    padding: 0 40px;
  }
}

/* Sticky action: static twin of the homepage .hv2-sticky-scan. */
.cs-action-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 40;
  width: 420px;
  transform: translateX(-50%);
}

.cs-action-bar[hidden] {
  display: none;
}

.cs-action-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 3px 20px #0002;
}

.cs-action-link:hover {
  background: #4a3f39;
}

@media (max-width: 1199px) {
  .cs-action-bar {
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #2e272322;
    background: rgb(255 255 255 / 0.97);
    transform: none;
  }

  .cs-action-link {
    box-shadow: none;
  }
}

/* Footer: medical note above the shared Home V2 footer. */
.cs-content-note {
  padding: 24px 16px;
  border-top: 1px solid var(--border-warm);
  background: var(--paper);
}

.cs-content-note p {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-secondary);
}

.cs-content-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* authority.css styles the bare footer element for the old chrome. */
.lh-footer {
  margin-top: 0;
  border-top: 0;
}