/* Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* =========================================
   1. CSS VARIABLES & ROOT
   ========================================= */

:root {
  /* Using 1rem = 16px */
  --base-font-size: 16px;

  /* Padding */
  --padding-small: 2.5rem;
  --padding-medium: 3.5rem;
  --padding-large: clamp(5rem, 1.667rem + 4.444vw, 7rem);

  /* Layout */
  --max-content-width: 84vw;
  --content-width: 1280px;
  --side-padding: calc((100vw - var(--max-content-width)) / 2);
}

/* =========================================
   2. LAYOUT & SPACING UTILITIES
   ========================================= */

.e-con > .e-con-inner {
  width: var(--max-content-width);
  max-width: var(--content-width);
}

.wide.e-con > .e-con-inner {
  width: var(--content-width);
}

/* Padding Utilities */
.pt-lg { padding-top: var(--padding-large); }
.pt-md { padding-top: var(--padding-medium); }
.pt-sm { padding-top: var(--padding-small); }

.pb-lg { padding-bottom: var(--padding-large); }
.pb-md { padding-bottom: var(--padding-medium); }
.pb-sm { padding-bottom: var(--padding-small); }


.floating-item-left,
.floating-item-right,
.floating-item-center {
    will-change: transform; /* Tells the browser to optimize this element */
    transition: transform 0.1s ease-out; /* Adds a tiny micro-smooth to the JS */
}


/* =========================================
   CUSTOM FONTS
   ========================================= */

@font-face {
    font-family: 'Khalila';
    src: url('https://www.iddy.banghosting.com.au/wp-content/uploads/2026/03/Khalila.woff2') format('woff2'),
         url('https://www.iddy.banghosting.com.au/wp-content/uploads/2026/03/Khalila.woff') format('woff'),
         url('https://www.iddy.banghosting.com.au/wp-content/uploads/2026/03/Khalila.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* Weight: 600 */
@font-face {
    font-family: 'Behind the Nineties';
    src: url('https://www.iddy.banghosting.com.au/wp-content/uploads/2026/03/Behind-The-Nineties-SemiBold.woff2') format('woff2'),
         url('https://www.iddy.banghosting.com.au/wp-content/uploads/2026/03/Behind-The-Nineties-SemiBold.woff') format('woff'),
         url('https://www.iddy.banghosting.com.au/wp-content/uploads/2026/03/Behind-The-Nineties-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Weight: 400 */
@font-face {
    font-family: 'Behind the Nineties';
    src: url('https://www.iddy.banghosting.com.au/wp-content/uploads/2026/03/Behind-The-Nineties-Regular.woff2') format('woff2'),
         url('https://www.iddy.banghosting.com.au/wp-content/uploads/2026/03/Behind-The-Nineties-Regular.woff') format('woff'),
         url('https://www.iddy.banghosting.com.au/wp-content/uploads/2026/03/Behind-The-Nineties-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Weight: 500 */
@font-face {
    font-family: 'Behind the Nineties';
    src: url('https://www.iddy.banghosting.com.au/wp-content/uploads/2026/03/Behind-The-Nineties-Medium.woff2') format('woff2'),
         url('https://www.iddy.banghosting.com.au/wp-content/uploads/2026/03/Behind-The-Nineties-Medium.woff') format('woff'),
         url('https://www.iddy.banghosting.com.au/wp-content/uploads/2026/03/Behind-The-Nineties-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}



/* =========================================
   3. DIVIDERS & MASKS
   ========================================= */

.top-divider, 
.bottom-divider {
  /* We added + 2px to the second height calculation to force an overlap */
  -webkit-mask-size: 100% var(--padding-large), 100% calc(100% - var(--padding-large) + 2px);
  mask-size: 100% var(--padding-large), 100% calc(100% - var(--padding-large) + 2px);
  
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.top-divider {
  -webkit-mask-position: 50% 0%, 50% 100%;
  mask-position: 50% 0%, 50% 100%;
  padding-top: var(--padding-large); 
  margin-top: calc(var(--padding-large) * -1);
}

.bottom-divider {
  -webkit-mask-position: bottom, top;
  mask-position: bottom, top;
  padding-bottom: var(--padding-large); 
  margin-bottom: calc(var(--padding-large) * -1); 
  z-index: 1 !important;
}

/* =========================================
   4. GRAINY BACKGROUNDS
   ========================================= */

.grainy-background {
  /* Default fallback colors (Orange) */
  --bg-color: #D16E11;
  --noise-color: #D15000;
  
  background-color: var(--bg-color);
  position: relative;
  z-index: 0;
}

.grainy-background > * {
  position: relative;
  z-index: 1;
}

.grainy-background::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background-color: var(--noise-color);
  
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='luminanceToAlpha'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='black' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='luminanceToAlpha'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 0 0 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='black' filter='url(%23n)'/%3E%3C/svg%3E");

  -webkit-mask-size: 300px 300px;
  mask-size: 300px 300px;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: -1; 
}

/* Color Variations */
.grainy-orange {
  --bg-color: #D16E11;
  --noise-color: #D15000;
}
.grainy-red {
  --bg-color: #D85252; 
  --noise-color: #D82E01; 
}
.grainy-blue {
  --bg-color: #85A3BF; 
  --noise-color: #85901C; 
}
.grainy-brown {
  --bg-color: #3C2A2A; 
  --noise-color: #3C0000; 
}

/* =========================================
   5. TYPOGRAPHY
   ========================================= */

/* Shared Typography Styles */
h1, .h1-style, 
h2, .h2-style, 
h3, .h3-style, 
.button-text, .elementor-button {
  font-family: "Behind The Nineties", sans-serif;
}

h5, .h5-style, 
h6, .h6-style, 
.large-body, 
body, .body-text, 
.small-body {
  font-family: "Inter", sans-serif;
}

h1 i, h2 i, h3 i, h4 i, h5 i, h6 i {
  font-family: "Khalila", sans-serif;
  font-weight: 400;
  font-size: 120%;
  margin-right: 0.15em;
}

/* Specific Typography Rules */
h1, .h1-style {
  font-size: 4.505rem; /* 72.087px */
  font-weight: 600;
  line-height: 1.12em !important; 
  letter-spacing: -0.03em;
  color: #3C2A2A;
  text-align: center;
}

h2, .h2-style {
  font-size: 3.75rem; /* 60px */
  font-weight: 600;
  line-height: 1.2em !important;
  letter-spacing: -0.03em;
  color: #3C2A2A;
  text-align: center;
}

h3, .h3-style {
  font-size: 2.75rem; /* 44px */
  font-weight: 700;
  line-height: 1.2em !important;
  color: #000;
}

h4, .h4-style {
  font-family: "Butler", serif;
  font-size: 1.728rem; /* 27.646px */
  font-weight: 700;
  line-height: 1.2em !important;
  color: #000;
}

h5, .h5-style {
  font-size: 1rem; /* 16px */
  font-weight: 700;
  line-height: 1.875em;
  text-align: center;
  color: #000;
}

h6, .h6-style {
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  line-height: 1.6em;
  color: #000;
}

.large-body {
  font-size: 1.25rem; /* 20px */
  font-weight: 400;
  line-height: 1.5em;
}

body, .body-text {
  font-size: 1rem; /* 16px */
  font-weight: 400;
  line-height: 1.6em;
}

.small-body {
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  line-height: 1.6em;
}

.button-text, .elementor-button {
  font-size: 1.125rem; /* 18px */
  font-weight: 500;
  line-height: 1.6em;
  letter-spacing: 0.01em;
  border-radius: 100px;
  padding: 16px 34px;
}

.menu-text {
  font-family: "Khalila", sans-serif;
  font-size: 1.396rem; /* 22.343px */
  font-weight: 400;
  line-height: 1.111em;
}

/* =========================================
   6. UNDERLINES
   ========================================= */

.light-underline u, 
.dark-underline u {
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.light-underline u::after, 
.dark-underline u::after {
  content: ""; 
  position: absolute;
  left: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%; 
  z-index: -1;
}

.light-underline u::after {
  bottom: -0.01em;
  height: 0.12em;
  background-image: url('https://www.iddy.banghosting.com.au/wp-content/uploads/2026/03/line-2.svg');
}

.dark-underline u::after {
  bottom: -0.1em;
  height: 0.25em;
  background-image: url('https://www.iddy.banghosting.com.au/wp-content/uploads/2026/03/line-6.svg');
}

/* =========================================
   7. MEDIA QUERIES
   ========================================= */

/* --- TABLET (Under 1024px) --- */
@media only screen and (max-width: 1024px) {
  :root {
    --padding-small: 1.5rem;
    --padding-medium: 2rem;
    --padding-large: 4rem;
  }
  
  .pt-none-md { padding-top: 0; }
  .pb-none-md { padding-bottom: 0; }
  
  h1, .h1-style { font-size: 3.5rem; } /* ~56px */
  h2, .h2-style { font-size: 3rem; }   /* ~48px */
  h3, .h3-style { font-size: 2.25rem; }/* ~36px */
  h4, .h4-style { font-size: 1.5rem; }  /* ~24px */
  
  .large-body { font-size: 1.125rem; } /* 18px */
  .menu-text { font-size: 1.25rem; }   /* 20px */
}

/* --- MOBILE (Under 767px) --- */
@media only screen and (max-width: 767px) {
  :root {
    --padding-small: 1rem;
    --padding-medium: 1.5rem;
    --padding-large: 2.5rem;
  }

  .pt-none-sm { padding-top: 0; }
  .pb-none-sm { padding-bottom: 0; }
  
  h1, .h1-style { font-size: 2.75rem; letter-spacing: -0.02em; } /* ~44px */
  h2, .h2-style { font-size: 2.25rem; letter-spacing: -0.02em; } /* ~36px */
  h3, .h3-style { font-size: 1.875rem; } /* ~30px */
  h4, .h4-style { font-size: 1.375rem; } /* ~22px */
  h5, .h5-style { font-size: 0.938rem; } /* ~15px */
  
  .large-body { font-size: 1rem; } /* Drops to 16px for mobile ease */
  .menu-text { font-size: 1.125rem; } /* 18px */
  
  .elementor-button {
    padding: 6px 22px;
  }
}