/* ============================
   Layout-specific styles
   ============================ */

:root {
  --navbar-height: 80px; /* Increased to accommodate hover effect */
  --footer-height: 60px; /* Ensure this matches your actual footer height */
}

/* Container */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(16px, 1rem + 1vw, 24px); /* Fluid container padding */
}

@media (max-width: 1350px) {
    .container {
        padding: 0 30px; /* More padding to accommodate language switcher */
    }
}

@media (max-width: 1200px) {
    .container {
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }
}

/* Site header is rendered via React (`static/site-header`). */

/* Content */
.content {
    flex: 1;
    padding: 2rem 0;
    min-height: calc(100vh - 10rem); /* Header + Footer height */
}

/* Ensure all main content areas have proper spacing */
main, .main-content {
    padding: 0 12px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .content {
        padding: 1.5rem 0;
    }
    
    main, .main-content {
        padding: 0 8px;
    }
}

/* Page Section Layouts */
.section {
  position: relative;
  padding: 4rem 0;
}

.section-title {
  position: relative;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--heading-color);
}

.section-description {
  font-size: 1.125rem;
  color: var(--secondary-text);
  max-width: 700px;
  margin: 0 auto 3rem;
}

/* Layout configurations - gaps and alignment */
.two-column {
  gap: 3rem;
  align-items: center;
}

.three-column {
  gap: 2rem;
}

.four-column {
  gap: 1.5rem;
}

/* Dashboard Layout */
.dashboard-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
}

.dashboard-sidebar {
  background: var(--glass-background);
  backdrop-filter: blur(var(--material-regular-blur));
  -webkit-backdrop-filter: blur(var(--material-regular-blur));
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  padding: 2rem;
  height: fit-content;
  position: sticky;
  top: 6rem;
  border: 1px solid var(--glass-border);
}

.dashboard-main {
  width: 100%;
}

/* Forms Layout */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Site footer is rendered via React (`static/site-footer`). */

/* Back to Top Button */
.back-to-top-btn {
    position: fixed;
    bottom: var(--space-xl);
    right: var(--space-xl);
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-pill);
    background: var(--material-regular-bg);
    backdrop-filter: blur(var(--material-regular-blur)) saturate(var(--material-regular-saturate));
    -webkit-backdrop-filter: blur(var(--material-regular-blur)) saturate(var(--material-regular-saturate));
    border: 1px solid var(--material-regular-border);
    color: var(--foreground-text);
    font-size: var(--text-headline-size);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--space-md));
    z-index: 50;
    box-shadow: var(--material-regular-shadow);
}

.back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-btn:hover {
    background: var(--ai-accent-gradient);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--button-hover-shadow);
}

.back-to-top-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .back-to-top-btn {
        bottom: var(--space-lg);
        right: var(--space-lg);
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (max-width: 1024px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }
    
    .dashboard-sidebar {
        position: relative;
        top: 0;
    }
    
    .two-column {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .three-column,
    .four-column {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 1400px) {
    .three-column,
    .four-column {
        grid-template-columns: 1fr;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* Base grid system - Consolidated with existing layout classes */
.grid {
    display: grid;
    gap: var(--grid-gap, 1.5rem);
}

.grid-2, .two-column {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3, .three-column {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4, .four-column {
    grid-template-columns: repeat(4, 1fr);
}

.grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-width, 250px), 1fr));
}

/* Container widths */
.container-sm {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-md {
    max-width: 768px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-lg {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-xl {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Responsive grid adjustments */
@media (max-width: 768px) {
    .grid-2, 
    .grid-3, 
    .grid-4 {
        grid-template-columns: 1fr;
    }
}