/* SHANI ACADEMY, NOIR ROSE palette.
   The only place colours are defined. Every page, component and script refers to these
   tokens, so a palette change is an edit to this file alone.

   The six values are exact:
     Noir Black      #211B1D   the page under the background image, dark surfaces
     Deep Warm Gray  #6B6263   muted text on light fills
     Dusty Rose      #99736D   quiet frames and tints
     Rose Border     #C5ADA5   accents, icons, emphasis, focus
     Soft Blush      #F7EAE5   body and secondary text (translucent)
     Warm Ivory      #FCF7F2   headings, strong text, the primary button fill */
:root {
  color-scheme: dark;

  --nr-black: #211B1D;
  --nr-gray: #6B6263;
  --nr-rose: #99736D;
  --nr-border: #C5ADA5;
  --nr-blush: #F7EAE5;
  --nr-ivory: #FCF7F2;

  /* the same six as space separated channels, for translucent uses: rgb(var(--nr-rose-rgb) / .5) */
  --nr-black-rgb: 33 27 29;
  --nr-gray-rgb: 107 98 99;
  --nr-rose-rgb: 153 115 109;
  --nr-border-rgb: 197 173 165;
  --nr-blush-rgb: 247 234 229;
  --nr-ivory-rgb: 252 247 242;

  /* roles on the dark background image */
  --sa-page: var(--nr-black);                          /* under the image, and while it loads */
  --sa-bg: rgb(var(--nr-black-rgb) / .68);             /* cards and panels: dark, the image still shows */
  --sa-bg-alt: rgb(var(--nr-black-rgb) / .68);
  --sa-ink: var(--nr-ivory);                           /* headings, strong text, primary button fill */
  --sa-text: var(--nr-blush);                          /* body and secondary text */
  --sa-accent: var(--nr-border);                       /* pink accents, icons, focus */
  --sa-line: rgb(var(--nr-border-rgb) / .3);           /* hairlines and card frames */

  /* text and icons that sit on an --sa-ink or --sa-accent fill (primary buttons, icon tiles) */
  --sa-dark: var(--nr-black);
  --sa-on-dark: var(--nr-black);
  --sa-on-dark-muted: var(--nr-gray);

  /* surfaces that float above the page */
  --sa-glass: rgb(var(--nr-black-rgb) / .64);          /* the header capsule at the top of the page */
  --sa-glass-strong: rgb(var(--nr-black-rgb) / .9);    /* header while scrolled, sticky bars */
  --sa-solid: rgb(var(--nr-black-rgb) / .97);          /* phone menu, panels, dialog cards */
  --sa-overlay: rgb(var(--nr-black-rgb) / .9);         /* behind dialogs and image viewers */
  --sa-veil: rgb(var(--nr-black-rgb) / .65);           /* darkening over the background image, the same on every screen */
}

html { background: var(--sa-page); }

/* ---------- the background image ----------
   One fixed layer, the size of the screen and not of the page, behind all content. It never
   repeats and keeps its proportions (cover). The file is chosen by screen width, inside
   mutually exclusive media queries, so a device downloads only its own version. The layer
   takes no pointer events and does not scroll, so taps and scrolling pass straight through. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  background-color: var(--sa-page);
  background-repeat: no-repeat;
  background-size: cover;
  transform: translateZ(0);
}
/* The glass stays visible; every line of text measures at least 4.5:1 against the brightest
   pixels behind it. Tablets and phones had .62 until 14 September 2026, when the home page
   changed and text landed on the glass highlights there. */
@media (min-width: 1100px) {
  body::before {
    background-image: linear-gradient(var(--sa-veil), var(--sa-veil)), url("../backgrounds/noir-rose-desktop.webp");
    background-position: center, 78% 50%;
  }
}
@media (min-width: 641px) and (max-width: 1099.98px) {
  body::before {
    background-image: linear-gradient(var(--sa-veil), var(--sa-veil)), url("../backgrounds/noir-rose-tablet.webp");
    background-position: center, 82% 50%;
  }
}
/* on the phone the arch sits low in the picture, under the centred text column */
@media (max-width: 640.98px) {
  body::before {
    background-image: linear-gradient(var(--sa-veil), var(--sa-veil)), url("../backgrounds/noir-rose-phone.webp");
    background-position: center, 50% 62%;
  }
}

/* ---------- surfaces on the image ---------- */

/* page sections are transparent: the background carries the page */
#dc-root main > section { background: transparent !important; }
/* TOP NAILS VIP (23 October 2026, the owner: "חייב לעשות מקטעים לפי איזורים עם מעבר צבע או שקף מאחור"):
   every other section is a warm band over the background image, and the opening text sits on a translucent
   sheet. The band is one flat layer of Rose over Noir Black, not a colour gradient. */
#dc-root main > section[data-zone="rose"] {
  background: linear-gradient(rgb(var(--nr-rose-rgb) / .2), rgb(var(--nr-rose-rgb) / .2)), rgb(var(--nr-black-rgb) / .86) !important;
  box-shadow: inset 0 1px 0 rgb(var(--nr-border-rgb) / .22), inset 0 -1px 0 rgb(var(--nr-border-rgb) / .22);
}
#dc-root main > section[data-zone="sheet"] > div:not([aria-hidden]) {
  padding: clamp(24px, 4vw, 48px);
  border-radius: 28px;
  background: rgb(var(--nr-black-rgb) / .62);
  box-shadow: inset 0 0 0 1px var(--sa-line);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Card frames were a filled plate one pixel larger than the card. A translucent card would
   show that plate through itself, so the plate becomes a ring and the card shows the image. */
#dc-root [style*="padding: 1px;"][style*="background: rgb(var(--nr-border-rgb) / .6)"] {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px var(--sa-line) !important;
}
#dc-root [style*="padding: 1.5px;"][style*="background: rgb(var(--nr-border-rgb) / .6)"] {
  background: transparent !important;
  box-shadow: inset 0 0 0 1.5px var(--sa-line) !important;
}
#dc-root [style*="padding: 1px;"][style*="background: var(--sa-accent)"],
#dc-root [style*="padding: 1.5px;"][style*="background: var(--sa-accent)"],
#dc-root [style*="padding: 1.5px;"][style*="background: var(--sa-ink)"] {
  background: transparent !important;
  box-shadow: inset 0 0 0 1.5px var(--sa-accent) !important;
}

/* secondary buttons and quiet controls: a dark fill and a visible pink edge, clearly apart
   from the ivory primary button */
#dc-root [style*="background: rgb(var(--nr-black-rgb) / .05)"] {
  background: rgb(var(--nr-black-rgb) / .42) !important;
}
#dc-root [style*="background: rgb(var(--nr-black-rgb) / .05)"][style*="border: 1px solid"] {
  border-color: rgb(var(--nr-border-rgb) / .55) !important;
}

/* floating panels are nearly opaque, so text never mixes with the page behind them */
#sh-mobile-nav, #sa-a11y-panel, #sa-stmt-inner { --sa-bg: var(--sa-solid); --sa-bg-alt: var(--sa-solid); }
nav[data-inpage-nav] { --sa-bg: var(--sa-glass-strong); }

/* the footer stays a dark band with light text */
footer {
  --sa-ink: rgb(var(--nr-black-rgb) / .82);
  --sa-on-dark: var(--nr-ivory);
  --sa-on-dark-muted: var(--nr-border);
}

/* the header is a floating capsule: the older full-width header shadow and the hover underline
   that anim.js adds to header links do not apply to it (the active link is a soft pill) */
header.sa-glass { box-shadow: none !important; }
header .sa-nav-link::after { content: none !important; }

/* The page template inside <x-dc> stays hidden until support.js renders the page. support.js hides it too, but
   since 25 September 2026 it loads with defer, after the first frame is drawn, so the rule is here from the start. */
x-dc { display: none !important; }

/* the opening loader (assets/js/intro.js). While html.sa-intro-active is set the page stays
   hidden under the loader; if the loader script never arrives, the page shows itself after 6s.
   When the loader leaves, the page fades in. */
html.sa-intro-active #dc-root,
html.sa-intro-active #sa-a11y-btn { visibility: hidden; animation: saIntroFailsafe 0s 6s forwards; }
@keyframes saIntroFailsafe { to { visibility: visible; } }
html.sa-intro-reveal #dc-root { animation: saIntroPage .8s cubic-bezier(.4,0,.2,1) both; }
@keyframes saIntroPage { from { opacity: 0; } to { opacity: 1; } }

/* The first frame, painted from this stylesheet before the page scripts have even arrived: the
   dark page with the gold name in the exact place the loader draws it (its centre 44px above
   the middle of the screen). The loader replaces it with the veiled background as soon as it
   starts; if the loader never starts, the frame hides itself after 6s like the page above. */
html.sa-intro-active::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483599;
  pointer-events: none;
  background: url("../brand/shani-academy-wordmark-gold.webp") no-repeat center calc(50% - 44px) / min(420px, 74vw) auto, var(--sa-page);
  animation: saIntroSplashOut 0s 6s forwards;
}
html.sa-intro-js::after { display: none; }
@keyframes saIntroSplashOut { to { visibility: hidden; } }

/* The header component is mounted in a sticky host that spans the full width. Around the
   floating capsule that band is see-through, so it must not catch taps meant for the page
   under it; the capsule and the phone menu take pointer events back (SiteHeader.dc.html). */
#dc-root .sc-host[style*="position: sticky"][style*="z-index: 900"] { pointer-events: none; }

/* Body text (site owner, 16 September 2026): the light paragraphs were thin and cramped, so every
   light (300) text that does not set its own typeface is shown at 400. Since 2 October 2026 (the
   owner's choice on the fonts page, "גופנים: Rubik") the whole site, headings and this text alike,
   is set in Rubik. React writes "font-weight: 300" with a space, scripts and the statement loaded
   into the accessibility dialog may not, so both forms are matched. */
:is(#dc-root, #sa-stmt-body) :is([style*="font-weight: 300"], [style*="font-weight:300"]):not([style*="font-family"]) {
  font-family: Rubik, system-ui, sans-serif !important;
  font-weight: 400 !important;
}
/* phones: the same text one step bolder ("טקסט בטלפון: גדול ועבה"; the sizes are in responsive.css) */
@media (max-width: 760px) {
  #dc-root :is([style*="font-weight: 300"], [style*="font-weight:300"]):not([style*="font-family"]) { font-weight: 500 !important; }
  /* the emphasis inside it (strong, 600) would be only one step above the text, so it goes to 700 */
  #dc-root :is([style*="font-weight: 300"], [style*="font-weight:300"]) strong { font-weight: 700 !important; }
}