/*
 * Herzl Institute design on Cassiopeia.
 * Recreates the former Helix3 look: grey header band, blue menu bar and footer, Frank Ruhl Libre.
 * Logical properties (inline-start / inline-end) keep it correct in both Hebrew (RTL) and English (LTR).
 */

/* University of Haifa typography, as on zionchair.haifa.ac.il:
   text and menus in Edu Favorit Hebrew (the university's licensed brand font, Dinamo "Edu" edition),
   headings in Ezer Loft. Both files are served from this template; Assistant / Heebo are the brand fallbacks. */
@font-face {
  font-family: "Edu Favorit Hebrew";
  src: url("../fonts/EduFavoritHebrewVariable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ezer Loft";
  src: url("../fonts/EzerLoft-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --herzl-blue: #007398;
  --herzl-blue-light: #26aae1;
  --herzl-grey: #e7e7e7;
  --herzl-font: "Edu Favorit Hebrew", "Assistant", "Heebo", sans-serif;
  --herzl-font-headings: "Ezer Loft", "Edu Favorit Hebrew", "Assistant", "Heebo", sans-serif;

  --cassiopeia-color-primary: var(--herzl-blue);
  --cassiopeia-color-link: var(--herzl-blue);
  --cassiopeia-color-hover: var(--herzl-blue-light);
  --cassiopeia-font-family-body: var(--herzl-font);
  --cassiopeia-font-family-headings: var(--herzl-font-headings);
}

body {
  font-family: var(--herzl-font);
  color: #000;
  font-size: 1.03125rem; /* 16.5px, as on zionchair */
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--herzl-font-headings); font-weight: 400; color: #000; }
button, input, select, textarea { font-family: inherit; }

/* ---------- Header: grey band with name, languages, Facebook, search, university logo ---------- */
.container-header {
  background-color: var(--herzl-grey);
  background-image: none;
  box-shadow: none;
  color: #000;
}

.container-header .container-below-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 0.25rem;
}

.container-header .container-below-top > * { margin: 0; }
.container-header .container-below-top p { margin: 0; }

/* institute name (first) takes the free space; university logo sits at the far end */
.container-header .container-below-top > :first-child { flex: 1 1 22rem; }
.container-header .container-below-top img { max-width: 100%; height: auto; }
#mod-custom96 img { max-height: 48px; width: auto; }

/* language switcher: plain text links like the original */
.container-header .mod-languages ul { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.container-header .mod-languages a { color: #000; text-decoration: none; }
.container-header .mod-languages .lang-active a { text-decoration: underline; }

/* smart search box */
.container-header .mod-finder input[type="search"],
.container-header .mod-finder input[type="text"] {
  inline-size: 11rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0.3rem 0.5rem;
  font-family: inherit;
}
.container-header .mod-finder label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Menu bar: full-width blue band, white links ---------- */
/* The header must not cut off the dropdowns vertically; only the wide blue band is clipped sideways. */
.container-header { overflow-x: clip; overflow-y: visible; }

.container-header .container-nav {
  position: relative;
  background-color: var(--herzl-blue);
  padding-block: 0;
}
/* paint the band edge to edge while the menu itself stays in the content grid
   (a pseudo-element behind the bar; nothing is clipped vertically, so dropdowns stay visible) */
.container-header .container-nav::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--herzl-blue);
  z-index: -1;
}

/* dropdowns float above the page content */
.container-header .metismenu.mod-menu .mm-collapse { z-index: 1030; }

/* desktop: open a dropdown when the pointer is over its menu item, like the former Helix3 menu */
@media (hover: hover) and (min-width: 992px) {
  .container-header .metismenu.mod-menu > li.parent:hover > ul.mm-collapse,
  .container-header .metismenu.mod-menu > li.parent:focus-within > ul.mm-collapse {
    display: block;
    height: auto;
  }
}

.container-header .metismenu.mod-menu > li > a,
.container-header .metismenu.mod-menu > li > button,
.container-header .metismenu.mod-menu > li > .mm-toggler,
.container-header .navbar-toggler {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700; /* menu weight as on zionchair */
  line-height: 50px;
}
.container-header .metismenu.mod-menu > li > a:hover,
.container-header .metismenu.mod-menu > li > a:focus { color: #fff; text-decoration: underline; }
.container-header .navbar-toggler { border-color: rgba(255, 255, 255, 0.6); }

/* dropdowns: white panel, black text (as before) */
.container-header .metismenu.mod-menu .mm-collapse {
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.container-header .metismenu.mod-menu .mm-collapse a { color: #000; font-size: 1.05rem; }
.container-header .metismenu.mod-menu .mm-collapse a:hover { color: var(--herzl-blue); }

/* ---------- Banner (home page image rotator) ---------- */
.container-banner { margin-block-end: 1.5rem; }
.container-banner .sigplus-gallery { margin: 0 auto; }

/* ---------- Main body ---------- */
.site-grid { padding-block: 20px 30px; }
.com-content-article__body a, .blog a { color: var(--herzl-blue); }
.page-header h1, .page-header h2, .item-title a { color: #000; }

/* module titles (also used for modules loaded inside articles with the html5 style) */
.moduletable > h3,
.moduletable > .module-title,
.card-header {
  font-size: 1.625rem; /* 26px, as zionchair's section headings */
  font-weight: 400;
  margin: 0 0 1.5rem;
  padding-top: 5px;
  font-family: var(--herzl-font-headings);
  color: #000;
  background: none;
  border: 0;
}

/* ---------- Home page (article built from the former SP Page Builder page) ---------- */
.herzl-home-quote {
  font-family: var(--herzl-font-headings);
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.6;
  margin: 1.5rem auto 2.5rem;
  max-inline-size: 60rem;
}
.herzl-home-quote cite { display: block; font-style: normal; font-size: 1.15rem; }

.herzl-home-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 2rem 2.5rem;
  align-items: start;
}
.herzl-home-grid img { max-width: 100%; height: auto; }

/* The books module lays out its covers in a fixed-width table that floats right. On wide screens the column is
   wider than that table, and the paragraphs after it ("תערוכת על הקו" etc.) would start beside it instead of
   below. Everything after a floated table therefore starts below it, as on the original site. */
.herzl-home-grid .mod-custom > table[style*="float"] ~ * { clear: both; }

/* Grid columns may shrink below their content (otherwise the 697px books table widens the whole page on phones). */
.herzl-home-grid > * { min-width: 0; }

/* The books table: as wide as its column, but never wider than its original 697px.
   On narrow columns (tablet, phone) it shrinks and the covers shrink with it; on wide screens nothing changes. */
.herzl-home-grid table {
  width: 100% !important;
  max-width: 697px;
  height: auto !important;
  float: none !important;
  table-layout: fixed;
}
.herzl-home-grid table img { max-width: 100%; height: auto; }
@media (max-width: 767.98px) {
  .herzl-home-grid { grid-template-columns: 1fr; }
}

/* ---------- Footer: blue band, white text, gold stars on top ---------- */
.container-footer {
  background-color: var(--herzl-blue);
  background-image: none;
  color: #fff;
  position: relative;
  margin-top: 3rem;
}
.container-footer a { color: #fff; text-decoration: underline; }
.container-footer .grid-child { display: block; padding-block: 1rem 2rem; }

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  color: gold;
  text-align: center;
  position: absolute;
  inset-inline: 0;
  top: -2.6rem;
  line-height: 1;
}
.rating > span { display: inline-block; color: gold; font-size: 4rem; }

/* desktop shows the blue footer with stars; phones show the compact mobile footer (as originally intended) */
#mod-custom111 { display: none; }
@media (max-width: 767.98px) {
  #mod-custom98, #mod-custom100 { display: none; }
  #mod-custom111 { display: block; }
  .container-footer { background-color: #fff; color: #000; }
  .container-footer a { color: var(--herzl-blue); }
  .container-footer .grid-child { padding-block: 1rem; }
}