/* =============================================================================================================
   Product palettes. Each product keeps its own brand inside the Zinteli frame: its page (and its card, tab and
   menu entry) sets data-product, and these variables repaint the accents. Values come from each product's
   AppTheme / brand files; --p-text is its accent darkened or lightened to pass WCAG AA on the page background.

   --p-1     primary (buttons, gradients; white text on it passes AA)
   --p-2     deep shade (hero gradient end)
   --p-glow  highlight glow
   --p-text  accent text colour for the current theme
   ============================================================================================================= */

[data-product="school-manager"] {
  --p-1: #2563eb;
  --p-2: #1e3a8a;
  --p-glow: #38bdf8;
  --p-spark: #f2b544;
  --p-text: #1d4ed8;
}

[data-product="nextlet"] {
  --p-1: #0c7564;
  --p-2: #05264d;
  --p-glow: #2cc9ac;
  --p-spark: #2cc9ac;
  --p-text: #0c7564;
}

[data-product="emailgo"] {
  --p-1: #1e6fe4;
  --p-2: #0b3e94;
  --p-glow: #4fc3f7;
  --p-spark: #4fc3f7;
  --p-text: #1d5fd1;
}

[data-product="lesson-manager"] {
  --p-1: #0b7148;
  --p-2: #0b4a33;
  --p-glow: #2dd4a8;
  --p-spark: #f2b544;
  --p-text: #0b7148;
}

[data-product="di-manager"] {
  --p-1: #0a66a6;
  --p-2: #063a63;
  --p-glow: #1fccea;
  --p-spark: #1fccea;
  --p-text: #0a66a6;
}

[data-product="lets-learn"] {
  --p-1: #0068a8;
  --p-2: #062a45;
  --p-glow: #5fc79a;
  --p-spark: #5fc79a;
  --p-text: #00558a;
}

:root[data-theme="dark"] [data-product="school-manager"],
:root[data-theme="dark"][data-product="school-manager"] {
  --p-text: #7aa7ff;
}

:root[data-theme="dark"] [data-product="nextlet"],
:root[data-theme="dark"][data-product="nextlet"] {
  --p-text: #2cc9ac;
}

:root[data-theme="dark"] [data-product="emailgo"],
:root[data-theme="dark"][data-product="emailgo"] {
  --p-text: #6ca8ff;
}

:root[data-theme="dark"] [data-product="lesson-manager"],
:root[data-theme="dark"][data-product="lesson-manager"] {
  --p-text: #34d399;
}

:root[data-theme="dark"] [data-product="di-manager"],
:root[data-theme="dark"][data-product="di-manager"] {
  --p-text: #1fccea;
}

:root[data-theme="dark"] [data-product="lets-learn"],
:root[data-theme="dark"][data-product="lets-learn"] {
  --p-text: #4db8f0;
}

/* On a product page the Zinteli primary yields to the product's, so links and focus rings match. */
[data-product] {
  --primary: var(--p-text);
  --primary-soft: color-mix(in srgb, var(--p-1) 11%, transparent);
  --link: var(--p-text);
  --focus: var(--p-text);
}

[data-product] .btn--primary {
  background: linear-gradient(135deg, var(--p-1), color-mix(in srgb, var(--p-1) 70%, var(--p-2)));
  box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--p-1) 80%, transparent);
}

[data-product] .eyebrow::before {
  background: linear-gradient(90deg, var(--p-1), var(--p-glow));
}

/* On the product's own coloured surfaces the primary button turns white, so it stands out from the gradient. */
[data-product] .product-hero .btn--primary,
[data-product] .cta-band .btn--primary {
  background: #fff;
  color: var(--p-2);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5);
}

/* Until the page scrolls, the transparent header sits on the product's colour: switch it to white. */
body:has(.product-hero) .site-header:not(.is-scrolled):not(.is-open) .brand,
body:has(.product-hero) .site-header:not(.is-scrolled):not(.is-open) .nav__link,
body:has(.product-hero) .site-header:not(.is-scrolled):not(.is-open) .nav__trigger {
  color: rgba(255, 255, 255, 0.9);
}

body:has(.product-hero) .site-header:not(.is-scrolled):not(.is-open) .nav__link:hover,
body:has(.product-hero) .site-header:not(.is-scrolled):not(.is-open) .nav__trigger:hover,
body:has(.product-hero) .site-header:not(.is-scrolled):not(.is-open) .nav__trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

body:has(.product-hero) .site-header:not(.is-scrolled):not(.is-open) .icon-btn {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}