/* --------------------------------------- */
/* 🌍 Global styles                        */
/* --------------------------------------- */
body {
  background-color: #ffffff;
  font-family: 'Quicksand', sans-serif;
}

/* --------------------------------------- */
/* 🧠 Typography                           */
/* --------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif;
}

/* Reduce boldness of primary nav text */
.header a,
.header .link,
.header__link {
  font-weight: 600 !important; /* Try 400 (normal) or 500 (medium) */
}

/* --------------------------------------- */
/* 🔼 Header and navigation styling        */
/* --------------------------------------- */
.header {
  background-color: #2c327d;
  font-size: 3px;
  font-family: 'Open Sans';
  font-weight: 600 !important;
}

/* Force logo block to align left */
.header__block--logo {
  margin-right: auto !important;
}

/* Force logo to scale larger */
.header__logo img {
  max-width: 800px !important;
  height: auto !important;
}

/* Add vertical padding around header */
div.sizer {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

/* --------------------------------------- */
/* 📐 Navigation spacing tweaks            */
/* --------------------------------------- */

/* Remove extra spacing added by dropdown container on 'ABOUT' */
.header__block--dropdown {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* Remove spacing between 'ABOUT' and next menu item */
.header__block--dropdown + .header__block--menu {
  margin-left: 50px !important;
}

/* Add consistent gap between main nav items */
.link-list {
  display: flex;
  gap: 40px; /* Adjust spacing between nav links */
  margin-right: 6px !important; /* Space before login button */
}

/* Remove gap before first item */
.link-list__link:first-child {
  margin-left: 0;
}

/* --------------------------------------- */
/* ⬇️ Dropdown menu                       */
/* --------------------------------------- */
.dropdown__menu {
  min-width: 256px !important;
  width: auto !important;
}

/* --------------------------------------- */
/* 🔘 Buttons                              */
/* --------------------------------------- */
.k-button,
.button,
.btn,
.k-btn {
  background-color: #e8a415 !important;
  color: #ffffff !important;
  border: none;
}

/* --------------------------------------- */
/* 🔒 Login button styling                 */
/* --------------------------------------- */

/* Normal state */
.user__login {
  background-color: #ffffff !important;
  color: #2c327d !important;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  transition: background-color 0.3s ease;
  font-size: 14px;
}

/* Hover state */
.user__login:hover {
  background-color: #f4a041 !important;
  color: #2c327d !important;
}

/* Ensure nested <a> also switches colour on hover */
.user__login:hover a {
  color: #2c327d !important;
}

.user__login a {
  color: #2c327d !important;
}

/* Show dropdown on hover only */
.dropdown:hover .dropdown__menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important; /* in case transform is used */
}

/* Let ABOUT link be clickable */
.dropdown__trigger {
  pointer-events: auto !important;
}

/* 🛠️ Lock ABOUT nav item dimensions and style regardless of href state */
.dropdown__trigger {
  display: inline-block;
  width: 80px;                  /* Hard lock width */
  text-align: center;
  color: #f4a041 !important;    /* Ensure consistent colour */
  transition: none !important;  /* Suppress flicker */
}

/* Align dropdown icon for all triggers */
.dropdown__trigger .dropdown__icon {
  margin-left: 6px;
}

/* Add spacing between blog hero image and post content */
.blog-post-body__content {
  margin-top: 40px; /* adjust as needed */
}

/* Add spacing between blog post content and optin */
.blog-post-optin {
  margin-top: 40px; /* adjust as needed */
}

/* 🔶 Force orange hover for specific buttons */
.btn.btn--solid:hover,
.btn--solid:hover,
.btn--medium:hover,
.btn--auto:hover {
  background-color: #d8960b !important;
  border-color: #d8960b !important; /* in case it uses borders */
  color: #ffffff !important;        /* ensure text is visible */
}

/* --------------------------------------- */
/* 🔒 Link styling                 */
/* --------------------------------------- */

/* Blog links bold styling */
.blog-listing__more,
.blog-listing__more a {
  font-weight: 700 !important;
}

/* Optional: make ALL site links bold */
a {
  font-weight: 700;
}

/* Improve placeholder contrast for accessibility */
input::placeholder,
textarea::placeholder {
  color: #2c327d !important; /* or any darker colour that meets WCAG contrast */
  opacity: 1 !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #2c327d !important;
  opacity: 1 !important;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #2c327d !important;
  opacity: 1 !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #2c327d !important;
  opacity: 1 !important;
}

/* Style the 'Log in' link */
.auth-link a {
  color: #1C1C91 !important; /* Replace with your DS blue hex code */
  font-weight: 600;
  text-decoration: underline;
}

.auth-link a:hover {
  color: #0e0e60 !important; /* Optional: darker hover colour */
}