/*
Theme Name: Hello Elementor Child
Template: hello-elementor
*/

/*
--------------------------------------------------------------
🌿 Fluid Layout System for Elementor / WordPress
Author: [Your Name]
Description: Combines fluid gap & fluid container system
--------------------------------------------------------------
*/

/* ==========================================================
   🧩 GLOBAL VARIABLES
   ========================================================== */
:root {
  /* ---------- Global Gap Variables ---------- */
  --gap-xxs: clamp(0.25rem, calc(0.45vw + 0.14rem), 0.5rem);  /* 4px → 8px */
  --gap-xs: clamp(0.5rem, calc(0.45vw + 0.39rem), 0.75rem);   /* 8px → 12px */
  --gap-s: clamp(0.75rem, calc(0.45vw + 0.64rem), 1rem);      /* 12px → 16px */
  --gap-m: clamp(1.25rem, calc(0vw + 1.25rem), 1.25rem);      /* fixed 20px */
  --gap-l: clamp(1.25rem, calc(2.27vw + 0.68rem), 2.5rem);    /* 20px → 40px */
  --gap-xl: clamp(1.25rem, calc(4.55vw + 0.11rem), 3.75rem);  /* 20px → 60px */
  --gap-xxl: clamp(1.25rem, calc(11.36vw - 1.59rem), 7.5rem); /* 20px → 120px */

  /* ---------- Global Padding Variables ---------- */
  --fluid-side-padding-min: 1.25rem; /* 20px */
  --fluid-side-padding-max: 5rem;   /* 80px */

  /* Section Vertical Padding */
  --section-xxl-padding-min: 9.375rem; /* 150px */
  --section-xxl-padding-max: 10rem;    /* 160px */
  --section-xl-padding-min: 6.875rem;  /* 110px */
  --section-xl-padding-max: 7.5rem;    /* 120px */
  --section-l-padding-min: 5.625rem;   /* 90px */
  --section-l-padding-max: 6.25rem;    /* 100px */
  --section-m-padding-min: 5rem;       /* 80px */
  --section-m-padding-max: 5rem;       /* 80px */
  --section-s-padding-min: 3.75rem;    /* 60px */
  --section-s-padding-max: 3.75rem;    /* 60px */
  --section-xs-padding-min: 2.5rem;    /* 40px */
  --section-xs-padding-max: 2.5rem;    /* 40px */
  --section-xxs-padding-min: 1.5rem;   /* 24px */
  --section-xxs-padding-max: 1.5rem;   /* 24px */
  --section-header-padding-min: 1.25rem; /* 20px */
  --section-header-padding-max: 1.25rem; /* 20px */

  /* Other Layout Variables */
  --section-hero-height: 100vh;
  --section-offset-header: 80px;
  --section-narrow: 62.5rem;  /* 1000px */
  --section-narrow-xs: 45rem; /* 720px */
}

/* ==========================================================
   🎯 GAP CLASSES
   ========================================================== */
.gap-xxs, .gap-xxs .e-con-inner { gap: var(--gap-xxs); }
.gap-xs,  .gap-xs .e-con-inner  { gap: var(--gap-xs); }
.gap-s,   .gap-s .e-con-inner   { gap: var(--gap-s); }
.gap-m,   .gap-m .e-con-inner   { gap: var(--gap-m); }
.gap-l,   .gap-l .e-con-inner   { gap: var(--gap-l); }
.gap-xl,  .gap-xl .e-con-inner  { gap: var(--gap-xl); }
.gap-xxl, .gap-xxl .e-con-inner { gap: var(--gap-xxl); }

/* ==========================================================
   🧱 SECTION / CONTAINER PADDING (Fluid)
   ========================================================== */

/* XXL Section */
.section-xxl {
  padding-top: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
  padding-bottom: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max)) !important;
}

/* XL Section */
.section-xl {
  padding-top: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
  padding-bottom: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max)) !important;
}

/* L Section */
.section-l {
  padding-top: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  padding-bottom: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max)) !important;
}

/* M Section */
.section-m {
  padding-top: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
  padding-bottom: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max)) !important;
}

/* S Section */
.section-s {
  padding-top: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
  padding-bottom: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max)) !important;
}

/* XS Section */
.section-xs {
  padding-top: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
  padding-bottom: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max)) !important;
}

/* XXS Section */
.section-xxs {
  padding-top: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
  padding-bottom: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max)) !important;
}

/* Header Section */
.section-header {
  padding-top: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
  padding-bottom: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
  padding-left: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, var(--fluid-side-padding-max)) !important;
}

/* ==========================================================
   🎡 HERO, FULL & NARROW SECTIONS
   ========================================================== */

/* Hero Section */
.section-hero {
  min-height: var(--section-hero-height) !important;
}
.section-hero .e-con-inner {
  justify-content: center !important;
}

/* Full Width */
.section-full div {
  max-width: 100% !important;
}

/* Narrow Widths */
.section-narrow .e-con-inner {
  max-width: var(--section-narrow) !important;
}
.section-narrow-xs .e-con-inner {
  max-width: var(--section-narrow-xs) !important;
}

/* Offset Header Padding */
.section-offset {
  padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
}