/*
Theme Name: Aishat'B
Theme URI: https://aishatb.com
Author: Aishat Babaji
Description: Custom theme for Aishat'B - Speaker, Educator & Media Personality
Version: 1.0
*/

/* Google Fonts are loaded in header.php */

body,
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-button .elementor-button,
.elementor *,
.elementor-page-content * {
  font-family: "Inter", Arial, Helvetica, sans-serif;
}

body {
  color: #313131;
  background: #ffffff;
}

html { scroll-behavior: smooth; }

.font-script { font-family: "Alex Brush", cursive !important; }

/* Force full-width Elementor sections */
.elementor-section.elementor-section-full_width > .elementor-container {
  max-width: 100% !important;
  padding: 0 !important;
}
.elementor-section.elementor-section-full_width .elementor-column-wrap,
.elementor-section.elementor-section-full_width .elementor-widget-wrap,
.elementor-section.elementor-section-full_width .elementor-element-populated {
  padding: 0 !important;
}

/* Remove default Elementor column gaps */
.elementor-section .elementor-container {
  max-width: 100%;
}
.elementor-column-gap-default > .elementor-column > .elementor-element-populated {
  padding: 0;
}
.elementor-column-gap-no > .elementor-column > .elementor-element-populated {
  padding: 0 !important;
}

/* Ensure Elementor images fill their containers */
.elementor-widget-image img {
  width: 100%;
  height: auto;
}

/* Remove margin/padding on HTML widgets inside full-width sections */
.elementor-widget-html {
  width: 100%;
}

/* Ensure stretched sections have no overflow issues */
.elementor-section-stretched {
  overflow: visible !important;
}

.btn-primary {
  background: linear-gradient(to right, #fb8c00, #7B3FA0);
  color: #fff;
  border-radius: 0.25rem;
  padding: 0.85em 2em;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-block;
  transition: opacity 0.3s ease;
  text-decoration: none;
}
.btn-primary:hover { opacity: 0.9; color: #fff; }

.btn-secondary {
  background: linear-gradient(to right, #fb8c00, #7B3FA0);
  color: #fff;
  border-radius: 0.25rem;
  padding: 0.85em 2em;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-block;
  transition: opacity 0.3s ease;
  text-decoration: none;
}
.btn-secondary:hover { opacity: 0.9; color: #fff; }

/* ──── Responsive grid classes for Elementor HTML widgets ──── */

/* 2-column layouts (about, educator, booking, speaking, humanitarian) */
.aishatb-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-family: "Inter", Arial, Helvetica, sans-serif;
}

/* 3-column layouts (testimonials, cards, topics) */
.aishatb-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  font-family: "Inter", Arial, Helvetica, sans-serif;
}

/* 6-column layouts (roles labels & images) */
.aishatb-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

/* 4-column masonry for gallery */
.aishatb-gallery {
  columns: 4;
  column-gap: 12px;
}

@media (max-width: 1024px) {
  .aishatb-grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }
  .aishatb-gallery {
    columns: 3;
  }
}

@media (max-width: 768px) {
  .aishatb-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .aishatb-grid-3 {
    grid-template-columns: 1fr !important;
  }
  .aishatb-grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }
  .aishatb-gallery {
    columns: 2;
  }
  /* Fix padding on stacked columns */
  .aishatb-grid-2 > div {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* Ensure portrait image has a fixed height on mobile */
  .aishatb-grid-2 > div:first-child img {
    position: relative !important;
    height: 400px !important;
    min-height: auto !important;
  }
  .aishatb-grid-2 > div:first-child {
    min-height: 400px !important;
  }
}

@media (max-width: 480px) {
  .aishatb-grid-3 {
    grid-template-columns: 1fr !important;
  }
  .aishatb-gallery {
    columns: 2;
  }
}

@keyframes pulse { 50% { opacity: 0; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate-fadeIn { animation: fadeIn 0.8s ease-in-out; }