/* 
=================================================================
HUGOCIB - CSS VARIABLES & BASE STYLES
=================================================================
Core styling foundation with theme variables, reset and utilities
*/

/* =================================================================
   CSS VARIABLES FOR THEMING
   ================================================================= */

/* Dark theme (default) */
:root {
  /* =================================================================
     TYPOGRAPHY SYSTEM
     ================================================================= */
  /* Font families */
  --font-primary: 'Lexend', sans-serif;    /* Main content font */
  --font-headings: 'Lexend', sans-serif;   /* Headings font */
  --font-mono: 'Monaco', 'Menlo', monospace; /* Technical data */
  
  /* Font sizes - hierarchical system */
  --font-size-section-title: 2.5rem;       /* h3 in sections (Tips & Tops, Tour, etc.) */
  --font-size-section-title-tablet: 1.8rem;
  --font-size-section-title-mobile: 1.5rem;
  
  --font-size-content-title: 1.5rem;       /* Content titles (tip titles, step headers) */
  --font-size-content-text: 1.1rem;        /* Content descriptions (tips, steps) */
  --font-size-body: 1rem;                  /* General body text */
  --font-size-small: 0.9rem;               /* Small text, metadata */
  
  /* Navigation specific font sizes */
  --font-size-nav: 1rem;                   /* Navbar links */
  --font-size-nav-tablet: 0.9rem;          /* Navbar on tablet */
  --font-size-nav-mobile: 0.85rem;         /* Navbar on mobile */
  --font-size-nav-small: 0.8rem;           /* Navbar on very small screens */
  
  --font-size-nav-icon: 1.6rem;            /* Navbar icons */
  --font-size-nav-icon-tablet: 1.3rem;     /* Navbar icons on tablet */
  --font-size-nav-icon-mobile: 1.2rem;     /* Navbar icons on mobile */
  --font-size-nav-icon-small: 1.1rem;      /* Navbar icons on very small screens */
  
  --font-size-footer-icon: 2rem;           /* Footer contact icon */
  --font-size-footer-icon-tablet: 1.8rem;  /* Footer icon on tablet */
  --font-size-footer-icon-mobile: 1.6rem;  /* Footer icon on mobile */
  
  --font-size-copyright: 0.75rem;          /* Footer copyright text */
  --font-size-copyright-tablet: 0.7rem;    /* Copyright on tablet */
  --font-size-copyright-mobile: 0.65rem;   /* Copyright on mobile */
  
  /* Font weights */
  --font-weight-light: 200;
  --font-weight-normal: 300;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Letter spacing */
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.02em;
  
  /* =================================================================
     SPACING SYSTEM
     ================================================================= */
  /* Section spacing */
  --section-margin: 2rem auto;             /* Between major sections */
  --section-padding: 0 2rem;               /* Horizontal padding */
  --section-padding-tablet: 0 1rem;
  --section-padding-mobile: 0 0.5rem;
  
  /* Content spacing */
  --content-gap: 2rem;                     /* Gap between elements */
  --content-gap-small: 1rem;               /* Smaller gaps */
  --content-gap-large: 3rem;               /* Larger gaps */
  
  /* Separator dimensions */
  --separator-height: 3px;                 /* Title separators */
  --separator-margin: 1rem 0 2rem 0;       /* Around separators */
  
  /* =================================================================
     COLOR SYSTEM
     ================================================================= */
  /* Background colors */
  --bg-primary: #000;              /* Main page background */
  --bg-secondary: #1a1a1a;         /* Navbar, footer backgrounds */
  --bg-card: #1a1a1a;              /* Card component backgrounds */
  
  /* Text colors */
  --text-primary: #d4d4cf;         /* Main text color */
  --text-secondary: #ccc;          /* Secondary text, metadata */
  
  /* Interactive elements */
  --border-color: #444;            /* Default borders */
  --border-hover: #fff;            /* Hover state borders */
  --shadow-color: rgba(0, 0, 0, 0.3); /* Box shadows */
  
  /* Accent colors for interactive elements */
  --accent-color: #f8f8f8;         /* Primary action buttons */
  --accent-hover: #ccc;         /* Hover state for accents */
}


/* =================================================================
   BASE STYLES & RESET
   ================================================================= */

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  background: var(--bg-primary);
  color: var(--text-primary);
  letter-spacing: var(--letter-spacing-normal);
  transition: background-color 0.3s ease, color 0.3s ease;
  line-height: 1.6;
}

/* Add padding-top for main content by default */
.main-content {
  padding-top: 80px;
}

/* Remove padding for homepage (has hero) */
body.homepage .main-content {
  padding-top: 0;
}

/* Remove default margins and ensure consistent spacing */
h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  line-height: 1.4;
}

/* Global link colors */
a, a:link, a:visited {
  color: var(--accent-color);
  text-decoration: underline;
}

/* =================================================================
   UTILITY CLASSES
   ================================================================= */

/* Container for centering content with consistent padding */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Main content wrapper - provides consistent spacing from fixed navbar */
.main-content {
  margin-top: 0;
  min-height: calc(100vh - 160px); /* Account for navbar + footer */
}

/* =================================================================
   COMMON SEPARATORS & SPACING
   ================================================================= */

/* Section separators for major content divisions */
.section-separator {
  width: 100%;
  height: 4px;
  background: var(--text-primary);
  margin: 3rem 0 2rem 0;
}

/* Title underline separators for subsections */
.title-separator {
  width: 100%;
  height: var(--separator-height);
  background: var(--text-primary);
  margin: var(--separator-margin);
}

/* Common section styling for tips-tops, tour, maps sections */
.content-section {
  margin: var(--section-margin);
  max-width: 1200px;
  padding: var(--section-padding);
}

.container.content-section h3,
.content-section h3,
.gallery-section h3,
.tips-tops h3,
.tour-section h3,
.maps-section h3 {
  color: var(--text-primary);
  font-family: var(--font-headings);
  font-size: var(--font-size-section-title) !important;
  font-weight: var(--font-weight-semibold);
  margin: var(--content-gap-small) 0 0 0;
  text-align: left;
  transition: color 0.3s ease;
}

/* =================================================================
   COMMON INTERACTIVE EFFECTS
   ================================================================= */

/* Standard transition timing for consistent UI feel */
.transition-standard {
  transition: all 0.3s ease;
}

/* Standard hover lift effect for cards/buttons */
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px var(--shadow-color);
}

/* =================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================= */

/* Tablet styles (768px and below) */
@media (max-width: 768px) {
  .container {
    padding: var(--section-padding-tablet);
  }
  
  .content-section {
    padding: var(--section-padding-tablet);
  }
  
  .container.content-section h3,
  .content-section h3,
  .gallery-section h3,
  .tips-tops h3,
  .tour-section h3,
  .maps-section h3 {
    font-size: var(--font-size-section-title-tablet) !important;
  }
  
  .section-separator {
    margin: 2rem 0 1.5rem 0;
  }
  
  .title-separator {
    height: var(--separator-height);
    margin: 0.8rem 0 1.5rem 0;
  }
}

/* Mobile styles (480px and below) */
@media (max-width: 480px) {
  .container {
    padding: var(--section-padding-mobile);
  }
  
  .container.content-section h3,
  .content-section h3,
  .gallery-section h3,
  .tips-tops h3,
  .tour-section h3,
  .maps-section h3 {
    font-size: var(--font-size-section-title-mobile) !important;
  }
}