/* =============================================
   MOBILE STYLES
   Mobile only (max-width: 991px)
   ============================================= */

@media (max-width: 991px) {

  /* --- Global mobile font override to Lato --- */
  body,
  body *:not(.icon-menu):not([class*="fa-"]):not([class*="icon-"]) {
    font-family: 'Lato', sans-serif !important;
  }

  h1, h2, h3, h4, h5, h6,
  p, a, span, li, td, th, label, input, button, select, textarea,
  .btn, .navbar, .nav, .footer, .sidebar,
  blockquote, figcaption, cite {
    font-family: 'Lato', sans-serif !important;
  }

  /* Override EB Garamond !important rules */
  #bannerIndex .left h1,
  .top-video h1,
  body p,
  .entry-content ul,
  .entry-content ol,
  .new-text-section h3,
  .new-text-section h4,
  #menu-main li a,
  #menu-top-meny li a,
  #menu-menu li a,
  #menu-top-meny-english li a,
  .wpml-ls-statics-shortcode_actions li a,
  .program-summary__text,
  #tabSection ul li {
    font-family: 'Lato', sans-serif !important;
  }

  /* --- Body top padding for fixed header --- */
  body {
    padding-top: 0 !important;
  }

  /* --- Mobile nav overlay panel — sits below the fixed header bar --- */
  #mobil-nav {
    display: none;
    position: fixed !important;
    top: 56px;
    left: 0;
    width: 92%;
    max-width: 345px;
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
    background: #ffffff;
    z-index: 99999998;
    overflow-y: auto;
    box-shadow: none;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #mobil-nav.is-open {
    display: block !important;
    transform: translateX(0);
  }

  /* --- Hide the menu panel header — header bar handles X + logo --- */
  .mobil-nav-header {
    display: none;
  }

  /* --- X close button — fixed, same position as hamburger --- */
  a.mobil-nav-close,
  a.mobil-nav-close.visible-xs,
  a.mobil-nav-close.visible-sm-block {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 9999999999;
    color: #000000;
    text-decoration: none !important;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: none !important;
    align-items: center;
  }

  body.mobil-menu-open a.mobil-nav-close,
  body.mobil-menu-open a.mobil-nav-close.visible-xs {
    display: flex !important;
  }

  .mobil-nav-close:hover,
  .mobil-nav-close:focus {
    color: #000;
    text-decoration: none !important;
  }

  /* --- Menu list (rendered by wp_nav_menu) --- */
  #mobil-nav ul.mobil-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  #mobil-nav ul.mobil-menu-list li {
    margin: 0;
    padding: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    position: relative;
  }

  #mobil-nav ul.mobil-menu-list li:last-child {
    border-bottom: 1px solid #e8e8e8;
  }

  #mobil-nav ul.mobil-menu-list li a,
  #mobil-nav ul.mobil-menu-list li a:visited {
    display: flex;
    align-items: center;
    height: 54px;
    padding: 0 25px;
    font-family: 'Lato', sans-serif !important;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000000;
    text-decoration: none;
    text-align: left;
    background: #ffffff;
    border: none;
    line-height: 54px;
  }

  #mobil-nav ul.mobil-menu-list li a:hover,
  #mobil-nav ul.mobil-menu-list li a:focus,
  #mobil-nav ul.mobil-menu-list li a:active,
  #mobil-nav ul li a:hover,
  #mobil-nav ul li a:focus,
  #mobil-nav ul li a:active {
    background: #ffffff !important;
    color: #555555 !important;
    text-decoration: none !important;
  }

  /* --- Chevron arrows on menu items (like Lammhults) --- */
  #mobil-nav ul.mobil-menu-list li a::after {
    content: '';
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #7c7d7a;
    border-bottom: 1.5px solid #7c7d7a;
    transform: translateY(-50%) rotate(-45deg);
  }

  /* --- Language switcher --- */
  .mobil-lang-switcher {
    padding: 8px 25px;
    font-family: 'Lato', sans-serif !important;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #000000;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 54px;
  }

  .mobil-lang-switcher a {
    color: #000000;
    text-decoration: none;
  }

  .mobil-lang-switcher a:hover {
    text-decoration: underline;
  }

  .mobil-lang-switcher .lang-active {
    font-weight: 700;
  }

  .mobil-linkedin-icon {
    margin-left: 16px;
    color: #000000;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
  }

  .mobil-linkedin-icon svg {
    width: 16px;
    height: 16px;
    fill: #000000;
  }

  .mobil-linkedin-icon:hover {
    color: #0077b5;
  }

  .mobil-linkedin-icon:hover svg {
    fill: #0077b5;
  }

  /* --- Backdrop overlay --- */
  .mobil-nav-backdrop {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    height: calc(100% - 56px);
    background: transparent;
    z-index: 99999997;
  }

  .mobil-nav-backdrop.is-open {
    display: block;
  }

  /* --- Hamburger button — LEFT side, fixed --- */
  a.mobile-nav-btn,
  a.mobile-nav-btn.visible-xs,
  a.mobile-nav-btn.visible-sm-block {
    position: fixed !important;
    top: 20px;
    left: 20px;
    right: auto !important;
    width: 22px;
    height: 16px;
    padding: 0 !important;
    background: transparent !important;
    border: none;
    z-index: 999999999;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    line-height: normal;
    color: transparent !important;
  }

  .mobile-nav-btn::before,
  .mobile-nav-btn::after {
    display: none;
  }

  .mobile-nav-btn .hamburger-line,
  .mobile-nav-btn.vit .hamburger-line,
  .mobile-nav-btn.svart .hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #000000 !important;
    border-radius: 0;
  }

  /* --- Mobile sticky header bar --- */
  .visible-xs.visible-sm-block.logofalt,
  div.logofalt.visible-xs,
  .logofalt {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 999999999;
    width: 100% !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 10px 72px !important;
    min-height: 56px;
    height: auto !important;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    pointer-events: none;
    transition: background 0.3s ease, padding 0.3s ease, min-height 0.3s ease, box-shadow 0.3s ease;
  }

  .logofalt a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    pointer-events: auto;
  }

  .logofalt svg {
    width: auto;
    height: 40px;
    max-width: 100%;
    transition: height 0.3s ease;
  }

  /* Front page: larger logo until scroll */
  body.home .logofalt svg,
  body.page-template-content-start .logofalt svg,
  body.page-template-content-start-eng .logofalt svg {
    height: 84px;
  }

  /* Compact on scroll */
  body.home .logofalt.scrolled,
  body.page-template-content-start .logofalt.scrolled,
  body.page-template-content-start-eng .logofalt.scrolled,
  .logofalt.scrolled {
    background: #ffffff;
    padding: 10px 72px !important;
    min-height: 56px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  }

  body.home .logofalt.scrolled svg,
  body.page-template-content-start .logofalt.scrolled svg,
  body.page-template-content-start-eng .logofalt.scrolled svg,
  .logofalt.scrolled svg {
    height: 40px;
  }

  /* Compact when menu is open */
  body.mobil-menu-open .logofalt {
    background: #ffffff;
    padding: 10px 72px !important;
    min-height: 56px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  }

  body.mobil-menu-open .logofalt svg {
    height: 40px;
  }

  /* Hide the Leading Impact logo on mobile header */
  .logofalt .m-li-logo {
    display: none !important;
  }

  /* --- Hide old mobile menu icon font character --- */
  .mobile-nav-btn.icon-menu::before {
    display: none !important;
  }

  /* --- Swap hamburger/X when menu is open --- */
  body.mobil-menu-open .mobile-nav-btn {
    display: none !important;
  }

  /* --- Body scroll lock when menu is open --- */
  body.mobil-menu-open {
    overflow: hidden;
  }

  /* --- Program summary rating: own row on mobile --- */
  .program-summary__rating,
  .program-summary__text {
    display: block !important;
    width: 100% !important;
  }

  .program-summary__rating {
    padding: 20px 0 !important;
    text-align: center;
  }

  /* --- Text align left on mobile --- */
  .textjustify {
    text-align: left !important;
  }

}