/*
Theme Name: WodanAlpha Photography
Theme URI: https://your-domain.com/wodanalpha
Author: Your Name
Author URI: https://your-domain.com
Description: A professional photography theme for WodanAlpha Photography
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wodanalpha
Tags: photography, portfolio, gallery, responsive
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1. Variables
2. Base Styles
3. Typography
4. Layout & Container
5. Header & Navigation
6. Hero Section
7. Gallery Section
8. Lightbox
9. About Section
10. Contact Section
11. Footer
12. Album Pages
13. Masonry Grid
14. Accessibility
15. UI Components
16. Media Queries
17. Animation
18. Print Styles
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1. Variables
--------------------------------------------------------------*/
:root {
  /* Colors */
  --primary-color: #5a9a6f; /* Sage green (darkened for better contrast) */
  --secondary-color: #2c3e2d; /* Deep forest green */
  --accent-color: #a9c8a9; /* Light mint green */
  --background-light: #f5f7f5; /* Off-white with green tint */
  --background-dark: #1a231b; /* Very dark green, almost black */
  --text-light: #e8edea; /* Light gray with green tint */
  --text-dark: #2c2c2c; /* Very dark gray */
  --text-color-rgb: 44, 44, 44; /* Light mode text in RGB */
  --text-light-rgb: 232, 237, 234; /* Dark mode text in RGB */
  --success-color: #4caf50;
  --error-color: #e53935;
  --warning-color: #ff9800;
  --info-color: #2196f3;
  
  /* Font sizes */
  --heading-1: 3.75rem;   /* 60px */
  --heading-2: 2.5rem;    /* 40px */
  --heading-3: 1.75rem;   /* 28px */
  --heading-4: 1.25rem;   /* 20px */
  --text-large: 1.125rem; /* 18px */
  --text-regular: 1rem;   /* 16px */
  --text-small: 0.875rem; /* 14px */
  --text-xs: 0.75rem;     /* 12px */
  
  /* Font weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  
  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;
  
  /* Letter spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  
  /* Transitions */
  --transition: all 0.3s ease;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* Light/Dark mode variables */
html.light-mode,
body.light-mode {
  --background: var(--background-light);
  --text-color: var(--text-dark);
  --card-bg: #ffffff;
  --shadow: 0 3px 10px rgba(44, 62, 45, 0.1);
}

html.dark-mode,
body.dark-mode {
  --background: var(--background-dark);
  --text-color: var(--text-light);
  --card-bg: #243026;
  --shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  --text-color-rgb: 232, 237, 234;
}

/*--------------------------------------------------------------
2. Base Styles
--------------------------------------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

/* Disable transitions for theme switch */
html *, body * {
  transition: background-color 0s, background 0s, color 0s;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--background);
  font-size: var(--text-regular);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-normal);
  color: var(--text-color);
  margin: 0;
  padding: 0;
}

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

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

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

button, .btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: 4px; /* Slightly reduced from 5px */
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  transition: background-color var(--transition-fast), 
              transform var(--transition-normal), 
              box-shadow var(--transition-normal);
}

button:hover, .btn:hover {
  background-color: var(--secondary-color);
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(44, 62, 45, 0.15);
}

button:active, .btn:active,
button:focus, .btn:focus {
  background-color: var(--primary-color);
  transform: translateY(0);
  transition: background-color 0.1s ease, transform 0.1s ease;
}

/*--------------------------------------------------------------
3. Typography
--------------------------------------------------------------*/
h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif;
  margin-bottom: 1.5rem;
  line-height: var(--line-height-tight);
  font-weight: var(--weight-medium);
}

h1 {
  font-size: var(--heading-1);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: 2rem;
}

h2 {
  font-size: var(--heading-2);
  margin-bottom: 1.5rem;
}

h3 {
  font-size: var(--heading-3);
  margin-bottom: 1.25rem;
}

h4 {
  font-size: var(--heading-4);
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1.5rem;
  font-weight: var(--weight-light);
  /*max-width: 70ch;*/
}

p.lead {
  font-size: var(--text-large);
  line-height: var(--line-height-loose);
  margin-bottom: 2rem;
}

strong, b {
  font-weight: var(--weight-semibold);
}

small {
  font-size: var(--text-small);
}

.text-xs {
  font-size: var(--text-xs);
}

.section-title {
  position: relative;
  display: inline-block;
  margin-bottom: 2.5rem;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--primary-color);
  margin-top: 0.75rem;
}

.section-title.centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-title.centered::after {
  margin-left: auto;
  margin-right: auto;
}

.subheading {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.caption {
  font-size: var(--text-small);
  color: rgba(var(--text-color-rgb), 0.7);
  margin-top: 0.5rem;
}

/*--------------------------------------------------------------
4. Layout & Container
--------------------------------------------------------------*/
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

section {
  padding: 3rem 0;
}

/*--------------------------------------------------------------
5. Header & Navigation
--------------------------------------------------------------*/
header {
  background-color: var(--background);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem 0;
  position: relative;
}

/* Logo */
/* Logo Dark/Light Mode Switching - Updated Layout */
.logo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-height: 80px; /* Prevent jumping when logos switch */
}

/* Create a container for the logo images */
.logo-image-container {
    position: relative;
    width: 80px; /* Fixed width to reserve space */
    height: 80px;
    flex-shrink: 0;
}

.logo img,
.custom-logo {
    height: 80px;
    width: auto;
    transition: opacity 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
}

/* Light mode: show dark logo, hide white logo */
body.light-mode .logo-dark,
body.light-mode .custom-logo.logo-dark {
    display: none;
    opacity: 0;
}

body.light-mode .logo-light,
body.light-mode .custom-logo.logo-light {
    display: block;
    opacity: 1;
}

/* Dark mode: show white logo, hide dark logo */
body.dark-mode .logo-light,
body.dark-mode .custom-logo.logo-light {
    display: none;
    opacity: 0;
}

body.dark-mode .logo-dark,
body.dark-mode .custom-logo.logo-dark {
    display: block;
    opacity: 1;
}

/* Logo text styling */
.logo h1 {
    font-size: 1.5rem;
    margin-bottom: 0;
    font-weight: 300;
    margin-left: 0; /* Ensure no extra margin */
    display: none;
}

/* Remove any existing filter effects */
body.dark-mode .logo img,
body.dark-mode .custom-logo {
    filter: none;
}

/* Navigation */
nav {
  flex: 0 0 auto;
  display: flex;
  /*justify-content: center;*/
}

nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

nav a {
  color: var(--text-color);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  transition: color 0.3s ease;
}

nav a:hover {
  color: var(--primary-color);
}

nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: width var(--transition-normal);
}

nav a:hover::after,
nav a:focus::after,
nav a.active::after {
  width: 100%;
}

nav a.active {
  color: var(--primary-color);
  font-weight: 500;
}

nav a.active::after {
  width: 100%;
}

/* Hamburger Menu */
.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text-color);
  width: 40px;
  height: 40px;
  padding: 0;
  position: relative;
  z-index: 110;
  cursor: pointer;
}

.hamburger i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.hamburger:hover i {
  transform: scale(1.1);
}

/* Hide the X icon by default */
.hamburger i.fa-times {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

/* Show the bars icon by default */
.hamburger i.fa-bars {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* When nav is active, hide bars and show X */
nav.active ~ .header-content .hamburger i.fa-bars,
.hamburger.active i.fa-bars {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

nav.active ~ .header-content .hamburger i.fa-times,
.hamburger.active i.fa-times {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Right side elements */
.nav-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.social-icons {
  display: flex;
  gap: 1rem;
  margin-left: 1rem;
}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  background-color: var(--background);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1rem;
  border: 1px solid var(--primary-color);
  transition: all 0.3s ease;
}

.social-icons a:hover {
  color: white;
  background-color: var(--primary-color);
  transform: translateY(-3px);
}

.social-icons a:focus,
.hamburger:focus {
  outline: none;
  box-shadow: none;
  background-color: var(--background);
  color: var(--text-color);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 1rem;
  margin-left: 1rem;
}

.theme-toggle:hover {
  background-color: var(--secondary-color);
}

/* Mobile social icons */
.mobile-social-icons {
  display: none;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: 0.6s;
}

nav.active .mobile-social-icons {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.mobile-social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  background-color: transparent;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  border: 1px solid var(--primary-color);
  transition: all 0.3s ease;
}

.mobile-social-icons a:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-3px);
}

/* Dropdown menu */
.sub-menu {
  display: none;
  position: absolute;
  background-color: var(--background);
  min-width: 200px;
  box-shadow: var(--shadow);
  z-index: 5;
}

.menu-item-has-children:hover .sub-menu,
.menu-item-has-children:focus-within .sub-menu {
  display: block;
}

/*--------------------------------------------------------------
6. Hero Section
--------------------------------------------------------------*/
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5rem 0;
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(42, 58, 43, 0.6);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 950px;
  color: white;
}

.hero h1 {
  font-size: 4.5rem;
  font-weight: var(--weight-semibold);
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero p {
  font-size: var(--text-large);
  line-height: var(--line-height-loose);
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero a:hover {
  color: white;
}

/*--------------------------------------------------------------
7. Gallery Section
--------------------------------------------------------------*/
.gallery {
  padding: 4rem 0;
  background-color: var(--background);
}

.gallery-header {
  text-align: center;
  margin-bottom: 2rem;
}

.gallery-header h2 {
  font-size: var(--heading-2);
  margin-bottom: 1rem;
}

.gallery-header p {
  font-size: var(--text-large);
  max-width: 700px;
  margin: 0 auto 2.5rem;
}

/* Filter Buttons */
.filter-buttons, .landscape-filter, .abstract-filter, .nature-filter, .urban-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 2.5rem;
}

.filter-btn {
  background: none;
  border: 1px solid var(--primary-color);
  color: var(--text-color);
  padding: 0.5rem 1.2rem;
  border-radius: 25px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.filter-btn.active, .filter-btn:hover {
  background-color: var(--primary-color);
  color: white;
}

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px; /* Slightly increased from 5px */
  box-shadow: 0 5px 15px rgba(44, 62, 45, 0.08); /* Softer shadow */
  cursor: pointer;
  height: 280px;
  background-color: var(--card-bg);
  transition: transform var(--transition-normal), 
              box-shadow var(--transition-normal);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.2rem;
  background: linear-gradient(transparent, rgba(28, 35, 29, 0.8));
  color: white;
  transform: translateY(100%);
  transition: transform var(--transition-normal);
}

.gallery-item:hover .gallery-item-overlay {
  transform: translateY(0);
}

.gallery-item-title {
  font-size: var(--text-large);
  margin-bottom: 0.3rem;
}

.gallery-item-category {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--accent-color);
}

/* View All Button */
.view-all-container {
  text-align: center;
  margin-top: 2rem;
}

.view-albums-btn {
  display: inline-block;
  padding: 0.8rem 1.8rem;
  background-color: var(--secondary-color);
  color: white;
  border-radius: 4px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  transition: all var(--transition-normal);
}

.view-albums-btn:hover {
  background-color: var(--primary-color);
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(44, 62, 45, 0.2);
}

/*--------------------------------------------------------------
8. Lightbox
--------------------------------------------------------------*/
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 20, 16, 0.97);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 2rem;
  transition: opacity 0.3s ease;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: none;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.lightbox-img {
  max-width: 100%;
  max-height: 85vh;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 2;
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: zoom-in;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 1rem;
  z-index: 3;
}

.lightbox-prev, .lightbox-next {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.lightbox-prev:hover, .lightbox-next:hover {
  background-color: rgba(0, 0, 0, 0.6) !important;
  transform: scale(1.1);
}

.lightbox-prev i, .lightbox-next i {
  position: relative;
}

.lightbox-prev i {
  left: -1px;
}

.lightbox-next i {
  right: -1px;
}

.lightbox-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.lightbox-close:hover {
  transform: scale(1.1);
  background: none;
}

.lightbox-closing {
  opacity: 0;
}

.lightbox-caption {
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-weight: 500;
  font-size: 1.1rem;
}

.lightbox-info {
  position: absolute;
  bottom: -70px;
  left: 0;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

.lightbox-counter {
  position: absolute;
  top: -50px;
  left: 0;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 5px 10px;
  border-radius: 3px;
}

.lightbox-fullscreen, .lightbox-slideshow {
  position: absolute;
  bottom: -50px;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.lightbox-fullscreen {
  right: 50px;
}

.lightbox-slideshow {
  right: 0;
}

.lightbox-fullscreen:hover, .lightbox-slideshow:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.lightbox-error-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  padding: 2rem;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  z-index: 3;
  animation: fadeIn 0.3s ease forwards;
}

.lightbox-error {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-error i {
  font-size: 3rem;
  color: #FFC107;
  margin-bottom: 1rem;
}

.lightbox-error p {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: white;
}

.lightbox-error small {
  opacity: 0.8;
  color: white;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -60%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Reset button styling for lightbox controls */
.lightbox button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next,
.lightbox-fullscreen,
.lightbox-slideshow {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  border: none !important;
}

.lightbox-close:focus,
.lightbox-prev:focus,
.lightbox-next:focus,
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-close:active,
.lightbox-prev:active,
.lightbox-next:active,
.lightbox-fullscreen:focus,
.lightbox-slideshow:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/*--------------------------------------------------------------
9. About Section
--------------------------------------------------------------*/
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.about-img {
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--shadow);
  height: 100%;
  position: relative;
  min-height: 400px;
}

.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.about-content h2 {
  margin-bottom: 1.5rem;
}

.about-content p {
  margin-bottom: 1.5rem;
}

.about-text-2 {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-color);
}

.about-content a:hover {
  color: white;
}

/*--------------------------------------------------------------
10. Contact Section
--------------------------------------------------------------*/
.contact {
  background-color: var(--card-bg);
  padding: 3rem;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.contact-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.contact-form {
  display: grid;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-color);
}

.form-control {
  padding: 0.9rem 1rem;
  border: 1px solid rgba(var(--text-color-rgb), 0.2);
  border-radius: 6px;
  background-color: var(--background);
  color: var(--text-color);
  transition: var(--transition);
  font-family: 'Montserrat', sans-serif;
}

.form-control:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(90, 154, 111, 0.15);
}

.form-control.invalid {
  border-color: #e53935;
  box-shadow: 0 0 0 1px #e53935;
}

.form-control.valid {
  border-color: #4caf50;
  box-shadow: 0 0 0 1px #4caf50;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="%234caf50"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
  background-repeat: no-repeat;
  background-position: 98% center;
  background-size: 18px;
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

.form-error {
  color: #e53935;
  font-size: 0.85rem;
  margin-top: 0.4rem;
  font-weight: 500;
  display: none;
  animation: fadeIn 0.3s ease;
}

/* Character counter */
.character-counter {
  display: flex;
  justify-content: flex-end;
  color: rgba(var(--text-color-rgb), 0.6) !important;
  font-size: 0.8rem;
  margin-top: 0.3rem;
  transition: color 0.3s ease;
}

.character-counter.approaching-limit {
  color: #e53935;
  font-weight: 500;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

/* File upload styling */
.form-file-upload {
  margin-bottom: 1.5rem;
}

.file-upload-wrapper {
  position: relative;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.form-control-file {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 5;
}

.file-upload-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0;
}

.file-upload-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--primary-color);
  color: white;
  padding: 0.7rem 1.2rem;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.form-control-file:hover + .file-upload-info .file-upload-button,
.form-control-file:focus + .file-upload-info .file-upload-button {
  background-color: var(--secondary-color);
  box-shadow: 0 3px 8px rgba(44, 62, 45, 0.2);
}

.file-upload-text {
  font-size: 0.9rem;
  color: rgba(var(--text-color-rgb), 0.7);
}

.file-upload-help {
  font-size: 0.8rem;
  color: rgba(var(--text-color-rgb), 0.6);
  margin-top: 0.25rem;
}

.file-upload-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.file-preview-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(var(--text-color-rgb), 0.05);
  padding: 0.5rem 2.5rem 0.5rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  max-width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.file-preview-icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
}

.file-preview-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.file-preview-size {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-left: 0.25rem;
}

.file-preview-remove {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(var(--text-color-rgb), 0.6);
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.file-preview-remove:hover {
  color: #e53935;
  background-color: rgba(229, 57, 53, 0.1);
}

/* Checkbox styling */
.form-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.form-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(var(--text-color-rgb), 0.3);
  border-radius: 4px;
  outline: none;
  transition: var(--transition);
  position: relative;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.form-checkbox input[type="checkbox"]:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-checkbox input[type="checkbox"]:checked::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 7px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-checkbox input[type="checkbox"]:focus {
  box-shadow: 0 0 0 2px rgba(90, 154, 111, 0.15);
}

.form-checkbox input[type="checkbox"].invalid {
  border-color: #e53935;
  box-shadow: 0 0 0 1px #e53935;
}

.form-checkbox label {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
}

.contact-submit {
  justify-self: start;
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 0.9rem 1.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(90, 154, 111, 0.2);
}

.contact-submit:hover {
  background-color: var(--secondary-color);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(44, 62, 45, 0.2);
}

.contact-submit:disabled {
  background-color: rgba(90, 154, 111, 0.6);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Form success and error messages */
.contact-success-message,
.contact-error-message {
  padding: 1rem 1.5rem;
  margin-top: 1.5rem;
  border-radius: 6px;
  animation: slideIn 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-success-message {
  background-color: rgba(76, 175, 80, 0.1);
  border-left: 3px solid #4caf50;
  color: #2e7d32;
}

.contact-error-message {
  background-color: rgba(229, 57, 53, 0.1);
  border-left: 3px solid #e53935;
  color: #c62828;
}

.contact-success-message p,
.contact-error-message p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

.contact-success-message i,
.contact-error-message i {
  font-size: 1.5rem;
  margin-top: 0.1rem;
}

/* Alternative contact methods */
.alternative-contact {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(var(--text-color-rgb), 0.1);
}

.alternative-contact h3 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.5rem;
  position: relative;
}

.alternative-contact h3::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 2px;
  background-color: var(--primary-color);
}

.contact-methods {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.contact-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  background-color: var(--background);
  border-radius: 8px;
  box-shadow: var(--shadow);
  min-width: 220px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-method:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(44, 62, 45, 0.1);
}

.contact-method i {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.contact-method h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.contact-method p {
  margin: 0;
  font-size: 0.95rem;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Contact Form 7 Styling for WodanAlpha Theme */
.wpcf7-form {
  display: grid;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.wpcf7-form label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 0.5rem;
  display: block;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea {
  padding: 0.9rem 1rem;
  border: 1px solid rgba(var(--text-color-rgb), 0.2);
  border-radius: 6px;
  background-color: var(--background);
  color: var(--text-color);
  transition: var(--transition);
  font-family: 'Montserrat', sans-serif;
  width: 100%;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(90, 154, 111, 0.15);
}

.wpcf7-form textarea {
  min-height: 120px;
  resize: vertical;
  margin-bottom: 2px !important;
}

.wpcf7-form input[type="submit"] {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 0.9rem 1.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(90, 154, 111, 0.2);
  width: fit-content;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: var(--secondary-color);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(44, 62, 45, 0.2);
}

.wpcf7-form p {
  margin-bottom: 0.5rem;
}

/* Checkbox styling */
.wpcf7-form .wpcf7-checkbox,
.wpcf7-form .wpcf7-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.wpcf7-form input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

/* Form messages */
.wpcf7-response-output {
  padding: 1rem !important;
  margin: 1.5rem 0 0 !important;
  border-radius: 6px !important;
}

.wpcf7-validation-errors {
  background-color: rgba(229, 57, 53, 0.1) !important;
  border-color: #e53935 !important;
  color: #c62828 !important;
}

.wpcf7-mail-sent-ok {
  background-color: rgba(76, 175, 80, 0.1) !important;
  border-color: #4caf50 !important;
  color: #2e7d32 !important;
}

/* Character counter if needed */
.character-counter {
  text-align: right;
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

/* File Upload Styling */
.wpcf7-form label {
  font-size: 0.9rem;
  font-weight: 500;
}

.file-upload-wrapper {
  position: relative;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.wpcf7-file {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 5;
  pointer-events: auto;
}

.file-upload-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0;
  pointer-events: none;
}

.file-upload-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--primary-color);
  color: white;
  padding: 0.7rem 1.2rem;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  pointer-events: none;
}

.wpcf7-file:hover + .file-upload-info .file-upload-button,
.wpcf7-file:focus + .file-upload-info .file-upload-button {
  background-color: var(--secondary-color);
  box-shadow: 0 3px 8px rgba(44, 62, 45, 0.2);
}

.file-upload-text {
  font-size: 0.9rem;
  color: rgba(var(--text-color-rgb, 44, 44, 44), 0.7);
  pointer-events: none;
}

.file-upload-help {
  font-size: 0.8rem;
  color: rgba(var(--text-dark), 0.6);
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
}

.file-upload-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.file-preview-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(var(--text-color-rgb, 44, 44, 44), 0.05);
  padding: 0.5rem 2.5rem 0.5rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  max-width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.file-preview-icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
}

.file-preview-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.file-preview-size {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-left: 0.25rem;
}

.file-preview-remove {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(var(--text-color-rgb, 44, 44, 44), 0.6);
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.file-preview-remove:hover {
  color: #e53935;
  background-color: rgba(229, 57, 53, 0.1);
}

/*--------------------------------------------------------------
11. Footer
--------------------------------------------------------------*/
footer {
  background-color: var(--secondary-color);
  color: var(--text-light);
  padding: 3rem 0;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.footer-col h3 {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: var(--text-light);
  font-weight: 300;
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav a {
  color: var(--text-light);
  display: block;
  margin-bottom: 0.5rem;
}

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

.footer-bottom {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(232, 237, 234, 0.9);
}

footer .social-icons {
  display: flex;
  gap: 1rem;
  margin: 0;
}

footer .social-icons a {
  border: 1px solid var(--text-light);
}

footer .social-icons a:hover {
  background-color: var(--primary-color);
  color: var(--text-light);
}

/*--------------------------------------------------------------
12. Album Pages
--------------------------------------------------------------*/
.albums-section {
  padding: 4.3rem 0;
}

.albums-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.album-card {
  background-color: var(--card-bg);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.album-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(44, 62, 45, 0.15);
}

.album-thumbnail {
  position: relative;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}

.album-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.album-card:hover .album-thumbnail img {
  transform: scale(1.05);
}

.album-count {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(44, 62, 45, 0.8);
  color: white;
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  font-size: 0.8rem;
}

.album-info {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.album-title {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.album-description {
  font-size: 0.9rem;
  color: var(--text-color);
  opacity: 0.8;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.album-description-section p {
  margin-bottom: 2rem;
}

.view-album-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 3px;
  font-size: 0.9rem;
  transition: var(--transition);
  margin-top: auto;
  align-self: flex-start;
}

.view-album-btn:hover {
  background-color: var(--primary-color);
  color: white;
}

/* Back to home button */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  color: var(--text-color);
  font-weight: 500;
}

.back-link i {
  font-size: 0.9rem;
}

.back-link:hover {
  color: var(--primary-color);
}

/* Page Title */
.page-title {
  background-color: var(--secondary-color);
  color: white;
  padding: 4rem 0;
  text-align: center;
}

.page-title h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.breadcrumbs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.breadcrumbs a {
  color: var(--accent-color);
}

.breadcrumbs a:hover {
  color: white;
}

/*--------------------------------------------------------------
13. Masonry Grid
--------------------------------------------------------------*/
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
  grid-auto-flow: dense;
}

.masonry-item {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  aspect-ratio: auto;
  min-height: 200px;
  break-inside: avoid;
}

/* Create different sized grid items */
.masonry-item.wide {
  grid-column: span 2;
}

.masonry-item.tall {
  grid-row: span 2;
}

.masonry-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(44, 62, 45, 0.15);
  z-index: 1;
}

.masonry-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.masonry-item:hover img {
  transform: scale(1.03);
}

.masonry-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  background: linear-gradient(transparent, rgba(28, 35, 29, 0.85));
  color: white;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.masonry-item:hover .masonry-overlay {
  transform: translateY(0);
}

/* Add a subtle hover animation */
.masonry-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
  pointer-events: none;
}

.masonry-item:hover::after {
  background: rgba(0, 0, 0, 0.1);
}

.masonry-title {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.masonry-details {
  font-size: 0.8rem;
  opacity: 0.9;
}

/*--------------------------------------------------------------
14. Accessibility
--------------------------------------------------------------*/
/* Skip to content link for keyboard users */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--primary-color);
  color: white;
  padding: 10px;
  z-index: 1001;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 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;
}

/* Enhanced focus styles for keyboard navigation */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  /*outline: 2px solid var(--primary-color);*/
  outline-offset: 2px;
}

/*--------------------------------------------------------------
Enhanced Lazy Loading Styles
--------------------------------------------------------------*/

/* Enhanced lazy loading states with smart loading strategy */
.lazy-image {
  opacity: 0;
  transition: opacity var(--lazy-loading-duration, 0.4s) var(--lazy-loading-timing, ease-in-out);
  background-color: rgba(var(--text-color-rgb), 0.05);
  min-height: 200px; /* Prevent layout shift */
}

/* Above-fold priority - First 2 images load immediately */
.lazy-image.priority-load {
  opacity: 1;
  transition: none;
  background: none;
}

.image-loading {
  opacity: 0.3;
  background-color: rgba(var(--text-color-rgb), 0.1);
  background-image: linear-gradient(
    90deg,
    transparent,
    rgba(var(--text-color-rgb), 0.1),
    transparent
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: shimmerEffect var(--shimmer-duration, 1.5s) infinite ease-in-out;
}

.image-loaded {
  opacity: 1;
  background: none;
  animation: none;
}

.image-error {
  opacity: 0.7;
  background-color: rgba(var(--text-color-rgb), 0.05);
  border: 1px dashed rgba(var(--text-color-rgb), 0.2);
  animation: none;
}

/* Retry mechanism states */
.image-retrying {
  opacity: 0.5;
  background-color: rgba(var(--warning-color), 0.1);
  animation: retryPulse 2s infinite ease-in-out;
}

.image-failed {
  opacity: 0.6;
  background-color: rgba(var(--error-color), 0.05);
  border: 1px dashed rgba(var(--error-color), 0.3);
  position: relative;
}

.image-failed::after {
  content: '⚠️ Image failed to load';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--error-color);
  font-size: 0.8rem;
  text-align: center;
  padding: 0.5rem;
  background: rgba(var(--background), 0.9);
  border-radius: 4px;
  z-index: 2;
}

/* Shimmer loading animation */
@keyframes shimmerEffect {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* Retry pulse animation */
@keyframes retryPulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

/* Loading spinner for image containers */
.image-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.image-loading-spinner .spinner {
  width: var(--spinner-size, 30px);
  height: var(--spinner-size, 30px);
  border: var(--spinner-border-width, 3px) solid rgba(90, 154, 111, 0.3);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s ease-in-out infinite;
}

/* Spinner animation */
@keyframes spin {
  to { 
    transform: rotate(360deg); 
  }
}

/* Enhanced gallery and masonry item loading states */
.gallery-item.loading,
.masonry-item.loading,
.album-card.loading {
  background-color: rgba(var(--text-color-rgb), 0.02);
  position: relative;
  overflow: hidden;
}

.gallery-item.loading::after,
.masonry-item.loading::after,
.album-card.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: shimmerSweep 2s infinite ease-in-out;
}

@keyframes shimmerSweep {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Responsive image container optimization */
.lazy-image-container {
  position: relative;
  overflow: hidden;
  background-color: rgba(var(--text-color-rgb), 0.05);
  contain: layout style paint; /* CSS containment for better performance */
}

.lazy-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--lazy-loading-duration, 0.4s) var(--lazy-loading-timing, ease-in-out), 
              transform 0.3s ease;
}

/* Prevent layout shift during loading */
.gallery-item img,
.masonry-item img,
.album-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Connection-aware loading for slow networks */
@media (prefers-reduced-data) {
  .lazy-image {
    background: none; /* Reduce data usage */
  }
  
  .image-loading {
    animation: none; /* No animations on slow connections */
    background: rgba(var(--text-color-rgb), 0.1);
  }
  
  .image-loading-spinner .spinner {
    animation-duration: 2s; /* Slower animation */
  }
}

/* Mobile optimizations for lazy loading */
@media (max-width: 768px) {
  .lazy-image {
    min-height: 150px;
    transition: opacity var(--lazy-loading-duration, 0.3s) ease-in-out; /* Faster on mobile */
  }
  
  .image-loading-spinner .spinner {
    width: var(--spinner-size, 24px);
    height: var(--spinner-size, 24px);
    border-width: var(--spinner-border-width, 2px);
  }
  
  /* Reduce animation intensity on mobile to save battery */
  .image-loading {
    animation-duration: 2s; /* Slower animation */
  }
  
  .gallery-item.loading::after,
  .masonry-item.loading::after,
  .album-card.loading::after {
    animation-duration: 3s; /* Slower sweep animation */
  }
}

/* Performance optimizations */
.lazy-image-container,
.gallery-item,
.masonry-item {
  contain: layout style paint; /* CSS containment for better performance */
}

/* Intersection observer fallback styles */
.no-intersection-observer .lazy-image {
  opacity: 1; /* Show images immediately if no IO support */
  background: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .lazy-image {
    background-color: #f0f0f0;
  }
  
  .image-error {
    border-color: #000;
    background-color: #f5f5f5;
  }
  
  .image-failed::after {
    background: #ffffff;
    color: #000000;
    border: 1px solid #000;
  }
}

/* Reduced motion preference support */
@media (prefers-reduced-motion: reduce) {
  .lazy-image,
  .image-loading,
  .image-loaded,
  .image-retrying {
    transition: none !important;
    animation: none !important;
  }
  
  .gallery-item.loading::after,
  .masonry-item.loading::after,
  .album-card.loading::after {
    animation: none !important;
  }
  
  .image-loading-spinner .spinner {
    animation: none !important;
    border-top-color: var(--primary-color);
    transform: rotate(45deg); /* Static rotation instead of animation */
  }
}

/* Print styles - hide loading states */
@media print {
  .image-loading-spinner,
  .lazy-image:not(.image-loaded) {
    display: none;
  }
  
  .image-loading,
  .image-error,
  .image-retrying,
  .image-failed {
    opacity: 1;
    background: none;
    border: none;
    animation: none;
  }
  
  .image-failed::after {
    display: none;
  }
}

/* Dark mode adjustments */
body.dark-mode .lazy-image {
  background-color: rgba(232, 237, 234, 0.05);
}

body.dark-mode .image-loading {
  background-color: rgba(232, 237, 234, 0.1);
  background-image: linear-gradient(
    90deg,
    transparent,
    rgba(232, 237, 234, 0.1),
    transparent
  );
}

body.dark-mode .image-error {
  background-color: rgba(232, 237, 234, 0.05);
  border-color: rgba(232, 237, 234, 0.2);
}

body.dark-mode .image-failed::after {
  background: rgba(26, 35, 27, 0.9);
  color: var(--error-color);
}

body.dark-mode .gallery-item.loading::after,
body.dark-mode .masonry-item.loading::after,
body.dark-mode .album-card.loading::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent
  );
}

/* Focus states for accessibility */
.lazy-image:focus,
.image-loaded:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Custom properties for lazy loading configuration */
:root {
  --lazy-loading-duration: 0.4s;
  --lazy-loading-timing: ease-in-out;
  --shimmer-duration: 1.5s;
  --spinner-size: 30px;
  --spinner-border-width: 3px;
}

/* Responsive spinner sizes */
@media (max-width: 480px) {
  :root {
    --spinner-size: 20px;
    --spinner-border-width: 2px;
    --lazy-loading-duration: 0.3s;
  }
}

/* High-DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .lazy-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Container queries support (future-proofing) */
@supports (container-type: inline-size) {
  .lazy-image-container {
    container-type: inline-size;
  }
  
  @container (max-width: 300px) {
    .image-loading-spinner .spinner {
      width: 20px;
      height: 20px;
    }
  }
}

/*--------------------------------------------------------------
15. UI Components
--------------------------------------------------------------*/
/* Back to Top Button */
#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  z-index: 99;
}

#back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#back-to-top:hover {
  background-color: var(--secondary-color);
  transform: translateY(-3px);
}

#back-to-top i {
  font-size: 1.2rem;
}

/*--------------------------------------------------------------
Construction Banner Styles
--------------------------------------------------------------*/

/* Construction Banner */
.construction-banner {
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
  color: white;
  padding: 12px 0;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-100%);
  opacity: 0;
  animation: constructionSlideIn 0.6s ease-out 0.3s forwards;
}

/* Dark mode adjustments */
body.dark-mode .construction-banner {
  background: linear-gradient(135deg, #E65100 0%, #BF360C 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.construction-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.construction-icon {
  flex-shrink: 0;
  font-size: 18px;
  animation: constructionIconBounce 2s ease-in-out infinite;
}

.construction-message {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.construction-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.construction-link {
  color: white;
  text-decoration: underline;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.construction-link:hover {
  color: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.construction-dismiss {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0.8;
}

.construction-dismiss:hover {
  background-color: rgba(255, 255, 255, 0.1);
  opacity: 1;
  transform: scale(1.1);
}

.construction-dismiss:active {
  transform: scale(0.95);
}

/* Adjust body padding when construction banner is visible */
body:not(.construction-banner-hidden) {
  padding-top: 0; /* Approximate banner height */
  transition: padding-top 0.4s ease-in-out;
}

/* Hidden state */
.construction-banner.hidden {
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}

/* When banner is hidden via user action */
body.construction-banner-hidden {
  padding-top: 0 !important;
  transition: padding-top 0.4s ease-in-out;
}

body.construction-banner-hidden .construction-banner {
  display: none;
}

/* Ensure header stays properly positioned */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: top 0.4s ease-in-out;
}

body:not(.construction-banner-hidden) header {
  top: 0; /* Header will be pushed down by body padding */
}

/* Animations */
@keyframes constructionSlideIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes constructionIconBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  10% {
    transform: translateY(-2px) rotate(-2deg);
  }
  40% {
    transform: translateY(-2px) rotate(2deg);
  }
  60% {
    transform: translateY(-1px) rotate(-1deg);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .construction-banner {
    padding: 10px 0;
  }
  
  body:not(.construction-banner-hidden) {
    padding-top: 0px;
    transition: padding-top 0.4s ease-in-out;
  }
  
  .construction-content {
    gap: 8px;
  }
  
  .construction-icon {
    font-size: 16px;
  }
  
  .construction-text {
    font-size: 13px;
  }
  
  .construction-link {
    font-size: 12px;
  }
  
  .construction-message {
    gap: 12px;
  }
  
  .construction-dismiss {
    font-size: 14px;
    padding: 6px;
  }
}

@media (max-width: 480px) {
  .construction-banner {
    padding: 8px 0;
  }
  
  body:not(.construction-banner-hidden) {
    padding-top: 0px;
    transition: padding-top 0.4s ease-in-out;
  }
  
  .construction-content {
    gap: 6px;
  }
  
  .construction-text {
    font-size: 12px;
  }
  
  .construction-message {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .construction-link {
    align-self: flex-start;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .construction-banner {
    background: #D84315;
    border-bottom: 2px solid #BF360C;
  }
  
  .construction-dismiss:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
}

/* Reduced motion preference support */
@media (prefers-reduced-motion: reduce) {
  .construction-banner {
    animation: none;
    transform: translateY(0);
    opacity: 1;
  }
  
  .construction-icon {
    animation: none;
  }
  
  .construction-dismiss:hover,
  .construction-link:hover {
    transform: none;
  }
}

/*--------------------------------------------------------------
16. Media Queries
--------------------------------------------------------------*/
@media (hover: none) {
  button:hover, .btn:hover {
    background-color: var(--primary-color);
    transform: none;
  }
  
  button:active, .btn:active {
    background-color: var(--secondary-color);
    transform: translateY(-1px);
  }
  
  .lightbox-prev, .lightbox-next, 
  .lightbox-fullscreen, .lightbox-slideshow {
    opacity: 0.8;
  }
}

@media (max-width: 1200px) {
  :root {
    --heading-1: 3rem;
    --heading-2: 2.5rem;
    --heading-3: 1.5rem;
  }
  
  .hero h1 {
    font-size: 3.5rem;
  }
}

@media (max-width: 992px) {
  :root {
    --heading-1: 2.5rem;
    --heading-2: 2rem;
    --heading-3: 1.375rem;
  }
  
  .hero h1 {
    font-size: 3rem;
  }

  nav {
    position: relative;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  
  .gallery-item {
    height: 250px;
  }
  
  .filter-buttons {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .filter-btn {
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
  }
  
  .header-content {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .logo h1 {
    font-size: 1.4rem;
  }
  
  .nav-right {
    display: flex;
    margin-left: auto;
  }
  
  .page-title h1 {
    font-size: 1.8rem;
  }
  
  .albums-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .album-card {
    min-height: 350px;
  }
  
  .album-thumbnail {
    height: 180px;
  }
  
  .album-info {
    padding: 1rem;
  }
  
  .album-title {
    font-size: 1rem;
    min-height: 2.2rem;
    margin-bottom: 0.3rem;
  }
  
  .album-description {
    font-size: 0.85rem;
    margin-bottom: 3.5rem;
  }
  
  .view-album-btn {
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
  }

  .contact {
    padding: 1.5rem;
  }
  
  .contact-submit {
    width: 100%;
  }

  .masonry-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
  }
  
  .masonry-item.wide {
    grid-column: span 1;
  }
  
  .masonry-overlay {
    padding: 0.5rem;
  }
  
  .masonry-title {
    font-size: 0.9rem;
  }
  
  .masonry-details {
    font-size: 0.7rem;
  }
  
  .about {
    grid-template-columns: 1fr;
  }
  
  #back-to-top {
    width: 45px;
    height: 45px;
  }
}

@media (max-width: 768px) {
  :root {
    --heading-1: 2.25rem;
    --heading-2: 1.75rem;
    --heading-3: 1.25rem;
    --heading-4: 1.125rem;
    --text-large: 1rem;
  }

  h1, h2, h3, h4 {
    margin-bottom: 1rem;
  }
  
  p {
    margin-bottom: 1.25rem;
  }
  
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .page-title {
    padding: 3rem 0;
  }

  /* Mobile navigation */
  .hamburger {
    display: block;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: auto;
    z-index: 110; /* Ensure it's above the nav when open */
  }
  
  header nav,
  .header-content nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--background);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), 
                opacity 0.3s ease, 
                visibility 0.3s ease;
    z-index: 100;
    padding-top: 60px;
    backdrop-filter: blur(10px);
  }
  
  /* Overlay effect for dark mode */
  body.dark-mode header nav,
  body.dark-mode .header-content nav {
    background-color: rgba(26, 35, 27, 0.95);
  }
  
  /* Overlay effect for light mode */
  body.light-mode header nav,
  body.light-mode .header-content nav {
    background-color: rgba(245, 247, 245, 0.97);
  }
  
  header nav.active,
  .header-content nav.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    z-index: 100;
  }
  
  header nav ul,
  .header-content nav ul {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 0;
    width: 100%;
  }
  
  header nav ul li,
  .header-content nav ul li {
    width: 100%;
    text-align: center;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transition-delay: 0.1s;
  }
  
  header nav.active ul li,
  .header-content nav.active ul li {
    transform: translateY(0);
    opacity: 1;
  }
  
  /* Stagger animation for menu items */
  header nav.active ul li:nth-child(1),
  .header-content nav.active ul li:nth-child(1) { transition-delay: 0.1s; }
  header nav.active ul li:nth-child(2),
  .header-content nav.active ul li:nth-child(2) { transition-delay: 0.2s; }
  header nav.active ul li:nth-child(3),
  .header-content nav.active ul li:nth-child(3) { transition-delay: 0.3s; }
  header nav.active ul li:nth-child(4),
  .header-content nav.active ul li:nth-child(4) { transition-delay: 0.4s; }
  header nav.active ul li:nth-child(5),
  .header-content nav.active ul li:nth-child(5) { transition-delay: 0.5s; }
  
  header nav a,
  .header-content nav a {
    font-size: 1.2rem;
    font-weight: var(--weight-medium);
    padding: 0.75rem 1.5rem;
    display: inline-block;
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease;
  }
  
  header nav a:hover,
  header nav a:focus,
  .header-content nav a:hover,
  .header-content nav a:focus {
    transform: translateY(-3px);
  }
  
  /* Improve nav item hover/focus effect */
  header nav a::after,
  .header-content nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease, left 0.3s ease;
  }
  
  header nav a:hover::after,
  header nav a:focus::after,
  .header-content nav a:hover::after,
  .header-content nav a:focus::after {
    width: 50%;
    left: 25%;
  }

  .nav-right {
    flex-basis: 100%;
    order: 4;
    justify-content: flex-end;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(125, 125, 125, 0.1);
    margin-top: 0.5rem;
  }
  
  nav.active + .nav-right {
    display: flex;
  }

  .menu-item-clicked {
    color: var(--primary-color) !important;
    transform: translateY(-2px);
    transition: transform 0.2s ease, color 0.2s ease !important;
  }
  
  /* Ensure proper transition effect for menu items */
  nav a {
    transition: color 0.3s ease, transform 0.3s ease;
  }

  /* Hamburger animation */
  .hamburger i.fa-bars {
    transition: transform 0.3s ease, opacity 0.2s ease;
  }
  
  .hamburger i.fa-times {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.2s ease;
  }
  
  nav.active ~ .header-content .hamburger i.fa-bars {
    transform: scale(0);
    opacity: 0;
  }
  
  nav.active ~ .header-content .hamburger i.fa-times {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  /* IMPORTANT: Ensure footer navigation is NOT affected */
  footer nav,
  .footer-nav nav {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: none !important;
    height: auto !important;
    width: auto !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    z-index: auto !important;
    display: block !important;
  }
  
  /* Footer nav lists */
  footer nav ul,
  .footer-nav nav ul {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 0.5rem !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Footer nav items */
  footer nav li,
  .footer-nav nav li {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    position: static !important;
    width: auto !important;
    text-align: left !important;
  }
  
  /* Footer nav links */
  footer nav a,
  .footer-nav nav a {
    font-size: 1rem !important;
    font-weight: normal !important;
    padding: 0 !important;
    transform: none !important;
    position: static !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
  }
  
  footer nav a:hover,
  .footer-nav nav a:hover {
    transform: none !important;
  }
  
  footer nav a::after,
  .footer-nav nav a::after {
    display: none !important;
  }

  /* Gallery and components */
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  
  .gallery-item {
    height: 200px;
  }

  .gallery-item:nth-child(n+5) {
    display: none;
  }

  .gallery-item-overlay {
    /* Make overlay visible without hover */
    transform: translateY(0);
    background: linear-gradient(transparent, rgba(28, 35, 29, 0.9));
    height: auto;
    max-height: 40%;
    bottom: 0;
  }
  
  /* Reduce text size on mobile for better fit */
  .gallery-item-title {
    font-size: 1rem;
    margin-bottom: 0.2rem;
  }
  
  .gallery-item-category {
    font-size: 0.75rem;
  }

  .gallery-item:hover .gallery-item-overlay {
    transform: translateY(0);
  }
  
  .gallery-item:hover img {
    transform: none;
  }
  
  .social-icons {
    gap: 0.5rem;
  }

  .social-icons a {
    position: static !important;
    transform: none !important;
  }
  
  .social-icons a, .theme-toggle {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  .masonry-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  
  .masonry-overlay {
    padding: 0.75rem;
    background: linear-gradient(transparent 0%, transparent 20%, rgba(28, 35, 29, 0.7) 70%, rgba(28, 35, 29, 0.9) 100%);
    transform: translateY(0);
    max-height: 36%;
    bottom: 0;
    top: auto;
  }
  
  .masonry-item:hover .masonry-overlay {
    transform: translateY(0);
  }
  
  .masonry-item:hover img {
    transform: none;
  }

  .filter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .filter-btn {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    white-space: nowrap;
  }

  .lightbox-prev, .lightbox-next {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
  
  .lightbox-close, 
  .lightbox-fullscreen, 
  .lightbox-slideshow {
    width: 35px;
    height: 35px;
  }
  
  .lightbox-caption {
    font-size: 0.9rem;
    bottom: -35px;
  }
  
  .lightbox-info {
    font-size: 0.8rem;
    bottom: -60px;
  }

  .contact {
    padding: 2rem 1.5rem;
  }
  
  .contact-submit {
    justify-self: stretch;
    width: 100%;
  }
  
  .form-checkbox {
    align-items: flex-start;
  }
  
  .form-checkbox input[type="checkbox"] {
    margin-top: 0.3rem;
  }

  #back-to-top {
    width: 40px;
    height: 40px;
    bottom: 20px;
    right: 20px;
  }
  
  #back-to-top i {
    font-size: 1rem;
  }

  .albums-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  
  .album-card {
    min-height: 320px;
  }
}

@media (max-width: 480px) {
  :root {
    --heading-1: 2rem;
    --heading-2: 1.5rem;
    --text-large: 1rem;
  }
  
  .hero h1 {
    font-size: 2rem;
  }
  
  .masonry-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .lightbox {
    padding: 1rem;
  }
  
  .lightbox-content {
    max-width: 95%;
  }
  
  .lightbox-caption {
    font-size: 0.8rem;
  }
  
  .section-title {
    margin-bottom: 2rem;
  }

  .contact-header h2 {
    font-size: 1.8rem;
  }
  
  .contact-methods {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .contact-method {
    width: 100%;
  }
}

@media (max-width: 375px) {
  .albums-grid {
    grid-template-columns: 1fr;
  }

  .album-card {
    min-height: 300px;
  }
  
  .album-thumbnail {
    height: 150px;
  }
}

/*--------------------------------------------------------------
17. Animation
--------------------------------------------------------------*/
@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*--------------------------------------------------------------
18. Print Styles
--------------------------------------------------------------*/
@media print {
  /* Hide non-essential elements */
  header, 
  footer, 
  .social-icons, 
  #back-to-top, 
  .hamburger,
  .theme-toggle,
  .gallery-item-overlay,
  .masonry-overlay {
    display: none !important;
  }
  
  /* Adjust typography for print */
  body {
    font-size: 12pt;
    line-height: 1.4;
    color: #000 !important;
    background: #fff !important;
  }
  
  h1, h2, h3, h4 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  
  p, blockquote, table {
    orphans: 3;
    widows: 3;
  }
  
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
  
  /* Add URL after links */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }
  
  /* Don't show URL for internal links */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --primary-color: #2e6b44;
    --text-light: #ffffff;
    --text-dark: #000000;
  }
  
  .gallery-item-overlay, 
  .masonry-overlay {
    background: rgba(0, 0, 0, 0.8);
  }
  
  button, .btn {
    border: 2px solid #000;
  }
}

/* Reduced motion preference support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  
  .gallery-item img:hover,
  .masonry-item img:hover,
  .lightbox-img {
    transform: none !important;
  }
};