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

/* ==========================================================================
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   01. Design tokens (colors + icons)
   02. Base
   03. Site header
   04. Content utilities (lists, FAQ, legal pages)
   05. Buttons
   06. Forms
   07. Site navigation (custom mega menu)
   08. Announcement bar (marquee, mobile only)
   09. Service category: menu variant
   10. Service category: tabs variant
   11. Service category: card loops
   12. Blog
   13. CTA cards & carousels
   14. Scroll animations
   15. Responsive (all media queries)

   Breakpoints follow Elementor: mobile <= 767px, tablet <= 1024px,
   desktop >= 1025px. All media queries are grouped in section 15.
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Neutrals */
  --color-soft-cream:      #F7EBE1;
  --color-pure-white:      #FEFEFE;
  --color-light-gray:      #F0F0F0;
  --color-gray:            #B1B1B1;
  --color-dark-gray:       #555555;
  --color-charcoal-black:  #232323;

  /* Blues */
  --color-periwinkle-tint: #C3D2E7;
  --color-dusty-periwinkle:#8CA3CC;
  --color-periwinkle-deep: #5F7DA8;

  /* Greens & browns */
  --color-frond-light:     #A9C2A2;
  --color-palmetto-sage:   #7C9463;
  --color-helix-bronze:    #926032;
  --color-wordmark-brown:  #5C4530;

  /* Icons (inline SVG, reused across components)
     - "btn" arrows are drawn as background images (fixed stroke color).
     - The rest are used as masks, so they take any background-color. */
  --icon-arrow-btn-white: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.125 10.3245L13 5.44946L8.125 0.574463M13 5.44946L0 5.44946' stroke='white' stroke-width='1.625'/%3E%3C/svg%3E");
  --icon-arrow-btn-sage:  url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.125 10.3245L13 5.44946L8.125 0.574463M13 5.44946L0 5.44946' stroke='%237C9463' stroke-width='1.625'/%3E%3C/svg%3E");
  --icon-caret-down:      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");
  --icon-arrow-right:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.333 8h9.334M8 3.333 12.667 8 8 12.667' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-arrow-right-lg:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12h16m0 0-6-6m6 6-6 6' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-arrow-up-right:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.834 5.833h8.333v8.334M5.834 14.167l8.333-8.334' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ==========================================================================
   02. BASE
   ========================================================================== */

body p:last-child      { margin-bottom: 0; }
body :is(ul, ol)       { margin-bottom: 20px; }
body p :is(b, strong)  { font-weight: 500; }
.uppercase {text-transform: uppercase;}


/* ==========================================================================
   03. SITE HEADER
   Background per page type (body classes are added to the page in WP).
   ========================================================================== */

body:is(.alt-hdr, .service-page, .contact) .site-header {
  background-color: var(--color-light-gray) !important;
}

body.home .site-header {
  background-color: #FFF !important;
  border-bottom: 1px solid rgba(35, 35, 35, 0.10);
}

/* Sticky (scrolled) state — all pages */
body .site-header.elementor-sticky--effects {
  background-color: #FFF !important;
}


/* ==========================================================================
   04. CONTENT UTILITIES
   ========================================================================== */

/* .default-list - custom bullet list for Text Editor widgets */
.default-list :is(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.default-list :is(ul, ol) > li {
  position: relative;
  padding-left: 1.25em;
}

.default-list :is(ul, ol) > li:not(:last-child) { margin-bottom: 2px; }

.default-list ul > li::before {
  content: "\2022";
  position: absolute;
  top: -1px;
  left: 0.25em;
  color: currentColor;
}

.default-list li :is(b, strong, a) { font-weight: 500; }

/* .faq-lists - Icon Box widgets used as FAQ items */
.faq-lists .elementor-icon-box-description :is(b, strong, a) { font-weight: 500; }

/* .btn-icon - removes inline gap under Elementor icons */
.btn-icon .elementor-icon { display: block; }

/* .legacy-text-block - Sitemap / Privacy / Terms / HIPAA pages */
.legacy-text-block :is(h1, h2)             { margin: 60px 0 20px; }
.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, a) {
  font-weight: 500;
  color: var(--color-charcoal-black);
}


/* ==========================================================================
   05. BUTTONS
   Usage (Elementor -> Advanced -> CSS Classes):
     btn-primary  -> filled button, white arrow slides in on hover
     btn-outline  -> transparent sage button, sage arrow slides in on hover
   Form submit buttons inside .form-default get the same arrow.
   ========================================================================== */

/* Shared: arrow hidden at 0 width, slides in on hover/focus */
:is(.btn-primary, .btn-outline, .form-default) .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
}

:is(.btn-primary, .btn-outline, .form-default) .elementor-button-content-wrapper::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 11px;
  margin-left: 0;
  opacity: 0;
  background: var(--icon-arrow-btn-white) no-repeat center / 15px 11px;
  transition: width 0.25s ease, margin-left 0.25s ease, opacity 0.25s ease;
  pointer-events: none;
}

:is(.btn-primary, .btn-outline, .form-default) .elementor-button:is(:hover, :focus-visible) .elementor-button-content-wrapper::after {
  width: 15px;
  margin-left: 8px;
  opacity: 1;
}

/* Outline variant (overrides Elementor's own button + hover colors) */
.btn-outline .elementor-button,
.btn-outline .elementor-button:is(:hover, :focus-visible) {
  background-color: transparent !important;
  border: 1px solid var(--color-palmetto-sage) !important;
  color: var(--color-palmetto-sage) !important;
}

.btn-outline .elementor-button-content-wrapper::after {
  background-image: var(--icon-arrow-btn-sage);
}


/* ==========================================================================
   06. FORMS
   Usage: add "form-default" to the Elementor Form widget.
   ========================================================================== */

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

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

/* Custom select caret (replaces Elementor's SVG) */
.form-default .select-caret-down-wrapper svg { display: none; }

.form-default .select-caret-down-wrapper {
  width: 12px;
  height: 7px;
  background: var(--icon-caret-down) no-repeat center;
}

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

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

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

.form-default :is(.elementor-field-group-marketing_acceptance, .elementor-field-group-nonmarketing_acceptance) .elementor-field-option label {
  color: #818181 !important;
}

.form-default :is(.elementor-field-group-marketing_acceptance, .elementor-field-group-nonmarketing_acceptance) input[type="checkbox"] {
  margin: 0.3em 0 0;
  accent-color: #383838;
}

.form-default .elementor-field-group-marketing_acceptance .elementor-field-option {
  margin-top: 40px;
}

/* Legal links row under the form (e.g. Privacy Policy | Terms) */
.form-default .form-legacy-menu {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 20px;
  margin: 40px 0;
  padding: 0;
  list-style: none;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  line-height: 20px;
}

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

.form-default .form-legacy-menu a {
  font-size: 0.876rem;
  color: #818181;
  text-decoration: none;
}

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

/* Vertical divider centered in the 20px gap */
.form-default .form-legacy-menu li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  width: 1px;
  height: 12px;
  background-color: #818181;
  transform: translateY(-50%);
}


/* ==========================================================================
   07. SITE NAVIGATION (custom markup, 3 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: 20px;
}

.site-nav__item { position: relative; }

.site-nav__link,
.site-nav__sublink {
  display: flex;
  align-items: center;
  padding: 0;
  font-family: "Season Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
  color: var(--color-charcoal-black);
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.site-nav__sublink {
  align-items: first baseline;
  padding: 8px 24px 8px 16px;
}

/* Hover: dim siblings, highlight the hovered link */
.site-nav__list:hover > .site-nav__item:not(:hover) > .site-nav__link { opacity: 0.3; }
.site-nav__item:hover > .site-nav__link { color: var(--color-palmetto-sage); }

/* 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(:hover, :focus-within) > .site-nav__panel { display: block; }

/* Level 2 column - grows with its longest item */
.site-nav__sublist--level-2 {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: max-content;
  min-width: 150px;
  min-height: 0;
  padding: 20px 0;
  background: var(--color-pure-white);
  border: 1px solid rgba(15, 15, 15, 0.12);
  border-radius: 13px;
  transition: min-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius 0.2s ease,
              border-color 0.15s ease;
}

/* Border hidden while the column resizes (set by JS) */
.site-nav__sublist--level-2.is-resizing { border-color: transparent; }

/* Square the right corners once a level-3 flyout is open (after height settles) */
.site-nav__sublist--level-2:has(.site-nav__subitem.has-children:hover) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transition: min-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius 0.15s ease 0.25s,
              border-color 0.15s ease;
}

.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. */
.site-nav__sublist--level-3 {
  position: absolute;
  top: -1px;
  left: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: max-content;
  padding: 24px 24px 24px 49px;
  background: var(--color-pure-white);
  border: 1px solid transparent;
  border-left: none;
  border-radius: 0 13px 13px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease,
              visibility 0s linear 0.2s,
              border-color 0s;
}

.site-nav__subitem.has-children:is(:hover, :focus-within) > .site-nav__sublist--level-3 {
  border-color: rgba(15, 15, 15, 0.12);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease,
              visibility 0s,
              border-color 0.15s ease;
}

/* While resizing, neither column shows a border */
.site-nav__sublist--level-2.is-resizing .site-nav__subitem.has-children:hover > .site-nav__sublist--level-3 {
  border-color: transparent;
  transition: opacity 0.2s ease,
              visibility 0s,
              border-color 0s;
}

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

/* 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-palmetto-sage);
}

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

/* Popup menu (tablet/mobile: Elementor Nav Menu widget, class "popupmenu").
   Parents of the current page use WordPress's own ancestor class. !important
   beats the color Elementor sets on the widget's dropdown links. */
.popupmenu .elementor-nav-menu li.current-menu-ancestor > a {
  color: var(--color-palmetto-sage) !important;
}


/* ==========================================================================
   08. ANNOUNCEMENT BAR (marquee) - mobile only (<= 767px)
   On mobile, 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). Mobile-only bar layout rules
   live in section 15.
   ========================================================================== */

.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 */
.announcement-bar:hover .announcement-track { animation-play-state: paused; }

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


/* ==========================================================================
   09. SERVICE CATEGORY - MENU VARIANT (WordPress Menu widget)
   Usage:
     - Menu widget class: service-category-menu
     - Menu item classes (Appearance -> Menus -> CSS Classes): cat1 | cat2 | cat3
   ========================================================================== */

.service-category-menu li.cat1 { --cat-color: var(--color-palmetto-sage); }
.service-category-menu li.cat2 { --cat-color: var(--color-helix-bronze); }
.service-category-menu li.cat3 { --cat-color: var(--color-periwinkle-deep); }

.service-category-menu ul li { width: 100%; }

.service-category-menu ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 17px 27px !important;
  color: var(--cat-color);
  border: 1px solid var(--cat-color);
  border-radius: 6px;
  transition: background-color 0.2s, color 0.2s;
}

/* Arrow (resets Elementor's pointer pseudo-element) */
.service-category-menu ul li a::after {
  content: "";
  position: static;
  inset: auto;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: var(--cat-color);
  opacity: 1 !important;
  transform: none;
  -webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
          mask: var(--icon-arrow-right) center / contain no-repeat;
}

/* Hover / focus / current page: filled, arrow hidden */
.service-category-menu ul li:is(:hover, .current-menu-item) > a,
.service-category-menu ul li > a:focus-visible {
  background: var(--cat-color);
  color: var(--color-pure-white);
}

.service-category-menu ul li:is(:hover, .current-menu-item) > a::after,
.service-category-menu ul li > a:focus-visible::after {
  display: none !important;
}

/* Current page isn't clickable */
.service-category-menu ul li.current-menu-item > a { pointer-events: none; }


/* ==========================================================================
   10. SERVICE CATEGORY - TABS VARIANT (Elementor Tabs widget)
   Usage (Tabs widget -> Advanced -> CSS Classes):
     service-category-tabs            -> tab 1 sage, tab 2 bronze, tab 3 blue
     service-category-tabs tabs-sage  -> all tabs sage (concerns)
     + gallery                        -> arrow stays visible (white) on hover/active
   Colors follow tab POSITION, not label. Panels inherit the same color,
   so cards inside each panel hover in their tab's color.
   ========================================================================== */

.service-category-tabs { --cat-color: var(--color-palmetto-sage); }

.service-category-tabs :is(.e-n-tab-title, .e-n-tabs-content > *)[data-tab-index="1"] { --cat-color: var(--color-palmetto-sage); }
.service-category-tabs :is(.e-n-tab-title, .e-n-tabs-content > *)[data-tab-index="2"] { --cat-color: var(--color-helix-bronze); }
.service-category-tabs :is(.e-n-tab-title, .e-n-tabs-content > *)[data-tab-index="3"] { --cat-color: var(--color-periwinkle-deep); }

/* Single-color variant (more specific, so it beats the position colors) */
.service-category-tabs.tabs-sage :is(.e-n-tab-title, .e-n-tabs-content > [data-tab-index]) {
  --cat-color: var(--color-palmetto-sage);
}

/* Tab button */
.service-category-tabs .e-n-tabs-heading > .e-n-tab-title {
  display: flex;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px;
  width: 100%;
  padding: 17px 27px !important;
  background: transparent !important;
  color: var(--cat-color) !important;
  border: 1px solid var(--cat-color) !important;
  border-radius: 6px !important;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

/* Title text: left-aligned, fills space beside the arrow */
.service-category-tabs .e-n-tab-title .e-n-tab-title-text {
  flex: 1 1 auto;
  justify-content: flex-start !important;
  color: inherit !important;
  text-align: left !important;
}

/* Arrow */
.service-category-tabs .e-n-tabs-heading > .e-n-tab-title::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: var(--cat-color);
  -webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
          mask: var(--icon-arrow-right) center / contain no-repeat;
}

/* Hover / focus / active: filled, arrow hidden */
.service-category-tabs .e-n-tabs-heading > .e-n-tab-title:is(:hover, :focus-visible, [aria-selected="true"]) {
  background: var(--cat-color) !important;
  color: var(--color-pure-white) !important;
}

.service-category-tabs .e-n-tabs-heading > .e-n-tab-title:is(:hover, :focus-visible, [aria-selected="true"])::after {
  display: none;
}

/* Gallery variant: keep the arrow on hover / focus / active, turned white */
.service-category-tabs.gallery .e-n-tabs-heading > .e-n-tab-title:is(:hover, :focus-visible, [aria-selected="true"])::after {
  display: block;
  background-color: var(--color-pure-white);
}

.service-category-tabs .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"] { cursor: default; }

/* Keyboard focus ring */
.service-category-tabs .e-n-tabs-heading > .e-n-tab-title:focus-visible {
  outline: 2px solid var(--cat-color);
  outline-offset: 2px;
}


/* ==========================================================================
   11. SERVICE CATEGORY - CARD LOOPS (Loop Grid, template "category-card")
   Usage:
     Loop Grid class: service-category-loop   (+ "concerns" for the concerns variant)
     Card container class: category-card; heading: title; text: description
   Hover color comes from --cat-color, set by either:
     - a parent container class: medical-care | wellness | skin-and-hair
     - the tab panel it sits in (section 10)
   ========================================================================== */

.medical-care  { --cat-color: var(--color-palmetto-sage); }
.wellness      { --cat-color: var(--color-helix-bronze); }
.skin-and-hair { --cat-color: var(--color-periwinkle-deep); }

/* Card */
.service-category-loop .category-card {
  position: relative;
  padding: 20px;
  background: var(--color-pure-white);
  border: 1px solid #E5E5E5;
  border-radius: 16px;
  transition: background-color 0.2s, border-color 0.2s;
}

.service-category-loop .category-card :is(.elementor-heading-title, .description) { transition: color 0.2s; }
.service-category-loop .category-card .description { color: #737373; }

/* Title row with arrow on the right */
.service-category-loop .category-card .title .elementor-heading-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.service-category-loop .category-card .title .elementor-heading-title::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: #D4D4D4;
  transition: background-color 0.2s;
  -webkit-mask: var(--icon-arrow-up-right) center / contain no-repeat;
          mask: var(--icon-arrow-up-right) center / contain no-repeat;
}

/* Hover: fill with category color, text + arrow turn white */
:is(.medical-care, .wellness, .skin-and-hair, .service-category-tabs) .service-category-loop .category-card:hover {
  background: var(--cat-color);
  border-color: var(--cat-color);
}

:is(.medical-care, .wellness, .skin-and-hair, .service-category-tabs) .service-category-loop .category-card:hover :is(.title .elementor-heading-title, .description) {
  color: var(--color-pure-white);
}

:is(.medical-care, .wellness, .skin-and-hair, .service-category-tabs) .service-category-loop .category-card:hover .title .elementor-heading-title::after {
  background-color: var(--color-pure-white);
}

/* Vertically center card content so 1-line and 2-line cards line up
   (concerns variant + any loop inside the tabs variant) */
:is(.service-category-loop.concerns, .service-category-tabs .service-category-loop) .category-card {
  --justify-content: center;   /* Elementor container variable */
  justify-content: center;
  height: 100%;
}

:is(.service-category-loop.concerns, .service-category-tabs .service-category-loop) .category-card > .e-con-inner {
  flex-grow: 1;
  justify-content: center;
}

/* Concerns variant: larger padding + straight arrow; hovers sage by default */
.service-category-loop.concerns .category-card { padding: 24px; }

.service-category-loop.concerns .category-card .title .elementor-heading-title::after {
  width: 24px;
  height: 24px;
  -webkit-mask-image: var(--icon-arrow-right-lg);
          mask-image: var(--icon-arrow-right-lg);
}

.service-category-loop.concerns .category-card:hover {
  background: var(--cat-color, var(--color-palmetto-sage));
  border-color: var(--cat-color, var(--color-palmetto-sage));
}

.service-category-loop.concerns .category-card:hover .title .elementor-heading-title { color: var(--color-pure-white); }
.service-category-loop.concerns .category-card:hover .title .elementor-heading-title::after { background-color: var(--color-pure-white); }


/* ==========================================================================
   12. BLOG
   ========================================================================== */

/* Taxonomy filter: single row, horizontally scrollable, no scrollbar */
.blog-filter { flex: 1 1 auto; min-width: 0; }

.blog-filter .e-filter {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scrollbar-width: none;
}

.blog-filter .e-filter::-webkit-scrollbar { display: none; }
.blog-filter .e-filter-item { white-space: nowrap; }

/* Post count next to filter labels */
.article-count {
  margin-left: 8px;
  font-family: "Season VF-TRIAL", sans-serif; /* TODO: swap for licensed font before launch */
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
  color: #000;
  opacity: 0.4;
}


/* ==========================================================================
   13. CTA CARDS & CAROUSELS
   ========================================================================== */

/* .cta-card-01 - frosted blur band along the bottom of the image */
.cta-card-01 .elementor-cta__bg-wrapper::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 100px;
  background: linear-gradient(to bottom, rgba(246, 239, 223, 0) 38%, rgba(246, 239, 223, 0.1) 100%);
  -webkit-backdrop-filter: blur(4.23px);
          backdrop-filter: blur(4.23px);
  /* soft top edge instead of a hard line */
  -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 58%);
          mask-image: linear-gradient(to bottom, transparent 20%, #000 58%);
  pointer-events: none;
}

/* Keep title + description above the blur */
.cta-card-01 .elementor-cta__content {
  position: relative;
  z-index: 2;
}

/* .carousel-style-01 - mirrored prev arrow, hide arrows at the ends */
.carousel-style-01 .elementor-swiper-button-prev svg { transform: rotate(180deg); }
.carousel-style-01 .elementor-swiper-button.swiper-button-disabled { display: none; }


/* ==========================================================================
   14. SCROLL ANIMATIONS
   Elements with .animate are only hidden once the script adds .js-animate
   to the page, so content stays visible if JS fails.
   ========================================================================== */

.js-animate .animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-animate .animate.is-visible {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   15. RESPONSIVE
   All breakpoint overrides in one place. Keep this section LAST: it relies
   on coming after the base rules (same specificity, later rule wins).
   ========================================================================== */

/* Desktop (>= 1025px) ------------------------------------------------------ */
@media (min-width: 1025px) {

  /* 10. Service category tabs: tabs left (25%), content right (66.66%) */
  .service-category-tabs .e-n-tabs {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: space-between;
  }

  .service-category-tabs .e-n-tabs-heading {
    display: flex !important;
    flex: 0 0 25%;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    max-width: 25%;
  }

  .service-category-tabs .e-n-tabs-content {
    flex: 0 0 66.66%;
    max-width: 66.66%;
  }
}

/* Tablet & below (<= 1024px) ----------------------------------------------- */
@media (max-width: 1024px) {

  /* 06. Forms */
  .form-default .elementor-field-group-marketing_acceptance .elementor-field-option { margin-top: 20px; }
  .form-default .form-legacy-menu { margin: 20px 0 40px; }

  /* 09. Service category menu: wrapping pills */
  .service-category-menu .elementor-nav-menu--main .elementor-nav-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
  }

  .service-category-menu .elementor-nav-menu--main .elementor-nav-menu > li {
    flex: 0 0 auto;
    width: auto;
    margin: 0 !important;
  }

  .service-category-menu ul li a {
    display: inline-flex;
    width: auto;
  }

  /* 10. Service category tabs: tabs on top as wrapping, left-aligned pills */
  .service-category-tabs .e-n-tabs { flex-direction: column !important; }

  .service-category-tabs .e-n-tabs-heading {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .service-category-tabs .e-n-tabs-heading > .e-n-tab-title { width: auto; }
}

/* Mobile (<= 767px) -------------------------------------------------------- */
@media (max-width: 767px) {

  /* 08. Announcement bar: marquee mode (.is-marquee is added by JS) */
  .announcement-bar.is-marquee .e-con-inner {
    justify-content: flex-start;
    overflow: hidden;
  }
}

/* Reduced motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  /* 08. Announcement bar */
  .announcement-track { animation: none; }
}