/* ============================================
   BASE.CSS - Structural Foundation
   Pure layout, no colors or visual effects
   ============================================ */

/* === RESET & FOUNDATION === */

* { 
  box-sizing: border-box; 
}

html, body { 
  height: 100%; 
  margin: 0; 
  padding: 0;
}

body {
  min-height: 100vh;
}

/* === HERO PAGE LAYOUT === */

/* Center content helper (used by root index.html and 404.html) */
.center {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--page-pad);
  text-align: center;
}

/* === BLOG LAYOUT === */

/* Flexbox container for sidebar + content */
.container {
  display: flex;
  width: 100%;
  height: 100vh;
}

/* Left sidebar - navigation center */
.sidebar {
  position: sticky;
  top: 0;
  width: 300px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
  height: 100vh;
}

.sidebar-header {
  text-align: center;
  margin-bottom: 20px;
}

/* Cluster counter grid (near/far edge counts) */
.counter-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding: 10px 0;
}

.count-item {
  font-size: 0.8em;
  text-align: center;
  padding: 0;
  border: none;
  flex: 1 1 45%;
  box-sizing: border-box;
}

.count-item h3 {
  margin: 0;
  font-size: 1em;
}

.count-item p {
  margin: 0;
  line-height: 1.2;
}

/* Sidebar link structure */
.sidebar-links {
  display: flex;
  flex-direction: column;
}

.modal-link {
  text-decoration: none;
  display: block;
  transition: transform 0.2s ease-in-out;
  position: relative;
}

.modal-link:hover {
  transform: scale(1.05);
  z-index: 10;
}

.modal-preview {
  border-radius: 8px;
  padding: 15px;
  transition: background-color 0.8s ease-in-out, box-shadow 0.8s ease-in-out;
}

.modal-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.modal-category {
  font-style: italic;
  margin-bottom: 5px;
  font-size: 0.9em;
}

.modal-snippet {
  font-size: 0.8em;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.modal-link:hover .modal-snippet {
  opacity: 1;
}

/* Content area structure */
.content-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 80px; /* Space for fixed footer */
}

/* Sticky header at top of content */
.content-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 40px;
  box-sizing: border-box;
}

.content-header h1 {
  font-size: 2.5em;
  margin-top: 0;
}

.content-header h2 {
  font-size: 1.5em;
  margin-bottom: 20px;
}

/* Scrollable content body */
.content-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0 40px;
  box-sizing: border-box;
  position: relative;
}

.content-body p {
  line-height: 1.6;
  margin-bottom: 20px;
}

/* === TYPOGRAPHY STRUCTURE === */

h1 { 
  margin: 0 0 0.75rem; 
  font-weight: 700; 
  font-size: clamp(3rem, 9vw, 8rem); 
}

p { 
  margin: 0; 
  font-size: clamp(1.1rem, 2.2vw, 1.6rem); 
  opacity: 0.82; 
}

/* Blog-specific title sizing (smaller than hero h1) */
.content h1,
.content-wrapper h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 1rem;
}

/* Content breathing space */
.content-body {
  max-width: 800px; /* Constrain line length */
  margin: 0 auto;   /* Center the content */
  padding: 40px 60px 120px; /* More generous padding, extra at bottom */
}

/* Chat message spacing */
.chat-message {
  margin-bottom: 2.5rem; /* Vertical rhythm */
  line-height: 1.8; /* More line spacing */
}

.chat-message p {
  margin-bottom: 1.2rem;
  max-width: 65ch; /* Optimal reading length */
}

/* Author labels */
.chat-message .author {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9em;
  opacity: 0.7;
}

/* Reduce sidebar density */
.modal-preview {
  margin-bottom: 1rem; /* Space between links */
}

.counter-grid {
  gap: 20px; /* More breathing room */
  margin-bottom: 2rem;
}

/* === FOOTER LAYOUT === */

/* TODO: Future scroll-fade effect experiment
   - Idea: Text fades in/out at viewport edges instead of hard scrolling
   - Top fade: Content fades out as user scrolls up
   - Bottom fade: Content fades in as user scrolls down, footer always visible
   - Creates "breathy" effect - looking through frosted glass
   - Implementation: CSS mask-image gradient on content + scroll behavior
   - See: DESIGN_IDEAS.md and PROJECT_CHRONICLE.md for full vision
*/

.site-footer {
  position: fixed;
  left: 0; 
  right: 0; 
  bottom: 0;
  text-align: center;
  font-size: 0.95rem;
  opacity: 0.6;
  pointer-events: none; /* Footer is display-only, not interactive */
  z-index: 20;
  padding: 20px;
}

.site-footer .middot { 
  padding: 0 0.5ch; 
  opacity: 0.5; 
}

.site-footer .tagline {
  /* Color inherited from theme */
}

@media (max-width: 420px) {
  .site-footer { 
    font-size: 0.88rem; 
    padding: 0 0.75rem; 
  }
  .site-footer .tagline { 
    display: block; 
    margin-top: 0.15rem; 
  }
}

/* === 404 PAGE STRUCTURE === */

.subline {
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* === NETWORK VISUALIZATION STRUCTURE === */

/* Shoulder modals for adjacent/orthogonal navigation */
.shoulder-modal {
  position: fixed;
  top: 30%;
  width: 180px;
  opacity: 0.2;
  transition: all 0.3s ease;
  padding: 0.5em;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8em;
}

.shoulder-modal:hover, 
.shoulder-modal:focus {
  opacity: 0.9;
  transform: scale(1.1);
}

.shoulder-left { 
  left: 0.5%; 
}

.shoulder-right { 
  right: 0.5%; 
}

/* === TRANSITIONS & ANIMATIONS === */

/* Page-level transition (0.5s for full page changes) */
body.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

/* Element-level transitions (0.2s for UI components) */
.fade-out { 
  opacity: 0; 
  transition: opacity 0.2s ease; 
}

.fade-in { 
  opacity: 1; 
  transition: opacity 0.2s ease; 
}

/* Breathing animation for interactive elements */
.breathing {
  animation: breathe 6s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.05); 
  }
}

/* Heat rise animation for smoke text effect */
@keyframes heatRise {
  0%   { 
    background-position: 50% 120%, 50% 100%; 
  }
  100% { 
    background-position: 50% -20%, 50% 100%; 
  }
}

/* === RESPONSIVE ADJUSTMENTS === */

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 40vh;
  }
  
  .content-header,
  .content-body {
    padding: 20px;
  }
}

@import url("/assets/themes/default.css");