/*
Theme Name: Hello Biz Child
Theme URI: https://github.com/elementor/hello-biz-child/
Description: Hello Biz Child is a child theme of Hello Biz, created by Elementor team
Author: Elementor Team
Template: hello-biz
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Version: 1.0.0
Stable tag: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-biz-child
Tags: flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready, style-variations
*/


/* ------------ Font Style Rendering */

:root {
  --nhg-extra-light: 300;
  --nhg-light:       400;
  --nhg-roman:       500;
  --nhg-medium:      600;
  --nhg-bold:        700;
  --nhg-black:       900;
}

/* One-letter classes – drop straight into any Elementor Advanced → CSS Classes */

.el,.el .elementor-widget-container p,.el .elementor-heading-title {font-weight:var(--nhg-extra-light);}
.l,.l .elementor-widget-container p,.l .elementor-heading-title {font-weight:var(--nhg-light);}
.r,.r .elementor-widget-container p,.r .elementor-heading-title {font-weight:var(--nhg-roman);}
.m,.m .elementor-widget-container p,.m .elementor-heading-title {font-weight:var(--nhg-medium);}
.b,.b .elementor-widget-container p,.b .elementor-heading-title {font-weight:var(--nhg-bold);}
.k,.k .elementor-widget-container p,.k .elementor-heading-title {font-weight:var(--nhg-black);}

/* Keep your semantic ones too */

body {
  font-family: "Neue Haas Grotesk Display", sans-serif;
}


.font-black, .emphasis       { font-weight: var(--nhg-black); }
.font-light, .subtitle       { font-weight: var(--nhg-light); }
.font-extra-light, .eyebrow  { font-weight: var(--nhg-extra-light); }

/* Global defaults */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: var(--nhg-bold);margin-top:1em}
strong, b        { font-weight: var(--nhg-bold); }


/* line spacing overides - sizes controlled via clamps and my formulas, line spacing simply controlled here in three sizes */

:root {
  /* Open line spacing (0.875em – 1.5rem) */
  --e-global-typography-43f1047-line-height: 1.3;
  --e-global-typography-ae725dc-line-height: 1.3;
  --e-global-typography-2e5b87d-line-height: 1.3;
  --e-global-typography-cb2d1be-line-height: 1.3;
  --e-global-typography-fa9cdba-line-height: 1.3;
  --e-global-typography-692a5d7-line-height: 1.3;

  /* Moderate line spacing (1.625rem – 2.25rem) */
  --e-global-typography-33da33d-line-height: 1.2;
  --e-global-typography-ac9f7dd-line-height: 1.2;
  --e-global-typography-3db7361-line-height: 1.2;
  --e-global-typography-4cd416d-line-height: 1.2;
  --e-global-typography-cbb2405-line-height: 1.2;

  /* Tight line spacing (2.5rem and above) */
  --e-global-typography-b17144e-line-height: 1.1;
  --e-global-typography-244d707-line-height: 1.1;
  --e-global-typography-7ffdba0-line-height: 1.1;
}

/* Scoped override for legal pages */

.legal-page {
  --e-global-typography-primary-font-size: 0.8em!important;
  --e-global-typography-text-font-size: 0.8em!important;
}

/* Site-wide bullet restyle */

ul {list-style-position: outside;padding-left:20px;margin-bottom:1em}
ul li::marker {color: var(--e-global-color-76e9230); /* use Elementor Light Pale color */}


/* Text effects and decorations */

.underline-heading {border-bottom:2px solid var(--e-global-color-accent);padding-bottom:15px;}
.part-underline-heading :is(h1,h2,h3,h4,h5,h6) {border-bottom: 2px solid var(--e-global-color-accent);display: inline-block;padding-bottom: 5px;}
.red-heading-span span {color:var(--e-global-color-accent);font-weight:var(--nhg-bold);}


/* ------------ Layout items */

.wrapper {
  padding-inline: clamp(1.5rem, 5vw, 6rem);/* Optional: add max-width for very wide screens */
  max-width: min(90rem, 95vw);margin-inline: auto; /* centers it */
}

  /* Padding sizes - Vertical Padding */

:root {
  /* Base desktop values */
  --pad-thinner: 25px;
  --pad-thin: 60px;
  --pad-standard: 80px;
  --pad-fat: 100px;
  --pad-fatter: 200px;
  --pad-fattest: 300px;

  /* Responsive clamps (drop ~25% at min sizes) */
  --pad-thinner-top: clamp(20px, 5vw, 30px);
  --pad-thinner-bottom: calc(var(--pad-thinner-top) * 1.1);

  --pad-thin-top: clamp(45px, 6vw, 60px);
  --pad-thin-bottom: calc(var(--pad-thin-top) * 1.1);

  --pad-standard-top: clamp(60px, 7vw, 80px);
  --pad-standard-bottom: calc(var(--pad-standard-top) * 1.1);

  --pad-fat-top: clamp(75px, 8vw, 100px);
  --pad-fat-bottom: calc(var(--pad-fat-top) * 1.1);

  --pad-fatter-top: clamp(90px, 9.5vw, 200px);
  --pad-fatter-bottom: calc(var(--pad-fatter-top) * 1.1);

  --pad-fattest-top: clamp(150px, 12vw, 300px);
  --pad-fattest-bottom: calc(var(--pad-fattest-top) * 1.1);
}

/* Both sides (top + bottom) */

.pad-thinner   { padding-block: var(--pad-thinner-top) var(--pad-thinner-bottom); }
.pad-thin      { padding-block: var(--pad-thin-top) var(--pad-thin-bottom); }
.pad-standard  { padding-block: var(--pad-standard-top) var(--pad-standard-bottom); }
.pad-fat       { padding-block: var(--pad-fat-top) var(--pad-fat-bottom); }
.pad-fatter    { padding-block: var(--pad-fatter-top) var(--pad-fatter-bottom); }
.pad-fattest   { padding-block: var(--pad-fattest-top) var(--pad-fattest-bottom); }

/* Top only */

.pad-thinner-top   { padding-block-start: var(--pad-thinner-top); }
.pad-thin-top      { padding-block-start: var(--pad-thin-top); }
.pad-standard-top  { padding-block-start: var(--pad-standard-top); }
.pad-fat-top       { padding-block-start: var(--pad-fat-top); }
.pad-fatter-top    { padding-block-start: var(--pad-fatter-top); }
.pad-fattest-top   { padding-block-start: var(--pad-fattest-top); }

/* Bottom only */

.pad-thinner-bottom   { padding-block-end: var(--pad-thinner-bottom); }
.pad-thin-bottom      { padding-block-end: var(--pad-thin-bottom); }
.pad-standard-bottom  { padding-block-end: var(--pad-standard-bottom); }
.pad-fat-bottom       { padding-block-end: var(--pad-fat-bottom); }
.pad-fatter-bottom    { padding-block-end: var(--pad-fatter-bottom); }
.pad-fattest-bottom   { padding-block-end: var(--pad-fattest-bottom); }


/* Consistant base of page - just add to last container */

.page-bottom {margin-bottom:200px;}
@media (max-width: 1024px){.page-bottom {margin-bottom:150px;}}
@media (max-width: 767px){.page-bottom {margin-bottom:80px;}}



/* Padding sizes - Box Padding (clamped for responsiveness, with top/bottom variation) */

:root {
  /* Thin: 15px → 30px */
  --box-pad-thin: clamp(15px, 3vw, 30px);

  /* Standard: 20px → 50px */
  --box-pad-standard: clamp(20px, 4vw, 50px);

  /* Fat: 25px → 70px */
  --box-pad-fat: clamp(25px, 5vw, 70px);
}

/* Utility classes with balanced top/bottom ratios */

.box-pad-thin {padding-top: calc(var(--box-pad-thin) * 0.97);padding-bottom: calc(var(--box-pad-thin) * 1.05);padding-left: var(--box-pad-thin);padding-right: var(--box-pad-thin);}
.box-pad-standard {padding-top: calc(var(--box-pad-standard) * 0.97);padding-bottom: calc(var(--box-pad-standard) * 1.05);padding-left: var(--box-pad-standard);padding-right: var(--box-pad-standard);}
.box-pad-fat {padding-top: calc(var(--box-pad-fat) * 0.97);padding-bottom: calc(var(--box-pad-fat) * 1.05);padding-left: var(--box-pad-fat);padding-right: var(--box-pad-fat);}

/* Effects */

.blue-drop-shadow {box-shadow: 4px 4px 8px 0 rgba(0, 48, 66, 0.2);}

.spaced-gaps {gap:40px}

@media (max-width:1024px) {.spaced-gaps {gap:30px}}
@media (max-width:767px) {.spaced-gaps {gap:25px}}


/* Animation Effects */


/* ------------ Challenge text control - Introduced on Challenge page, but now set to be used everywhere */

.challenge-section {padding-block:60px;}
.challenge-section-top {margin-top:100px} /* Just a boost for the first line item if needed */

.challenge-content {padding-right:30%}
.challenge-text-one p {margin-bottom:0;font-weight:var(--nhg-bold);}
.challenge-text-two p {margin-bottom:0.8em;}

@media (max-width:1024px) {
    .challenge-content {padding-right:15%}
    .challenge-section {padding-block:40px;}
}

@media (max-width:767px) {
    .challenge-content {padding-right:5%}
    .challenge-section {padding-block:30px;}
}


/* ------------ Header and Menu CSS for Sticky Header*/

/* Padding only on dropdown menu items (left side) */

.elementor-nav-menu--dropdown {padding-left:calc(clamp(1.5rem, 5vw, 6rem) - 20px);} /* Match these variables to Wrapper above */
.elementor-nav-menu--dropdown {padding-block:10px;} /* Add a little top and bottom */

/* Sticky header work on scroll */

.sticky-header {background:rgba(255,255,255,1);box-shadow:0 5px 5px rgba(0,48,66,0.3);min-width:100%;padding-block:20px;}

@media (min-width: 1024px) {

.sticky-header {
  --header-height-normal: 110px;
  --header-height-sticky: 70px;
  --logo-scale-normal: 1;
  --logo-scale-sticky: 0.75;
  --menu-scale-normal: 1;
  --menu-scale-sticky: 0.85;
  min-height:var(--header-height-normal);transition: all 0.1s ease;}


.sticky-header.elementor-sticky--effects {min-height: var(--header-height-sticky);padding-block:10px;transition: all 0.2s ease;}

/* Logo scaling */

.sticky-header .site-logo img {transform: scale(var(--logo-scale-normal));transition: transform 0.2s ease;transform-origin:left center;}

.sticky-header.elementor-sticky--effects .site-logo img {transform: scale(var(--logo-scale-sticky));}

/* Menu links scaling */

.sticky-header .elementor-nav-menu .menu-item a {display: inline-block;transform: scale(var(--menu-scale-normal));transition: transform 0.2s ease;transform-origin: right center;}
.sticky-header.elementor-sticky--effects .elementor-nav-menu .menu-item a {transform: scale(var(--menu-scale-sticky));}

/* Reduce horizontal gap between items on sticky */

.sticky-header .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item {margin-inline:10px;/* Known as space between */transition: margin 0.2s ease;}
.sticky-header.elementor-sticky--effects .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item {margin-inline:1px;}

/* Main menu items – default state */

.elementor-nav-menu a {font-weight: var(--nhg-bold);}

/* Current menu item + hover */

.elementor-nav-menu .elementor-item.elementor-item-active,.elementor-nav-menu a:hover {font-weight: var(--nhg-bold);}
.elementor-nav-menu--dropdown a:hover {font-weight: var(--nhg-bold);}

/* Mobile menu (off-canvas / hamburger) */

.elementor-nav-menu--mobile a, .elementor-menu-toggle {font-weight: var(--nhg-medium);}

/* Fixing silly Elementor Aria */

.elementor-button {display: flex;align-items: center;justify-content: center;}
.elementor-menu-toggle__icon--close, .elementor-menu-toggle__icon--open {line-height: 0!important;}

}

/* Responsive */

@media (max-width:1023px) {
  .sticky-header, .sticky-header.elementor-sticky--effects {min-height:80px!important;padding-block:10px}
}

@media (max-width:767px) {
  .elementor-nav-menu--dropdown a {font-size:1.5em!important;}
  .sticky-header, .sticky-header.elementor-sticky--effects {min-height:50px!important;}
}