/*
 * Wisext template - the site's look.
 *
 * Loaded after Cassiopeia's template.css (which includes Bootstrap 5), so
 * everything here overrides it. Change the look from the variables below
 * first; the sections that follow only use them.
 *
 * Sections: 1 variables · 2 base · 3 top bar · 4 header & menu ·
 *           5 content · 6 footer · 7 small screens
 */

/* ========== 1. Variables ========== */
:root {
  --wx-brand: #b3322a;        /* Wisext red: links, buttons, active menu */
  --wx-brand-dark: #8a2320;   /* hover states */
  --wx-accent: #d95d3b;       /* call-to-action buttons (.wisext_button) */
  --wx-ink: #1e2630;          /* text, top bar and footer background */
  --wx-muted: #5d6875;        /* secondary text */
  --wx-bg: #f4f5f7;           /* page background */
  --wx-surface: #fff;         /* header, menus */
  --wx-content-bg: #fff;      /* article / content panel and side cards */
  --wx-border: #e2e5e9;
  --wx-radius: 10px;
  --wx-radius-sm: 6px;
  --wx-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
  --wx-font: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Dimensions (desktop, 992px and wider; small screens keep their own values in section 7).
     Any CSS length: px, rem, %, vw, min(), clamp()... */
  --wx-max-width: 1240px;       /* site width: header, content and footer */
  --wx-topbar-height: 34px;     /* top bar (minimum) */
  --wx-header-height: 68px;     /* white header with logo and menu */
  --wx-logo-size: 44px;
  --wx-menu-gap: 18px;          /* space between two main menu items */
  --wx-content-top: 2rem;       /* space between the header and the content panel */
  --wx-content-bottom: 2.5rem;  /* space between the content panel and the footer */
  --wx-panel-padding: 2rem 2.25rem; /* inside the content panel: top/bottom left/right */
  --wx-footer-height: 90px;     /* footer (minimum) */

  /* Sections: the zones of forms and profile pages (<fieldset>), each a card whose
     title (<legend>) is a coloured band (rules in wisext.css) */
  --wx-section-band: #1e2630;          /* title band background */
  --wx-section-title: #ffffff;         /* title text */
  --wx-section-title-size: 1.05rem;
  --wx-section-bg: #ffffff;            /* zone background */
  --wx-section-border: #d5dae0;
  --wx-section-border-width: 1px;
  --wx-section-padding: 1.25rem;       /* inside the zone */
  --wx-section-gap: 1.5rem;            /* between two zones */

  /* Feed Cassiopeia's and Bootstrap's own variables */
  --cassiopeia-color-primary: var(--wx-ink);
  --cassiopeia-color-link: var(--wx-brand);
  --cassiopeia-color-hover: var(--wx-brand-dark);
  --cassiopeia-font-family-body: var(--wx-font);
  --cassiopeia-font-family-headings: var(--wx-font);
  --cassiopeia-font-weight-headings: 650;
  --link-color: var(--wx-brand);
  --link-color-rgb: 179, 50, 42;
  --link-hover-color: var(--wx-brand-dark);
  --link-hover-color-rgb: 138, 35, 32;
  --body-color: var(--wx-ink);
  --body-bg: var(--wx-bg);
}

/* ========== 2. Base ========== */
body.wisext {
  background: var(--wx-bg);
  color: var(--wx-ink);
  line-height: 1.6;
}

.wisext .grid-child {
  max-width: var(--wx-max-width);
}

.wisext a {
  text-underline-offset: .2em;
}

.wisext h1, .wisext h2, .wisext h3, .wisext h4 {
  line-height: 1.25;
  letter-spacing: -.01em;
}

.wisext .btn-primary {
  --btn-bg: var(--wx-brand);
  --btn-border-color: var(--wx-brand);
  --btn-hover-bg: var(--wx-brand-dark);
  --btn-hover-border-color: var(--wx-brand-dark);
  --btn-active-bg: var(--wx-brand-dark);
  --btn-active-border-color: var(--wx-brand-dark);
  background-color: var(--wx-brand);
  border-color: var(--wx-brand);
}

.wisext .btn-primary:hover,
.wisext .btn-primary:focus {
  background-color: var(--wx-brand-dark);
  border-color: var(--wx-brand-dark);
}

.skip-link:focus {
  position: absolute;
  z-index: 2000;
  top: .5rem;
  left: .5rem;
  padding: .5rem 1rem;
  background: var(--wx-surface);
}

/* ========== 3. Top bar ========== */
.wx-topbar {
  background: var(--wx-ink);
  color: #cfd5dc;
  font-size: .85rem;
}

.wx-topbar .grid-child {
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  min-height: var(--wx-topbar-height);
  padding: 0 1rem;
}

.wx-topbar a {
  color: #cfd5dc;
  text-decoration: none;
}

.wx-topbar a:hover,
.wx-topbar a:focus {
  color: #fff;
}

/* Layout option (Template settings > Top bar layout): modules then log in link,
   all on the right (default), split (modules left, log in right), left or centred */
.wx-topbar--split .grid-child {
  justify-content: space-between;
}

.wx-topbar--left .grid-child {
  justify-content: flex-start;
}

.wx-topbar--center .grid-child {
  justify-content: center;
}

/* Language switcher (mod_languages, inline) */
.wx-topbar .mod-languages ul {
  display: flex;
  gap: .9rem;
  margin: 0;
  padding: 0;
}

.wx-topbar .mod-languages li {
  margin: 0;
}

.wx-topbar .mod-languages li.lang-active a {
  color: #fff;
  font-weight: 600;
}

.wx-user-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* Member menu (Profile, Log out): a Bootstrap dropdown above the sticky header */
.wx-topbar {
  position: relative;
  z-index: 1030;
}

button.wx-user-link {
  padding: 0;
  border: 0;
  background: none;
  color: #cfd5dc;
}

button.wx-user-link:hover,
button.wx-user-link:focus,
button.wx-user-link[aria-expanded="true"] {
  color: #fff;
}

.wx-user-menu .dropdown-menu {
  min-width: 11rem;
  padding: .35rem;
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-radius-sm);
  box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
  font-size: .9rem;
}

.wx-topbar .wx-user-menu .dropdown-item {
  border-radius: 4px;
  color: var(--wx-ink);
}

.wx-topbar .wx-user-menu .dropdown-item:hover,
.wx-topbar .wx-user-menu .dropdown-item:focus {
  background: var(--wx-bg);
  color: var(--wx-brand);
}

/* ========== 4. Header & menu ========== */
.wisext .container-header {
  background: var(--wx-surface);
  background-image: none;
  border-bottom: 1px solid var(--wx-border);
  box-shadow: var(--wx-shadow);
  color: var(--wx-ink);
}

.wisext .container-header .grid-child {
  padding: 0 1rem;
}

.wx-header-main {
  align-items: center;
  gap: 2rem;
  min-height: var(--wx-header-height);
}

.wx-brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: .7rem;
  color: var(--wx-ink);
  text-decoration: none;
}

.wx-brand:hover {
  color: var(--wx-ink);
}

.wx-brand .brand-img {
  width: var(--wx-logo-size);
  height: var(--wx-logo-size);
  object-fit: contain;
}

.wx-brand-text,
.wx-brand-text p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.wx-brand-text strong {
  font-weight: 700;
}

.wx-nav {
  flex: 1;
  min-width: 0;
}

.wisext .container-header nav {
  margin-top: 0;
}

.wisext .container-header .mod-menu {
  color: var(--wx-ink);
  align-items: center;
}

.wisext .container-header .metismenu > li.level-1 {
  flex-wrap: nowrap;
  padding: 0 calc(var(--wx-menu-gap) / 2);
  font-size: .95rem;
}

.wisext .container-header .metismenu > li.level-1 > a,
.wisext .container-header .metismenu > li.level-1 > span {
  /* Links fill the header height (whatever they contain: text, flag, EPB arrow),
     so the header is exactly that tall and the active underline sits at its bottom */
  display: flex;
  align-items: center;
  min-height: var(--wx-header-height);
  padding: 0;
  color: var(--wx-ink);
  font-weight: 500;
}

.wisext .container-header .metismenu > li.level-1 > button {
  color: var(--wx-muted);
}

/* A menu item whose Link Class (menu item > Link Type) is "wx-menu-end" goes to the
   right end of the menu, e.g. « Se connecter » / « Mon compte » (desktop only) */
@media (min-width: 992px) {
  .wisext .container-header .metismenu > li.level-1:has(> a.wx-menu-end) {
    margin-left: auto;
  }

  .wisext .container-header .metismenu {
    width: 100%;
  }
}

/* Smaller dropdown caret */
.wisext .container-header .metismenu .mm-toggler:after {
  border-top-width: .32em;
  border-left-width: .32em;
  border-right-width: .32em;
  margin-inline-start: .35em;
}

.wisext .container-header .metismenu > li.level-1.active > a,
.wisext .container-header .metismenu > li.level-1 > a:hover,
.wisext .container-header .metismenu > li.level-1 > button:hover {
  color: var(--wx-brand);
}

/* Underline of the active/hovered item */
.wisext .container-header .metismenu > li > a:hover:after,
.wisext .container-header .metismenu > li > button:hover:before,
.wisext .container-header .metismenu > li.active > a:after,
.wisext .container-header .metismenu > li.active > button:before {
  background: var(--wx-brand);
  opacity: 1;
}

/* No underline on the dropdown caret button (it would overlap the text) */
.wisext .container-header .metismenu > li > button:before {
  display: none;
}

/* Dropdowns */
.wisext .container-header .metismenu ul .metismenu-item {
  padding: 0;
  font-size: .92rem;
}

.wisext .container-header .metismenu > li.level-1 > ul {
  min-width: 15rem;
  padding: .4rem;
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-radius-sm);
  background: var(--wx-surface);
  box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
}

.wisext .container-header .metismenu ul .metismenu-item > a,
.wisext .container-header .metismenu ul .metismenu-item > span {
  display: block;
  padding: .45rem .75rem;
  border-radius: 4px;
  color: var(--wx-ink);
  font-size: .92rem;
}

.wisext .container-header .metismenu ul .metismenu-item > a:hover,
.wisext .container-header .metismenu ul .metismenu-item.active > a {
  background: var(--wx-bg);
  color: var(--wx-brand);
  text-decoration: none;
}

/* Desktop with a mouse: open first-level dropdowns on hover (and keyboard
   focus), not only by clicking the caret. Deeper levels stay on click so
   the dropdown doesn't jump while the mouse moves down it. */
@media (min-width: 992px) and (hover: hover) {
  .wisext .container-header .metismenu > li.level-1.parent:hover > ul.mm-collapse,
  .wisext .container-header .metismenu > li.level-1.parent:focus-within > ul.mm-collapse {
    display: block;
    height: auto;
  }

  .wisext .container-header .metismenu > li.level-1.parent:hover > .mm-toggler:after {
    transform: rotateX(-180deg);
  }
}

.wisext .container-header .navbar-toggler {
  margin-left: auto;
  padding: .35rem .6rem;
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-radius-sm);
  color: var(--wx-ink);
}

/* Log in icon / member menu in the sticky header (option "Log in icon in the header").
   --scroll: shown only while the top bar is out of view (body.wx-topbar-out, js/wisext.js) */
.wx-header-user {
  flex-shrink: 0;
}

.wx-header-user .wx-user-link {
  padding: .25rem;
  border: 0;
  background: none;
  color: var(--wx-ink);
  font-size: 1.35rem;
  text-decoration: none;
}

.wx-header-user .wx-user-link:hover,
.wx-header-user .wx-user-link:focus,
.wx-header-user .wx-user-link[aria-expanded="true"] {
  color: var(--wx-brand);
}

.wx-header-user .dropdown-toggle::after {
  display: none;
}

.wx-header-user .dropdown-menu {
  min-width: 11rem;
  padding: .35rem;
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-radius-sm);
  box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
  font-size: .9rem;
}

.wx-header-user .dropdown-item {
  border-radius: 4px;
  color: var(--wx-ink);
}

.wx-header-user .dropdown-item:hover,
.wx-header-user .dropdown-item:focus {
  background: var(--wx-bg);
  color: var(--wx-brand);
}

.wx-header-user--scroll {
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
}

body.wx-topbar-out .wx-header-user--scroll {
  visibility: visible;
  opacity: 1;
}

/* Images in menu items (flags, EPB arrow) */
.wisext .container-header .metismenu img {
  max-height: 22px;
  width: auto;
}

/* Icon-only menu items (menu item option "Display Menu Item Title" = No,
   e.g. the search magnifying glass): no extra padding around the icon */
.wisext .container-header .metismenu-item > a > .p-2[aria-hidden="true"] {
  padding: 0 !important;
}

/* Cassiopeia clips menu links (overflow: hidden): let the EPB arrow tip show */
.wisext .container-header .metismenu-item > a.epb-menu-link {
  overflow: visible;
}

/* ========== 5. Content ========== */
.wisext .site-grid {
  margin-top: var(--wx-content-top);
  margin-bottom: var(--wx-content-bottom);
  padding: 0 1rem;
}

/* Cassiopeia caps its grid at 4 x 19.875rem: follow the site width instead */
@supports (display: grid) {
  .wisext .site-grid {
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, calc((var(--wx-max-width) - 5em) / 4))) [main-end] minmax(0, 1fr) [full-end];
  }
}

.wisext .site-grid .container-component {
  flex-direction: column;
  padding: var(--wx-panel-padding);
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-radius);
  background: var(--wx-content-bg);
  box-shadow: var(--wx-shadow);
}

.wisext .site-grid .container-component > main {
  min-width: 0;
}

.wisext .site-grid .card {
  --card-bg: var(--wx-content-bg);
  background-color: var(--wx-content-bg);
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-radius);
  box-shadow: var(--wx-shadow);
}

.wisext .page-header h1,
.wisext .page-header h2 {
  margin-bottom: 1rem;
}

.wisext main img {
  max-width: 100%;
  height: auto;
}

.wisext main iframe {
  max-width: 100%;
}

.wisext main table {
  max-width: 100%;
}

/* Joomla's form validation puts "Please fill in this field" inside the label, on its own
   line: on the login page, the first click outside the auto-focused username field
   then pushed the links below down during the click, and the click was lost (e.g.
   "Don't have an account?"). Keep it on the label's line so nothing moves. */
.wisext label .form-control-feedback {
  display: inline;
  margin-inline-start: .5rem;
  font-size: .875em;
}

/* Login page: even a wrapping message would move the links, so it takes no space at
   all there, at the right end of the label's line (its labels are short) */
.wisext .com-users-login .control-label label {
  position: relative;
  display: block;
}

.wisext .com-users-login label .form-control-feedback {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  margin: 0;
  white-space: nowrap;
}

/* Log in / reset / registration forms: narrow and centred */
.wisext .com-users-login,
.wisext .com-users-reset,
.wisext .com-users-remind {
  max-width: 34rem;
  margin: 0 auto;
}

/* Error page */
.wx-error {
  max-width: 40rem;
  margin: 1rem auto;
  text-align: center;
}

.wx-error h1 {
  font-size: 1.9rem;
}

.wx-error ul {
  display: inline-block;
  text-align: left;
}

.wx-error-code {
  margin: 0;
  color: var(--wx-brand);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
}

/* ========== 6. Footer ========== */
.wisext .footer.wx-footer {
  margin-top: auto;
  background: var(--wx-ink);
  background-image: none;
  color: #aeb6c0;
  font-size: .88rem;
}

.wisext .wx-footer .grid-child {
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  min-height: var(--wx-footer-height);
  padding: .75rem 1rem;
}

.wx-footer-main {
  flex: 1;
  min-width: 15rem;
}

.wx-footer-main p {
  margin: 0;
}

.wisext .wx-footer a:not(.btn) {
  color: #dfe3e8;
}

.wisext .wx-footer a:not(.btn):hover {
  color: #fff;
}

.wx-social {
  display: flex;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wx-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  text-decoration: none;
}

.wx-social a:hover {
  background: var(--wx-brand);
}

.wx-footer-end .mod-languages ul {
  display: flex;
  gap: .5rem;
  margin: 0;
  padding: 0;
}

.wx-footer-end .mod-languages li {
  margin: 0;
}

.wisext .back-to-top-link {
  border-color: var(--wx-border);
  color: var(--wx-ink);
}

.wisext .back-to-top-link:hover,
.wisext .back-to-top-link:focus {
  background: var(--wx-brand);
  color: #fff;
}

/* ========== 7. Small screens ========== */
/* Not enough room for the tagline next to a long menu: keep only the bold name */
@media (max-width: 1399.98px) {
  .wx-brand-text p {
    font-size: 0;
  }

  .wx-brand-text p strong {
    font-size: 1.05rem;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .wx-header-main {
    gap: 1rem;
  }

  /* Narrow desktop: never wider than 11px, or the menu would not fit */
  .wisext .container-header .metismenu > li.level-1 {
    padding: 0 calc(min(var(--wx-menu-gap), 11px) / 2);
    font-size: .86rem;
  }
}

@media (max-width: 991.98px) {
  /* Small screens: fixed dimensions, the Dimensions options are for desktop only */
  .wisext .grid-child {
    max-width: none;
  }

  .wx-topbar .grid-child {
    min-height: 34px;
  }

  .wx-header-main {
    gap: 1rem;
    min-height: 60px;
  }

  .wx-brand .brand-img {
    width: 40px;
    height: 40px;
  }

  .wisext .site-grid {
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 25%)) [main-end] minmax(0, 1fr) [full-end];
  }

  .wisext .wx-footer .grid-child {
    min-height: 0;
    padding: 1.25rem 1rem;
  }

  /* The opened menu drops down under the whole header (the sticky header
     is the positioning box, not .navbar) */
  .wisext .container-header .navbar {
    position: static;
    justify-content: flex-end;
  }

  .wisext .container-header .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    padding: .5rem 1rem 1rem;
    border-bottom: 1px solid var(--wx-border);
    background: var(--wx-surface);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
  }

  .wisext .container-header .metismenu > li.level-1 {
    flex-wrap: wrap;
    padding: 0;
    border-bottom: 1px solid var(--wx-border);
  }

  .wisext .container-header .metismenu > li.level-1:last-child {
    border-bottom: 0;
  }

  .wisext .container-header .metismenu > li.level-1 > a,
  .wisext .container-header .metismenu > li.level-1 > span {
    flex: 1;
    min-height: 0;
    padding: .7rem 0;
  }

  .wisext .container-header .metismenu > li.level-1 > button {
    padding: .7rem .5rem;
  }

  /* In the mobile menu, icon-only items (search) show their title again */
  .wisext .container-header .metismenu-item > a > .p-2[aria-hidden="true"] + .visually-hidden {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 .5rem !important;
    clip: auto !important;
    white-space: nowrap !important;
  }

  .wisext .container-header .metismenu > li.level-1 > ul {
    border: 0;
    box-shadow: none;
    padding: 0 0 0 1rem;
  }

  /* No column gap: Cassiopeia's 1em gap would add itself to the padding
     next to the empty side columns */
  .wisext .site-grid {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    padding: 0 .75rem;
    column-gap: 0;
  }

  .wisext .site-grid .container-component {
    padding: 1.25rem 1rem;
  }
}

@media (max-width: 575.98px) {
  /* Login page: no room for the message next to the label; the red label and border remain */
  .wisext .com-users-login label .form-control-feedback {
    display: none;
  }

  .wx-brand-text {
    font-size: .95rem;
  }

  .wx-brand-text p {
    display: none;
  }

  .wx-brand-text p:first-child {
    display: block;
  }
}