body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #FAFAFA !important; /* Soft off-white */
    color: #333;
    /* Removed padding-top: 56px; */
}

header {
    background-color: #3a5e7a !important; /* Blue-Gray */
    color: #ffffff !important;
    padding: 10px 20px !important;
    /* text-align: center; Removed, using flexbox now */
    margin-bottom: 20px;
    display: flex; /* Enable Flexbox */
    justify-content: space-between; /* Space items apart */
    align-items: center; /* Vertically center items */
}

/* Style for the new header structure */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ensure it spans the header */
    max-width: 1200px; /* Optional: constrain width */
    margin: 0 auto; /* Center container */
    padding: 0 15px; /* Add padding */
}

.header-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.header-brand a { /* Style for "SupplementDig" link */
    color: #ffffff !important;
    text-decoration: none;
    font-size: 1.5em; /* Make it larger */
    font-weight: bold;
}

.header-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.9em;
    margin-top: 2px;
}

.header-nav a { /* Style for "Contact" link */
    color: #ffffff !important;
    text-decoration: none;
    font-weight: bold;
    margin-left: 20px; /* Space from brand if needed */
}

.header-brand a:hover, .header-nav a:hover {
    text-decoration: underline;
}

/* Remove default list styles if nav uses ul */
.header-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.header-nav li {
    display: inline;
}

main {
    padding: 20px;
}

/* Apply styles directly to the footer element used in base.html */
footer {
    background-color: #3a5e7a !important; /* Blue-Gray */
    color: #ffffff !important;
    text-align: center !important;
    padding: 15px 0 !important;
    /* position: fixed; /* Removing fixed position, let base.html handle layout */
    /* width: 100%; */
    /* bottom: 0; */
    margin-top: 40px; /* Add space above footer */
}

/* Style paragraphs within the footer */
footer p {
    color: #ffffff !important;
    margin-bottom: 5px;
}

footer p.small {
    font-size: 0.85em;
}

.pagination {
    text-align: center;
    margin: 20px 0;
}

/* Ensure all pagination links, including Bootstrap's .page-link, use the correct color */
.pagination a, .pagination .page-link {
    margin: 0 5px;
    text-decoration: none;
    color: #000 !important; /* Black links */
}

.pagination a:hover, .pagination .page-link:hover {
    color: #333 !important; /* Dark Gray on hover */
    text-decoration: underline;
}

.pagination .step-links .current {
    font-weight: bold;
}

/* Home page styles */
.search-section {
    background-color: white;
    padding: 20px;
    margin: 20px 0;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Slightly stronger shadow */
    border: 1px solid #eee;
}

.search-section h2 {
    color: #555; /* Darker grey heading for contrast */
    margin-top: 0;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

/* General link styling (excluding header/footer/pagination handled separately) */
main a, .search-section a, .list-group-item a { /* Be more specific */
    color: #000; /* Black */
    text-decoration: none;
}

main a:hover, .search-section a:hover, .list-group-item a:hover {
    color: #333; /* Dark Gray */
    text-decoration: underline;
}

/* Removed unused .advanced-options-link rule. Spacing handled by mb-3 class in _filters.html */

/* General Button Styling (excluding Amazon button) */
button, input[type="submit"], .btn:not(.amazon-button) { /* Exclude amazon button */
    background-color: #27704d !important; /* Darker Custom Green button */
    color: white !important;
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-weight: bold;
    text-transform: uppercase; /* Optional: make button text uppercase */
    letter-spacing: 0.5px; /* Optional: add letter spacing */
}

button:hover, input[type="submit"]:hover, .btn:not(.amazon-button):hover {
    background-color: #38a16f !important; /* Custom Green on hover */
}

/* Amazon Button Style */
.amazon-button {
    display: inline-block;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    background: linear-gradient(to bottom, #f8e3ad, #EEBA37) !important;
    border: 1px solid #c89411 !important;
    color: #111 !important; /* Black text */
    font-weight: bold !important;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
    text-transform: none !important; /* Override general button style */
    letter-spacing: normal !important; /* Override general button style */
    margin-top: 10px; /* Add space above the button */
}

.amazon-button:hover {
    background: linear-gradient(to bottom, #f5d78e, #eeba37) !important;
    border-color: #b0820f !important;
    color: #111 !important;
}

h1, h2 {
    margin-bottom: 20px;
    color: #444; /* Slightly darker headings */
}

.list-group-item {
    margin-bottom: 10px;
}

/* Nutrition Facts styles */
.image {
    width: 250px;
    float: left;
    margin: 20px;
}

.performance-facts {
    border: 1px solid black;
    margin: 20px;
    float: left;
    width: 280px;
    padding: 0.5rem;
    table {
        border-collapse: collapse;
    }
}

.performance-facts__title {
    font-weight: bold;
    font-size: 2rem;
    margin: 0 0 0.25rem 0;
}

.performance-facts__header {
    border-bottom: 10px solid black;
    padding: 0 0 0.25rem 0;
    margin: 0 0 0.5rem 0;
    p {
        margin: 0;
    }
}

.performance-facts__table {
    width: 100%;
    thead tr {
        th,
        td {
            border: 0;
        }
    }
    th,
    td {
        font-weight: normal;
        text-align: left;
        padding: 0.25rem 0;
        border-top: 1px solid black;
        white-space: nowrap;
    }
    td {
        &:last-child {
            text-align: right;
        }
    }
    .blank-cell {
        width: 1rem;
        border-top: 0;
    }
    .thick-row {
        th,
        td {
            border-top-width: 5px;
        }
    }
}

.small-info {
    font-size: 0.7rem;
}

.performance-facts__table--small {
    @extend .performance-facts__table;
    border-bottom: 1px solid #999;
    margin: 0 0 0.5rem 0;
    thead {
        tr {
            border-bottom: 1px solid black;
        }
    }
    td {
        &:last-child {
            text-align: left;
        }
    }
    th,
    td {
        border: 0;
        padding: 0;
    }
}

.performance-facts__table--grid {
    @extend .performance-facts__table;
    margin: 0 0 0.5rem 0;
    td {
        &:last-child {
            text-align: left;
            &::before {
                content: "•";
                font-weight: bold;
                margin: 0 0.25rem 0 0;
            }
        }
    }
}

.text-center {
    text-align: center;
}

.thick-end {
    border-bottom: 10px solid black;
}

.thin-end {
    border-bottom: 1px solid black;
}

/* Nutrition facts adjustments if needed */
.performance-facts {
    border: 1px solid #ccc; /* Lighter border */
    /* ... other styles ... */
}
.performance-facts__header {
    border-bottom: 5px solid #3a5e7a; /* Match header color (Blue-Gray) */
     /* ... other styles ... */
     p {
        margin: 0;
     }
}
.thick-end {
    border-bottom: 5px solid #3a5e7a; /* Match header color (Blue-Gray) */
}

/* Breadcrumb styles */
.breadcrumbs {
    font-size: 0.9em;
}

.breadcrumb {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    border: 1px solid #e9ecef;
    border-radius: 4px;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: #6c757d;
}

.breadcrumb-item a {
    color: #3a5e7a;
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: #27704d;
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: #6c757d;
}

@media (max-width: 576px) {
    .breadcrumbs {
        font-size: 0.85em;
    }
    .breadcrumb {
        padding: 0.4rem 0.75rem;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Header adjustments */
  .header-container {
    flex-direction: column; /* Stack brand and nav */
    align-items: center; /* Center items when stacked */
    padding: 10px 15px; /* Adjust padding */
    text-align: center;
  }
  .header-brand {
    align-items: center;
    margin-bottom: 10px;
  }
  .header-brand a {
    margin-bottom: 5px; /* Add space below brand when stacked */
    font-size: 1.4em; /* Slightly smaller brand text */
  }
  .header-subtitle {
    font-size: 0.85em;
    text-align: center;
  }
  .header-nav {
    margin-top: 10px; /* Add space above nav when stacked */
  }
  .header-nav a {
    margin-left: 10px; /* Adjust spacing between nav links */
    margin-right: 10px;
  }

  /* Main content adjustments */
  main {
    padding: 15px; /* Adjust padding */
  }

  /* Nutrition facts / Detail page adjustments */
  .image {
    float: none; /* Remove float */
    display: block; /* Make it a block element */
    margin: 15px auto; /* Center image and adjust margin */
    width: 80%; /* Make image responsive, but not full width */
    max-width: 250px; /* Keep max size */
  }
  .performance-facts {
    float: none; /* Remove float */
    width: 95%; /* Make table responsive */
    margin: 20px auto; /* Center table */
    padding: 0.75rem; /* Adjust padding */
    box-sizing: border-box; /* Include padding/border in width */
  }
  .performance-facts__title {
      font-size: 1.8rem; /* Slightly smaller title */
  }

  /* Footer adjustments */
  footer {
      padding: 10px 0 !important; /* Reduce footer padding */
  }

  /* General adjustments */
  h1, h2 {
      font-size: 1.5em; /* Adjust heading sizes */
  }
  button, input[type="submit"], .btn {
      padding: 9px 18px !important; /* Slightly adjust button padding */
      font-size: 0.95em;
  }
  .amazon-button {
      padding: 7px 14px !important; /* Adjust amazon button padding */
  }

  /* Keep original rules if still relevant */
  header, footer {
    /* text-align: center !important; /* Flexbox handles alignment now */
  }
  /* nav ul li rule removed as .header-nav a handles spacing */
}

/* Optional: Add rules for very small screens */
@media (max-width: 480px) {
  .header-brand a {
    font-size: 1.2em; /* Even smaller brand text */
  }
  main {
      padding: 10px; /* Further reduce padding */
  }
  h1, h2 {
      font-size: 1.3em; /* Further adjust heading sizes */
  }
  button, input[type="submit"], .btn {
    padding: 8px 15px !important;
    font-size: 0.9em;
  }
  .amazon-button {
      padding: 6px 12px !important;
  }
  .performance-facts {
      padding: 0.5rem; /* Further adjust padding */
  }
}

/* --- Article Specific Styles --- */

/* Article List Page Styles */
.article-list .list-group-item {
    padding: 20px 15px; /* Increased padding */
    border: 1px solid #eee; /* Add border */
    border-radius: 5px; /* Rounded corners */
    margin-bottom: 15px; /* Space between items */
    background-color: #fff; /* White background */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow */
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.article-list .list-group-item:hover {
    background-color: #f8f9fa; /* Light grey on hover */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Slightly larger shadow on hover */
}

.article-list .article-title-link { /* Specific class for the link */
    font-size: 1.3rem; /* Slightly larger title */
    font-weight: bold;
    color: #3a5e7a; /* Match header color */
    text-decoration: none;
    display: block; /* Make link take full width */
    margin-bottom: 5px; /* Space below title */
}

.article-list .article-title-link:hover {
    color: #27704d; /* Match button green */
    text-decoration: underline;
}

.article-list .article-date {
    font-size: 0.9rem;
    color: #6c757d; /* Bootstrap muted color */
}

/* Article Detail Page Styles */
.article-detail-card { /* Specific class for the card */
    background: #ffffff; /* White background */
    border-radius: 8px;
    border: 1px solid #e9ecef; /* Lighter border */
    box-shadow: 0 3px 8px rgba(0,0,0,0.08); /* Slightly more pronounced shadow */
    padding: 25px 30px; /* Add padding inside card */
}

.article-detail-card .card-title { /* Target card-title within the specific card */
    font-family: 'Georgia', serif;
    font-weight: bold;
    color: #3a5e7a; /* Match header color */
    text-align: center;
    margin-bottom: 1.5rem; /* More space below title */
}

.article-detail-card .article-content {
    font-size: 1.1rem;
    color: #343a40; /* Darker text */
    line-height: 1.8;
    text-align: justify;
}

.article-detail-card .article-content h2,
.article-detail-card .article-content h3 {
    font-family: 'Georgia', serif;
    color: #495057; /* Slightly lighter heading color */
    margin-top: 2em;
    margin-bottom: 0.8em;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee; /* Underline headings */
}

.article-detail-card .article-content p {
    margin-bottom: 1.3em;
}

.article-detail-card .article-content ol,
.article-detail-card .article-content ul {
    padding-left: 2em;
    margin-bottom: 1.3em;
}

.article-detail-card .article-content li {
    margin-bottom: 0.9em;
}

.article-detail-card .article-content strong {
    color: #27704d; /* Match button green */
    font-weight: 600; /* Slightly bolder */
}

.article-detail-card .article-content .disclaimer {
    font-size: 0.9rem;
    font-style: italic;
    color: #6c757d; /* Bootstrap muted color */
    border-left: 4px solid #ced4da; /* Slightly thicker border */
    padding: 10px 15px; /* Add padding */
    margin-top: 2.5em;
    background-color: #f8f9fa; /* Light background for disclaimer */
    border-radius: 4px;
}

.article-detail-card hr { /* Target hr within the specific card */
    border-top: 1px solid #dee2e6; /* Standard Bootstrap border color */
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.article-detail-card .article-meta { /* Class for the meta info */
     text-align: right;
     font-size: 0.9em;
     color: #6c757d; /* Bootstrap muted color */
}