/*
Theme Name:         Vancity Digital Learning Hub - Reskin (Tailwind)
Description:        Custom theme based on 2025 Figma reskin design for Vancity Digital Learning Hub with Tailwind CSS
Version:            2.0.0
Author:             chrisandrew.cl & jucilaine@fiercefeathers.com
*/

/* Import Google Fonts for Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Import Season VF Trial font */
@font-face {
  font-family: 'Season VF Trial';
  src: url('./assets/fonts/SeasonCollectionVF.woff2') format('woff2'),
       url('./assets/fonts/SeasonCollectionVF.woff') format('woff');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Season VF TRIAL';
  src: url('./assets/fonts/SeasonCollectionVF.woff2') format('woff2'),
       url('./assets/fonts/SeasonCollectionVF.woff') format('woff');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Note: Tailwind CDN handles base, components, and utilities automatically */

/* Base Styles */
:root {
  --color-primary: #e8054c;
  --color-secondary: #00c6c7;
  --color-accent: #c2bc00;
  
  /* Season Font - Text Size Variables */
  --text-6xl: 32px;
  --text-6xl--line-height: 48px;
  --text-7xl: 38px;
  --text-7xl--line-height: 57px;
  --text-8xl: 44px;
  --text-8xl--line-height: 66px;
  --text-9xl: 48px;
  --text-9xl--line-height: 58px;
  
  /* Season Font - Font Weight Variables */
  --font-weight-normal: 550;
  --font-weight-medium: 500;
  --font-weight-semibold: 650;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
}

body {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  font-variation-settings: "wght" var(--font-weight-medium), "SERF" 0;
}

/* ============================================================================
   SEASON FONT - HEADING OVERRIDES (Global)
   Using font-variation-settings for variable font control
   ============================================================================ */

/* H1 - Default Style - Desktop: Seasons VF Serif Bold 38px */
h1 {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif !important;
  font-size: 38px !important;
  line-height: 1.5em !important;
  font-variation-settings: "wght" var(--font-weight-bold), "SERF" 100 !important;
  color: #000 !important;
}

/* H2 - Default Style - Desktop: Seasons VF Serif Bold 32px */
h2 {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif !important;
  font-size: 32px !important;
  line-height: 1.5em !important;
  font-variation-settings: "wght" var(--font-weight-bold), "SERF" 100 !important;
  color: #000 !important;
}

/* H3 - Default Style - Desktop: Seasons VF Serif Semibold 22px */
h3 {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif !important;
  font-size: 22px !important;
  line-height: 1.5em !important;
  font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 100 !important;
  color: #000 !important;
}

/* H4 - Desktop: Seasons VF Serif Semibold 22px */
h4 {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif !important;
  font-size: 22px !important;
  line-height: 1.5em !important;
  font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 100 !important;
  color: #000 !important;
}

/* H5, H6 - Same as H4 */
h5, h6 {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif !important;
  font-size: 22px !important;
  line-height: 1.5em !important;
  font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 100 !important;
  color: #000 !important;
}

h4.text-xl, h5.text-xl, h6.text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
}

footer h4, footer h5, footer h6 {
  color: white !important;
}

/* Paragraph - Body copy: Seasons sans medium 16px */
p {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  font-variation-settings: "wght" var(--font-weight-medium), "SERF" 0;
}

/* Secondary text / captions: Seasons VF sans semibold 14px */
.caption, .secondary-text, figcaption, .post-meta, .search-result-meta {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5em !important;
  font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 0 !important;
}

/* Footnotes / disclaimers: Seasons VF sans medium 14px */
.footnote, .disclaimer, small {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5em !important;
  font-variation-settings: "wght" var(--font-weight-medium), "SERF" 0 !important;
}

/* ============================================================================
   ROBUST TYPOGRAPHY OVERRIDES - Apply to common containers
   ============================================================================ */
/* Ensure body text styling applies to entry content, articles, main content areas */
/* Robust targeting for all contexts including tabs, accordions, etc. */
.entry-content p,
.prose p,
article p,
main p,
.content p,
.post-content p,
.ba-tabpanel p,
.ba-accordion-content p,
.ba-accordion-inner p,
.article-intro p,
.page-intro p {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  font-variation-settings: "wght" var(--font-weight-medium), "SERF" 0;
}

/* Ensure headings are properly styled in all contexts */
.entry-content h1, .prose h1, article h1, main h1, .content h1 {
  font-size: 38px !important;
  line-height: 1.5em !important;
  font-variation-settings: "wght" var(--font-weight-bold), "SERF" 100 !important;
}

.entry-content h2, .prose h2, article h2, main h2, .content h2 {
  font-size: 32px !important;
  line-height: 1.5em !important;
  font-variation-settings: "wght" var(--font-weight-bold), "SERF" 100 !important;
}

.entry-content h3, .prose h3, article h3, main h3, .content h3 {
  font-size: 22px !important;
  line-height: 1.5em !important;
  font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 100 !important;
}

/* Homepage sections - Ensure H2 titles maintain serif font and bold weight */
main section h2 {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif !important;
  font-variation-settings: "wght" var(--font-weight-bold), "SERF" 100 !important;
}

/* Hero/Featured Posts sections - Use black (900) weight for emphasis */
main > section.flex-nowrap h2,
.hero-mobile-slider-section h2 {
  font-variation-settings: "wght" var(--font-weight-black), "SERF" 100 !important;
}

/* Featured posts columns - Make H2s H3-sized (smaller than search column H2) */
main > section.flex-nowrap > div:last-child h2,
.hero-mobile-slider-section .swiper-slide:not(:first-child) h2 {
  font-size: 22px !important;
  line-height: 1.5em !important;
}

/* "What would you like to learn about" section - H4 cards use sans serif */
main section h4 {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif !important;
  font-size: 22px !important;
  font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 0 !important;
}

/* Category card links on front page - force no underline on text */
a.bg-gray-50.rounded-\[20px\] h4,
a[class*="bg-gray-50"][class*="rounded"] h4,
.grid a[class*="bg-gray-50"] h4 {
  text-decoration: none !important;
}

/* Ensure the link itself and all text inside has no underline */
a.bg-gray-50.rounded-\[20px\],
a[class*="bg-gray-50"][class*="rounded"],
.grid a[class*="bg-gray-50"] {
  text-decoration: none !important;
}

a.bg-gray-50.rounded-\[20px\] *,
a[class*="bg-gray-50"][class*="rounded"] *,
.grid a[class*="bg-gray-50"] * {
  text-decoration: none !important;
}

/* Popular Posts section - Match category cards (sans serif) */
#popular-posts-container h4,
.popular-swiper h4 {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif !important;
  font-size: 22px !important;
  font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 0 !important;
  font-weight: 600 !important;
}

.entry-content h4, .prose h4, article h4, main h4, .content h4 {
  font-size: 22px !important;
  line-height: 1.5em !important;
  font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 100 !important;
}

.entry-content h5, .prose h5, article h5, main h5, .content h5,
.entry-content h6, .prose h6, article h6, main h6, .content h6 {
  font-size: 22px !important;
  line-height: 1.5em !important;
  font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 100 !important;
}

/* ============================================================================
   MOBILE TYPOGRAPHY ADJUSTMENTS
   ============================================================================ */
@media (max-width: 768px) {
  /* H1 Mobile: Seasons VF Serif Bold 30px */
  h1, .entry-content h1, .prose h1, article h1, main h1, .content h1 {
    font-size: 30px !important;
    line-height: 1.5em !important;
    font-variation-settings: "wght" var(--font-weight-bold), "SERF" 100 !important;
  }
  
  /* H2 Mobile: Seasons VF Serif Bold 26px */
  h2, .entry-content h2, .prose h2, article h2, main h2, .content h2 {
    font-size: 26px !important;
    line-height: 1.5em !important;
    font-variation-settings: "wght" var(--font-weight-bold), "SERF" 100 !important;
  }
  
  /* Homepage sections on mobile - Maintain serif and bold for H2 */
  main section h2 {
    font-variation-settings: "wght" var(--font-weight-bold), "SERF" 100 !important;
  }
  
  /* Hero/Featured Posts sections on mobile - Maintain black (900) weight */
  main > section.flex-nowrap h2,
  .hero-mobile-slider-section h2 {
    font-variation-settings: "wght" var(--font-weight-black), "SERF" 100 !important;
  }
  
  /* Featured posts columns on mobile - Keep H3-sized (same as desktop) */
  main > section.flex-nowrap > div:last-child h2,
  .hero-mobile-slider-section .swiper-slide:not(:first-child) h2 {
    font-size: 22px !important;
    line-height: 1.5em !important;
  }
  
  /* H3 Mobile: Seasons VF Serif Semibold 22px */
  h3, .entry-content h3, .prose h3, article h3, main h3, .content h3 {
    font-size: 22px !important;
    line-height: 1.5em !important;
    font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 100 !important;
  }
  
  /* H4 Mobile: Seasons VF Serif Medium 20px */
  h4, .entry-content h4, .prose h4, article h4, main h4, .content h4 {
    font-size: 20px !important;
    line-height: 1.5em !important;
    font-variation-settings: "wght" var(--font-weight-medium), "SERF" 100 !important;
  }
  
  /* Homepage sections H4s on mobile - maintain semibold sans serif */
  main section h4 {
    font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 0 !important;
  }
  
  /* H5, H6 Mobile: Same as H4 */
  h5, h6, .entry-content h5, .prose h5, article h5, main h5, .content h5,
  .entry-content h6, .prose h6, article h6, main h6, .content h6 {
    font-size: 20px !important;
    line-height: 1.5em !important;
    font-variation-settings: "wght" var(--font-weight-medium), "SERF" 100 !important;
  }
  
  /* Body Mobile: Seasons VF sans medium 16px (stays the same) */
  body, p, .entry-content p, .prose p, article p, main p, .content p, .post-content p {
    font-size: 16px !important;
    line-height: 1.5em !important;
    font-variation-settings: "wght" var(--font-weight-medium), "SERF" 0 !important;
  }
  
  /* Captions/labels Mobile: Seasons VF sans semibold 14px (stays the same) */
  .caption, .secondary-text, figcaption, .post-meta, .search-result-meta {
    font-size: 14px !important;
    line-height: 1.5em !important;
    font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 0 !important;
  }
  
  /* Footnotes Mobile: Seasons VF sans medium 14px (stays the same) */
  .footnote, .disclaimer, small {
    font-size: 14px !important;
    line-height: 1.5em !important;
    font-variation-settings: "wght" var(--font-weight-medium), "SERF" 0 !important;
  }
  
  /* Accordion header Mobile: Seasons VF Sans Medium 20px */
  .ba-accordion-trigger {
    font-size: 20px !important;
    line-height: 1.5em !important;
    font-variation-settings: "wght" var(--font-weight-medium), "SERF" 0 !important;
  }
  
  /* FAQ/Resources section on mobile - Maintain font weight with sans serif */
  .faq-swiper h4 {
    font-size: 22px !important;
    font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 0 !important;
    font-weight: 600 !important;
  }
  
  /* Popular Posts section on mobile - Match category cards (sans serif) */
  .popular-swiper h4 {
    font-size: 22px !important;
    font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 0 !important;
    font-weight: 600 !important;
  }
}

/* ============================================================================
   UTILITY CLASSES - Season Font Style Variants
   ============================================================================ */

.style-h1 {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif !important;
  font-size: var(--text-8xl) !important;
  line-height: var(--text-8xl--line-height) !important;
  font-variation-settings: "wght" var(--font-weight-black), "SERF" 100 !important;
  color: #000 !important;
}

.style-h1-special {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif !important;
  font-size: var(--text-9xl) !important;
  line-height: var(--text-9xl--line-height) !important;
  font-variation-settings: "wght" var(--font-weight-black), "SERF" 100 !important;
  color: #000 !important;
}

.style-h2 {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif !important;
  font-size: var(--text-7xl) !important;
  line-height: var(--text-7xl--line-height) !important;
  font-variation-settings: "wght" var(--font-weight-black), "SERF" 100 !important;
  color: #000 !important;
}

.style-h3 {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif !important;
  font-size: var(--text-6xl) !important;
  line-height: var(--text-6xl--line-height) !important;
  font-variation-settings: "wght" var(--font-weight-black), "SERF" 100 !important;
  color: #000 !important;
}

/* Media elements display */
audio, canvas, embed, iframe, img, object, svg, video {
  display: inline-block !important;
}

iframe {
  margin: 20px 0;
}

/* Custom gradient backgrounds */
.bg-gradient-primary {
  background: linear-gradient(90deg, #E8054C 0%, #E8054C 79.69%, #EE5684 89.62%, #F499B6 100%);
}

.bg-gradient-hero-secondary {
  background: linear-gradient(to bottom, rgba(0,198,199,0) 5.765%, rgba(0,198,199,0.767) 36.906%, #00c6c7 95.228%);
}

.bg-gradient-hero-accent {
  background: linear-gradient(to bottom, rgba(194,188,0,0) 13.599%, rgba(194,188,0,0.767) 42.151%, #c2bc00 95.625%);
}

/* Season VF font utility */
.font-season {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif;
}

/* Custom animations */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out forwards;
}

.animate-slide-in-left {
  animation: slideInLeft 0.3s ease-out forwards;
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.3s ease-out forwards;
}

/* Stagger animation delays */
.animate-delay-100 {
  animation-delay: 100ms;
}

.animate-delay-200 {
  animation-delay: 200ms;
}

.animate-delay-300 {
  animation-delay: 300ms;
}

.animate-delay-400 {
  animation-delay: 400ms;
}

/* Search Modal Active State */
#search-modal.active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Search Overlay Active State */
#search-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Banner Search Panel Active State */
#banner-search-panel.active {
  right: 0 !important;
}

/* WordPress Admin Bar Adjustments */
.admin-bar .header-fixed {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  .admin-bar .header-fixed {
    top: 46px !important;
  }
}

/* ============================================================================
   TABS COMPONENT STYLES (ba-tabs) - Figma Design
   ============================================================================ */

.ba-tabs {
  margin: 2rem 0;
  position: relative;
}

/* Full-width horizontal line container */
.ba-tabs__nav-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 1.5rem;
}

/* Horizontal separator line spanning full width - REMOVED */
/* .ba-tabs__nav-wrapper::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: #E7E6EB;
  z-index: 0;
  pointer-events: none;
} */

/* Tab navigation container with gray background */
.ba-tabs__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  position: relative;
  padding: 0;
  background: #E7E6EB;
  border-radius: 999px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.ba-tab {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  gap: 8px;
  min-width: 120px;
  height: 44px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  
  /* Typography */
  font-family: 'Season VF TRIAL', 'Season VF Trial', serif, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #000000;
}

/* Active tab - black background with white text */
.ba-tab.is-active {
  background: #000000;
  color: #FFFFFF;
  border-radius: 999px;
}

/* Hover state for inactive tabs */
.ba-tab:not(.is-active):hover {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
}

/* Tab panels */
.ba-tabpanel {
  display: none;
  animation: fadeIn 0.3s ease-out;
}

.ba-tabpanel.is-active {
  display: block;
}

/* Mobile responsiveness for tabs - same as desktop */
/* No mobile-specific overrides needed - tabs look the same on all screen sizes */

/* ============================================================================
   ACCORDION COMPONENT STYLES - Figma Design (No side borders, no rounded)
   ============================================================================ */

.ba-accordion {
  margin: 2rem auto;
  background: white;
  max-width: 1025px !important;
  width: 100%;
  /* NO border, NO border-radius */
}

.ba-accordion-item {
  border-bottom: 1px solid #E7E6EB;
}

.ba-accordion-item:last-child {
  border-bottom: none;
}

.ba-accordion-trigger {
  background: white;
  border: none;
  border-bottom: 1px solid #E7E6EB;
  cursor: pointer;
  outline: none;
  width: 100%;
  transition: background-color 0.2s ease;
  /* Accordion header: Seasons VF Sans Medium 22px */
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif !important;
  font-size: 22px !important;
  line-height: 1.5em !important;
  font-variation-settings: "wght" var(--font-weight-medium), "SERF" 0 !important;
  color: #000 !important;
}

.ba-accordion-trigger:focus {
  outline: none;
}

.ba-accordion-trigger:hover {
  background: #fafafa;
}

/* Accordion icon container */
.ba-accordion-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

/* Accordion icon toggle - + to − with smooth fade transition */
.ba-accordion-plus,
.ba-accordion-minus {
  transition: opacity 0.25s ease, visibility 0.25s ease;
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
  display: block !important; /* Override any hidden class */
  width: 24px !important;
  height: 24px !important;
}

.ba-accordion-plus {
  opacity: 1;
  visibility: visible;
}

.ba-accordion-minus {
  opacity: 0;
  visibility: hidden;
}

.ba-accordion-item.is-open .ba-accordion-plus {
  opacity: 0;
  visibility: hidden;
}

.ba-accordion-item.is-open .ba-accordion-minus {
  opacity: 1;
  visibility: visible;
}

.ba-accordion-item.is-open .ba-accordion-content {
  max-height: 5000px;
}

/* Accordion animations - smooth opening/closing */
.ba-accordion-content {
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              padding 0.3s ease;
  overflow: hidden;
}

/* ============================================================================
   TABLES WITH IMAGE/TEXT LAYOUT - Figma Design (Border-bottom only)
   ============================================================================ */

.entry-content table,
.ba-tabpanel table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  border: none;
}

.entry-content table td,
.ba-tabpanel table td {
  padding: 1.5rem;
  vertical-align: top;
  border: none;
  width: auto !important; /* Override inline widths */
  max-width: 50% !important; /* Force 2-col layout */
  box-sizing: border-box !important;
}

/* Override any inline style attributes on td elements */
.entry-content table td[style*="width"],
.ba-tabpanel table td[style*="width"] {
  width: auto !important;
  max-width: 50% !important;
}

/* Image column (left) - equal width in 2-col layout */
.entry-content table td:first-child,
.ba-tabpanel table td:first-child {
  width: 50% !important;
  max-width: 50% !important;
}

/* Text column (right) - equal width in 2-col layout */
.entry-content table td:last-child,
.ba-tabpanel table td:last-child {
  width: 50% !important;
  max-width: 50% !important;
  padding-left: 2rem;
}

.entry-content table td img,
.ba-tabpanel table td img {
  width: 100%;
  height: auto;
  max-width: 550px;
  max-height: 550px;
  border-radius: 20px;
  object-fit: cover;
  margin: 20px 0;
}

/* Table rows - border-bottom only */
.entry-content table tr,
.ba-tabpanel table tr {
  border-bottom: 1px solid #E7E6EB;
}

/* Remove border from last table row */
.entry-content table tr:last-child,
.ba-tabpanel table tr:last-child {
  border-bottom: none;
}

/* Mobile responsiveness for tables */
@media screen and (max-width: 768px) {
  .entry-content table,
  .ba-tabpanel table {
    display: block;
  }
  
  .entry-content table tbody,
  .ba-tabpanel table tbody {
    display: block;
  }
  
  .entry-content table tr,
  .ba-tabpanel table tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 1.5rem;
  }
  
  .entry-content table td,
  .ba-tabpanel table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Override inline styles on mobile */
  .entry-content table td[style*="width"],
  .ba-tabpanel table td[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .entry-content table td:first-child,
  .ba-tabpanel table td:first-child,
  .entry-content table td:last-child,
  .ba-tabpanel table td:last-child {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
  }
  
  /* Mobile: Images should appear above text in 1 column layout */
  .entry-content table tr,
  .ba-tabpanel table tr {
    display: flex;
    flex-direction: column;
  }
  
  /* Ensure images appear first (above text) on mobile */
  .entry-content table td:first-child,
  .ba-tabpanel table td:first-child {
    order: 1;
  }
  
  .entry-content table td:last-child,
  .ba-tabpanel table td:last-child {
    order: 2;
  }
}

/* ============================================================================
   FOOTER SEARCH TRIGGER BUTTON
   ============================================================================ */

footer [data-search-trigger-overlay] {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  background: #ffffff;
  color: #000000;
  border: none;
  border-radius: 999px;
  padding: 14px 24px 14px 48px;
  width: 140px;
  height: 48px;
  font-family: 'Season VF TRIAL', 'Season VF Trial', serif, sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

footer [data-search-trigger-overlay]:hover {
  background: #787878;
  transform: translateY(-1px);
}

footer [data-search-trigger-overlay] svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  stroke: #000000;
}

footer [data-search-trigger-overlay] span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================================
   BACK TO TOP BUTTON
   ============================================================================ */

#ba-back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #e8054c;
  color: white;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(232, 5, 76, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
}

#ba-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

#ba-back-to-top:hover {
  background: #c70440;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(232, 5, 76, 0.4);
}

#ba-back-to-top:active {
  transform: translateY(0);
}

/* Mobile responsiveness for back to top */
@media screen and (max-width: 640px) {
  #ba-back-to-top {
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    font-size: 12px;
  }
}

/* ============================================================================
   PAGE AND POST LAYOUT (Inside Pages Only)
   ============================================================================ */

/* Add top padding to main content on inside pages to account for header */
.single-post.main-content,
.page-template.main-content {
  padding-top: 200px;
}

/* Responsive padding adjustments */
@media screen and (max-width: 768px) {
  .single-post.main-content,
  .page-template.main-content {
    padding-top: 150px;
  }
}

@media screen and (max-width: 480px) {
  .single-post.main-content,
  .page-template.main-content {
    padding-top: 120px;
  }
}

/* H1 for single posts and pages - using global Season font variables */
/* These inherit from global h1 but add specific layout styles */
.single-post h1,
.page-template h1 {
  text-align: center !important;
  margin-bottom: 1.5rem !important;
  /* Font styles inherited from global h1 declaration above */
}

/* Mobile: Reduce h1 font size for inner posts and pages */
@media screen and (max-width: 768px) {
  .single-post h1,
  .page-template h1 {
    font-size: 28px !important;
    line-height: 36px !important;
  }
}

@media screen and (max-width: 480px) {
  .single-post h1,
  .page-template h1 {
    font-size: 24px !important;
    line-height: 32px !important;
  }
}

/* Intro text styling for inside pages */
.single-post .article-intro,
.page-template .page-intro {
  /* text-align removed - inherits from WYSIWYG alignment */
  font-size: 1.125rem;
  line-height: 1.75;
  color: #374151;
  margin-bottom: 2rem;
}

/* List items within article-intro use same size as intro paragraphs (16px) */
.single-post .article-intro ul li,
.single-post .article-intro ol li,
.page-template .page-intro ul li,
.page-template .page-intro ol li {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif;
  font-size: 16px; /* Match intro paragraph size (same as body text) */
  line-height: 1.5em; /* Match paragraph line-height */
  font-variation-settings: "wght" var(--font-weight-medium), "SERF" 0; /* Match paragraph weight */
  color: #374151;
}

/* Responsive adjustments for intro text only */
/* H1 font sizes now inherit from global Season font variables */
@media screen and (max-width: 768px) {
  .single-post .article-intro,
  .page-template .page-intro {
    font-size: 1rem;
  }
  
  /* List items in intro use paragraph size (16px stays same on mobile) */
  .single-post .article-intro ul li,
  .single-post .article-intro ol li,
  .page-template .page-intro ul li,
  .page-template .page-intro ol li {
    font-size: 16px; /* Same as paragraph size */
  }
}

@media screen and (max-width: 480px) {
  .single-post .article-intro,
  .page-template .page-intro {
    font-size: 0.875rem;
  }
  
  /* List items in intro use paragraph size (16px stays same on small mobile) */
  .single-post .article-intro ul li,
  .single-post .article-intro ol li,
  .page-template .page-intro ul li,
  .page-template .page-intro ol li {
    font-size: 16px; /* Same as paragraph size */
  }
}

/* ============================================================================
   LINKS WRAPPER - In-page Navigation Menu
   ============================================================================ */

.links-wrapper {
  width: 100% !important;
  max-width: 800px !important; /* Increased from 500px to allow horizontal scaling */
  margin: 0 auto !important; /* Center the container */
  display: flex !important;
  flex-direction: row !important; /* Allow horizontal scaling */
  flex-wrap: wrap !important; /* Allow wrapping when needed */
  justify-content: flex-start !important; /* Align to start for better horizontal layout */
  align-items: flex-start !important; /* Align to top when wrapping */
  gap: 24px !important; /* Space between content-links containers */
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}

.content-links {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 24px !important;
  max-width: 800px !important; /* Increased from 500px to match links-wrapper */
  width: auto !important; /* Allow containers to size based on content */
  min-width: 0 !important; /* Allow shrinking if needed */
  flex: 0 1 auto !important; /* Don't grow, can shrink, auto basis */
}

.content-links a {
  /* Auto layout */
  display: flex !important;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 24px 12px 16px;
  gap: 8px;
  
  /* Sizing */
  min-width: 120px;
  width: auto;
  height: 44px;
  
  /* Style */
  background: #E7E6EB;
  border-radius: 999px;
  text-decoration: none !important;
  
  /* Typography */
  font-family: 'Season VF TRIAL', 'Season VF Trial', serif, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #000000 !important;
  
  /* Flex behavior */
  flex: none;
  flex-grow: 0;
  
  /* Transitions */
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.content-links a:hover {
  background: #d5d4d9;
  transform: translateY(-1px);
}

.content-links a:active {
  transform: translateY(0);
}

/* Active/highlighted link state */
.content-links a.mPS2id-highlight {
  background: #000000;
  color: #FFFFFF !important;
}

.content-links a.mPS2id-highlight:hover {
  background: #1a1a1a;
}

/* Remove <br> tags from affecting layout */
.content-links br {
  display: none;
}

/* Mobile responsiveness */
@media screen and (max-width: 640px) {
  /* On mobile, allow full width and stack vertically */
  .links-wrapper {
    flex-direction: column !important; /* Stack vertically on mobile */
    align-items: stretch !important; /* Stretch to full width */
    max-width: 100% !important;
  }
  
  .content-links {
    max-width: 100% !important;
    width: 100% !important; /* Full width on mobile */
    padding: 0 1rem !important;
    gap: 16px !important;
  }
  
  .content-links a {
    min-width: 100px !important;
    font-size: 13px !important;
    padding: 10px 20px 10px 14px !important;
    height: 40px !important;
  }
}

/* Desktop/Tablet: Ensure horizontal scaling */
@media screen and (min-width: 641px) {
  .links-wrapper {
    flex-direction: row !important; /* Horizontal layout on larger screens */
    flex-wrap: wrap !important; /* Allow wrapping if needed */
    max-width: 800px !important;
  }
  
  .content-links {
    width: auto !important; /* Size based on content */
    max-width: 800px !important; /* Increased to match links-wrapper */
  }
}

/* ============================================================================
   CONTENT PROSE STYLING (for post/page content)
   ============================================================================ */

.entry-content,
.prose {
  color: #374151;
  line-height: 1.75;
}

/* Paragraph styling - robust targeting for all contexts */
.entry-content p,
.prose p,
article p,
main p,
.content p,
.post-content p,
.ba-tabpanel p,
.ba-accordion-content p,
.ba-accordion-inner p {
  margin-bottom: 1.5rem;
  /* Ensure font styling cascades properly */
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  font-variation-settings: "wght" var(--font-weight-medium), "SERF" 0;
}

/* Paragraphs inside list items should have reduced/no bottom margin */
.entry-content li p,
.prose li p,
article li p,
main li p,
.content li p,
.ba-tabpanel li p,
.ba-accordion-content li p {
  margin-bottom: 0.75rem; /* Reduced margin for paragraphs inside lists */
  margin-top: 0.75rem; /* Add top margin for spacing after list item text */
}

/* First paragraph in list item should not have top margin */
.entry-content li > p:first-child,
.prose li > p:first-child,
article li > p:first-child,
main li > p:first-child,
.content li > p:first-child,
.ba-tabpanel li > p:first-child,
.ba-accordion-content li > p:first-child {
  margin-top: 0;
}

/* Last paragraph in list item should have reduced bottom margin */
.entry-content li > p:last-child,
.prose li > p:last-child,
article li > p:last-child,
main li > p:last-child,
.content li > p:last-child,
.ba-tabpanel li > p:last-child,
.ba-accordion-content li > p:last-child {
  margin-bottom: 0;
}

.entry-content h2,
.prose h2 {
  /* Font styles inherited from global h2 declaration */
  margin-top: 2.5rem !important;
  margin-bottom: 1.5rem !important;
}

.entry-content h3,
.prose h3 {
  /* Font styles inherited from global h3 declaration */
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
}

/* List containers - use container-based spacing (best practice) */
.entry-content ul,
.prose ul,
article ul,
main ul,
.content ul,
.ba-tabpanel ul,
.ba-accordion-content ul,
.ba-accordion-inner ul {
  list-style-type: disc;
  padding-left: 0rem;
  margin-top: 1.5rem; /* Container handles top spacing */
  margin-bottom: 1.5rem; /* Container handles bottom spacing */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.entry-content ol,
.prose ol,
article ol,
main ol,
.content ol,
.ba-tabpanel ol,
.ba-accordion-content ol,
.ba-accordion-inner ol {
  list-style-type: decimal;
  padding-left: 0rem;
  margin-top: 1.5rem; /* Container handles top spacing */
  margin-bottom: 1.5rem; /* Container handles bottom spacing */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* List items - minimal individual spacing, let container handle it */
.entry-content li,
.prose li,
article li,
main li,
.content li,
.ba-tabpanel li,
.ba-accordion-content li,
.ba-accordion-inner li {
  margin-bottom: 0.75rem; /* Reduced - container handles main spacing */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Last list item should not have bottom margin */
.entry-content ul > li:last-child,
.prose ul > li:last-child,
article ul > li:last-child,
main ul > li:last-child,
.content ul > li:last-child,
.entry-content ol > li:last-child,
.prose ol > li:last-child,
article ol > li:last-child,
main ol > li:last-child,
.content ol > li:last-child,
.ba-tabpanel ul > li:last-child,
.ba-tabpanel ol > li:last-child,
.ba-accordion-content ul > li:last-child,
.ba-accordion-content ol > li:last-child {
  margin-bottom: 0;
}

.entry-content a,
.prose a {
  color: #000;
  text-decoration: underline;
}

.entry-content a:hover,
.prose a:hover {
  color: #e8054c;
}

.entry-content strong,
.prose strong {
  font-weight: 700;
  color: #111827;
}

.entry-content em,
.prose em {
  font-style: italic;
}

/* ============================================================================
   GENERAL HYPERLINK STYLING - Black with underline, red on hover
   ============================================================================ */

/* Extend link styling to common content containers */
.entry-content a,
.prose a,
article a,
main a,
.content a,
.post-content a,
p a,
li a {
  color: #000;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.entry-content a:hover,
.prose a:hover,
article a:hover,
main a:hover,
.content a:hover,
.post-content a:hover,
p a:hover,
li a:hover {
  color: #e8054c;
}

/* ============================================================================
   OVERRIDE MAX-WIDTH CONSTRAINTS ON INSIDE PAGES
   Since container is already bounded at 1140px, remove inner constraints
   ============================================================================ */

/* Override max-w-* and other Tailwind max-width classes on posts/pages */
/* But ensure content doesn't stretch beyond container */
.single-post .entry-content,
.page-template .entry-content,
.single-post .prose,
.page-template .prose,
.single-post article .max-w-4xl,
.page-template article .max-w-4xl,
.single-post article .max-w-3xl,
.page-template article .max-w-3xl,
.single-post article .max-w-2xl,
.page-template article .max-w-2xl,
.single-post article .max-w-xl,
.page-template article .max-w-xl,
.single-post article .max-w-lg,
.page-template article .max-w-lg {
  max-width: 100% !important; /* Allow to fill container but not exceed */
  width: 100%;
  box-sizing: border-box;
}

/* Prevent any element from stretching beyond article container */
.single-post article [class*="max-w-"],
.page-template article [class*="max-w-"] {
  max-width: 100% !important; /* Constrain to parent, not none */
  width: 100%;
  box-sizing: border-box;
}

/* Ensure no element stretches full viewport width inappropriately */
.single-post .entry-content > *,
.page-template .entry-content > *,
.single-post .prose > *,
.page-template .prose > *,
.single-post article > *:not(.was-this-helpful-section):not(.yarpp-related),
.page-template article > *:not(.was-this-helpful-section):not(.yarpp-related) {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Keep the article container and main bounded at 1140px */
.single-post article,
.page-template article {
  max-width: 1140px;
  width: 100%;
}

/* But don't override max-w on YARPP section (has specific width) */
.yarpp-related {
  max-width: 1140px !important;
}

/* Accordion has 1025px width set in accordion section above */

/* ============================================================================
   CTA BUTTON (Go to Vancity) - Figma Design
   ============================================================================ */

.cta-wrapper {
  text-align: center;
  margin: 3rem 0;
}

.cta-button {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  gap: 8px;
  width: auto;
  min-width: 120px;
  height: 44px;
  background: #E7E6EB;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  
  /* Typography */
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #000000;
}

.cta-button:hover {
  background: #d5d4d9;
  transform: translateY(-1px);
}

/* ============================================================================
   WAS THIS HELPFUL SECTION - Figma Design (Full Width Breakout)
   ============================================================================ */

.was-this-helpful-section {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 3rem;
  margin-bottom: 0;
  padding: 0;
  border: none;
}

/* Full-width background container */
.was-this-helpful-section > div,
.was-this-helpful-section form {
  position: relative;
  width: 100%;
  min-height: 117px;
  background: #F8F7FA;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 35px 20px;
  border: none;
  margin-bottom: 0;
}

/* Question text - Not bolded */
.was-this-helpful-section h3,
.was-this-helpful-section p:first-child,
.was-this-helpful-section .helpful-question,
.was-this-helpful-section p,
.was-this-helpful-section span {
  font-family: 'Season VF TRIAL', 'Season VF Trial', serif, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #000000 !important;
  margin: 0 12px 0 0;
}

/* Button styling - Yes button (teal/cyan) - Figma Design */
.was-this-helpful-section button[type="submit"]:first-of-type,
.was-this-helpful-section .helpful-yes,
.was-this-helpful-section input[value*="Yes"],
.was-this-helpful-section button:first-of-type,
.was-this-helpful-section a:first-of-type,
.was-this-helpful-section [class*="yes"],
.was-this-helpful-section [class*="Yes"] {
  display: inline-flex !important;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 24px 12px 16px !important;
  gap: 8px;
  width: 120px !important;
  min-width: 120px !important;
  height: 48px !important;
  background: #C6FFFB !important;
  border-radius: 999px !important;
  border: none !important;
  cursor: pointer;
  position: relative;
  
  font-family: 'Season VF TRIAL', 'Season VF Trial', serif, sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  text-align: center !important;
  font-feature-settings: 'calt' off !important;
  color: #000000 !important;
  text-decoration: none !important;
  
  transition: all 0.2s ease;
}

/* Button styling - No button (pink) - Figma Design */
.was-this-helpful-section button[type="submit"]:last-of-type,
.was-this-helpful-section .helpful-no,
.was-this-helpful-section input[value*="No"],
.was-this-helpful-section button:last-of-type,
.was-this-helpful-section a:last-of-type,
.was-this-helpful-section [class*="no"]:not([class*="yes"]),
.was-this-helpful-section [class*="No"]:not([class*="Yes"]) {
  display: inline-flex !important;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 24px 12px 16px !important;
  gap: 8px;
  width: 120px !important;
  min-width: 120px !important;
  height: 48px !important;
  background: #FFC7D4 !important;
  border-radius: 999px !important;
  border: none !important;
  cursor: pointer;
  position: relative;
  
  font-family: 'Season VF TRIAL', 'Season VF Trial', serif, sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  text-align: center !important;
  font-feature-settings: 'calt' off !important;
  color: #000000 !important;
  text-decoration: none !important;
  
  transition: all 0.2s ease;
}

/* Hover states - Transition to darker colors */
.was-this-helpful-section button[type="submit"]:first-of-type:hover,
.was-this-helpful-section .helpful-yes:hover,
.was-this-helpful-section input[value*="Yes"]:hover,
.was-this-helpful-section button:first-of-type:hover,
.was-this-helpful-section a:first-of-type:hover,
.was-this-helpful-section [class*="yes"]:hover,
.was-this-helpful-section [class*="Yes"]:hover {
  background: #A0F5F0 !important; /* Darker light blue/cyan */
  transform: translateY(-1px);
}

.was-this-helpful-section button[type="submit"]:last-of-type:hover,
.was-this-helpful-section .helpful-no:hover,
.was-this-helpful-section input[value*="No"]:hover,
.was-this-helpful-section button:last-of-type:hover,
.was-this-helpful-section a:last-of-type:hover,
.was-this-helpful-section [class*="no"]:not([class*="yes"]):hover,
.was-this-helpful-section [class*="No"]:not([class*="Yes"]):hover {
  background: #FF9DB6 !important; /* Darker light red/pink */
  transform: translateY(-1px);
}

/* Mobile responsiveness */
@media screen and (max-width: 640px) {
  .was-this-helpful-section > div,
  .was-this-helpful-section form {
    flex-direction: column;
    min-height: auto;
    padding: 24px 20px;
  }
  
  .was-this-helpful-section h3,
  .was-this-helpful-section p:first-child {
    margin: 0 0 16px 0;
  }
}

/* ============================================================================
   RELATED POSTS SECTION - YARPP Plugin Styling (Match Homepage)
   ============================================================================ */

/* YARPP container - needs to be full width to accommodate 4 columns */
.yarpp-related,
.yarpp.yarpp-related,
.yarpp.yarpp-related.yarpp-related-website,
.yarpp.yarpp-related.yarpp-template-thumbnails {
  margin: 120px auto !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 1140px !important;
  box-sizing: border-box !important;
}

/* Mobile: Reduce spacing above related posts */
@media screen and (max-width: 768px) {
  .yarpp-related,
  .yarpp.yarpp-related,
  .yarpp.yarpp-related.yarpp-related-website,
  .yarpp.yarpp-related.yarpp-template-thumbnails {
    margin: 60px auto !important;
  }
}

/* Override any plugin container constraints */
.yarpp-thumbnails-horizontal ol,
.yarpp-thumbnails-horizontal > ol {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Ensure YARPP section is within the post/page container but full width */
.single-post .yarpp-related,
.page-template .yarpp-related,
article .yarpp-related {
  width: 100% !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Related posts title - Figma specs with !important to override plugin CSS */
.yarpp-related h3,
.yarpp h3,
#related-posts-container + h2,
.related-posts h2,
.section-title {
  width: 100% !important;
  max-width: 1140px !important;
  height: 48px !important;
  font-family: 'Season VF TRIAL', 'Season VF Trial', serif, sans-serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  line-height: 48px !important;
  text-align: center !important;
  color: #000000 !important;
  margin: 0 auto 60px !important;
  padding: 0 !important;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

/* YARPP Desktop Grid - 4 columns, hidden on mobile */
.yarpp-thumbnails-desktop {
  display: none !important;
}

@media screen and (min-width: 768px) {
  .yarpp-thumbnails-desktop {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px !important;
    margin-bottom: 48px !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .yarpp-thumbnails-desktop .yarpp-thumbnail {
    width: 100% !important;
    max-width: 260px !important;
    justify-self: center !important;
    list-style: none !important;
  }
}

/* YARPP Mobile Slider - shown on mobile only */
.yarpp-thumbnails-mobile.yarpp-swiper {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin-bottom: 24px !important; /* Reduced by half from 48px */
  overflow: visible !important;
}

@media screen and (min-width: 768px) {
  .yarpp-thumbnails-mobile.yarpp-swiper {
    display: none !important;
  }
}

/* YARPP Related Posts Slider - Mobile only - Left-aligned with right peek effect */
.yarpp-swiper {
  overflow: visible !important;
}

/* Swiper wrapper for YARPP */
.yarpp-swiper .swiper-wrapper {
  display: flex !important;
  align-items: stretch !important;
}

/* Swiper slide styling for YARPP - Left-aligned with clipped slide on right */
.yarpp-swiper .swiper-slide {
  /* Dynamic width calculation for slides with right peek effect */
  /* Slightly smaller than 100% to show next slide peeking on the right */
  /* Container has no padding now, so use full viewport width */
  width: calc(85vw) !important; /* 85% viewport width for peek effect */
  min-width: 240px !important; /* Minimum width for very small screens */
  max-width: 400px !important; /* Maximum width to prevent overly large slides */
  height: auto !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.yarpp-swiper .swiper-slide .yarpp-thumbnail {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Responsive adjustments for YARPP slider */
@media screen and (min-width: 480px) {
  .yarpp-swiper .swiper-slide {
    width: calc(75vw) !important;
    max-width: 420px !important;
  }
}

@media screen and (min-width: 640px) {
  .yarpp-swiper .swiper-slide {
    width: calc(65vw) !important;
    max-width: 450px !important;
  }
}

/* YARPP Pagination styling - Match other sliders (grey/red) */
.yarpp-pagination {
  margin-top: 24px !important;
  position: relative !important;
  bottom: 0 !important;
}

.yarpp-pagination .swiper-pagination-bullet {
  background: #9ca3af !important; /* Grey default */
  opacity: 1 !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 6px !important;
}

.yarpp-pagination .swiper-pagination-bullet-active {
  background: #e8054c !important; /* Vancity red */
  opacity: 1 !important;
}

/* FAQ Slider Styling - Centered carousel with dynamic peek effect */
.faq-swiper {
  overflow: hidden !important; /* Keep hidden for proper Swiper functionality */
  width: 100% !important;
}

.faq-swiper .swiper-wrapper {
  display: flex !important;
  align-items: stretch !important;
}

.faq-swiper .swiper-slide {
  /* Dynamic width calculation for centered slides with peek effect */
  /* Base: 85% of viewport for main slide, leaving 15% for peek effect */
  width: calc(85vw - 32px) !important; /* 85% viewport width minus spacing */
  min-width: 240px !important; /* Minimum width for very small screens */
  max-width: 400px !important; /* Maximum width to prevent overly large slides */
  height: auto !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}

/* Scale down non-centered slides slightly for visual hierarchy - only when Swiper is initialized */
.faq-swiper.swiper-initialized .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.7 !important;
  transform: scale(0.95) !important;
}

/* Responsive adjustments for FAQ slider */
@media screen and (min-width: 480px) {
  .faq-swiper .swiper-slide {
    width: calc(75vw - 32px) !important;
    max-width: 420px !important;
  }
}

@media screen and (min-width: 640px) {
  .faq-swiper .swiper-slide {
    width: calc(65vw - 32px) !important;
    max-width: 450px !important;
  }
}

/* Popular Posts Slider Styling - Left-aligned with right-side peek effect */
.popular-swiper {
  overflow: visible !important;
  width: 100% !important;
}

.popular-swiper .swiper-wrapper {
  display: flex !important;
  align-items: stretch !important;
}

.popular-swiper .swiper-slide {
  /* Dynamic width calculation for left-aligned slides with right peek */
  /* Show main slide + partial next slide on the right */
  /* Container has no padding now, so use full viewport width */
  width: calc(85vw) !important; /* 85% viewport width for peek effect */
  min-width: 240px !important; /* Minimum width for very small screens */
  max-width: 380px !important; /* Maximum width to prevent overly large slides */
  height: auto !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: opacity 0.3s ease !important;
}

/* Fade out non-active slides slightly for visual hierarchy */
.popular-swiper.swiper-initialized .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.6 !important;
}

/* Active slide is fully visible */
.popular-swiper.swiper-initialized .swiper-slide.swiper-slide-active {
  opacity: 1 !important;
}

/* Responsive adjustments for Popular Posts slider */
@media screen and (min-width: 480px) {
  .popular-swiper .swiper-slide {
    width: calc(75vw) !important;
    max-width: 400px !important;
  }
}

@media screen and (min-width: 640px) {
  .popular-swiper .swiper-slide {
    width: calc(65vw) !important;
    max-width: 420px !important;
  }
}

@media screen and (min-width: 768px) {
  .popular-swiper .swiper-slide {
    width: calc(100vw - 8rem) !important;
    max-width: 450px !important;
  }
}

/* Legacy grid support (if not converted to slider) */
.yarpp-thumbnails-horizontal:not(.yarpp-slider-initialized),
.yarpp-thumbnails-horizontal:not(.yarpp-slider-initialized) ol {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 32px !important;
  margin-bottom: 48px !important;
  align-items: stretch !important;
  width: 100% !important;
  padding: 0 !important;
  list-style: none !important;
}

.yarpp-thumbnails-horizontal:not(.yarpp-slider-initialized) .yarpp-thumbnail,
.yarpp-thumbnails-horizontal:not(.yarpp-slider-initialized) > li,
.yarpp-thumbnails-horizontal:not(.yarpp-slider-initialized) ol > li {
  width: 100% !important;
  max-width: 260px !important;
  justify-self: center !important;
  list-style: none !important;
}

/* YARPP individual thumbnail items - Figma specs - Match Popular Posts */
.yarpp-thumbnail {
  background: #F8F7FA;
  border-radius: 20px;
  width: 260px;
  min-height: 412px;
  height: auto;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  padding: 0;
}

.yarpp-thumbnail:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  /* Removed translateY to prevent text from moving up */
}

/* YARPP thumbnail images - Figma specs - Override plugin margins - Match Popular Posts */
.yarpp-thumbnail img,
.yarpp-thumbnail > img,
.yarpp-thumbnail-default {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px 20px 0 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
  transition: transform 0.5s ease;
  transform-origin: top center !important; /* Scale from top to prevent bottom overflow */
}

.yarpp-thumbnail:hover img,
.yarpp-thumbnail:hover > img,
.yarpp-thumbnail:hover .yarpp-thumbnail-default {
  transform: scale(1.00) !important; /* Reduced scale to prevent overflow */
}

/* YARPP thumbnail title - Match category cards (sans serif) */
.yarpp-thumbnail-title {
  display: block;
  padding: 18px 18px 66px 18px;
  font-family: 'Season VF TRIAL', 'Season VF Trial', serif, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.5em;
  font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 0;
  color: #000000;
  position: relative;
  flex-grow: 1;
  margin: 0;
}

/* Add arrow to YARPP items - Figma specs - Match Popular Posts hover effect */
.yarpp-thumbnail::after {
  content: '';
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: #E7E6EB;
  border-radius: 999px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: center;
  background-size: 20px 20px !important; /* Prevent checkerboard pattern */
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.yarpp-thumbnail:hover::after {
  background: #e8054c;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important; /* Prevent checkerboard pattern */
  background-position: center;
}

/* Responsive behavior for legacy YARPP (not converted to slider) */
@media screen and (max-width: 1139px) and (min-width: 641px) {
  .yarpp-thumbnails-horizontal:not(.yarpp-slider-initialized),
  .yarpp-thumbnails-horizontal:not(.yarpp-slider-initialized) ol {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media screen and (max-width: 640px) {
  .yarpp-thumbnails-horizontal:not(.yarpp-slider-initialized),
  .yarpp-thumbnails-horizontal:not(.yarpp-slider-initialized) ol {
    grid-template-columns: 1fr !important;
  }
  
  .yarpp-thumbnails-horizontal:not(.yarpp-slider-initialized) .yarpp-thumbnail,
  .yarpp-thumbnails-horizontal:not(.yarpp-slider-initialized) > li,
  .yarpp-thumbnails-horizontal:not(.yarpp-slider-initialized) ol > li {
    max-width: 100% !important;
  }
}

/* Also style any other related posts structures - Figma specs */
#related-posts-container .popular-post,
.related-posts .popular-post {
  background: #F8F7FA;
  border-radius: 20px;
  min-height: 412px;
  height: auto;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}

#related-posts-container .popular-post:hover,
.related-posts .popular-post:hover {
  /* Removed translateY to prevent text from moving up on hover */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

#related-posts-container .popular-post-image,
.related-posts .popular-post-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  display: block;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  transform-origin: top center !important; /* Scale from top to prevent bottom overflow */
  transition: transform 0.5s ease;
}

/* Ensure related posts containers clip overflow */
#related-posts-container .popular-post,
.related-posts .popular-post {
  overflow: hidden !important; /* Ensure container clips overflow */
}

/* Hover effect for related posts images */
#related-posts-container .popular-post:hover .popular-post-image,
.related-posts .popular-post:hover .popular-post-image,
#related-posts-container .popular-post.group:hover img,
.related-posts .popular-post.group:hover img {
  transform: scale(1.05) !important; /* Reduced scale to prevent overflow */
}

#related-posts-container .popular-post-content,
.related-posts .popular-post-content {
  padding: 18px 18px 66px 18px;
  position: relative;
  flex-grow: 1;
}

#related-posts-container .popular-post h4,
.related-posts .popular-post h4 {
  font-family: 'Season VF TRIAL', 'Season VF Trial', serif, sans-serif !important;
  font-style: normal;
  font-weight: 600 !important;
  font-size: 22px !important;
  line-height: 1.5em !important;
  font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 0 !important;
  color: #000000 !important;
  margin: 0;
}

#related-posts-container .popular-post-arrow,
.related-posts .popular-post-arrow {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: #E7E6EB;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#related-posts-container .popular-post-arrow svg,
.related-posts .popular-post-arrow svg {
  color: #000000;
  width: 20px;
  height: 20px;
  stroke-width: 1.5px;
}

/* Ensure grid layout matches homepage */
#related-posts-container.grid-4,
.related-posts .popular-posts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xl, 32px);
  margin-bottom: var(--spacing-xxl, 48px);
}

/* Responsive grid for related posts */
@media screen and (max-width: 1024px) {
  #related-posts-container.grid-4,
  .related-posts .popular-posts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 640px) {
  #related-posts-container.grid-4,
  .related-posts .popular-posts {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   INLINE IMAGE LAYOUT - Centered Images (Not in Tables)
   ============================================================================ */

/* Center paragraph images that are not in tables */
p.inline-image-centered {
  text-align: center;
  margin: 40px auto;
}

p.inline-image-centered img {
  max-width: 550px;
  width: 100%;
  height: auto;
  display: inline-block;
  margin: 0 auto;
}

/* ============================================================================
   CHECKERBOARD LAYOUT - VC Row/Column Images (550px bounded with border-radius)
   ============================================================================ */

/* Target images within vc-row checkerboard layout */
.vc-row .vc-column img {
  max-width: 550px;
  max-height: 550px;
  width: 100%;
  height: auto;
  border-radius: 20px;
  object-fit: cover;
}

/* Also target images inside inline-image-centered within vc-columns */
.vc-row .vc-column p.inline-image-centered img,
.vc-row .vc-column .inline-image-centered img {
  max-width: 550px;
  max-height: 550px;
  border-radius: 20px;
  object-fit: cover;
}

/* ============================================================================
   ROW AND COLUMN SHORTCODES (Visual Composer/WPBakery Compatibility)
   ============================================================================ */

/* Row container - flex layout with border-bottom like accordions */
.vc-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #E7E6EB;
}

/* Remove border from last row */
.vc-row:last-of-type,
.vc-row:last-child {
  border-bottom: none;
}

/* Column containers - responsive padding */
.vc-column {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  box-sizing: border-box;
}

/* Ensure images within columns are responsive */
.vc-column img {
  max-width: 100%;
  height: auto;
}

/* Mobile: All columns full width */
@media screen and (max-width: 767px) {
  .vc-column {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ============================================================================
   SWIPER PAGINATION DOTS - Mobile Slider Controls
   ============================================================================ */

/* Banner/Hero Slider Pagination - White dots overlaying the slides */
.hero-pagination {
  position: absolute !important;
  bottom: 20px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
}

.hero-pagination .swiper-pagination-bullet {
  background: #ffffff !important;
  opacity: 0.7 !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 6px !important;
}

.hero-pagination .swiper-pagination-bullet-active {
  background: #f4728f !important; /* Lighter red/pink for vancity color scheme */
  opacity: 1 !important;
}

/* FAQ/Resources Slider Pagination - Grey dots with vancity red active */
.faq-pagination {
  margin-top: 24px !important;
  position: relative !important;
}

.faq-pagination .swiper-pagination-bullet {
  background: #9ca3af !important; /* Grey default */
  opacity: 1 !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 6px !important;
}

.faq-pagination .swiper-pagination-bullet-active {
  background: #e8054c !important; /* Vancity red */
  opacity: 1 !important;
}

/* Popular Posts Slider Pagination - Grey dots with vancity red active */
.popular-pagination {
  margin-top: 24px !important;
  position: relative !important;
  bottom: 0 !important;
  display: block !important;
  z-index: 10 !important;
}

.popular-pagination .swiper-pagination-bullet {
  background: #9ca3af !important; /* Grey default */
  opacity: 1 !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 6px !important;
  display: inline-block !important;
}

.popular-pagination .swiper-pagination-bullet-active {
  background: #e8054c !important; /* Vancity red */
  opacity: 1 !important;
}

/* ============================================================================
   SWIPER SLIDER ENHANCEMENTS - Touch/Swipe Support & Loop Mode
   ============================================================================ */

/* Ensure swiper containers handle overflow properly for loop mode */
.swiper {
  overflow: hidden;
  position: relative;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

/* Smooth transitions for slides */
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

/* Cursor feedback for draggable sliders */
.swiper-container-grab {
  cursor: grab;
  cursor: -webkit-grab;
}

.swiper-container-grabbing {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

/* Prevent text selection during slide dragging */
.swiper-wrapper,
.swiper-slide {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Allow text selection in slide content */
.swiper-slide a,
.swiper-slide button,
.swiper-slide input {
  user-select: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
}

/* Touch action for proper swipe on mobile */
.swiper {
  touch-action: pan-y;
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.yarpp-related .yarpp-thumbnail-title {
  max-width: 100%;
}

/* ============================================================================
   GOOGLE AI SEARCH WIDGET CUSTOM STYLING
   ============================================================================ */

/* Hide the Google widget by default - it opens on trigger click */
gen-search-widget {
  display: block;
}

/* Style the Google search widget overlay to match site design */
gen-search-widget::part(overlay) {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

/* Style the search widget dialog */
gen-search-widget::part(dialog) {
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 800px;
  z-index: 1001;
}

/* Style the search input to match site design */
gen-search-widget::part(search-input) {
  border: 2px solid #f3f4f6;
  border-radius: 999px;
  padding: 12px 20px 12px 48px;
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
}

gen-search-widget::part(search-input):focus {
  border-color: var(--color-primary, #e8054c);
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 5, 76, 0.1);
}

/* Style the search button */
gen-search-widget::part(search-button) {
  background-color: var(--color-primary, #e8054c);
  color: white;
  border-radius: 999px;
  padding: 12px 24px;
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif;
  font-weight: 600;
  transition: all 0.3s ease;
}

gen-search-widget::part(search-button):hover {
  background-color: #c7044c;
  transform: scale(1.05);
}

/* Style search results */
gen-search-widget::part(results-container) {
  padding: 20px;
  max-height: 600px;
  overflow-y: auto;
}

gen-search-widget::part(result-item) {
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
  background-color: #f8f7fa;
}

gen-search-widget::part(result-item):hover {
  background-color: #f3f4f6;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

gen-search-widget::part(result-title) {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #000;
  margin-bottom: 8px;
}

gen-search-widget::part(result-title):hover {
  color: var(--color-primary, #e8054c);
}

gen-search-widget::part(result-snippet) {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
}

/* Style the close button */
gen-search-widget::part(close-button) {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

gen-search-widget::part(close-button):hover {
  background-color: #f3f4f6;
}

/* Loading state */
gen-search-widget::part(loading) {
  font-family: 'Inter', sans-serif;
  color: var(--color-primary, #e8054c);
}

/* No results message */
gen-search-widget::part(no-results) {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif;
  font-size: 18px;
  color: #6b7280;
  text-align: center;
  padding: 40px 20px;
}

/* ============================================================================
   DYNAMIC TEXT REPLACEMENT STYLING
   ============================================================================ */

/* CSS class for "Select device:" text replacement */
.select-device-text {
  display: block !important;
  font-family: 'Season VF TRIAL', 'Season VF Trial', serif, sans-serif !important;
  font-style: normal !important;
  font-weight: 550 !important;
  font-size: 14px !important;
  line-height: 21px !important;
  text-align: center !important;
  color: #000000 !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* ============================================================================
   MOBILE RESPONSIVENESS FIXES
   ============================================================================ */

/* Hide images in quick links cards on mobile */
@media screen and (max-width: 768px) {
  /* Target images in learning categories section - be more specific to avoid affecting other sections */
  main section:first-of-type .grid img {
    display: none !important;
  }
  
  /* Adjust card layout for mobile without images */
  main section:first-of-type .grid .bg-gray-50 {
    padding-left: 24px !important;
    gap: 0 !important;
  }
  
  /* Additional mobile spacing adjustments for inner posts */
  .single-post .entry-content,
  .page-template .entry-content {
    margin-bottom: 1rem;
  }
  
  /* Reduce spacing in was-this-helpful section on mobile */
  .was-this-helpful-section {
    margin-top: 2rem !important;
    margin-bottom: 0 !important;
  }
}

/* Fix FAQ/Resources section height scaling for long titles */
@media screen and (min-width: 768px) {
  /* Make FAQ cards auto-height with equal row heights - target only FAQ section by class */
  .bg-gray-50.h-133px {
    height: auto !important;
    min-height: 133px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Ensure the parent grid for FAQ section maintains 2 columns - be more specific to avoid affecting popular posts */
  .grid.md\\:grid-cols-2:not(.lg\\:grid-cols-4) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    align-items: stretch !important;
  }
}

/* Center align footer content on mobile */
@media screen and (max-width: 768px) {
  footer .grid {
    text-align: center !important;
  }
  
  footer .flex {
    align-items: center !important;
    text-align: center !important;
  }
  
  footer .flex.gap-4 {
    justify-content: center !important;
  }
}

/* ============================================================================
   HOMEPAGE BANNER LAYOUT - Laptop Screen Sizes (1/3 for all columns)
   ============================================================================ */

/* Target the desktop hero section at laptop sizes (1024px - 1280px) */
/* This ensures the search column scales to 1/3, giving more space to featured posts */
/* Note: Extends existing responsive behavior from style.css */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  /* Target the hero section - first section in main that has flex-nowrap */
  /* Ensure it's displayed (overrides hidden class at lg breakpoint) */
  main > section.flex-nowrap {
    display: flex !important;
  }
  
  /* Search column (first child) - 1/3 width instead of full width */
  main > section.flex-nowrap > div:first-child {
    width: 33.333333% !important;
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    padding-left: 2rem !important; /* Reduce from 130px to 32px on laptop sizes */
    padding-right: 1.5rem !important; /* Reduce right padding as well */
  }
  
  /* Featured posts container (second child) - 2/3 width */
  main > section.flex-nowrap > div:last-child {
    width: 66.666667% !important;
    flex: 0 0 66.666667% !important;
    max-width: 66.666667% !important;
    display: flex !important;
    flex-direction: row !important;
  }
  
  /* Each featured post card - equal width (50% of container = 1/3 of total) */
  /* This ensures both cards get equal space, each taking 1/3 of the total banner width */
  main > section.flex-nowrap > div:last-child > div {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* ============================================================================
   HEADER LOGO - Vancity Logo Height
   ============================================================================ */

/* Ensure header logo is 40px height */
#main-header img[alt="Vancity"],
#main-header .h-10 {
  height: 40px !important;
  width: auto !important;
}

/* Mobile: Shrink header logo to 35px */
@media screen and (max-width: 768px) {
  #main-header img[alt="Vancity"],
  #main-header .h-10 {
    height: 35px !important;
    width: auto !important;
  }
}

/* Learning Hub title - Add 10px margin left and right */
#main-header .flex.items-center > a:last-of-type {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

/* ============================================================================
   MOBILE BANNER SEARCH - Fix search icon spacing
   ============================================================================ */

/* Reduce padding on mobile banner search slide container */
@media screen and (max-width: 768px) {
  /* Reduce parent container padding - target the div with background image */
  .hero-mobile-slider-section .swiper-slide > div[style*="background-image"] {
    padding-left: 1rem !important; /* 16px instead of 32px (px-8) */
    padding-right: 1rem !important;
  }
  
  /* Remove search container padding - target search-container class */
  .hero-mobile-slider-section .search-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Ensure search icon button positioning is correct */
  .hero-mobile-slider-section .search-container button.absolute {
    left: 12px !important; /* Keep consistent with desktop (left-3 = 12px) */
  }
}

/* ============================================================================
   MOBILE SLIDERS - Edge-to-Edge on Viewport Right Side
   ============================================================================ */

/* Make mobile sliders extend to viewport edge on the right side */
/* This handles FAQ/Resources and Popular Posts sliders on homepage and inside pages */
/* Strategy: Break out of container padding using negative margins, extend to viewport edge */
@media screen and (max-width: 768px) {
  /* Homepage: Popular Posts and FAQ Mobile Slider Sections */
  /* These sections have px-6 class that needs to be handled for full-width carousel */
  
  /* Target the section with px-6 that contains the slider */
  .max-w-container > section.px-6.block.md\\:hidden {
    /* Break out of the section's own px-6 padding for the slider only */
    /* Keep title inside the padding, but slider extends full width */
    position: relative !important;
    overflow: visible !important;
  }
  
  /* Make swiper containers break out of parent px-6 padding and touch edges */
  .max-w-container > section.px-6.block.md\\:hidden .popular-swiper,
  .max-w-container > section.px-6.block.md\\:hidden .faq-swiper {
    /* Negative margin to cancel out the section's px-6 (1.5rem = 24px) */
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;
    /* Remove padding so carousel touches edges */
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: calc(100% + 3rem) !important; /* 100% + (1.5rem left + 1.5rem right) */
    max-width: none !important;
    overflow: hidden !important; /* Must be hidden for Swiper to work */
    box-sizing: border-box !important;
  }
  
  /* Ensure swiper wrapper extends fully */
  .max-w-container > section.px-6.block.md\\:hidden .popular-swiper .swiper-wrapper,
  .max-w-container > section.px-6.block.md\\:hidden .faq-swiper .swiper-wrapper {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Inside pages: YARPP/Related Posts sliders */
  /* Break out of container padding and touch edges */
  .container > .yarpp-related,
  .container > section:has(.yarpp-swiper) {
    width: 100vw !important;
    margin-left: calc((100vw - 100%) / -2) !important;
    margin-right: calc((100vw - 100%) / -2) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  
  /* YARPP swiper containers - Touch edges */
  .yarpp-thumbnails-mobile.yarpp-swiper,
  .yarpp-swiper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
  }
  
  /* Prevent horizontal scroll from negative margins */
  body {
    overflow-x: hidden !important;
  }
  
  main {
    overflow-x: hidden !important;
  }
  
  /* Ensure parent containers allow overflow for sliders */
  .max-w-container,
  .container {
    overflow-x: visible !important;
  }
}

/* ============================================================================
   POPULAR POSTS - Image Zoom Fix
   ============================================================================ */

/* Prevent image zoom from intruding into text area on hover */
/* Images scale from top center and use reduced scale (1.05 instead of 1.10) */
/* This ensures the zoom effect doesn't reduce spacing between image and title */

/* Target all images in popular posts cards that have the scale-110 hover effect */
/* Use more specific targeting to avoid affecting other images */
div.min-h-\[419px\].group img,
div.min-h-\[419px\].group .wp-post-image {
  transform-origin: top center !important;
  overflow: hidden; /* Ensure image doesn't overflow container */
}

/* Ensure image container clips overflow */
div.min-h-\[419px\].group {
  overflow: hidden !important;
}

div.min-h-\[419px\].group:hover img,
div.min-h-\[419px\].group:hover .wp-post-image {
  transform: scale(1.00) !important; /* Reduced from 1.10 to minimize intrusion */
}

/* Additional targeting for popular posts structure - target by rounded corners */
div[class*="rounded-t-20px"].group {
  overflow: hidden !important; /* Ensure container clips overflow */
}

div[class*="rounded-t-20px"].group img,
div[class*="rounded-t-20px"].group .wp-post-image {
  transform-origin: top center !important;
  overflow: hidden; /* Ensure image doesn't overflow */
}

div[class*="rounded-t-20px"].group:hover img,
div[class*="rounded-t-20px"].group:hover .wp-post-image {
  transform: scale(1.05) !important;
}

/* ============================================================================
   FOOTER STYLES
   ============================================================================ */

/* Footer headers - All use same weight (match "Call us" and "Where to find us") */
footer > div > div > div:first-child > h4,
footer h4 {
  font-family: 'Season VF Trial', 'Season VF TRIAL', serif, sans-serif !important;
  font-variation-settings: "wght" var(--font-weight-semibold), "SERF" 100 !important;
  font-size: 25px !important;
  color: white !important;
}

/* ============================================================================
   GOOGLE RECAPTCHA BADGE FIX - Prevent spacing after footer
   ============================================================================ */

/* Remove all spacing from reCAPTCHA badge and its containers */
.grecaptcha-badge {
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
}

/* Target divs that contain the grecaptcha badge */
div:has(.grecaptcha-badge) {
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure reCAPTCHA iframe has no margin/padding */
.grecaptcha-badge iframe,
iframe[src*="recaptcha"],
iframe[name*="recaptcha"],
iframe[title="reCAPTCHA"] {
  margin: 0 !important;
  padding: 0 !important;
}

/* Additional fallback for reCAPTCHA containers after footer */
footer ~ div[style*="display: block"] {
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.size-full {
  height: auto !important;
}

/* ============================================================================
   CENTERED CAROUSEL CONTAINER OVERFLOW FIX
   ============================================================================ */

/* Ensure carousel parent sections don't clip the content but maintain proper Swiper functionality */
@media screen and (max-width: 768px) {
  /* Homepage mobile slider sections - allow overflow on parent only */
  .max-w-container > section.block.md\:hidden,
  section.animate-fade-in-up.block.md\:hidden {
    overflow: visible !important;
  }
  
  /* Ensure parent containers accommodate the carousel */
  .faq-swiper,
  .popular-swiper,
  .yarpp-swiper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================================================
   POST-SPECIFIC STYLING
   ============================================================================ */

/* Remove border from .vc-row in post-30502 */
.post-30502 .vc-row {
  border: none !important;
}

/* ============================================================================
   MOBILE PADDING OVERRIDE - Inner Pages Only (5px Max Total Left+Right)
   ============================================================================ */

/* Target mobile devices only - applies to single posts and pages (not homepage) */
@media screen and (max-width: 768px) {
  /* Main article containers - reset all horizontal padding */
  .single-post article,
  .page-template article,
  .single-post article.max-w-container,
  .page-template article.max-w-container,
  article.max-w-container.mx-auto {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Override Tailwind px-* classes on article elements */
  .single-post article[class*="px-"],
  .page-template article[class*="px-"],
  .single-post article[class*="px-6"],
  .page-template article[class*="px-6"],
  .single-post article[class*="px-4"],
  .page-template article[class*="px-4"],
  .single-post article[class*="px-8"],
  .page-template article[class*="px-8"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Entry content containers - reset padding */
  .single-post .entry-content,
  .page-template .entry-content,
  .single-post .prose,
  .page-template .prose,
  .single-post .entry-content.prose,
  .page-template .entry-content.prose {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Page/post headers */
  .single-post .page-header,
  .page-template .page-header,
  .single-post .post-header,
  .page-template .post-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Intro text containers */
  .single-post .article-intro,
  .page-template .page-intro {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* CTA wrapper */
  .single-post .cta-wrapper,
  .page-template .cta-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Links wrapper */
  .single-post .links-wrapper,
  .page-template .links-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Content links */
  .single-post .content-links,
  .page-template .content-links {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Generic container classes within pages/posts */
  .single-post .container,
  .page-template .container,
  .single-post .max-w-container,
  .page-template .max-w-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Override any mx-auto containers */
  .single-post .mx-auto,
  .page-template .mx-auto {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Main content wrapper */
  .single-post.main-content,
  .page-template.main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Main element padding reset */
  .single-post main,
  .page-template main,
  main.single-post,
  main.page-template {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Accordion containers - keep minimal padding */
  .single-post .ba-accordion,
  .page-template .ba-accordion {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Table containers */
  .single-post .entry-content table,
  .page-template .entry-content table,
  .single-post .ba-tabpanel table,
  .page-template .ba-tabpanel table {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* VC Row and Column containers */
  .single-post .vc-row,
  .page-template .vc-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .single-post .vc-column,
  .page-template .vc-column {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Tabs containers */
  .single-post .ba-tabs,
  .page-template .ba-tabs {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Tab panels */
  .single-post .ba-tabpanel,
  .page-template .ba-tabpanel {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Paragraph containers with inline images */
  .single-post p.inline-image-centered,
  .page-template p.inline-image-centered {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Was this helpful section - already has full-width breakout, but ensure no extra padding */
  .single-post .was-this-helpful-section,
  .page-template .was-this-helpful-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .single-post .was-this-helpful-section > div,
  .page-template .was-this-helpful-section > div,
  .single-post .was-this-helpful-section form,
  .page-template .was-this-helpful-section form {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* YARPP/Related Posts - ensure minimal padding */
  .single-post .yarpp-related,
  .page-template .yarpp-related {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Override any div containers with padding classes */
  /* Only target divs within article/content areas, not header */
  .single-post article div[class*="px-"],
  .page-template article div[class*="px-"],
  .single-post main div[class*="px-"],
  .page-template main div[class*="px-"],
  .single-post article div[class*="pl-"],
  .page-template article div[class*="pl-"],
  .single-post main div[class*="pl-"],
  .page-template main div[class*="pl-"],
  .single-post article div[class*="pr-"],
  .page-template article div[class*="pr-"],
  .single-post main div[class*="pr-"],
  .page-template main div[class*="pr-"] {
    /* Only override if it's within article or main, not in header */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Ensure header padding is preserved - more specific rule */
  #main-header div[class*="px-"],
  header#main-header div[class*="px-"],
  #main-header div[class*="pl-"],
  header#main-header div[class*="pl-"],
  #main-header div[class*="pr-"],
  header#main-header div[class*="pr-"] {
    /* Header padding must be preserved - override the reset above */
    padding-left: 1.5rem !important; /* px-6 = 1.5rem */
    padding-right: 1.5rem !important;
  }
  
  /* But preserve padding for specific nested elements that need it */
  .single-post .entry-content p,
  .page-template .entry-content p,
  .single-post .entry-content ul,
  .page-template .entry-content ul,
  .single-post .entry-content ol,
  .page-template .entry-content ol,
  .single-post .entry-content li,
  .page-template .entry-content li {
    /* These should not have horizontal padding reset - they use margin instead */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Ensure body and html don't add extra padding */
  body.single-post,
  body.page-template,
  body.single,
  body.page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Override any wrapper divs that might have padding */
  .single-post > *,
  .page-template > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
}

/* Additional mobile breakpoint for very small screens */
@media screen and (max-width: 480px) {
  /* Even tighter padding on very small screens */
  .single-post article,
  .page-template article,
  .single-post article.max-w-container,
  .page-template article.max-w-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  .single-post .container,
  .page-template .container,
  .single-post .max-w-container,
  .page-template .max-w-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}