/* Arabic Learning Games - shared WordPress site theme V1 */

:root {
  color-scheme: light;
}

:root[data-alg-theme="dark"] {
  color-scheme: dark;
  --contrast: #edf3f8;
  --contrast-2: #c2cfda;
  --contrast-3: #8093a5;
  --base: #18344f;
  --base-2: #071b31;
  --base-3: #0d2741;
  --accent: #39c5c0;
  --gp-search-modal-bg-color: #102c47;
  --gp-search-modal-text-color: #edf3f8;
  --gp-search-modal-overlay-bg-color: rgba(1, 12, 24, 0.72);
}

.alg-site-theme-menu-item {
  display: inline-flex;
  align-items: center;
}

.alg-site-theme-toggle,
.alg-site-theme-toggle:hover,
.alg-site-theme-toggle:focus,
.alg-site-theme-toggle:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  box-shadow: none;
  cursor: pointer;
}

.alg-site-theme-toggle:hover,
.alg-site-theme-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #39c5c0;
}

.alg-site-theme-toggle:focus-visible {
  outline: 2px solid #ffb617;
  outline-offset: -3px;
}

.alg-site-theme-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root[data-alg-theme="dark"] body,
:root[data-alg-theme="dark"] .site,
:root[data-alg-theme="dark"] .site-content,
:root[data-alg-theme="dark"] .inside-article,
:root[data-alg-theme="dark"] .page-header,
:root[data-alg-theme="dark"] .paging-navigation {
  background-color: #071b31;
  color: #edf3f8;
}

:root[data-alg-theme="dark"] .entry-title,
:root[data-alg-theme="dark"] .entry-title a,
:root[data-alg-theme="dark"] .entry-content h1,
:root[data-alg-theme="dark"] .entry-content h2,
:root[data-alg-theme="dark"] .entry-content h3,
:root[data-alg-theme="dark"] .entry-content h4 {
  color: #edf3f8;
}

:root[data-alg-theme="dark"] .entry-content,
:root[data-alg-theme="dark"] .entry-content p,
:root[data-alg-theme="dark"] .entry-content li {
  color: #cbd7e3;
}

:root[data-alg-theme="dark"] .entry-content a:not(.button):not(.wp-block-button__link):not([class*="__button"]) {
  color: #39c5c0;
}

:root[data-alg-theme="dark"] input[type="text"],
:root[data-alg-theme="dark"] input[type="email"],
:root[data-alg-theme="dark"] input[type="url"],
:root[data-alg-theme="dark"] input[type="password"],
:root[data-alg-theme="dark"] input[type="search"],
:root[data-alg-theme="dark"] input[type="tel"],
:root[data-alg-theme="dark"] input[type="number"],
:root[data-alg-theme="dark"] textarea,
:root[data-alg-theme="dark"] select {
  border-color: #284761;
  background-color: #102c47;
  color: #edf3f8;
}

/* Homepage */
:root[data-alg-theme="dark"] .alg-home-hero {
  background: #0d2741;
}

:root[data-alg-theme="dark"] .alg-home-hero__copy h1,
:root[data-alg-theme="dark"] .alg-home-hero__navy-line {
  color: #edf3f8;
}

:root[data-alg-theme="dark"] .alg-home-hero__copy p {
  color: #cbd7e3;
}

:root[data-alg-theme="dark"] .alg-home-hero__logo {
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.22));
}

:root[data-alg-theme="dark"] .alg-games-home {
  background: #071b31;
}

:root[data-alg-theme="dark"] .alg-games-home__intro h2 {
  color: #edf3f8;
}

:root[data-alg-theme="dark"] .alg-games-home__intro p,
:root[data-alg-theme="dark"] .alg-game-card__body p {
  color: #c2cfda;
}

:root[data-alg-theme="dark"] .alg-game-card {
  border-color: rgba(139, 173, 201, 0.2);
  background: #102c47;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

:root[data-alg-theme="dark"] .alg-game-card:hover {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

:root[data-alg-theme="dark"] .alg-game-card__art {
  background: #0d2741;
}

:root[data-alg-theme="dark"] .alg-game-card--hangman h3,
:root[data-alg-theme="dark"] .alg-game-card--memory h3,
:root[data-alg-theme="dark"] .alg-game-card--scramble h3 {
  color: #62d4cf;
}

:root[data-alg-theme="dark"] .alg-game-card--search h3 {
  color: #ff806d;
}

:root[data-alg-theme="dark"] .alg-game-card--wordshake h3 {
  color: #ffc44c;
}

/* Arabic Games directory */
:root[data-alg-theme="dark"] .alg-games-directory {
  --alg-bg: #071b31;
  --alg-card: #102c47;
  --alg-text: #edf3f8;
  --alg-muted: #c2cfda;
}

:root[data-alg-theme="dark"] .alg-games-intro h1,
:root[data-alg-theme="dark"] .alg-directory-card--hangman h2,
:root[data-alg-theme="dark"] .alg-directory-card--memory h2,
:root[data-alg-theme="dark"] .alg-directory-card--scramble h2,
:root[data-alg-theme="dark"] .alg-directory-card--mystery h2 {
  color: #62d4cf;
}

:root[data-alg-theme="dark"] .alg-directory-card--search h2 {
  color: #ff806d;
}

:root[data-alg-theme="dark"] .alg-directory-card--wordshake h2 {
  color: #ffc44c;
}

:root[data-alg-theme="dark"] .alg-directory-card {
  border-color: rgba(139, 173, 201, 0.2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

:root[data-alg-theme="dark"] a.alg-directory-card:hover,
:root[data-alg-theme="dark"] a.alg-directory-card:focus-visible {
  border-color: rgba(98, 212, 207, 0.45);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

:root[data-alg-theme="dark"] .alg-directory-card__art {
  background: #0d2741;
}

:root[data-alg-theme="dark"] .alg-directory-card--mystery .alg-directory-card__art {
  background: radial-gradient(circle at 50% 46%, #173b59 0%, #102c47 58%, #0d2741 100%);
}

:root[data-alg-theme="dark"] .alg-directory-card--mystery .alg-directory-card__art::before {
  background: rgba(57, 197, 192, 0.1);
}

:root[data-alg-theme="dark"] .alg-directory-card--mystery .alg-directory-card__art::after {
  color: rgba(203, 215, 227, 0.16);
}

:root[data-alg-theme="dark"] .alg-directory-card__coming {
  border-color: rgba(57, 197, 192, 0.28);
  background: #173b59;
  color: #edf3f8;
}

/* About page */
:root[data-alg-theme="dark"] .alg-about {
  --alg-cream: #102c47;
  --alg-border: #284761;
  --alg-text: #edf3f8;
  --alg-muted: #c2cfda;
}

:root[data-alg-theme="dark"] .alg-about h2,
:root[data-alg-theme="dark"] .alg-about-brand strong,
:root[data-alg-theme="dark"] .alg-about-games a {
  color: #edf3f8;
}

:root[data-alg-theme="dark"] .alg-about-brand,
:root[data-alg-theme="dark"] .alg-about-feature,
:root[data-alg-theme="dark"] .alg-about-games a {
  border-color: #284761;
  background: #102c47;
}

:root[data-alg-theme="dark"] .alg-about-brand span,
:root[data-alg-theme="dark"] .alg-about-games small {
  color: #c2cfda;
}

:root[data-alg-theme="dark"] .alg-about-cta {
  background: #052951;
}

:root[data-alg-theme="dark"] .alg-about-cta h2,
:root[data-alg-theme="dark"] .alg-about-cta p {
  color: #ffffff;
}

/* Contact page */
:root[data-alg-theme="dark"] .alg-contact {
  --alg-cream: #102c47;
  --alg-border: #284761;
  --alg-text: #edf3f8;
  --alg-muted: #c2cfda;
}

:root[data-alg-theme="dark"] .alg-contact h2 {
  color: #edf3f8;
}

:root[data-alg-theme="dark"] .alg-contact-note,
:root[data-alg-theme="dark"] .alg-contact-form {
  border-color: #284761;
  background: #102c47;
}

/* Game wrappers: the iframe remains responsible for its own established theme. */
:root[data-alg-theme="dark"] body:has(iframe[src*="/games/arabic-"]),
:root[data-alg-theme="dark"] body:has(iframe[src*="/games/arabic-"]) .site,
:root[data-alg-theme="dark"] body:has(iframe[src*="/games/arabic-"]) .site-content,
:root[data-alg-theme="dark"] body:has(iframe[src*="/games/arabic-"]) .inside-article {
  background: #071b31;
}

:root[data-alg-theme="dark"] body:has(iframe[src*="/games/arabic-"]) .entry-title {
  color: #edf3f8;
}

:root[data-alg-theme="dark"] body:has(iframe[src*="/games/arabic-"]) .entry-content,
:root[data-alg-theme="dark"] body:has(iframe[src*="/games/arabic-"]) .entry-content > p:first-child,
:root[data-alg-theme="dark"] body:has(iframe[src*="/games/arabic-"]) .entry-content h2 + p {
  color: #c2cfda;
}

:root[data-alg-theme="dark"] body:has(iframe[src*="/games/arabic-"]) .entry-content h2 {
  color: #ffc44c;
}

@media (max-width: 767px) {
  .alg-site-theme-toggle,
  .alg-site-theme-toggle:hover,
  .alg-site-theme-toggle:focus,
  .alg-site-theme-toggle:active {
    width: 38px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-alg-theme="dark"] *,
  :root[data-alg-theme="light"] * {
    scroll-behavior: auto !important;
  }
}