/*
 * Color palette
 */

:root {
  --bs-danger-rgb: 159, 19, 19;
  --bs-primary-rgb: 55, 106, 48;
  --bs-secondary-rgb: 255, 255, 255;
  --bs-primary: #376A30;
  --bs-link-color-rgb: 55, 106, 48;
  --bs-link-hover-color-rgb: 40, 89, 33;
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
  --bs-btn-bg: var(--bs-primary) !important;
  --bs-btn-hover-bg: var(--bs-primary) !important;
  --bs-btn-border-color: var(--bs-primary) !important;
  --bs-btn-active-bg: var(--bs-primary) !important;
  --bs-link-color-rgb: 255, 255, 255;
  --bs-link-hover-color-rgb: 230, 230, 230;
}


/*
 * Page width settings 
 */

/* Override bootstrap sass variables for container-max-width */
@media (min-width: 1400px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		max-width: 1140px;
	}
}

@media (min-width: 1200px) {
	.container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		max-width: 1140px;
	}
}

.ratio-4x3 {
  @media (min-width: 768px) {
    --bs-aspect-ratio: 33.33%; // 1x3
  }
}

/* Without this images like to pop-out*/
#content img {
	max-width: 100%;
}

/*
 * Caroussel settings 
 */

/* Makes caroussel buttons under caroussel */
.carousel-control-prev,
.carousel-control-next{
  align-self: flex-end; /* Aligns it at the bottom */
  padding-bottom: 10px;
}

/*
 * Card settings
 */

.card {
  padding: 0px 30px;
  position: relative;
  border-radius: 6px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/*
 * Fonts settings 
 */

/* Applies link-underline to a within a div, rather than a directly */
.link-underline a {
	text-decoration-color: rgba(var(--bs-link-color-rgb),var(--bs-link-underline-opacity,1)) !important;
}

h1, h2, h3, h4, h5 {
	--bs-text-opacity: 1;
	color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity)) !important;
	font-weight: bold;
}

/* enlarge body point size for charter for larger displays */
@media (min-device-width: 750px) {
    body {
        font-size: 20px;
        line-height: 1.5; /* default in FF is ~1.48, try seems a bit to sparse */
    }
    /* to match the other bootstrap workaround, below */
    blockquote {
        font-size: 18px;
    }
    /* UI elements should be a little more intrusive */
    .btn, .navbar, .footer {
        font-size: 22px;
		font-weight: bold;
    }
}

/* Font stacks from: https://modernfontstacks.com/#font-stacks */
.navbar, .footer, body {
	font-family: 'OpenDyslexic', Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
}

/*
 * Navbar
 */

/* Language switchers */
.language-switcher {
  font-size: 14px;
  background: #f8f8f8;
  color: #333;
  border-color: #ccc;
}

.language-switcher:hover {
  background: #e6e6e6;
}

/* Main buttons */
.action-button:hover {
  background: #e6e6e6;
}

/* In this case used for the language drop-down menu */
.dropdown-menu li a {
  font-size: 14px;
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  border-color: #ccc;
  white-space: nowrap;
}

.dropdown-menu {
	--bs-dropdown-bg: #fff;
	--bs-dropdown-border-color: #000;
}

.dropdown-menu li a:hover {
  background: #e6e6e6;
}

/* Usually is set automatically by bootstrap, but do it manually to let ikiwiki handle links */
.nav-link {
  --bs-nav-link-padding-y: 5px;
  --bs-nav-link-padding-x: 15px;
}

.nav-link li a, .nav-link .selflink {
	display: block;
	padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
 	font-size: var(--bs-nav-link-font-size);
 	font-weight: var(--bs-nav-link-font-weight);
	color: #FFFFFF;
 	text-decoration: none;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.nav-link .selflink {
	color: #a6a6a6;
}

.nav-link li a:hover, .nav-link .selflink:hover {
	color: #a6a6a6;
}