/* ------------------------------------------------------------------
   Brand colour system — one dominant background per sub-brand page,
   with a halo/spectrum of the secondary colours, alternating heading
   and menu colours, and a fixed body-text colour.
   Applies to every page of a brand (portal, archive, article, static).
   ------------------------------------------------------------------ */

body[class*="theme-"]{
  --halo-1:transparent;--halo-2:transparent;--halo-3:transparent;
  --nav-1:currentColor;--nav-2:currentColor;
  --surface:#fff;--surface-ink:#1a1420;--surface-muted:#625b63;
  --title-shadow:none;
}

/* ---- سینماجهت: مشکی غالب، هاله فیروزه‌ای و سرخابی ---- */
body.theme-cinemajahat{
  --page-bg:#000;--page-text:#fff;
  --halo-1:rgba(80,227,223,.30);--halo-2:rgba(238,40,115,.28);--halo-3:rgba(80,227,223,.16);
  --nav-1:#50e3df;--nav-2:#ee2873;
  --brand-a:#50e3df;--brand-b:#ee2873;--brand-ink:#000;--brand-paper:#0b0f10;
}
/* ---- سینماجرا: فیروزه‌ای غالب، هاله سرخابی و مشکی ---- */
body.theme-cinemajera{
  --page-bg:#50e3df;--page-text:#000;
  --halo-1:rgba(238,40,115,.34);--halo-2:rgba(0,0,0,.34);--halo-3:rgba(238,40,115,.18);
  --nav-1:#ee2873;--nav-2:#fff;
  --brand-a:#50e3df;--brand-b:#ee2873;--brand-ink:#000;--brand-paper:#eafffe;
  --title-shadow:0 2px 0 rgba(0,0,0,.42);
}
/* ---- سینماعود: سرخابی غالب، هاله سفید ---- */
body.theme-cinemaoud{
  --page-bg:#ee2873;--page-text:#000;
  --halo-1:rgba(255,255,255,.42);--halo-2:rgba(255,255,255,.26);--halo-3:rgba(255,255,255,.34);
  --nav-1:#fff;--nav-2:#fff;
  --brand-a:#ee2873;--brand-b:#fff;--brand-ink:#26000f;--brand-paper:#fff7fa;
  --title-shadow:0 2px 0 rgba(0,0,0,.34);
}
/* ---- فَرهُنر: ارغوانی غالب، هاله مشکی ---- */
body.theme-farhonar{
  --page-bg:#820766;--page-text:#fff;
  --halo-1:rgba(0,0,0,.46);--halo-2:rgba(0,0,0,.34);--halo-3:rgba(130,7,102,.55);
  --nav-1:#000;--nav-2:#000;
  --brand-a:#820766;--brand-b:#000;--brand-ink:#12000e;--brand-paper:#fdf6fb;
  --title-shadow:0 2px 0 rgba(255,255,255,.5);
}

/* ---------- page canvas: dominant colour + halo/spectrum ---------- */
body[class*="theme-"]{
  background-color:var(--page-bg);
  color:var(--page-text);
  background-image:
    radial-gradient(ellipse 62% 48% at 10% 4%,var(--halo-1),transparent 68%),
    radial-gradient(ellipse 58% 44% at 92% 20%,var(--halo-2),transparent 70%),
    radial-gradient(ellipse 78% 46% at 50% 104%,var(--halo-3),transparent 72%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
body[class*="theme-"] .portal-main,
body[class*="theme-"] main{background:transparent}

/* ---------- header / navigation ---------- */
body[class*="theme-"] .site-header{
  background:color-mix(in srgb,var(--page-bg) 82%,transparent);
  border-block-end-color:color-mix(in srgb,var(--page-text) 22%,transparent);
  color:var(--page-text);
}
body[class*="theme-"] .site-header.scrolled{
  border-color:color-mix(in srgb,var(--page-text) 28%,transparent);
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
body[class*="theme-"] .brand{color:var(--page-text)}
body[class*="theme-"] .logo-mark path:first-child{fill:var(--nav-1);stroke:var(--page-text)}
body[class*="theme-"] .logo-mark path:last-child{stroke:var(--page-text)}

/* «یکی در میان» — alternating menu colours */
body[class*="theme-"] .desktop-nav>a:nth-child(odd),
body[class*="theme-"] .desktop-nav>.dropdown:nth-child(odd)>button{color:var(--nav-1)}
body[class*="theme-"] .desktop-nav>a:nth-child(even),
body[class*="theme-"] .desktop-nav>.dropdown:nth-child(even)>button{color:var(--nav-2)}
body[class*="theme-"] .desktop-nav>a:hover,
body[class*="theme-"] .desktop-nav>.dropdown>button:hover{color:var(--page-text)}

/* submenus — same alternating rhythm */
body[class*="theme-"] .dropdown-menu{
  background:color-mix(in srgb,var(--page-bg) 94%,#000);
  border-color:var(--nav-1);
}
body[class*="theme-"] .dropdown-menu a:nth-child(odd){color:var(--nav-1)}
body[class*="theme-"] .dropdown-menu a:nth-child(even){color:var(--nav-2)}
body[class*="theme-"] .dropdown-menu a:hover{background:var(--nav-1);color:var(--page-bg)}

body[class*="theme-"] .icon-btn{
  background:transparent;
  border-color:color-mix(in srgb,var(--page-text) 42%,transparent);
  color:var(--page-text);
}
body[class*="theme-"] .icon-btn:hover{background:color-mix(in srgb,var(--page-text) 12%,transparent)}
body[class*="theme-"] .gateway-link{color:var(--nav-1);border-color:currentColor}

body[class*="theme-"] .mobile-menu{background:var(--page-bg);color:var(--page-text)}
body[class*="theme-"] .mobile-menu nav a:nth-child(odd){color:var(--nav-1)}
body[class*="theme-"] .mobile-menu nav a:nth-child(even){color:var(--nav-2)}
body[class*="theme-"] .mobile-menu nav a{border-block-end-color:color-mix(in srgb,var(--page-text) 25%,transparent)}

/* ---------- headings: alternating, per the palette ---------- */
body[class*="theme-"] .portal-hero h1{
  color:var(--nav-1);text-shadow:var(--title-shadow);
}
body[class*="theme-"] .portal-slogan{color:var(--nav-2);text-shadow:var(--title-shadow)}
body[class*="theme-"] .portal-hero-copy>p:last-of-type{color:color-mix(in srgb,var(--page-text) 86%,transparent)}
body[class*="theme-"] .portal-kicker,
body[class*="theme-"] .weekly>span{color:var(--nav-1)}
body[class*="theme-"] .portal-kicker:before,
body[class*="theme-"] .portal-section-head>span:before{background:var(--nav-2)}

body[class*="theme-"] main>section:nth-of-type(odd) .portal-section-head>span{color:var(--nav-1)}
body[class*="theme-"] main>section:nth-of-type(even) .portal-section-head>span{color:var(--nav-2)}
body[class*="theme-"] main>section:nth-of-type(odd) .portal-section-head h2,
body[class*="theme-"] main>section:nth-of-type(odd)>.shell .portal-section-head h2{
  color:var(--nav-1);text-shadow:var(--title-shadow);
}
body[class*="theme-"] main>section:nth-of-type(even) .portal-section-head h2,
body[class*="theme-"] main>section:nth-of-type(even)>.shell .portal-section-head h2{
  color:var(--nav-2);text-shadow:var(--title-shadow);
}
body[class*="theme-"] .page-hero h1{color:var(--nav-1);text-shadow:var(--title-shadow)}
body[class*="theme-"] .page-hero .kicker{color:var(--nav-2)}
body[class*="theme-"] .page-hero p{color:color-mix(in srgb,var(--page-text) 86%,transparent)}
body[class*="theme-"] .portal-scroll{color:var(--nav-2);border-block-end-color:var(--nav-1)}

/* ---------- content surfaces stay light so body copy is readable ---------- */
body[class*="theme-"] .portal-card,
body[class*="theme-"] .portal-more article,
body[class*="theme-"] .news-card,
body[class*="theme-"] .weekly,
body[class*="theme-"] .prose-box,
body[class*="theme-"] .contact-form,
body[class*="theme-"] .empty-state,
body[class*="theme-"] .article .prose{
  background:var(--surface);color:var(--surface-ink);
}
body[class*="theme-"] .portal-card h3 a,
body[class*="theme-"] .portal-more article h3 a,
body[class*="theme-"] .news-card h2 a{color:var(--surface-ink)}
body[class*="theme-"] .portal-card p,
body[class*="theme-"] .news-card p{color:var(--surface-muted)}
body[class*="theme-"] .portal-card span,
body[class*="theme-"] .portal-more article span,
body[class*="theme-"] .news-card .cat{color:var(--nav-2)}
body[class*="theme-"] .portal-card,
body[class*="theme-"] .news-card{border-block-start:7px solid var(--nav-1)}
body[class*="theme-"] .portal-more article{border-block-end:5px solid var(--nav-2)}
body[class*="theme-"] .weekly{
  border-color:color-mix(in srgb,var(--surface-ink) 22%,transparent);
  box-shadow:14px 14px 0 var(--nav-2);
}
body[class*="theme-"] .weekly h2{color:var(--surface-ink);text-shadow:none}
body[class*="theme-"] .weekly a{background:var(--nav-1);color:var(--page-bg)}

/* article body + breadcrumbs sit on the coloured canvas */
body[class*="theme-"] .article>header h1{color:var(--nav-1);text-shadow:var(--title-shadow)}
body[class*="theme-"] .article>header .lead,
body[class*="theme-"] .article .byline,
body[class*="theme-"] .breadcrumbs{color:color-mix(in srgb,var(--page-text) 84%,transparent)}
body[class*="theme-"] .article .prose{padding:26px;border-radius:4px}

/* strips & panels keep the second colour */
body[class*="theme-"] .content-strip{background:var(--nav-2);color:var(--page-bg)}
body[class*="theme-"] .content-strip span{color:var(--page-bg)}
body[class*="theme-"] .content-strip nav a{border-color:var(--page-bg)}
body[class*="theme-"] .content-strip nav a:hover{background:var(--page-bg);color:var(--nav-2)}
body[class*="theme-"] .category-scene{background:var(--nav-1)}
body[class*="theme-"] .category-scene .portal-section-head h2,
body[class*="theme-"] .category-scene .portal-section-head>span,
body[class*="theme-"] .category-scene nav a{color:var(--page-bg);text-shadow:none}
body[class*="theme-"] .category-scene nav a{border-block-end-color:color-mix(in srgb,var(--page-bg) 38%,transparent)}
body[class*="theme-"] .special-links a{background:var(--nav-1);color:var(--page-bg)}
body[class*="theme-"] .special-links a:last-child{background:var(--nav-2);color:var(--page-bg)}

/* forms / buttons */
body[class*="theme-"] .btn.primary{background:var(--nav-1);color:var(--page-bg)}
body[class*="theme-"] .btn.secondary{border-color:var(--page-text);color:var(--page-text)}
body[class*="theme-"] .search-form label,
body[class*="theme-"] .contact-form label{color:var(--surface-ink)}
body[class*="theme-"] .search-form label{color:var(--page-text)}
body[class*="theme-"] .search-form input{background:#fff;color:#1a1420;border:1px solid var(--nav-1)}

/* footer */
body[class*="theme-"] .footer{
  background:color-mix(in srgb,var(--page-bg) 82%,#000);
  color:#fff;
  border-block-start:1px solid color-mix(in srgb,#fff 20%,transparent);
}
body[class*="theme-"] .footer h3{color:var(--nav-1)}
body[class*="theme-"] .footer a:hover{color:var(--nav-1)}

/* focus ring must stay visible on every canvas */
body[class*="theme-"] :focus-visible{outline:3px solid var(--nav-1);outline-offset:3px}

@media(max-width:900px){
  body[class*="theme-"] .site-header{background:color-mix(in srgb,var(--page-bg) 94%,transparent)}
}

/* The palette puts white menu items on the light turquoise سینماجرا canvas and on
   the سینماعود magenta canvas. Keep the specified colours, but give them a soft
   dark shadow so they stay readable. */
body.theme-cinemajera .desktop-nav>a,
body.theme-cinemajera .desktop-nav>.dropdown>button,
body.theme-cinemajera .mobile-menu nav a,
body.theme-cinemajera .portal-kicker,
body.theme-cinemajera .page-hero .kicker,
body.theme-cinemaoud .desktop-nav>a,
body.theme-cinemaoud .desktop-nav>.dropdown>button,
body.theme-cinemaoud .mobile-menu nav a,
body.theme-cinemaoud .portal-kicker,
body.theme-cinemaoud .page-hero .kicker{text-shadow:0 1px 2px rgba(0,0,0,.45)}