:root {
  /* Color Palette */
  --color-primary-blue:    #4C5986; /* buttons, headings, active nav */
  --color-secondary-blue:  #A1AAC9; /* section bg, hover/active states */
  --color-white:           #FFFFFF; /* page & card backgrounds */
  --color-text:            #333333; /* body text */
  --color-light-gray:      #F5F5F5; /* section bg, borders */

  /* Contrast helpers */
  --color-on-primary:      var(--color-white);  /* text/icons on primary blue */
  --color-on-secondary:    var(--color-white);  /* text/icons on secondary blue */

  /* Typography – font families */
  --font-heading-family:   'Montserrat', sans-serif;
  --font-body-family:      'Roboto', sans-serif;

  /* Typography – font sizes */
  --font-size-h1:          36px;   /* main page headings */
  --font-size-h2:          28px;   /* section headings */
  --font-size-body:        16px;   /* default paragraph text */
  --font-size-button:      16px;   /* buttons & links */
  --font-size-caption:     14px;   /* small captions, disclaimers */

  /* Typography – line heights */
  --line-height-body:      1.5;    /* for readability */
  --line-height-heading:   1.2;    /* tighter for headings */

  /* Typography – font weights */
  --font-weight-bold:      700;    /* for H1, buttons/links */
  --font-weight-semibold:  600;    /* for H2, subheadings */
  --font-weight-regular:   400;    /* body text, captions */

  /* Spacing (for margin, padding, gap, etc.) */
  --space-extra-small: 4px;
  --space-small: 8px;
  --space-medium: 16px;
  --space-large: 24px;
  --space-extra-large: 32px;

  /* Border Radius */
  --corner-radius-small: 4px;
  --corner-radius-medium: 8px;
  --corner-radius-large: 16px;

  /* Background and Text Colors */
  --background-color-light-blue: #eaf0ff;
  --text-color-dark: #222;
}


/* Back-to-top button styles */
#back-to-top {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  background: var(--color-primary-blue, #4C5986);
  color: #fff;
  border: none;
  border-radius: var(--corner-radius-medium, 8px);
  padding: 12px 18px;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.2s, opacity 0.3s;
  opacity: 0.85;
}
#back-to-top:hover {
  background: var(--color-secondary-blue, #A1AAC9);
  color: var(--text-color-dark, #333);
  opacity: 1;
}

/* --- Search Suggestion Box Styles --- */
#search-suggestion-box {
  position: absolute;
  z-index: 1000;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-secondary-blue, #A1AAC9);
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(76,89,134,0.08);
  border-radius: 8px;
  font-family: var(--font-body-family, sans-serif);
  font-size: 1rem;
  transition: box-shadow 0.2s;
}
#search-suggestion-box li {
  padding: 12px 16px;
  cursor: pointer;
  color: var(--color-text, #333);
  background: transparent;
  border-bottom: 1px solid var(--color-light-gray, #F5F5F5);
  transition: background 0.15s, color 0.15s;
}
#search-suggestion-box li:last-child {
  border-bottom: none;
}
#search-suggestion-box li:hover, #search-suggestion-box li:focus {
  background: var(--color-secondary-blue, #A1AAC9);
  color: var(--color-on-secondary, #fff);
  outline: none;
}

/* --- Responsive Media Queries for Search Suggestion Box --- */
@media (max-width: 900px) {
  #search-suggestion-box {
    font-size: 0.98rem;
    max-width: 95vw;
    min-width: 180px;
  }
}
@media (max-width: 600px) {
  #search-suggestion-box {
    font-size: 0.95rem;
    max-height: 160px;
    border-radius: 6px;
    left: 2vw !important;
    width: 96vw !important;
    min-width: 120px;
  }
  #search-suggestion-box li {
    padding: 10px 12px;
  }
}
@media (max-width: 400px) {
  #search-suggestion-box {
    font-size: 0.9rem;
    max-height: 120px;
    border-radius: 4px;
    left: 1vw !important;
    width: 98vw !important;
    min-width: 80px;
  }
  #search-suggestion-box li {
    padding: 8px 8px;
  }
}
/* --- End Responsive Media Queries --- */

/* --- Responsive Media Queries for Search Bar --- */
.nav-search-bar {
  width: 220px;
  max-width: 100vw;
  padding: 8px 14px;
  font-size: 1rem;
  border: 1px solid var(--color-secondary-blue, #A1AAC9);
  border-radius: 6px;
  transition: border 0.2s, box-shadow 0.2s;
  outline: none;
}
@media (max-width: 900px) {
  .nav-search-bar {
    width: 160px;
    font-size: 0.98rem;
    padding: 7px 10px;
  }
}
@media (max-width: 600px) {
  .nav-search-bar {
    width: 98vw;
    min-width: 100px;
    font-size: 0.95rem;
    padding: 7px 8px;
    border-radius: 5px;
    margin: 0 auto;
    display: block;
  }
}
@media (max-width: 400px) {
  .nav-search-bar {
    width: 96vw;
    min-width: 60px;
    font-size: 0.9rem;
    padding: 6px 6px;
    border-radius: 4px;
  }
}
/* --- End Responsive Media Queries for Search Bar --- */

/* --- Prevent Body Overflow When Search Bar is Open on Small Screens --- */
@media (max-width: 600px) {
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .nav-search-bar {
    box-sizing: border-box;
    width: 98vw;
    min-width: 100px;
    max-width: 100vw;
    margin: 0 auto;
    display: block;
  }
  #search-suggestion-box {
    box-sizing: border-box;
    left: 1vw !important;
    width: 98vw !important;
    max-width: 100vw !important;
  }
}
/* --- End Prevent Body Overflow --- */