/* <style> */
/* hidden by default */
/* before: .additional-info { margin-top: .5rem; padding: 0 1rem; } */
.additional-info {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    margin-top: 0;      /* ← no gap when hidden */
    padding: 0 1rem;    /* keep horizontal padding so expanded width matches */
}

/* only add vertical spacing when visible */
.additional-info.expanded {
    max-height: 500px;  /* whatever fits your content */
    opacity: 1;
    margin-top: 0.5rem; /* now the gap appears */
    padding: 1rem;      /* full padding once expanded */
}
.toggle-info,
.card footer {
    margin-bottom: 0;  /* tighten up button-to-button spacing */
}

/* style the toggle button */
.toggle-info {
    margin-top: 0.75rem;
    padding: 0.4rem 0.75rem;
    background: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


/* =================================== */
/* Pill Button Styles                  */
/* =================================== */

/* Base styles for all pills */
.pill {
  display: inline-block;
  font-weight: 500;
  cursor: pointer;
  color: var(--csu-green);  /* CSU green text */
  background: #f0f0f0;
  border: 2px solid var(--csu-green);  /* CSU green border */
  transition: background-color var(--transition), transform var(--transition);
  flex-grow: 1;
  text-align: center;
  border-radius: 0.45rem;  /* Smaller radius to match search box more closely */
}
.pill:hover {
  transform: translateY(-2px);
}
.pill.active {
  background: var(--csu-orange);  /* CSU orange highlight */
  color: #fff;
  border-color: var(--csu-orange);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Styles for pills inside the search/controls area */
.search-category-container .pill-list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;  /* Keep pills in one row */
  align-items: center;
}
.search-category-container #categoryPills {
  margin: 0; /* Removes extra margin when in the header */
}
.search-category-container .pill {
  padding: 0.65rem 1.2rem;  /* Adjusted to better match search box height */
  font-size: 0.95rem;
  border-width: 2px;
  border-radius: 0.45rem;  /* Match base pill radius */
  white-space: nowrap;  /* Prevent text wrapping */
  height: 44px;  /* Match search input height */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* EXPANDABLE TAGS IN CARD (hidden-by-default) */
.taglist .more-tags {
    color: var(--clr-accent);
    cursor: pointer;
    font-size: .75rem;
    margin-left: .25rem;
}
.invisible-tags {
    display: none;
    margin-top: .35rem;
}
/* RESET & TOKENS */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* RESET & TOKENS */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    /* CSU Brand Colors */
      --csu-green:        #1e4d2b;  /* CSU Primary Brand green */
    --csu-gold:         #C8C372;  /* CSU Primary Brand light gold */
    --csu-orange:       #D9782D;  /* CSU Primary Brand orange */
    --csu-grey:         #CCCCCC;  /* CSU Neutral grey */
    --csu-dark-grey:    #59595B;  /* CSU Primary Brand dark grey */
      --csu-green-dark:   #033514;  /* Darker CSU green (One Health match) */

    /* Application Colors (using CSU colors) */
    --clr-bg:           var(--csu-grey);
    --clr-surface:      #ffffff;
    --clr-primary:      var(--csu-green);
    --clr-primary-dark: var(--csu-green);
    --clr-accent:       var(--csu-orange);
    --clr-accent-light: var(--csu-orange);
    --clr-text:         #1b1e23;
    --clr-button-text:  #fff;
    --radius:           .65rem;
    --shadow:           0 6px 14px rgba(0,0,0,.08);
    --transition:       .25s ease;
  --clr-primary-dark: var(--csu-green-dark);
}

html,body{
    font-family: "Poppins", sans-serif;
    font-weight: 400;  /* Poppins Regular for body text */
    color: var(--clr-text);
    background: var(--clr-bg);
    height:100%;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;  /* Poppins Bold for all headings */
}
a  { color: var(--clr-accent); text-decoration:none; }
a:hover{ text-decoration:underline; }


/* RESULTS BAR */
#resultsBar {
    max-width: 1200px;
    margin: 0 auto 1rem;
    padding: 0 1rem;
}

.results-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--clr-surface);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    gap: 1rem;
    flex-wrap: wrap;
}

.result-count {
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-primary-dark);
}

.results-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* View Toggle Buttons */
.view-toggle {
    display: flex;
    gap: 0;
    border: 2px solid var(--csu-green);
    border-radius: var(--radius);
    overflow: hidden;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background: var(--clr-surface);
    color: var(--csu-green);
    border: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    font-size: 1rem;
}

.view-toggle-btn:not(:last-child) {
    border-right: 1px solid var(--csu-green);
}

.view-toggle-btn:hover {
    background: rgba(30, 77, 43, 0.1);
}

.view-toggle-btn.active {
    background: var(--csu-green);
    color: #fff;
}

.export-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--clr-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.export-btn:hover {
    background: var(--clr-accent-light);
    transform: translateY(-2px);
}

.export-btn:active {
    transform: translateY(0);
}

/* GLOBAL LAYOUT */
header {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 2rem 1rem 1rem;
    max-width: 1200px;
    margin-inline: auto;
    align-items: center;  /* Center content */
    text-align: center;   /* Center text */
    background-color: var(--csu-green);
}

header h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--csu-green);  /* CSU green for title */
}

header p {
    max-width: 60ch;
    line-height: 1.55;
}
main{
    display:grid;
    grid-template-columns: 260px 1fr;
    gap:2rem;
    max-width:1200px;
    margin:0 auto 4rem;
    padding-inline:1rem;
    position: relative;
}

/* Filter toggle button - hidden by default */
.filter-toggle-btn {
    display: none;
}

@media (max-width:860px){
    main{
        grid-template-columns:1fr;
    }

    /* Show toggle button on mobile */
    .filter-toggle-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.25rem;
        background: var(--clr-primary);
        color: #fff;
        border: none;
        border-radius: var(--radius);
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        margin-bottom: 1rem;
        box-shadow: var(--shadow);
        transition: background var(--transition);
        position: sticky;
        top: 135px;
        z-index: 998;
    }

    .filter-toggle-btn:hover {
        background: var(--clr-primary-dark);
    }

    /* Filter panel mobile styles */
    #filterPanel {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        overflow-y: auto;
        z-index: 1001;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    }

    #filterPanel.open {
        left: 0;
    }

    /* Overlay for mobile filter panel */
    .filter-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
        display: none;
    }

    .filter-overlay.active {
        display: block;
    }
}




/* SIDEBAR FILTERS */

#filterPanel{
    background:var(--clr-surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:1.25rem;
    display:flex; flex-direction:column; gap:1.5rem;
    height:max-content;
}
#filterPanel h2{ font-size:1.2rem; margin-bottom:.5rem; }
.filter-group{ display:flex; flex-direction:column; gap:.25rem; }
.filter-group label{
    display:flex; gap:.5rem; align-items:center;
    font-size:.925rem;
    cursor:pointer;
}
.filter-group input[type="checkbox"]{
    accent-color:var(--csu-orange);  /* CSU orange checkboxes */
    width:1rem; height:1rem;
}
#dateStart, #dateEnd{
    width:100%;
    padding:.4rem .5rem;
    border:1px solid #cdd2d6;
    border-radius:.3rem;
    font-size:.9rem;
}


/* DATASET CARDS */

#datasetGrid{
    align-self: start;
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
    grid-auto-rows: auto;    /* ← this forces every row to be equal height */
    gap:1rem;
}

/* LIST VIEW */
#datasetGrid.list-view {
    grid-template-columns: 1fr;  /* Single column for list view */
    gap: 0.75rem;
}

#datasetGrid.list-view .card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "badge title button"
        "badge description button"
        "badge tags button";
    align-items: start;
    gap: 0.5rem 1rem;
    padding: 1rem 1.25rem;
    border-left-width: 4px;
}

#datasetGrid.list-view .recently-added-badge {
    position: static;
    grid-area: badge;
    margin-top: 0.25rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.3rem;
}

#datasetGrid.list-view .card h3 {
    grid-area: title;
    margin: 0;
    font-size: 1.15rem;
}

#datasetGrid.list-view .card p {
    grid-area: description;
    margin: 0;
    font-size: 0.95rem;
}

#datasetGrid.list-view .taglist {
    grid-area: tags;
    margin: 0;
}

#datasetGrid.list-view .card .btn {
    grid-area: button;
    margin: 0;
    align-self: center;
    white-space: nowrap;
}

#datasetGrid.list-view .card:hover {
    transform: translateX(4px);
}

/* PREVIEW VIEW */
#datasetGrid.preview-view {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

#datasetGrid.preview-view .card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    min-height: 280px;
}

#datasetGrid.preview-view .card-preview-thumbnail {
    width: 100%;
    height: 160px;
    background: #f0f0f0;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

#datasetGrid.preview-view .card-preview-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#datasetGrid.preview-view .card-preview-thumbnail .preview-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--csu-green);
    font-size: 1.5rem;
}

#datasetGrid.preview-view .card-preview-thumbnail .preview-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 0.85rem;
    text-align: center;
    width: 80%;
}

#datasetGrid.preview-view .card-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

#datasetGrid.preview-view .card h3 {
    font-size: 1rem;
    line-height: 1.3;
    margin: 0;
}

#datasetGrid.preview-view .card p {
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#datasetGrid.preview-view .taglist {
    display: none;  /* Hide tags in preview view for cleaner look */
}

#datasetGrid.preview-view .card .btn {
    margin-top: auto;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
}

#datasetGrid.preview-view .recently-added-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
}


.card{
    background:var(--clr-surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:1.25rem 1.25rem 1rem;
    display:flex; flex-direction:column; gap:.85rem;
    transition: transform var(--transition), box-shadow var(--transition);
    border-left: 4px solid var(--csu-green); /* CSU green accent for all cards */
    position: relative;
}

/* Recently Added Badge */
.recently-added-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 1rem;
    box-shadow: 0 3px 8px rgba(255, 107, 107, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}
.card.card-database {
  border-left: 4px solid var(--csu-green); /* Same CSU green for database cards */
}
.card:hover{
    transform:translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,.12);
}
.card h3{ font-size:1.1rem; line-height:1.35; }
.taglist{ display:flex; flex-wrap:wrap; gap:.35rem; }
.tag{
    background:var(--csu-orange);  /* CSU orange for all tags */
    color:#fff; font-size:.75rem;
    padding:.15rem .55rem;
    border-radius:999px;
    cursor: pointer;  /* Show it's clickable */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    user-select: none;  /* Prevent text selection on click */
}
.tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    background: #e58525;  /* Slightly lighter orange on hover */
}
.tag:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.card.card-database .tag {
    background-color: var(--csu-orange); /* Same CSU orange for database tags */
    color: #fff;
}
.card.card-database .tag:hover {
    background: #e58525;  /* Same hover effect for database tags */
}
.card .more-info {
    margin-top: auto;
}
.card footer {
    margin-top: 0;     /* kill the auto-push */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.download{
    background:var(--csu-green);  /* CSU green for Clear All button */
    color:#fff; border:none; cursor:pointer;
    padding:.4rem .9rem;
    font-size:.85rem; border-radius:.45rem;
    transition: background var(--transition), transform var(--transition);
}
.card .btn, .card.card-database .btn {
    background: var(--csu-green); /* CSU green for More Info buttons */
    color: #fff;
}

/* Hover effects */
.card .btn:hover, .card.card-database .btn:hover {
    background: #2a6b3f; /* Slightly lighter green for hover */
}
.download:hover{ transform:translateY(-2px); }
.download:active{ transform:translateY(0); }

/* UTILITIES */

.visually-hidden{
    position:absolute !important;
    height:1px; width:1px;
    overflow:hidden;
    clip:rect(1px,1px,1px,1px);
    white-space:nowrap;
}

/* ──────────────────  NAVBAR  ────────────────── */
.navbar{
  background:var(--csu-green-dark);  /* Dark CSU green background */
    position:sticky; top:0; z-index:1000;
    box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.navbar .container{
    max-width:1200px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:.85rem 1.25rem;
}
.navbar-left, .navbar-center, .navbar-right {
    display:flex; align-items:center;
}
.navbar-center {
    flex:1; justify-content:center;
}
.navbar .brand{
    font-weight:700; font-size:1.25rem;
    color:var(--csu-gold);  /* CSU gold for brand name */
}
.navbar-partner-link {
    display:flex; align-items:center; gap:0.5rem;
    text-decoration:none; color:#ffffff;
    transition:opacity 0.2s ease;
}
.navbar-partner-link:hover {
    opacity:0.8;
}
.partner-logo {
    height:40px; width:auto;
}
.partner-text {
    font-size:0.95rem; color:#ffffff;
}
.ohi-text {
    font-family: "Poppins", sans-serif;
    font-weight: 700;  /* Bold */
}
.dsri-text {
    font-family: "Factoria Light", "Factoria", sans-serif;
    font-weight: 700;  /* Bold */
}

/* Responsive text - show/hide based on screen size */
.partner-text-abbrev {
    display: none;  /* Hide abbreviations by default */
}

@media (max-width: 768px) {
    .partner-text-full {
        display: none;  /* Hide full text on mobile */
    }
    .partner-text-abbrev {
        display: inline;  /* Show abbreviations on mobile */
    }
}

/* SUB-NAVIGATION */
.subnav {
    background-color:var(--csu-grey); /* Light gray background */
    border-top:1px solid #aaa;
    padding:0;
}
.subnav .container {
    max-width:1200px; margin:0 auto;
    padding:0;
}
.subnav-menu {
    list-style:none; margin:0; padding:0;
    display:flex; align-items:center;
}
.subnav-menu li {
    margin:0;
}
.subnav-menu a {
    display:block; padding:0.75rem 1.25rem;
    text-decoration:none; color:var(--csu-dark-grey);
    font-size:0.95rem; font-weight:500;
    border-bottom:3px solid transparent;
    transition:all 0.2s ease;
}
.subnav-menu a:hover {
    background-color:rgba(0,0,0,0.05);
}
.subnav-menu a.active {
    border-bottom-color:var(--csu-green-dark);
    color:var(--csu-green-dark);
    font-weight:600;
}

.navbar .menu{
    display:flex; gap:1.5rem; font-weight:500;
}
.navbar .menu a{
    color:#ffffff;  /* White navigation text */
    position:relative;
}
.navbar .menu a::after{
    content:''; position:absolute; bottom:-6px; left:0;
    height:2px; width:0; background:var(--csu-gold);
    transition:var(--transition);
}
.navbar .menu a:hover::after{width:100%;}
.navbar .cta-btn{
    padding:.55rem 1.1rem; border-radius:var(--radius);
    background:var(--clr-primary); color:#fff; font-weight:600;
    transition:var(--transition);
}
.navbar .cta-btn:hover{background:var(--clr-primary-dark);}





/* 5. Remove leftover strong (if present) */
#categoryPills strong {
    display: none;
}


/* Shared button reset */
.btn {
  display: inline-block;
  font-family: var(--ff-base);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
}
/* Primary button look - for Clear All and Leave Feedback */
.btn {
  background-color: var(--csu-green);  /* CSU green for buttons */
  color: var(--clr-button-text);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn:hover {
  background-color: #2a6b3f;  /* Slightly lighter green on hover */
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn:active {
  background-color: var(--csu-green);
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.btn:focus {
  outline: 3px solid var(--csu-gold);
  outline-offset: 2px;
}

/* overlay */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* hide by default */
.hidden {
    display: none;
}

/* box */
.modal-content {
    background: #fff;
    padding: 1.5rem;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    position: relative;
    border-radius: 8px;
}

/* close “×” */
.modal-close {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* stick footer to bottom */
.modal-footer {
    margin-top: 1.5rem;
    text-align: right;
}

/* Modal container */
.modal {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Modal content box */
.modal-content {
  background: #fff;
  padding: 2rem;
  max-width: 700px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  position: relative;
  font-family: 'Segoe UI', sans-serif;
}

/* Title */
#modalTitle, #suggestionModalTitle {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  color: var(--csu-green);  /* CSU green for modal titles */
}

/* Info body */
#modalBody {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #333;
}

#modalBody a {
  color: var(--csu-green);  /* CSU green for links in modal */
}

#modalBody ul {
  padding-left: 1.2rem;
  margin-top: 0.5rem;
}

#modalBody li {
  margin-bottom: 0.5rem;
}

/* Footer */
.modal-footer {
  margin-top: 2rem;
  text-align: right;
}

/* Download button */
#modalDownload {
  background-color: var(--csu-orange);  /* CSU orange for Download button */
  color: white;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#modalDownload:hover {
  background-color: #c0862a;  /* Slightly darker orange on hover */
}

/* Close button */
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
}
/* hide the entire overlay when it has the “hidden” class */
.modal.hidden {
  display: none;
}

/* NEW: Styles for suggestion modal textarea */
#suggestionText {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid #cdd2d6;
    border-radius: .3rem;
    resize: vertical;
    min-height: 120px;
    margin-top: 0.5rem;
}

#suggestionText:focus {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.2);
}


/* =================================== */
/* Final Header & Live Stats Layout    */
/* =================================== */

/* Styles the intro text (H1 and P tag) */
.header-intro {
  /* text-align: center; */
  max-width: 60ch;
  /* margin-inline: auto; */
  margin-bottom: 1rem;
}

/* Ensure intro title and paragraph are white (override other header rules) */
header .header-intro h1,
header .header-intro p {
  color: #ffffff !important;
}

/* Creates the main row for stats and search controls */
.header-controls {
  display: flex;
  flex-direction: row;  /* Horizontal alignment */
  align-items: stretch;  /* Changed from center to stretch for better alignment */
  gap: 1rem;
  width: 100%;
  max-width: 900px;  /* Increased to accommodate both elements */
}

@media (max-width: 768px) {
  .header-controls {
    flex-direction: column;  /* Stack vertically on mobile */
  }
}

/* Styles for the stats panel itself */
/* #liveStats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background-color: var(--clr-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.stats-group {
  display: flex;
  gap: 1.5rem;
}


.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 85px;
}
.stat-item span {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: #006400;
}
.stat-item label {
  font-size: 0.75rem;
  margin-top: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #555;
} */

/* SEARCH BAR */

#searchBar{
    position:relative;
    width: 100%;
    flex-grow: 1;
    display: flex;
    align-items: center;
}
#searchInput{
    width:100%;
    padding:.75rem 1rem .75rem 2.75rem;
    border:2px solid var(--csu-green);  /* CSU green border */
    border-radius:var(--radius);
    font-size:1rem;
    outline:none;
    height: 44px;  /* Fixed height to match pills */
    box-sizing: border-box;
}
#searchBar svg{
    position:absolute; top:50%; left:.9rem;
    translate:0 -50%;
    pointer-events:none;
    fill:var(--csu-green);  /* CSU green icon */
}



/* This rule overrides the original to make it work in the new layout */
.search-category-container {
  display: flex;
  align-items: center;  /* Vertically center pills */
  position: sticky;
  top: 57px; /* Offset by navbar height */
  background: var(--csu-green); /* Use CSU green behind pills */
  z-index: 999;
  padding: 0;  /* Remove padding that was causing misalignment */
  margin: 0;
  border-radius: var(--radius);
  flex-shrink: 0;  /* Prevent shrinking */
}

/* Add shadow when pills are sticky */
.search-category-container.is-sticky {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 0.75rem 1rem;
}
/* =================================== */
/* Dataset Suggestion Box              */
/* =================================== */

#suggestionBox {
  display: flex;
  gap: 0.75rem;
}

#suggestionInput {
  width: 100%;
  flex-grow: 1; /* Allows the input to take up available space */
  padding: 0.6rem 1rem;
  border: 1px solid #ced4da;
  border-radius: var(--radius);
  font-size: 0.9rem;
  background-color: var(--clr-surface);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#suggestionInput:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.2); /* Uses your green accent color for the glow */
}

#suggestionBox .btn {
  flex-shrink: 0; /* Prevents the submit button from shrinking */
}
.suggestion-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Adjust this value to get your desired spacing */
}

/* CSS for the new navigation buttons */
.nav-buttons {
  display: flex;
  gap: 0.75rem; /* Space between the two buttons */
}

.cta-btn-small {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--csu-green);  /* CSU green text */
  background: var(--csu-gold);  /* CSU gold background */
  border-radius: var(--radius);
  transition: var(--transition);
}

.cta-btn-small:hover {
  background: #b0ad5f;  /* Slightly darker gold on hover */
}

/* DSRI button with logo */
.dsri-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dsri-logo {
  height: 24px;
  width: 24px;
  object-fit: contain;
}

.dsri-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 700; /* Bold */
}

/* ==================================================== */
/* CSU HEADER & FOOTER STYLES */
/* ==================================================== */

/* CSU Header */
#csu-header {
  background-color: #1E4D2B; /* CSU Green background */
  border-bottom: none;
  /* Reduced vertical padding to minimize header height */
  padding: 8px 20px;
  width: 100%;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;
  max-width: none !important;
  margin: 0 !important;
}

#csu-header .csu-header-container {
  max-width: 1200px;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}

.csu-logo-section {
  flex-shrink: 0;
}

.csu-logo-link {
  display: inline-block;
  text-decoration: none;
}

.csu-signature-logo {
  height: 56px; /* slightly smaller to reduce header height without changing logo prominence */
  width: auto;
  display: block;
  transition: opacity 0.2s ease;
}

.csu-logo-link:hover .csu-signature-logo {
  opacity: 0.8;
}

.csu-separator {
  color: white;
  font-size: 1.5em;
  line-height: 56px;
  flex-shrink: 0;
}

.csu-text-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.csu-text-section h2 {
  margin: 0;
  font-size: 1em;
  font-weight: normal;
  color: white;
}

.csu-text-section a {
  color: white;
  text-decoration: none;
}

.csu-text-section a:hover {
  text-decoration: underline;
}

/* CSU Footer */
#csu-footer {
  background-color: #1E4D2B; /* CSU Green */
  color: white;
  padding: 20px 0;
}

.footer-social {
  background-color: var(--csu-green-dark); /* Darker green */
  text-align: center;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.footer-social a {
  display: inline-block;
}

.footer-social img {
  height: 30px;
  width: auto;
}

.footer-info {
  text-align: left;
  padding: 20px 60px;
  background-color: #1E4D2B;
  border-top: 3px solid #C8C372; /* CSU Gold separator line */
}

.footer-info a {
  color: white;
  text-decoration: none;
  font-size: 1em;
}

.footer-info a:hover {
  text-decoration: underline;
}

.footer-bottom {
  background-color: var(--csu-green-dark); /* Darker green */
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
}

.footer-links-csu {
  font-size: 0.8em;
  text-align: left;
}

.footer-links-csu a {
  color: white;
  text-decoration: none;
  padding: 0 5px;
}

.footer-links-csu a:hover {
  text-decoration: underline;
}

.footer-copyright {
  font-size: 0.8em;
  margin: 10px 0 0 0;
  grid-column: 1;
}

.footer-logo {
  text-align: right;
  grid-column: 2;
  grid-row: 1 / 3;
}

.footer-logo img {
  height: 40px;
  width: auto;
}

@media (max-width: 768px) {
  .footer-bottom {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-links-csu,
  .footer-copyright,
  .footer-logo {
    text-align: center;
    grid-column: 1;
    grid-row: auto;
  }

  .footer-logo img {
    margin-top: 20px;
  }
}

/* ==================================================== */


/* </style> */