/*
 * Public landing page (rubaacademy.com and /ar). Plain CSS, no build step.
 * Every colour, type size, radius and shadow is a token on :root; dark mode redefines the
 * same tokens twice (system preference unless light was chosen, and an explicit choice),
 * and the two dark blocks stay identical. Logical properties keep Arabic (rtl) correct.
 */
:root {
  color-scheme: light;
  --site-accent: #74408f;
  --site-accent-strong: #59316d;
  --site-accent-soft: #eee9f8;
  --site-accent-line: #e0d7ef;
  --site-gold: #f2c46d;
  --site-canvas: #fbfaff;
  --site-surface: #ffffff;
  --site-surface-tint: #f6f2fb;
  --site-ink: #221f2e;
  --site-ink-soft: #585267;
  --site-line: #ebe6f2;
  --site-on-accent: #ffffff;
  --site-header: rgb(251 250 255 / .82);
  --site-hero-glow: #ecdff6;
  --site-band-from: #74408f;
  --site-band-to: #49265f;
  --site-band-ink: #ffffff;
  --site-band-ink-soft: rgb(255 255 255 / .82);
  --site-art-shadow: 0 20px 40px rgb(73 38 95 / .12);
  --site-shadow: 0 1px 2px rgb(73 38 95 / .06), 0 8px 24px rgb(73 38 95 / .08);
  --site-shadow-strong: 0 18px 50px rgb(73 38 95 / .16);
  --site-focus: #8650a3;

  --site-font: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --site-text-small: .875rem;
  --site-text-body: 1rem;
  --site-text-lead: 1.125rem;
  --site-text-h3: 1.125rem;
  --site-text-h2: clamp(1.75rem, 3.2vw, 2.25rem);
  --site-text-h1: clamp(2.4rem, 5.4vw, 3.75rem);
  --site-text-subtitle: clamp(1.15rem, 2vw, 1.4rem);
  --site-radius: 14px;
  --site-radius-lg: 20px;
  --site-radius-full: 999px;
  --site-header-height: 68px;
  --site-gutter: clamp(16px, 4vw, 32px);
}
html[lang="ar"] {--site-font: "Segoe UI", Tahoma, "Noto Sans Arabic", "Geeza Pro", system-ui, sans-serif}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --site-accent: #c7a4dc;
    --site-accent-strong: #e3cdef;
    --site-accent-soft: #2f2440;
    --site-accent-line: #3d3050;
    --site-canvas: #15131c;
    --site-surface: #1d1a27;
    --site-surface-tint: #1a1724;
    --site-ink: #f1edf7;
    --site-ink-soft: #b9b1c6;
    --site-line: #2e2a3b;
    --site-on-accent: #1a1022;
    --site-header: rgb(21 19 28 / .82);
    --site-hero-glow: #2a2038;
    --site-band-from: #4b2a62;
    --site-band-to: #2c1a38;
    --site-art-shadow: 0 20px 40px rgb(0 0 0 / .35);
    --site-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .3);
    --site-shadow-strong: 0 18px 50px rgb(0 0 0 / .45);
    --site-focus: #c7a4dc;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --site-accent: #c7a4dc;
  --site-accent-strong: #e3cdef;
  --site-accent-soft: #2f2440;
  --site-accent-line: #3d3050;
  --site-canvas: #15131c;
  --site-surface: #1d1a27;
  --site-surface-tint: #1a1724;
  --site-ink: #f1edf7;
  --site-ink-soft: #b9b1c6;
  --site-line: #2e2a3b;
  --site-on-accent: #1a1022;
  --site-header: rgb(21 19 28 / .82);
  --site-hero-glow: #2a2038;
  --site-band-from: #4b2a62;
  --site-band-to: #2c1a38;
  --site-art-shadow: 0 20px 40px rgb(0 0 0 / .35);
  --site-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .3);
  --site-shadow-strong: 0 18px 50px rgb(0 0 0 / .45);
  --site-focus: #c7a4dc;
}

*, *::before, *::after {box-sizing: border-box}
html {scroll-behavior: smooth; scroll-padding-top: calc(var(--site-header-height) + 12px)}
body.site {margin: 0; background: var(--site-canvas); color: var(--site-ink); font-family: var(--site-font); font-size: var(--site-text-body); line-height: 1.6; -webkit-font-smoothing: antialiased}
:where(.site) img {max-width: 100%; height: auto}
:where(.site) a {color: inherit}
:where(.site) :is(h1, h2, h3) {margin: 0; line-height: 1.2; color: var(--site-ink)}
:where(.site) p {margin: 0}
:where(.site) :is(ul, ol) {margin: 0; padding: 0; list-style: none}
:where(.site) :focus-visible {outline: 3px solid var(--site-focus); outline-offset: 3px; border-radius: 6px}
.site-wrap {width: min(1160px, 100%); margin-inline: auto; padding-inline: var(--site-gutter)}
.site-narrow {width: min(820px, 100%)}
.site-skip {position: absolute; inset-inline-start: 12px; top: -48px; z-index: 30; padding: 10px 14px; border-radius: var(--site-radius); background: var(--site-accent); color: var(--site-on-accent); font-weight: 700; text-decoration: none}
.site-skip:focus {top: 12px}
.site-icon {display: inline-flex; flex: none}
.site-icon svg {width: 100%; height: 100%}

/* Header */
.site-header {position: sticky; top: 0; z-index: 20; background: var(--site-header); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s}
.site-header.is-scrolled {border-bottom-color: var(--site-line); box-shadow: var(--site-shadow)}
.site-header-row {display: flex; align-items: center; gap: 24px; min-height: var(--site-header-height)}
.site-brand {display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 800; font-size: var(--site-text-lead); text-decoration: none; color: var(--site-ink)}
.site-brand img {border-radius: 9px}
.site-nav {display: flex; gap: 6px; margin-inline: auto}
.site-nav a {padding: 8px 12px; border-radius: var(--site-radius-full); color: var(--site-ink-soft); font-weight: 600; font-size: var(--site-text-small); text-decoration: none; transition: background-color .15s, color .15s}
.site-nav a:hover {background: var(--site-accent-soft); color: var(--site-accent-strong)}
.site-header-actions {display: flex; align-items: center; gap: 10px}
.site-switch {white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--site-radius-full); color: var(--site-ink-soft); font-weight: 600; font-size: var(--site-text-small); text-decoration: none}
.site-switch:hover {background: var(--site-accent-soft); color: var(--site-accent-strong)}
.site-switch .site-icon {width: 18px; height: 18px}
.site-menu {display: none; width: 42px; height: 42px; padding: 10px; border: 1px solid var(--site-line); border-radius: var(--site-radius-full); background: var(--site-surface); color: var(--site-ink); cursor: pointer}
.site-menu .site-icon {width: 20px; height: 20px}

/* Buttons */
.site-button {white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--site-radius-full); background: var(--site-accent); color: var(--site-on-accent); font-weight: 700; text-decoration: none; box-shadow: var(--site-shadow); transition: transform .15s, background-color .15s, box-shadow .15s}
.site .site-button {color: var(--site-on-accent)}
.site-button:hover {background: var(--site-accent-strong); transform: translateY(-1px); box-shadow: var(--site-shadow-strong)}
.site-button.is-small {min-height: 40px; padding: 8px 16px; font-size: var(--site-text-small)}
.site .site-button.is-secondary {border-color: var(--site-accent-line); background: var(--site-surface); color: var(--site-accent-strong); box-shadow: none}
.site-button.is-secondary:hover {background: var(--site-accent-soft)}
.site .site-button.is-light {background: var(--site-surface); color: var(--site-band-to)}
.site-button.is-light:hover {background: var(--site-accent-soft)}

/* Hero */
.site-hero {position: relative; overflow: hidden; padding-block: clamp(48px, 8vw, 96px) clamp(56px, 8vw, 104px); background: radial-gradient(60% 70% at 85% 30%, var(--site-hero-glow), transparent 70%), radial-gradient(40% 50% at 0% 100%, var(--site-accent-soft), transparent 70%)}
html[dir="rtl"] .site-hero {background: radial-gradient(60% 70% at 15% 30%, var(--site-hero-glow), transparent 70%), radial-gradient(40% 50% at 100% 100%, var(--site-accent-soft), transparent 70%)}
.site-hero-grid {display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(24px, 5vw, 64px)}
.site-eyebrow {display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 14px; border: 1px solid var(--site-accent-line); border-radius: var(--site-radius-full); background: var(--site-surface); color: var(--site-accent-strong); font-weight: 700; font-size: var(--site-text-small)}
.site-hero h1 {font-size: var(--site-text-h1); letter-spacing: -.02em}
html[lang="ar"] .site-hero h1 {letter-spacing: 0; line-height: 1.3}
.site-subtitle {margin-top: 14px; color: var(--site-accent); font-weight: 700; font-size: var(--site-text-subtitle)}
.site-lead {margin-top: 16px; max-width: 34em; color: var(--site-ink-soft); font-size: var(--site-text-lead)}
.site-actions {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px}
.site-points {display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; color: var(--site-ink-soft); font-weight: 600; font-size: var(--site-text-small)}
.site-points li {display: inline-flex; align-items: center; gap: 8px}
.site-points .site-icon {width: 18px; height: 18px; color: var(--site-accent)}
.site-hero-art {width: 100%; filter: drop-shadow(var(--site-art-shadow))}
html[dir="rtl"] .site-hero-art {transform: scaleX(-1)}

/* Sections */
.site-section {padding-block: clamp(56px, 8vw, 96px)}
.site-section.is-tinted {background: var(--site-surface-tint); border-block: 1px solid var(--site-line)}
.site-heading {max-width: 640px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center}
.site-heading h2 {font-size: var(--site-text-h2); letter-spacing: -.01em}
html[lang="ar"] .site-heading h2 {letter-spacing: 0}
.site-heading p {margin-top: 10px; color: var(--site-ink-soft); font-size: var(--site-text-lead)}
.site-cards {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px}
.site-card {padding: 26px; border: 1px solid var(--site-line); border-radius: var(--site-radius-lg); background: var(--site-surface); box-shadow: var(--site-shadow); transition: transform .2s, box-shadow .2s, border-color .2s}
.site-card:hover {transform: translateY(-3px); border-color: var(--site-accent-line); box-shadow: var(--site-shadow-strong)}
.site-card > .site-icon, .site-reason > .site-icon {width: 48px; height: 48px; padding: 12px; border-radius: var(--site-radius); background: var(--site-accent-soft); color: var(--site-accent)}
.site-card h3 {margin-top: 18px; font-size: var(--site-text-h3)}
.site-card p, .site-step p, .site-reason p {margin-top: 8px; color: var(--site-ink-soft)}
.site-steps {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: step}
.site-step {position: relative; padding: 24px; border-radius: var(--site-radius-lg); background: var(--site-surface); border: 1px solid var(--site-line)}
.site-step-number {display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--site-radius-full); background: var(--site-accent); color: var(--site-on-accent); font-weight: 800}
.site-step h3 {margin-top: 16px; font-size: var(--site-text-h3)}
.site-reasons {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px}
.site-reason {display: flex; gap: 18px; padding: 24px; border: 1px solid var(--site-line); border-radius: var(--site-radius-lg); background: var(--site-surface)}
.site-reason h3 {font-size: var(--site-text-h3)}
.site-faq {display: grid; gap: 12px}
.site-faq-item {border: 1px solid var(--site-line); border-radius: var(--site-radius); background: var(--site-surface)}
.site-faq-item summary {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-weight: 700; cursor: pointer; list-style: none}
.site-faq-item summary::-webkit-details-marker {display: none}
.site-faq-item summary .site-icon {width: 20px; height: 20px; color: var(--site-accent); transition: transform .2s}
.site-faq-item[open] summary .site-icon {transform: rotate(180deg)}
.site-faq-item p {padding: 0 20px 18px; color: var(--site-ink-soft)}

/* Portfolio and contact (shown only once the owner adds them) */
.site-works {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px}
.site-work {overflow: hidden; border: 1px solid var(--site-line); border-radius: var(--site-radius-lg); background: var(--site-surface); box-shadow: var(--site-shadow)}
.site-work img {display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--site-accent-soft)}
.site-work-body {padding: 20px 22px 24px}
.site-work-category {display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: var(--site-radius-full); background: var(--site-accent-soft); color: var(--site-accent-strong); font-weight: 700; font-size: var(--site-text-small)}
.site-work h3 {font-size: var(--site-text-h3)}
.site-work p {margin-top: 8px; color: var(--site-ink-soft)}
.site-contacts {display: flex; flex-wrap: wrap; justify-content: center; gap: 16px}
.site-contact-card {display: flex; align-items: center; gap: 14px; min-width: min(280px, 100%); padding: 18px 22px; border: 1px solid var(--site-line); border-radius: var(--site-radius-lg); background: var(--site-surface); text-decoration: none; box-shadow: var(--site-shadow); transition: transform .2s, border-color .2s}
.site-contact-card:hover {transform: translateY(-2px); border-color: var(--site-accent-line)}
.site-contact-card > .site-icon {width: 44px; height: 44px; padding: 11px; border-radius: var(--site-radius); background: var(--site-accent-soft); color: var(--site-accent)}
.site-contact-card strong {display: block}
.site-contact-card span span {color: var(--site-ink-soft)}
.site-actions .site-button .site-icon {width: 20px; height: 20px}

/* Courses, events, reviews and social links (shown only when added in the studio) */
.site-facts {display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; color: var(--site-ink-soft); font-size: var(--site-text-small)}
.site-facts li span {margin-inline-end: 4px; font-weight: 700; color: var(--site-ink)}
.site-course-foot {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px}
.site-price {color: var(--site-accent-strong); font-size: var(--site-text-lead)}
.site-event-when, .site-event-where {display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--site-accent); font-weight: 700; font-size: var(--site-text-small)}
.site-event-where {margin: 6px 0 0; color: var(--site-ink-soft); font-weight: 600}
.site-event-when .site-icon, .site-event-where .site-icon {width: 18px; height: 18px}
.site-stars {display: inline-flex; gap: 2px}
.site-star {display: inline-flex; width: 18px; height: 18px; color: var(--site-line)}
.site-star.is-on {color: var(--site-gold)}
.site-star.is-on svg {fill: currentColor}
.site-rating {display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 700}
.site-reviews {columns: 3 280px; column-gap: 18px}
.site-review {display: grid; gap: 12px; break-inside: avoid; margin-bottom: 18px; padding: 22px; border: 1px solid var(--site-line); border-radius: var(--site-radius-lg); background: var(--site-surface); box-shadow: var(--site-shadow)}
.site-review blockquote {margin: 0; color: var(--site-ink); font-size: var(--site-text-body)}
.site-review-photo {width: 100%; border-radius: var(--site-radius); border: 1px solid var(--site-line)}
.site-review-by {display: grid; color: var(--site-ink-soft); font-size: var(--site-text-small)}
.site-review-by strong {color: var(--site-ink)}
.site-social {display: flex; flex-wrap: wrap; gap: 8px}
.site-social-link {display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--site-line); border-radius: var(--site-radius-full); color: var(--site-ink-soft); transition: color .15s, border-color .15s, background-color .15s}
.site-social-link:hover {border-color: var(--site-accent-line); background: var(--site-accent-soft); color: var(--site-accent-strong)}
.site-social-link .site-icon {width: 20px; height: 20px}

/* Sign-in band and footer */
.site-band {padding-block: clamp(40px, 6vw, 64px); background: linear-gradient(120deg, var(--site-band-from), var(--site-band-to)); color: var(--site-band-ink)}
.site-band-row {display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap}
.site .site-band h2 {color: var(--site-band-ink); font-size: var(--site-text-h2)}
.site-band p {margin-top: 6px; color: var(--site-band-ink-soft); font-size: var(--site-text-lead)}
.site-footer {padding-block: 32px; border-top: 1px solid var(--site-line); color: var(--site-ink-soft); font-size: var(--site-text-small)}
.site-footer-row {display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap}
.site-footer-links {display: flex; flex-wrap: wrap; gap: 4px 16px}
.site-footer-links a {text-decoration: none; color: var(--site-ink-soft); font-weight: 600}
.site-footer-links a:hover {color: var(--site-accent-strong)}
.site-footer .site-switch {padding: 0}

/* Tablets and phones */
@media (max-width: 899px) {
  .site-menu {display: inline-flex}
  .site-nav {position: absolute; inset-inline: var(--site-gutter); top: calc(var(--site-header-height) - 6px); flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--site-line); border-radius: var(--site-radius); background: var(--site-surface); box-shadow: var(--site-shadow-strong); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility 0s .15s}
  .site-nav.is-open {visibility: visible; opacity: 1; transform: none; transition: opacity .15s, transform .15s}
  .site-nav a {padding: 12px 14px; font-size: var(--site-text-body)}
  .site-header-actions {margin-inline-start: auto}
  .site-hero-grid {grid-template-columns: 1fr}
  .site-hero-art {max-width: 460px; margin-inline: auto}
  .site-cards, .site-works {grid-template-columns: repeat(2, minmax(0, 1fr))}
  .site-steps {grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 599px) {
  .site-header-row {gap: 8px}
  .site-header .site-brand {gap: 8px; font-size: var(--site-text-body)}
  .site-header .site-brand img {width: 28px; height: 28px}
  .site-header-actions {gap: 4px}
  .site-header .site-switch {padding: 8px 6px}
  .site-header .site-button.is-small {padding: 8px 12px}
  .site-menu {width: 38px; height: 38px; padding: 8px}
  .site-cards, .site-steps, .site-reasons, .site-works {grid-template-columns: 1fr}
  .site-actions .site-button {flex: 1 1 100%}
  .site-band-row {flex-direction: column; align-items: stretch; text-align: center}
}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto}
  .site-card, .site-button, .site-nav, .site-faq-item summary .site-icon {transition: none}
}