/* General Header Styling */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--color-header-bg);
    color: var(--color-nav-text);
}

.logo-wrapper {
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    align-items: center;
    position: relative; /* Keeps the sub logo inside */
}

.logo-line {
  display: inline;
}

/* Logo Container - Places Main Logo & Text Side by Side */
.logo-container {
    display: flex;
    flex-direction: row; /* Keep elements horizontally aligned */
    align-items: flex-end; /* Push the sub logo downward */
    gap: 15px; /* Space between logo and text */
}

/* Main Logo */
.logo {
    width: 80px;
    height: auto;
}

/* Text Container - Holds Title & Sub Logo */
.text-container {
    display: flex;
    flex-direction: column; /* Stack text & sub logo */
    align-items: flex-start; /* Ensures left alignment */
    justify-content: flex-end; /* Push sub logo downward */
    height: 100%; /* Allow full height for vertical positioning */
}

/* Logo Text */
.logo-text {
    font-size: 32px;
    font-weight: bold;
    color: var(--color-nav-text);
}

/* Sub Logo */
.sub-logo {
    width: 60px;
    height: auto;
    align-self: flex-start; /* Forces left alignment */
    margin-top: auto; /* Pushes to the bottom */
}

/* Navigation Menu */
nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    padding: 0;
}

nav ul li {
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: var(--color-nav-text);
    font-size: 18px;
    padding: 10px 15px;
    transition: 0.3s;
}

nav ul li a:hover {
    background-color: var(--color-nav-hover-bg);
    border-radius: 5px;
}

/* Default non-selected button color */
.nav-button {
    background-color: var(--color-nav-bg);
    color: var(--color-nav-text);
}
.nav-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
}

.nav-buttons ul {
  gap: 10px; /* Space between buttons */
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-buttons ul li:last-child {
    margin-right: 20px;  /* this pushes the last button away from the edge */
}

/* Hover Effect */
.nav-button:hover {
    background-color: var(--color-nav-hover-bg);
}

/* Active Button (Highlighted Page) */
.nav-button.active {
    border-color: var(--color-accent);
    background-color: var(--color-nav-active-bg);
    color: var(--color-nav-text);
}

.search-field::placeholder {
    color: var(--color-placeholder);
}

/* Social Media Container */
.social-media-container {
    display: flex;
    justify-content: flex-end; /* Align icons to the right */
    gap: 15px; /* Space between icons */
    margin-top: 10px; /* Space between search field and social media */
    padding: 0 2rem; /* Add horizontal padding */
}

/* Icons Styling */
.social-media-container a {
    color: var(--color-icon-default);
    transition: 0.3s;
}

.social-media-container img.social-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.social-media-container a:hover {
    color: var(--color-icon-hover);
}

.search-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px; /* Adds space below navigation */
    margin-right: 20px;  /* Adjust the value as needed */
}

/* Position Magnifying Glass Inside Input */
.icon-search {
    position: absolute;
    left: 15px; /* Controls spacing inside the field */
    color: var(--color-search-icon);
    font-size: 16px;
}

/* Search Bar Layout */
.search-bar {
    display: flex;
    align-items: center;
    border: 2px solid var(--color-search-border);
    background-color: white;
    padding: 4px 8px; /* Reduce padding but keep space for icons */
    height: 35px; /* Maintain a smaller height */
    position: relative; /* Ensure elements inside align properly */
}

/* Ensure Magnifying Glass Stays Inside Input */
.icon-search {
    position: absolute;
    left: 12px; /* Positions inside the field */
    font-size: 16px;
    color: var(--color-search-icon);
    z-index: 2; /* Ensures visibility above the input */
}

/* Maintain Proper Space Inside Input for Icon */
.term-input {
    flex-grow: 1;
    padding-left: 40px; /* Ensures text doesn't overlap the icon */
    font-size: 16px;
    border: none;
    outline: none;
    width: 100%;
}

/* Style Search Button */
.search-button {
    background-color: white;
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

/* Adjust Arrow Icon */
.icon-right-bold {
    font-size: 16px;
    color: var(--color-nav-text);
}

/* Hover Effect */
.search-button:hover {
    background-color: var(--color-nav-hover-bg);
    color: white;
}

/* Ensure Logo Section Stays Left-Aligned */
.logo-section {
    flex-shrink: 0; /* Prevents logo from resizing */
}

/* Header Content: Ensure Top Right Alignment in Desktop */
.header-content {
  display: flex;
  flex-direction: column;          /* Stack nav, search, social icons vertically */
  align-items: flex-start;         /* Align elements to left on mobile */
  justify-content: flex-start;     /* Don’t push content down */
  position: static;                /* Allow content to follow the document flow */
  margin-top: 1rem;                /* Add spacing below the logo */
}

@media (min-width: 768px) {
  .header-content {
    position: absolute;
    right: 20px;
    top: 20px;
    margin-top: 0;
    align-items: flex-end;         /* Align content to the right */
    justify-content: center;       /* Vertically center elements in the column */
  }
}

@media (max-width: 767px) {
  .social-media-container img.social-icon {
    width: 20px;
    height: 20px;
  }

  /* Added with digital content to make the buttons fit nicer in mobile */
  .navigation-section .nav-buttons ul {
    gap: 0.25rem !important;      /* row-gap & column-gap = .25rem */
  }

  .logo-line {
    display: inline;
  }
}

/* Match Admin Nav Buttons to Public Header Buttons */
.admin-nav .nav-link {
    background-color: var(--color-nav-bg);
    color: var(--color-nav-text) !important;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    transition: 0.3s;
    border: 2px solid transparent;
}

/* Hover matches public header hover */
.admin-nav .nav-link:hover {
    background-color: var(--color-nav-hover-bg);
    color: var(--color-nav-text) !important;
}

/* Active state matches public header active button */
.admin-nav .nav-link.active {
    background-color: var(--color-nav-active-bg) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-nav-text) !important;
}


@media (max-width: 860px) {
    .logo-line {
      display: block;
    }
}