/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.2.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


/*
 ██████╗ ██╗      ██████╗ ██████╗  █████╗ ██╗
██╔════╝ ██║     ██╔═══██╗██╔══██╗██╔══██╗██║
██║  ███╗██║     ██║   ██║██████╔╝███████║██║
██║   ██║██║     ██║   ██║██╔══██╗██╔══██║██║
╚██████╔╝███████╗╚██████╔╝██████╔╝██║  ██║███████╗
 ╚═════╝ ╚══════╝ ╚═════╝ ╚═════╝ ╚═╝  ╚═╝╚══════╝

NOTE: Elementor global color IDs below are unique to each site's Kit.
Update this reference block per site (Elementor → Site Settings → Global Colors).

CONTENTS (search for the number, e.g. "01.")
  01. Colors & base
  02. Utilities (full-link icon box, link underline)
  03. Buttons
  04. Legacy text block & default lists
  05. Forms (form-default)
  06. Shared components (map embed, homepage hero, featured services, footer)
  07. Responsive tweaks
  08. Site navigation (desktop, [site_nav])
  09. Popup menu (tablet / mobile)
  10. Header (sticky)
  11. Announcement bar (mobile marquee)
  12. Interactions (carousel nav, TOC, sidebar sync)
  13. Membership tiers
  14. Single post

Widget styles live in css/widgets/, the .animate fade in css/animations.css.
Rules are in cascade order: moving a block can change which style wins.
*/

/* ==========================================================================
   01. COLORS & BASE
   ========================================================================== */

:root {
  --color-black: #0F0F0F;
  --color-dark-gray: #313130;
  --color-gray: #6C6C6C;
  --color-light-gray: #F0F0F0;
  --color-white: #FFFFFF;
  --color-deep-blue: #122136;
  --color-navy-blue: #1E3A5F;
  --color-medium-blue: #4F8FB8;
  --color-light-blue: #B3E9FA;
  --color-ice-blue: #F3FBFE;
  --color-tan: #C8A97E;
  --color-cream: #F6EFE6;
}

body p:last-child {margin-bottom: 0;}
body :is(ul, ol) {margin-bottom: 20px;}

.btn-icon .elementor-icon {display: block;}

/* ==========================================================================
   02. UTILITIES
   ========================================================================== */

/* FULL-LINK ICON BOX
   Usage: add "full-link" to an Icon Box widget that has a Link set.
   The title link is stretched over the whole widget, so clicking anywhere
   in the box (icon, title, description, padding) follows the link. */
.full-link.elementor-widget-icon-box {
  position: relative;
  cursor: pointer;
}

.full-link .elementor-icon-box-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Keyboard focus ring around the whole box instead of just the title */
.full-link .elementor-icon-box-title a:focus-visible {
  outline: none;
}

.full-link .elementor-icon-box-title a:focus-visible::after {
  outline: 2px solid var(--color-medium-blue);
  outline-offset: 2px;
}

/* a[href] adds enough weight to beat Elementor's global link color */
.link-underline a[href] {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity .2s ease;
}

/* ==========================================================================
   03. BUTTONS
   ========================================================================== */
.btn-outline .elementor-button {
  background: transparent !important;
  border: 1px solid var(--color-light-blue) !important;
  color: var(--color-light-blue) !important;
  transition: background-color .25s ease;
}

.btn-outline .elementor-button:hover,
.btn-outline .elementor-button:focus {
  background: rgba(57, 34, 28, 0.30) !important;
  border-color: var(--color-light-blue) !important;
  color: var(--color-light-blue) !important;
}

.btn-outline .elementor-button svg path {
  stroke: currentColor;
  fill: none !important;
}

/* White variation */
.btn-outline.white .elementor-button,
.btn-outline.white .elementor-button:hover,
.btn-outline.white .elementor-button:focus {
  border-color: var(--color-white) !important;
  color: var(--color-white) !important;
}

.btn-text .elementor-button,
.btn-text .elementor-button:hover,
.btn-text .elementor-button:focus,
.btn-text .elementor-button:active {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0;
}

.btn-text .elementor-button-content-wrapper {
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

.btn-text .elementor-button svg path {
  stroke: currentColor;
  fill: none !important;
}

.btn-text.nounderline .elementor-button-content-wrapper {
  border-bottom: none;
  padding-bottom: 0;
}

.btn-sticky .elementor-button svg path{fill: var(--color-navy-blue);}


/* ==========================================================================
   04. LEGACY TEXT BLOCK (Sitemap / Privacy / Terms / HIPAA) & DEFAULT LISTS
   ========================================================================== */
.legacy-text-block :is(h1, h2) {margin: 60px 0 30px;}
.legacy-text-block h3 {margin: 40px 0 20px;}
.legacy-text-block :is(h1, h2, h3):first-child {margin-top: 0;}
.legacy-text-block :is(b, strong) {font-weight: 600;}

.legacy-text-block .quote-block{
  margin-top: 20px;
  padding: 20px 30px;
  background-color: var(--color-ice-blue);
  border-left: 3px solid var(--color-medium-blue);
  color: var(--color-deep-blue);
  font-size: 1.5rem;
  font-weight: 500;
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1.54em;
}

.legacy-text-block .highlight-block :is(.wp-block-heading,.wp-block-list){
  margin: 0 !important; padding: 0;
}

.legacy-text-block .highlight-block .wp-block-heading{
  margin-bottom: 30px !important;
}

.legacy-text-block .highlight-block{
  margin-top: 70px;
  gap: 20px;
  padding: 40px;
  border-radius: 17px;
  background-color: var(--color-ice-blue);
}

.default-list ul,
.default-list ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.default-list li {
  position: relative;
  padding-left: 20px; /* marker width + gap */
}

/* Bullet */
.default-list ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.5lh - 2.5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-black);
}

/* Numbers */
.default-list ol {
  counter-reset: list-item;
}

.default-list ol > li {
  counter-increment: list-item;
}

.default-list ol > li::before {
  content: counter(list-item) ".";
  position: absolute;
  left: 0;
  top: 0;
}

.default-list b,
.default-list strong {
  color: var(--color-black);
}

.default-list a[href] {
  color: var(--color-navy-blue);
}

.default-list li + li {
  margin-top: 10px;
}

/* ==========================================================================
   05. FORMS — add "form-default" to an Elementor Form widget
   ========================================================================== */
.form-default .elementor-field-group { position: relative; }

/* --- Marketing / non-marketing acceptance checkboxes --------------------- */
.form-default .elementor-field-group-marketing_acceptance .elementor-field-option,
.form-default .elementor-field-group-nonmarketing_acceptance .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

.form-default .elementor-field-group-marketing_acceptance input[type="checkbox"],
.form-default .elementor-field-group-nonmarketing_acceptance input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  margin-top: 0.3em;
  background-color: rgba(233, 233, 233, 0.5);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 8px;
  border: none;
  border-radius: 4px !important;
  cursor: pointer;
  padding: 0;
}

.form-default .elementor-field-group-marketing_acceptance input[type="checkbox"]:checked,
.form-default .elementor-field-group-nonmarketing_acceptance input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.8 6.5L9 1' stroke='%230F0F0F' stroke-width='1.6'/%3E%3C/svg%3E");
}

.form-default .elementor-field-group-marketing_acceptance > .elementor-field-label,
.form-default .elementor-field-group-nonmarketing_acceptance > .elementor-field-label {
  display: none;
}

/* --- Custom select dropdown caret icon ------------------------------------*/
.form-default .select-caret-down-wrapper svg { display: none; }

.form-default .select-caret-down-wrapper {
  width: 12px;
  height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.495117 0.495117L5.99512 5.99512L11.4951 0.495117' stroke='%230F0F0F' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* --- Acceptance field label color/size ------------------------------------*/
.form-default .elementor-field-type-acceptance label {
  color: var(--color-dark-gray) !important;
  font-size: 0.875rem !important;
}

/* --- Remove focus outline on all field types ------------------------------*/
.form-default .elementor-field-textual:focus,
.form-default .elementor-field-textual:focus-visible,
.form-default input:focus,
.form-default input:focus-visible,
.form-default textarea:focus,
.form-default textarea:focus-visible,
.form-default select:focus,
.form-default select:focus-visible {
  outline: none;
  box-shadow: none;
}

.form-default .elementor-field-type-html { margin: 0 !important; }

/* --- Legacy links row (e.g. privacy policy link under the form) --------- */
.form-default .form-legacy-menu {
  display: flex;
  position: absolute;
  right: 20px;
  bottom: -35px;
  z-index: 1;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-gray);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.form-default .form-legacy-menu li {
  margin: 0;
  padding: 0;
}

.form-default .form-legacy-menu a {
  color: var(--color-gray);
  text-decoration: none;
}

.form-default .form-legacy-menu a:hover { color: var(--color-navy-blue); }

/* --- Radio buttons as pills (e.g. Preferred Payment Option) --------------
   Each option is a full-width pill: --color-deep-blue border and text on a
   transparent background; the selected one fills deep blue with white text.
   The real radio input sits invisibly on top of its pill, so clicking,
   keyboard and screen readers work as normal. Options share the row
   equally and wrap onto new rows on narrow screens. */
.form-default .elementor-field-type-radio .elementor-field-subgroup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  width: 100%;
}

.form-default .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}

/* The real input: invisible, covering the whole pill */
.form-default .elementor-field-type-radio input[type="radio"] {
  -webkit-appearance: none;
          appearance: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* The pill */
.form-default .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option label {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 12px 24px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--color-deep-blue);
  background: transparent;
  border: 1px solid var(--color-deep-blue);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

/* Hover + selected: deep-blue fill, white text */
.form-default .elementor-field-type-radio input[type="radio"]:is(:hover, :checked) + label {
  color: var(--color-white);
  background-color: var(--color-deep-blue);
  border-color: var(--color-deep-blue);
}

/* Keyboard focus ring on the pill (the general focus reset above removes the default) */
.form-default .elementor-field-type-radio input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--color-medium-blue);
  outline-offset: 2px;
}

/* --- Placeholder full opacity ---------------------------------------------*/
.form-default input::placeholder,
.form-default textarea::placeholder {
  opacity: 1 !important;
}

/* ==========================================================================
   06. SHARED COMPONENTS
   ========================================================================== */

/* --- Responsive embed wrapper (e.g. Google Maps iframe) fills its parent - */
.map-embed {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 17px;
}

/* HOMEPAGE HERO */
.homepage-hero {
  position: relative;
  overflow: hidden;
}

.homepage-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0) 314px),
    linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}

.homepage-hero > .e-con-inner {
  position: relative;
  z-index: 1;
}

/* HOME FEATURED SERVICE CARDS — image sizing */
.home-featured-service .elementor-cta__image {
  width: 100%;
  height: 440px;
  overflow: hidden;
}

.home-featured-service .elementor-cta__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tablet and mobile (1024px and below): 4:3 instead of a fixed height */
@media (max-width: 1024px) {
  .home-featured-service .elementor-cta__image {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* FOOTER */
.site-main-footer .footer-menu .elementor-nav-menu{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ==========================================================================
   07. RESPONSIVE TWEAKS
   ========================================================================== */
@media (max-width: 1024px){
  .site-main-footer .legacy-menu .elementor-nav-menu{
    margin: 0;
    justify-content: left;
    gap: 15px 0;
  }

  .site-main-footer .legacy-menu .elementor-item{
    margin-right: 20px !important;
    margin-left: 0 !important;
  }

  .sticky-buttons{
    background: none !important;
    border: 0 !important;
  }

  .hero-img img{
     height: auto !important;
     aspect-ratio: 16/9;
  }
}

@media (max-width: 767px){
  .hero-img img{
     height: auto !important;
     aspect-ratio: 4/3;
  }
}

/* Small phones: form links flow above the Submit button instead of overlapping */
@media (max-width: 480px){
  .form-default .form-legacy-menu {
    position: static;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 0 40px 0;
  }
}

/* ==========================================================================
   08. SITE NAVIGATION (desktop, [site_nav] — 4 levels)
   Level 2 opens below the top link; level 3 flies out to the right.
   The .is-resizing class is toggled by the nav script.
   Active state: .is-current (current page) and .is-ancestor (its parents)
   are added by Site_Nav_Walker.
   ========================================================================== */

.site-nav-wrapper { position: relative; }

.site-nav__list,
.site-nav__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-nav__item { position: relative; }

/* All menu links (levels 1-3).
   Scoped to .site-nav so it beats Elementor's global link color
   (.elementor-kit-XX a). Keep later overrides of these links scoped the
   same way, or they'll lose to this rule. */
.site-nav .site-nav__link,
.site-nav .site-nav__sublink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.42em;
  color: var(--color-white);
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.2s ease, color 0.2s ease;
}

/* Caret on any item that has a submenu (follows the link color) */
:is(.site-nav__item, .site-nav__subitem).has-children > :is(.site-nav__link, .site-nav__sublink)::after {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 5px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='7' height='5' viewBox='0 0 7 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.353516 0.353577L3.35352 3.35358L6.35352 0.353577' stroke='white'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg width='7' height='5' viewBox='0 0 7 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.353516 0.353577L3.35352 3.35358L6.35352 0.353577' stroke='white'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Level 2 items open to the right, so their caret points right */
.site-nav__subitem.has-children > .site-nav__sublink::after {
  transform: rotate(-90deg);
}

/* OPEN STATE
   The nav script adds .is-open to the item whose submenu should show, with
   a short delay before closing or switching (hover intent), so the pointer
   can slip off an item or cut diagonally across a sibling on its way to a
   flyout without it closing. It also adds .has-hover-intent to .site-nav.
   Without the script, plain :hover is used instead. Keyboard users get the
   same menus through :focus-visible. */

/* Top level: dim siblings, highlight the hovered / open link */
.site-nav__list:hover > .site-nav__item:not(:hover) > .site-nav__link { opacity: 0.3; }
.site-nav__item:is(:hover, .is-open) > .site-nav__link { color: var(--color-light-blue); }

/* Dropdown panel. padding-top (not margin) keeps a hoverable bridge between
   the top link and the card, so the menu doesn't close on the way down. */
.site-nav__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  padding-top: 30px;
}

.site-nav__item.has-children.is-open > .site-nav__panel,
.site-nav__item.has-children:has(:focus-visible) > .site-nav__panel,
.site-nav:not(.has-hover-intent) .site-nav__item.has-children:hover > .site-nav__panel {
  display: block;
}

/* Level 2 column - grows with its longest item.
   No gap between rows: the spacing lives in each link's padding, so the
   rows touch and there's no dead zone between them for the pointer to fall
   into. */
.site-nav__sublist--level-2 {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: max-content;
  min-width: 150px;
  min-height: 0;
  padding: 13.5px 0;
  background: var(--color-black);
  border: 0;
  border-radius: 13px;
  box-shadow: none;
  transition: min-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius 0.12s ease-out;
}

/* Submenu links: full-width rows (14.5px top/bottom = the old 8px padding
   + half of the old 13px gap, so the spacing looks the same) */
.site-nav .site-nav__sublink {
  padding: 14.5px 24px 14.5px 16px;
}

/* Square the right corners while a level-3 flyout is open */
.site-nav__sublist--level-2:has(> .site-nav__subitem.has-children.is-open),
.site-nav:not(.has-hover-intent) .site-nav__sublist--level-2:has(> .site-nav__subitem.has-children:hover) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.site-nav__subitem {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Level 3 flyout. Always laid out so it can fade; visibility + pointer-events
   stop it catching the cursor while hidden. padding-left (not margin) avoids
   a hover gap between the two columns.
   Same height: min-height 100% makes it at least as tall as the column it
   opens from (its containing block); the nav script grows the earlier
   columns when a flyout is taller. Same vertical padding and row spacing as
   level 2, so the rows line up across columns. */
.site-nav__sublist--level-3 {
  position: absolute;
  top: 0;
  left: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: max-content;
  min-height: 100%;
  padding: 13.5px 24px 13.5px 49px;
  background: var(--color-black);
  border: 0;
  border-radius: 0 13px 13px 0;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease,
              visibility 0s linear 0.2s;
}

.site-nav__subitem.has-children.is-open > .site-nav__sublist--level-3,
.site-nav__subitem.has-children:has(:focus-visible) > .site-nav__sublist--level-3,
.site-nav:not(.has-hover-intent) .site-nav__subitem.has-children:hover > .site-nav__sublist--level-3 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease,
              visibility 0s;
}

/* Level 4 flyout (e.g. Cosmetic Dentistry > Smile Makeover > ...).
   The walker gives every list below level 2 the level-3 class, so a 4th-level
   list is a level-3 list nested inside another one. It reuses the level-3
   look and show/hide, and sits as the next column to the right, flush with
   the top of the panel (its containing block is the level-3 list). The nav
   script matches its height to the other open columns. */
.site-nav__sublist--level-3 .site-nav__sublist--level-3 {
  top: 0;
  left: 100%;
}

/* Square the level-3 right corners while a level-4 flyout is open */
.site-nav__sublist--level-3:has(> .site-nav__subitem.has-children.is-open),
.site-nav:not(.has-hover-intent) .site-nav__sublist--level-3:has(> .site-nav__subitem.has-children:hover) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Levels 2-4: dim siblings, highlight the hovered / open item */
:is(.site-nav__sublist--level-2, .site-nav__sublist--level-3):hover > .site-nav__subitem:not(:hover, .is-open) { opacity: 0.3; }
.site-nav__subitem:is(:hover, .is-open) > .site-nav__sublink { color: var(--color-light-blue); }

/* Active state: current page + its parent items (classes set by the walker) */
.site-nav__item:is(.is-current, .is-ancestor) > .site-nav__link,
.site-nav__subitem:is(.is-current, .is-ancestor) > .site-nav__sublink {
  color: var(--color-light-blue);
}

/* The current page link isn't clickable */
.site-nav__subitem.is-current > .site-nav__sublink { pointer-events: none; }

/* ==========================================================================
   09. POPUP MENU (tablet / mobile)
   Elementor Nav Menu widget (Dropdown layout) with the class "popup-menu".
   Text styles come from the widget settings.
   Spacing uses margins, not flex gap: SmartMenus sets display:block inline
   on a submenu when it opens, which would switch a flex gap off.
   ========================================================================== */

/* Links: no vertical padding, so the spacing below is exact.
   Icon pushed to the far right of the row. */
.popup-menu .elementor-nav-menu--dropdown a {
  display: flex;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.popup-menu .elementor-nav-menu--dropdown a .sub-arrow {
  margin-left: auto;
}

/* 40px between top-level items */
.popup-menu .elementor-nav-menu > li + li {
  margin-top: 40px;
}

/* Submenus: 26px below their parent, 1px light-blue line down the left of
   the whole list, 16px indent from the line (also separates the lines of
   nested submenus). Replaces Elementor's own indent, which uses a
   transparent left border on each submenu link. */
.popup-menu .elementor-nav-menu .sub-menu {
  margin-top: 26px;
  padding-left: 16px;
  border-left: 1px solid var(--color-light-blue);
}

/* Deeper submenus (3rd level and below): indent only, no line */
.popup-menu .elementor-nav-menu .sub-menu .sub-menu {
  border-left: 0;
}

.popup-menu .elementor-nav-menu--dropdown a.elementor-sub-item {
  border-left: 0 !important;
  border-inline-start: 0 !important;
}

/* 26px between submenu items */
.popup-menu .elementor-nav-menu .sub-menu > li + li {
  margin-top: 26px;
}

/* Active: parents of the current page use WordPress's own ancestor class.
   !important beats the color Elementor sets on the widget's links. */
.popup-menu .elementor-nav-menu li.current-menu-ancestor > a {
  color: var(--color-light-blue) !important;
}

/* ==========================================================================
   10. HEADER (sticky)
   ========================================================================== */

/* The whole <header> sticks, pulled up by the announcement bar's height, so the
   bar scrolls away and only .site-main-header stays on screen.
   js/interactions/sticky-header.js measures --announcement-height and
   --header-height, and adds .header-scrolled to <body> once it's stuck.
   Both are switched off inside the Elementor editor, where a sticky header
   gets in the way of editing. */
body:not(.elementor-editor-active) .elementor-location-header {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--announcement-height, 0px));
  z-index: 100;
}

/* Phones: the WP admin bar scrolls away, so don't leave room for it */
@media (max-width: 600px) {
  body.admin-bar:not(.elementor-editor-active) .elementor-location-header {
    top: calc(-1 * var(--announcement-height, 0px));
  }
}

.site-main-header {
  background-color: var(--color-deep-blue);
  transition: background-color 0.3s ease;
}

/* Homepage: main header transparent over the hero */
.home .elementor-location-header {
  margin-bottom: calc(-1 * var(--header-height, 0px));
}

.home .site-main-header {
  background-color: transparent;
}

/* Stuck (all pages): black background */
.header-scrolled .site-main-header {
  background-color: var(--color-black);
}

.header-scrolled .site-nav__panel,
body:not(.home) .site-nav__panel {
  padding-top: 54px;
}

/* ==========================================================================
   11. ANNOUNCEMENT BAR (marquee) - mobile only (<= 767px)
   On mobile, js/interactions/announcement-bar.js wraps the .block-item
   elements in .announcement-track, duplicates them, and adds .is-marquee to
   the bar; the track scrolls -50% for a seamless loop. Animation duration is
   set by JS based on content width. Above 767px the items render as normal
   Elementor content (set the bar's desktop/tablet layout in Elementor).
   ========================================================================== */

.announcement-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  animation: announcement-marquee 30s linear infinite;
  will-change: transform;
}

.announcement-track > .block-item {
  --width: auto;           /* Elementor container width override */
  flex: 0 0 auto;
  width: auto;
  padding-right: 80px;     /* space between message repeats */
}

.announcement-track .elementor-heading-title { white-space: nowrap; }

/* Pause on hover so links/buttons are easy to click. Mouse devices only:
   on touch screens :hover sticks after a tap and would freeze the marquee. */
@media (hover: hover) {
  .announcement-bar:hover .announcement-track { animation-play-state: paused; }
}

@keyframes announcement-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Mobile bar layout while scrolling: one row, clipped to the bar's width
   (otherwise the track makes the whole page scroll sideways) */
.announcement-bar.is-marquee,
.announcement-bar.is-marquee > .e-con-inner {
  flex-wrap: nowrap;
  overflow: hidden;
}

/* The track must start at the bar's left edge. If the bar is set to a
   centered column in Elementor, the wide track would be centered and hang
   off both sides, so the loop ran out of copies on the right and the next
   message only popped in late. Force a left-aligned row while scrolling. */
.elementor .announcement-bar.is-marquee > .e-con-inner,
.elementor .announcement-bar.is-marquee:not(:has(> .e-con-inner)) {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.announcement-bar.is-marquee .announcement-track {
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
}

/* ==========================================================================
   12. INTERACTIONS — default styles for js/interactions/* (override per site)
   ========================================================================== */
:root {--mavan-toc-offset: 150px;}

/* Carousel nav (class-based + Mavan Carousel Nav widget) */
.mavan-carousel-nav {display: flex; align-items: center; gap: 10px;}
.mavan-carousel-arrow {cursor: pointer; transition: opacity .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease;}
.mavan-carousel-nav .mavan-carousel-arrow {display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; font-size: 16px; line-height: 1; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 50%;}
.mavan-carousel-nav .mavan-carousel-arrow:is(:hover, :focus) {color: inherit; background: transparent;}
.mavan-carousel-nav .mavan-carousel-arrow svg {width: 1em; height: 1em;}
.mavan-carousel-nav .mavan-carousel-arrow svg.e-font-icon-svg {fill: currentColor;}
.mavan-carousel-nav .mavan-carousel-arrow svg:not(.e-font-icon-svg) :is(path, line, polyline, polygon, circle, rect, ellipse) {stroke: currentColor;}
.mavan-carousel-arrow.is-disabled {opacity: .35; pointer-events: none;}
.mavan-carousel-arrow.is-hidden-nav {display: none;}
.elementor-editor-active .mavan-carousel-nav .mavan-carousel-arrow.is-hidden-nav {display: inline-flex; opacity: .3;}
body:not(.elementor-editor-active) .mavan-carousel-nav--empty {display: none !important;}

/* Table of contents */
.mavan-toc {display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin;}
.mavan-toc-link {display: block; padding: 4px 0 4px 12px; border-left: 2px solid transparent; color: inherit; text-decoration: none; transition: color .2s ease, border-color .2s ease;}
.mavan-toc-link--h3 {margin-left: var(--mavan-toc-indent, 12px); font-size: .9em;}
.mavan-toc-link--h4 {margin-left: calc(var(--mavan-toc-indent, 12px) * 2); font-size: .85em;}
.mavan-toc-menu__title {margin: 0 0 12px; font-weight: 600;}
.mavan-toc-empty {font-size: .875em; opacity: .6;}
.mavan-toc-link:is(:hover, :focus-visible, .is-active) {color: var(--e-global-color-accent, currentColor);}
.mavan-toc-link.is-active {border-left-color: currentColor; font-weight: 600;}

/* Sidebar → carousel sync */
.mavan-slide-nav-item {cursor: pointer; opacity: .6; transition: opacity .2s ease;}
.mavan-slide-nav-item:is(:hover, :focus-visible, .is-active) {opacity: 1;}

/* ==========================================================================
   13. MEMBERSHIP TIERS
   ========================================================================== */

/* Transitions (base state) */
.tier-block,
.tier-block .pricing-block,
.tier-block .elementor-heading-title,
.tier-block .tier-description,
.tier-block .tier-description p,
.tier-block .btn .elementor-button {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* Highlighted state: the hovered card, or the featured card (.is-featured on
   the tier-block) while no card in the grid is hovered. Hovering another
   card moves the highlight to it; moving off the grid brings it back to the
   featured card. */
.tier-block:hover,
.tier-grid:not(:has(.tier-block:hover)) .tier-block.is-featured {
  background-color: var(--color-navy-blue) !important;
}

.tier-block:hover .heading .elementor-heading-title,
.tier-grid:not(:has(.tier-block:hover)) .tier-block.is-featured .heading .elementor-heading-title {
  color: var(--color-white) !important;
}

.tier-block:hover .pricing-block,
.tier-grid:not(:has(.tier-block:hover)) .tier-block.is-featured .pricing-block {
  background-color: var(--color-deep-blue) !important;
}

.tier-block:hover .pricing-heading .elementor-heading-title,
.tier-grid:not(:has(.tier-block:hover)) .tier-block.is-featured .pricing-heading .elementor-heading-title {
  color: var(--color-light-gray) !important;
}

.tier-block:hover .price .elementor-heading-title,
.tier-grid:not(:has(.tier-block:hover)) .tier-block.is-featured .price .elementor-heading-title {
  color: var(--color-white) !important;
}

.tier-block:hover .tier-description,
.tier-grid:not(:has(.tier-block:hover)) .tier-block.is-featured .tier-description,
.tier-block:hover .tier-description p,
.tier-grid:not(:has(.tier-block:hover)) .tier-block.is-featured .tier-description p {
  color: var(--color-light-gray) !important;
}

.tier-block:hover .btn .elementor-button,
.tier-grid:not(:has(.tier-block:hover)) .tier-block.is-featured .btn .elementor-button {
  background-color: var(--color-light-blue) !important;
  border-color: var(--color-light-blue) !important;
}

/* ==========================================================================
   14. SINGLE POST
   ========================================================================== */

/* Author box */
.single-post .author-box .elementor-author-box__name{
  font-size: 1rem;
  color: var(--color-white);
}

.single-post .author-box .elementor-author-box__name span{
  display: block;
  font-weight: 400;
  font-size: 0.875em;
  color: var(--color-light-gray);
}

/* BLOG POST INFO — bullet divider between items */
.single-post .blog-info .elementor-inline-item + .elementor-inline-item::before {
  content: "•";
  display: inline-block;
  margin-right: 10px;
  color: var(--color-light-gray);
}