/* ==========================================================================
   GOZOFOOD.COM - COMPLETE UI COMPONENTS LIBRARY
   ==========================================================================
   
   Description: Complete collection of reusable UI components for the website
   Methodology: BEM (Block Element Modifier) naming conventions
   
   *** COMPONENT INDEX ***
   
   1. BACK TO TOP BUTTON
      - Fixed floating button for easy page navigation
      - Smooth animations and hover effects
      - Responsive design for mobile/desktop
   
   2. SECTION HEADINGS
      - Main heading styles with animated underlines
      - Light/dark theme variants
      - Responsive typography scaling
   
   3. MODERN CATEGORY CARDS
      - Interactive grid cards with 3D effects
      - Animated icons and gradient overlays
      - Hover transformations and transitions
   
   4. ARTICLE CARDS
      - Content cards for featured articles
      - Image overlays and category badges
      - Multiple size variants (standard/larger)
   
   5. BADGE COMPONENTS
      - Category labels and tags
      - Color-coded by content type
      - Multiple styling variants
   
   6. FOOTER COMPONENT
      - Site footer with navigation links
      - Newsletter signup and social media
      - Multi-column responsive layout
   
   Each component is designed to be:
   - Reusable across different contexts
   - Responsive and accessible
   - Consistent with the overall design system
   - Easy to maintain and extend
   - Fully commented for easy understanding
   
   Author: Gozofood.com Development Team
   Version: 2.0 - Complete Components Library (merged ui-components.css)
   Last Updated: September 2025
   ========================================================================== */

/* ==========================================================================
   1. BACK TO TOP BUTTON COMPONENT
   ==========================================================================
   
   PURPOSE: Fixed floating button that appears when user scrolls down
   
   FEATURES:
   - Smooth fade-in/out animations
   - Hover effects with scaling and color changes
   - Responsive sizing for mobile devices
   - Fixed positioning in bottom-right corner
   - Accessible with proper ARIA labels
   
   USAGE: Add .back-to-top--visible class to show the button
   
   BEM STRUCTURE:
   - .back-to-top (Block)
   - .back-to-top--visible (Modifier - when button should be visible)
   ========================================================================== */

.back-to-top {
  /* Fixed positioning in bottom-right corner */
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  
  /* Visual styling */
  background: var(--color-primary-yellow);
  color: var(--color-text-primary);
  border: none;
  border-radius: 50%;  /* Perfect circle */
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-index-fixed);
  
  /* Initially hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);  /* Slide up animation */
  
  /* Flexbox for centering the arrow icon */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Smooth transitions for all properties */
  transition: all var(--transition-normal);
}

/* Hover state with color change and scaling */
.back-to-top:hover {
  background: var(--color-orange-accent);
  color: var(--color-white);
  transform: translateY(15px) scale(1.05);  /* Slight lift and scale */
  box-shadow: var(--shadow-xl);
}

/* Active/click state for tactile feedback */
.back-to-top:active {
  transform: translateY(17px) scale(0.98);  /* Slight press effect */
}

/* Visible state - activated by JavaScript when user scrolls */
.back-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);  /* Reset to normal position */
}

/* Icon styling within the button */
.back-to-top svg {
  width: 24px;
  height: 24px;
  transition: transform var(--transition-fast);
}

/* Icon animation on hover */
.back-to-top:hover svg {
  transform: translateY(-2px);  /* Icon lifts slightly on hover */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .back-to-top {
    bottom: 20px;      /* Closer to edge on mobile */
    right: 20px;
    width: 45px;       /* Smaller size for mobile */
    height: 45px;
  }
  
  .back-to-top svg {
    width: 20px;       /* Smaller icon for mobile */
    height: 20px;
  }
}

/* ==========================================================================
   2. SECTION HEADINGS COMPONENT
   ==========================================================================
   
   PURPOSE: Consistent heading styles across all sections of the website
   
   FEATURES:
   - Animated yellow underline that grows on page load
   - Hover effect that changes underline color to green
   - Light variant for use on dark backgrounds
   - Responsive font sizing
   - Label and subtitle sub-components
   
   USAGE: Apply .section-heading class to h1, h2, h3 elements
   
   BEM STRUCTURE:
   - .section-heading (Block)
   - .section-heading--light (Modifier - for dark backgrounds)
   - .section-heading__label (Element - small category label)
   - .section-heading__title (Element - main heading text)
   - .section-heading__subtitle (Element - descriptive text below)
   ========================================================================== */

.section-heading {
  /* Typography */
  font-size: var(--font-size-5xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.1;
  
  /* Layout */
  margin: 0 0 var(--spacing-md) 0;
  padding: 0 0 var(--spacing-2xs) 0;
  
  /* Positioning for underline effect */
  position: relative;
  display: inline-block;
  
  /* Inheritance and sizing */
  color: inherit;
  align-self: flex-start;
  width: auto;
}

/* Animated underline effect using ::after pseudo-element */
.section-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;              /* Starts at 0 width */
  height: 3px;
  background: var(--color-primary-yellow);
  
  /* Smooth animation timing */
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
  
  /* Delay animation until after page load */
  animation: headingUnderlineAnimate 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;
}

/* Underline color change on hover */
.section-heading:hover::after {
  background: var(--color-primary-green);
}

/* Keyframe animation for underline growth */
@keyframes headingUnderlineAnimate {
  to {
    width: 100%;         /* Grows to full width */
  }
}

/* Light variant for dark backgrounds */
.section-heading--light {
  color: var(--color-white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  /* Slight shadow for readability */
}

/* Label component - small category indicator above heading */
.section-heading__label {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-green);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  background: rgba(var(--color-primary-green), 0.1);  /* Subtle background tint */
  border-radius: var(--border-radius-full);           /* Pill shape */
}

/* Main title component */
.section-heading__title {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  margin: 0;
}

/* Subtitle component - descriptive text below main heading */
.section-heading__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: var(--spacing-md) auto 0;
  max-width: 600px;      /* Constrain width for readability */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .section-heading {
    font-size: var(--font-size-xl);   /* Smaller on tablets */
    letter-spacing: 0.3px;            /* Reduce letter spacing */
    line-height: 1.25;                /* Better line height for multi-line */
    text-align: center;               /* Ensure centering */
    width: 100%;                      /* Full width for better centering */
    margin-bottom: var(--spacing-md);
    word-wrap: break-word;            /* Allow words to break if needed */
    hyphens: auto;                    /* Enable hyphenation */
  }
  
  .section-heading__title {
    font-size: var(--font-size-xl);
    line-height: 1.25;
  }
  
  .section-heading__subtitle {
    font-size: var(--font-size-base);
  }
}

/* Very small mobile devices */
@media (max-width: 480px) {
  .section-heading {
    font-size: var(--font-size-base); /* Much smaller - 16px on mobile */
    letter-spacing: 0.1px;            /* Minimal letter spacing */
    line-height: 1.3;                 /* Optimal for readability */
    margin-bottom: var(--spacing-sm); /* Reduce bottom margin */
    padding-bottom: var(--spacing-xs); /* Reduce padding */
    text-align: center;               /* Ensure centering */
    width: 100%;                      /* Full width */
    max-width: 100%;                  /* Prevent overflow */
    word-wrap: break-word;            /* Break long words */
    overflow-wrap: break-word;        /* Alternative for better support */
    hyphens: auto;                    /* Enable hyphenation */
    white-space: normal;              /* Allow normal wrapping */
  }
  
  .section-heading::after {
    height: 2px;                      /* Thinner underline */
    width: 50px;                      /* Shorter underline on mobile */
    left: 50%;                        /* Center the underline */
    transform: translateX(-50%);      /* Perfect centering */
  }
  
  .section-heading__title {
    font-size: var(--font-size-base);
    line-height: 1.3;
    text-align: center;
    width: 100%;
  }
  
  .section-heading__subtitle {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-sm);    /* Reduce spacing */
  }
  
  .section-heading__label {
    font-size: var(--font-size-xs);
    padding: var(--spacing-2xs) var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
  }
}

/* Extra small screens - for very narrow devices */
@media (max-width: 360px) {
  .section-heading {
    font-size: var(--font-size-sm);   /* Even smaller - 14px for very small screens */
    letter-spacing: 0.05px;
    line-height: 1.4;                 /* More space between lines */
    padding: 0 var(--spacing-xs);     /* Add horizontal padding */
  }
  
  .section-heading::after {
    width: 35px;                      /* Very short underline */
  }
}

/* Ultra-narrow screens - for the smallest devices */
@media (max-width: 320px) {
  .section-heading {
    font-size: var(--font-size-xs);   /* Ultra small - 12px for tiny screens */
    letter-spacing: 0;
    line-height: 1.5;
    padding: 0 var(--spacing-2xs);
    word-spacing: -1px;               /* Tighten word spacing */
  }
  
  .section-heading::after {
    width: 30px;                      /* Minimal underline */
  }
}

/* ==========================================================================
   3. MODERN CATEGORY CARDS COMPONENT
   ==========================================================================
   
   PURPOSE: Interactive cards for displaying content categories
   
   FEATURES:
   - 3D-style animated icons with morphing shapes
   - Gradient background overlays on hover
   - Card lifting animation with enhanced shadows
   - Gradient text effects on title hover
   - Animated arrow in call-to-action links
   - Fully responsive grid layout
   
   USAGE: Create cards with .category-card--modern class
   
   BEM STRUCTURE:
   - .categories-modern (Block - container section)
   - .categories-modern__container (Element - content wrapper)
   - .categories-modern__grid (Element - grid layout)
   - .category-card--modern (Block - individual card)
   - .category-card--modern__content (Element - card content wrapper)
   - .category-card--modern__icon (Element - icon container)
   - .category-card--modern__title (Element - card title)
   - .category-card--modern__description (Element - card description)
   - .category-card--modern__link (Element - action link)
   - .category-card--modern__overlay (Element - hover overlay)
   ========================================================================== */

/* Container section for category cards */
.categories-modern {
  padding: var(--spacing-5xl) 0;
  background: var(--color-background-secondary);
}

/* Content wrapper with max-width constraint */
.categories-modern__container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* Responsive grid layout for cards */
.categories-modern__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  /* Auto-responsive columns */
  gap: var(--spacing-2xl);
  margin-top: var(--spacing-3xl);
}

/* Individual category card */
.category-card--modern {
  /* Layout and structure */
  background: var(--color-white);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  text-align: center;
  min-height: 300px;
  
  /* Visual effects */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  z-index: 1;
  
  /* Flexbox for content alignment */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  
  /* Smooth hover transitions */
  transition: all 0.35s ease;
}

/* Gradient background overlay (hidden by default) */
.category-card--modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-primary-green), var(--color-primary-yellow));
  opacity: 0;
  z-index: -1;
  transform: translateY(100%);    /* Slides in from bottom */
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);  /* Smooth easing */
}

/* Card hover state - lifts up with enhanced shadow */
.category-card--modern:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

/* Reveal gradient overlay on hover */
.category-card--modern:hover::before {
  opacity: 0.05;                 /* Subtle overlay */
  transform: translateY(0);      /* Slide in completely */
}

/* Content wrapper within card */
.category-card--modern__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  z-index: 2;                   /* Above overlay */
  position: relative;
}

/* Animated icon container with 3D morphing effect */
.category-card--modern__icon {
  width: 70px;
  height: 70px;
  margin-bottom: var(--spacing-md);
  margin-top: var(--spacing-sm);
  
  /* Gradient background */
  background: linear-gradient(135deg, var(--color-primary-green), var(--color-secondary-green));
  
  /* Morphing border radius - creates organic shape */
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  box-shadow: 0 4px 12px rgba(45, 90, 39, 0.3);
  
  /* Flexbox for centering icon */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Smooth transition for hover effects */
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Icon hover state - scales, rotates, and morphs shape */
.category-card--modern:hover .category-card--modern__icon {
  transform: scale(1.15) rotate(10deg);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;  /* Different morphed shape */
}

/* SVG icon styling */
.category-card--modern__icon svg {
  width: 32px;
  height: 32px;
  color: white;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));  /* Subtle shadow */
}

/* Card title with gradient text effect on hover */
.category-card--modern__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  transition: all 0.3s ease;
}

/* Gradient text effect on card hover */
.category-card--modern:hover .category-card--modern__title {
  background: linear-gradient(135deg, var(--color-primary-green), var(--color-primary-yellow));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;           /* Hide original text color */
  transform: scale(1.05);       /* Slight scaling */
}

/* Card description text */
.category-card--modern__description {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  max-width: 95%;
  color: var(--color-text-secondary);
  flex-grow: 1;                 /* Pushes link to bottom */
}

/* Call-to-action link with animated arrow */
.category-card--modern__link {
  display: inline-flex;
  align-items: center;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-green);
  text-decoration: none;
  
  /* Button-like styling */
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1px solid currentColor;
  border-radius: 20px;           /* Pill shape */
  
  /* Layout */
  font-size: var(--font-size-sm);
  margin-top: auto;              /* Pushes to bottom of card */
  margin-bottom: var(--spacing-md);
  
  /* Smooth transitions */
  transition: all 0.3s ease;
  position: relative;
}

/* Animated arrow after link text */
.category-card--modern__link::after {
  content: '→';                  /* Right arrow character */
  margin-left: 6px;
  transition: transform 0.3s ease;
}

/* Link hover state - fills with green, white text */
.category-card--modern__link:hover {
  background-color: var(--color-primary-green);
  color: var(--color-white);
  border-color: var(--color-primary-green);
  text-decoration: none;
}

/* Arrow slides right on hover */
.category-card--modern__link:hover::after {
  transform: translateX(4px);
}

/* Optional overlay element for advanced hover effects */
.category-card--modern__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--color-primary-green) 0%, var(--color-secondary-green) 100%);
  opacity: 0;                    /* Hidden by default */
  transition: opacity var(--transition-normal);
  
  /* Center overlay content */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

/* Show overlay on card hover */
.category-card--modern:hover .category-card--modern__overlay {
  opacity: 0.9;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  /* Single column layout on mobile */
  .categories-modern__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  /* Smaller cards on mobile */
  .category-card--modern {
    height: 250px;
    padding: var(--spacing-md);
    min-height: auto;
    gap: var(--spacing-xs);
  }
  
  /* Smaller icon on mobile */
  .category-card--modern__icon {
    width: 50px;
    height: 50px;
    margin-bottom: var(--spacing-sm);
    margin-top: 0;
  }
  
  .category-card--modern__icon svg {
    width: 24px;
    height: 24px;
  }
  
  /* Adjusted typography for mobile */
  .category-card--modern__title {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-xs);
  }
  
  .category-card--modern__description {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-xs);
    line-height: 1.3;
  }
  
  .category-card--modern__link {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
  }
}

/* ==========================================================================
   4. ARTICLE CARDS COMPONENT
   ==========================================================================
   
   PURPOSE: Content cards for displaying featured articles, recipes, and blog posts
   
   FEATURES:
   - Responsive image containers with aspect ratio preservation
   - Category badge overlays positioned on images
   - Hover effects with image scaling and badge movement
   - Title overlays with accessible link structure
   - Content areas with excerpts and read-more links
   - Multiple size variants (standard and larger featured cards)
   
   USAGE: Create article cards using .card class with optional .card--larger modifier
   
   BEM STRUCTURE:
   - .card (Block)
   - .card--larger (Modifier - for featured/larger cards)
   - .card__image-container (Element - image wrapper)
   - .card__image (Element - main card image)
   - .card__category-badge (Element - badge overlay)
   - .card__title-overlay (Element - title overlay)
   - .card__title (Element - card title)
   - .card__link (Element - title link)
   - .card__content (Element - content wrapper)
   - .card__excerpt (Element - article excerpt)
   - .card__read-more (Element - read more link)
   ========================================================================== */

.card {
  /* Base card styling */
  background: var(--color-white);
  border-radius: 0;              /* Squared corners for modern look */
  overflow: hidden;              /* Clip content to card boundaries */
  box-shadow: none;              /* Clean design without shadows */
  height: 100%;                  /* Equal height in grid layouts */
  
  /* Layout structure */
  display: flex;
  flex-direction: column;
  position: relative;
  
  /* Initial state for reveal animation */
  opacity: 0;
  transform: translateY(20px);
  
  /* Hover border setup */
  border-bottom: 2px solid transparent;  /* Hidden border that appears on hover */
  
  /* Smooth transitions */
  transition: all 0.3s ease;
  
  /* Reveal animation with delay */
  animation: cardReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

/* Card reveal animation - slides up and fades in */
@keyframes cardReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card hover state - subtle lift with green border */
.card:hover {
  transform: translateY(-6px);                           /* Gentle lift effect */
  box-shadow: none;                                      /* Maintain clean look */
  border-bottom: 2px solid var(--color-primary-green);  /* Green accent border */
}

/* Image container - maintains aspect ratio and prevents overflow */
.card__image-container {
  position: relative;
  width: 100%;
  height: 300px;                 /* Standard card image height */
  overflow: hidden;              /* Clip scaled images */
  clip-path: none;               /* Clean rectangular edges */
}

/* Larger featured cards have taller image areas */
.card--larger .card__image-container {
  height: 400px;                 /* Taller image for prominence */
}

/* Remove general overlay - we use specific title overlay instead */
.card__image-container::before {
  content: none;
}

/* Add category badge directly over image */
.card__category-badge {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  z-index: 2;
  /* Removed background and other styling that was duplicating badge styles */
}

/* Card image styling */
.card__image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintains aspect ratio while filling container */
  object-position: center; /* Centers image within container */
  transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1), filter 0.4s ease;
  will-change: transform; /* Performance hint for smoother animations */
  filter: saturate(1.05); /* Slightly enhance colors */
}

/* Enhanced image zoom effect on card hover */
.card:hover .card__image {
  transform: scale(1.08); /* Enhanced zoom effect */
  filter: saturate(1.15) brightness(1.05); /* Boost colors on hover */
}

/* Category badge overlay on image */
.card__category-badge {
  position: absolute;
  top: var(--spacing-md); /* 16px from top */
  left: var(--spacing-md); /* 16px from left */
  z-index: 2; /* Above image */
  transition: transform 0.3s ease;
  background: transparent !important; /* Ensure no background */
  padding: 0; /* Remove any padding */
}

.card:hover .card__category-badge {
  transform: translateY(-3px);
}

/* Card content area */
.card__content {
  padding: 0; /* No padding needed since excerpt has its own padding */
  flex: 1; /* Grows to fill available space */
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s ease;
  background: transparent;
}

/* Larger card content needs no special padding */
.card--larger .card__content {
  padding: 0;
}

/* Position the card content relative to accommodate the absolute positioning of the title */
.card {
  position: relative;
}

/* Card title styling - normal positioning since we'll move it to the image with JavaScript */
.card__title {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Larger card title should be even larger */
.card--larger .card__title {
  font-size: var(--font-size-3xl);
}

/* Create a new overlay element for the title */
.card__title-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-lg);
  z-index: 3;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
}

.card--larger .card__title-overlay {
  padding: var(--spacing-xl);
}

/* Card title link - inherits title styling */
.card__link {
  color: var(--color-white); /* White text for readability against dark overlay */
  text-decoration: none;
  transition: all 0.3s ease;
  background: none; /* Remove underline animation */
  padding-bottom: 0;
  display: block;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* Enhanced text shadow for better readability */
}

.card__link:hover,
.card__link:focus {
  color: var(--color-primary-yellow); /* Change hover color for contrast */
  text-decoration: none;
}

/* Card excerpt/description text */
.card__excerpt {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  flex: 1; /* Takes remaining space */
  font-size: var(--font-size-base);
  font-family: var(--font-family-serif); /* Use serif font for excerpt like med.kitchen */
  padding: var(--spacing-xl) var(--spacing-lg); /* Increase padding now that title is in overlay */
}

.card__excerpt p {
  margin: 0 0 var(--spacing-md) 0;
}

/* Add more padding to larger card excerpt */
.card--larger .card__excerpt {
  padding: var(--spacing-2xl) var(--spacing-xl);
  font-size: var(--font-size-lg); /* Larger text in larger card */
}

/* Card metadata container - Hidden by default as requested */
.card__meta {
  display: none; /* Hide metadata as requested */
}

/* Card author styling - Hidden by default */
.card__author {
  font-weight: var(--font-weight-medium);
  display: none;
}

/* Card date styling */
.card__date {
  color: var(--color-text-secondary);
}

/* Larger card modifier - spans 2 columns */
.card--larger {
  transform: translateY(0);
  box-shadow: none; /* Remove shadow for consistency */
  border-left: none; /* Remove left border for cleaner look */
}

.card--featured:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.12), 0 6px 12px rgba(0, 0, 0, 0.06);
}

.card--featured .card__image-container {
  height: 320px; /* Slightly reduced height for better proportion */
  clip-path: polygon(0 0, 100% 0, 100% 94%, 0% 100%); /* Less pronounced angle */
}

.card--featured .card__title {
  font-size: var(--font-size-xl); /* Same size as other cards for consistency */
  margin-bottom: var(--spacing-md);
}

.card .card__image-container {
  height: 280px; /* Increased height for regular cards */
}

/* Responsive adjustments for card images */
@media (min-width: 768px) and (max-width: 1023px) {
  .card--featured .card__image-container {
    height: 340px;
  }
}

/* ==========================================================================
   5. BADGE COMPONENTS
   ==========================================================================
   
   PURPOSE: Small category labels for content organization and visual hierarchy
   
   FEATURES:
   - Color-coded system for different content types
   - Square corners for modern aesthetic
   - Left border accent for visual depth
   - Hover animations that respond to parent card hover
   - Consistent typography and spacing
   
   USAGE: Apply .badge class with color modifier (e.g., .badge--recipes)
   
   COLOR SYSTEM:
   - .badge--recipes (Green) - For cooking and food preparation content
   - .badge--culture (Blue) - For cultural and traditional food stories
   - .badge--travel (Orange) - For destination and travel-related content
   - .badge--restaurants (Purple) - For dining and restaurant features
   - .badge--trends (Yellow) - For food trends and innovations
   
   BEM STRUCTURE:
   - .badge (Block)
   - .badge--recipes, .badge--culture, etc. (Modifiers for different categories)
   ========================================================================== */

.badge {
  /* Typography and text styling */
  display: inline-block;
  font-size: var(--font-size-xs);        /* 12px - small but readable */
  font-weight: var(--font-weight-semibold);  /* 600 weight for emphasis */
  text-transform: uppercase;             /* All caps for label consistency */
  letter-spacing: 1px;                   /* Slight letter spacing for readability */
  color: var(--color-white);             /* White text on colored backgrounds */
  
  /* Layout and spacing */
  padding: var(--spacing-xs) var(--spacing-md);  /* 4px vertical, 16px horizontal */
  border-radius: 0;                      /* Square corners for modern look */
  
  /* Visual effects */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle depth shadow */
  
  /* Smooth transitions for hover effects */
  transition: all var(--transition-fast);
}

/* Badge hover animation - triggered by parent card hover */
.card:hover .badge {
  transform: translateY(-1px);           /* Slight lift on hover */
  box-shadow: 0 3px 6px rgba(0,0,0,0.15); /* Enhanced shadow */
}

/* RECIPE BADGE - Green theme for cooking content */
.badge--recipes {
  background: var(--color-primary-green);
  color: var(--color-white);
  border-left: 3px solid var(--color-secondary-green);  /* Accent border */
}

/* CULTURE BADGE - Blue theme for cultural content */
.badge--culture {
  background: #3B82F6;                   /* Modern blue */
  color: var(--color-white);
  border-left: 3px solid #1D4ED8;        /* Darker blue accent */
}

/* TRAVEL BADGE - Orange theme for destination content */
.badge--travel {
  background: #F97316;                   /* Vibrant orange */
  color: var(--color-white);
  border-left: 3px solid #C2410C;        /* Darker orange accent */
}

/* Restaurant badge - purple theme */
.badge--restaurants {
  background: #8B5CF6; /* Purple */
  color: var(--color-white);
  border-left: 3px solid #6D28D9; /* Darker purple for accent */
}

/* Trends badge - red theme */
.badge--trends {
  background: #EF4444; /* Red */
  color: var(--color-white);
  border-left: 3px solid #B91C1C; /* Darker red for accent */
}

/* ==========================================================================
   6. FOOTER COMPONENT
   ==========================================================================
   
   PURPOSE: Complete site footer with navigation, branding, and information
   
   FEATURES:
   - Multi-column responsive layout that stacks on mobile
   - Brand section with animated logo and description
   - Newsletter signup form with input styling
   - Organized navigation link groups
   - Social media integration
   - Copyright and credits section
   - Dark theme with contrast-optimized text
   - Decorative elements and background textures
   
   USAGE: Site-wide footer component containing all supplementary content
   
   LAYOUT SECTIONS:
   1. Brand area (logo, description, newsletter)
   2. Navigation columns (organized by topic)
   3. Social media links
   4. Bottom bar (copyright, credits)
   
   BEM STRUCTURE:
   - .footer (Block)
   - .footer__container (Element - content wrapper)
   - .footer__content (Element - main content grid)
   - .footer__brand (Element - branding section)
   - .footer__logo (Element - logo link)
   - .footer__logo-image (Element - logo image)
   - .footer__logo-text (Element - logo text)
   - .footer__description (Element - brand description)
   - .footer__newsletter (Element - newsletter section)
   - .footer__newsletter-form (Element - signup form)
   - .footer__newsletter-input (Element - email input)
   - .footer__newsletter-button (Element - submit button)
   - .footer__links (Element - navigation wrapper)
   - .footer__column (Element - link column)
   - .footer__column-title (Element - column heading)
   - .footer__list (Element - link list)
   - .footer__item (Element - list item)
   - .footer__link (Element - navigation link)
   - .footer__social (Element - social media container)
   - .footer__bottom (Element - bottom copyright bar)
   - .footer__copyright (Element - copyright text)
   - .footer__credits (Element - credits text)
   ========================================================================== */

.footer {
  background: #121212; /* Modern dark background */
  color: var(--color-white);
  padding: var(--spacing-4xl) 0 var(--spacing-xl) 0; /* 96px top, 32px bottom */
  position: relative;
  overflow: hidden;
}

/* Screen reader only class */
.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;
}

/* Footer container */
.footer__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  position: relative;
  z-index: 1;
}

/* Main footer content area */
.footer__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
  position: relative;
}

/* Add decorative elements */
.footer:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary-yellow) 0%, var(--color-orange-accent) 100%);
}

.footer:after {
  content: '';
  position: absolute;
  top: 60px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,193,7,0.1) 0%, rgba(255,143,0,0) 70%);
  border-radius: 50%;
  z-index: 0;
}

/* Add subtle grain texture overlay */
.footer:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary-yellow) 0%, var(--color-orange-accent) 100%);
  z-index: 2;
}

.footer__container:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

/* Footer brand section */
.footer__brand {
  max-width: 400px;
}

/* Footer logo styling */
.footer__logo {
  display: flex;
  align-items: center;
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-decoration: none !important; /* Ensure no default underline */
  margin-bottom: var(--spacing-md);
  transition: transform var(--transition-fast);
}

.footer__logo:hover {
  transform: translateY(-2px);
}

.footer__logo-image {
  width: 48px;
  height: 48px;
  margin-right: var(--spacing-md);
  transition: transform 0.3s ease;
}

.footer__logo:hover .footer__logo-image {
  transform: scale(1.1) rotate(5deg);
}

.footer__logo-text {
  color: var(--color-white);
  letter-spacing: 0.5px;
  font-size: var(--font-size-3xl); /* Increased from default */
  font-weight: var(--font-weight-bold);
  position: relative;
}

.footer__logo-text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 2px;
  background: var(--color-primary-yellow);
  transform: scaleX(0.7);
  transition: transform 0.3s ease;
}

.footer__logo:hover .footer__logo-text::after {
  transform: scaleX(1);
}

/* Footer description text */
.footer__description {
  color: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--spacing-xl) 0;
  font-size: var(--font-size-base);
  max-width: 90%;
}

/* Newsletter section */
.footer__newsletter {
  margin-top: var(--spacing-xl);
}

.footer__newsletter-form {
  display: flex;
  margin-top: var(--spacing-md);
  max-width: 100%;
}

.footer__newsletter-input {
  flex: 1;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px 0 0 4px;
  color: var(--color-white);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
}

.footer__newsletter-input:focus {
  outline: none;
  border-color: var(--color-primary-yellow);
  background: rgba(255, 255, 255, 0.15);
}

.footer__newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.footer__newsletter-button {
  padding: 10px 20px;
  background: var(--color-primary-yellow);
  border: none;
  border-radius: 0 4px 4px 0;
  color: #121212;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.footer__newsletter-button:hover,
.footer__newsletter-button:focus {
  background: var(--color-orange-accent);
  transform: translateY(-1px);
}

/* Footer links container */
.footer__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-xl);
  padding-top: var(--spacing-md);
}

/* Footer column styling */
.footer__column {
  position: relative;
}

/* Footer column title */
.footer__column-title {
  margin: 0 0 var(--spacing-lg) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  position: relative;
  padding-bottom: 10px;
}

.footer__column-title:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 40px;
  background: var(--color-primary-yellow);
  border-radius: 2px;
}

/* Footer link list */
.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Footer list item */
.footer__item {
  margin-bottom: var(--spacing-sm);
  position: relative;
  transition: transform var(--transition-fast);
}

.footer__item:hover {
  transform: translateX(4px);
}

/* Footer link styling */
.footer__link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all var(--transition-fast);
  display: inline-block;
  position: relative;
  padding: 2px 0;
}

.footer__link:hover,
.footer__link:focus {
  color: var(--color-primary-yellow);
}

.footer__link:after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: var(--color-primary-yellow);
  transition: width var(--transition-fast);
}

.footer__link:hover:after,
.footer__link:focus:after {
  width: 100%;
}

/* Social media links container */
.footer__social {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

/* Social media link styling */
.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  color: var(--color-white);
  text-decoration: none;
  transition: all var(--transition-fast);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  position: relative;
}

.footer__social-link:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-primary-yellow);
  transform: translateY(100%);
  transition: transform var(--transition-fast);
  z-index: -1;
}

.footer__social-link:hover,
.footer__social-link:focus {
  color: #121212;
  transform: translateY(-2px);
  border-color: var(--color-primary-yellow);
}

.footer__social-link:hover:before,
.footer__social-link:focus:before {
  transform: translateY(0);
}

/* Footer bottom section */
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  margin-top: var(--spacing-xl);
  position: relative;
}

.footer__bottom:before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,193,7,0.5) 50%, rgba(255,255,255,0) 100%);
}

/* Copyright text */
.footer__copyright {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--font-size-sm);
  letter-spacing: 0.5px;
}

/* Credits text */
.footer__credits {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--font-size-sm);
}

/* Responsive Footer Layout */
@media (min-width: 768px) {
  .footer__content {
    grid-template-columns: 1fr 2fr;
    align-items: start;
  }
  
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 992px) {
  .footer__brand {
    padding-right: var(--spacing-xl);
  }
  
  .footer__links {
    grid-template-columns: repeat(4, 1fr);
  }
}
.footer__credits {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   RESPONSIVE DESIGN FOR COMPONENTS
   ========================================================================== */

/* Tablet and up */
@media (min-width: 768px) {
  /* Footer responsive layout */
  .footer__content {
    grid-template-columns: 1fr 2fr;
    align-items: start;
  }
  
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  
  /* Category cards grid */
  .categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  /* Category cards full grid */
  .categories__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Enhanced card hover effects on larger screens */
  .card:hover {
    transform: translateY(-6px);
  }
  
  .category-card:hover {
    transform: translateY(-10px);
  }
}


/* ===== ADDITIONAL COMPONENTS FOR STYLE GUIDE ===== */

/**
 * ====================================================================
 * EXTENDED BUTTON COMPONENTS
 * ====================================================================
 * Additional button variations and states for comprehensive style guide
 */

/* Button Base Styles (Enhanced) */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: var(--border-radius-base);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  vertical-align: middle;
}

.button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.2);
}

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary Button */
.button--primary {
  background-color: var(--color-primary-green);
  color: var(--color-white);
  border-color: var(--color-primary-green);
}

.button--primary:hover {
  background-color: var(--color-secondary-green);
  border-color: var(--color-secondary-green);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(45, 90, 39, 0.2);
}

.button--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(45, 90, 39, 0.2);
}

/* Secondary Button */
.button--secondary {
  background-color: var(--color-primary-yellow);
  color: var(--color-text-primary);
  border-color: var(--color-primary-yellow);
}

.button--secondary:hover {
  background-color: var(--color-secondary-yellow);
  border-color: var(--color-secondary-yellow);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 193, 7, 0.2);
}

.button--secondary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);
}

/* Outline Button */
.button--outline {
  background-color: transparent;
  color: var(--color-primary-green);
  border-color: var(--color-primary-green);
}

.button--outline:hover {
  background-color: var(--color-primary-green);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(45, 90, 39, 0.2);
}

.button--outline:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(45, 90, 39, 0.2);
}

/* Button Sizes */
.button--small {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
}

.button--large {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-lg);
}

.button--full-width {
  width: 100%;
}

/**
 * ====================================================================
 * FORM COMPONENTS
 * ====================================================================
 * Comprehensive form styling for inputs, selects, and textareas
 */

/* Form Group */
.form-group {
  margin-bottom: var(--spacing-lg);
}

/* Form Labels */
.form-label {
  display: block;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-base);
}

.form-label--required::after {
  content: " *";
  color: #dc3545;
}

/* Form Inputs */
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 2px solid #e9ecef;
  border-radius: var(--border-radius-base);
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary-green);
  box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.1);
}

.form-input:invalid,
.form-textarea:invalid,
.form-select:invalid {
  border-color: #dc3545;
}

.form-input:invalid:focus,
.form-textarea:invalid:focus,
.form-select:invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Textarea Specific */
.form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Select Specific */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--spacing-sm) center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  padding-right: var(--spacing-xl);
  appearance: none;
}

/* Form Help Text */
.form-help {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-xs);
}

/* Form Error Text */
.form-error {
  font-size: var(--font-size-sm);
  color: #dc3545;
  margin-top: var(--spacing-xs);
}

/**
 * ====================================================================
 * BADGE COMPONENTS
 * ====================================================================
 * Category badges and status indicators
 */

.badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--border-radius-base);
  line-height: 1;
}

.badge--recipes {
  background-color: var(--color-primary-green);
  color: var(--color-white);
}

.badge--restaurants {
  background-color: var(--color-secondary-green);
  color: var(--color-white);
}

.badge--travel {
  background-color: var(--color-primary-yellow);
  color: var(--color-text-primary);
}

.badge--culture {
  background-color: var(--color-orange-accent);
  color: var(--color-white);
}

.badge--featured {
  background-color: var(--color-secondary-yellow);
  color: var(--color-text-primary);
}

/**
 * ====================================================================
 * ALERT COMPONENTS
 * ====================================================================
 * Status messages and notifications
 */

.alert {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border: 1px solid transparent;
  border-radius: var(--border-radius-base);
  border-left: 4px solid;
}

.alert--success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
  border-left-color: #28a745;
}

.alert--info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
  border-left-color: #17a2b8;
}

.alert--warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeaa7;
  border-left-color: #ffc107;
}

.alert--error {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
  border-left-color: #dc3545;
}

/**
 * ====================================================================
 * LIST COMPONENTS
 * ====================================================================
 * Styled lists for navigation and content
 */

.styled-list {
  margin: 0;
  padding-left: var(--spacing-lg);
}

.styled-list li {
  margin-bottom: var(--spacing-sm);
  line-height: var(--line-height-relaxed);
}

.styled-list--unstyled {
  list-style: none;
  padding-left: 0;
}

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

.nav-list li {
  margin-bottom: var(--spacing-xs);
}

.nav-link {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: var(--border-radius-base);
  transition: all var(--transition-fast);
}

.nav-link:hover,
.nav-link:focus {
  background-color: var(--color-primary-green);
  color: var(--color-white);
  text-decoration: none;
}

.nav-link--active {
  background-color: var(--color-primary-green);
  color: var(--color-white);
}

/**
 * ====================================================================
 * UTILITY CLASSES
 * ====================================================================
 * Helper classes for common styling needs
 */

/* Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-primary-green); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-secondary); opacity: 0.7; }
.text-white { color: var(--color-white); }

.text-small { font-size: var(--font-size-sm); }
.text-large { font-size: var(--font-size-lg); }

.font-weight-normal { font-weight: var(--font-weight-normal); }
.font-weight-medium { font-weight: var(--font-weight-medium); }
.font-weight-semibold { font-weight: var(--font-weight-semibold); }
.font-weight-bold { font-weight: var(--font-weight-bold); }

/* Spacing Utilities */
.margin-0 { margin: 0; }
.margin-top-0 { margin-top: 0; }
.margin-bottom-0 { margin-bottom: 0; }

.padding-0 { padding: 0; }
.padding-small { padding: var(--spacing-sm); }
.padding-medium { padding: var(--spacing-md); }
.padding-large { padding: var(--spacing-lg); }

/* Display Utilities */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-none { display: none; }

/* Flex Utilities */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* Border Utilities */
.border { border: 1px solid #e9ecef; }
.border-top { border-top: 1px solid #e9ecef; }
.border-bottom { border-bottom: 1px solid #e9ecef; }
.border-0 { border: 0; }

.rounded { border-radius: var(--border-radius-base); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-full { border-radius: 50%; }

/* Shadow Utilities */
.shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.shadow { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }
.shadow-none { box-shadow: none; }

/* Background Utilities */
.bg-white { background-color: var(--color-white); }
.bg-neutral { background-color: var(--color-neutral-bg); }
.bg-primary { background-color: var(--color-primary-green); }
.bg-secondary { background-color: var(--color-secondary-green); }

/* Responsive Utilities */
@media (max-width: 768px) {
  .d-md-none { display: none; }
  .d-md-block { display: block; }
  .text-md-center { text-align: center; }
}

@media (max-width: 480px) {
  .d-sm-none { display: none; }
  .d-sm-block { display: block; }
  .text-sm-center { text-align: center; }
}

/* Card Read More Link
   ========================================================================== */
.card__read-more {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
  opacity: 0.9;
}

.card__read-more:hover {
  opacity: 1;
  color: var(--color-primary-dark);
}

.card__read-more .arrow {
  display: inline-block;
  margin-left: var(--spacing-xs);
  transform: translateX(0);
  transition: transform 0.3s ease;
}

.card__read-more:hover .arrow {
  transform: translateX(5px);
}

/* Traditional Card Design for BEFORE demonstration
   ========================================================================== */
.card--before {
  background: var(--color-white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card--before:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.card--before .card__image-container {
  height: 240px;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

.card--before .card__title-overlay {
  display: none; /* Hide the title overlay for traditional cards */
}

.card--before .card__title {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--color-text-primary);
}

.card--before .card__link {
  color: var(--color-text-primary);
  text-decoration: none;
  text-shadow: none;
}

.card--before .card__link:hover {
  color: var(--color-primary);
}

.card--before .card__content {
  padding: var(--spacing-xl);
  background-color: var(--color-white);
}

.card--before .card__excerpt {
  padding: 0;
  margin-bottom: var(--spacing-md);
  font-family: var(--font-family-serif);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  font-size: var(--font-size-base);
}