/* ==========================
   🎨 FÄRGVARIABLER
   ========================== */
:root {
  --color-primary: #795098;
  --color-secondary: #1b2c48;
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-secondary);
  --color-bg: #ffffff;
  --color-bg-light: #f8f9fa;
  --color-bg-subtle: #f5f4f4;
  --color-text: #1b2c48;
  --color-surface: #fafbfc;
}

/* ==========================
   🌐 GRUNDSTILAR
   ========================== */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}
a {
  color: var(--color-link);
}
a:hover,
a:focus {
  color: var(--color-link-hover);
}
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
}
.dropdown-menu {
  background-color: var(--color-surface);
}

/* ==========================
   🔘 BOOTSTRAP KOMPONENTER
   ========================== */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #5d3c78;
  border-color: #5d3c78;
  color: #fff;
}

.alert-primary {
  background-color: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-text);
}

/* ==========================
   🧩 MENY OCH NAVIGATION
   ========================== */
.navbar {
  background-color: var(--color-secondary);
}
.navbar .nav-link {
  color: #ffffff;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--color-link-hover);
}
.navbar-nav .nav-link.is-active {
  color: var(--color-primary);
  font-weight: bold;
}
.dropdown-menu .dropdown-item {
  color: var(--color-text);
  background-color: var(--color-surface);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: var(--color-primary);
  color: #fff;
}
.dropdown-menu .dropdown-item.disabled {
  color: #ccc;
}

.region-nav-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
#block-gobsubtheme-main-navigation {
  order: 1;
}
#block-gobsubtheme-account-menu {
  order: 2;
  margin-left: auto;
}
@media (max-width: 991.98px) {
  .region-nav-main {
    flex-direction: column;
    align-items: flex-start;
  }
  #block-gobsubtheme-account-menu {
    margin-left: 0;
    margin-top: 1rem;
  }
}

/* ==========================
   🖼 LOGO OCH MOBILANPASSNING
   ========================== */

header[role="banner"] {
  background: linear-gradient(to bottom, #fceee0 0%, #fff7f0 60%, #ffffff 100%);
  padding: 2rem 0;
}

.site-logo img {
  max-height: 100%;
  height: auto;
  width: auto;
  margin-top: 1rem;
  margin-bottom: 1;
  margin-left: -30px; /* Justera detta värde vid behov */
}
@media (max-width: 768px) {
  .site-logo {
    width: 100%;
  }
  .site-logo img {
    width: 100%;
    height: auto;
    max-height: none;
    margin-right: 0;
    margin-left: 0;
  }
  #navbarSupportedContent {
    width: 100%;
  }
}

/* ==========================
   🦶 FOOTER
   ========================== */
footer {
  background-color: var(--color-secondary);
  color: #ffffff;
  padding: 2rem 0;
}
footer a {
  color: #C2B3D9;
}

/* ==========================
   ✨ AKTIV OCH HOVER FÖR MENYLÄNKAR
   ========================== */
.navbar .nav-link.is-active {
  color: #C2B3D9; /* Ljus lila – tydlig mot mörk bakgrund */
  font-weight: bold;
  text-decoration: none;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #ffffff; /* Vit hover på mörkblå bakgrund */
  font-weight: bold;
  text-decoration: none;
}

/* ==========================
   🎯 MENYFÄRGER FRÅN PRICKARNA
   ========================== */

.navbar .nav-link {
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}

/* HEM – Lila aktiv, Röd hover */
.navbar .nav-item:nth-child(1) .nav-link.is-active {
  color: #7A4E9A;
}
.navbar .nav-item:nth-child(1) .nav-link:hover {
  color: #D1213C;
}

/* MEDLEMMAR – Röd aktiv, Orange hover */
.navbar .nav-item:nth-child(2) .nav-link.is-active {
  color: #D1213C;
}
.navbar .nav-item:nth-child(2) .nav-link:hover {
  color: #F09032;
}

/* NOTER – Gul aktiv, Lila hover */
.navbar .nav-item:nth-child(3) .nav-link.is-active {
  color: #F4B63A;
}
.navbar .nav-item:nth-child(3) .nav-link:hover {
  color: #7A4E9A;
}

/* ANMÄLAN – Orange aktiv, Ljuslila hover */
.navbar .nav-item:nth-child(4) .nav-link.is-active {
  color: #F09032;
}
.navbar .nav-item:nth-child(4) .nav-link:hover {
  color: #C2B3D9;
}

/* ==========================
   🎨 ÅTERSTÄLL NAVBAR-BAKGRUND
   ========================== */
.navbar {
  background-color: var(--color-secondary); /* Mörkblå */
}