/* ==========================================================================
   Kita Beis "Shining Star" — shared classroom theme
   Every project links to this file so the whole collection looks like one set.
   Override colors per project with a <style> block, don't edit this file
   unless the change should apply everywhere.
   ========================================================================== */

:root {
  /* Night sky */
  --sky-deep:   #101a3f;
  --sky:        #1e2f6b;
  --sky-soft:   #38509d;

  /* Stars */
  --gold:       #ffc531;
  --gold-warm:  #ffa41b;
  --gold-pale:  #fff3d1;

  /* Paper */
  --paper:      #fdfbf6;
  --paper-edge: #ece5d8;
  --ink:        #23283a;
  --ink-soft:   #5d6478;

  /* Accents for variety between projects */
  --mint:       #2fb98c;
  --berry:      #e0557b;
  --grape:      #7a5cc4;

  --radius:     18px;
  --radius-sm:  10px;
  --shadow:     0 6px 20px rgba(16, 26, 63, 0.13);
  --shadow-lg:  0 14px 40px rgba(16, 26, 63, 0.22);

  /* Big and friendly — these get read from across a classroom */
  --font-body:    "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  --font-display: "Baloo 2", "Trebuchet MS", "Segoe UI", sans-serif;
  --font-hebrew:  "Guttman Yad", "Narkisim", "David", "Times New Roman", serif;
}

* { box-sizing: border-box; }

/* The hidden attribute has to win over the display rules set below. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}

/* Starry background — use on hub pages and project splash screens */
body.night {
  color: var(--paper);
  background:
    radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,.85), transparent),
    radial-gradient(2px 2px at 78% 14%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 34% 68%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 62% 82%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.5px 1.5px at 88% 56%, rgba(255,255,255,.55), transparent),
    linear-gradient(170deg, var(--sky) 0%, var(--sky-deep) 100%);
  background-attachment: fixed;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }

a { color: var(--sky-soft); }
body.night a { color: var(--gold); }

.wrap { width: min(1100px, 92vw); margin: 0 auto; padding: 2rem 0 4rem; }

/* --- Buttons -------------------------------------------------------------
   Sized for small fingers and smartboard taps: nothing under 56px tall.     */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 56px;
  padding: .75rem 1.75rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sky-deep);
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-warm) 100%);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(1px); }
.btn:disabled { filter: grayscale(.7); opacity: .6; cursor: default; transform: none; }
.btn:focus-visible { outline: 4px solid var(--sky-soft); outline-offset: 3px; }

.btn.secondary {
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--paper-edge);
  font-size: 1rem;
  min-height: 48px;
}
body.night .btn.secondary {
  color: var(--paper);
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.28);
}

.btn.huge { min-height: 96px; padding: 1rem 3rem; font-size: 1.8rem; border-radius: 40px; }

/* --- Cards --------------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  color: var(--ink);
}

/* --- Back link ----------------------------------------------------------- */
.back-link {
  display: inline-block;
  margin: 1.25rem 0 0 1.5rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}
.back-link:hover { background: rgba(255,255,255,.26); }
body:not(.night) .back-link { background: var(--paper-edge); color: var(--ink); }

/* --- Hebrew --------------------------------------------------------------
   Wrap Hebrew text in <span class="hebrew"> or set dir="rtl" on a section.  */
.hebrew {
  font-family: var(--font-hebrew);
  direction: rtl;
  unicode-bidi: isolate;
  font-size: 1.25em;
  line-height: 1.9;
}
[dir="rtl"] { text-align: right; }

/* --- Helpers ------------------------------------------------------------- */
.center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--ink-soft); }
body.night .lead { color: rgba(255,255,255,.78); }
.stack > * + * { margin-top: 1rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}