/* Color Themes System for Westbrook Education Fund Website */

/* ==========================================================================
   GLOBAL TYPOGRAPHY OVERRIDES
   ========================================================================== */
/* Make strong elements semi-bold by default */
strong {
  font-weight: 500 !important;
}

/* ==========================================================================
   UNIVERSAL COLORS (Same for all themes)
   ========================================================================== */
:root {
  /* Status Colors - Universal across all themes */
  --color-success: #22C55E;        /* Green */
  --color-error: #EF4444;          /* Red */
  --color-warning: #F59E0B;        /* Orange */
  --color-info: #3B82F6;           /* Blue */
  
  /* Universal Background Overlay */
  --overlay-color: rgba(0, 0, 0, 0.3);  /* Subtle black overlay */
  
  /* Universal Texture */
  --texture-nav: url('../images/textures/45degreee_fabric-03.png');
  --texture-content: url('../images/textures/45degreee_fabric-03.png');
  
  /* Universal Typography */
  --font-heading: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  
  /* Skip Link Styles */
  --skip-link-bg: var(--color-brand);
  --skip-link-color: var(--color-text-light);
}

/* ==========================================================================
   GLOBAL LINK STYLES
   ========================================================================== */
/* Make all text links have underlines by default */
a {
  text-decoration: underline;
}

/* Remove underlines from specific elements that shouldn't have them */
a:hover {
  text-decoration: underline;
}

/* Remove underlines from buttons and navigation items */
button a,
nav a,
.nav-link,
.btn,
button,
a[class*="bg-"],
a[class*="button"],
a[class*="btn"] {
  text-decoration: none !important;
}

/* Ensure hover states maintain underlines for text links */
a:not(button):not(.btn):not(.nav-link):not(nav a):not(button a):not([class*="bg-"]):not([class*="button"]):not([class*="btn"]):hover {
  text-decoration: underline;
}

/* ==========================================================================
   SPRING THEME (Default)
   ========================================================================== */
:root {
  /* Brand Colors */
  --color-brand: #444444;         /* Neutral dark gray for accents/headings */
  --color-paper: #FFFBEC;         /* Main background (ivory) */
  --color-border: #BFBFBF;        /* Medium gray border */
  --color-link: #222222;          /* Neutral dark gray link color */
  
  /* Supporting Colors */
  --color-brand-light: #666666;   /* Lighter gray */
  --color-brand-dark: #222222;    /* Darker gray */
  --color-paper-light: #FFFFFF;   /* White for highlights/cards */
  --color-paper-dark: #F2EEDC;    /* Slightly darker version of paper (menu bg) */
  --color-paper-darker: #E8E3D0;  /* Even darker version for menu backgrounds */
  
  /* Text Colors */
  --color-text-primary: #111111;   /* Almost black */
  --color-text-secondary: #333333; /* Dark gray */
  --color-text-muted: #666666;     /* Medium gray */
  --color-text-light: #FFFBEC;     /* Paper tone for text on dark backgrounds */
  
  /* Background Colors */
  --color-bg-primary: #FFFBEC;     /* Main background */
  --color-bg-secondary: #FFFFFF;   /* Secondary background (cards) */
  --color-bg-dark: #0D0D0D;        /* True black for footer/dark sections */
  
  /* Interactive Colors */
  --color-hover: #666666;          /* Medium gray hover */
  --color-focus: #444444;          /* Dark gray focus ring */
  --color-active: #222222;         /* Darker gray active */
  --color-active-bg: rgba(0, 0, 0, 0.05);  /* Subtle neutral overlay for active menu */
  
  /* Campaign Colors */
  --color-campaign-bg: rgba(151, 172, 152, 0.15);  /* Sage green with transparency */
  --color-campaign-text: #2D4A2E;  /* Dark forest green */
  --color-campaign-border: rgba(151, 172, 152, 0.3);  /* Sage green border */
  
  /* Fallback Background Gradient */
  --fallback-bg-gradient: linear-gradient(135deg, #9dcf8a 0%, #b6e6b3 30%, #b6e6b3 70%, #a4cf95 100%);
  
  /* Image Filters */
  --header-image-filter: grayscale(0.2) contrast(1.05); /* Neutral look */
  
  /* Theme-specific logo */
  --logo-path: url('images/logo/wef-logo-spring-1024x256.png');
}

/* Universal Backgrounds (Root Theme - Default) */
.nav-background {
  background: 
    var(--texture-nav),
    var(--color-paper-dark);
  padding-bottom: 1rem;
}

.content-background {
  background: 
    var(--texture-content),
    var(--color-paper);
  position: relative;
}

/* Watermark */
.content-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../images/watermarks/wef-tree-watermark-01.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.25;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   AUTUMN THEME
   ========================================================================== */
.theme-autumn {
  /* Brand Colors */
  --color-brand: #444444;         /* Neutral dark gray for accents/headings */
  --color-paper: #FFFBEC;         /* Main background (ivory) */
  --color-border: #BFBFBF;        /* Medium gray border */
  --color-link: #222222;          /* Neutral dark gray link color */
  
  /* Supporting Colors */
  --color-brand-light: #666666;   /* Lighter gray */
  --color-brand-dark: #222222;    /* Darker gray */
  --color-paper-light: #FFFFFF;   /* White for highlights/cards */
  --color-paper-dark: #F2EEDC;    /* Slightly darker version of paper (menu bg) */
  --color-paper-darker: #E8E3D0;  /* Even darker version for menu backgrounds */
  
  /* Text Colors */
  --color-text-primary: #111111;   /* Almost black */
  --color-text-secondary: #333333; /* Dark gray */
  --color-text-muted: #666666;     /* Medium gray */
  --color-text-light: #FFFBEC;     /* Paper tone for text on dark backgrounds */
  
  /* Background Colors */
  --color-bg-primary: #FFFBEC;     /* Main background */
  --color-bg-secondary: #FFFFFF;   /* Secondary background (cards) */
  --color-bg-dark: #0D0D0D;        /* True black for footer/dark sections */
  
  /* Interactive Colors */
  --color-hover: #666666;          /* Medium gray hover */
  --color-focus: #444444;          /* Dark gray focus ring */
  --color-active: #222222;         /* Darker gray active */
  --color-active-bg: rgba(0, 0, 0, 0.05);  /* Subtle neutral overlay for active menu */
  
  /* Campaign Colors */
  --color-campaign-bg: rgba(151, 172, 152, 0.15);  /* Sage green with transparency */
  --color-campaign-text: #2D4A2E;  /* Dark forest green */
  --color-campaign-border: rgba(151, 172, 152, 0.3);  /* Sage green border */
  
  /* Fallback Background Gradient */
  --fallback-bg-gradient: linear-gradient(135deg, #a0522d 0%, #b8735a 30%, #b8735a 70%, #8b4513 100%);
  
  /* Image Filters */
  --header-image-filter: grayscale(0.2) contrast(1.05); /* Neutral look */
  
  /* Theme-specific logo */
  --logo-path: url('images/logo/wef-logo-autumn-1024x256.png');
}


/* ==========================================================================
   SUMMER THEME
   ========================================================================== */
.theme-summer {
  /* Brand Colors */
  --color-brand: #444444;         /* Neutral dark gray for accents/headings */
  --color-paper: #FFFBEC;         /* Main background (ivory) */
  --color-border: #BFBFBF;        /* Medium gray border */
  --color-link: #222222;          /* Neutral dark gray link color */
  
  /* Supporting Colors */
  --color-brand-light: #666666;   /* Lighter gray */
  --color-brand-dark: #222222;    /* Darker gray */
  --color-paper-light: #FFFFFF;   /* White for highlights/cards */
  --color-paper-dark: #F2EEDC;    /* Slightly darker version of paper (menu bg) */
  --color-paper-darker: #E8E3D0;  /* Even darker version for menu backgrounds */
  
  /* Text Colors */
  --color-text-primary: #111111;   /* Almost black */
  --color-text-secondary: #333333; /* Dark gray */
  --color-text-muted: #666666;     /* Medium gray */
  --color-text-light: #FFFBEC;     /* Paper tone for text on dark backgrounds */
  
  /* Background Colors */
  --color-bg-primary: #FFFBEC;     /* Main background */
  --color-bg-secondary: #FFFFFF;   /* Secondary background (cards) */
  --color-bg-dark: #0D0D0D;        /* True black for footer/dark sections */
  
  /* Interactive Colors */
  --color-hover: #666666;          /* Medium gray hover */
  --color-focus: #444444;          /* Dark gray focus ring */
  --color-active: #222222;         /* Darker gray active */
  --color-active-bg: rgba(0, 0, 0, 0.05);  /* Subtle neutral overlay for active menu */
  
  /* Campaign Colors */
  --color-campaign-bg: rgba(151, 172, 152, 0.15);  /* Sage green with transparency */
  --color-campaign-text: #2D4A2E;  /* Dark forest green */
  --color-campaign-border: rgba(151, 172, 152, 0.3);  /* Sage green border */
  
  /* Fallback Background Gradient */
  --fallback-bg-gradient: linear-gradient(135deg, #c1a7e8 0%, #d0c5f0 30%, #d0c5f0 70%, #c1a7e8 100%);
  
  /* Image Filters */
  --header-image-filter: grayscale(0.2) contrast(1.05); /* Neutral look */
  
  /* Theme-specific logo */
  --logo-path: url('images/logo/wef-logo-summer-1024x256.png');
}


/* ==========================================================================
   WINTER THEME
   ========================================================================== */
.theme-winter {
  /* Brand Colors */
  --color-brand: #444444;         /* Neutral dark gray for accents/headings */
  --color-paper: #FFFBEC;         /* Main background (ivory) */
  --color-border: #BFBFBF;        /* Medium gray border */
  --color-link: #222222;          /* Neutral dark gray link color */
  
  /* Supporting Colors */
  --color-brand-light: #666666;   /* Lighter gray */
  --color-brand-dark: #222222;    /* Darker gray */
  --color-paper-light: #FFFFFF;   /* White for highlights/cards */
  --color-paper-dark: #F2EEDC;    /* Slightly darker version of paper (menu bg) */
  --color-paper-darker: #E8E3D0;  /* Even darker version for menu backgrounds */
  
  /* Text Colors */
  --color-text-primary: #111111;   /* Almost black */
  --color-text-secondary: #333333; /* Dark gray */
  --color-text-muted: #666666;     /* Medium gray */
  --color-text-light: #FFFBEC;     /* Paper tone for text on dark backgrounds */
  
  /* Background Colors */
  --color-bg-primary: #FFFBEC;     /* Main background */
  --color-bg-secondary: #FFFFFF;   /* Secondary background (cards) */
  --color-bg-dark: #0D0D0D;        /* True black for footer/dark sections */
  
  /* Interactive Colors */
  --color-hover: #666666;          /* Medium gray hover */
  --color-focus: #444444;          /* Dark gray focus ring */
  --color-active: #222222;         /* Darker gray active */
  --color-active-bg: rgba(0, 0, 0, 0.05);  /* Subtle neutral overlay for active menu */
  
  /* Campaign Colors */
  --color-campaign-bg: rgba(151, 172, 152, 0.15);  /* Sage green with transparency */
  --color-campaign-text: #2D4A2E;  /* Dark forest green */
  --color-campaign-border: rgba(151, 172, 152, 0.3);  /* Sage green border */
  
  /* Fallback Background Gradient */
  --fallback-bg-gradient: linear-gradient(135deg, #6b9bb8 0%, #8bb3c7 30%, #8bb3c7 70%, #5a8ba8 100%);
  
  /* Image Filters */
  --header-image-filter: grayscale(0.2) contrast(1.05); /* Neutral look */
  
  /* Theme-specific logo */
  --logo-path: url('images/logo/wef-logo-winter-1024x256.png');
}


/* ==========================================================================
   NEUTRAL THEME
   ========================================================================== */
.theme-neutral {
  /* Brand Colors */
  --color-brand: #444444;         /* Neutral dark gray for accents/headings */
  --color-paper: #FFFBEC;         /* Main background (ivory) */
  --color-border: #BFBFBF;        /* Medium gray border */
  --color-link: #222222;          /* Neutral dark gray link color */
  
  /* Supporting Colors */
  --color-brand-light: #666666;   /* Lighter gray */
  --color-brand-dark: #222222;    /* Darker gray */
  --color-paper-light: #FFFFFF;   /* White for highlights/cards */
  --color-paper-dark: #F2EEDC;    /* Slightly darker version of paper (menu bg) */
  --color-paper-darker: #E8E3D0;  /* Even darker version for menu backgrounds */
  
  /* Text Colors */
  --color-text-primary: #111111;   /* Almost black */
  --color-text-secondary: #333333; /* Dark gray */
  --color-text-muted: #666666;     /* Medium gray */
  --color-text-light: #FFFBEC;     /* Paper tone for text on dark backgrounds */
  
  /* Background Colors */
  --color-bg-primary: #FFFBEC;     /* Main background */
  --color-bg-secondary: #FFFFFF;   /* Secondary background (cards) */
  --color-bg-dark: #0D0D0D;        /* True black for footer/dark sections */
  
  /* Interactive Colors */
  --color-hover: #666666;          /* Medium gray hover */
  --color-focus: #444444;          /* Dark gray focus ring */
  --color-active: #222222;         /* Darker gray active */
  --color-active-bg: rgba(0, 0, 0, 0.05);  /* Subtle neutral overlay for active menu */
  
  /* Campaign Colors */
  --color-campaign-bg: rgba(151, 172, 152, 0.15);  /* Sage green with transparency */
  --color-campaign-text: #2D4A2E;  /* Dark forest green */
  --color-campaign-border: rgba(151, 172, 152, 0.3);  /* Sage green border */
  
  /* Fallback Background Gradient - Use current proven gradient */
  --fallback-bg-gradient: linear-gradient(135deg, #F2EEDC 0%, #E5E1D0 50%, #D9D4C2 100%);
  
  /* Image Filters */
  --header-image-filter: grayscale(0.2) contrast(1.05); /* Neutral look */
  
  /* Theme-specific logo - Use spring logo as neutral */
  --logo-path: url('images/logo/wef-logo-spring-1024x256.png');
}


/* ==========================================================================
   THEME SWITCHER UTILITIES
   ========================================================================== */
.theme-switcher {
  position: fixed;
  top: 50%;
  right: -320px; /* Hidden by default - adjusted for 300px width */
  transform: translateY(-50%);
  z-index: 1000;
  background: var(--color-paper);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 300px; /* Increased to 300px for better content display */
}

.theme-switcher.open {
  right: 20px; /* Slide in when open */
}

.theme-switcher-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.theme-switcher h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.theme-switcher-close {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.theme-switcher-close:hover {
  background: var(--color-hover);
  color: var(--color-text-light);
}

.theme-switcher-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-switcher button {
  background: var(--color-brand);
  color: var(--color-text-light);
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  text-align: left;
}

.theme-switcher button:hover {
  background: var(--color-hover);
  transform: translateX(2px);
}

.theme-switcher button.active {
  background: var(--color-active);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-btn {
  background: var(--color-brand);
  color: var(--color-text-light);
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.theme-btn:hover {
  background: var(--color-hover);
  transform: translateX(2px);
}

.theme-btn.active {
  background: var(--color-active);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Background Toggle Button Styles */
.theme-switcher-controls {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.bg-toggle-btn {
  background: var(--color-brand);
  color: var(--color-text-light);
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
}

.bg-toggle-btn:hover {
  background: var(--color-hover);
  transform: translateY(-1px);
}

.bg-toggle-btn.bg-hidden {
  background: var(--color-text-muted);
}

.bg-toggle-btn.bg-hidden:hover {
  background: var(--color-text-secondary);
}

.bg-toggle-icon {
  font-size: 14px;
}

.bg-toggle-text {
  font-size: 11px;
}

.theme-switcher-shortcut {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 8px;
  text-align: center;
  font-style: italic;
}

/* ==========================================================================
   ACCESSIBILITY STYLES
   ========================================================================== */
.skip-link {
  position: absolute;
  top: -50px;  /* Moved up 10px more to hide completely */
  left: 0;
  background: var(--skip-link-bg);
  color: var(--skip-link-color);
  padding: 8px 16px;
  z-index: 1000;
  transition: top 0.3s ease;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  font-weight: 500;
}

.skip-link:focus {
  top: 0;
}

/* Additional utility classes that might be needed */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none !important;
}

    /* Header image styling */
    .header-image {
      filter: var(--header-image-filter) !important;
      max-width: 1024px; /* Never exceed actual image width */
      max-height: 768px; /* Never exceed actual image height */
      /* Background image will be set by header carousel */
      position: relative;
      contain: layout style paint;
      overflow: hidden;
      transform: translateZ(0); /* Force hardware acceleration */
    }

    /* Navigation visibility fixes */
    .desktop-nav {
      display: none;
    }

@media (min-width: 768px) {
  .desktop-nav {
    display: block !important;
  }
  
  .md\\:block {
    display: block !important;
  }
  
  .md\\:hidden {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .desktop-nav {
    display: none !important;
  }
  
  .md\\:block {
    display: none !important;
  }
  
  .md\\:hidden {
    display: block !important;
  }
}

/* ==========================================================================
   VIDEO THUMBNAIL STYLES
   ========================================================================== */
.video-thumbnail-img {
  transition: transform 0.3s ease;
}

.video-thumbnail:hover .video-thumbnail-img {
  transform: scale(1.02);
}

.video-thumbnail-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  transition: opacity 0.3s ease;
}

.video-thumbnail:hover .video-thumbnail-overlay {
  opacity: 0.8;
}

.play-button-container {
  text-align: center;
  color: white;
}

.play-icon {
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  margin-bottom: 0.5rem;
}

.video-thumbnail:hover .play-icon {
  color: rgba(255, 255, 255, 0.9);
  transform: scale(1.1);
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

.play-text {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.video-thumbnail:hover .play-text {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Video container transitions */
.video-container {
  transition: all 0.3s ease;
}

.video-thumbnail {
  transition: all 0.3s ease;
}

/* Hide thumbnail when video is playing */
.video-playing .video-thumbnail {
  opacity: 0;
  pointer-events: none;
}

.video-playing #video-iframe {
  display: block !important;
}

/* ==========================================================================
   WEBSITE THUMBNAIL STYLES
   ========================================================================== */
.website-thumbnail-img {
  transition: transform 0.3s ease;
}

.website-thumbnail:hover .website-thumbnail-img {
  transform: scale(1.02);
}

.website-thumbnail-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  transition: opacity 0.3s ease;
}

.website-thumbnail:hover .website-thumbnail-overlay {
  opacity: 0.8;
}

.open-button-container {
  text-align: center;
  color: white;
}

.open-icon {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  margin-bottom: 0.5rem;
}

.website-thumbnail:hover .open-icon {
  color: rgba(255, 255, 255, 0.9);
  transform: scale(1.1);
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

.open-text {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.website-thumbnail:hover .open-text {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Website thumbnail container transitions */
.website-thumbnail-container {
  transition: all 0.3s ease;
}

.website-thumbnail {
  transition: all 0.3s ease;
}

/* ==========================================================================
   ST. JOSEMARIA WEBSITE THUMBNAIL STYLES
   ========================================================================== */
.st-josemaria-thumbnail-img {
  transition: transform 0.3s ease;
}

.st-josemaria-thumbnail:hover .st-josemaria-thumbnail-img {
  transform: scale(1.02);
}

.st-josemaria-thumbnail-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  transition: opacity 0.3s ease;
}

.st-josemaria-thumbnail:hover .st-josemaria-thumbnail-overlay {
  opacity: 0.8;
}

/* St. Josemaria thumbnail container transitions */
.st-josemaria-thumbnail-container {
  transition: all 0.3s ease;
}

.st-josemaria-thumbnail {
  transition: all 0.3s ease;
}

/* ==========================================================================
   ESCRIVA WORKS WEBSITE THUMBNAIL STYLES
   ========================================================================== */
.escriva-works-thumbnail-img {
  transition: transform 0.3s ease;
}

.escriva-works-thumbnail:hover .escriva-works-thumbnail-img {
  transform: scale(1.02);
}

.escriva-works-thumbnail-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  transition: opacity 0.3s ease;
}

.escriva-works-thumbnail:hover .escriva-works-thumbnail-overlay {
  opacity: 0.8;
}

/* Escriva Works thumbnail container transitions */
.escriva-works-thumbnail-container {
  transition: all 0.3s ease;
}

.escriva-works-thumbnail {
  transition: all 0.3s ease;
}

/* ==========================================================================
   GLENWEB WEBSITE THUMBNAIL STYLES
   ========================================================================== */
.glenweb-thumbnail-img {
  transition: transform 0.3s ease;
}

.glenweb-thumbnail:hover .glenweb-thumbnail-img {
  transform: scale(1.02);
}

.glenweb-thumbnail-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  transition: opacity 0.3s ease;
}

.glenweb-thumbnail:hover .glenweb-thumbnail-overlay {
  opacity: 0.8;
}

/* Glenweb thumbnail container transitions */
.glenweb-thumbnail-container {
  transition: all 0.3s ease;
}

.glenweb-thumbnail {
  transition: all 0.3s ease;
}

/* ==========================================================================
   CYLI WEBSITE THUMBNAIL STYLES
   ========================================================================== */
.cyli-thumbnail-img {
  transition: transform 0.3s ease;
}

.cyli-thumbnail:hover .cyli-thumbnail-img {
  transform: scale(1.02);
}

.cyli-thumbnail-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  transition: opacity 0.3s ease;
}

.cyli-thumbnail:hover .cyli-thumbnail-overlay {
  opacity: 0.8;
}

/* CYLI thumbnail container transitions */
.cyli-thumbnail-container {
  transition: all 0.3s ease;
}

.cyli-thumbnail {
  transition: all 0.3s ease;
}

/* ==========================================================================
   GLENWOOD PARALLAX IMAGE STYLES
   ========================================================================== */
.glenwood-parallax-container {
  transition: all 0.3s ease;
}

.glenwood-parallax-img {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Parallax effect on scroll */
@media (prefers-reduced-motion: no-preference) {
  .glenwood-parallax-img {
    will-change: transform;
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .glenwood-parallax-img {
    transform: none;
  }
}