/*
Theme Name: Halp Apply AI
Theme URI: https://www.helpapplyai.com
Template: Divi
Author: Glimmernet Technologies
Author URI: https://www.glimmernet.com
Version: 4.27.4.1760521092
Updated: 2026-07-09 (rebrand: Tahoma typography + brand color variables)
*/

@import url('/wp-content/themes/haai/podcastfont/css/PodcastFont.css');

/* ============================================================
   BRAND TOKENS — edit colors here, everything else follows
   ============================================================ */
:root {
  /* Core palette */
  --brand-navy:       #071E2C;  /* Primary dark navy — page backgrounds */
  --brand-gold:       #FEC10F;  /* Accent yellow/gold — buttons & CTAs */
  --brand-blue:       #1274AF;  /* Supporting corporate blue — accents/borders */
  --brand-mid-blue:   #3995D1;  /* Supporting mid-blue */
  --brand-orange:     #D28028;  /* Secondary accent orange */
  --brand-light-blue: #50ABDF;  /* Secondary light blue */

  /* Derived shades (hover states) */
  --brand-blue-dark:  #0F6091;  /* darker corporate blue for hovers */
  --brand-gold-dark:  #E0A90C;  /* darker gold for hovers */

  /* RGB triplets for rgba() glows/shadows */
  --brand-mid-blue-rgb: 57, 149, 209;
  --brand-gold-rgb:     254, 193, 15;
  --brand-navy-rgb:     7, 30, 44;

  /* Text */
  --text-light:       rgba(255, 255, 255, 0.85);

  /* Typography */
  --font-body:    Tahoma, Verdana, Segoe, sans-serif;
  --font-heading: Tahoma, Verdana, Segoe, sans-serif;
  --weight-body:    400;
  --weight-heading: 700;
}

/* ============================================================
   BASE
   ============================================================ */
body {
  background-color: var(--brand-navy);
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */

/* General menu - white default */
#main-header .et-menu li a,
#top-menu li a,
.et_header_style_left #et-top-navigation nav > ul > li > a,
#et-main-navigation .menu-item a {
    color: #ffffff !important;
}

/* General menu - blue hover */
#main-header .et-menu li a:hover,
#main-header .et-menu li a:focus,
#top-menu li a:hover,
#top-menu li a:focus,
.et_header_style_left #et-top-navigation nav > ul > li > a:hover,
#et-main-navigation .menu-item a:hover {
    color: var(--brand-mid-blue) !important;
    opacity: 1 !important;
}

/* Menu CTA button - base styles */
.menu-button a,
.menu-button a:visited,
#main-header .et-menu .menu-button a,
#main-header .et-menu li.menu-button a,
#top-menu .menu-button a,
#top-menu li.menu-button a {
    background-color: var(--brand-gold) !important;
    color: var(--brand-navy) !important; /* dark text on gold for contrast */
    padding: 10px 24px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

/* Menu CTA button - hover glow (must come AFTER general menu hover) */
.menu-button a:hover,
.menu-button a:focus,
.menu-button a:active,
#main-header .et-menu .menu-button a:hover,
#main-header .et-menu .menu-button a:focus,
#main-header .et-menu li.menu-button a:hover,
#main-header .et-menu li.menu-button a:focus,
#top-menu .menu-button a:hover,
#top-menu .menu-button a:focus,
#top-menu li.menu-button a:hover,
#top-menu li.menu-button a:focus,
.et_header_style_left #et-top-navigation nav > ul > li.menu-button > a:hover,
.et_header_style_left #et-top-navigation nav > ul > li.menu-button > a:focus,
#et-main-navigation .menu-button a:hover,
#et-main-navigation .menu-button a:focus {
    background-color: var(--brand-gold-dark) !important;
    color: var(--brand-navy) !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow:
        0 0 15px rgba(var(--brand-gold-rgb), 0.5),
        0 0 30px rgba(var(--brand-gold-rgb), 0.3) !important;
}

/* 1) Make sure NOTHING in the header clips overflow */
#main-header,
#main-header .container,
#main-header .et_menu_container,
#main-header .logo_container {
  overflow: visible !important;
}

/* 2) Put the header above the next section so overlap is visible */
#main-header {
  position: relative;
  z-index: 9999 !important;
}

/* 3) Oversize the logo and let it hang below */
#main-header #logo {
  height: 125px !important;     /* your desired size */
  max-height: none !important;  /* Divi often caps this */
  width: auto !important;
  position: relative !important;
  top: 20px !important;         /* adjust: increases the overhang */
  z-index: 10000 !important;
}

/* 4) Sticky header: still allow overflow and keep a smaller hang */
.et-fixed-header {
  overflow: visible !important;
  z-index: 9999 !important;
}
.et-fixed-header #logo {
  height: 100px !important;
  top: 10px !important;
  max-height: none !important;
}

/* 5) If the first section covers the logo, lower its stacking */
#et-main-area .et_pb_section:first-of-type {
  position: relative;
  z-index: 1;                   /* header sits above at 9999 */
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1,
.et_pb_module h1,
#main-content h1,
.et_pb_text h1 {
    font-family: var(--font-heading) !important;
    font-weight: var(--weight-heading) !important;
    font-size: 64px;
    line-height: 1.1em;
    color: #ffffff;
}

h2,
.et_pb_module h2,
#main-content h2,
.et_pb_text h2 {
    font-family: var(--font-heading) !important;
    font-weight: var(--weight-heading) !important;
    font-size: 48px;
    line-height: 1.15em;
    color: #ffffff;
}

h3,
.et_pb_module h3,
#main-content h3,
.et_pb_text h3 {
    font-family: var(--font-heading) !important;
    font-weight: var(--weight-heading) !important;
    font-size: 36px;
    line-height: 1.25em;
    color: var(--brand-mid-blue);
}

h4,
.et_pb_module h4,
#main-content h4,
.et_pb_text h4 {
    font-family: var(--font-heading) !important;
    font-weight: var(--weight-heading) !important;
    font-size: 28px;
    line-height: 1.3em;
    color: var(--brand-light-blue);
}

@media (max-width: 980px) {
    h1, .et_pb_module h1, #main-content h1, .et_pb_text h1 {
        font-size: 40px !important;
    }
}

@media (max-width: 767px) {
    h1, .et_pb_module h1, #main-content h1, .et_pb_text h1 {
        font-size: 32px !important;
    }
}

p,
.et_pb_module p,
#main-content p,
.et_pb_text p {
    font-family: var(--font-body) !important;
    font-weight: var(--weight-body);
    font-size: 22px !important;
    line-height: 1.4em !important;
    color: var(--text-light) !important;
}

/* Text-module lists */
.et_pb_text_inner ul,
.et_pb_text_inner ol,
.et_pb_text_inner li {
    font-family: var(--font-body) !important;
    font-size: 22px !important;
    line-height: 1.4em !important;
    color: var(--text-light) !important;
}

/* ============================================================
   HERO
   ============================================================ */

/* Ensure Divi's internal span behaves like inline text */
.et_pb_text_inner h1,
.et_pb_text_inner h1 span {
    display: inline-block;
    position: relative;
    overflow: visible;
}

/* Fix the <u> wrapper itself */
.et_pb_text_inner h1 u {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

/* Apply the underline SVG */
.et_pb_text_inner h1 u:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 150%;
    height: 20px;
    background-image: url(/wp-content/themes/haai/img/underline.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
}

#hero .et_pb_text_inner h1 {
    display: inline-block;
    background: rgba(7, 30, 44, 0.85); /* --brand-navy @ 85% */
    padding: 14px 40px;
    border-radius: 50px;
    border: 2px solid rgba(var(--brand-mid-blue-rgb), 0.6);
    box-shadow:
        0 0 25px rgba(var(--brand-mid-blue-rgb), 0.4),
        0 0 50px rgba(var(--brand-mid-blue-rgb), 0.25),
        inset 0 0 20px rgba(var(--brand-mid-blue-rgb), 0.05);
    animation: gentlePulse 3s ease-in-out infinite;
}

@keyframes gentlePulse {
    0%, 100% {
        box-shadow:
            0 0 25px rgba(var(--brand-mid-blue-rgb), 0.4),
            0 0 50px rgba(var(--brand-mid-blue-rgb), 0.25),
            inset 0 0 20px rgba(var(--brand-mid-blue-rgb), 0.05);
    }
    50% {
        box-shadow:
            0 0 35px rgba(var(--brand-mid-blue-rgb), 0.55),
            0 0 70px rgba(var(--brand-mid-blue-rgb), 0.35),
            inset 0 0 25px rgba(var(--brand-mid-blue-rgb), 0.08);
    }
}

#hero .et_pb_text_inner {
    text-align: center;
}

/* ============================================================
   CAROUSEL (Divi Machine Pro)
   ============================================================ */

/* Carousel image - border and rounded corners */
.dmpro_carousel .dmpro-carousel-image img {
    border: 2px solid var(--brand-mid-blue) !important;
    border-radius: 25px !important;
}

/* Carousel title - white */
.dmpro_carousel .dmpro-carousel-item-title {
    font-family: var(--font-body) !important;
    color: #ffffff !important;
    font-size: 22px !important;
}

/* Carousel description - nuclear option */
body .dmpro_carousel .dmpro-carousel-item-desc,
body .dmpro_carousel .dmpro-carousel-item-desc p,
body .dmpro_carousel .et_pb_module_inner .dmpro-carousel-item-desc,
body .dmpro_carousel .et_pb_module_inner .dmpro-carousel-item-desc p,
body #page-container .dmpro_carousel .dmpro-carousel-item-desc,
body #page-container .dmpro_carousel .dmpro-carousel-item-desc p {
    font-family: var(--font-body) !important;
    font-size: 20px !important;
    line-height: 1.5em !important;
    color: var(--text-light) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   CIRCLE LISTS (numbered / letter / dot)
   Shared badge styling; content differs per variant
   ============================================================ */

.numbered-circle,
.numbered-circle .et_pb_text_inner {
  text-align: left !important;
}

.numbered-circle ol,
.letter-circle ul,
.dot-circle ol,
.dot-circle ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  margin-top: 1.5rem !important;
}

.numbered-circle ol {
  margin-right: auto !important;
  counter-reset: step;
  display: block !important;
  text-align: left !important;
}

.numbered-circle ol > li,
.letter-circle ul > li,
.dot-circle ol > li,
.dot-circle ul > li {
  font-family: var(--font-body) !important;
  list-style: none !important;
  position: relative;
  padding-left: 3.75rem;
  margin-bottom: 1.5rem;
  font-size: 22px !important;
  color: var(--text-light) !important;
  min-height: 2.75rem;
}

.numbered-circle ol > li {
  counter-increment: step;
  line-height: 1.7em !important;
  display: block !important;
  text-align: left !important;
}

.letter-circle ul > li {
  line-height: 1.4em !important;
  display: flex !important;
  align-items: center !important;
}

.dot-circle ol > li,
.dot-circle ul > li {
  line-height: 1.7em !important;
  display: block !important;
  text-align: left !important;
}

/* Kill any remaining native markers */
.numbered-circle ol > li::marker,
.letter-circle ul > li::marker,
.dot-circle ol > li::marker,
.dot-circle ul > li::marker {
  content: "" !important;
}

/* The circle badge with pulsing glow (shared) */
.numbered-circle ol > li::before,
.letter-circle ul > li::before,
.dot-circle ol > li::before,
.dot-circle ul > li::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  font-weight: 700;
  font-size: 1.25rem;
  text-align: center;
  line-height: 2.75rem;
  box-shadow:
      0 0 15px rgba(var(--brand-mid-blue-rgb), 0.4),
      0 0 30px rgba(var(--brand-mid-blue-rgb), 0.25);
  animation: circlePulse 3s ease-in-out infinite;
}

/* Variant content */
.numbered-circle ol > li::before { content: counter(step); }
.letter-circle ul > li::before   { content: attr(data-letter); }
.dot-circle ol > li::before,
.dot-circle ul > li::before      { content: "●"; font-size: 1.1rem; }

/* Hover effect (shared) */
.numbered-circle ol > li:hover::before,
.letter-circle ul > li:hover::before,
.dot-circle ol > li:hover::before,
.dot-circle ul > li:hover::before {
  transform: translateY(-50%) scale(1.08);
  background: var(--brand-blue-dark);
  animation-play-state: paused;
  box-shadow:
      0 0 20px rgba(var(--brand-mid-blue-rgb), 0.5),
      0 0 40px rgba(var(--brand-mid-blue-rgb), 0.35);
}

/* Top-aligned variants */
.numbered-circle-top ol > li::before,
.dot-circle-top ol > li::before,
.dot-circle-top ul > li::before {
  top: 0 !important;
  transform: none !important;
}

.numbered-circle-top ol > li:hover::before,
.dot-circle-top ol > li:hover::before,
.dot-circle-top ul > li:hover::before {
  transform: scale(1.08) !important;
}

@keyframes circlePulse {
  0%, 100% {
      box-shadow:
          0 0 15px rgba(var(--brand-mid-blue-rgb), 0.4),
          0 0 30px rgba(var(--brand-mid-blue-rgb), 0.25);
  }
  50% {
      box-shadow:
          0 0 20px rgba(var(--brand-mid-blue-rgb), 0.55),
          0 0 40px rgba(var(--brand-mid-blue-rgb), 0.35);
  }
}

/* ============================================================
   BREADCRUMBS (Divi Machine Pro)
   ============================================================ */

.dmpro-breadcrumbs ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.dmpro-breadcrumbs li {
    list-style: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

.dmpro-breadcrumbs li::before {
    display: none !important;
    content: none !important;
}

.dmpro-breadcrumbs,
.dmpro-breadcrumbs li,
.dmpro-breadcrumbs li a,
.dmpro-breadcrumbs li > span {
    font-family: var(--font-body) !important;
    font-size: 20px !important;
    line-height: 1.7em !important;
}

/* Keep the icon font for separators */
.dmpro-breadcrumbs .et-pb-icon {
    font-family: 'ETmodules' !important;
}

/* Non-link text (separators, current page) */
.dmpro-breadcrumbs li span,
.dmpro-breadcrumbs .dmpro-breadcrumb-separator,
.dmpro-breadcrumbs .dmpro-breadcrumb-current span {
    color: var(--text-light) !important;
}

/* Breadcrumb links - secondary orange */
.dmpro-breadcrumbs li a,
.dmpro-breadcrumbs li a span {
    color: var(--brand-orange) !important;
}

.dmpro-breadcrumbs li a:hover,
.dmpro-breadcrumbs li a:hover span {
    color: var(--brand-gold) !important;
}

/* ============================================================
   TEAM MEMBERS
   ============================================================ */

.et_pb_team_member_description > div ul {
    padding-left: 0;
}

.et_pb_team_member_description > div li {
    font-family: var(--font-body) !important;
    font-size: 22px !important;
    line-height: 1.4em !important;
    color: var(--text-light) !important;
    list-style-type: none;
    padding-left: 22px;
}

.et_pb_team_member_description > div li::before {
    content: "–";
    margin-left: -22px;
    margin-right: 8px;
}

.et_pb_team_member_description {
    position: relative;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-right: 50px; /* prevents text from overlapping the icon */
}

.et_pb_member_position {
    margin-bottom: 10px;
    padding-bottom: 15px !important;
    font-size: 18px !important;
}

.et_pb_member_social_links {
    position: absolute;
    top: 5px;
    right: 5px;
    margin: 0 !important;
}

.et_pb_member_social_links a {
    font-size: 24px;
}

.et_pb_team_member_image {
    max-width: 500px;
}

/* ============================================================
   TERMAGEDDON PRIVACY POLICY ACCORDIONS
   ============================================================ */

.policy_embed_div .accordion-heading,
.policy_embed_div .accordion-content,
.policy_embed_div .accordion-content p,
.policy_embed_div .accordion-content div,
.policy_embed_div .accordion-content h3,
.policy_embed_div .accordion-content h4,
.policy_embed_div .accordion-section-content {
    font-family: var(--font-body) !important;
    font-size: 22px !important;
    line-height: 1.4em !important;
}

.policy_embed_div .accordion-section-content {
    color: var(--text-light) !important;
}

.policy_embed_div ul,
.policy_embed_div ol,
.policy_embed_div li {
    font-family: var(--font-body) !important;
    font-size: 22px !important;
    line-height: 1.4em !important;
    color: var(--text-light) !important;
}

/* ============================================================
   FAQ (Ultimate FAQ)
   ============================================================ */

.ewd-ufaq-faq-categories {
    font-family: var(--font-body) !important;
    color: var(--text-light) !important;
}

.ewd-ufaq-faq-categories a {
    font-family: var(--font-body) !important;
    background-color: var(--brand-mid-blue) !important;
    color: #ffffff !important;
}

/* ============================================================
   MISC / UTILITIES
   ============================================================ */

.et_pb_pricing_content_top {
    display: none !important;
}

/* Standard list indentation - add "standard-list" class to text module */
.standard-list ul {
    padding-left: 40px !important;
    margin-left: 0 !important;
}

.standard-list ul li {
    padding-left: 0 !important;
    list-style-type: disc !important;
    list-style-position: outside !important;
}

.standard-list ul ul {
    padding-left: 30px !important;
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
}

.standard-list ul ul li {
    list-style-type: circle !important;
}

.standard-list ul ul ul li {
    list-style-type: square !important;
}

/* ============================================================
   PAIN POINT CARDS (blurb modules)
   ============================================================ */

.pain-point-card {
  background: #FFFFFF;
  border-radius: 12px;
  border-left: 4px solid transparent; /* reserve space so hover doesn't shift layout */
  box-shadow: 0 4px 12px rgba(var(--brand-navy-rgb), 0.08);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pain-point-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(var(--brand-navy-rgb), 0.12);
  border-left-color: var(--brand-gold);
}

/* Ensure icons stay centered and sized properly */
.pain-point-card .et_pb_main_blurb_image {
  margin-bottom: 20px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 980px) {
    .et_pb_cta_0.et_pb_promo .et_pb_promo_description {
        width: 100% !important;
    }

    #main-header #logo {
        width: 230px !important;
        height: auto !important;
        max-width: none !important;
    }

    #main-header .mobile_menu_bar {
        position: absolute !important;
        top: 30px !important;
        right: 20px !important;
    }

    #main-header .et_mobile_menu {
        top: 80px !important;
    }
}

@media (max-width: 767px) {
    .et_pb_social_media_follow {
        padding-top: 30px !important;
    }
}