:root {
  --site-max: 1600px;
  --content-max: 1100px;
  --space-bg: #020713;
  --neon-cyan: #16ecff;
  --neon-blue: #006fea;
  --neon-violet: rgba(103, 45, 255, 0.72);
  --text-light: #ecfeff;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--space-bg);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: Arial, "Heebo", sans-serif;
  background: var(--space-bg);
  color: var(--text-light);
  overflow-x: hidden;
}

a {
  color: inherit;
}

/*
  דף הבית בדסקטופ נכנס כולו בתוך חלון הדפדפן ללא גלילה.
  תמונת 16:9 נשמרת ביחס המקורי ולא נמתחת לפי רוחב המסך.
*/
.home-page {
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.home-stage {
  position: relative;
  height: min(100dvh, 56.25vw, 900px);
  width: auto;
  max-width: var(--site-max);
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  overflow: hidden;
  background-color: var(--space-bg);
  background-image: url("images/home-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  box-shadow: 0 0 55px rgba(0, 22, 80, 0.42);
}

/*
  ה-SPIN-OFF נמצא נמוך יותר בקובץ home-bg.png לעומת סקיצת הייחוס.
  לכן הניווט ממוקם מתחת לכותרת בפועל ולא לפי הקואורדינטות של הסקיצה.
  הכפתורים נשארים קטנים וקומפקטיים: 3×2.
*/
.home-nav {
  position: absolute;
  left: 14.2%;
  top: 42.5%;
  width: 30%;
  height: 30%;
  display: grid;
  grid-template-columns: repeat(3, 20%);
  grid-template-rows: repeat(2, auto);
  justify-content: space-between;
  align-content: space-between;
  direction: ltr;
}

.nav-card {
  justify-self: stretch;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 7px;
  border: 1.5px solid var(--neon-cyan);
  border-radius: 14%;
  background: linear-gradient(180deg, rgba(0, 144, 243, 0.96), rgba(0, 72, 201, 0.98));
  color: #58f7ff;
  text-decoration: none;
  text-align: center;
  font-size: clamp(0.72rem, 0.9vw, 0.92rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(73, 44, 255, 0.55),
    0 0 6px rgba(22, 236, 255, 0.95),
    0 0 14px var(--neon-violet),
    0 0 21px rgba(0, 105, 255, 0.30),
    inset 0 0 10px rgba(94, 246, 255, 0.16);
  text-shadow: 0 0 7px rgba(62, 244, 255, 0.55);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.nav-card:hover,
.nav-card:focus-visible {
  transform: translateY(-2px) scale(1.025);
  filter: brightness(1.08);
  outline: none;
  box-shadow:
    0 0 0 1px rgba(73, 44, 255, 0.65),
    0 0 9px rgba(22, 236, 255, 1),
    0 0 19px rgba(103, 45, 255, 0.88),
    0 0 28px rgba(0, 105, 255, 0.40),
    inset 0 0 13px rgba(94, 246, 255, 0.22);
}

.nav-card:active {
  transform: scale(0.96);
}

.status-toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 18px);
  padding: 9px 16px;
  border: 1px solid rgba(22, 236, 255, 0.82);
  border-radius: 999px;
  background: rgba(2, 15, 43, 0.94);
  color: #8ef8ff;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 14px rgba(22, 236, 255, 0.35);
  transition: opacity 160ms ease, transform 160ms ease;
}

.status-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* מעטפת לעמודים פנימיים — לא נמרחת על כל המסך */
.content-shell {
  width: min(calc(100% - 32px), var(--content-max));
  margin-inline: auto;
}

/* תשתית לעמוד HTML אמיתי שמיועד גם ל-PDF A4 */
.a4-page {
  width: min(100%, 210mm);
  min-height: 297mm;
  margin-inline: auto;
  padding: 14mm;
  background: #ffffff;
  color: #111111;
}

/*
  טאבלט ומובייל: אין ניסיון לדחוס את כל מסך הדסקטופ לתוך טלפון.
  תמונת הפתיחה נשמרת למעלה והניווט עובר מתחתיה בצורה קומפקטית.
*/
@media (max-width: 900px) {
  .home-page {
    height: auto;
    min-height: 100dvh;
    display: block;
    overflow-y: auto;
  }

  .home-stage {
    width: 100%;
    height: auto;
    min-height: 100dvh;
    max-width: none;
    aspect-ratio: auto;
    padding-top: calc(56.25vw + 24px);
    padding-bottom: 34px;
    background-size: 100% auto;
    background-position: top center;
    box-shadow: none;
  }

  .home-nav {
    position: static;
    width: min(calc(100% - 40px), 330px);
    height: auto;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, 74px);
    grid-template-rows: none;
    justify-content: center;
    align-content: initial;
    gap: 17px 20px;
  }

  .nav-card {
    width: 74px;
    font-size: 0.8rem;
  }
}

/* מובייל: 2×3, קומפקטי ולא מקצה לקצה */
@media (max-width: 560px) {
  .home-stage {
    padding-top: calc(56.25vw + 18px);
    padding-bottom: 28px;
  }

  .home-nav {
    width: min(calc(100% - 32px), 210px);
    grid-template-columns: repeat(2, 74px);
    gap: 15px 22px;
  }

  .nav-card {
    width: 74px;
    font-size: 0.78rem;
  }

  .content-shell {
    width: min(calc(100% - 24px), var(--content-max));
  }

  .status-toast {
    bottom: 18px;
    max-width: calc(100% - 32px);
    text-align: center;
  }
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  html,
  body {
    background: #ffffff !important;
  }

  .no-print,
  .status-toast {
    display: none !important;
  }

  .a4-page {
    width: 210mm;
    min-height: 297mm;
    margin: 0;
    padding: 14mm;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .a4-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .print-break {
    break-before: page;
    page-break-before: always;
  }
}