/* Miller D Photography - Main Stylesheet */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
  /* Brand Colors - Luxury Dark Theme */
  --color-primary: #C5A059;
  /* Premium Gold */
  --color-secondary: #000000;
  /* Black for elements */
  --color-accent: #ffffff;
  /* White accent for maximum contrast */
  --color-text: #e0e0e0;
  /* Light text for dark mode */
  --color-text-light: #a0a0a0;
  /* Gray text */
  --color-bg: #000000;
  /* Total Black Body */
  --color-bg-alt: #111111;
  /* Slightly lighter black for sections */
  --color-border: #333333;
  /* Dark borders */

  /* Typography */
  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Playfair Display", Georgia, serif;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;
  --font-size-4xl: 64px;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 6rem;

  /* Layout */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --header-height: 80px;
  --header-height-mobile: 70px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* ============================================
   Reset & Base Styles
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Typography
   ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
  color: var(--color-primary);
}

h1 {
  font-size: var(--font-size-4xl);
  font-weight: 700;
}

h2 {
  font-size: var(--font-size-3xl);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-base);
}

p {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-light);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   Layout Utilities
   ============================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.container-narrow {
  width: 100%;
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.section {
  padding: var(--spacing-2xl) 0;
}

.section-sm {
  padding: var(--spacing-xl) 0;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* ============================================
   Header & Navigation
   ============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background-color: var(--color-secondary);
  border-bottom: 1px solid var(--color-border);
  z-index: 1000;
  transition: all var(--transition-base);
}

/* Transparent header variant - useful on hero pages */
.header.transparent {
  background-color: transparent;
  border-bottom: none;
}

.header.transparent .logo,
.header.transparent .nav-link,
.header.transparent .mobile-menu-toggle {
  color: var(--header-transparent-text-color, #ffffff);
}

/* When scrolling, make the transparent header opaque so nav stays readable */
.header.transparent.scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--color-border);
}

.header.transparent.scrolled .logo,
.header.transparent.scrolled .nav-link,
.header.transparent.scrolled .mobile-menu-toggle {
  color: var(--color-primary);
}

/* If using a transparent header on the home page, let the hero sit beneath the header
   so the header overlays the hero (no white bar). Achieve this by removing the hero's
   top margin and making header fully transparent without borders. */
.home .hero {
  margin-top: 0;
}

.home .header.transparent {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.home .header.transparent .header-container {
  background: transparent;
}

.home .header.transparent .logo,
.home .header.transparent .nav-link {
  color: var(--header-transparent-text-color, #fff);
}

.header.scrolled {
  box-shadow: var(--shadow-sm);
}

/* Ensure the scrolled class does not add a border when header is transparent on home */
.home .header.transparent.scrolled {
  box-shadow: var(--shadow-sm);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.logo {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.5px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.nav-list {
  display: flex;
  list-style: none;
  gap: var(--spacing-md);
  align-items: center;
}

.nav-link {
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-accent);
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs);
  font-size: var(--font-size-xl);
  color: var(--color-accent);
  /* Black for better visibility */
  transition: transform var(--transition-fast);
}

.mobile-menu-toggle:hover {
  transform: scale(1.1);
  color: var(--color-primary);
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  margin-top: var(--header-height);
}

.hero-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.hero-slide.active {
  opacity: 1;
  z-index: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slow-motion zoom (Ken Burns style) for hero slides. */
:root {
  --hero-zoom-duration: 12s;
  --hero-zoom-scale: 1.08;
}

@keyframes hero-zoom {
  0% {
    transform: scale(1) translateZ(0);
  }

  100% {
    transform: scale(var(--hero-zoom-scale)) translateZ(0);
  }
}

.hero-slide img {
  transform-origin: 50% 50%;
  will-change: transform;
}

.hero-slide.active img {
  /* Apply a slow zoom that continues slightly beyond the slide duration for a slow-motion feel */
  animation: hero-zoom var(--hero-zoom-duration) ease-in-out both;
}

/* Pause zoom when hovering to match slideshow pause */
.hero-slideshow:hover .hero-slide.active img,
.hero-slideshow.paused .hero-slide.active img {
  animation-play-state: paused;
}

/* Reduce intensity on small screens */
@media (max-width: 640px) {
  :root {
    --hero-zoom-duration: 16s;
    --hero-zoom-scale: 1.04;
  }
}

/* Honor prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-slide.active img {
    animation: none !important;
    transform: none !important;
  }
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
  z-index: 2;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--color-secondary);
  z-index: 3;
  width: 90%;
  max-width: 800px;
}

.hero-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  color: var(--color-secondary);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
  font-size: var(--font-size-xl);
  font-weight: 300;
  margin-bottom: var(--spacing-lg);
  color: var(--color-secondary);
}

.hero-controls {
  position: absolute;
  bottom: var(--spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--spacing-sm);
  z-index: 3;
}

.hero-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid var(--color-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.hero-dot.active {
  background-color: var(--color-secondary);
}

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  color: var(--color-secondary);
  font-size: var(--font-size-2xl);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-nav:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.hero-nav.prev {
  left: var(--spacing-md);
}

.hero-nav.next {
  right: var(--spacing-md);
}

/* ============================================
   Grid & Layout
   ============================================ */
.grid {
  display: grid;
  gap: var(--spacing-md);
}

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

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

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

/* ============================================
   Footer
   ============================================ */
.footer {
  background-color: var(--color-primary);
  color: var(--color-secondary);
  padding: var(--spacing-xl) 0 var(--spacing-md);
  margin-top: var(--spacing-2xl);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.footer-section h4 {
  color: var(--color-secondary);
  margin-bottom: var(--spacing-sm);
}

.footer-section p,
.footer-section a {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-sm);
}

.footer-section a:hover {
  color: var(--color-secondary);
}

.footer-bottom {
  text-align: center;
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   Utility Classes
   ============================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}