/* General Styling */
a { 
    text-decoration: none;
}

body {
    background-color: #ffffff;
    font-family: 'Bebas Neue', sans-serif;
    color: black;
    margin: 0;
    padding: 0;
    padding-top: 60px; /* Adjust this value based on your navbar height */
}

/* Header and Navigation */
.navbar {
    position: fixed; /* This makes the navbar stay fixed at the top */
    top: 0;
    width: 100%;
    z-index: 1000; /* Ensures navbar stays above other content */
    background-color: #ffffff;
    padding: 0.5rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Optional: adds subtle shadow */
}

.header-container {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding: 10px 20px;
}

/* Remove default Bootstrap margins */
.container {
    margin-top: 0 !important;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: auto;
    padding: 0;
    margin: 0;
}

/* Navbar Link Styling */
.nav-link {
    font-family: 'Bebas Neue', sans-serif;
    color: black;
    font-weight: normal;
    font-size: 1.4rem; /* Slightly larger for better readability */
    transition: color 0.3s ease;
    padding: 5px 15px;
    letter-spacing: 1px; /* Better spacing for Bebas Neue */
    padding: 0.5rem 1rem; /* Smaller padding */
}

/* Active and Hover State */
.nav-link:hover, 
.nav-link.active {
    color: #007bff !important;
    font-weight: normal !important; /* Remove bold to prevent shifting */
    transform: scale(1.1); /* Subtle scale instead of bold */
}

/* Footer Styling (OVERRIDE: black footer like navbar) */
footer {
    background: #000;                              /* black */
    color: #e9eefc;                                /* readable text */
    border-top: 1px solid rgba(255,255,255,.12);   /* subtle divider */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
                 'Lucida Sans', Arial, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.3px;
}

/* Footer Suggestion Link Styling (readable on black) */
.suggestion-link {
    color: #bcd3ff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    transition: color .15s ease, text-decoration-color .15s ease, opacity .15s ease;
}

.suggestion-link:hover {
    color: #d9e6ff;
    text-decoration: underline;
}

.suggestion-link:focus-visible {
    outline: 2px solid #4c8dff;
    outline-offset: 3px;
    border-radius: 4px;
}

.footer-text-version {
    font-size: small;
    color: #94a3b8;  /* softer on black */
}

/* Force scrollbar to prevent shifting on different pages */
html {
    overflow-y: scroll;
}

/* ============================================
   SYSTEMATIC PAGE LAYOUT SYSTEM
   Consistent side spacing for all pages
   Ensures space for ads and easier scrolling
   ============================================ */

:root {
  /* Content max-width - consistent across all pages */
  --content-max-width: 1440px;
  
  /* Side padding system - maintains minimum space for ads */
  --side-padding-mobile: 24px;      /* Minimum on mobile - increased for better spacing */
  --side-padding-tablet: 32px;     /* Tablet */
  --side-padding-desktop: 40px;    /* Desktop - space for side ads */
  --side-padding-large: 48px;      /* Large screens */
}

/* Standard page container - use this class for consistent spacing */
.page-container-standard,
.page-standard {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-left: clamp(var(--side-padding-mobile), 4vw, var(--side-padding-large));
  padding-right: clamp(var(--side-padding-mobile), 4vw, var(--side-padding-large));
  padding-top: 0;
  padding-bottom: 0;
}

/* Ensure tables don't interfere with scrolling - add side margin */
.table-scroll,
.table-wrap {
  /* Prevent tables from going edge-to-edge */
  margin-left: 8px;
  margin-right: 8px;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  /* Keep 24px minimum even on very small screens for consistent spacing */
  .page-container-standard,
  .page-standard {
    padding-left: clamp(24px, 4vw, 32px);
    padding-right: clamp(24px, 4vw, 32px);
  }
  
  .table-scroll,
  .table-wrap {
    margin-left: 4px;
    margin-right: 4px;
  }
}

@media (min-width: 1920px) {
  :root {
    --side-padding-large: 64px;  /* More space on very large screens for ads */
  }
}