/* =========================================
   COSMO CLINIC ISRAEL — skin for the inner pages (2026 redesign, cosmetic pass)
   Loaded after style.css + the page's own css + home.css. It maps the old tokens to the
   new palette and type, and restyles the shared old components. Page content is unchanged.
   ========================================= */

/* ===== Old tokens → new palette / type ===== */
:root{
  --color-primary:#B04E2C;        /* terracotta, AA on light backgrounds */
  --color-primary-dk:#8E3C20;
  --color-primary-text:#B04E2C;
  --color-cream:#F4F1ED;
  --color-bg-light:#FAF8F5;
  --color-dark:#141210;
  --color-mid:#57514C;
  --color-border:#E4DDD6;
  --color-white:#FFFFFF;
  --font-body:'Montserrat','Heebo',Arial,sans-serif;
  --font-display:'Hello Paris Sans','Bellefair',serif;
  --radius:10px;
  --nav-h:0px;                    /* the new header sits in the page flow; the old one was fixed */
  --shadow:0 18px 50px rgba(29,25,21,.08);
  --blog-terra:#B04E2C; --blog-terra-deep:#8E3C20; --blog-ink:#141210;
  --blog-cream:#F4F1ED; --blog-light:#FAF8F5; --blog-line:#E4DDD6; --blog-muted:#57514C;
}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body)}

/* ===== Dark top band: info bar + header (same header as the home page) ===== */
.page-top{position:relative;background:var(--ink);color:var(--paper);overflow:visible}
.page-top::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 220px at 85% 0%,rgba(247,177,147,.18),transparent 70%);pointer-events:none}
.page-top .topbar,.page-top .masthead-slot{position:relative}
.masthead .site-nav{height:auto}   /* the old fixed nav took its height from --nav-h, which is now 0 */
.site-nav a.is-current,.nm__links a.is-current{color:var(--peach)}

/* ===== Type ===== */
main h1,main h2,main h3{font-family:var(--font-display);font-weight:400;letter-spacing:normal;text-wrap:balance}
main h1{line-height:1.08}
main h2{line-height:1.12}
main p{line-height:1.7}
.tag{font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--terracotta)}

/* ===== Buttons → pills ===== */
.btn{border-radius:999px;min-height:48px;padding:13px 26px;font-family:var(--font-body);font-weight:500;letter-spacing:0;text-transform:none;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--primary:hover{background:#2A2420;color:var(--paper)}
.btn--outline,.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--outline:hover,.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--wa{background:#25D366;color:#fff;border-color:#25D366}

/* ===== Sections ===== */
.section--cream{background:var(--paper)}
.section--light{background:var(--white)}
.section-header h2{font-size:clamp(32px,4.2vw,54px)}

/* ===== Closing call-to-action strip (dark, like the home hero) ===== */
.cta-banner{background:radial-gradient(700px 300px at 80% 0%,rgba(247,177,147,.22),transparent 70%),var(--ink);color:var(--paper)}
.cta-banner h2{color:var(--paper);font-size:clamp(32px,4.4vw,56px)}
.cta-banner p{color:var(--muted-dark)}
.cta-banner .tag{color:var(--peach)}
.cta-banner .btn--ghost{color:var(--paper);border-color:rgba(245,241,234,.4)}
.cta-banner .btn--ghost:hover{background:var(--paper);color:var(--ink)}

/* Hebrew must not be letter-spaced: the old page styles track many labels, so reset it inside the page content */
main *{letter-spacing:normal!important}