/* =========================
   Global RTL Starter Styles
   ========================= */

/* Apply Hebrew Google Fonts */
body {
  font-family: "Assistant", "Alef", "Arial", sans-serif;
  direction: rtl;
  text-align: right;
  background-color: #f9f9f9;
  color: #222;
  line-height: 1.6;
}

/* Headings in Alef, body in Assistant */
h1, h2, h3, h4, h5, h6 {
  font-family: "Alef", sans-serif;
  font-weight: 700;
  margin-bottom: 1rem;
}

p, li, a, span {
  font-family: "Assistant", sans-serif;
}

/* Navbar tweaks */
.navbar-brand {
  font-family: "Alef", sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
}

.navbar-nav .nav-link {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

/* Add hover underline for links */
.navbar-nav .nav-link:hover {
  text-decoration: underline;
}

/* General content spacing */
.container {
  margin-top: 2rem;
  margin-bottom: 2rem;
}



html, body {
  height: 100%;
  margin: 0;
}

/* Flexbox wrapper */
body {
  display: flex;
  flex-direction: column;
}

/* Content area grows to fill space */
main {
  flex: 1;
}

/* Footer sticks to bottom */
footer {
    background-color: #559fd4;
    color: #fff;
    text-align: center;
    padding: 0.5rem 0;   /* smaller than default */
    font-size: 0.9rem;   /* optional: make text a bit smaller */
    line-height: 1.3;
    margin-top: auto;
}

html[dir="rtl"] .navbar .navbar-collapse.justify-content-start {
    justify-content: flex-start !important;
}

/* Make the nav list predictable (no surprises from margins) */
html[dir="rtl"] .navbar .navbar-nav {
    margin: 0;
    display: flex;
    gap: 0.5rem; /* spacing between items */
    align-items: center;
}

/* Optional: ensure brand stays on the visible side */
.navbar-brand {
    z-index: 2;
}

.class-tile {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40vw;          /* scales with screen on small devices */
    max-width: 180px;     /* cap size on small devices */
    aspect-ratio: 1 / 1;  /* keep perfect square */
    background-color: #559fd4;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 1rem;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-size: cover;
    background-position: center;
}

.class-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* scale up on medium screens (≥768px) */
@media (min-width: 768px) {
    .class-tile {
        width: 160px;
        font-size: 1.3rem;
    }
}

/* larger size on desktops (≥1200px) */
@media (min-width: 1200px) {
    .class-tile {
        width: 200px;
        font-size: 1.5rem;
    }
}

.class-a { background-image: url("images/class-a.jpg"); }
.class-b { background-image: url("images/class-b.jpg"); }
.class-c { background-image: url("images/class-c.jpg"); }
.class-d { background-image: url("images/class-d.jpg"); }
.class-e { background-image: url("images/class-e.jpg"); }
.class-f { background-image: url("images/class-f.jpg"); }
.stem-science { background-image: url("images/science.png"); }
.stem-technology { background-image: url("images/technology.jpg"); }
.stem-engineering { background-image: url("images/engineering.jpg"); }
.stem-math { background-image: url("images/math.jpg"); }