/*
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 (DEFAULTS)
   ============================================
   These are the default values for all CSS variables used throughout the theme.
   
   TO CUSTOMIZE: Override any of these in Elementor Custom Code:
   1. Go to WP Admin > Elementor > Custom Code
   2. Add New > Name it "Theme | Site Variables Override"
   3. Set Location to <head>, Priority ~10
   4. Paste only the variables you want to change inside :root { }
   5. Publish
   
   See README.md for a copy-paste ready template with <style> tags.
   ============================================ */
: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 */

  /* =========================================
     TEXT EDITOR WIDGET VARIABLES
     These apply ONLY to:
     - Elementor Text Editor widgets (.elementor-widget-text-editor)
     - Blog post content (.elementor-widget-theme-post-content)
     They do NOT affect Heading widgets, global typography, or other elements.
     ========================================= */

  /* Table Colors (Text Editor tables) */
  --color-table-border: #e0e0e0;
  --color-table-header-bg: var(--e-global-color-primary, #1a1a1a);
  --color-table-header-text: #ffffff;
  --color-table-row-alt: #f9f9f9;

  /* Horizontal Rules (Text Editor widgets) */
  --space-hr: 2rem;
  --color-hr: #e0e0e0;

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

  /* Text Editor Spacing (tables, blockquotes in Text Editor widgets) */
  --content-space-s: 0.25rem;
  --content-space-m: 0.75rem;
  --content-space-l: 1.25rem;
  --content-space-xl: 2.25rem;

  /* Text Editor Typography (tables, blockquotes in Text Editor widgets) */
  --content-font-size-p: 1.15rem;
  --content-font-size-xs: 0.85rem;
  --content-font-weight-regular: 400;
  --content-font-weight-bold: 700;
  --content-font-weight-light: 300;
}

/* ==== GAP CLASSES ======================== */
/* Higher specificity to override Elementor's .elementor-element:where(...) gap */
.e-con.neo_gap-xxs,
.e-con.neo_gap-xxs > .e-con-inner {
  gap: var(--gap-xxs);
}

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

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

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

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

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

.e-con.neo_gap-xxl,
.e-con.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
   ============================================
   These blog-specific variables can also be overridden via Elementor Custom Code.
   Use the same selectors (body.single-post, body.blog, body.archive) to override.
   ============================================ */

/* Blog CSS Variables (Defaults) */
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);
  }
}

/* ============================================
   TEXT EDITOR WIDGET STYLES
   These styles ONLY apply to:
   - Elementor Text Editor widgets (.elementor-widget-text-editor)
   - Blog post content (.elementor-widget-theme-post-content)
   They do NOT affect Heading widgets, global typography, or other elements.
   Uses the --content-* and --color-table-* variables defined above.
   ============================================ */

/* Horizontal Rules */
body.single-post .elementor-widget-theme-post-content hr,
.elementor-widget-text-editor hr {
  margin: var(--space-hr) 0 !important;
  border: none !important;
  border-top: 1px solid var(--color-hr) !important;
}

/* Tables */
body.single-post .elementor-widget-theme-post-content table,
.elementor-widget-text-editor table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--content-space-xl) 0;
  font-size: var(--content-font-size-p);
}

body.single-post .elementor-widget-theme-post-content th,
.elementor-widget-text-editor th {
  background: var(--color-table-header-bg);
  color: var(--color-table-header-text);
  font-weight: var(--content-font-weight-bold);
  padding: var(--content-space-m) var(--content-space-l);
  text-align: left;
}

body.single-post .elementor-widget-theme-post-content td,
.elementor-widget-text-editor td {
  padding: var(--content-space-m) var(--content-space-l);
  border-bottom: 1px solid var(--color-table-border);
}

body.single-post .elementor-widget-theme-post-content tr:nth-child(even),
.elementor-widget-text-editor tr:nth-child(even) {
  background: var(--color-table-row-alt);
}

/* Responsive Table - Horizontal Scroll on Mobile */
@media screen and (max-width: 767px) {
  body.single-post .elementor-widget-theme-post-content table,
  .elementor-widget-text-editor table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

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

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

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