/*
Theme Name:   Journeys with Avio Child
Theme URI:    https://journeyswithavio.co.za
Description:  Child theme for Journeys with Avio — built on Flatsome
Author:       IWW
Author URI:   https://iww.co.za
Template:     flatsome
Version:      1.0.0
Text Domain:  jwa-child
*/


/* ============================================================
   BRAND TOKENS
   ============================================================ */

:root {
  --jwa-sage:        #6B7257;
  --jwa-terracotta:  #C4836A;
  --jwa-parchment:   #F7F0E8;
  --jwa-mist:        #9EAA8A;
  --jwa-blush:       #E8B4A0;
  --jwa-deep:        #2E2620;
  --jwa-sage-tint:   #EDF0E8;
}


/* ============================================================
   DECORATIVE ELEMENTS SYSTEM
   Usage: add an HTML widget in Elementor with a <div> carrying
   the relevant classes. Parent section must have class "deco-section".

   Example:
   <div class="deco deco-b-gold-swallow deco-lg deco-op-85 deco-rot-15"
        style="top:-20px;right:-30px;"></div>
   ============================================================ */


/* ── Base ── */
.deco {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}

/* Parent section must carry this class via Elementor > Advanced > CSS Classes */
.deco-section {
  position: relative !important;
  overflow: visible !important;
}


/* ── Asset classes ── */

.deco-b-gold-swallow {
  background-image: url('https://journeyswithavio.co.za/wp-content/uploads/2026/05/butterfly_5_gold_swallowtail.png');
}
.deco-b-pink-top {
  background-image: url('https://journeyswithavio.co.za/wp-content/uploads/2026/05/butterfly_6_pink_sideview_top.png');
}
.deco-b-pink-bottom {
  background-image: url('https://journeyswithavio.co.za/wp-content/uploads/2026/05/butterfly_7_pink_sideview_bottom.png');
}
.deco-b-gold-open {
  background-image: url('https://journeyswithavio.co.za/wp-content/uploads/2026/05/butterfly_8_gold_open.png');
}
.deco-b-orange {
  background-image: url('https://journeyswithavio.co.za/wp-content/uploads/2026/05/butterfly_1_orange.png');
}
.deco-b-blue {
  background-image: url('https://journeyswithavio.co.za/wp-content/uploads/2026/05/butterfly_2_blue.png');
}
.deco-b-pink {
  background-image: url('https://journeyswithavio.co.za/wp-content/uploads/2026/05/butterfly_3_pink.png');
}
.deco-b-yellow {
  background-image: url('https://journeyswithavio.co.za/wp-content/uploads/2026/05/butterfly_4_yellow.png');
}
.deco-heart {
  background-image: url('https://journeyswithavio.co.za/wp-content/uploads/2026/05/heart.png');
}
.deco-stem {
  background-image: url('https://journeyswithavio.co.za/wp-content/uploads/2026/05/stem.png');
}


/* ── Sizes ── */

.deco-xs  { width: 50px;  height: 50px;  }
.deco-sm  { width: 80px;  height: 80px;  }
.deco-md  { width: 130px; height: 130px; }
.deco-lg  { width: 200px; height: 200px; }
.deco-xl  { width: 280px; height: 280px; }
.deco-xxl { width: 380px; height: 380px; }

/* Stem is portrait — taller than wide */
.deco-stem.deco-sm  { width: 45px;  height: 120px; }
.deco-stem.deco-md  { width: 60px;  height: 160px; }
.deco-stem.deco-lg  { width: 90px;  height: 240px; }
.deco-stem.deco-xl  { width: 120px; height: 320px; }

/* Heart is square */
.deco-heart.deco-sm  { width: 60px;  height: 60px;  }
.deco-heart.deco-md  { width: 100px; height: 100px; }
.deco-heart.deco-lg  { width: 160px; height: 160px; }


/* ── Opacity ── */

.deco-op-20  { opacity: 0.20; }
.deco-op-30  { opacity: 0.30; }
.deco-op-50  { opacity: 0.50; }
.deco-op-70  { opacity: 0.70; }
.deco-op-85  { opacity: 0.85; }
.deco-op-100 { opacity: 1.00; }


/* ── Rotation ── */

.deco-rot-15  { transform: rotate(15deg);  }
.deco-rot-30  { transform: rotate(30deg);  }
.deco-rot-45  { transform: rotate(45deg);  }
.deco-rot-n15 { transform: rotate(-15deg); }
.deco-rot-n30 { transform: rotate(-30deg); }
.deco-rot-n45 { transform: rotate(-45deg); }
.deco-flip    { transform: scaleX(-1);     }
.deco-flip-15 { transform: scaleX(-1) rotate(15deg);  }
.deco-flip-n15{ transform: scaleX(-1) rotate(-15deg); }


/* ── Mobile: hide all decorations on small screens ── */

@media (max-width: 767px) {
  .deco { display: none !important; }
}


/* ============================================================
   HOMEPAGE SECTION PLACEMENTS
   Pre-built position combos — use alongside deco + asset + size classes
   ============================================================ */

/* Hero */
.deco-pos-hero-tr   { top: -30px;  right: -40px; }
.deco-pos-hero-tl   { top: -20px;  left:  -30px; }
.deco-pos-hero-br   { bottom: 20px; right: -30px; }
.deco-pos-hero-bl   { bottom: 20px; left:  -40px; }

/* Section corners */
.deco-pos-tr        { top: -20px;  right: -20px; }
.deco-pos-tl        { top: -20px;  left:  -20px; }
.deco-pos-br        { bottom: -20px; right: -20px; }
.deco-pos-bl        { bottom: -20px; left:  -20px; }

/* Floating mid-section */
.deco-pos-mid-r     { top: 50%; right: -30px;  transform: translateY(-50%) rotate(15deg);  }
.deco-pos-mid-l     { top: 50%; left:  -30px;  transform: translateY(-50%) rotate(-15deg); }


/* ============================================================
   GLOBAL BRAND STYLES
   ============================================================ */

/* Body background */
body {
  background-color: var(--jwa-parchment);
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Selection colour */
::selection {
  background: var(--jwa-blush);
  color: var(--jwa-deep);
}
/* Force hero overflow visible */
.hero-section,
.hero-section .e-con,
.hero-section .e-con-inner,
.hero-section > div,
body .hero-section {
  overflow: visible !important;
}