/* Gloshjälp – gemensam hamburgarmeny och gemensamma popup-rutor */

.menu-toggle {
  position: fixed !important;
  top: 14px !important;
  left: 0 !important;
  z-index: 2200 !important;
  width: 42px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  background: rgba(15,23,42,.92) !important;
  color: #fff !important;
  font-size: 1.55rem !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.22) !important;
}

.side-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 2190 !important;
  width: min(290px,82vw) !important;
  height: 100vh !important;
  box-sizing: border-box !important;
  padding: 76px 18px 24px !important;
  background: #eaf6fb !important;
  border-right: 1px solid rgba(7,89,133,.18) !important;
  box-shadow: 10px 0 30px rgba(0,0,0,.20) !important;
  transform: translateX(-100%) !important;
  transition: transform .22s ease !important;
}

.side-menu.open { transform: translateX(0) !important; }
.side-menu nav { display:flex !important; flex-direction:column !important; gap:10px !important; }

.side-menu a,
.side-menu button {
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
  border:1px solid #cfe8f3 !important;
  border-radius:10px !important;
  padding:.8rem .9rem !important;
  background:#fff !important;
  color:#075985 !important;
  text-align:left !important;
  text-decoration:none !important;
  font:inherit !important;
  font-weight:650 !important;
  cursor:pointer !important;
  box-shadow:0 3px 10px rgba(7,89,133,.08) !important;
}

.side-menu a:hover,
.side-menu button:hover {
  background:#dff2fa !important;
  color:#034b70 !important;
  border-color:#9fd5e8 !important;
}

.side-menu .menu-home-link { margin-bottom:16px !important; }

.menu-backdrop {
  display:none;
  position:fixed;
  inset:0;
  z-index:2180;
  background:rgba(15,23,42,.32);
}
.menu-backdrop.show { display:block; }

.news-backdrop,
.contact-backdrop,
.about-backdrop {
  display:none;
  position:fixed;
  inset:0;
  z-index:2300;
  background:rgba(15,23,42,.68);
  padding:1rem;
  align-items:center;
  justify-content:center;
}
.news-backdrop.show,
.contact-backdrop.show,
.about-backdrop.show { display:flex; }

.news-modal,
.contact-modal,
.about-modal {
  width:min(720px,100%);
  max-height:calc(100vh - 2rem);
  overflow-y:auto;
  background:#fff;
  border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  color:#0f172a;
}

.contact-modal,
.about-modal { width:min(620px,100%); }

.news-header,
.contact-header,
.about-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1.3rem 1.5rem .8rem;
}

.news-header h2,
.contact-header h2,
.about-header h2 {
  margin:0;
  font-size:1.65rem;
}

.news-close,
.contact-close,
.about-close {
  border:0 !important;
  background:#e2e8f0 !important;
  width:2.4rem !important;
  height:2.4rem !important;
  min-width:2.4rem !important;
  padding:0 !important;
  border-radius:999px !important;
  font-size:1.5rem !important;
  line-height:1 !important;
  cursor:pointer !important;
  color:#0f172a !important;
  box-shadow:none !important;
  flex:0 0 2.4rem !important;
}

.news-body,
.contact-body,
.about-body {
  padding:0 1.5rem 1.5rem;
  color:#334155;
  line-height:1.6;
}

.news-highlight {
  margin:1rem 0;
  padding:1rem 1.1rem;
  border:1px solid #cfe8f3;
  border-radius:14px;
  background:#f3f9fc;
}
.news-highlight p { margin:.55rem 0; }

.contact-mail {
  display:inline-block;
  margin:.2rem 0 1rem;
  color:#0369a1;
  font-weight:700;
}

.share-copy-box {
  white-space:pre-line;
  padding:.9rem 1rem;
  border-radius:12px;
  background:#f1f5f9;
  border:1px solid #cbd5e1;
  margin:.6rem 0;
}

.copy-share-btn {
  border:0;
  border-radius:999px;
  padding:.55rem 1rem;
  background:#075985;
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.about-thanks { font-weight:700; }

@media(max-width:640px) {
  .menu-toggle { top:10px !important; width:40px !important; height:42px !important; }
  .side-menu { width:min(280px,86vw) !important; }
  .news-header h2,.contact-header h2,.about-header h2 { font-size:1.35rem; }
}


/* ===== Centrala menyfixar 2026-09-30 ===== */

/* Menyknappen ska alltid ligga ovanpå den utfällda menyn. */
.menu-toggle {
  z-index: 2210 !important;
}

.menu-toggle.menu-open {
  left: 238px !important;
  top: 14px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  font-size: 1.7rem !important;
  line-height: 1 !important;
}

/* E-postadressen i Kontakt ska vara en vanlig diskret länk,
   oavsett generella länk-/knappregler på den aktuella sidan. */
.contact-modal a.contact-mail,
.contact-body a.contact-mail {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0369a1 !important;
  font: inherit !important;
  font-weight: 700 !important;
  line-height: inherit !important;
  text-decoration: underline !important;
}

.contact-modal a.contact-mail:hover,
.contact-body a.contact-mail:hover {
  background: transparent !important;
  color: #075985 !important;
  box-shadow: none !important;
  text-decoration: underline !important;
}

@media(max-width:640px) {
  .menu-toggle.menu-open {
    left: min(228px, calc(86vw - 52px)) !important;
    top: 12px !important;
  }
}

/* Counter: samma hamburgare och kryss som i lärarportalen.
   Påverkar endast menyknappen, inte menyinnehåll eller funktion. */
#menuToggle.menu-toggle {
  min-width: 42px !important;
  min-height: 44px !important;
  padding: 0 !important;
  background: #0f172a !important;
  font: 700 24px/1 system-ui, sans-serif !important;
  text-align: center !important;
}
#menuToggle.menu-toggle.menu-open {
  min-width: 38px !important;
  min-height: 38px !important;
  font: 700 24px/1 system-ui, sans-serif !important;
}
@media (max-width:640px) {
  #menuToggle.menu-toggle:not(.menu-open) {
    min-width: 40px !important;
    min-height: 42px !important;
  }
}