/* ========== Base header/footer ========== */

header {
  /* Prefer min-height for responsiveness */
  min-height: 200px;
  background: linear-gradient(to bottom, #876AAF 60%, #000000 60%);
  border-radius: 1em;
  width: 100%;
  padding: 10px;
  color: #fff;
  font-size: 15px;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
}

#header_grid {
  display: grid;
  /* One row; height controlled by header. You can add rows if needed. */
  /* grid-template-rows: auto;  <-- implicit default is fine */
  grid-template-columns: 15% 35% 25% 25%;
  width: 100%;
  gap: 0; /* explicit */
}

/* Example: use flex within each header grid cell if needed */
.header-grid1,
.header-grid2,
.header-grid3,
.header-grid4 {
  display: flex;
  align-items: center;
}

/* Keep the logo aligned left within its grid area without floats */
.header_logo {
  display: flex;
  align-items: center;
}

/* ----- Footer ----- */

#footer {
  min-height: 200px;
  background: linear-gradient(to bottom, #876AAF 60%, #000000 60%);
  border-radius: 1em;
  width: 100%;
  padding: 10px;
  color: #fff;
  font-size: 15px;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
}

#footer_grid {
  display: grid;
  grid-template-rows: 70% 20% 10%;
  grid-template-columns: 33.33% 33.33% 33.33%;
  width: 100%;
  gap: 0; /* explicit */
}

/* Center specific items */
.item4 { text-align: center; }
.item5 { text-align: center; }
.item6 { text-align: center; }

/* Use flex instead of float for the footer logo */
.footer_logo {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Address table: no float needed inside a grid cell */
.address-table {
  width: 100%;
  max-width: 400px;
  border-collapse: collapse;
  margin: 0;
  font-family: Arial, sans-serif;
}

.address-table th {
  color: #fff;
  width: 45%;
  text-align: left;
  font-weight: 700;
  padding: 0.25rem 0;
}

.address-table td {
  border: 0;
  padding: 0.25rem 0;
  color: #fff;
}

/* ========== Bootstrap overrides (Tabs & Dropdowns) ========== */

.nav-tabs {
  margin-top: 20px;
  border-bottom: 1px solid #dee2e6;
}

.nav-tabs .nav-link {
  border: none;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  color: #fff; /* white on dark header */
  border-bottom: 3px solid transparent;
}

/* Active state: ensure contrast on dark backgrounds */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #66b3ff;              /* brighter blue for contrast */
  background: transparent;
  border-bottom-color: #66b3ff;
}

.nav-tabs .dropdown-menu {
  border-radius: 0.5rem;
}

/* Dropdown menu items: compact but readable */
.dropdown-menu .dropdown-item {
  padding: 0.4rem 0.75rem;     /* increased from 0.1rem for usability */
  line-height: 1.2;            /* readable but compact */
  font-size: 0.95rem;          /* slightly smaller if you like */
}

/* Ensure nested submenu positions relative to its parent */
.dropdown-submenu { position: relative; }

/* Align submenu next to the parent row (use actual >, not &gt;) */
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -0.25rem;  /* tweak vertical alignment */
  margin-left: 0.1rem;   /* small horizontal gap */
}

/* Force a right-pointing caret for the split toggle inside menus */
.dropdown-submenu .dropdown-toggle::after {
  display: inline-block;
  content: "";
  margin-left: .255em;
  vertical-align: .255em;
  border-top: .3em solid transparent;
  border-right: 0;
  border-bottom: .3em solid transparent;
  border-left: .3em solid currentColor; /* caret pointing RIGHT */
}

/* Make dropright submenu items same size as main menu items
   (The original selector looked off—this targets submenu items properly) */
.dropdown-submenu > .dropdown-menu .dropdown-item {
  padding: 0.4rem 0.75rem;
  font-size: inherit;
  line-height: 1.2;
  min-height: 2rem; /* optional: keeps rows consistent */
}

/* Optional: cohesive background on hover/focus for submenu rows */
.dropdown-submenu > .dropdown-item:hover,
.dropdown-submenu > .dropdown-item:focus-within {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Hover-to-open on desktop (pointer+hover capable devices) */
@media (hover: hover) and (pointer: fine) {
  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }
}