/*
Theme Name: Hello NEOBADGER
Theme URI: https://neobadger.com/
Template: hello-elementor
Author: NEOBADGER Team
Author URI: https://neobadger.com/
Description: Introducing Hello NEOBADGER, a customized spin on the sleek and minimalist Hello theme, tailor-made to integrate flawlessly with the Elementor site builder plugin. While the foundation theme, Hello, remains free and open-source, it caters to users seeking a versatile, user-friendly, and adaptable website experience. Our child theme, Hello NEOBADGER, is specifically crafted to accommodate the necessary customizations essential for enhancing the aesthetics, user experience, and functionality of your website, right here in the backend interface you're navigating.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.1.1.1723438740
Updated: 2024-08-12 14:59:00

*/

/* ============================================
   GLOBAL STYLES - ALL PAGES
   ============================================ */

/* Global list spacing */
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
  margin: 0 0 1.2em 1.4em;
  padding: 0;
}

.elementor-widget-text-editor li {
  margin: 0 0 0.4em;
}

/* Slightly tighter nested lists */
.elementor-widget-text-editor li ul,
.elementor-widget-text-editor li ol {
  margin-top: 0.3em;
  margin-bottom: 0.6em;
}

/* Global CSS Variables */
:root {
  /* Global Gap Variables */
  --gap-xxs: clamp(0.25rem, 1vw, 0.5rem);   /* 4px → 8px */
  --gap-xs:  clamp(0.5rem, 1.5vw, 0.75rem); /* 8px → 12px */
  --gap-s:   clamp(0.75rem, 2vw, 1rem);     /* 12px → 16px */
  --gap-m:   1.25rem;                       /* same as the default gaps fixed at 20px */
  --gap-l:   clamp(1.25rem, 3vw, 2.5rem);   /* 20px → 40px */
  --gap-xl:  clamp(1.25rem, 5vw, 3.75rem);  /* 20px → 60px */
  --gap-xxl: clamp(1.25rem, 10vw, 7.5rem);  /* 20px → 120px */

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

  --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 */

  --section-hero-height: 100vh; /* Hero is full view-port but can be adjusted for nav if needed */
  --section-offset-header: 80px; /* Offset for overlay headers */

  --section-narrow: 62.5rem;   /* 1000px */
  --section-narrow-xs: 45rem;  /* 720px */
}

/* ==== GAP CLASSES ======================== */
.neo_gap-xxs { gap: var(--gap-xxs); }
.neo_gap-xxs .e-con-inner { gap: var(--gap-xxs); }

.neo_gap-xs { gap: var(--gap-xs); }
.neo_gap-xs .e-con-inner { gap: var(--gap-xs); }

.neo_gap-s { gap: var(--gap-s); }
.neo_gap-s .e-con-inner { gap: var(--gap-s); }

.neo_gap-m { gap: var(--gap-m); }
.neo_gap-m .e-con-inner { gap: var(--gap-m); }

.neo_gap-l { gap: var(--gap-l); }
.neo_gap-l .e-con-inner { gap: var(--gap-l); }

.neo_gap-xl { gap: var(--gap-xl); }
.neo_gap-xl .e-con-inner { gap: var(--gap-xl); }

.neo_gap-xxl { gap: var(--gap-xxl); }
.neo_gap-xxl .e-con-inner { gap: var(--gap-xxl); }

/* ==== SECTION CLASSES ==================== */
.neo_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;
}

.neo_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;
}

.neo_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;
}

.neo_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;
}

.neo_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;
}

.neo_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;
}

.neo_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;
}

.neo_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;
}

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

.neo_section-full div {
  max-width: 100%!important;
}

.neo_section-narrow .e-con-inner {
  max-width: var(--section-narrow)!important;
}
.neo_section-narrow-xs .e-con-inner {
  max-width: var(--section-narrow-xs)!important;
}

.neo_section-offset {
  padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
}

/* ============================================
   BLOG STYLES - SINGLE POSTS & ARCHIVES
   Scoped via body.single-post, body.blog, body.archive
   ============================================ */

/* Blog CSS Variables */
body.single-post,
body.blog,
body.archive {
  /* Link Colors */
  --color-link: var(--e-global-color-accent);

  /* Quote */
  --color-quote-border: var(--e-global-color-accent);
  --width-quote-border: 3px;
  --bg-quote: #f4f8fc;

  /* Code */
  --color-code-text: #33C48A;
  --bg-code: #0b0515;

  /* Spacing */
  --space-s: 0.25rem;
  --space-m: 0.75rem;
  --space-l: 1.25rem;
  --space-xl: 2.25rem;
  --space-xxl: 2.5rem;

  /* Image Border Radius */
  --radius-m: 0.75rem;

  /* Link Transition */
  --transition-default: 0.2s ease-in-out;

  /* Typography */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-size-xs: 0.85rem;
  --font-size-p: 1.15rem;
  --mobile-font-size-p: 1.15rem;
  --font-size-m: 1.5rem;
  --mobile-font-size-m: 1.5rem;
  --font-size-l: 2rem;
  --mobile-font-size-l: 2rem;
  --line-height-body: 1.75em;
  --line-height-heading: 1.25em;
  --line-height-list: 1.2em;
}

/* Blog Headings */
body.single-post .elementor-widget-theme-post-content h2,
body.single-post .elementor-widget-theme-post-content h3,
body.single-post .elementor-widget-theme-post-content h4,
body.single-post .elementor-widget-theme-post-content h5,
body.single-post .elementor-widget-theme-post-content h6 {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-s);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  font-family: var(--e-global-typography-primary-font-family);
}

body.single-post .elementor-widget-theme-post-content h2 {
  font-size: var(--font-size-l);
}

body.single-post .elementor-widget-theme-post-content h3,
body.single-post .elementor-widget-theme-post-content h4,
body.single-post .elementor-widget-theme-post-content h5,
body.single-post .elementor-widget-theme-post-content h6 {
  font-size: var(--font-size-m);
}

/* Blog Paragraphs */
body.single-post .elementor-widget-theme-post-content p {
  padding-bottom: var(--space-l);
  margin-bottom: 0;
  line-height: var(--line-height-body);
}

/* Blog Links */
body.single-post .elementor-widget-theme-post-content p a {
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  transition: color var(--transition-default);
}

body.single-post .elementor-widget-theme-post-content p a:hover {
  filter: brightness(1.2);
}

/* Blog Lists */
body.single-post .elementor-widget-theme-post-content ul,
body.single-post .elementor-widget-theme-post-content ol {
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-medium);
  padding-bottom: var(--space-xl);
}

body.single-post .elementor-widget-theme-post-content ul li {
  line-height: var(--line-height-list);
  margin-bottom: var(--space-l);
}

body.single-post .c-post-meta ul li:nth-child(2) {
  font-weight: var(--font-weight-regular) !important;
}

/* Blog Images */
body.single-post .elementor-widget-theme-post-content .wp-block-image img {
  margin: var(--space-xxl) 0;
  border-radius: var(--radius-m);
}

/* Blog Blockquotes */
body.single-post .elementor-widget-theme-post-content blockquote {
  border-left: var(--width-quote-border) solid var(--color-quote-border);
  margin: 0;
  padding: var(--space-m) var(--space-l);
  background: var(--bg-quote);
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-regular);
}

body.single-post .elementor-widget-theme-post-content blockquote cite {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
}

body.single-post .elementor-widget-theme-post-content blockquote p {
  padding-bottom: 0;
}

/* Blog Code Blocks */
body.single-post .elementor-widget-theme-post-content .wp-block-code {
  background: var(--bg-code);
  padding: var(--space-xl);
  border-radius: var(--radius-m);
}

body.single-post .elementor-widget-theme-post-content code {
  color: var(--color-code-text);
}

/* Blog Mobile Responsiveness */
@media screen and (max-width: 767px) {
  body.single-post .elementor-widget-theme-post-content p {
    font-size: var(--mobile-font-size-p);
  }

  body.single-post .elementor-widget-theme-post-content h2 {
    font-size: var(--mobile-font-size-l);
  }

  body.single-post .elementor-widget-theme-post-content h3,
  body.single-post .elementor-widget-theme-post-content h4,
  body.single-post .elementor-widget-theme-post-content h5,
  body.single-post .elementor-widget-theme-post-content h6 {
    font-size: var(--mobile-font-size-m);
  }
}