/* ======================================== */
/* ROOT VARIABLES */
/* ======================================== */
:root {
  --colour-white: hsla(0, 0%, 100%, 0.99);
  --colour-black: #000;
  --colour-dark: #212529;
  --colour-grey: #f7f7f7;
  --colour-muted: #676767;
  --colour-accent-blue: #333c62;

  --bs-primary: #333c62 !important;
  --bs-primary-rgb: 51, 60, 98 !important;

  --bs-warning: #f5802c;
  --bs-warning-rgb: 249, 115, 22;
}

/* ======================================== */
/* BASE TYPOGRAPHY */
/* ======================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1.5; /* optimized for mobile */
}

body {
  font-size: 15px; /* mobile-friendly base */
  color: var(--colour-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: 1.75rem; } 
h2 { font-size: 1.5rem; }  
h3 { font-size: 1.25rem; } 
h4 { font-size: 1.125rem; } 
h5 { font-size: 1rem; }     
h6 { font-size: 0.875rem; } 

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: 700;
  line-height: 1.2;
}

p, li {
  font-size: 15px;
  line-height: 1.5;
}

small, .caption {
  font-size: 13px;
  line-height: 1.4;
  color: var(--colour-muted);
}

/* ======================================== */
/* LINKS & TEXT STYLES */
/* ======================================== */
.text-muted {
  color: var(--colour-muted) !important;
  font-weight: 400;
}

.txt-justify { text-align: justify; }
.txt-white { color: var(--colour-white); }

::placeholder {
  color: #aaacae !important;
  opacity: 1;
}

/* ======================================== */
/* BUTTONS */
/* ======================================== */
.btn,
#cta {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}

/* Primary Buttons */
.btn.btn-primary,
button.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: var(--colour-white);
}
.btn.btn-primary:hover,
button.btn-primary:hover,
.btn.btn-primary:focus,
button.btn-primary:focus {
  background-color: #222f55 !important;
  border-color: #222f55 !important;
}

/* Outline Primary */
.btn.btn-outline-primary,
button.btn-outline-primary {
  background-color: transparent !important;
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.btn.btn-outline-primary:hover,
button.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
button.btn-outline-primary:focus {
  background-color: var(--bs-primary) !important;
  color: var(--colour-white) !important;
}

/* Warning Buttons */
.btn.btn-warning,
button.btn-warning {
  background-color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
  color: var(--colour-white) !important;
}
.btn.btn-warning:hover,
button.btn-warning:hover,
.btn.btn-warning:focus,
button.btn-warning:focus {
  background-color: #ea580c !important;
  border-color: #ea580c !important;
}

/* Outline Warning */
.btn.btn-outline-warning,
button.btn-outline-warning {
  background-color: transparent !important;
  color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
}
.btn.btn-outline-warning:hover,
button.btn-outline-warning:hover,
.btn.btn-outline-warning:focus,
button.btn-outline-warning:focus {
  background-color: var(--bs-warning) !important;
  color: var(--colour-white) !important;
}

/* ======================================== */
/* NAVBAR - MOBILE FIRST */
/* ======================================== */
#navbarOne {
  height: 80px;
  background-color: var(--bs-primary);
  /* padding: 0 1rem; */
}

#navbarOne .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

/* Logo */
#navbarOne img {
  max-height: 54px;
  width: auto;
  max-width: 35vw;
  object-fit: cover;
}

#navbarOne button {
  height: 42px;
}

/* Navbar links */
#navbarOne a,
#navbarOneMenuOffcanvas a {
  color: var(--colour-white);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  transition: color 0.2s ease;
}

#navbarOneMenuOffcanvas h5 {
  color: var(--colour-white);
}
#navbarOne a:hover,
#navbarOneMenuOffcanvas a:hover {
  color: var(--bs-warning);
}


.navbar-toggler {
  border: none;
  width: 50px;
  height: 50px;
  background: none;
  outline: none;
  box-shadow: none;
}

.navbar-toggler-icon {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox=\'0 0 30 30\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath stroke=\'white\' stroke-width=\'3\' stroke-linecap=\'round\' stroke-miterlimit=\'10\' d=\'M4 7h22M4 15h22M4 23h22\'/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.navbar-toggler:focus {
  outline: none; /* Removes the default focus outline */
  box-shadow: none; /* Removes any box shadow on focus */
}

/* Modal fullscreen menu */
#navbarOneMenuOffcanvas .modal-content {
  background-color: var(--bs-primary);
  padding-top: 3rem;
}

#navbarOneMenuOffcanvas .modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#navbarOneMenuOffcanvas .nav-link {
  margin-bottom: 0.75rem;
  font-size: 1.125rem; /* 18px */
  font-weight: 500;
}

#navbarOneMenuOffcanvas .btn.btn-warning {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Navbar close button */
#navbarOneMenuOffcanvas .offcanvas-header button {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  padding: 0;
  outline: none;
  box-shadow: none;
  z-index: 1050;
}
#navbarOneMenuOffcanvas .offcanvas-header button span {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg viewBox=\'0 0 16 16\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath stroke=\'white\' stroke-width=\'2\' stroke-linecap=\'round\' d=\'M2 2l12 12M14 2L2 14\'/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ======================================== */
/* MAKES.asp*/
/* ======================================== */
#imageContainer img {
  object-fit: cover;
}

/* ======================================== */
/* FOOTER */
/* ======================================== */
#footer a,
#footer h5, 
#footer p {
  color: var(--colour-white);
}

#footer a,
#footer p {
  font-weight: 500;
}

/* ======================================== */
/* SELECTS AND FORMS */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}