/* Header, menus, footer and sign-in pages in the colours of the new home page (home-new.css).
   Loaded last by front.layouts.css only when HOME_NEW=true is in .env; without that line nothing here applies.
   Overrides only: the markup is untouched, so most rules need !important against main.css / theme-variables.css. */
:root{--n-navy:#2B2766;--n-deep:#110E36;--n-ink:#0A0826;--n-teal:#1BBDC9;--n-teal-l:#6FE6EE;--n-teal-d:#0d7480;--n-gold:#FFC93C;--n-muted:#B9B6E6;--n-text2:#5b5a7a;--n-line:#e1e3ef}

/* ---- header ---- */
header.main-header{background:var(--n-deep)!important;box-shadow:none!important;border:0!important}
.main-header .logo img{content:var(--logo-white);width:auto!important;height:40px!important;max-width:none}
header.main-header .menu-container .main-menu .menu_item a.menu_link:not(.none-line):not(.link-profile),header.main-header .main-menu.navbar__tow .nav-item a.nav-link{color:#dcdaf5!important;font-weight:700}
header.main-header .menu-container .main-menu .menu_item a.menu_link:not(.none-line):not(.link-profile):hover,header.main-header .menu-container .main-menu .menu_item a.menu_link.active:not(.none-line):not(.link-profile),header.main-header .main-menu.navbar__tow .nav-item a.nav-link:hover{color:var(--n-teal-l)!important}
.main-header .menu_link::after,.main-header .menu_link::before{background-color:var(--n-teal-l)!important}
.main-header .navbar__tow .bg_light_blue{background:var(--n-gold)!important;border-radius:999px!important;border:0!important}
header.main-header .main-menu.navbar__tow .nav-item.bg_light_blue a.nav-link,header.main-header .main-menu.navbar__tow .nav-item.bg_light_blue a.nav-link:hover{color:var(--n-ink)!important;background:var(--n-gold)!important;border-color:var(--n-gold)!important;border-radius:999px!important;font-weight:800}
.main-header .link-profile .text-dark,.main-header .link-profile i{color:#fff!important}
.main-header .header-mobile__toolbar i{color:#fff!important}
/* 992-1199px: the menu items used to break onto two lines; keep each on one line in a slightly smaller size */
@media(min-width:992px) and (max-width:1199.98px){
  header.main-header .menu-container .main-menu .menu_item a.menu_link:not(.none-line):not(.link-profile),header.main-header .main-menu.navbar__tow .nav-item a.nav-link{white-space:nowrap;font-size:13px!important;margin-inline:5px!important;padding-inline:4px!important}
  .main-header .logo img{height:34px!important}
}
/* dropdowns stay light cards */
.main-header .dropdown-menu{border:1px solid var(--n-line)!important;border-radius:14px!important;overflow:hidden}
header.main-header .main-menu .dropdown-menu a,header.main-header .main-menu .menu_item .dropdown-menu a.menu_link{color:var(--n-navy)!important}
header.main-header .main-menu .dropdown-menu a:hover{color:var(--n-teal-d)!important}
.main-header .dropdown-menu .notify-all,header.main-header .main-menu .dropdown-menu a.notify-all{background:var(--n-navy)!important;color:#fff!important}
/* the slide-in menu on phones */
@media(max-width:991.98px){
  .main-header .menu--mobile{background:var(--n-deep)!important}
  .main-header .menu--mobile .menu-container{border-color:rgba(255,255,255,.12)!important}
  .main-header .btn-close-header-mobile i{color:#fff!important}
  .main-header .menu--mobile .menu_item{border-color:rgba(255,255,255,.1)!important}
  .main-header .navbar__tow .bg_light_blue{display:inline-block;margin-top:8px}
  /* like the new home: the same logo size, the same three-line button (it was Font Awesome's bars-sort) turning into an X,
     and the menu opening under the header with the home's rows; the panel's own logo and X row is hidden */
  .main-header .logo img{height:32px!important;margin-block:4px}
  .main-header .header-mobile__toolbar i,.main-header .menu--mobile>.menu-container.d-lg-none{display:none!important}
  .main-header .header-mobile__toolbar{position:relative;left:-12px}
  .main-header .header-mobile__toolbar::before,.main-header .header-mobile__toolbar::after{content:"";display:block;width:26px;height:18px;box-sizing:border-box;background:linear-gradient(#fff,#fff) center/100% 3px no-repeat}
  .main-header .header-mobile__toolbar::before{border-block:3px solid #fff}
  .main-header .header-mobile__toolbar::after{position:absolute;inset:.5rem;opacity:0}
  .main-header .menu-mobile-active~.header-mobile__toolbar::before{border-color:transparent;transform:rotate(45deg)}
  .main-header .menu-mobile-active~.header-mobile__toolbar::after{opacity:1;transform:rotate(-45deg)}
  .main-header .menu--mobile{top:60px!important;height:auto!important;overflow-y:auto;transform:none!important;transition:opacity .2s,visibility .2s!important}
  .main-header .menu--mobile .menu-container.ms-auto .main-menu,.main-header .menu--mobile .navbar__tow{padding:8px 20px 0!important}
  .main-header .menu--mobile .menu-container.ms-auto .menu_item,.main-header .menu--mobile .navbar__tow .nav-item:not(.bg_light_blue){border-bottom:1px solid rgba(255,255,255,.1)}
  header.main-header .menu--mobile .menu-container.ms-auto .menu_item a.menu_link:not(.none-line):not(.link-profile),header.main-header .menu--mobile .navbar__tow .nav-item:not(.bg_light_blue) a.nav-link{font-size:17px!important;line-height:1.75!important;padding:10px 0!important;margin:0!important}
  .main-header .menu--mobile .menu_link.active::before{display:none}
  .main-header .menu--mobile .navbar__tow .bg_light_blue{margin:14px 0 20px}
}

/* ---- footer ---- */
footer.main-site-footer{background:var(--n-ink)!important}
.main-site-footer .btn-warning{background:var(--n-gold)!important;border-color:var(--n-gold)!important;color:var(--n-ink)!important;border-radius:999px!important;font-weight:800;padding-inline:26px}
.main-site-footer a:hover{color:var(--n-teal-l)!important}
.fixed-footer{background:var(--n-deep)!important}

/* ---- contact page social icons: theme-variables.css paints every link cyan !important, so they vanished on their cyan circles ---- */
.social-media.social-dark li a{background-color:var(--n-navy)!important}
.social-media.social-dark li a,.social-media.social-dark li a i{color:#fff!important}
.social-media.social-dark li a:hover{background-color:var(--n-teal-d)!important}
.social-media.social-dark{flex-wrap:wrap;row-gap:10px}

/* ---- sign in, sign up, password pages ---- */
.section-login .bg-login{background:radial-gradient(120% 90% at 50% 0%,#2B2766 0%,#110E36 55%,#0A0826 100%)!important}
.section-login .bg-login img{content:var(--logo-white);width:min(320px,62%)!important;height:auto!important}
.section-login .d-lg-none.bg-login{border-radius:18px;padding:34px 0;text-align:center;margin-bottom:22px}
.section-login .d-lg-none.bg-login img{display:inline-block;width:170px!important}
.section-login .title-section{color:var(--n-navy)!important;font-weight:900}
.section-login h4.text-danger{color:var(--n-text2)!important}
.section-login h4 a.text-dark{color:var(--n-teal-d)!important;font-weight:800}
.section-login .form-control{border:1.5px solid var(--n-line)!important;border-radius:12px!important}
.section-login .form-control:focus{border-color:var(--n-teal)!important;box-shadow:0 0 0 3px rgba(27,189,201,.2)!important}
.section-login .btn-primary{background:var(--n-gold)!important;border-color:var(--n-gold)!important;color:var(--n-ink)!important;border-radius:999px!important;font-weight:800!important}
.section-login .btn-primary span{color:var(--n-ink)!important}