/* css/style.css */

@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather_24pt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* Basic body styling to confirm the stylesheet is linked */
body {
    font-family: 'Raleway', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Matches Skeleton's default */
    /* You can add more global styles here later, for example:
    line-height: 1.6;
    color: #333;
    */
}

/* Example: Add some breathing room to the main container if needed,
   though Skeleton's container already has padding.
   Adjust as you see fit. */
.container {
    /* padding-top: 20px; */
    /* padding-bottom: 20px; */
}

/* You can add more specific styles for your project elements as we build them. */
/* For instance:
h1, h2, h3, h4, h5, h6 {
    font-weight: 400; // Skeleton default, but you can override
}
*/

/* Custom style for aligning the search button */
.search-form-button-aligned {
    margin-top: 2.7rem; /* Adjust this value as needed for perfect alignment */
}

/* css/style.css */

/* ... (your existing styles, like body, .container, .search-form-button-aligned) ... */

/* --- Site Logo & Title Styles --- */
.logo-container {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.logo-container .site-title-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-logo {
    height: 60px; /* You can adjust this value to make the logo bigger or smaller */
    width: auto;  /* This maintains the correct aspect ratio */
    margin-right: 10px;
}

.site-title-text {
    font-family: 'Merriweather', serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #373330;   /* Use your new color */
    transition: color 0.2s ease-in-out;

}

.logo-container .site-title-link:hover .site-title-text {
    color: #0FA0CE; /* A slightly darker blue for the hover effect */
}


/* css/style.css */

/* ... (your existing styles) ... */


/* Custom styling for main page headings (H2) */
h2 {
    font-size: 2.8rem; /* Optional: slightly smaller than Skeleton's default H2 if desired */
    font-weight: 300;  /* Make the font lighter than the default bold */
    
    padding-bottom: 10px; /* Space between the heading text and the line */
    margin-bottom: 25px; /* Space between the separator line and the content below it */
    position: relative; /* This is necessary for positioning the line */
}

h2::after {
    content: ''; /* Pseudo-elements require a content property, even if empty */
    position: absolute;
    bottom: 0; /* Position the line at the bottom of the h2's padding area */
    left: 0; /* Align the line to the left of the heading */
    
    width: 200px; /* Set a specific, narrow width for the line */
    height: 2px; /* Make it a little thicker than the old 1px border */
    background-color: #33C3F0; /* Use Skeleton's primary color for a nice accent */
}

/* css/style.css */

/* ... (your existing styles for h2, .site-title-link, .search-form-button-aligned) ... */


/* --- STYLES FOR GLOBAL HEADER SEARCH BAR --- */
.header-search-form {
    margin-bottom: 0; /* Override Skeleton's default form margin */
}

.header-search-form input[type="text"] {
    height: 30px; /* Make the input shorter */
    padding: 3px 6px; /* Reduce vertical and horizontal padding */
    font-size: 1.3rem; /* Make the text inside slightly smaller */
    margin-bottom: 0; /* Override Skeleton's default input margin */
}

.site-header {
     margin-top: 2rem; /* ADDED: This creates space above the header */
    padding-bottom: 1rem; /* Creates space for the border-bottom */
    margin-bottom: 1rem; /* Reduced gap */ /* Space between the header and main content */
    border-bottom: 1px solid #E1E1E1; /* Replaces the old <hr> element */
}

/* Target the H1 inside our new site-header class */
.site-header h1 {
    margin-bottom: 0; /* Removes the large default bottom margin from the H1 */
}


/* --- STYLES FOR USER NAVIGATION IN HEADER --- */
.user-nav {
    display: flex;
    justify-content: flex-end; /* Align items to the right */
    align-items: center;    /* Vertically align all items */
    flex-wrap: wrap;        /* Allow items to wrap */
    font-size: 1.4rem;
}

/* NEW: Add horizontal spacing to all nav items */
.user-nav > * {
    margin: 0 4px; /* Adds a little space on each side of every item */
}

.user-nav strong {
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* --- Notification Bell Styles --- */
.notification-bell {
    position: relative; 
    line-height: 1; 
}

#notification-bell-icon {
    font-size: 1.8rem; /* REDUCED: Make the bell smaller */
    text-decoration: none;
    color: #555;
    transition: color 0.2s ease-in-out;
}

#notification-bell-icon:hover {
    color: #33C3F0;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: #D32F2F;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1;
    min-width: 20px;
    text-align: center;
    box-sizing: border-box;
}

.notification-dropdown {
    display: none; /* Hidden by default */
    position: absolute;
    top: 120%;
    right: 0;
    width: 350px;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 400px;
    overflow-y: auto;
    text-align: left;
}

/* --- STICKY FOOTER STYLES --- */

/* Make sure the html and body can take up the full height */
html, body {
    height: 100%;
}

/* Turn the body into a flex container that arranges its children vertically */
body {
    display: flex;
    flex-direction: column;
}

/* Target the main container and tell it to grow to fill available space */
.container {
    flex-grow: 1;
}


/* ... (your existing styles) ... */


/* --- STYLES FOR LIVE SEARCH SUGGESTIONS --- */

/* This is the wrapper div we added to our HTML */
.search-wrapper {
    position: relative; /* This creates the positioning context for the results list */
}

/* This is the container for our suggestion list */
.search-results-list {
    position: absolute;
    top: 100%; /* Position it right below its parent wrapper */
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    z-index: 10; /* Ensure it appears on top of other content */
    max-height: 250px; /* Limit the height and add a scrollbar if needed */
    overflow-y: auto;
}

/* Hide the results list if it's empty */
.search-results-list:empty {
    display: none;
}

/* This styles each individual suggestion item (the <a> tag) */
.suggestion-item {
    display: block; /* Make the whole area clickable */
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    font-size: 1.4rem;
}

.suggestion-item:last-child {
    border-bottom: none; /* Remove border from the last item */
}

.suggestion-item:hover {
    background-color: #f5f5f5; /* Add a hover effect */
    cursor: pointer;
}


/* --- Style to make a button look like a simple text link --- */
.link-button {
    background: none;
    border: none;
    color: #1EAEDB; /* This is Skeleton's default link color */
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: inherit; /* Make it the same size as surrounding text */
    font-family: inherit; /* Use the same font as surrounding text */
    vertical-align: baseline; /* Helps it align with text and pipe separators */
    text-align: left; /* Ensure it's left-aligned if it's inside a centered container */
}
.link-button:hover {
    color: #0FA0CE; /* Skeleton's link hover color */
}

/* Style for destructive action buttons */
.button.button-danger,
button.button-danger {
    color: #D33C3C;
    background-color: transparent;
    border-color: #D33C3C;
}
.button.button-danger:hover,
button.button-danger:hover {
    color: #FFF;
    background-color: #D33C3C;
    border-color: #D33C3C;
}

/* --- Style to highlight the user's own pinned review --- */
.review-item.user-own-review {
    background-color: #f8f9fa; /* A very light, subtle grey background */
    border-left: 3px solid #33C3F0; /* A thicker left border using Skeleton's primary color */
}

/* Hides an element but preserves its space in the layout */
.search-hidden {
    visibility: hidden;
}

/* Makes buttons and links look like identical text actions */
.action-link, .action-link:hover, .action-link:visited {
    /* Reset all button/link properties */
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;

    /* Set explicit font styles to be identical */
    font-family: inherit; /* Use the parent's font */
    font-size: 100%;    /* Force it to be exactly the parent's font size */
    font-weight: normal; /* Ensure neither is bolder than the other */

    /* Set link appearance */
    color: #1EAEDB; /* Skeleton's link color */
    text-decoration: underline;
    cursor: pointer;

    /* Alignment */
    vertical-align: baseline;
}

/* Define the specific hover state color */
.action-link:hover {
    color: #0FA0CE;
}


/* --- STYLES FOR HIGHLIGHTING EDITED ADMIN ROW --- */

@keyframes highlight-fade {
    from { background-color: #d9edf7; } /* Start with our blue 'info' color */
    to { background-color: transparent; }
}

.highlight-row {
    animation: highlight-fade 5s ease-out 1; /* Run the animation once over 3 seconds */
}


/* --- STYLES FOR ADMIN DATA TABLES --- */

/* Add striping to rows for better readability */
.admin-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Base style for the role badges */
.role-badge {
    color: #fff;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
}

/* Specific colors for each role */
.role-admin {
    background-color: #c9302c; /* Red */
}
.role-moderator {
    background-color: #337ab7; /* Blue */
}
.role-user {
    background-color: #777; /* Grey */
}


/* --- STYLES FOR USER STATUS BADGES --- */

/* Base style for the status badges */
.status-badge {
    color: #fff;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
}

/* Specific colors for each status */
.status-active {
    background-color: #5cb85c; /* Green */
}
.status-banned {
    background-color: #f0ad4e; /* Orange */
}

/* --- STYLES FOR ADMIN TABLE ACTION CELLS --- */

/* Turn the table cell into a flex container */
.actions-cell {
    display: flex;
    align-items: center;
    gap: 5px;
}


/* --- Style for separating major content sections on a page --- */
.content-section {
    /* We create the separation using only vertical margin */
    margin-top: 5rem;
    /* The border-top property has been removed */
}


/* --- Custom Scrollable Tooltip Styles --- */
.tooltip-container {
    position: relative; /* This is the anchor for positioning the tooltip */
}

.custom-tooltip {
    display: none; /* Hidden by default */
    position: absolute;
   bottom: 100%; /* Position it directly on top of the table cell */
    left: 0;
    z-index: 10; /* Make sure it appears on top of other content */
    
    /* Appearance */
    background-color: #333;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    width: 450px; /* Set a fixed width */
    
    /* This is the key part for scrolling */
    max-height: 300px;
    overflow-y: auto;
    
    /* Text formatting */
    text-align: left;
    white-space: normal;
}

/* This is the magic: show the tooltip when hovering over the container cell */
.tooltip-container:hover .custom-tooltip {
    display: block;
}

.status-badge.status-visible {
    background-color: #dff0d8;
    color: #3c763d;
}
.status-badge.status-hidden {
    background-color: #f2dede;
    color: #a94442;
}


/* --- Styles for Status Badges --- */
.status-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: capitalize;
    display: inline-block; /* Helps with spacing */
}

.status-badge.status-visible {
    background-color: #dff0d8; /* Light green */
    color: #3c763d;
    border: 1px solid #d6e9c6;
}

/* This single rule targets all our "hidden" states */
.status-badge.status-hidden,
.status-badge.status-hidden_by_moderator,
.status-badge.status-deleted_by_user {
    background-color: #f2dede; /* Light red */
    color: #a94442;
    border: 1px solid #ebccd1;
}


/* --- Admin Navigation (Revised) --- */
.admin-nav-container {
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    margin-bottom: 3rem;
    padding: 0; /* Let the links control the height */
}

.admin-nav {
    display: flex;
    flex-wrap: wrap; 
    width: 100%;
}

/* Style for the text links themselves */
.admin-nav a {
    font-size: 1.4rem; /* Still slightly smaller, but readable */
    text-decoration: none;
    font-weight: bold;
    color: #555;
    padding: 12px 16px; /* Give each link its own space */
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

/* Hover/active effect */
.admin-nav a:hover {
    color: #33C3F0;
    background-color: #e9e9e9;
    border-bottom-color: #33C3F0;
}

/* --- Styles for Hybrid Search Results --- */
.search-results-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-results-list .address-text {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-results-list .result-badge {
    flex-shrink: 0;
    margin-left: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
}

.result-badge.has-reviews {
    background-color: #e1f5fe; /* Light blue */
    color: #0277bd;
}

.result-badge.no-reviews {
    background-color: #e8f5e9; /* Light green */
    color: #2e7d32;
}
.result-badge.dawa-result {
    background-color: #f1f1f1; /* Light grey */
    color: #555;
}

/* --- Styles for Report Status Badges --- */
.status-badge.status-open {
    background-color: #fff3e0; /* Light orange */
    color: #e65100;
    border: 1px solid #ffcc80;
}
.status-badge.status-resolved {
    background-color: #dff0d8; /* Light green */
    color: #3c763d;
    border: 1px solid #d6e9c6;
}
.status-badge.status-dismissed {
    background-color: #f1f1f1; /* Light grey */
    color: #555;
    border: 1px solid #ddd;
}

/* --- Styles for Statistics Page --- */
.stats-glance .stat-box {
    text-align: center;
    border: 1px solid #E1E1E1;
    padding: 20px;
    border-radius: 4px;
}

.stats-glance .stat-box h5 {
    margin-bottom: 10px;
}

.stats-glance .stat-number {
    font-size: 3.5rem;
    font-weight: 600;
    color: #33C3F0;
}

.stat-list {
    list-style: none;
    margin-left: 0;
    border: 1px solid #E1E1E1;
    border-radius: 4px;
}
.stat-list li {
    font-size: 1.6rem;
    padding: 10px 15px;
    border-bottom: 1px solid #E1E1E1;
}
.stat-list li:last-child {
    border-bottom: none;
}
.stat-list li strong {
    color: #555;
}

.star-distribution-chart {
    padding: 10px 15px 15px 15px;
}
.star-bar-container {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.star-bar-container:nth-child(even) {
    background-color: #f9f9f9;
    border-radius: 4px;
}

.star-bar-container:last-child {
    margin-bottom: 0;
}
.star-label {
    flex-basis: 75px;
    flex-shrink: 0;
    font-size: 1.4rem;
}
.star-bar {
    flex-grow: 1;
    background-color: #f1f1f1;
    border-radius: 4px;
    height: 22px;
}
.star-bar-fill {
    background-color: #FFC107; /* Star yellow */
    height: 100%;
    border-radius: 4px;
    color: #333;
    font-size: 1.2rem;
    line-height: 22px;
    text-align: right;
    padding-right: 5px;
    white-space: nowrap;
    box-sizing: border-box;
}

.star-percentage-label {
    flex-basis: 50px;
    flex-shrink: 0;
    text-align: right;
    font-size: 1.4rem;
    font-weight: bold;
    color: #555;
}


/* --- Styles for Blog Post Status Badges --- */
.status-badge.status-published {
    background-color: #dff0d8; /* Light green */
    color: #3c763d;
    border: 1px solid #d6e9c6;
}
.status-badge.status-draft {
    background-color: #f1f1f1; /* Light grey */
    color: #555;
    border: 1px solid #ddd;
}

/* --- Styles for Admin Page Headers --- */
.admin-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.admin-header-actions .page-title {
    margin-bottom: 0;
}


/* --- Blog Post Styles (Revised for Readability) --- */
.blog-post {
    background-color: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 2.5rem 3rem;
    margin-bottom: 3.5rem;
}
.blog-post hr {
    display: none; /* Hide the <hr> between posts now that we have cards */
}
.post-meta {
    color: #757575; /* A readable, medium grey for secondary info */
    font-size: 1.4rem;
    margin-bottom: 2rem;
}
.post-content {
    line-height: 1.7; /* Increased line spacing for readability */
}
/* Make main paragraph text much darker for high contrast */
.post-content p {
    color: #333; 
    margin-bottom: 1.5rem;
}
/* Make headings stand out more */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
    color: #111; /* Almost black */
    margin-top: 2.5rem;
}
.blog-post > h3 {
    margin-top: 0;
}
.post-content blockquote {
    border-left: 5px solid #E1E1E1;
    padding: 10px 20px;
    margin-left: 0;
    margin-right: 0;
    background-color: #f5f5f5;
}
.post-content pre {
    background-color: #f5f5f5;
    padding: 15px;
    border-radius: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px; /* Optional: adds a nice rounded corner to images */
}
/* --- Markdown Editor Toolbar --- */
.markdown-toolbar {
    background-color: #f5f5f5;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}
.markdown-btn {
    margin: 2px;
    font-size: 1.3rem;
    height: 30px;
    line-height: 30px;
}
/* Make textarea attach to the toolbar */
#content_markdown {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
}

/* --- Markdown Preview Pane --- */
.markdown-preview {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px 15px;
    background-color: #fff;
    height: 468px; /* Match the textarea + toolbar height */
    overflow-y: auto; /* Add a scrollbar if content is long */
}


/* --- Styles for Tabbed Editor --- */
.editor-tabs {
    border-bottom: 1px solid #ccc;
    margin-bottom: -1px; /* Neatly overlaps the pane's border */
}

.tab-btn {
    padding: 10px 15px;
    border: 1px solid transparent;
    border-bottom: none;
    background-color: #f1f1f1;
    border-radius: 4px 4px 0 0;
    margin-right: 5px;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: bold;
}

.tab-btn.active {
    background-color: #fff;
    border-color: #ccc;
}

.editor-panes .tab-pane {
    display: none; /* Hide all panes by default */
}

.editor-panes .tab-pane.active {
    display: block; /* Show only the active pane */
}

/* Make the preview pane match the editor height */
.markdown-preview {
    height: 468px;
}


.status-badge.status-archived {
    background-color: #f2dede; /* Light red */
    color: #a94442;
    border: 1px solid #ebccd1;
}

/* --- Blog Search Form Styles --- */
.blog-search-form input[type="text"],
.blog-search-form .button {
    font-size: 1.4rem; /* Default is 1.5rem */
    margin-bottom: 0; /* Makes the form more compact vertically */
    height: 38px; /* Standard Skeleton form height */
}



/* --- DAWA Search Results List --- */
.dawa-results-list {
    margin-top: 2rem;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 20px 20px 20px 40px; /* Add extra padding on the left for the numbers */
}

.dawa-results-list li {
    margin-bottom: 1rem;
}

/* Add a subtle background color to every second row */
.dawa-results-list li:nth-child(even) {
    background-color: #f2f2f2;
}

/* Style the numbers of the ordered list */
.dawa-results-list li::marker {
    color: #D32F2F; /* A dark red */
    font-weight: bold;
}

/* --- Styles for Homepage Latest Reviews --- */

#search-results-area .content-section { /* spacing between the header and the featured reviews section */
    margin-top: 2rem;
}
.latest-review-item {
    border-bottom: 1px solid #e1e1e1;
    padding: 1.5rem 0;
    
}
.latest-review-item:last-child {
    border-bottom: none;
}
.latest-review-item .star-rating {
    margin-right: 5px;
}
.latest-review-item .review-snippet {
    font-style: italic;
    color: #777;
    margin-top: 0.5rem;
    margin-bottom: 0;
}
.review-date-meta {
    font-size: 1.3rem;
    color: #999;
}

/* --- Notification Dropdown Styles --- */
.notification-dropdown {
    padding: 5px 0; /* Add some vertical padding */
}

.notification-dropdown .notification-item {
    list-style: none;
    margin: 0;
}

.notification-dropdown .notification-item a {
    display: block;
    padding: 10px 15px;
    color: #555;
    text-decoration: none;
    font-size: 1.4rem;
    white-space: normal; /* Allow text to wrap */
}

.notification-dropdown .notification-item a:hover {
    background-color: #f5f5f5;
}

.notification-dropdown .notification-item:nth-child(even) {
    background-color: #eaf9ff; /* A very light, subtle blue */
}

/* --- Cookie Consent Banner --- */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #333;
    color: #fff;
    padding: 15px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cookie-consent-banner p {
    margin: 0;
    font-size: 1.4rem;
}

.cookie-consent-banner button {
    margin: 0 0 0 20px; /* Add margin only to the left of the button */
    flex-shrink: 0; /* Prevent the button from shrinking on small screens */
}

/* css/style.css */

/* Styles for Policy Pages */
.policy-content h2 {
  margin-top: 40px;
  margin-bottom: 20px;
  font-size: 2.5rem;
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 10px;
}

.policy-content h3 {
  margin-top: 30px;
  font-size: 2.0rem;
}

.policy-content ul {
  list-style-type: disc;
  margin-left: 20px;
}

.policy-content a {
    /* This will make links in the policy match our site's link style */
    color: #33C3F0; 
}

/* --- Homepage CTA Sentence --- */
.home-cta-sentence {
    text-align: center;
    padding: 3rem 0;
}
.home-cta-sentence p {
    font-size: 2.0rem;
    color: #777;
    margin: 0;
}
.home-cta-sentence p a {
    text-decoration: none;
}
.home-cta-sentence p strong {
    color: #33C3F0; /* Primary accent color */
}
.home-cta-sentence p a:hover strong {
    text-decoration: underline;
}


/* --- About Page Styles --- */
.about-page-container {
    text-align: center;
    padding: 7rem 0; /* Adds overall vertical space */
}

.mission-statement {
    font-size: 2.0rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto 10rem auto; /* Creates the large space below the mission statement */
}

.how-it-works {
    margin-bottom: 9rem; /* Creates the large space below the "how it works" section */
}

.feature-box h3 {
    font-size: 2.2rem;
}

.feature-box {
    padding: 0 10px;
}


/* --- Form Helper Text --- */
.form-helper-text {
    font-size: 1.2rem;
    color: #777;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* --- Responsive Header for Tablets and Smaller --- */
@media (max-width: 750px) {
    /* Change the header row to a vertical column */
    .site-header .row {
        flex-direction: column;
    }

    /* Make each section in the header take the full width */
    .site-header .columns {
        width: 100%;
        margin-left: 0; /* Reset column spacing */
        margin-bottom: 1.5rem;
    }

    /* Center the logo and nav links */
    .logo-container .site-title-link,
    .site-header .user-nav {
        justify-content: center;
    }

    /* Remove the search bar from the header flow on small screens */
    .header-search-form {
        display: none;
    }
}