/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url("https://fonts.googleapis.com/css?family=Roboto");
@import url("https://use.typekit.net/ade4gee.css"); */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');
/* Wordmark face next to the logo icon, as on vispas.nl. */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

:root {
  --primary-color: #000;
  --primary-color-contrast: #fff;
  --primary-color-shade: #000;
  --primary-color-tint: #000;

  --secondary-color: #000;
  --secondary-color-contrast: #fff;
  --secondary-color-shade: #000;
  --secondary-color-tint: #000;

  --background-color: #fff;
  --text-color: #0f0f0f;
  --link-text-color: #102142;

  --border-color: #e6ebf0;


  --max-width: 1320px;

  /* vispas.nl: an 80px bar plus its 1px bottom border. */
  --navbar-height: 81px;
}


/* Sportvisunie's brand heading face, same file the main website serves.
   It has to be declared here, on the document: an @font-face inside a shadow
   root is ignored, so declaring it in the portal's own styles would do
   nothing. Font faces are document-scoped, so the portal picks this one up. */
@font-face {
  font-family: 'National';
  src: url('/fonts/National.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* The site's own headings, matching the portal's below. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'National', var(--heading-fallback, system-ui), sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body {
  background-color: var(--background-color) !important;
  min-height: 100vh;
  margin: 0px;
  font-family: "Inter Tight", sans-serif;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
}

.app-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1,
h2,
h3,
h4 {
  color: var(--secondary-color);
}

/* Boostrap overwrites */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover {
  background-color: var(--primary-color-tint);
  border-color: var(--primary-color-tint);
}

.btn-primary:active,
.btn-primary:focus {
  background-color: var(--primary-color-shade) !important;
  border-color: var(--primary-color-shade) !important;
  box-shadow: none;
}

.navbar-inner-container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.navbar-logo-container {
  height: 100%;
  width: fit-content;
  display: flex;
  align-items: center;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.navbar-brand-icon {
  height: 36px;
  width: auto;
}

.navbar-brand-wordmark {
  font-family: 'Anton', 'Impact', sans-serif;
  font-size: 40px;
  line-height: 1;
  text-transform: uppercase;
  color: #3053f9;
}

.navbar-items-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 0.9em;
}

.navbar-items-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.navbar-items-container a {
  color: var(--text-color);
  text-decoration: none;
}

.navbar-items-container a:hover {
  text-decoration: underline;
}

.small-footer {
  /* Pinned to the bottom on short pages. body is a 100vh column flex container
     and .content grows to fill it, but auto margin makes the footer's position
     independent of whether anything above it can actually grow. */
  margin-top: auto;
  flex: 0 0 auto;
  width: 100%;
  background-color: #fff;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--border-color);
  font-size: 0.875rem;
}

/* Bootstrap's .container tops out at 1140px, which left the footer links
   noticeably narrower than the navbar and the content above them. Match the
   1440px rail those use so the three line up. */
.small-footer-inner {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.content {
  max-width: 1440px;
  margin: 2rem auto;
  padding: 0 1.5rem;
  flex: 1;
  width: 100%;
}

.my-env-container {
  width: 100%;
}


/* FORMS */
.form-row {
  margin-left: 0;
  margin-right: 0;
}



@media (max-width: 1199.98px) {
  .content {
    padding-top: var(--navbar-height);
  }

  .navbar {
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 1020;
  }

  .offcanvas-collapse {
    position: fixed;
    top: var(--navbar-height);
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #fff;
    z-index: 1030;
    transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
  }

  .offcanvas-collapse.open {
    visibility: visible;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
/* Webshop cart shortcut. The portal's own navbar is hidden (the site owns the
   navigation), so the cart lives on the host page instead. */
.webshop-cart-container {
  display: none;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.cart-icon {
  width: 20px;
  height: 20px;
  background-color: #fff;
  -webkit-mask-image: url(/icons/basket-shopping-solid-full.svg);
  mask-image: url(/icons/basket-shopping-solid-full.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: inline-block;
  vertical-align: middle;
}

/* Contact: the address block and the form each read as their own thing, so on
   a wide screen they sit side by side rather than the form trailing a long
   scroll below the details. Stacks below the navbar's own breakpoint. */
.contact-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
}

/* Same side gutter as the navbar's narrow bar, so the content lines up with the logo. */
@media (max-width: 575.98px) {
  .content {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* The grid display would otherwise override `hidden`, showing the members-only
   form before the sign-in check has run. */
.contact-columns[hidden] {
  display: none;
}

@media (min-width: 992px) {
  .contact-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* Language selector: the flag replaces the globe icon on the toggle and sits
   in front of each name in the dropdown. Fixed dimensions with object-fit so a
   flag's own aspect ratio can't nudge the navbar's height around; the source
   images are 70x47, so 20x14 keeps roughly that ratio at the size of the other
   navbar icons. */
.navbar-language-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  vertical-align: middle;
}

.dropdown-menu-language .navbar-language-flag {
  margin-right: 0.5rem;
}

.dropdown-toggle-language .navbar-language-flag + #dropdown-toggle-language-text {
  margin-left: 0.35rem;
}