/* 
   ATOM | Computational Anatomy 
   Centralized Design System & Responsive Fixes
*/

:root {
    --paper: #f5f2eb;
    --ink: #2a2a2a;
    --pencil: #5c5c5c;
    --blueprint: #204ecf;
    --alert: #a83232;
    --glass: rgba(245, 242, 235, 0.85);
}

/* Base Styles */
body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: 'Cormorant Garamond', serif;
    overflow-x: hidden;
}

/* Responsive Typography */
h1 {
    font-size: clamp(2.5rem, 8vw, 6rem);
}

h2 {
    font-size: clamp(2rem, 5vw, 4rem);
}

h3 {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

/* Global Layout Fixes */
.container-custom {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Global Image & Video Fixes */
img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Table Responsiveness */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

table {
    min-width: 600px;
    /* Ensures tables don't squish too much on mobile */
    width: 100%;
}

/* Sketchy Borders (Shared) */
.sketch-border {
    border: 1px solid var(--ink);
    position: relative;
    background: white;
}

.sketch-border::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

/* Navigation Overrides */
nav {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Hide navigation if Tailwind fails (Safe fallback) */
.nav-links {
    display: flex;
    gap: 2rem;
}

@media (max-width: 768px) {
    .nav-links-desktop {
        display: none !important;
    }
}

/* Custom Utilities */
.text-blueprint {
    color: var(--blueprint);
}

.bg-paper {
    background-color: var(--paper);
}

.border-ink {
    border-color: var(--ink);
}

/* Hero Section Specifics */
.hero-centering {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 80vh;
}