/* Onderstaande code definieert kleuren die door gebruikt worden door de custom
rode skin en VOCUS Nitro */
:root {
  --vocus-red: #c10009;
  --vocus-medium-red: #750005;
  --vocus-dark-red: #851811;
  --vocus-red-fg: #ffffff;
  --vocus-red-contrast: #000000;
  --vocus-gray: #22262D;
  --vocus-gray-fg: #ffffff;
  --vocus-gray-contrast: #000000;
  --vocus-dark-gray: #191C21;
  --vocus-gray-accent: #374151;
}

/* Deze code zorgt ervoor dat alles de juiste VOCUS kleuren gebruikt */
a { color: var(--vocus-red); }
a:hover { color: var(--vocus-medium-red); }
a:focus { color: var(--vocus-medium-red); }
a:active { color: var(--vocus-medium-red); }

.btn-primary {
  background: var(--vocus-red);
  color: var(--vocus-red-fg);
  border-color: var(--vocus-medium-red);
}
.btn-primary:hover {
  border-color: var(--vocus-medium-red);
}

.btn-primary:hover { background: var(--vocus-medium-red); }
.btn-primary:focus { background: var(--vocus-medium-red); }
.btn-primary:active { background: var(--vocus-medium-red); }

.headline :is(h1, h2, h3, h4, h5, h6) {
  border-bottom: 2px solid var(--vocus-red) !important;
}

footer .headline {
  border-bottom: 1px solid var(--vocus-gray-accent) !important;
}

/* Deze code stond er al, en doet:
- zorgt ervoor dat plaatjes in de evenementen module niet gecropt worden.
- zorgt ervoor dat een heading img (breed plaatje bovenaan pagina) een vaste hoogte heeft.
*/
.module-events .paragraphs .img-responsive { 
  object-fit: contain !important;
  object-position: center; 
}
.heading-image { 
  padding-bottom: 25%; 
  height: 600px;
}

/* Fix voor gecropte afbeeldingen in de nieuwsfeed (is zelfde als bovenstaand) */
.publication-item .embed-responsive .embed-responsive-img,
.heading-image img {  
  object-fit: contain !important;  
}

/* VOCUS skin voor Congressus, geschreven door Robin. */

/* De header: rood!! */
body > header {  
  background: var(--vocus-red);
}

/* Het menu:
- geen rood streepje meer onder items
- standaard wit op rood
- muisover maakt het zwart op wit
- maak de pijltjes ook dezelfde kleuren als de tekst
*/
.sf-menu li {  
  border-bottom: none !important;  
}
.sf-menu > li > ul {  
  border-top: none !important;  
}  
.sf-menu a {  
  color: var(--vocus-red-fg);  
}  
.sf-menu > li:hover,
.sf-menu > li.sfHover {  
  background: var(--vocus-red-fg);  
}
.sf-menu > li:hover a,
.sf-menu > li.sfHover a,
.sf-menu > li ul li a {  
  color: var(--vocus-red-contrast) !important;
}
.sf-menu.sf-arrows .has-submenu:not(.sfHover) .sf-with-ul::after {
  border-top-color: var(--vocus-red-fg) !important;
}

/* Modiel menu:
- standaard wit op rood
- geopende menu items zien eruit als bij muisover
- geselecteerd item is dikgedrukt, en niet rood op rood
- iets meer marge aan de linkerkant
*/
.navbar-toggle,
.top-mobile a,
.submenu-trigger {
  color: var(--vocus-red-fg) !important;
}
.navbar-toggle {
  border-color: var(--vocus-red-fg) !important;
}
.sf-menu
:is(li:hover, li.has-submenu.is-active)
:is(.submenu-trigger, a) {
  color: var(--vocus-red-contrast) !important;
}
.sf-menu li.active a {
  color: var(--vocus-red-fg) !important;
  font-weight: bold !important;
}
.sf-menu li.active:hover a {
  color: var(--vocus-red-contrast) !important;
}
li.has-submenu.is-active a {
  color: var(--vocus-red-contrast);
}
li.has-submenu.is-active {
  background: var(--vocus-red-fg);
}
.navbar-collapse.in > ul > li > a {
  padding-left: 10px !important;
}

/* Zorgt ervoor dat het menu een stuk breder is */
header .container {  
  margin: 0;  
  width: 100%;  
}
.header-nav,  
.header-nav-top .login p {  
  max-width: 1536px;  
  margin: 0 auto !important;
}

/*
De login balk bovenin:
- positionering
- standaard wit op donkerrood
- muisover maakt het zwart op wit
*/
.header-nav-top .login {  
  background: var(--vocus-dark-red);  
  margin: -10px -20px;  
  padding: 0 2em;  
  margin-bottom: 2em !important;  
}
.header-nav-top .login p {  
  color: var(--vocus-red-fg) !important;
}
.header-nav-top .login p a {  
  color: var(--vocus-red-fg) !important;
  line-height: 2.2;
}
.header-nav-top .login p a,
.header-nav-top .login p:not(:has(a)) {
  padding: 0.5em !important;
}
.header-nav-top .login p a:hover {  
  color: var(--vocus-red-contrast) !important;  
  background: var(--vocus-red-fg) !important;  
}

/* De footer: wit op donkergrijs */
  
footer {  
  background: var(--vocus-gray);  
  color: var(--vocus-gray-fg);
}
footer a,
section#copyright a {  
  color: var(--vocus-gray-fg);
}  

/* Klein donkerder balkje onderaan */
section#copyright {  
  background: var(--vocus-dark-gray);  
  color: var(--vocus-gray-fg);
}

/* Centreert de tekst */
section#copyright .container > div {  
  justify-content: center !important;  
}

/* Haalt het congressus logo weg*/
section#copyright .container > div > div:last-child {  
  display: none !important;  
}

/* Fix besturen & commissiebattle alignment */
#content:has(.besturen) img,
#content:has(.comissiebattle) img {
  width: 100% !important;
  height: auto;
  object-fit: contain !important;
  aspect-ratio: 4/3;
}

#content:has(.comissiebattle) img {
  object-fit: cover !important;
}

/* Feedback van Ilse: hoofdletters op inlogscherm */
.checkbox label:first-letter {
  text-transform: capitalize;
}

/* Vastgesteld aspect-ratio op de homepagina afbeeldingen,
   zodat alle gezichten zichtbaar zijn op alle schermgroottes. */
#carousel-homepage.carousel .carousel-inner .item {
  height: auto !important;
  aspect-ratio: 16/6 !important;
}

/* De volgende CSS is voor het mooi maken van de homepagina */

/* Congressus is kut. Dit zorgt ervoor dat alle random ruimte
om de inhoud van de homepagina niet in de weg zit. */
#carousel-homepage {
  margin: 0 !important;
}
:is(.row,.col-md-12,.container):has(.homepage-container) {
  width: 100%;
  margin: 0 !important;;
  padding: 0 !important;
}

/* Het grote rode deel bovenaan de homepagina met de titel en knoppen */
.homepage-title {
  font-weight: normal !important;
  font-style: italic;
  max-width: 600px;
}
.homepage-title b {
  font-style: normal;
}
.homepage-container {
  padding: 1px;
  background: var(--vocus-red);
  color: var(--vocus-red-fg);
}
.homepage-box {
  padding: 15px;
  max-width: 1140px;
  margin: 40px auto;
  position: relative;
  z-index: 10;
  margin-bottom: -10px;
}
.homepage-container::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  background: var(--vocus-red);
  height: 95px;
  transform: rotate(-3deg);
  margin-top: -50px;
  width: 110vw;
}
.homepage-box a {
  display: inline-block;
  font-weight: bold;
  background: var(--vocus-dark-red);
  color: var(--vocus-red-fg);
  padding: 10px 20px;
  border-radius: 4px;
  margin-right: 5px;
  margin-top: 1.5em;
}
.homepage-box a:hover {
  opacity: .8;
  text-decoration: none;
}

/* Zorgt ervoor dat de drop-shadow van de header weg is op de homepagina,
zodat hij mooi overloopt het titelvak. */
:has(.homepage-container) header {
  box-shadow: none !important;
}