/*
 Theme Name:   Divi Child
 Theme URI:    https://www.waterfleet.com
 Description:  Divi child theme with flexible content templates for non-Divi pages and custom header/navigation.
 Author:       Noisy Trumpet
 Author URI:   https://www.noisytrumpet.com
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  waterfleet
*/

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
   --primary: #2196F3;
   --secondary: rgba(255, 119, 43, 1);
   --tertiary: #0a2239;
   --black: #000;
   --white: #FFF;
}

/* ==========================================================================
   Blog Category Tabs (shortcode [wf_blog_category_tabs] in Theme Builder)
   ========================================================================== */

.blog .et_pb_section_1_tb_body,
.archive.category .et_pb_section_1_tb_body {
   background-color: #d9d9d9;
   padding: 15px 0;
}

.wf-blog-category-tabs {
   margin-bottom: 0 !important;
}

.wf-blog-category-tabs__list {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem 1rem;
   list-style: none !important;
   margin: 0 !important;
   padding: 0 !important;
}

.wf-blog-category-tabs__item {
   margin: 0 !important;
}

.wf-blog-category-tabs__link {
   display: inline-block;
   padding: 0.6em 1.25em;
   font-weight: 500;
   color: #6b7280 !important;
   text-decoration: none;
   background: #fff;
   border-radius: 28px;
   transition: color 0.2s, background-color 0.2s;
}

.wf-blog-category-tabs__link:hover {
   color: var(--primary);
}

.wf-blog-category-tabs__link--active {
   background: var(--primary);
   color: var(--white) !important;
}

.wf-blog-category-tabs__link--active:hover {
   color: var(--white) !important;
   background: var(--primary);
}

.wf-blog-category-tabs__scroll-hint {
   display: none;
}

/* ==========================================================================
   Post Category Pills (shortcode [wf_post_categories] on blog single)
   Match .wf-blog-category-tabs__link styling
   ========================================================================== */

.wf-post-categories {
   margin-bottom: 0.75rem;
}

.wf-post-categories__list {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem 1rem;
   list-style: none !important;
   margin: 0 0 25px !important;
   padding: 0 !important;
}

.wf-post-categories__item {
   margin: 0;
}

.wf-post-categories__link {
   display: inline-block;
   padding: 0.6em 1.25em;
   font-weight: 500;
   color: #FFF !important;
   text-decoration: none;
   background: var(--primary);
   border-radius: 28px;
   transition: color 0.2s, background-color 0.2s;
}

/* Blog category tabs – mobile: horizontal scroll + scroll affordance */
@media screen and (max-width: 767px) {

   .blog .et_pb_section_1_tb_body,
   .archive.category .et_pb_section_1_tb_body {
      padding: 0;
   }

   .blog .et_pb_row_1_tb_body,
   .archive.category .et_pb_row_1_tb_body {
      padding-bottom: 15px;
   }

   .wf-blog-category-tabs-wrap {
      --wf-blog-tabs-fade-bg: #d9d9d9;
      position: relative;
      margin-left: -16px;
      margin-right: -16px;
   }

   .wf-blog-category-tabs {
      position: relative;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
   }

   .wf-blog-category-tabs::-webkit-scrollbar {
      display: none;
   }

   /* Edge fades: suggest more content; match section background */
   .wf-blog-category-tabs::before,
   .wf-blog-category-tabs::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 24px;
      pointer-events: none;
      z-index: 1;
      transition: opacity 0.2s ease;
   }

   .wf-blog-category-tabs::before {
      left: 0;
      background: linear-gradient(to right, var(--wf-blog-tabs-fade-bg, #d9d9d9), transparent);
      opacity: 0;
   }

   .wf-blog-category-tabs::after {
      right: 0;
      background: linear-gradient(to left, var(--wf-blog-tabs-fade-bg, #d9d9d9), transparent);
      opacity: 1;
   }

   .wf-blog-category-tabs.wf-blog-category-tabs--at-start::before {
      opacity: 0;
   }

   .wf-blog-category-tabs.wf-blog-category-tabs--at-end::after {
      opacity: 0;
   }

   .wf-blog-category-tabs:not(.wf-blog-category-tabs--at-start)::before {
      opacity: 1;
   }

   /* "Swipe to see more" hint – visible until user scrolls */
   .wf-blog-category-tabs__scroll-hint {
      display: block;
      text-align: center;
      font-size: 0.75rem;
      color: #6b7280;
      margin-top: 0.5rem;
      padding: 0 16px;
      transition: opacity 0.3s ease;
   }

   .wf-blog-category-tabs__scroll-hint--hidden {
      opacity: 0;
      pointer-events: none;
   }

   .wf-blog-category-tabs__list {
      flex-wrap: nowrap;
      padding: 0 16px;
      gap: 0.5rem;
   }

   .wf-blog-category-tabs__item {
      flex-shrink: 0;
   }

   .wf-blog-category-tabs__link {
      padding: 0.55em 1em;
      font-size: 0.9375rem;
      white-space: nowrap;
   }
}

/* ==========================================================================
   Custom Header and Navigation Styles (Desktop)
   ========================================================================== */

/* -------------------------------------------------------------------------
   Header layout
   ------------------------------------------------------------------------- */

.wf-mobile-assessment-title {
   display: none;
}

.et_fixed_nav.et_show_nav #page-container {
   padding-top: 60px !important;
}

.wf-header {
   position: relative;
   width: 100%;
   background: #fff;
   z-index: 100;
}

.wf-header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
   min-height: 66px;
   max-width: 1275px;
   width: 100%;
}

/* Logo */
.wf-header-brand {
   flex-shrink: 0;
}

.wf-logo-link {
   display: inline-block;
   line-height: 0;
}

.wf-logo {
   display: block;
   height: auto;
   max-height: 45px;
   width: auto;
}

/* Mobile menu toggle (hidden on desktop) */
.wf-nav-toggle {
   display: none;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   padding: 0;
   border: none;
   background: transparent;
   cursor: pointer;
   flex-direction: column;
   gap: 5px;
}

.wf-nav-toggle-bar {
   display: block;
   width: 24px;
   height: 2px;
   background: #333;
   transition: transform 0.2s, opacity 0.2s;
}

.wf-nav-toggle[aria-expanded="true"] .wf-nav-toggle-bar:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
}

.wf-nav-toggle[aria-expanded="true"] .wf-nav-toggle-bar:nth-child(2) {
   opacity: 0;
}

.wf-nav-toggle[aria-expanded="true"] .wf-nav-toggle-bar:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
}

/* Primary nav */
.wf-nav-primary {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   min-height: 66px;
}

.wf-nav,
.wf-nav-primary .nav {
   min-height: 66px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 0.25rem 2rem;
   list-style: none;
   margin: 0;
   padding: 0 0 0 100px;
   position: relative;
   width: 100%;
   flex: 1;
}

.wf-nav li a {
   text-transform: uppercase;
}

.wf-nav li.ripple {
   padding: 0 15px !important;
}

.wf-nav li.ripple a {
   color: var(--white) !important;
}

.wf-nav a,
.wf-nav-primary .nav a {
   display: block;
   padding: 0.5em 0;
   color: #333;
   text-decoration: none;
   font-weight: 500;
}

.wf-nav a:hover,
.wf-nav-primary .nav a:hover,
.wf-nav .current-menu-item>a,
.wf-nav-primary .nav .current-menu-item>a {
   color: #2e87de;
}

.wf-nav li,
.wf-nav-primary .nav li {
   position: relative;
}

.wf-nav .sub-menu,
.wf-nav-primary .nav .sub-menu {
   position: absolute;
   top: 100%;
   left: 0;
   min-width: 200px;
   background: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   list-style: none;
   margin: 0;
   padding: 0.5rem 0;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-4px);
   transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.wf-nav li:hover>.sub-menu,
.wf-nav-primary .nav li:hover>.sub-menu {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.wf-nav li.wf-has-mega,
.wf-nav-primary .nav li.wf-has-mega {
   position: static;
}

.wf-mega {
   position: absolute;
   top: 100%;
   left: 0;
   display: grid;
   grid-template-columns: auto 1fr 1fr;
   min-width: 1000px;
   min-height: 315px;
   background: #fff;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-4px);
   transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
   z-index: 100;
   list-style: none;
   margin: 0;
   padding: 0;
   pointer-events: none;
}

.wf-mega::before {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   top: -12px;
   height: 12px;
}

.wf-nav li.wf-mega-open>.wf-mega,
.wf-nav-primary .nav li.wf-mega-open>.wf-mega {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
   pointer-events: auto;
}

.wf-nav .wf-mega,
.wf-nav-primary .nav .wf-mega {
   left: 0;
   right: auto;
}

.wf-mega-col {
   padding: 1.5rem 1.25rem 1.5rem 2.5rem;
}

.wf-mega-nav {
   min-width: 300px;
   padding-right: 60px;
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
}

.menu-item-16 .wf-mega-nav {
   padding-right: 25px;
}

.wf-mega-nav .sub-menu {
   display: flex;
   flex-direction: column;
   gap: 10px;
   position: static;
   opacity: 1;
   visibility: visible;
   transform: none;
   box-shadow: none;
   min-width: 0;
   padding: 0;
}

.wf-nav-primary .nav .wf-mega-nav .sub-menu a {
   padding: 1em 0;
   border-bottom: none;
}

.wf-mega-nav .sub-menu a,
.wf-nav .wf-mega-nav .sub-menu a {
   padding: 5px 0;
   max-width: 260px;
}

.wf-mega-offerings {
   border-left: 1px solid #eee;
   padding: 1.5rem 1.25rem;
   min-width: 440px;
}

.wf-mega-offerings-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
}

.wf-mega-offering-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   background: #fff;
   border: 1px solid var(--tertiary, #003C71);
   padding: 40px 14px 20px !important;
   margin: 25px 0 0;
   text-decoration: none;
   transition: all 0.3s ease;
   position: relative;
   overflow: visible;
}

.wf-mega-offering-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wf-mega-offering-media {
   position: relative;
   line-height: 0;
   display: flex;
   justify-content: center;
   margin-top: -60px;
   margin-bottom: 16px;
   padding: 0 12px;
   background: #fff;
}

.wf-mega-offering-media img {
   max-height: 50px;
   width: auto;
   height: auto;
   display: block;
}

.wf-mega-offering-title {
   margin: 0;
   font-size: 14px;
   font-weight: 400;
   font-style: normal;
   color: var(--tertiary, #003C71);
   text-align: center;
   line-height: 1.3;
   display: block;
   white-space: nowrap;
}

.wf-mega-cta {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 0.5rem;
   border-left: 1px solid #eee;
}

.wf-mega-cta-tagline {
   margin: 0;
   max-width: 250px;
   font-size: 1.5rem;
   font-weight: 600;
   color: #2196F3;
   line-height: 1.3;
   font-style: italic;
}

.wf-mega-cta-link {
   font-weight: 600;
   color: #2196F3;
   text-decoration: none;
}

.wf-mega-cta-link:hover {
   text-decoration: underline;
}

.wf-mega-assessment {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 0.5rem;
   min-height: 215px;
   padding: 1.5rem 1.25rem;
   background: #2196F3;
   color: #FFF;
   overflow: hidden;
}

.wf-mega-assessment::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: url('assets/images/splash.png');
   background-size: auto;
   background-position: center;
   opacity: 0.4;
   mix-blend-mode: multiply;
   z-index: 0;
   pointer-events: none;
}

.wf-mega-assessment .wf-mega-assessment-title,
.wf-mega-assessment .wf-mega-assessment-link {
   position: relative;
   z-index: 1;
   color: #FFF;
}

.wf-mega-assessment-title {
   margin: 0;
   font-size: 1.35rem;
   font-weight: 600;
   line-height: 1.3;
   color: #2196F3;
   font-style: italic;
   max-width: 250px;
}

.wf-mega-assessment-link {
   font-weight: 600;
   color: #FFF;
   text-decoration: none;
}

.wf-mega-assessment-link:hover {
   color: #FFF !important;
   text-decoration: underline;
}

.wf-nav .sub-menu a,
.wf-nav-primary .nav .sub-menu a {
   padding: 0.5em 1rem;
}

.wf-nav .sub-menu li,
.wf-nav-primary .nav .sub-menu li {
   position: relative;
}

.wf-nav .sub-menu li:not(:last-child)::after,
.wf-nav-primary .nav .sub-menu li:not(:last-child)::after {
   content: '';
   position: absolute;
   left: 0;
   margin-top: 5px;
   top: 100%;
   right: 0;
   height: 1px;
   display: block;
   background: rgba(13, 60, 107, 1);
}

.menu-item-15 .wf-mega-nav .sub-menu li:not(:last-child)::after {
   right: -40px;
}

/* Mobile-specific elements (hidden on desktop) */
.wf-mobile-assessment {
   display: none;
}

.wf-mobile-nav-header {
   display: none;
}

/* Prevent body scroll when mobile nav is open */
body.wf-nav-open {
   overflow: hidden;
}

/* ==========================================================================
   Sticky Quote Tab (Desktop)
   ========================================================================== */

.wf-quote-tab {
   position: fixed;
   top: 175px;
   right: 0;
   width: 61px;
   height: 195px;
   z-index: 900;
   text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #FF772B;
   border-radius: 10px 0 0 10px;
   box-shadow: -2px 0 12px rgba(0, 0, 0, 0.1);
   transition: background-color 0.2s, width 0.2s;
}

.wf-quote-tab:hover,
.wf-quote-tab:focus {
   background: #e66a26;
   outline: none;
}

/* Hide quote tab when mobile nav is open */
body.wf-nav-open .wf-quote-tab {
   visibility: hidden;
   pointer-events: none;
}

.wf-quote-tab__text {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 115px;
   height: 17px;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 16.97px;
   line-height: 100%;
   text-align: center;
   letter-spacing: 0.01em;
   color: #FFFFFF;
   transform: rotate(-90deg);
   white-space: nowrap;
   pointer-events: none;
}

/* ==========================================================================
   Assessment Quiz (Desktop)
   ========================================================================== */

.wf-quiz-container {
   position: relative;
   width: 100%;
   min-height: 800px;
   overflow: hidden;
   display: none;
}

/* Show container on quiz page */
.wf-quiz-container.wf-quiz-page-active {
   display: block;
}

/* Show container when modal is open */
.wf-quiz-container:has(.wf-quiz-modal:not([hidden])) {
   display: block;
}

/* Modal Mode (when triggered as popup) */
.wf-quiz-modal {
   position: fixed;
   inset: 0;
   z-index: 99999;
   display: flex;
   align-items: center;
   justify-content: center;
}

.wf-quiz-modal[hidden] {
   display: none;
}

.wf-quiz-modal-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(4px);
}

.wf-quiz-modal-content {
   position: relative;
   z-index: 1;
   width: 100%;
   height: 100%;
   max-width: 100vw;
   max-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

.wf-quiz-close {
   position: absolute;
   top: 24px;
   right: 24px;
   z-index: 500;
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   color: #fff;
   cursor: pointer;
   transition: all 0.3s ease;
}

.wf-quiz-close:hover {
   background: rgba(255, 255, 255, 0.2);
   transform: rotate(90deg);
}

.wf-quiz-close svg {
   width: 24px;
   height: 24px;
}

/* Close button - tertiary color on question/result slides */
.wf-quiz-close.wf-quiz-close-dark {
   background: rgba(10, 34, 57, 0.1);
   border: 1px solid rgba(10, 34, 57, 0.2);
   color: var(--tertiary, #0a2239);
}

.wf-quiz-close.wf-quiz-close-dark:hover {
   background: rgba(10, 34, 57, 0.2);
}

/* Slides Container */
.wf-quiz-slides {
   position: relative;
   width: 100%;
   min-height: 800px;
}

/* Full height for modal mode */
.wf-quiz-modal .wf-quiz-slides {
   min-height: 100vh;
   height: 100%;
}

.wf-quiz-slide {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 800px;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Full height for modal mode */
.wf-quiz-modal .wf-quiz-slide {
   min-height: 100vh;
}

.wf-quiz-modal #wf-quiz-content {
   width: 100%;
}

.wf-quiz-slide.active {
   position: relative;
   opacity: 1;
   visibility: visible;
}

.wf-quiz-slide[hidden] {
   display: none;
}

/* Background - Default for Intro (Full Width) */
.wf-quiz-slide-bg {
   position: absolute;
   inset: 0;
   z-index: 0;
}

.wf-quiz-bg-image {
   width: 100%;
   height: 100%;
   min-height: 800px;
   object-fit: cover;
   object-position: center;
}

/* Full height for modal mode */
.wf-quiz-modal .wf-quiz-bg-image {
   min-height: 100vh;
}

/* Intro Slide - Full Width Background with Dark Overlay */
.wf-quiz-intro .wf-quiz-slide-bg::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 1;
}

/* Question & Result Slides - 50/50 Layout */
.wf-quiz-question,
.wf-quiz-result {
   display: flex;
   flex-direction: row;
}

.wf-quiz-question .wf-quiz-slide-bg,
.wf-quiz-result .wf-quiz-slide-bg {
   position: relative;
   width: 50%;
   height: 100%;
   inset: auto;
   flex-shrink: 0;
   min-height: 800px;
   line-height: 0;
}

/* Content - Default for Intro */
.wf-quiz-slide-content {
   position: relative;
   z-index: 2;
   width: 100%;
   max-width: 900px;
   margin: 0 auto;
   padding: 80px 60px;
   text-align: center;
}

/* Question & Result Slides - Right Side Content */
.wf-quiz-question .wf-quiz-slide-content,
.wf-quiz-result .wf-quiz-slide-content {
   width: 50%;
   max-width: none;
   margin: 0;
   padding: 20px 80px;
   min-height: 800px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   background: #fff;
   text-align: left;
}

.wf-quiz-modal .wf-quiz-slide-content {
   min-height: 100vh;
}

/* Center content only on intro slide */
.wf-quiz-modal .wf-quiz-intro .wf-quiz-slide-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.wf-quiz-label {
   margin: 0 0 16px;
   font-size: 0.875rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: var(--secondary, #F7931E);
}

.wf-quiz-title {
   margin: 0 0 24px;
   font-size: 3rem;
   font-weight: 700;
   line-height: 1.2;
   color: #fff;
}

.wf-quiz-description {
   margin: 0 0 40px;
   font-size: 1.125rem;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.9);
   max-width: 580px;
   margin-left: auto;
   margin-right: auto;
}

.wf-quiz-btn {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: 16px 32px;
   font-size: 1rem;
   font-weight: 700;
   text-transform: uppercase;
   text-decoration: none;
   border-radius: 6px;
   border: none;
   cursor: pointer;
   transition: all 0.3s ease;
}

.wf-quiz-btn-primary {
   background: var(--secondary, #F7931E);
   color: #fff;
}

.wf-quiz-btn-primary:hover {
   background: var(--tertiary, #003C71);
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.wf-quiz-btn svg {
   width: 20px;
   height: 20px;
}

.wf-quiz-progress {
   margin: 0 0 20px;
   font-size: 0.975rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: rgba(0, 0, 0, 0.5);
   border-left: 2px solid var(--primary);
   padding-left: 10px;
   text-box-trim: trim-both;
}

.wf-quiz-question-title {
   margin: 0;
   font-size: 32px;
   font-weight: 500;
   line-height: 1.2;
   color: var(--tertiary, #003C71);
}

/* Options */
.wf-quiz-options {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.wf-quiz-option {
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 15px 140px 15px 28px;
   background: rgba(255, 255, 255, 0.95);
   border: 2px solid var(--tertiary, #003C71);
   border-radius: 8px;
   text-align: left;
   cursor: pointer;
   transition: all 0.3s ease;
}

.wf-quiz-option:hover {
   background: #fff;
   border-color: var(--secondary, #F7931E);
}

.wf-quiz-option.selected {
   background: var(--primary, #2196F3);
   border-color: var(--primary, #2196F3);
   color: #fff;
}

.wf-quiz-option-letter {
   flex: 0 0 auto;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--tertiary, #003C71);
   font-weight: 700;
   font-size: 0.875rem;
   border-radius: 4px;
}

.wf-quiz-option.selected .wf-quiz-option-letter {
   color: var(--white);
}

.wf-quiz-option-text {
   flex: 1;
   font-size: 14px;
   font-weight: 400;
   text-transform: uppercase;
   line-height: 1.4;
   color: var(--tertiary, #003C71);
}

.wf-quiz-option.selected .wf-quiz-option-text {
   color: #fff;
}

/* Navigation */
.wf-quiz-navigation {
   display: flex;
   gap: 16px;
   justify-content: flex-end;
   margin-top: 20px;
}

.wf-quiz-nav-btn {
   width: 56px;
   height: 56px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(8px);
   border: 2px solid var(--tertiary, #003C71);
   border-radius: 50%;
   color: #fff;
   cursor: pointer;
   transition: all 0.3s ease;
}

.wf-quiz-nav-btn:hover:not(:disabled) {
   background: var(--secondary, #F7931E);
   border-color: var(--secondary, #F7931E);
   transform: scale(1.1);
}

.wf-quiz-nav-btn:disabled {
   opacity: 0.3;
   cursor: not-allowed;
}

.wf-quiz-nav-btn svg {
   width: 24px;
   height: 24px;
}

.wf-quiz-nav-btn svg path {
   stroke: var(--tertiary, #003C71);
}

.wf-quiz-nav-btn:hover:not(:disabled) svg path {
   stroke: var(--white);
}

.wf-quiz-result-label {
   margin: 0 0 16px;
   font-size: 0.875rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: rgba(0, 0, 0, 0.5);
   border-left: 2px solid var(--tertiary, #003C71);
   padding-left: 10px;
   text-box-trim: trim-both;
}

.wf-quiz-result-title {
   margin: 0 0 20px;
   font-size: 2rem;
   font-weight: 700;
   line-height: 1.2;
   color: var(--tertiary, #003C71);
}

.wf-quiz-result-subtitle {
   margin: 0;
   font-size: 1.125rem;
   font-weight: 600;
   color: var(--tertiary, #003C71);
}

.wf-quiz-result-reasons {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin: 0 0 30px 25px;
   padding: 0;
   list-style: disc;
}

.wf-quiz-result-reasons li {
   position: relative;
   font-size: 1rem;
   line-height: 1.6;
   color: var(--text-color, #333);
}

.wf-quiz-btn-cta {
   background: var(--secondary, #F7931E);
   color: #fff;
   align-self: flex-start;
}

.wf-quiz-btn-cta:hover {
   background: var(--tertiary, #003C71);
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.wf-quiz-result-browse {
   margin: 24px 0 0;
   font-size: 0.95rem;
   color: rgba(0, 0, 0, 0.6);
}

.wf-quiz-result-browse a {
   color: var(--tertiary, #003C71);
   text-decoration: underline;
}

.wf-quiz-result-browse a:hover {
   color: var(--secondary, #F7931E);
}

/* ==========================================================================
   RESPONSIVE STYLES - Mobile Overrides
   All mobile styles below this point in proper cascading order
   ========================================================================== */

/* -------------------------------------------------------------------------
   Header - Tablet
   ------------------------------------------------------------------------- */
@media screen and (max-width: 1310px) {
   .wf-header .wf-header-inner {
      padding: 0 45px !important;
   }
}

@media screen and (max-width: 1202px) {

   .wf-nav,
   .wf-nav-primary .nav {
      gap: 0 1rem;
   }
}

@media screen and (max-width: 1140px) {

   .wf-nav,
   .wf-nav-primary .nav {
      padding-left: 40px !important;
   }
}

/* -------------------------------------------------------------------------
   Assessment Quiz - Tablet
   ------------------------------------------------------------------------- */
@media (max-width: 1200px) {

   .wf-quiz-question,
   .wf-quiz-result {
      flex-direction: column;
   }

   .wf-quiz-question .wf-quiz-slide-bg,
   .wf-quiz-result .wf-quiz-slide-bg {
      width: 100%;
      height: 300px;
   }

   .wf-quiz-question .wf-quiz-slide-content,
   .wf-quiz-result .wf-quiz-slide-content {
      width: 100%;
      min-height: auto;
      padding: 40px;
   }
}

/* -------------------------------------------------------------------------
   Header & Navigation - Mobile
   ------------------------------------------------------------------------- */
@media screen and (max-width: 1090px) {

   .wf-mega-nav .sub-menu a,
   .wf-nav .wf-mega-nav .sub-menu a {
      max-width: 100%;
   }

   li.ripple {
      display: none;
   }

   /* Mobile element widths */
   .wf-mobile-nav-header,
   .wf-submenu-mobile-header,
   .wf-nav-wrapper,
   .wf-submenu-content {
      width: 100%;
   }

   /* Show mobile toggle */
   .wf-nav-toggle {
      display: flex;
   }

   .wf-nav,
   .wf-nav-primary .nav {
      padding-left: 0 !important;
   }

   /* Mobile navigation panel */
   .wf-nav-primary {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      background: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transform: translateX(-100%);
      opacity: 0;
      visibility: hidden;
      transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      z-index: 9999;
   }

   .wf-nav-primary.is-open {
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
   }

   /* Mobile Nav Header */
   .wf-mobile-nav-header,
   .wf-submenu-mobile-header {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem 1.5rem;
      border-bottom: 1px solid #eee;
      background: #fff;
      flex-shrink: 0;
      position: relative;
   }

   .wf-mobile-logo-link {
      display: inline-block;
      line-height: 0;
   }

   .wf-mobile-logo {
      display: block;
      height: auto;
      max-height: 40px;
      width: auto;
   }

   .wf-mobile-nav-close {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 0;
      border: none;
      background: transparent;
      cursor: pointer;
      position: absolute;
      right: 1.5rem;
      top: 50%;
      transform: translateY(-50%);
   }

   .wf-mobile-close-bar {
      position: absolute;
      display: block;
      width: 24px;
      height: 2px;
      background: #333;
      transition: transform 0.2s;
   }

   .wf-mobile-close-bar:nth-child(1) {
      transform: rotate(45deg);
   }

   .wf-mobile-close-bar:nth-child(2) {
      transform: rotate(-45deg);
   }


   /* Single scroll region: nav + assessment so assessment never overlaps on short viewports */
   .wf-mobile-nav-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      display: flex;
      flex-direction: column;
   }

   .wf-mobile-nav-body .wf-nav-wrapper {
      flex: 0 0 auto;
      overflow-y: visible;
   }

   .wf-nav-wrapper {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
   }

   .wf-nav,
   .wf-nav-primary .nav {
      min-height: auto;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      padding: 0;
      gap: 0;
   }

   .wf-nav>li {
      position: relative !important;
   }

   /* Add border after every item except the last one and the second-to-last (before hidden ripple) */
   .wf-nav>li:not(:last-child):not(:nth-last-child(2))::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 1.5rem;
      right: 1.5rem;
      height: 1px;
      background: var(--tertiary, #0a2239);
   }

   .wf-nav>li>a {
      padding: 1rem 1.5rem;
      font-size: 1.1rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: space-between;
   }

   /* Add arrow indicator for parent items */
   .wf-nav>li.menu-item-has-children>a::after,
   .wf-nav>li.wf-has-mega>a::after {
      content: url('/wp-content/themes/Divi-Child/assets/images/right-caret.svg');
      margin-left: auto;
      font-size: 1.2rem;
      transition: transform 0.2s;
   }

   /* Hide sub-menus and mega menus by default */
   .wf-nav .sub-menu,
   .wf-mega {
      display: none;
   }

   /* Slide-over submenu panel */
   .wf-submenu-panel {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      background: #fff;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      z-index: 10000;
      display: flex;
      flex-direction: column;
      overflow: hidden;
   }

   .wf-submenu-panel.is-active {
      transform: translateX(0);
   }

   /* Submenu mobile header (clone of main mobile header) */
   .wf-submenu-mobile-header {
      display: flex;
      border-bottom: 1px solid #eee;
   }

   .wf-mega-assessment::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 110px;
      background: var(--white);
      opacity: 0.65;
      z-index: 0;
      mix-blend-mode: color-dodge;
   }

   /* Submenu back button header */
   .wf-submenu-header {
      flex-shrink: 0;
      background: var(--primary, #2196F3);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   }

   .wf-submenu-back-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 1rem 1.5rem;
      background: transparent;
      color: #fff;
      border: none;
      cursor: pointer;
      font-size: 1rem;
      font-weight: 600;
      text-align: center;
      gap: 0.75rem;
      transition: background-color 0.2s ease;
      position: relative;
   }


   .wf-submenu-back-button .wf-submenu-back-arrow {
      font-size: 1.3rem;
      line-height: 1;
      font-weight: 300;
      position: absolute;
      left: 1.5rem;
   }

   .wf-submenu-title {
      text-transform: uppercase;
      letter-spacing: 0.5px;
   }

   /* Single scroll region for submenu: content + assessment so assessment does not overlap on short viewports */
   .wf-submenu-panel-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      display: flex;
      flex-direction: column;
   }

   .wf-submenu-panel-body .wf-submenu-content {
      flex: 0 0 auto;
      overflow-y: visible;
   }

   .wf-submenu-content {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 1rem 0;
      background: #fff;
   }

   .wf-submenu-content .sub-menu,
   .wf-submenu-content .wf-mega-nav .sub-menu,
   .wf-submenu-content .wf-submenu-list .sub-menu {
      display: flex;
      flex-direction: column;
      gap: 0;
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      min-width: 0;
      padding: 0;
      list-style: none;
      margin: 0;
   }

   .wf-submenu-content .wf-mega-nav {
      min-width: 0;
      padding: 0;
      align-items: stretch;
   }

   .wf-submenu-content .wf-submenu-list {
      width: 100%;
   }

   .wf-submenu-content .sub-menu li {
      position: relative;
   }

   .wf-submenu-content .sub-menu li:not(:first-child)::before {
      content: '';
      position: absolute;
      top: 0;
      left: 1.5rem;
      right: 1.5rem;
      height: 1px;
      background: var(--tertiary, #0a2239);
   }

   .wf-submenu-content .sub-menu a {
      padding: 1rem 1.5rem;
      display: block;
      color: #333;
      text-decoration: none;
      font-weight: 500;
      border-bottom: none;
      text-transform: uppercase;
   }


   /* Offerings grid in submenu */
   .wf-submenu-content .wf-mega-offerings {
      border-left: none;
      padding: 1.5rem;
      min-width: 0;
   }

   .wf-submenu-content .wf-mega-offerings-grid {
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
   }

   .wf-submenu-content .wf-mega-offering-card {
      padding: 30px 10px 15px !important;
      margin: 20px 0 0;
   }

   .wf-submenu-content .wf-mega-offering-media {
      margin-top: -50px;
      margin-bottom: 12px;
   }

   .wf-submenu-content .wf-mega-offering-media img {
      max-height: 50px;
   }

   .wf-submenu-content .wf-mega-offering-title {
      font-size: 13px;
   }

   .wf-mobile-assessment-title {
      margin: 0 0 20px;
      color: var(--primary);
   }

   .wf-submenu-assessment,
   .wf-mobile-assessment {
      display: block;
      padding: 0;
      margin-top: auto;
   }

   .wf-mobile-nav-body .wf-mobile-assessment-title,
   .wf-mobile-nav-body .wf-mobile-assessment {
      margin-top: 1.5rem;
      flex-shrink: 0;
   }

   .wf-submenu-panel-body .wf-submenu-assessment {
      margin-top: 0;
      flex-shrink: 0;
   }

   .wf-mobile-assessment .wf-mega-assessment,
   .wf-submenu-assessment .wf-mega-assessment {
      min-height: auto;
      padding: 2.5rem 1.5rem 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 1.5rem;
   }

   .wf-mobile-assessment .wf-mega-assessment-title,
   .wf-submenu-assessment .wf-mega-assessment-title {
      font-size: 1.75rem;
      max-width: 100%;
      line-height: 1.2;
      margin: 0;
      font-style: italic;
      font-weight: 700;
   }

   .wf-mobile-assessment .wf-mega-assessment::before,
   .wf-submenu-assessment .wf-mega-assessment::before {
      opacity: 0.3;
   }

   .wf-assessment-primary-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      font-size: 1rem;
      letter-spacing: 0.5px;
      transition: all 0.3s ease;
      text-transform: uppercase;
      margin-bottom: 40px;
   }

   .wf-assessment-actions {
      display: flex;
      gap: 1rem;
      width: 100%;
      max-width: 500px;
      position: relative;
      z-index: 2;
   }

   .wf-assessment-btn {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.875rem 1.5rem;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.9rem;
      letter-spacing: 0.5px;
      border-radius: 4px;
      transition: all 0.3s ease;
      text-transform: uppercase;
      border: none;
   }

   .wf-assessment-btn-blue {
      background: #2196F3;
      color: #fff;
   }

   .wf-assessment-btn-blue:hover {
      background: #1976D2;
      color: #fff !important;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
   }

   .wf-assessment-btn-orange {
      background: #FF772B;
      color: #fff;
   }

   .wf-assessment-btn-orange:hover {
      background: #E66520;
      color: #fff !important;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(255, 119, 43, 0.3);
   }

   /* Hide old assessment link */
   .wf-mobile-assessment .wf-mega-assessment-link,
   .wf-submenu-assessment .wf-mega-assessment-link {
      display: none;
   }

   /* Hide desktop mega menu components on mobile */
   .wf-mega-cta,
   .wf-mega-col:not(.wf-mega-offerings):not(.wf-mega-nav) {
      display: none;
   }

   /* Overlay for open submenu panel */
   .wf-submenu-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.1);
      z-index: -1;
      opacity: 0;
      transition: opacity 0.3s ease;
   }

   .wf-submenu-panel.is-active::before {
      opacity: 1;
   }

   /* Smooth scrolling for mobile panels */
   .wf-nav-wrapper,
   .wf-submenu-content,
   .wf-submenu-panel-body {
      scrollbar-width: thin;
      scrollbar-color: #ccc transparent;
   }

   .wf-nav-wrapper::-webkit-scrollbar,
   .wf-submenu-content::-webkit-scrollbar,
   .wf-submenu-panel-body::-webkit-scrollbar {
      width: 6px;
   }

   .wf-nav-wrapper::-webkit-scrollbar-track,
   .wf-submenu-content::-webkit-scrollbar-track,
   .wf-submenu-panel-body::-webkit-scrollbar-track {
      background: transparent;
   }

   .wf-nav-wrapper::-webkit-scrollbar-thumb,
   .wf-submenu-content::-webkit-scrollbar-thumb,
   .wf-submenu-panel-body::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 3px;
   }

   /* Mobile nav items styling improvements */
   .wf-nav>li>a {
      font-size: 15px;
      font-weight: 500;
   }

   /* Ensure ripple button stays styled on mobile */
   .wf-nav li.ripple {
      background: var(--primary, #2196F3);
      margin: 1rem 1.5rem;
      border-radius: 4px;
      border-bottom: none;
   }

   .wf-nav li.ripple::after {
      display: none !important;
   }

   .wf-nav li.ripple>a {
      color: #fff !important;
      padding: 0.75rem 1rem;
      text-align: center;
      justify-content: center;
   }

   .wf-nav li.ripple>a::after {
      display: none;
   }
}

@media screen and (max-width: 767px) {
   .wf-flex-hero-subtitle {
      margin: 0 auto !important;
   }

   .wf-quote-tab {
      width: 26px;
      height: 115px;
   }

   .wf-quote-tab__text {
      font-size: 12px;
   }

   .wf-flex-cta-block-content {
      padding: 0 35px;
   }
}

/* -------------------------------------------------------------------------
   Small Mobile Phones
   ------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {

   .wf-mobile-assessment .wf-mega-assessment-title,
   .wf-submenu-assessment .wf-mega-assessment-title {
      font-size: 1.5rem;
   }

   .wf-assessment-primary-btn {
      padding: 0.875rem 1.5rem;
      font-size: 0.9rem;
   }

   .wf-assessment-actions {
      /* flex-direction: column; */
      gap: 0.75rem;
   }

   .wf-assessment-btn {
      width: 100%;
   }
}

@media screen and (max-width: 380px) {

   .wf-mobile-assessment .wf-mega-assessment,
   .wf-submenu-assessment .wf-mega-assessment {
      padding: 2rem 1rem;
   }

   .wf-mobile-assessment .wf-mega-assessment-title,
   .wf-submenu-assessment .wf-mega-assessment-title {
      font-size: 1.35rem;
   }

   .wf-assessment-primary-btn {
      font-size: 0.85rem;
      padding: 0.75rem 1.25rem;
   }

   .wf-assessment-btn {
      font-size: 0.85rem;
      padding: 0.75rem 1rem;
   }
}

/* -------------------------------------------------------------------------
   Assessment Quiz - Mobile
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
   .wf-quiz-slide-content {
      padding: 60px 24px;
      gap: 32px;
   }

   .wf-quiz-title {
      font-size: 2rem;
   }

   .wf-quiz-question-title {
      font-size: 1.75rem;
   }

   .wf-quiz-result-title {
      font-size: 1.5rem;
   }

   .wf-quiz-option {
      padding: 16px 20px;
      gap: 16px;
   }

   .wf-quiz-option-text {
      font-size: 0.875rem;
   }

   .wf-quiz-close {
      top: 16px;
      right: 16px;
      width: 40px;
      height: 40px;
   }
}