/* Custom styles for the Book of Mocktails application */
/* Matches the exact styling from the Next.js version with fruit and veggie colors */
/* Updated: 2024 - Removed background colors from UI elements */
/* Cache bust: 2024-12-19 - Replaced breadcrumbs with back links */
/* NO CACHE: 2024-12-19 15:30:00 - 1734622200 */
/* AGGRESSIVE CACHE BUST: 2024-12-19 16:45:00 - 1734626700 */
/* Google Ads Integration: 2025-01-09 - Added ad styling and placeholders */
/* Typography System: 2025-01-09 - Beautiful typography with Atkinson Hyperlegible and Aleo */
/* Amazon Affiliate Links: 2025-01-09 - Fixed link generation and styling */
/* CACHE BUST: 2025-01-09 07:50:00 - 1757505000 */
/* BLOG TYPOGRAPHY IMPROVEMENT: 2025-01-30 - Enhanced readability with proper hierarchy, spacing, and indentation */

/* ========================================
   TYPOGRAPHY SYSTEM
   ======================================== */

/* CSS Custom Properties for Typography */
:root {
  /* Font Families */
  --font-primary: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-display: 'Aleo', serif;
  --font-numbers: 'Roboto', sans-serif;
  
  /* Font Sizes - Modular Scale (1.25) */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 3.75rem;   /* 60px */
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Font Weights */
  --font-normal: 400;
  --font-bold: 700;
  
  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  
  /* Spacing Scale */
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
}

/* Base Typography */
html {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: #333;
  font-weight: var(--font-normal);
  letter-spacing: var(--tracking-normal);
}

/* Heading Hierarchy */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
  color: #1a1a1a;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
  color: #1a1a1a;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-normal);
  margin-bottom: var(--space-4);
  color: #2a2a2a;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-normal);
  margin-bottom: var(--space-3);
  color: #2a2a2a;
}

h5, .h5 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-normal);
  margin-bottom: var(--space-3);
  color: #333;
}

h6, .h6 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-normal);
  margin-bottom: var(--space-2);
  color: #333;
}

/* Body Text */
p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  color: #444;
}

/* Small Text */
small, .text-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: #666;
}

/* Large Text */
.text-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

/* Extra Large Text */
.text-xl {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
}

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

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

.leading-tight { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }

/* Links */
a {
  color: #16a34a;
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: var(--font-normal);
}

a:hover {
  color: #15803d;
  text-decoration: underline;
}

a:focus {
  outline: 2px solid #16a34a;
  outline-offset: 2px;
}

/* Lists */
ul, ol {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

li {
  margin-bottom: var(--space-1);
  color: #444;
  display: list-item;
}

/* Blockquotes */
blockquote {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  font-style: italic;
  color: #555;
  border-left: 4px solid #16a34a;
  padding-left: var(--space-4);
  margin: var(--space-6) 0;
}

/* Code */
code, pre {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

code {
  background-color: #f1f5f9;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  color: #e11d48;
}

pre {
  background-color: #f8fafc;
  padding: var(--space-4);
  border-radius: 0.5rem;
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

/* ========================================
   END TYPOGRAPHY SYSTEM
   ======================================== */

/* ========================================
   DISPLAY TYPOGRAPHY - ALEO
   ======================================== */

/* Main site title styling */
.site-title,
.brand-logo,
h1.site-title,
h1.brand-logo {
  font-family: var(--font-display);
  font-size: var(--text-6xl) ;
  font-weight: 400 ;
  line-height: var(--leading-tight) ;
  letter-spacing: var(--tracking-wide) ;
  color: #16a34a ;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1) ;
  margin-bottom: var(--space-4) ;
  text-align: center ;
}

/* Responsive adjustments for site title */
@media (max-width: 768px) {
  .site-title,
  .brand-logo,
  h1.site-title,
  h1.brand-logo {
    font-size: var(--text-5xl) ;
  }
}

@media (max-width: 480px) {
  .site-title,
  .brand-logo,
  h1.site-title,
  h1.brand-logo {
    font-size: var(--text-4xl) ;
  }
}

/* Page headers with display font */
.page-header h1,
.hero-title h1,
.main-title h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl) ;
  font-weight: 400 ;
  line-height: var(--leading-tight) ;
  letter-spacing: var(--tracking-wide) ;
  color: #1a1a1a ;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) ;
  margin-bottom: var(--space-6) ;
  text-align: center ;
}

/* Recipe detail page title */
.recipe-detail h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl) ;
  font-weight: 400 ;
  line-height: var(--leading-tight) ;
  letter-spacing: var(--tracking-wide) ;
  color: #1a1a1a ;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) ;
  margin-bottom: var(--space-4) ;
}

/* Blog post title */
.blog-post h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl) ;
  font-weight: 400 ;
  line-height: var(--leading-tight) ;
  letter-spacing: var(--tracking-wide) ;
  color: #1a1a1a ;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) ;
  margin-bottom: var(--space-6) ;
}

/* Admin panel title */
.admin-panel h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl) ;
  font-weight: 400 ;
  line-height: var(--leading-tight) ;
  letter-spacing: var(--tracking-wide) ;
  color: #1a1a1a ;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) ;
  margin-bottom: var(--space-6) ;
}

/* ========================================
   END DISPLAY TYPOGRAPHY
   ======================================== */

/* ========================================
   MATERIALIZE CSS TYPOGRAPHY OVERRIDES
   ======================================== */

/* Override Materialize default fonts */
body, html {
  font-family: var(--font-primary);
}

/* Specific overrides for elements that might have hardcoded fonts */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

p, span, div, a, li, ul, ol, table, td, th, input, textarea, select, button, label {
  font-family: var(--font-primary);
}

/* Card Typography */
.card .card-title {
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #1a1a1a;
}

.card .card-content {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: #444;
}

.card .card-content p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

/* Button Typography */
.btn, .btn-large, .btn-small, .btn-floating {
  font-family: var(--font-primary);
  font-weight: var(--font-bold) ;
  letter-spacing: var(--tracking-wide) ;
  text-transform: uppercase;
  font-size: var(--text-sm) ;
}

.btn-large {
  font-size: var(--text-base) ;
}

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

/* Form Typography */
.input-field input, 
.input-field textarea, 
.input-field select {
  font-family: var(--font-primary);
  font-size: var(--text-base) ;
  line-height: var(--leading-normal) ;
}

.input-field label {
  font-family: var(--font-primary);
  font-size: var(--text-sm) ;
  font-weight: var(--font-normal) ;
  color: #666 ;
}

.input-field input:focus + label,
.input-field textarea:focus + label,
.input-field select:focus + label {
  color: #16a34a ;
  font-weight: var(--font-bold) ;
}

/* Navigation Typography */
.nav-wrapper a, 
.sidenav a {
  font-family: var(--font-primary);
  font-weight: var(--font-normal);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-normal);
  color: #9e9e9e; /* Light grey color */
}

.nav-wrapper a:hover,
.sidenav a:hover {
  color: #757575; /* Slightly darker grey on hover */
}

.nav-wrapper .brand-logo {
  font-family: var(--font-primary);
  font-weight: var(--font-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
}

/* Breadcrumb Typography */
.breadcrumb {
  font-family: var(--font-primary);
  font-size: var(--text-sm) ;
  line-height: var(--leading-normal) ;
}

.breadcrumb:before {
  font-family: 'Material Icons';
}

/* Table Typography */
table, 
table th, 
table td {
  font-family: var(--font-primary);
  font-size: var(--text-sm) ;
  line-height: var(--leading-normal) ;
}

table th {
  font-weight: var(--font-bold) ;
  letter-spacing: var(--tracking-wide) ;
  text-transform: uppercase;
  font-size: var(--text-xs) ;
}

/* Modal Typography */
.modal .modal-content h4 {
  font-family: var(--font-primary);
  font-size: var(--text-2xl) ;
  font-weight: var(--font-bold) ;
  line-height: var(--leading-tight) ;
  letter-spacing: var(--tracking-tight) ;
}

.modal .modal-content p {
  font-family: var(--font-primary);
  font-size: var(--text-base) ;
  line-height: var(--leading-relaxed) ;
}

/* Chip Typography */
.chip {
  font-family: var(--font-primary);
  font-size: var(--text-sm) ;
  font-weight: var(--font-normal) ;
  letter-spacing: var(--tracking-normal) ;
}

/* Badge Typography */
.badge {
  font-family: var(--font-primary);
  font-size: var(--text-xs) ;
  font-weight: var(--font-bold) ;
  letter-spacing: var(--tracking-wide) ;
}

/* Pagination Typography */
.pagination li a {
  font-family: var(--font-primary);
  font-size: var(--text-sm) ;
  font-weight: var(--font-normal) ;
}

/* Collection Typography */
.collection .collection-item {
  font-family: var(--font-primary);
  font-size: var(--text-base) ;
  line-height: var(--leading-normal) ;
}

.collection .collection-item .title {
  font-weight: var(--font-bold) ;
  font-size: var(--text-lg) ;
  line-height: var(--leading-snug) ;
}

.collection .collection-item .secondary-content {
  font-size: var(--text-sm) ;
  color: #666 ;
}

/* ========================================
   END MATERIALIZE CSS TYPOGRAPHY OVERRIDES
   ======================================== */

/* ========================================
   COMPONENT-SPECIFIC TYPOGRAPHY
   ======================================== */

/* Recipe Card Typography */
.recipe-card .card-title {
  font-size: var(--text-xl) ;
  font-weight: var(--font-bold) ;
  line-height: var(--leading-tight) ;
  letter-spacing: var(--tracking-tight) ;
  margin-bottom: var(--space-3) ;
  color: #1a1a1a ;
}

.recipe-card .card-content p {
  font-size: var(--text-sm) ;
  line-height: var(--leading-relaxed) ;
  color: #666 ;
  margin-bottom: var(--space-2) ;
}

.recipe-card .ingredients-list {
  font-size: var(--text-sm) ;
  line-height: var(--leading-normal) ;
  color: #555 ;
}

.recipe-card .difficulty-badge {
  font-size: var(--text-xs) ;
  font-weight: var(--font-bold) ;
  letter-spacing: var(--tracking-wide) ;
  text-transform: uppercase;
}

/* Recipe Detail Page Typography */
.recipe-detail h1 {
  font-size: var(--text-5xl) ;
  font-weight: var(--font-bold) ;
  line-height: var(--leading-tight) ;
  letter-spacing: var(--tracking-tight) ;
  margin-bottom: var(--space-4) ;
  color: #1a1a1a ;
}

.recipe-detail .recipe-meta {
  font-size: var(--text-sm) ;
  color: #666 ;
  margin-bottom: var(--space-4) ;
}

.recipe-detail .ingredients-section h3,
.recipe-detail .instructions-section h3 {
  font-size: var(--text-2xl) ;
  font-weight: var(--font-bold) ;
  line-height: var(--leading-snug) ;
  margin-bottom: var(--space-4) ;
  color: #2a2a2a ;
}

.recipe-detail .ingredients-list li,
.recipe-detail .instructions-list li {
  font-size: var(--text-base) ;
  line-height: var(--leading-relaxed) ;
  margin-bottom: var(--space-2) ;
  color: #444 ;
}

/* Search Results Typography */
.search-results .recipe-card .card-title {
  font-size: var(--text-lg) ;
  font-weight: var(--font-bold) ;
  line-height: var(--leading-snug) ;
  letter-spacing: var(--tracking-normal) ;
}

.search-results .recipe-card .card-content {
  font-size: var(--text-sm) ;
  line-height: var(--leading-normal) ;
}

/* Blog Post Typography */
.blog-post h1 {
  font-size: var(--text-4xl) ;
  font-weight: var(--font-bold) ;
  line-height: var(--leading-tight) ;
  letter-spacing: var(--tracking-tight) ;
  margin-bottom: var(--space-6) ;
  color: #1a1a1a ;
}

.blog-post h2 {
  font-size: var(--text-3xl) ;
  font-weight: var(--font-bold) ;
  line-height: var(--leading-snug) ;
  margin-bottom: var(--space-4) ;
  margin-top: var(--space-8) ;
  color: #2a2a2a ;
}

.blog-post h3 {
  font-size: var(--text-2xl) ;
  font-weight: var(--font-bold) ;
  line-height: var(--leading-snug) ;
  margin-bottom: var(--space-3) ;
  margin-top: var(--space-6) ;
  color: #2a2a2a ;
}

.blog-post p {
  font-size: var(--text-lg) ;
  line-height: var(--leading-relaxed) ;
  margin-bottom: var(--space-5) ;
  color: #444 ;
}

.blog-post blockquote {
  font-size: var(--text-xl) ;
  line-height: var(--leading-relaxed) ;
  font-style: italic;
  color: #555 ;
  border-left: 4px solid #16a34a;
  padding-left: var(--space-5) ;
  margin: var(--space-8) 0 ;
}

/* Admin Panel Typography */
.admin-panel h1 {
  font-size: var(--text-4xl) ;
  font-weight: var(--font-bold) ;
  line-height: var(--leading-tight) ;
  letter-spacing: var(--tracking-tight) ;
  margin-bottom: var(--space-6) ;
  color: #1a1a1a ;
}

.admin-panel h2 {
  font-size: var(--text-2xl) ;
  font-weight: var(--font-bold) ;
  line-height: var(--leading-snug) ;
  margin-bottom: var(--space-4) ;
  color: #2a2a2a ;
}

.admin-panel .stats-card .card-title {
  font-size: var(--text-3xl) ;
  font-weight: var(--font-bold) ;
  line-height: var(--leading-tight) ;
  color: #16a34a ;
}

.admin-panel .stats-card .card-content {
  font-size: var(--text-sm) ;
  color: #666 ;
}

/* ========================================
   END COMPONENT-SPECIFIC TYPOGRAPHY
   ======================================== */

/* ========================================
   RESPONSIVE TYPOGRAPHY
   ======================================== */

/* Mobile Typography Adjustments */
@media (max-width: 600px) {
  /* Base font size adjustment for mobile */
  html {
    font-size: 14px;
  }
  
  /* Heading adjustments for mobile */
  h1, .h1 {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
  }
  
  h2, .h2 {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
  }
  
  h3, .h3 {
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
  }
  
  /* Recipe card adjustments for mobile */
  .recipe-card .card-title {
    font-size: var(--text-lg) ;
  }
  
  .recipe-card .card-content p {
    font-size: var(--text-xs) ;
  }
  
  /* Recipe detail page mobile adjustments */
  .recipe-detail h1 {
    font-size: var(--text-4xl) ;
  }
  
  .recipe-detail .ingredients-section h3,
  .recipe-detail .instructions-section h3 {
    font-size: var(--text-xl) ;
  }
  
  /* Blog content mobile adjustments */
  .blog-content {
    font-size: 1rem; /* 16px on mobile */
    line-height: 1.7;
  }
  
  .blog-content h1 {
    font-size: 1.875rem; /* 30px */
    margin-top: 2rem;
    margin-bottom: 1.25rem;
  }
  
  .blog-content h2 {
    font-size: 1.5rem; /* 24px */
    margin-top: 2rem;
    margin-bottom: 1rem;
  }
  
  .blog-content h3 {
    font-size: 1.25rem; /* 20px */
    margin-top: 1.5rem;
    margin-bottom: 0.875rem;
  }
  
  .blog-content h4 {
    font-size: 1.125rem; /* 18px */
  }
  
  .blog-content h5 {
    font-size: 1rem; /* 16px */
  }
  
  .blog-content h6 {
    font-size: 0.875rem; /* 14px */
  }
  
  .blog-content p {
    margin-bottom: 1.5rem;
  }
  
  .blog-content ul,
  .blog-content ol {
    padding-left: 2rem;
    margin-bottom: 1.5rem;
  }
  
  .blog-content li {
    margin-bottom: 0.625rem;
  }
  
  .blog-content blockquote {
    padding: 1rem;
    margin: 1.5rem 0;
    font-size: 1rem;
  }
  
  .blog-content blockquote::before {
    font-size: 3rem;
    top: -0.25rem;
    left: 0.75rem;
  }
  
  /* Admin panel mobile adjustments */
  .admin-panel h1 {
    font-size: var(--text-3xl) ;
  }
  
  .admin-panel .stats-card .card-title {
    font-size: var(--text-2xl) ;
  }
}

/* Tablet Typography Adjustments */
@media (min-width: 601px) and (max-width: 992px) {
  /* Recipe card adjustments for tablet */
  .recipe-card .card-title {
    font-size: var(--text-lg) ;
  }
  
  .recipe-card .card-content p {
    font-size: var(--text-sm) ;
  }
  
  /* Recipe detail page tablet adjustments */
  .recipe-detail h1 {
    font-size: var(--text-4xl) ;
  }
  
  /* Blog content tablet adjustments */
  .blog-content {
    font-size: 1.0625rem; /* 17px on tablet */
    line-height: 1.72;
  }
  
  .blog-content h1 {
    font-size: 2rem; /* 32px */
  }
  
  .blog-content h2 {
    font-size: 1.75rem; /* 28px */
  }
  
  .blog-content h3 {
    font-size: 1.375rem; /* 22px */
  }
  
  .blog-content p {
    margin-bottom: 1.625rem;
  }
  
  .blog-content ul,
  .blog-content ol {
    padding-left: 2.25rem;
  }
}

/* ========================================
   END RESPONSIVE TYPOGRAPHY
   ======================================== */

/* ========================================
   COMPREHENSIVE FONT OVERRIDES
   ======================================== */

/* Ensure all text elements use appropriate fonts with proper specificity */
.recipe-card p, .recipe-card span, .recipe-card div, .recipe-card a, .recipe-card li, 
.search-results p, .search-results span, .search-results div, .search-results a, .search-results li,
.blog-post p, .blog-post span, .blog-post div, .blog-post a, .blog-post li,
.admin-panel p, .admin-panel span, .admin-panel div, .admin-panel a, .admin-panel li,
.nav-wrapper p, .nav-wrapper span, .nav-wrapper div, .nav-wrapper a, .nav-wrapper li,
.sidenav p, .sidenav span, .sidenav div, .sidenav a, .sidenav li,
.breadcrumb p, .breadcrumb span, .breadcrumb div, .breadcrumb a, .breadcrumb li,
.pagination p, .pagination span, .pagination div, .pagination a, .pagination li,
.collection p, .collection span, .collection div, .collection a, .collection li,
.modal p, .modal span, .modal div, .modal a, .modal li,
.card p, .card span, .card div, .card a, .card li,
.btn p, .btn span, .btn div, .btn a, .btn li,
.input-field p, .input-field span, .input-field div, .input-field a, .input-field li,
.chip p, .chip span, .chip div, .chip a, .chip li,
.badge p, .badge span, .badge div, .badge a, .badge li,
table p, table span, table div, table a, table li,
blockquote p, blockquote span, blockquote div, blockquote a, blockquote li {
  font-family: var(--font-primary);
}

/* Ensure all heading tags use Aleo font */
.recipe-card h1, .recipe-card h2, .recipe-card h3, .recipe-card h4, .recipe-card h5, .recipe-card h6,
.search-results h1, .search-results h2, .search-results h3, .search-results h4, .search-results h5, .search-results h6,
.blog-post h1, .blog-post h2, .blog-post h3, .blog-post h4, .blog-post h5, .blog-post h6,
.admin-panel h1, .admin-panel h2, .admin-panel h3, .admin-panel h4, .admin-panel h5, .admin-panel h6,
.nav-wrapper h1, .nav-wrapper h2, .nav-wrapper h3, .nav-wrapper h4, .nav-wrapper h5, .nav-wrapper h6,
.sidenav h1, .sidenav h2, .sidenav h3, .sidenav h4, .sidenav h5, .sidenav h6,
.breadcrumb h1, .breadcrumb h2, .breadcrumb h3, .breadcrumb h4, .breadcrumb h5, .breadcrumb h6,
.pagination h1, .pagination h2, .pagination h3, .pagination h4, .pagination h5, .pagination h6,
.collection h1, .collection h2, .collection h3, .collection h4, .collection h5, .collection h6,
.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.btn h1, .btn h2, .btn h3, .btn h4, .btn h5, .btn h6,
.input-field h1, .input-field h2, .input-field h3, .input-field h4, .input-field h5, .input-field h6,
.chip h1, .chip h2, .chip h3, .chip h4, .chip h5, .chip h6,
.badge h1, .badge h2, .badge h3, .badge h4, .badge h5, .badge h6,
table h1, table h2, table h3, table h4, table h5, table h6,
blockquote h1, blockquote h2, blockquote h3, blockquote h4, blockquote h5, blockquote h6 {
  font-family: var(--font-display);
}

/* Global heading font override - ensure ALL heading tags use Aleo */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
}

/* Recipe count number styling */
#recipe-count-number {
  font-family: var(--font-numbers);
  font-weight: 500;
  font-size: 1.1em;
  color: #1976d2;
}

/* Amazon affiliate ingredient links */
.amazon-ingredient-link {
  color: #16a34a;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent;
}

.amazon-ingredient-link:hover {
  color: #0d6efd;
  border-bottom-color: #0d6efd;
  text-decoration: none;
}

.amazon-ingredient-chip {
  display: inline-block;
  background-color: #dcfce7;
  color: #16a34a;
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  margin-right: 0.5rem;
  margin-bottom: 0.25rem;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.amazon-ingredient-chip:hover {
  background-color: #bbf7d0;
  color: #0d6efd;
  border-color: #0d6efd;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Amazon Buy Now Buttons */
.amazon-buy-now-btn {
  display: inline-block;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 500;
  text-decoration: none;
  margin-left: 0.25rem;
  transition: all 0.2s ease;
  border: none;
  box-shadow: 0 1px 2px rgba(255, 107, 53, 0.2);
  white-space: nowrap;
  line-height: 1.2;
}

.amazon-buy-now-btn:hover {
  background: linear-gradient(135deg, #e55a2b, #e0841a);
  color: white;
  text-decoration: none;
  transform: translateY(-0.5px);
  box-shadow: 0 2px 4px rgba(255, 107, 53, 0.3);
}

.ingredient-with-buy {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.ingredient-name {
  font-weight: 500;
  color: #374151;
}

/* Amazon Text Link Style */
.amazon-text-link {
  display: inline;
  background: none;
  color: #666;
  padding: 0;
  border: none;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: underline;
  margin-left: 0.25rem;
  transition: color 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
}

.amazon-text-link:hover {
  color: #333;
  text-decoration: underline;
}

/* Responsive adjustments for Buy Now buttons */
@media (max-width: 768px) {
  .amazon-buy-now-btn {
    font-size: 0.5rem;
    padding: 0.125rem 0.25rem;
    margin-left: 0.125rem;
  }
  
  .ingredient-with-buy {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
  }
  
  .amazon-text-link {
    margin-left: 0.125rem;
  }
}

.recipe-ingredient {
  font-size: 1rem;
  padding: 0.5rem 0;
  display: block;
}

.amazon-selected-ingredient {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

.amazon-selected-ingredient:hover {
  color: #bbf7d0;
  text-decoration: none;
}

.amazon-filter-ingredient {
  color: #16a34a;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.amazon-filter-ingredient:hover {
  color: #0d6efd;
  text-decoration: none;
}

.amazon-blog-ingredient {
  color: #16a34a;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

.amazon-blog-ingredient:hover {
  color: #0d6efd;
  border-bottom-color: #0d6efd;
  text-decoration: none;
}

/* Override any remaining Materialize or other framework fonts */
.material-icons {
  font-family: 'Material Icons';
}

/* Ensure code elements use monospace */
code, pre, .code, .pre {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace ;
}

/* ========================================
   END COMPREHENSIVE FONT OVERRIDES
   ======================================== */

/* Animated count numbers */
#recipe-count-number,
#results-count-number {
  font-weight: var(--font-bold);
  font-size: var(--text-2xl);
  font-family: var(--font-primary);
  transition: color 0.1s ease;
}

/* Active navigation styling */
.nav-wrapper ul li.active a {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-weight: var(--font-bold);
  font-family: var(--font-primary);
}

.sidenav li.active a {
  background-color: #16a34a;
  color: white ;
  font-weight: var(--font-bold);
  font-family: var(--font-primary);
}

/* Custom styles for the search page */
.ingredient-filters,
.category-filters,
.glass-filters,
.difficulty-filters {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 10px;
}

.ingredient-filters::-webkit-scrollbar,
.category-filters::-webkit-scrollbar,
.glass-filters::-webkit-scrollbar,
.difficulty-filters::-webkit-scrollbar {
  width: 6px;
}

.ingredient-filters::-webkit-scrollbar-track,
.category-filters::-webkit-scrollbar-track,
.glass-filters::-webkit-scrollbar-track,
.difficulty-filters::-webkit-scrollbar-track {
  border-radius: 3px;
}

.ingredient-filters::-webkit-scrollbar-thumb,
.category-filters::-webkit-scrollbar-thumb,
.glass-filters::-webkit-scrollbar-thumb,
.difficulty-filters::-webkit-scrollbar-thumb {
  background: #16a34a; /* green-600 */
  border-radius: 3px;
}

.ingredient-filters::-webkit-scrollbar-thumb:hover,
.category-filters::-webkit-scrollbar-thumb:hover,
.glass-filters::-webkit-scrollbar-thumb:hover,
.difficulty-filters::-webkit-scrollbar-thumb:hover {
  background: #15803d; /* green-700 */
}

.filter-item {
  cursor: pointer;
  padding: 4px 0;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.filter-item:hover {
  /* No background color on hover */
}

.chip-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 16px;
  font-size: var(--text-xs);
  font-family: var(--font-primary);
  margin: 2px;
}

.chip i {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.chip i:hover {
  opacity: 1;
}

/* Search page specific styles */
.search-page-header {
  color: white;
  padding: 0;
  margin-bottom: 0.5rem;
}

/* Smaller title and messaging for search page */
.search-page-header h1 {
  font-size: var(--text-3xl) ;
  font-family: var(--font-primary);
  margin-bottom: 0.5rem ;
}

.search-page-header p {
  font-size: var(--text-lg) ;
  font-family: var(--font-primary);
}

.search-page-header h1 {
  margin: 0;
  font-weight: 300;
}

.search-page-header p {
  margin: 1rem 0 0 0;
  opacity: 0.9;
}

/* Filter sidebar styles */
.filter-sidebar {
  position: sticky;
  top: 2rem;
}

.filter-section {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}

.filter-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* Results section styles */
.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}

.results-count {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  font-family: var(--font-primary);
  color: #333;
}

.sort-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Back Link Navigation */
.back-link-container {
  /* Clean minimal design */
}

.back-link {
  color: #16a34a ;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.back-link:hover {
  color: #15803d ;
  text-decoration: underline;
}

.back-link i {
  font-size: var(--text-lg);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .filter-sidebar {
    position: static;
    margin-bottom: 2rem;
  }
  
  .results-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .sort-controls {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 600px) {
  .search-page-header {
    padding: 2rem 0;
  }
  
  .search-page-header h1 {
    font-size: var(--text-4xl);
    font-family: var(--font-primary);
  }
  
  .chip-container {
    justify-content: center;
  }
}

/* Global styles */
body {
  font-family: var(--font-primary);
  background-color: #fafafa;
}

/* Override Materialize nav background */
nav {
  background-color: transparent ;
  background: transparent ;
}

/* Override Materialize nav background for main navigation */
nav:not(.breadcrumb-nav) {
  background-color: transparent ;
  background: transparent ;
  border: none ;
  box-shadow: none ;
}

/* Navbar link styling */
nav a,
.nav-wrapper a,
nav .nav-wrapper a {
  color: #9e9e9e; /* Light grey color */
}

nav a:hover,
.nav-wrapper a:hover,
nav .nav-wrapper a:hover {
  color: #757575; /* Slightly darker grey on hover */
}

/* Remove any borders from navbar */
.nav-extended {
  border: none ;
  box-shadow: none ;
}

.nav-wrapper {
  border: none ;
  width: 100% ;
  max-width: none ;
  padding: 0 20px ;
}

/* Center navbar links */
.nav-wrapper .center {
  display: flex ;
  justify-content: center ;
  align-items: center ;
  width: 100% ;
  margin: 0 ;
  position: absolute ;
  left: 0 ;
  top: 50% ;
  transform: translateY(-50%) ;
}

/* Position mobile menu trigger to the left */
.nav-wrapper .sidenav-trigger {
  position: absolute ;
  left: 20px ;
  top: 50% ;
  transform: translateY(-50%) ;
  z-index: 10 ;
}

/* Ad Container Styling */
.ad-container {
  margin: 1.5rem 0;
  text-align: center;
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid #e9ecef;
}

.ad-container.ad-blog_header,
.ad-container.ad-blog_footer {
  margin: 2rem 0;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
}

.ad-container.ad-blog_sidebar {
  margin: 0 0 1.5rem 0;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
}

.ad-container.ad-blog_content {
  margin: 2rem 0;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.75rem;
}

.ad-container.ad-blog_list_between {
  margin: 1.5rem 0;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
}

.ad-label {
  margin-bottom: 0.5rem;
  font-size: var(--text-xs);
  font-family: var(--font-primary);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.ad-placeholder {
  background-color: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 0.5rem;
  padding: 2rem;
  text-align: center;
  color: #6c757d;
}

.ad-placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.ad-placeholder-icon {
  font-size: var(--text-4xl);
  color: #adb5bd;
}

.ad-placeholder-text {
  font-size: var(--text-sm);
  font-family: var(--font-primary);
}

/* Share Buttons Styling */
.share-buttons-container {
  margin: 1rem 0;
}

.share-label {
  margin-bottom: 0.75rem;
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.share-btn {
  background-color: #16a34a;
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: none;
  cursor: pointer;
}

.share-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  color: white;
  text-decoration: none;
}

.share-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.3);
}

.copy-link-btn {
  background-color: #16a34a ;
}

.copy-link-btn:hover {
  background-color: #15803d ;
}

/* Social Media Specific Colors */
.share-btn[href*="facebook"] {
  background-color: #1877f2;
}

.share-btn[href*="facebook"]:hover {
  background-color: #166fe5;
}

.share-btn[href*="twitter"] {
  background-color: #1da1f2;
}

.share-btn[href*="twitter"]:hover {
  background-color: #1a91da;
}

.share-btn[href*="pinterest"] {
  background-color: #bd081c;
}

.share-btn[href*="pinterest"]:hover {
  background-color: #a00716;
}

.share-btn[href*="linkedin"] {
  background-color: #0077b5;
}

.share-btn[href*="linkedin"]:hover {
  background-color: #006ba1;
}

.share-btn[href*="whatsapp"] {
  background-color: #25d366;
}

.share-btn[href*="whatsapp"]:hover {
  background-color: #20ba5a;
}

.share-btn[href*="telegram"] {
  background-color: #0088cc;
}

.share-btn[href*="telegram"]:hover {
  background-color: #0077b3;
}

.share-btn[href*="mailto"] {
  background-color: #666666;
}

.share-btn[href*="mailto"]:hover {
  background-color: #555555;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
  .share-buttons {
    justify-content: center;
  }
  
  .share-btn {
    width: 36px;
    height: 36px;
  }
  
  .share-btn i {
    font-size: 16px ;
  }
}



/* Card hover effects */
.card.hoverable:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15) ;
}

/* Button styles */
.btn-small {
  border-radius: 20px;
  text-transform: none;
  font-weight: 500;
}

/* Chip styles */
.chip {
  border-radius: 16px;
  font-size: 0.8rem;
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Input field styles */
.input-field input:focus + label {
  color: #16a34a ;
}

.input-field input:focus {
  border-bottom: 1px solid #16a34a ;
  box-shadow: 0 1px 0 0 #16a34a ;
}

.input-field select:focus {
  border-bottom: 1px solid #16a34a ;
  box-shadow: 0 1px 0 0 #16a34a ;
}

/* Sidenav styles */
.sidenav {
  /* No background color */
  border: none ;
  box-shadow: none ;
}

.sidenav li a {
  color: #9e9e9e ; /* Light grey color */
  font-family: var(--font-primary);
}

.sidenav li a:hover {
  color: #757575 ; /* Slightly darker grey on hover */
}

/* Footer styles */
.page-footer {
  margin-top: 3rem;
}

.page-footer .container {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* ========================================
   GOOGLE ADS STYLING
   ======================================== */

/* Ad container base styles */
.ad-container {
  margin: 1rem 0;
  text-align: center;
  position: relative;
}

.ad-label {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Header banner ad (728x90) */
.ad-header_banner {
  margin: 1rem auto;
  max-width: 728px;
  min-height: 90px;
}

/* Sidebar ad (300x250) */
.ad-sidebar {
  position: sticky;
  top: 2rem;
  max-width: 300px;
  min-height: 250px;
  margin: 0 auto;
}

/* Footer banner ad (728x90) */
.ad-footer_banner {
  margin: 2rem auto;
  max-width: 728px;
  min-height: 90px;
}

/* In-content ad (300x250) */
.ad-in_content {
  margin: 2rem auto;
  max-width: 300px;
  min-height: 250px;
}

/* Between cards ad (300x250) */
.ad-between_cards {
  margin: 2rem auto;
  max-width: 300px;
  min-height: 250px;
}

/* Placeholder ad styles */
.ad-placeholder {
  border: 2px dashed #ccc;
  background: #f9f9f9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  transition: all 0.3s ease;
}

.ad-placeholder:hover {
  border-color: #16a34a;
  background: #f0f9f0;
}

.ad-placeholder-content {
  text-align: center;
  color: #666;
}

.ad-placeholder-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #16a34a;
}

.ad-placeholder-text {
  font-size: 0.9rem;
}

.ad-placeholder-text strong {
  color: #333;
  display: block;
  margin-bottom: 0.25rem;
}

.ad-placeholder-text small {
  color: #999;
  font-size: 0.75rem;
}

/* Debug info for placeholders */
.ad-debug-info {
  margin-top: 0.5rem;
  padding: 0.25rem;
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
  font-size: 0.75rem;
}

/* Admin controls */
.ad-admin-controls {
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  border-radius: 8px;
}

.ad-admin-controls .switch label input[type="checkbox"]:checked + .lever {
  background-color: #16a34a;
}

.ad-admin-controls .switch label input[type="checkbox"]:checked + .lever:after {
  background-color: white;
}

/* Responsive ad adjustments */
@media (max-width: 768px) {
  .ad-header_banner,
  .ad-footer_banner {
    max-width: 100%;
    margin: 1rem 0;
  }
  
  .ad-sidebar {
    position: static;
    margin: 1rem auto;
  }
  
  .ad-placeholder {
    min-height: 60px;
  }
  
  .ad-placeholder-icon {
    font-size: 1.5rem;
  }
  
  .ad-placeholder-text {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .ad-container {
    margin: 0.5rem 0;
  }
  
  .ad-placeholder {
    min-height: 50px;
    padding: 0.5rem;
  }
  
  .ad-placeholder-icon {
    font-size: 1.2rem;
  }
  
  .ad-placeholder-text {
    font-size: 0.75rem;
  }
}

/* Ad loading states */
.google-ad {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.google-ad[data-placement="sidebar"],
.google-ad[data-placement="in_content"],
.google-ad[data-placement="between_cards"] {
  min-height: 250px;
}

/* Ensure ads don't break layout */
.ad-container * {
  max-width: 100%;
  height: auto;
}

/* ========================================
   RECIPE CARD GRID LAYOUT
   ======================================== */

/* Recipe cards grid container */
.recipe-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Ensure all cards in a row have equal height */
.recipe-card-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.recipe-card-wrapper .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.recipe-card-wrapper .card .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Ensure the footer stays at the bottom */
.recipe-card-wrapper .card .card-content .row:last-child {
  margin-top: auto;
}

/* Responsive adjustments for recipe cards */
@media (max-width: 1200px) {
  .recipe-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .recipe-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
  }
}

@media (max-width: 600px) {
  .recipe-cards-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* Override Materialize's row/col system for recipe cards */
.recipe-cards-container .row {
  display: contents; /* This makes the row invisible and lets grid take over */
}

.recipe-cards-container .col {
  display: contents; /* This makes the col invisible and lets grid take over */
}

/* ========================================
   LIKE/DISLIKE SYSTEM STYLES
   ======================================== */

/* Like/Dislike button base styles */
.like-btn, .dislike-btn {
  color: #666 ;
  background: #f8f9fa ;
  border: 1px solid #e9ecef ;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-family: inherit;
  min-height: 2.5rem;
}

.like-btn:hover, .dislike-btn:hover {
  background-color: #f5f5f5 ;
  transform: translateY(-1px);
}

/* Active states */
.like-btn.active {
  color: #16a34a ;
  background-color: #dcfce7 ;
}

.dislike-btn.active {
  color: #dc2626 ;
  background-color: #fef2f2 ;
}

/* Like/Dislike container */
.like-dislike-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0;
}

/* Button icons */
.like-btn .like-icon,
.dislike-btn .dislike-icon {
  font-size: 1.125rem;
  transition: transform 0.2s ease;
}

.like-btn:hover .like-icon,
.dislike-btn:hover .dislike-icon {
  transform: scale(1.1);
}

/* Count styling */
.like-count, .dislike-count {
  font-weight: 500;
  min-width: 1.5rem;
  text-align: center;
}

/* Loading state */
.like-btn.loading, .dislike-btn.loading {
  opacity: 0.6;
  cursor: not-allowed;
}

.like-btn.loading .like-icon,
.dislike-btn.loading .dislike-icon {
  animation: spin 1s linear infinite;
}

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

/* Responsive adjustments */
@media (max-width: 600px) {
  .like-dislike-container {
    gap: 0.75rem;
  }
  
  .like-btn, .dislike-btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
  }
  
  .like-btn .like-icon,
  .dislike-btn .dislike-icon {
    font-size: 1rem;
  }
}

/* Blog Styles */
.blog-card {
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.blog-card .card-img-top {
    height: 200px;
    object-fit: cover;
}

.blog-meta {
    font-size: 0.9rem;
}

.blog-meta i {
    margin-right: 5px;
}

.blog-tags {
    margin-bottom: 1rem;
}

.blog-tags .chip {
    margin-right: 5px;
    margin-bottom: 5px;
}

.blog-post-header {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.blog-post-title {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* ========================================
   BLOG CONTENT TYPOGRAPHY - IMPROVED READABILITY
   ======================================== */

.blog-content {
    /* Base typography */
    font-family: var(--font-primary);
    font-size: 1.125rem; /* 18px - optimal reading size */
    line-height: 1.75; /* Improved line height for better readability */
    color: #2d3748; /* Darker text for better contrast */
    max-width: none; /* Allow full width within container */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Heading Hierarchy - Clear Visual Hierarchy */
.blog-content h1 {
    font-family: var(--font-display);
    font-size: 2.25rem; /* 36px */
    font-weight: 600;
    line-height: 1.2;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    color: #1a202c;
    letter-spacing: -0.025em;
}

.blog-content h2 {
    font-family: var(--font-display);
    font-size: 1.875rem; /* 30px */
    font-weight: 600;
    line-height: 1.3;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    color: #2d3748;
    letter-spacing: -0.025em;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.blog-content h3 {
    font-family: var(--font-display);
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    line-height: 1.4;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #2d3748;
    letter-spacing: -0.025em;
}

.blog-content h4 {
    font-family: var(--font-display);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    line-height: 1.4;
    margin-top: 1.75rem;
    margin-bottom: 0.875rem;
    color: #4a5568;
}

.blog-content h5 {
    font-family: var(--font-display);
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    line-height: 1.4;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #4a5568;
}

.blog-content h6 {
    font-family: var(--font-display);
    font-size: 1rem; /* 16px */
    font-weight: 600;
    line-height: 1.4;
    margin-top: 1.25rem;
    margin-bottom: 0.625rem;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Paragraph Styling - Improved Readability */
.blog-content p {
    margin-bottom: 1.75rem; /* Increased spacing between paragraphs */
    text-align: justify; /* Better text flow */
    hyphens: auto; /* Better word breaking */
    orphans: 3; /* Prevent orphaned lines */
    widows: 3; /* Prevent widowed lines */
}

/* First paragraph after heading - no top margin */
.blog-content h1 + p,
.blog-content h2 + p,
.blog-content h3 + p,
.blog-content h4 + p,
.blog-content h5 + p,
.blog-content h6 + p {
    margin-top: 0;
}

/* List Styling - Better Indentation and Spacing */
.blog-content ul,
.blog-content ol {
    margin-bottom: 1.75rem;
    padding-left: 2.5rem; /* Increased indentation */
    margin-left: 0;
}

.blog-content ul {
    list-style-type: disc;
    list-style-position: outside;
}

.blog-content ol {
    list-style-type: decimal;
    list-style-position: outside;
}

.blog-content li {
    margin-bottom: 0.75rem; /* Increased spacing between list items */
    display: list-item;
    line-height: 1.6; /* Slightly tighter line height for lists */
    padding-left: 0.5rem; /* Additional padding for better readability */
}

/* Nested lists */
.blog-content ul ul,
.blog-content ol ol,
.blog-content ul ol,
.blog-content ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 2rem;
}

.blog-content ul ul {
    list-style-type: circle;
}

.blog-content ul ul ul {
    list-style-type: square;
}

/* Blockquotes - Better Styling */
.blog-content blockquote {
    font-size: 1.125rem;
    line-height: 1.7;
    font-style: italic;
    color: #4a5568;
    border-left: 4px solid #16a34a;
    padding-left: 1.5rem;
    margin: 2rem 0;
    background-color: #f7fafc;
    padding: 1.5rem;
    border-radius: 0.5rem;
    position: relative;
}

.blog-content blockquote::before {
    content: '"';
    font-size: 4rem;
    color: #16a34a;
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    font-family: serif;
    opacity: 0.3;
}

/* Code Styling - Better Readability */
.blog-content code {
    background-color: #f1f5f9;
    color: #e11d48;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875em;
    border: 1px solid #e2e8f0;
}

.blog-content pre {
    background-color: #1a202c;
    color: #e2e8f0;
    padding: 1.5rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.75rem 0;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    border: 1px solid #2d3748;
}

.blog-content pre code {
    background: none;
    color: inherit;
    padding: 0;
    border: none;
    font-size: inherit;
}

/* Link Styling - Better Contrast and Readability */
.blog-content a {
    color: #16a34a;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
    font-weight: 500;
}

.blog-content a:hover {
    color: #15803d;
    border-bottom-color: #16a34a;
    text-decoration: none;
}

/* Text Emphasis */
.blog-content strong {
    font-weight: 700;
    color: #1a202c;
}

.blog-content em {
    font-style: italic;
    color: #4a5568;
}

/* Horizontal Rules */
.blog-content hr {
    border: none;
    height: 2px;
    background: linear-gradient(to right, transparent, #e2e8f0, transparent);
    margin: 3rem 0;
}

/* Image Styling */
.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.75rem 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Table Styling */
.blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75rem 0;
    font-size: 0.875rem;
}

.blog-content th,
.blog-content td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.blog-content th {
    background-color: #f7fafc;
    font-weight: 600;
    color: #2d3748;
}

/* Definition Lists */
.blog-content dl {
    margin: 1.75rem 0;
}

.blog-content dt {
    font-weight: 600;
    color: #2d3748;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.blog-content dd {
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: #4a5568;
}

.blog-sidebar .card {
    margin-bottom: 1.5rem;
}

.blog-sidebar .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 500;
}

.blog-featured-image {
    text-align: center;
}

.blog-featured-image img {
    max-height: 400px;
    width: 100%;
    object-fit: cover;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .blog-post-title {
        font-size: 2rem;
    }
    
    .blog-content {
        font-size: 1rem;
    }
    
    .blog-content h1 {
        font-size: 1.75rem;
    }
    
    .blog-content h2 {
        font-size: 1.5rem;
    }
    
    .blog-content h3 {
        font-size: 1.25rem;
    }
}

/* ========================================
   RECIPE CARD CLICKABLE STYLING
   ======================================== */

.recipe-card {
    transition: all 0.3s ease;
}

.recipe-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    text-decoration: none;
    color: inherit;
}

/* Prevent like/dislike buttons from triggering card click */
.like-btn, .dislike-btn {
    pointer-events: auto;
}

/* Prevent buy buttons from triggering card click */
.amazon-text-link {
    pointer-events: auto;
}

/* ========================================
   AMAZON AFFILIATE LINKS STYLING
   ======================================== */

/* Amazon ingredient links in blog content */
.blog-content .amazon-blog-ingredient {
    color: #16a34a;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
    position: relative;
}

.blog-content .amazon-blog-ingredient:hover {
    color: #15803d;
    border-bottom-color: #16a34a;
    text-decoration: none;
}

.amazon-blog-ingredient::after {
    content: "buy";
    font-size: 0.7em;
    font-weight: 600;
    margin-left: 0.2rem;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    vertical-align: super;
    color: #ff9500;
}

.amazon-blog-ingredient:hover::after {
    opacity: 1;
    color: #e6850e;
}

/* Amazon buy now buttons */
.blog-content .amazon-buy-now-btn {
    background-color: #ff9500;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.blog-content .amazon-buy-now-btn:hover {
    background-color: #e6850e;
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
}

.amazon-buy-now-btn::before {
    content: "🛒";
    font-size: 1em;
}

/* Amazon ingredient links in general */
.amazon-ingredient-link {
    color: #16a34a;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.amazon-ingredient-link:hover {
    color: #15803d;
    border-bottom-color: #16a34a;
    text-decoration: none;
}

/* Special styling for equipment and glassware */
.blog-content .amazon-blog-ingredient[href*="glassware"],
.blog-content .amazon-blog-ingredient[href*="shaker"],
.blog-content .amazon-blog-ingredient[href*="muddler"],
.blog-content .amazon-blog-ingredient[href*="jigger"],
.blog-content .amazon-blog-ingredient[href*="strainer"] {
    color: #7c3aed;
    font-weight: 600;
}

.blog-content .amazon-blog-ingredient[href*="glassware"]:hover,
.blog-content .amazon-blog-ingredient[href*="shaker"]:hover,
.blog-content .amazon-blog-ingredient[href*="muddler"]:hover,
.blog-content .amazon-blog-ingredient[href*="jigger"]:hover,
.blog-content .amazon-blog-ingredient[href*="strainer"]:hover {
    color: #6d28d9;
}

/* Special styling for ingredients */
.blog-content .amazon-blog-ingredient[href*="juice"],
.blog-content .amazon-blog-ingredient[href*="syrup"],
.blog-content .amazon-blog-ingredient[href*="honey"],
.blog-content .amazon-blog-ingredient[href*="sugar"] {
    color: #dc2626;
    font-weight: 500;
}

.blog-content .amazon-blog-ingredient[href*="juice"]:hover,
.blog-content .amazon-blog-ingredient[href*="syrup"]:hover,
.blog-content .amazon-blog-ingredient[href*="honey"]:hover,
.blog-content .amazon-blog-ingredient[href*="sugar"]:hover {
    color: #b91c1c;
}

/* Special styling for fresh ingredients */
.blog-content .amazon-blog-ingredient[href*="fresh"],
.blog-content .amazon-blog-ingredient[href*="mint"],
.blog-content .amazon-blog-ingredient[href*="lime"],
.blog-content .amazon-blog-ingredient[href*="lemon"],
.blog-content .amazon-blog-ingredient[href*="ginger"] {
    color: #059669;
    font-weight: 500;
}

.blog-content .amazon-blog-ingredient[href*="fresh"]:hover,
.blog-content .amazon-blog-ingredient[href*="mint"]:hover,
.blog-content .amazon-blog-ingredient[href*="lime"]:hover,
.blog-content .amazon-blog-ingredient[href*="lemon"]:hover,
.blog-content .amazon-blog-ingredient[href*="ginger"]:hover {
    color: #047857;
}

/* Ensure the "buy" superscript appears for all blog ingredient links */
.amazon-blog-ingredient[href*="glassware"]::after,
.amazon-blog-ingredient[href*="shaker"]::after,
.amazon-blog-ingredient[href*="muddler"]::after,
.amazon-blog-ingredient[href*="jigger"]::after,
.amazon-blog-ingredient[href*="strainer"]::after,
.amazon-blog-ingredient[href*="juice"]::after,
.amazon-blog-ingredient[href*="syrup"]::after,
.amazon-blog-ingredient[href*="honey"]::after,
.amazon-blog-ingredient[href*="sugar"]::after,
.amazon-blog-ingredient[href*="fresh"]::after,
.amazon-blog-ingredient[href*="mint"]::after,
.amazon-blog-ingredient[href*="lime"]::after,
.amazon-blog-ingredient[href*="lemon"]::after,
.amazon-blog-ingredient[href*="ginger"]::after {
    content: "buy";
    font-size: 0.7em;
    font-weight: 600;
    margin-left: 0.2rem;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    vertical-align: super;
    color: #ff9500;
}