@charset "utf-8";
@import "../bootstrap/css/bootstrap.css";

/*ALGEMENE CSS*/

html {
	height: 100%;
}

body{
	background-color: #181818;
	color: #C0C0C0;
	
	min-height: 100%;
	
	display: flex;
	flex-direction: column;
}

footer{
	margin-top: auto;
	padding-top: 40px;
}

/*navbar*/
#navigatiebalk {
	background-color: #080808;
}

.nav-link {
white-space: nowrap
}

.navbar-dark .navbar-nav .nav-link:hover{
	color: #bb86fc;
}

.navbar-dark .navbar-nav .nav-link{
	font-size: 1.2rem;
}

.navbar-dark .navbar-nav .currentlink .nav-link:hover{
	color: white;
}

/*pulse animatie discord logo*/
.pulse {
   	animation: pulse 2.5s linear infinite;
}

@keyframes pulse {
	0% {
		transform: scale(1.2);
	}

	70% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.2);
	}
}
/*einde pulse animatie voor navbar discord logo*/

/*einde navbar*/

/*footer css*/
.big-title {
	font-size: 40px;
	color: white;
	padding-bottom:10px;
	text-align: center;
	font-weight: bold;
}

.footerContent{
	color: #bb86fc;
}

.btn-floating{
	font-size: 1.2rem;
	color: #bb86fc;
}

.btn-floating:hover{
	color: #bb86fc;
}
/*einde footer css*/

/*EINDE ALGEMENE CSS*/

/*INDEX CSS*/

/*grote foto index pagina*/
#intro {
    background: url("../pictures/index-photo.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 100dvh; /* Dynamic viewport height */
    -webkit-background-size: cover; /* WebKit compatibility */
    transform: translate3d(0, 0, 0); /* Force hardware acceleration */
}

/* Mobile-specific styles */
@media only screen and (max-width: 768px) {
    #intro {
        background-attachment: scroll; /* Avoid fixed attachment */
        background: url("../pictures/index-photo-mobile.png"); /* Optional: mobile-optimized image */
        background-size: cover;
        background-position: center center;
        -webkit-background-size: cover;
    }
}

/* Ensure scroll for mobile devices */
@media only screen and (max-width: 768px) {
    #intro {
        background-attachment: scroll; /* Fallback for Chrome iOS */
    }
}

/*EINDE INDEX CSS*/

.teamrosterButton a.btn:focus,
.teamrosterButton a.btn:active,
.teamrosterButton a.btn.show,
.teamrosterButton a.btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 6px #bb86fc !important;  /* red glow */
  border: 1px solid #bb86fc !important;    /* red border */
  border-radius: 4px;
  background-color: #121212;
  color: #bb86fc;
}

.teamrosterButton a.btn {
  transition: all 0.2s ease-in-out;
}

/*EINDE TEAMROSTER CSS */

.container.marginable{
    margin-top: 98px;
}

/*PARTNERS CSS*/
.partners{
	padding-top:30px; 
}

.partnerLogo{
	float: left;
	padding-right: 30px;
	border-radius: 45%;
	height: 150px;
}

.partners-naam{
	padding-bottom: 120px;
	color: white;
	font-weight: bold;
}

.partners-social{
	font-size: 1.3rem;
	color: #bb86fc;
	text-decoration: none;
}

.disabled-social{
	color:gray;
}

.disabled-social:hover{
	color:gray;
}
/*EINDE PARTNERS CSS*/

.big-title-appf{
	color: white;
	font-weight: bold;
}

.modal-header, .modal-body {
	background-color: #080808;
}  

.form-label{
	color: white;
	padding-top: 10px;
}

.applyButton{
	margin-top: 20px;
	background-color: #bb86fc;
	color: white;
	border: 1px solid #181818;
    transition: all 0.2s ease-in-out;
}

.applyButton:focus,
.applyButton:active {
  outline: none;
  border: 1px solid #bb86fc !important;   /* red border */
  box-shadow: 0 0 6px #bb86fc !important; /* red glow */
  background-color: #bb86fc;              /* keep red background */
  color: white;                           /* keep white text */
}

.applyButton:hover{
	background-color: white;
	color: #bb86fc;
	border-color: black;
}

.modal-title{
	color:white;
	font-size: 13px;
}

.ZEN{
	border-radius: 50%;
}

.faq{
	padding-bottom: 10px;
}

.bi-caret-down-fill{
	font-size: 20px;
}

input[type=text], input[type=url], input[type=email]{
	width:100%;
}

input{
	margin-bottom: 10px;
}

form{
	display: none;
}

form.active{
	display: block;
}

.xButton{
	background-color: #bb86fc;
}

.discord{
    background: url('../pictures/discord-gray.png');
        display: block;
            width: 30px;
            height: 30px;
            background-image: url('../pictures/discord-gray.png');
            background-size: cover; /* Fills the area, might crop */
            /* OR */
            background-size: 100% 100%; /* Stretches to fit */
            background-repeat: no-repeat;
            background-position: center;
}

.discord:hover {
    background-image: url('../pictures/discord.png'); /* Red image on hover */
}

/* Navbar search form container */
form[role="search"] {
  height: 40px;             /* smaller height */
  display: flex;
  align-items: center;      /* vertically center input & button */
  padding-top: 8px;         /* tweak this to align perfectly */
}

/* Search input */
.navbar-search-input {
  height: 100%;             /* match form height */
  width: 569px;
  max-width: 100%;
  font-size: 0.9rem;        /* slightly smaller font */
  line-height: 1.1;
  padding: 0 8px;           /* horizontal padding only */
  background-color: #121212;
  border: none;
  box-sizing: border-box;   /* include padding inside height */
}

/* Search button */
.navbar-search-button {
  height: 100%;             /* match form height */
  width: 32px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

}

/* Search icon */
.navbar-search-button i {
  color: #bb86fc;
  font-size: 0.6rem;
}

/* Hover effect on icon */
.navbar-search-button:hover i {
  color: white;
}

.navbar-nav .nav-link{
  padding-top: 0;   /* remove vertical padding */
  padding-bottom: 0;
  padding-left: 0.5rem;  /* keep some horizontal padding */
  padding-right: 0.5rem;
  line-height: 32px;     /* match height of search bar */
  margin-bottom: 5px;
}

.navbar-nav .nav-item{
  padding-top: 25px;   /* remove vertical padding */
  padding-bottom: 0;
  line-height: 32px;     /* match height of search bar */

}

/* Search input background and text */
.navbar-search-input {
  background-color: #121212;  /* dark background matching navbar */
  color: #C0C0C0;             /* light gray text like your nav links */
  border: none;
}

/* Placeholder text color */
.navbar-search-input::placeholder {
  color: #666666;             /* medium gray placeholder */
  opacity: 1;
}

/* Search button icon color (default and hover) */
.navbar-search-button i {
  color: #bb86fc;             /* red like active nav link */
  transition: color 0.3s ease;
}

.navbar-search-button:hover i {
  color: #fff;                /* white on hover */
}

.navbar-search-button {
  background-color: transparent; /* no background by default */
  border: none;                   /* no border */
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding-bottom: 5px;
}

/* Icon color */
.navbar-search-button i {
  color: #bb86fc;                 /* red icon by default */
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

/* Hover effect */
.navbar-search-button:hover {
  color: #bb86fc;      /* red background on hover */
  border-radius: 4px;
}

.navbar-search-button:hover i {
  color: #fff;                   /* icon turns white on hover */
}

.navbar-search-input {
  background-color: #121212;    /* dark navbar background */
  color: #C0C0C0;               /* same light gray as nav links */
  border: none;
  outline: none;                /* remove default outline */
  box-shadow: none;
}

/* Placeholder text color */
.navbar-search-input::placeholder {
  color: #C0C0C0;               /* medium gray placeholder */
  opacity: 1;
}

/* On focus, add red border instead of blue outline */
.navbar-search-input:focus {
  border: 1px solid #bb86fc;   /* red border */
  outline: none;               /* remove default blue outline */
  box-shadow: 0 0 5px #bb86fc; /* subtle red glow */
  background-color: #121212;   /* keep background same */
  color: #bb86fc;              /* optional: text turns red on focus */
}

@media (max-width: 1200px) {  /* LG breakpoint or custom */
  .navbar-search-input {
    width: 100%;     /* shrink to container */
  }
}

/* Ensure parent li allows clicks */
.nav-item.flex-grow-1 {
  min-width: 0;      /* important for flex-grow in Bootstrap */
}

/* Form fills width */
form[role="search"] {
  width: 100%;
  display: flex;
  align-items: center;
}