/*
Theme Name:  Purple Elephant — Flatsome Child
Theme URI:   https://www.purpleelephant.org.uk
Description: Flatsome child theme for Purple Elephant Family Support CIO.
             All page layouts are built with the native UX Builder shortcodes so every
             section can be edited visually without touching code.
Author:      Purple Elephant Family Support
Author URI:  https://www.purpleelephant.org.uk
Template:    flatsome
Version:     2.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pe-flatsome
Tags:        charity, children, family, flatsome, ux-builder
*/

/* ============================================================
   DESIGN TOKENS
   These override / extend Flatsome's own CSS variables and
   can be referenced anywhere in custom CSS or via Flatsome's
   "Custom CSS" panel.
   ============================================================ */
:root {
  --pe-purple:        #6B3FA0;
  --pe-purple-light:  #8F5CC7;
  --pe-purple-pale:   #F0E9FB;
  --pe-purple-deep:   #3D1A6B;
  --pe-gold:          #F5A623;
  --pe-gold-light:    #FFD07A;
  --pe-gold-pale:     #FFF7E6;
  --pe-teal:          #00A99D;
  --pe-teal-light:    #4DC9C2;
  --pe-coral:         #F05A4F;
  --pe-off-white:     #FAFAF7;
  --pe-cream:         #FDF8F0;
  --pe-grey:          #6E6860;

  --pe-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --pe-ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Override Flatsome primary colour */
  --primary-color:    #6B3FA0;
}

/* ============================================================
   GLOBAL TYPOGRAPHY
   ============================================================ */
body {
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.ux-builder h1, .ux-builder h2 {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pe-purple-deep);
}

/* ============================================================
   FLATSOME COLOUR OVERRIDES
   ============================================================ */
:root {
  --color-primary: var(--pe-purple);
}

/* Buttons */
.button,
.btn,
button[type="submit"],
input[type="submit"] {
  border-radius: 9999px !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  transition:
    transform 0.3s var(--pe-ease-spring),
    box-shadow 0.3s var(--pe-ease-smooth) !important;
}
.button:hover,
.btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
}

/* ============================================================
   HEADER OVERRIDES
   ============================================================ */
/* Make sticky header slightly translucent with blur */
#header.is-sticky {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Logo wobble */
.header-logo img {
  transition: transform 0.4s var(--pe-ease-spring);
}
.header-logo:hover img {
  transform: scale(1.08) rotate(-4deg);
}

/* Nav links */
.nav > li > a {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 0.4rem;
  transition: background-color 0.15s, color 0.15s !important;
}

/* ============================================================
   UX BANNER (Hero) OVERRIDES
   ============================================================ */
.banner .text-box {
  font-family: 'Lato', sans-serif;
}

/* Animated polka-dot overlay for hero banners */
.pe-hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1.5px, transparent 1.5px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 1;
}

/* Morphing blob shapes inside banners */
.pe-blob {
  border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%;
  animation: pe-blob-morph 10s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pe-blob-morph {
  0%, 100% { border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%; }
  33%       { border-radius: 45% 55% 40% 60% / 40% 60% 45% 55%; }
  66%       { border-radius: 55% 45% 60% 40% / 60% 40% 55% 45%; }
}

/* ============================================================
   SECTION ROW OVERRIDES — match Purple Elephant brand sections
   ============================================================ */
.pe-section-purple-deep {
  background: linear-gradient(135deg, var(--pe-purple-deep) 0%, var(--pe-purple) 100%);
}
.pe-section-purple-deep * {
  color: rgba(255,255,255,0.88);
}
.pe-section-purple-deep h1,
.pe-section-purple-deep h2,
.pe-section-purple-deep h3 {
  color: #fff;
}

.pe-section-gold { background: var(--pe-gold-pale); }
.pe-section-cream { background: var(--pe-cream); }
.pe-section-teal {
  background: linear-gradient(135deg, var(--pe-teal), var(--pe-teal-light));
}
.pe-section-teal * { color: rgba(255,255,255,0.88); }
.pe-section-teal h1,
.pe-section-teal h2,
.pe-section-teal h3 { color: #fff; }

/* Polka dot overlays for dark sections */
.pe-dots::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   SERVICE / NEWS CARDS
   ============================================================ */
/* Flatsome image_box & ux_image_box hover improvements */
.image-box,
.ux-image-box {
  border-radius: 1.5rem !important;
  overflow: hidden;
  transition:
    transform 0.3s var(--pe-ease-spring),
    box-shadow 0.3s var(--pe-ease-smooth) !important;
  box-shadow: 0 2px 12px rgba(107,63,160,0.07);
}
.image-box:hover,
.ux-image-box:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 16px 48px rgba(107,63,160,0.18) !important;
}

/* Image zoom on card hover */
.image-box .image-cover img,
.ux-image-box img {
  transition: transform 0.6s var(--pe-ease-smooth) !important;
}
.image-box:hover .image-cover img,
.ux-image-box:hover img {
  transform: scale(1.06) !important;
}

/* ============================================================
   IMPACT STAT BOXES
   ============================================================ */
.pe-stat-box {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 1.2rem;
  padding: 2rem 1rem;
  text-align: center;
  transition: transform 0.3s var(--pe-ease-spring), background 0.3s;
  cursor: default;
}
.pe-stat-box:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.16);
}
.pe-stat-box .stat-num {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color: var(--pe-gold-light);
  line-height: 1;
  display: block;
  margin-bottom: 0.3rem;
}
.pe-stat-box .stat-label {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.4;
}
.pe-stat-icon { font-size: 2rem; margin-bottom: 0.65rem; display: block; }

/* ============================================================
   DONATE AMOUNT SELECTOR
   ============================================================ */
.pe-donate-btn {
  background: #fff;
  border: 2.5px solid var(--pe-gold);
  border-radius: 1rem;
  padding: 0.9rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s var(--pe-ease-spring);
  display: block;
}
.pe-donate-btn:hover,
.pe-donate-btn.active {
  background: var(--pe-gold);
  transform: scale(1.05);
}
.pe-donate-btn .pe-donate-val {
  font-family: 'Nunito', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--pe-purple-deep);
  display: block;
}
.pe-donate-btn:hover .pe-donate-val,
.pe-donate-btn.active .pe-donate-val { color: #fff; }
.pe-donate-btn .pe-donate-label {
  font-size: 0.72rem;
  color: var(--pe-grey);
}
.pe-donate-btn:hover .pe-donate-label,
.pe-donate-btn.active .pe-donate-label { color: rgba(255,255,255,0.8); }

/* ============================================================
   SECTION LABELS (eyebrow text)
   ============================================================ */
.pe-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Nunito', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pe-purple-light);
  margin-bottom: 0.75rem;
}
.pe-section-label::before,
.pe-section-label::after {
  content: '';
  display: block;
  width: 1.8rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.pe-section-label-gold { color: var(--pe-gold-light); }

/* ============================================================
   ANNOUNCEMENT BAR (top bar custom HTML)
   ============================================================ */
.pe-announce-bar {
  background: linear-gradient(90deg, var(--pe-gold), #f7bc54);
  padding: 0.65rem 0;
}
.pe-announce-bar p {
  margin: 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--pe-purple-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.pe-announce-bar a {
  background: var(--pe-purple-deep);
  color: #fff !important;
  padding: 0.4em 1.1em;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  transition: background 0.2s, transform 0.25s var(--pe-ease-spring);
  text-decoration: none;
}
.pe-announce-bar a:hover {
  background: var(--pe-purple);
  transform: scale(1.04);
}

/* ============================================================
   TESTIMONIAL CARDS
   ============================================================ */
.pe-testi {
  background: #fff;
  border-radius: 1.5rem;
  padding: 1.75rem;
  box-shadow: 0 2px 12px rgba(107,63,160,0.07);
  position: relative;
  transition: transform 0.3s var(--pe-ease-spring), box-shadow 0.3s;
  height: 100%;
}
.pe-testi:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(107,63,160,0.15);
}
.pe-testi::before {
  content: '\201C';
  position: absolute;
  top: 0.75rem; right: 1.2rem;
  font-family: 'Caveat', cursive;
  font-size: 5rem;
  color: var(--pe-purple-pale);
  line-height: 1;
  pointer-events: none;
}
.pe-testi-stars { color: var(--pe-gold); font-size: 0.9rem; margin-bottom: 0.6rem; }
.pe-testi-quote { font-size: 0.92rem; line-height: 1.7; color: #1E1B16; margin-bottom: 1.25rem; position: relative; z-index: 1; }
.pe-testi-author { display: flex; align-items: center; gap: 0.7rem; }
.pe-testi-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pe-purple-pale), var(--pe-gold-pale));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.pe-testi-name { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.88rem; color: var(--pe-purple-deep); }
.pe-testi-role { font-size: 0.74rem; color: var(--pe-grey); }

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
[data-pe-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.8s var(--pe-ease-smooth),
    transform 0.8s var(--pe-ease-smooth);
}
[data-pe-reveal].pe-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-pe-reveal][data-pe-delay="1"] { transition-delay: 0.1s; }
[data-pe-reveal][data-pe-delay="2"] { transition-delay: 0.2s; }
[data-pe-reveal][data-pe-delay="3"] { transition-delay: 0.3s; }
[data-pe-reveal][data-pe-delay="4"] { transition-delay: 0.4s; }

/* ============================================================
   FLOATING BADGE ANIMATION (hero)
   ============================================================ */
.pe-float {
  animation: pe-float 3.5s ease-in-out infinite;
}
.pe-float-delay {
  animation: pe-float 3.5s ease-in-out infinite;
  animation-delay: -1.75s;
}
@keyframes pe-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ============================================================
   HERO WAVE DIVIDER
   ============================================================ */
.pe-wave-bottom {
  position: relative;
  z-index: 2;
  margin-bottom: -2px;
  line-height: 0;
}
.pe-wave-bottom svg { display: block; width: 100%; }

/* ============================================================
   SMS DONATE BOX
   ============================================================ */
.pe-sms-box {
  background: #fff;
  border: 2px solid #EEECE8;
  border-radius: 1rem;
  padding: 1.1rem 1.2rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}
.pe-sms-box strong {
  display: block;
  font-family: 'Nunito', sans-serif;
  color: var(--pe-purple-deep);
  margin-bottom: 0.3rem;
}
.pe-sms-box code {
  background: var(--pe-purple-pale);
  color: var(--pe-purple);
  padding: 0.15em 0.5em;
  border-radius: 0.3rem;
  font-weight: 700;
}

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
#pe-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--pe-purple), var(--pe-gold));
  z-index: 99999;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
#pe-scroll-top {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  width: 44px; height: 44px;
  background: var(--pe-purple);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 6px 20px rgba(107,63,160,0.4);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: all 0.3s var(--pe-ease-spring);
  cursor: pointer;
  border: none;
  z-index: 9999;
}
#pe-scroll-top.pe-show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#pe-scroll-top:hover {
  background: var(--pe-purple-light);
  transform: translateY(-4px);
}

/* ============================================================
   FOOTER OVERRIDES
   ============================================================ */
.footer-1 {
  background: var(--pe-purple-deep) !important;
}
.footer-2 {
  background: #2a1050 !important;
}
footer a { transition: color 0.2s; }
footer a:hover { color: var(--pe-gold-light) !important; }

/* ============================================================
   FLATSOME SPECIFIC UTILITY PATCHES
   ============================================================ */
/* Ensure Flatsome rows inherit our radius on card rows */
.pe-card-row .col > * {
  height: 100%;
}

/* Divider colour override */
.divider.pe-divider { border-color: rgba(255,255,255,0.15); }

/* Badge chips */
.pe-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28em 0.85em;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: 'Nunito', sans-serif;
}
.pe-badge-purple { background: var(--pe-purple-pale); color: var(--pe-purple); }
.pe-badge-gold   { background: var(--pe-gold-pale);   color: var(--pe-gold); }
.pe-badge-teal   { background: #E0F5F4; color: var(--pe-teal); }

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 768px) {
  .pe-stat-box { padding: 1.4rem 0.75rem; }
  .pe-testi { padding: 1.25rem; }
}