/**
 * layout.css - Layout and structural styles for D&H Engraving website
 * 
 * Purpose: Define header, footer, navigation, and main content layouts
 * Dependencies: base.css (for CSS variables)
 * 
 * Contents:
 * 1. Header and Navigation
 * 2. Main Content Areas
 * 3. Footer
 * 4. Grid Systems
 * 5. Responsive Breakpoints
 * 
 * All measurements use rem units for consistent scaling
 * Mobile-first approach with min-width media queries
 */

/* ============================================
   1. HEADER AND NAVIGATION
   ============================================ */

/* Main header container */
header {
  background: var(--color-bg-primary); /* White background to match logo */
  padding: var(--spacing-sm) 0; /* 0.5rem vertical padding */
  box-shadow: 0 0.125rem 0.625rem var(--color-shadow); /* Subtle shadow for depth */
  border-bottom: 0.0625rem solid var(--color-border); /* 1px border for separation */
  position: relative; /* For positioning context */
  z-index: 100; /* Ensure header stays above content */
}

/* Inner header container for max-width and centering */
.header-container {
  max-width: var(--container-lg); /* 1200px max width */
  margin: 0 auto; /* Center the container */
  padding: 0 var(--spacing-sm); /* 0.5rem horizontal padding */
  display: flex; /* Flexbox for logo and nav alignment */
  justify-content: space-between; /* Space between logo and nav */
  align-items: center; /* Vertically center items */
}

/* Logo container styling */
.logo-container {
  display: flex; /* Flexbox for alignment */
  align-items: center; /* Vertically center logo */
}

/* Logo image styling */
.logo {
  max-height: 5.46875rem; /* 87.5px converted to rem (increased by 25%) */
  width: auto; /* Maintain aspect ratio */
  transition: transform var(--transition-base), /* Smooth scale transition */
              opacity var(--transition-base); /* Smooth opacity transition */
  padding: var(--spacing-xs) 0; /* 0.25rem vertical padding */
}

/* Logo hover effect */
.logo:hover {
  transform: scale(1.03); /* Slight enlargement on hover */
  opacity: 0.9; /* Slight transparency on hover */
}

/* Desktop navigation container - visible only on larger screens */
.desktop-nav {
  display: flex; /* Flexbox for nav items */
  align-items: center; /* Vertically center nav items */
}

/* Navigation list - shared styles for desktop and mobile */
nav ul,
.desktop-nav ul,
.mobile-nav-list {
  list-style: none; /* Remove bullet points */
  margin: 0; /* Remove default margins */
  padding: 0; /* Remove default padding */
}

/* Desktop navigation list specifically */
.desktop-nav ul {
  display: flex; /* Horizontal list layout */
  gap: var(--spacing-md); /* 1rem gap between items */
}

/* Navigation list items */
nav li,
.desktop-nav li,
.mobile-nav-list li {
  margin: 0; /* Remove individual margins (using gap instead) */
}

/* Navigation links - shared base styles */
nav a,
.desktop-nav a,
.mobile-nav-list a {
  color: #555555; /* Logo grey for navigation text */
  text-decoration: none; /* Remove underlines */
  font-weight: var(--font-weight-semibold); /* Semi-bold for emphasis */
  padding: 0.1875rem 0.5rem; /* 0.3rem × 0.8rem padding */
  border-radius: var(--radius-sm); /* Rounded corners */
  transition: all var(--transition-fast); /* Smooth transition for hover */
  text-transform: uppercase; /* Uppercase for nav items */
  font-size: 0.9rem; /* Slightly smaller than base */
  letter-spacing: 0.03125rem; /* 0.5px letter spacing for uppercase text */
  display: block; /* Block display for full clickable area */
}

/* Navigation hover state */
nav a:hover,
.desktop-nav a:hover,
.mobile-nav-list a:hover {
  color: var(--color-primary); /* Brand blue on hover */
  background-color: var(--color-primary-light); /* Light blue background */
}

/* Active navigation state */
nav a.active,
.desktop-nav a.active,
.mobile-nav-list a.active {
  color: var(--color-primary); /* Brand blue for active page */
  background-color: var(--color-primary-light); /* Light blue background */
  border-bottom: 0.125rem solid var(--color-primary); /* 2px bottom border */
  padding-bottom: 0.1875rem; /* Maintain padding with border */
}

/* ============================================
   HAMBURGER MENU - Mobile Navigation Toggle
   Like a hydraulic control switch on equipment
   ============================================ */

/* Hamburger menu button - hidden on desktop, shown on mobile */
.hamburger-menu {
  display: none; /* Hidden by default on desktop */
  flex-direction: column; /* Stack the lines vertically */
  justify-content: center; /* Center the lines with gap instead of space-between */
  gap: 0.1875rem; /* 3px gap between lines - explicit spacing */
  width: 2rem; /* 32px width */
  height: auto; /* Auto height based on content */
  background: transparent; /* No background */
  border: none; /* No border */
  cursor: pointer; /* Show it's clickable */
  padding: 0.25rem; /* Small padding for better touch target */
  z-index: 1001; /* Above other content but below mobile nav */
  position: relative; /* For positioning context */
}

/* Each line of the hamburger icon - like indicator lights */
.hamburger-line {
  display: block; /* Each line is a block element */
  width: 100%; /* Full width of button */
  height: 0.1875rem; /* 3px thick lines */
  background-color: #555555; /* Logo grey color */
  border-radius: 0.1875rem; /* Rounded edges */
  transition: all 0.3s ease; /* Smooth animation */
  transform-origin: center; /* Rotate from center */
}

/* Hamburger animation when menu is open - forms an X */
.hamburger-menu.active .hamburger-line:nth-child(1) {
  transform: translateY(0.375rem) rotate(45deg); /* Top line rotates down - 6px movement */
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
  opacity: 0; /* Middle line disappears */
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
  transform: translateY(-0.375rem) rotate(-45deg); /* Bottom line rotates up - 6px movement */
}

/* ============================================
   MOBILE NAVIGATION OVERLAY
   Like a sliding access panel on machinery
   ============================================ */

/* Mobile navigation container - slides in from right */
.mobile-nav {
  position: fixed; /* Fixed position overlay */
  top: 0; /* Start from top */
  right: -100%; /* Initially hidden off-screen to the right */
  width: 80%; /* Takes up 80% of screen width */
  max-width: 20rem; /* Maximum 320px width */
  height: 100vh; /* Full viewport height */
  background-color: var(--color-bg-primary); /* White background */
  box-shadow: -0.25rem 0 1rem rgba(0, 0, 0, 0.2); /* Shadow on left side */
  z-index: 1000; /* Above everything except close button */
  transition: right 0.3s ease-in-out; /* Smooth slide animation */
  overflow-y: auto; /* Allow scrolling if content is too tall */
}

/* Mobile nav when active - slides into view */
.mobile-nav.active {
  right: 0; /* Slide into view */
}

/* Mobile nav header with close button */
.mobile-nav-header {
  display: flex; /* Flexbox for alignment */
  justify-content: flex-end; /* Align close button to right */
  padding: var(--spacing-md); /* 1rem padding */
  border-bottom: 0.0625rem solid var(--color-border); /* Bottom border */
}

/* Mobile nav close button - like an emergency stop */
.mobile-nav-close {
  background: transparent; /* No background */
  border: none; /* No border */
  font-size: 2rem; /* Large X symbol */
  color: #555555; /* Logo grey */
  cursor: pointer; /* Show it's clickable */
  padding: 0; /* No padding */
  width: 2.5rem; /* 40px for easy touch target */
  height: 2.5rem; /* 40px for easy touch target */
  display: flex; /* Center the X */
  align-items: center; /* Vertical center */
  justify-content: center; /* Horizontal center */
  transition: color var(--transition-fast); /* Smooth color change */
}

.mobile-nav-close:hover {
  color: var(--color-primary); /* Blue on hover */
}

/* Mobile navigation list */
.mobile-nav-list {
  padding: var(--spacing-md); /* 1rem padding around list */
}

/* Mobile navigation list items */
.mobile-nav-list li {
  margin-bottom: var(--spacing-sm); /* Space between items */
}

/* Mobile navigation links - override some desktop styles */
.mobile-nav-list a {
  padding: var(--spacing-sm) var(--spacing-md); /* Larger touch targets */
  font-size: 1rem; /* Slightly larger text */
  width: 100%; /* Full width links */
  border-bottom: none; /* Remove active border bottom */
}

/* Mobile nav active state - different styling for mobile */
.mobile-nav-list a.active {
  background-color: var(--color-primary); /* Full blue background */
  color: var(--color-bg-primary); /* White text */
  border-radius: var(--radius-sm); /* Rounded corners */
  border-bottom: none; /* No bottom border on mobile */
}

/* Overlay backdrop - dims the page when menu is open */
.mobile-nav-backdrop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed overlay */
  top: 0; /* Cover full screen */
  left: 0; /* Cover full screen */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  z-index: 999; /* Below mobile nav but above content */
  opacity: 0; /* Start invisible */
  transition: opacity 0.3s ease; /* Smooth fade */
}

/* Backdrop when visible */
.mobile-nav-backdrop.active {
  display: block; /* Show backdrop */
  opacity: 1; /* Fade in */
}

/* ============================================
   2. MAIN CONTENT AREAS
   ============================================ */

/* Main content wrapper */
main {
  flex: 1; /* Take up remaining vertical space */
  max-width: var(--container-md); /* 1000px max width */
  margin: var(--spacing-xl) auto var(--spacing-2xl); /* Top, sides, bottom margins */
  padding: var(--spacing-xl); /* 2rem padding all around */
  background: var(--color-bg-overlay); /* Semi-transparent white background */
  border-radius: var(--radius-md); /* Rounded corners */
  box-shadow: 0 0.375rem 1.5rem rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
  position: relative; /* For positioning context */
  z-index: 1; /* Above background but below header */
}

/* Home page specific main styles */
.home-main {
  background: var(--color-bg-overlay); /* 75% opacity white */
  margin-top: var(--spacing-2xl); /* 3rem top margin */
  backdrop-filter: blur(0.125rem); /* 2px blur for better readability */
}

/* Contact page container */
.contact-container {
  flex: 1; /* Take up remaining space */
  max-width: var(--container-md); /* 1000px max width */
  margin: var(--spacing-xl) auto var(--spacing-2xl); /* Consistent margins */
  padding: var(--spacing-xl); /* 2rem padding */
  background: var(--color-bg-overlay); /* Semi-transparent background */
  border-radius: var(--radius-md); /* Rounded corners */
  box-shadow: 0 0.375rem 1.5rem rgba(0, 0, 0, 0.08); /* Subtle shadow */
  position: relative; /* For positioning context */
}

/* ============================================
   3. FOOTER
   ============================================ */

/* Footer container */
footer {
  background: var(--color-bg-secondary); /* Light grey background */
  color: var(--color-text-heading); /* Darker text for readability */
  padding: var(--spacing-md) 0; /* 1rem vertical padding */
  font-size: 0.9rem; /* Slightly smaller text */
  margin-top: auto; /* Push footer to bottom of page */
  border-top: 0.0625rem solid #e0e0e0; /* 1px top border */
}

/* Footer content container */
.footer-content {
  display: flex; /* Flexbox for layout */
  justify-content: space-between; /* Space items to edges */
  align-items: center; /* Center items vertically */
  max-width: var(--container-lg); /* Match header width */
  margin: 0 auto; /* Center in viewport */
  padding: 0 var(--spacing-md); /* Horizontal padding */
  flex-wrap: wrap; /* Allow wrapping on small screens */
  gap: var(--spacing-md); /* Gap between items when wrapped */
}

/* Attribution section in footer */
.attribution {
  display: flex; /* Flexbox for logo and text alignment */
  align-items: center; /* Align items vertically */
  gap: var(--spacing-sm); /* Space between elements */
  font-size: 0.85rem; /* Slightly smaller text */
  line-height: 1.4; /* Better vertical alignment */
}

/* Attribution logo styling */
.attribution-logo {
  height: 1.875rem; /* 30px converted to rem */
  width: auto; /* Maintain aspect ratio */
  margin: 0 0.1875rem; /* Small margin on sides */
  transition: opacity var(--transition-fast); /* Smooth hover effect */
  display: block; /* Block element for proper spacing */
}

/* Attribution logo hover effect */
.attribution a:hover .attribution-logo {
  opacity: 0.8; /* Slight fade on hover */
}

/* Footer links */
footer a {
  color: var(--color-bg-primary); /* White links in footer */
  text-decoration: none; /* Remove underline */
  display: inline-flex; /* Better alignment with logo */
  align-items: center; /* Vertically center text with logo */
}

/* Footer link hover state */
footer a:hover {
  color: var(--color-primary); /* Brand blue on hover */
  text-decoration: underline; /* Add underline on hover */
}

/* Override footer link color for paragraph links */
footer p a {
  color: var(--color-primary);
}

footer p a:hover {
  color: var(--color-primary-dark);
}

/* ============================================
   4. GRID SYSTEMS
   ============================================ */

/* Quadrant layout for home page services/about sections */
.quadrant-layout {
  display: grid; /* CSS Grid for layout */
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  grid-template-areas: "about services"; /* Named grid areas */
  gap: 1.25rem; /* 20px gap between sections */
  max-width: var(--container-lg); /* 1200px max width */
  margin: 0 auto; /* Center the grid */
  padding: 2.5rem 1.25rem; /* 40px vertical, 20px horizontal padding */
  min-height: calc(100vh - 12.5rem); /* Full height minus header/footer */
  grid-auto-flow: row dense; /* Fill gaps efficiently */
}

/* About quadrant */
.quadrant-about {
  grid-area: about !important; /* Force grid placement */
  padding: 1.875rem; /* 30px padding */
  background: var(--color-bg-primary); /* White background */
  border-radius: var(--radius-md); /* Rounded corners */
  box-shadow: 0 0.125rem 0.625rem var(--color-shadow-light); /* Subtle shadow */
  font-size: 1.1rem; /* Match list item font size */
  line-height: var(--line-height-base); /* Standard line height */
}

/* Services quadrant */
.quadrant-services {
  grid-area: services !important; /* Force grid placement */
  padding: 1.875rem; /* 30px padding */
  background: var(--color-bg-primary); /* White background */
  border-radius: var(--radius-md); /* Rounded corners */
  box-shadow: 0 0.125rem 0.625rem var(--color-shadow-light); /* Subtle shadow */
}

/* Quadrant headings */
.quadrant-about h2,
.quadrant-services h2 {
  /* font-size inherited from base h2 (1.75rem) for consistency */
  margin-bottom: var(--spacing-md); /* Space below heading */
}

/* Quadrant paragraphs */
.quadrant-about p {
  margin-bottom: var(--spacing-md); /* Consistent paragraph spacing */
}

/* ============================================
   5. RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet breakpoint (768px = 48rem) */
@media (max-width: 48rem) {
  /* Keep header horizontal on tablets for hamburger menu */
  .header-container {
    justify-content: space-between; /* Space between logo and hamburger */
    align-items: center; /* Center vertically */
  }
  
  /* Show hamburger menu on tablets and below */
  .hamburger-menu {
    display: flex; /* Show hamburger button */
  }
  
  /* Hide desktop navigation on tablets and below */
  .desktop-nav {
    display: none; /* Hide desktop nav */
  }
  
  /* Reduce logo size on smaller screens */
  .logo {
    max-height: 4.375rem; /* 70px equivalent */
  }
}

/* Mobile breakpoint (600px = 37.5rem) */
@media (max-width: 37.5rem) {
  /* Further reduce header padding on mobile */
  header {
    padding: var(--spacing-xs) 0; /* Minimal vertical padding */
  }
  
  /* Ensure hamburger menu is visible on mobile */
  .hamburger-menu {
    display: flex; /* Ensure hamburger is visible */
  }
  
  /* Reduce main content padding on mobile */
  main {
    padding: var(--spacing-lg); /* 1.5rem padding */
    margin: var(--spacing-lg) var(--spacing-md); /* Smaller margins */
  }
  
  /* Keep contact container centered on mobile with reduced vertical margins */
  .contact-container {
    padding: var(--spacing-lg); /* 1.5rem padding */
    margin: var(--spacing-lg) auto; /* Keep horizontal auto margins for centering */
    width: calc(100% - 2rem); /* Account for side spacing */
    max-width: calc(100vw - 2rem); /* Prevent overflow */
  }
  
  /* Stack footer content on mobile */
  .footer-content {
    flex-direction: column; /* Stack vertically */
    text-align: center; /* Center text */
  }
}

/* Large mobile/tablet breakpoint (900px = 56.25rem) */
@media (max-width: 56.25rem) {
  /* Convert quadrant layout to single column */
  .quadrant-layout {
    grid-template-columns: 1fr; /* Single column */
    grid-template-areas: 
      "services"
      "about"; /* Stack services above about */
    padding: 1.25rem 0.9375rem; /* Reduced padding */
  }
  
  /* Reduce quadrant padding on smaller screens */
  .quadrant-services,
  .quadrant-about {
    padding: 1.25rem; /* 20px padding */
  }
}

/* Minimum supported breakpoint (320px = 20rem) - smallest phones */
@media (max-width: 20rem) {
  /* Header ultra-compact - like streamlining equipment for tight spaces */
  header {
    padding: var(--spacing-xs) 0; /* 0.25rem vertical padding */
  }
  
  .header-container {
    padding: 0 var(--spacing-xs); /* 0.25rem horizontal padding */
    gap: var(--spacing-xs); /* Minimal gap between logo and nav */
  }
  
  /* Logo adjustments */
  .site-logo {
    font-size: 1.25rem; /* 20px - smaller logo text */
  }
  
  .site-logo img {
    height: 2rem; /* 32px - smaller logo image */
  }
  
  /* Navigation ultra-compact */
  .main-nav ul {
    gap: var(--spacing-xs); /* 0.25rem between items */
    padding: 0 var(--spacing-xs); /* Minimal padding */
  }
  
  .main-nav a {
    padding: 0.25rem 0.375rem; /* Very small padding */
    font-size: 0.75rem; /* 12px - minimum readable */
  }
  
  /* Main content minimal padding */
  main {
    padding: var(--spacing-md); /* 1rem padding */
    margin: var(--spacing-sm); /* 0.5rem margin */
  }
  
  .contact-container {
    padding: var(--spacing-md); /* 1rem padding */
    margin: var(--spacing-sm) auto; /* Keep horizontal auto margins for centering */
    width: calc(100% - 1rem); /* Account for side spacing */
    max-width: calc(100vw - 1rem); /* Prevent overflow */
  }
  
  /* Quadrant layout ultra-compact */
  .quadrant-layout {
    padding: var(--spacing-sm); /* 0.5rem padding */
    gap: var(--spacing-sm); /* 0.5rem gap */
  }
  
  .quadrant-services,
  .quadrant-about {
    padding: var(--spacing-sm); /* 0.5rem padding */
  }
  
  /* Footer ultra-compact */
  footer {
    padding: var(--spacing-md) var(--spacing-xs); /* 1rem vertical, 0.25rem horizontal */
  }
  
  .footer-content {
    font-size: 0.75rem; /* 12px text */
    padding: 0 var(--spacing-xs); /* Minimal padding */
  }
  
  /* Section spacing */
  section {
    margin-bottom: var(--spacing-lg); /* 1.5rem between sections */
  }
  
  /* Heading sizes */
  h1 {
    font-size: 1.5rem; /* 24px */
  }
  
  h2 {
    font-size: 1.25rem; /* 20px */
    margin-bottom: var(--spacing-sm); /* Less space below */
  }
  
  h3 {
    font-size: 1rem; /* 16px */
    margin-bottom: var(--spacing-xs); /* Minimal space */
  }
  
  /* Lists and content */
  ul, ol {
    padding-left: 1rem; /* Less indentation */
  }
  
  p {
    font-size: 0.875rem; /* 14px for better readability on small screens */
    margin-bottom: var(--spacing-sm); /* Less paragraph spacing */
  }
}