/* ============================================
   Human First Therapy — Design System
   Migrated from Astro/Tailwind
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
  --color-primary-50: #FAF7F2;
  --color-primary-100: #F5EFE5;
  --color-primary-200: #EBDFCC;
  --color-primary-300: #E0CFB3;
  --color-primary-400: #D6BF9A;
  --color-primary-500: #CCAF81;
  --color-primary-600: #BD9D6B;
  --color-primary-700: #A98B55;
  --color-primary-800: #8E753F;
  --color-primary-900: #735F29;

  --color-secondary-50: #F5F7FA;
  --color-secondary-100: #EBEEF5;
  --color-secondary-200: #D7DEEB;
  --color-secondary-300: #C3CDE0;
  --color-secondary-400: #AFBCD6;
  --color-secondary-500: #9BABCC;
  --color-secondary-600: #869AB8;
  --color-secondary-700: #7289A4;
  --color-secondary-800: #5D7890;
  --color-secondary-900: #49677C;

  --color-accent-50: #FCF8F5;
  --color-accent-100: #F9F1EB;
  --color-accent-200: #F3E3D7;
  --color-accent-300: #EDD5C3;
  --color-accent-400: #E7C7AF;
  --color-accent-500: #E1B99B;
  --color-accent-600: #D6A57E;
  --color-accent-700: #CC9161;
  --color-accent-800: #BD7D44;
  --color-accent-900: #A16930;

  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Playfair Display', serif;
}

/* --- Hide Hello Elementor page header --- */
.page-header,
.entry-header {
  display: none !important;
}

/* --- Base Typography --- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.625;
  overflow-x: hidden;
  color: #111827;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: 1.25;
  margin-bottom: 0.5em;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

@media (min-width: 768px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2.25rem; }
  h3 { font-size: 1.875rem; }
  h4 { font-size: 1.5rem; }
}

@media (min-width: 1280px) {
  h1 { font-size: 3.75rem; }
}

p {
  margin-bottom: 1.5rem;
  line-height: 1.625;
}

a {
  transition: all 0.3s;
}

/* --- Layout --- */
.container-custom {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container-custom {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-custom {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Elementor containers — match Astro container-custom (max-w-7xl mx-auto px-4 sm:px-6 lg:px-8) */
.e-con-boxed > .e-con-inner {
  max-width: 1280px;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .e-con-boxed > .e-con-inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .e-con-boxed > .e-con-inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: all 0.3s;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5;
  border: none;
}

.btn-primary {
  background-color: var(--color-primary-600);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--color-primary-700);
  color: #fff;
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary-500);
}

.btn-secondary {
  background-color: #fff;
  color: var(--color-primary-700);
  border: 1px solid var(--color-primary-600);
}

.btn-secondary:hover {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
}

.btn-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary-500);
}

/* --- Card --- */
.card {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s;
}

.card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* --- Badge --- */
.hft-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: var(--color-primary-100);
  color: var(--color-primary-800);
  font-weight: 500;
  font-size: 0.875rem;
}

/* --- Scroll Animations --- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Disable scroll animations inside Elementor editor */
.elementor-editor-active .animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

.floating {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

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

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

/* --- Custom Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f5efe5;
}

::-webkit-scrollbar-thumb {
  background: #ccaf81;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #bd9d6b;
}

/* ============================================
   Therapist Card Widget
   ============================================ */
.hft-therapist-card {
  position: relative;
  overflow: visible;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.hft-card-decorative {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-primary-100);
  border-radius: 9999px;
  opacity: 0.7;
  z-index: 0;
}

.hft-card-image {
  overflow: hidden;
  position: relative;
}

.hft-card-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: top;
  transition: transform 0.5s;
}

.hft-therapist-card:hover .hft-card-image img {
  transform: scale(1.05);
}

.hft-card-video-badge {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background: var(--color-primary-700);
  color: #fff;
  padding: 0.25rem;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
}

.hft-card-video-badge svg {
  width: 1.25rem;
  height: 1.25rem;
}

.hft-card-content {
  padding: 0.75rem 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.hft-card-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary-900);
  margin-bottom: 0;
}

.hft-card-title {
  color: #4b5563;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}

.hft-card-rates {
  font-size: 0.875rem;
  color: var(--color-primary-700);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.hft-card-bio {
  color: #374151;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin-bottom: 0.375rem;
}

.hft-card-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.375rem;
}

.hft-tag {
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  background: var(--color-primary-100);
  color: var(--color-primary-800);
  font-size: 0.8125rem;
}

.hft-card-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary-700);
  font-weight: 500;
  margin-top: auto;
  text-decoration: none;
}

.hft-card-link:hover {
  color: var(--color-primary-900);
}

.hft-card-link svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.5rem;
}

/* Therapist card grid (for archive) */
.hft-therapist-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .hft-therapist-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .hft-therapist-grid {
    grid-template-columns: repeat(3, 1fr);
    padding: 0 2rem;
  }
}

/* Card hover shadow (Astro: hover:shadow-lg) */
.hft-therapist-card.card {
  transition: box-shadow 0.3s ease;
}

.hft-therapist-card.card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Fallback image placeholder (like blog cards) */
.hft-card-image-placeholder {
  width: 100%;
  height: 250px;
  background-color: var(--color-primary-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hft-card-image-placeholder span {
  color: var(--color-primary-500);
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

/* Remove Elementor default 10px column padding on therapist pages */
.single-therapist .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
.post-type-archive-therapist .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
  padding: 0;
}

/* ============================================
   Therapist Profile Widget
   ============================================ */
.hft-profile-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 768px) {
  .hft-profile-hero {
    grid-template-columns: 5fr 7fr;
  }
}

.hft-profile-image {
  position: relative;
}

.hft-profile-image img {
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.hft-profile-decorative {
  position: absolute;
  bottom: -1rem;
  right: 1rem;
  width: 8rem;
  height: 8rem;
  background: var(--color-primary-200);
  border-radius: 9999px;
  opacity: 0.7;
  z-index: -1;
}

.hft-profile-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: var(--color-primary-100);
  color: var(--color-primary-800);
  font-weight: 500;
  font-size: 0.875rem;
}

.hft-profile-name {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-primary-900);
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .hft-profile-name {
    font-size: 3rem;
  }
}

.hft-profile-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.hft-profile-bio {
  font-size: 1.125rem;
  color: #374151;
  line-height: 1.75;
  margin-bottom: 2rem;
}

.hft-profile-contact {
  margin-bottom: 2rem;
}

.hft-profile-contact h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary-800);
  margin-bottom: 0.75rem;
}

.hft-profile-contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.hft-profile-contact-item.address {
  align-items: flex-start;
}

.hft-profile-contact-item svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  color: var(--color-primary-600);
  flex-shrink: 0;
}

.hft-profile-contact-item a {
  color: var(--color-primary-700);
  text-decoration: none;
}

.hft-profile-contact-item a:hover {
  color: var(--color-primary-900);
}

.hft-profile-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .hft-profile-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hft-profile-info-card {
  background: var(--color-primary-50);
  padding: 1rem;
  border-radius: 0.5rem;
}

.hft-profile-info-card h3 {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-primary-800);
  margin-bottom: 0.25rem;
}

.hft-profile-info-card p {
  margin-bottom: 0;
  color: #374151;
}

/* Video embed */
.hft-profile-video {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

/* 16:9 default */
.hft-profile-video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.hft-profile-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 9:16 portrait video */
.hft-profile-video-wrapper.hft-video-portrait {
  padding-bottom: 0;
  height: auto;
}

.hft-profile-video-wrapper.hft-video-portrait iframe {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  height: auto;
  max-height: 70vh;
}

/* Approach section */
.hft-profile-approach {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .hft-profile-approach {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hft-profile-approach h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-primary-900);
  margin-bottom: 1.5rem;
}

.hft-profile-education-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hft-profile-education-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.hft-profile-education-list li svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-primary-600);
  margin-right: 0.5rem;
  flex-shrink: 0;
}

/* ============================================
   YouTube Shortcode
   ============================================ */
.hft-youtube-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .hft-youtube-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .hft-youtube-grid {
    grid-template-columns: repeat(3, 1fr);
    padding: 0 2rem;
  }
}

.hft-youtube-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #FFFFFF;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hft-youtube-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.hft-youtube-link {
  display: block;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}

.hft-youtube-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.hft-youtube-card:hover .hft-youtube-link img {
  transform: scale(1.05);
}

.hft-youtube-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease;
  color: #FFFFFF;
}

.hft-youtube-card:hover .hft-youtube-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.45);
}

.hft-youtube-overlay svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

.hft-youtube-card:hover .hft-youtube-overlay svg {
  transform: scale(1.1);
}

.hft-youtube-title {
  padding: 1rem 1.25rem;
  background: #FFFFFF;
}

.hft-youtube-title h3 {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-primary-900);
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  transition: color 0.2s ease;
}

.hft-youtube-card:hover .hft-youtube-title h3 {
  color: var(--color-primary-700);
}

/* ============================================
   FAQ Accordion Widget
   Matches Astro faq.astro Tailwind classes exactly
   ============================================ */
.hft-faq {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* space-y-6 */
}

.hft-faq .hft-faq-question {
  width: 100%; /* w-full */
  display: flex; /* flex */
  justify-content: space-between; /* justify-between */
  align-items: center; /* items-center */
  text-align: left; /* text-left */
  padding: 1rem 1.5rem; /* py-4 px-6 */
  background-color: var(--color-primary-50); /* bg-primary-50 */
  color: inherit;
  border: none;
  border-radius: 0.5rem; /* rounded-lg */
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s; /* transition-colors duration-300 */
}

.hft-faq .hft-faq-question:hover {
  background-color: var(--color-primary-100); /* hover:bg-primary-100 */
}

.hft-faq-question:focus {
  outline: 2px solid transparent; /* focus:outline-none */
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-primary-500); /* focus:ring-2 focus:ring-primary-500 */
}

.hft-faq-question h3 {
  font-family: var(--font-serif); /* font-serif */
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem; /* text-xl line-height */
  font-weight: 600; /* font-semibold */
  color: var(--color-primary-900); /* text-primary-900 */
  margin: 0;
}

.hft-faq-icon {
  width: 1.5rem; /* w-6 */
  height: 1.5rem; /* h-6 */
  color: var(--color-primary-700); /* text-primary-700 */
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform 0.3s; /* transition-transform duration-300 */
}

.hft-faq-item.is-open .hft-faq-icon {
  transform: rotate(180deg); /* rotate-180 */
}

.hft-faq-answer {
  display: none; /* hidden */
  padding: 1rem 1.5rem; /* py-4 px-6 */
  background-color: #fff; /* bg-white */
  border: 1px solid var(--color-primary-100); /* border border-primary-100 */
  border-radius: 0 0 0.5rem 0.5rem; /* rounded-b-lg */
  color: #374151; /* text-gray-700 */
  line-height: 1.75;
}

.hft-faq-item.is-open .hft-faq-answer {
  display: block;
}

.hft-faq-answer p {
  margin-bottom: 0.75rem;
  color: #374151; /* text-gray-700 */
}

.hft-faq-answer p:last-child {
  margin-bottom: 0;
}

.hft-faq-answer ul {
  list-style: disc;
  padding-left: 1.5rem; /* pl-6 */
  margin-top: 0.5rem; /* mt-2 */
  margin-bottom: 0.5rem;
}

.hft-faq-answer li {
  margin-bottom: 0.25rem; /* space-y-1 */
  color: #374151; /* text-gray-700 */
}

.hft-faq-answer a {
  color: var(--color-primary-700); /* text-primary-700 */
  font-weight: 500; /* font-medium */
}

.hft-faq-answer a:hover {
  color: var(--color-primary-900); /* hover:text-primary-900 */
}

/* ============================================
   Blog Cards
   ============================================ */
.hft-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .hft-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .hft-blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hft-blog-card {
  background: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.hft-blog-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.hft-blog-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.hft-blog-card-link:hover {
  text-decoration: none;
  color: inherit;
}

.hft-blog-card-image {
  overflow: hidden;
  height: 12rem; /* h-48 = 192px */
}

.hft-blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.hft-blog-card:hover .hft-blog-card-image img {
  transform: scale(1.05);
}

.hft-blog-card-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-primary-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hft-blog-card-placeholder span {
  color: var(--color-primary-500);
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

.hft-blog-card-content {
  padding: 1.5rem;
}

.hft-blog-card-meta {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: #6B7280; /* text-gray-500 */
  margin-bottom: 0.75rem;
}

.hft-blog-card-dot {
  margin: 0 0.5rem;
}

.hft-blog-card-title {
  font-family: var(--font-serif);
  font-size: 1.25rem; /* text-xl */
  font-weight: 700;
  color: var(--color-primary-900);
  margin: 0 0 0.75rem 0;
  line-height: 1.4;
}

.hft-blog-card-excerpt {
  color: #374151; /* text-gray-700 */
  margin: 0 0 1rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
}

.hft-blog-card-readmore {
  display: inline-block;
  color: var(--color-primary-700);
  font-weight: 500;
  transition: color 0.2s;
}

.hft-blog-card:hover .hft-blog-card-readmore {
  color: var(--color-primary-900);
}

.hft-blog-card-readmore .hft-arrow {
  margin-left: 0.25rem;
}

/* ============================================
   Blog Archive — Pagination (HFT Blog Archive Grid)
   ============================================ */

.hft-blog-pagination {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  margin-top: 3rem;
}

.hft-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--color-primary-300);
  background: #FFFFFF;
  color: var(--color-primary-700);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.hft-page-btn:hover {
  background-color: var(--color-primary-50);
  text-decoration: none;
  color: var(--color-primary-700);
}

.hft-page-btn.hft-page-active {
  background-color: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-900);
  font-weight: 600;
}

.hft-page-prev {
  border-radius: 0.375rem 0 0 0.375rem;
}

.hft-page-next {
  border-radius: 0 0.375rem 0.375rem 0;
}

/* Collapse adjacent borders */
.hft-page-btn + .hft-page-btn {
  margin-left: -1px;
}

/* Disabled read-more for empty state */
.hft-blog-card-readmore--disabled {
  color: var(--color-primary-400);
  cursor: default;
}

/* ============================================
   Single Post Template
   ============================================ */

/* Category badges — pill style matching Astro */
.hft-post-categories .elementor-post-info__terms-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hft-post-categories .elementor-post-info__terms-list a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: var(--color-primary-100);
  color: var(--color-primary-800) !important;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: background-color 0.3s;
}

.hft-post-categories .elementor-post-info__terms-list a:hover {
  background: var(--color-primary-200);
  color: var(--color-primary-900) !important;
}

.hft-post-categories .elementor-post-info__terms-list-separator {
  display: none;
}

/* Author + date meta row */
.hft-post-meta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hft-post-meta-row .elementor-icon-list-items {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Author box — inline layout matching Astro */
.hft-author-box .elementor-author-box {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 1rem;
}

.hft-author-box .elementor-author-box__avatar {
  flex-shrink: 0;
  margin: 0 !important;
}

.hft-author-box .elementor-author-box__avatar img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 9999px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

.hft-author-box .elementor-author-box__text {
  flex-grow: 1;
}

.hft-author-box .elementor-author-box__name {
  color: var(--color-primary-900) !important;
  font-weight: 500;
  font-size: 1rem;
  margin: 0;
}

/* Post date styling next to author */
.hft-post-date .elementor-post-info__item {
  color: #6B7280;
  font-size: 0.9375rem;
}

.hft-post-date .elementor-post-info__item--type-date {
  color: #6B7280;
}

.hft-post-date .elementor-icon {
  display: none;
}

/* Dot separator between author and date */
.hft-post-dot {
  color: #9CA3AF;
  font-size: 0.875rem;
  line-height: 1;
}

/* Featured image — rounded, shadow, aspect-video */
.hft-post-featured-image {
  overflow: hidden;
  border-radius: 1rem;
}

.hft-post-featured-image img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* Remove Elementor default column padding in single post */
.single-post .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
  padding: 0;
}

/* ============================================
   Prose / Content Overrides (post body)
   ============================================ */
.hft-prose {
  font-size: 1.125rem;
  color: #374151;
  line-height: 1.85;
}

.hft-prose p {
  margin-bottom: 1.5rem;
  color: #374151;
}

.hft-prose p:last-child {
  margin-bottom: 0;
}

.hft-prose h2 {
  font-family: var(--font-serif);
  color: var(--color-primary-900);
  font-size: 1.875rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.hft-prose h3 {
  font-family: var(--font-serif);
  color: var(--color-primary-900);
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.hft-prose h4 {
  font-family: var(--font-serif);
  color: var(--color-primary-900);
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.hft-prose a {
  color: var(--color-primary-600);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.hft-prose a:hover {
  color: var(--color-primary-800);
  text-decoration: underline;
}

.hft-prose strong {
  color: var(--color-primary-900);
  font-weight: 600;
}

.hft-prose blockquote {
  background: var(--color-primary-50);
  border-left: 4px solid var(--color-primary-300);
  padding: 0.75rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 0.5rem 0.5rem 0;
  font-style: italic;
  color: #374151;
}

.hft-prose blockquote p {
  margin-bottom: 0.5rem;
}

.hft-prose blockquote p:last-child {
  margin-bottom: 0;
}

.hft-prose ul,
.hft-prose ol {
  margin: 1rem 0 1.5rem;
  padding-left: 1.5rem;
  color: #374151;
}

.hft-prose ul {
  list-style: disc;
}

.hft-prose ol {
  list-style: decimal;
}

.hft-prose li {
  margin-bottom: 0.5rem;
  line-height: 1.75;
}

.hft-prose li::marker {
  color: var(--color-primary-500);
}

.hft-prose img {
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  margin: 1.5rem 0;
  max-width: 100%;
  height: auto;
}

.hft-prose code {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  font-size: 0.875em;
}

.hft-prose pre {
  background: #111827;
  color: #f9fafb;
  padding: 1.25rem;
  border-radius: 0.75rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  line-height: 1.7;
}

.hft-prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

.hft-prose hr {
  border: none;
  border-top: 1px solid #E5E7EB;
  margin: 2rem 0;
}

/* WordPress block specific */
.hft-prose .wp-block-paragraph {
  margin-bottom: 1.5rem;
}

.hft-prose .wp-block-heading {
  font-family: var(--font-serif);
  color: var(--color-primary-900);
}

.hft-prose .wp-block-image {
  margin: 2rem 0;
}

.hft-prose .wp-block-image img {
  border-radius: 0.75rem;
}

.hft-prose .wp-block-quote {
  background: var(--color-primary-50);
  border-left: 4px solid var(--color-primary-300);
  padding: 0.75rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 0.5rem 0.5rem 0;
}

.hft-prose .wp-block-separator {
  border-color: #E5E7EB;
  margin: 2.5rem 0;
}

/* Back to blog link */
.hft-back-to-blog .elementor-button {
  padding: 0 !important;
  font-size: 0.9375rem;
}

/* ============================================
   Header — transparent on top, white on scroll
   ============================================ */
.hft-header {
  background-color: transparent !important;
  box-shadow: none !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.hft-header.scrolled {
  background-color: #FFFFFF !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   Footer
   ============================================ */
.elementor-location-footer .elementor-icon-list-item a {
  color: #374151 !important;
  transition: color 0.2s;
}

.elementor-location-footer .elementor-icon-list-item a:hover {
  color: var(--color-primary-700) !important;
}

.elementor-location-footer .elementor-icon-list-icon i {
  color: var(--color-primary-700) !important;
  transition: color 0.2s;
}

.elementor-location-footer .elementor-icon-list-icon i:hover {
  color: var(--color-primary-900) !important;
}

/* ============================================
   CTA Decorative Circles
   ============================================ */
.hft-cta-card {
  position: relative;
  overflow: hidden;
}

.hft-cta-card::before,
.hft-cta-card::after {
  content: '';
  position: absolute;
  width: 16rem;
  height: 16rem;
  border-radius: 9999px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.hft-cta-card::before {
  top: 0;
  right: 0;
  background-color: var(--color-primary-200);
  transform: translate(33%, -33%);
}

.hft-cta-card::after {
  bottom: 0;
  left: 0;
  background-color: var(--color-accent-200);
  transform: translate(-33%, 33%);
}

.hft-cta-card > .e-con-inner,
.hft-cta-card > .elementor-widget-wrap,
.hft-cta-card > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   Contact Page — Office Location Card
   ============================================ */
.hft-office-location-card {
  background: rgba(250, 247, 242, 0.6);
  border: 1px solid var(--color-primary-100);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 16rem;
}

/* ============================================
   Elementor Overrides
   ============================================ */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-serif);
  color: #735F29;
}

.elementor-button.btn-primary,
.elementor-button.elementor-button-primary {
  background-color: var(--color-primary-600);
}

.elementor-button.btn-primary:hover,
.elementor-button.elementor-button-primary:hover {
  background-color: var(--color-primary-700);
}

/* Button focus ring — matches Astro focus:ring-2 ring-primary-500 ring-offset-2 */
.elementor-button:focus,
.elementor-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--color-primary-500);
  transition: box-shadow 0.3s ease;
}

.elementor-button {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}