/*
=================================================================
ATLAS BUDGETER - CHILD THEME STYLESHEET
=================================================================
Theme Name: Atlas Budgeter Child
Template: hello-elementor
Description: Custom child theme for the Atlas Budgeter project
Version: 09.02.25
Author: Digit

IMPORTANT: Component-specific CSS is NOT in this file!
The following components are self-contained with embedded CSS:
- home-animated-text.html (homepage animated text) - edit homepage
- budgeter-feature-list.html (interactive feature list) - edit budgeter 
- pricing-table-sticky-header.html (table sticky header) - edit pricing

This file contains ONLY shared styles used across the site.

TO EDIT THIS STYLESHEET:
1. In WordPress admin, go to Appearance > Theme File Editor
2. Select "Atlas Budgeter Child" theme
3. Click on "Stylesheet (style.css)"
4. Copy this entire file's code and paste it into the editor, replacing all existing code
5. Click "Update File" to save your changes
6. Clear Elementor cache (Elementor > Tools > Regenerate Files & Data > "Clear Files & Data")
7. Clear your site's cache (WPEngine cache + any caching plugins)
8. Clear your browser cache AND do a hard refresh (Cmd+Shift+R on Mac)

=================================================================
TABLE OF CONTENTS
=================================================================
1.  CSS Variables & Colors .........................Line 057
2.  Global Reset & Accessibility ...................Line 103
3.  Typography & Utility Classes ...................Line 142
4.  Header Components ..............................Line 209
5.  Navigation (Desktop & Mobile) ..................Line 263
6.  Elementor Widget Overrides .....................Line 304
7.  Plugin Overrides - TablePress ..................Line 329
8.  Tooltip System - Table Tooltips ................Line 444
9.  Third-Party Plugin Overrides ...................Line 530
10. Responsive Breakpoints .........................Line 546
11. Utility Classes & Scoped Overrides .............Line 626
*/

/* === Foundation & a11y ============================================ */
html { box-sizing: border-box; color-scheme: light; }
*, *::before, *::after { box-sizing: inherit; }

:where(a, button, [role="button"], .elementor-button):focus-visible {
  outline: 2px solid var(--atlas-blue);
  outline-offset: 2px;
}



/* =================================================================
   1. CSS VARIABLES & COLORS
================================================================= */
:root {
  /* Shadows */
  --shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
  
  /* Background Colors */
  --color-bg: #ffffff;                    /* Primary white background */
  --color-bg-alt: #d3d3d3;               /* Light gray alternate background */
  --color-accent: #2563eb;               /* Main accent color (blue) */
  
  /* Brand Colors */
  --atlas-blue: #2A76B9;                 /* Atlas brand blue */
  --atlas-red: #e74c3c;                  /* Atlas brand red */
  --atlas-text: #1a1a1a;                 /* Main text color */
  --atlas-gray: #3e444c;                 /* Secondary text color */
  --atlas-light-gray: #ECECEC;           /* Light backgrounds */
  --atlas-medium-gray: #949295;          /* Medium gray */
  
  /* Spacing & Layout */
  --spacing-xs: 0.25rem;                 /* 4px */
  --spacing-sm: 0.5rem;                  /* 8px */
  --spacing-md: 1rem;                    /* 16px */
  --spacing-lg: 1.5rem;                  /* 24px */
  --spacing-xl: 2rem;                    /* 32px */
  
  /* Transitions */
  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.3s ease-out;
  --transition-slow: 0.5s ease-out;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  /* Z-index Management */
  --z-header: 1000;
  --z-sticky: 1100;
  --z-dropdown: 1500;
  --z-modal: 2000;
  --z-tooltip: 3000;
}

/* =================================================================
   2. GLOBAL RESET & ACCESSIBILITY
================================================================= */
html, body {
  overflow-x: hidden;                     /* Prevent horizontal scroll */
  scroll-behavior: smooth;                /* Enables smooth scroll animations */
  -webkit-overflow-scrolling: touch;     /* Improves iOS scroll performance */
}

/* Font Loading Layout Shift Prevention - Targeted and Safe */
.atlas-animated-text-container {
  contain: layout;                        /* Prevent layout shifts during font loading */
}

.atlas-animated-heading {
  text-rendering: optimizeLegibility;     /* Ensure consistent rendering during font load */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  image-rendering: auto;
  max-width: 100%;                        /* Ensures responsive images */
  height: auto;
}

/* Improved text flow site-wide - no hyphenation */
body, p, .elementor-widget-text-editor {
  text-wrap: pretty;
}

/* Respect user accessibility preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* =================================================================
   3. TYPOGRAPHY & UTILITY CLASSES
================================================================= */

/* Heading Spacing */
h1, h2, h3, h4, h5, h6 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

p {
  margin-bottom: 1em;
}

/* Elementor Text Editor Overrides */
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 1.5em;
}

.elementor-widget-text-editor ul li,
.elementor-widget-text-editor ol li {
  margin-bottom: 0.5em;
}

/* Utility Classes - Margin Control */
.nomargin-top h1, .nomargin-top h2, .nomargin-top h3, 
.nomargin-top h4, .nomargin-top h5, .nomargin-top h6, 
.nomargin-top p {
  margin-top: 0 !important;
}

.nomargin-bottom h1, .nomargin-bottom h2, .nomargin-bottom h3, 
.nomargin-bottom h4, .nomargin-bottom h5, .nomargin-bottom h6, 
.nomargin-bottom p {
  margin-bottom: 0 !important;
}

/* Buttons & Forms */
.elementor-button {
  width: auto;                            /* Prevent full-width button unless set manually */
}

/* Download Buttons Hover Border Override */
.atlas-download-buttons .elementor-button:hover,
.atlas-download-buttons .elementor-button-wrapper .elementor-button:hover {
  border-color: var(--atlas-blue) !important;
}

.elementor-form .elementor-field-group {
  margin-bottom: 15px;
  display: inline-block;
  vertical-align: middle;
}

/* DEPRECATED (Astra-specific): /* DEPRECATED (Hello theme): .menu-toggle, button, .ast-button, .ast-custom-button {
  padding: 10px 10px !important;         /* Uniform button padding */
} */ */

/* Pricing Page Components */
.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* =================================================================
   4. HEADER COMPONENTS
================================================================= */

.header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-width: 800px;
  margin: 0 auto;
  min-height: 360px;
  text-align: left;
  padding-top: 0px;
}

.header-wrapper h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1.3;
  margin: 0;
  font-weight: 400;
  text-align: left;
}

.header-wrapper .fade-text {
  color: var(--atlas-red);
  font-weight: 600;
  transition: opacity var(--transition-slow);
}

.header-wrapper .fade-out {
  opacity: 0;
}

.header-wrapper .start-hidden {
  opacity: 0;
}



/* Sticky Header */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-subtle);
}

.elementor-sticky--active {
  z-index: 999 !important;
}


/* =================================================================
   5. NAVIGATION (DESKTOP & MOBILE)
================================================================= */

/* Desktop Navigation */
@media (min-width: 1025px) {
  .atlas-nav .e-n-menu-title-text,
  .download-nav-button .elementor-button-text {
    font-size: clamp(16px, 1.5vw, 20px) !important;
    white-space: nowrap;
  }

  .atlas-nav .e-n-menu-heading {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .atlas-nav .e-n-menu-item {
    flex-shrink: 0;
  }
}

/* Mobile/Tablet Navigation */
@media (max-width: 1024px) {
  

  #mobile-only, .mobile-only {
    display: block !important;
    padding-bottom: 30px !important;
    margin-bottom: 10px !important;
    box-shadow: var(--shadow-medium);
    z-index: 99;
    background: var(--color-bg);
  }
}

#mobile-only, .mobile-only {
  display: none;
}

/* =================================================================
   6. ELEMENTOR WIDGET OVERRIDES
================================================================= */

/* Social Icons */
.elementor-social-icon {
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* Testimonials */
.elementor-testimonial--align-left .elementor-testimonial {
  margin-left: 55px;
  margin-right: 55px;
}

.elementor-testimonial__image img {
  width: 50px !important;
  height: 45px;
  border-radius: 0px;
}

/* =================================================================
   7. PLUGIN OVERRIDES - TABLEPRESS
================================================================= */


/* Remove alternating row colors - make all cells white */
.tablepress tbody td,
.tablepress tbody tr:nth-child(even) td,
.tablepress tbody tr:nth-child(odd) td {
  background-color: #ffffff !important;
}

/* Text Colors */
.tablepress td, .tablepress th {
  color: var(--atlas-gray);
}

.tablepress td:first-child {
  color: var(--atlas-blue);
}

.tablepress td:first-child h5,
.tablepress td:first-child h6 {
  color: var(--atlas-gray);
}

.tablepress .checkmark {
  color: var(--atlas-blue);
}

.tablepress .limited {
  color: var(--atlas-red);
}

/* Scrollable Table Container */
.scroll-table {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
}

/* Ensure table cells can show tooltips above */
.scroll-table .tablepress td {
  position: relative;
  z-index: auto;
}

.scroll-table table {
  width: 100%;
  table-layout: auto;
}

/* Table Spacing */
#tablepress-2 tr td {
  padding-top: 20px;
  padding-bottom: 20px;
}

.tablepress-id-2 td h5,
.tablepress-id-2 td h6 {
  margin: 0;
  padding: 8px 0;
  line-height: 1.2;
  vertical-align: middle;
}

/* Highlighted Rows - Universal browser support approach */
/* Method 1: Add class="highlight-row" to any <tr> you want highlighted */
.tablepress tbody tr.highlight-row td {
  background-color: var(--atlas-light-gray) !important;
}

/* Method 2: Any cell containing h5 gets highlighted (works in most browsers) */
.tablepress tbody td h5 {
  background-color: var(--atlas-light-gray) !important;
  padding: 8px 0;
  margin: 0;
  display: block;
  width: 100%;
}

/* Exception: h5 with class "tier" stays clear/white */
.tablepress tbody td h5.tier {
  background-color: transparent !important;
}

/* Method 3: Alternative - highlight entire row if first cell has h5 */
.tablepress tbody tr td:first-child h5 {
  background-color: transparent;
}

.tablepress tbody tr:has(td:first-child h5) td {
  background-color: var(--atlas-light-gray) !important;
}

/* Tooltip Support in Tables */
.tablepress td, .tablepress th {
  overflow: visible !important;
  position: relative;
  z-index: auto;
}

.tablepress .custom-tooltip {
  display: inline-block;
  position: relative;
  z-index: 999999;
}

.tablepress .custom-tooltip::after {
  z-index: 999999 !important;
}

/* =================================================================
   8. TOOLTIP SYSTEM - TABLE TOOLTIPS
================================================================= */

/* Table Tooltip Trigger */
.custom-tooltip {
  position: relative;
  cursor: pointer;
  font-weight: bold;
  color: var(--color-accent);
  padding-left: 6px;
  font-size: 18px;
  z-index: 10;
}


/* Table Tooltip Box */
.custom-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 280px;
  background-color: var(--atlas-blue);
  color: #fff;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-size: 16px;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
  z-index: var(--z-tooltip);
  box-shadow: var(--shadow-medium);
}

.custom-tooltip:hover::after {
  opacity: 1;
}


/* =================================================================
   8. HOMEPAGE HERO IMAGE COMPONENT
================================================================= */

/* 
Hero Image Responsive Positioning System
- Coordinates with animated header (700px desktop, 400px tablet, 300px mobile)
- Uses absolute positioning on desktop/tablet, relative on mobile
- Progressively scales and repositions across all screen sizes
- Breakpoints optimized for smooth transitions without jarring jumps
*/

/* Hero Image - Clamp-based Responsive System */

/* Desktop & Tablet - Coordinated hero image within complete header */
@media (min-width: 768px) {
  .atlas-hero-image {
    position: absolute;
    top: 40px;
    z-index: 1;
    height: auto;
    /* Coordinated width that works with text positioning */
    width: clamp(650px, 60vw + 200px, 1600px);
    /* Coordinated positioning for proper text/image spacing */
    right: clamp(-600px, -30vw - 100px, -300px);
  }
}

/* Mobile - Standard centered and full size (matches Elementor) */
@media (max-width: 767px) {
  .atlas-hero-image {
    position: relative !important;
    width: 100% !important;
    right: auto !important;
    top: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* =================================================================
   9. THIRD-PARTY PLUGIN OVERRIDES
================================================================= */

/* Cookie Banner Close Button */
.cky-consent-bar .cky-banner-btn-close {
  padding: var(--spacing-sm) !important;
  min-width: 40px !important;
  min-height: 40px !important;
}

.cky-consent-bar .cky-banner-btn-close img {
  width: 14px !important;
  height: 14px !important;
}

/* =================================================================
   10. RESPONSIVE BREAKPOINTS
================================================================= */

/* >=2000px: Ultra-wide screens */
@media (min-width: 2000px) {
  .atlas-hero-image {
    right: clamp(-600px, -25vw - 300px, -400px) !important;
  }
}

/* <=1024px: Tablet & Mobile navigation */
@media (max-width: 1024px) {
  .atlas-nav .e-n-menu-heading > li:first-child .e-n-menu-title {
    padding-top: 30px !important;
    margin-top: 10px !important;
  }
}

/* 769px-1024px: Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .header-wrapper h1 { 
    font-size: clamp(1.4rem, 4.2vw, 2.45rem); 
  }
  
  .custom-tooltip::after {
    left: 0;
    transform: translateX(0);
    min-width: unset;
    max-width: 90vw;
    width: auto;
    font-size: 15px;
    padding: 14px 18px;
    z-index: var(--z-tooltip) !important;
  }
}

/* <=768px: Mobile & Small tablet */
@media (max-width: 768px) {
  .header-wrapper { 
    min-height: 200px; 
    padding-top: 40px; 
  }
  
  .elementor-form .elementor-field-group {
    display: block;
    margin-bottom: 15px;
  }
  
  .custom-tooltip::after {
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    max-width: 80vw;
    font-size: 15px;
    padding: 14px 20px;
    z-index: var(--z-tooltip) !important;
  }
  
  @supports (left: clamp(0px, 50%, calc(100vw - 220px))) {
    .custom-tooltip::after {
      left: clamp(10px, 50%, calc(100vw - 220px));
      transform: translateX(-50%);
    }
  }
}

/* <=480px: Small mobile */
@media (max-width: 480px) {
  .custom-tooltip::after {
    left: 0;
    transform: translateX(0);
    min-width: unset;
    max-width: 90vw;
    font-size: 14px;
    padding: 12px 18px;
    z-index: var(--z-tooltip) !important;
  }
}

/* =================================================================
   11. UTILITY CLASSES & SCOPED OVERRIDES
================================================================= */

/* Elementor button padding (scoped) */
.elementor .elementor-button { 
  padding: 10px 10px; 
}




/* =========================================================
   Elementor Tabs • Mid-Desktop NO-CROP / Large-Desktop COVER
   Classes per tab:
     - tab-pair  (outer two-column wrapper)
     - tab-media (media column)
     - tab-copy  (text column)
   Elementor: tab-pair → Content Width: Full Width, Gap: 0/blank
========================================================= */

/* Safety + remove inner padding that causes vertical drift */
.elementor-widget-tabs { width:100%; }
.elementor-widget-tabs .elementor-tab-content { padding:0 !important; }

/* --------- Base (mobile-first): STACKED, NO-CROP --------- */
.tab-pair{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:start;
  max-width:1440px;
  margin-inline:auto;
  width:100%;
  padding:0 !important; margin:0 !important;
}

/* Kill wrapper offsets that move media down */
.tab-media figure,
.tab-media .elementor-widget-container,
.elementor-widget-image,
.elementor-widget-image .elementor-widget-container,
.elementor-widget-video,
.elementor-widget-video .elementor-widget-container,
.elementor-video,
.elementor-video-wrapper{
  margin:0 !important; padding:0 !important; line-height:0 !important;
  background:transparent !important; border:0 !important;
  overflow:visible !important;          /* Allow shadows to show */
  border-radius:12px !important;        /* Match rounded corners */
}
.tab-media a{ 
  display:block !important; 
  margin:0 !important; padding:0 !important; line-height:0 !important;
  border-radius:12px !important;        /* Match media rounded corners */
}

/* Neutralize Elementor video ratio box by default; we control size below */
.elementor-video-wrapper{ 
  position:static !important; 
  height:auto !important; 
  aspect-ratio:auto !important;
  overflow:visible !important;          /* Ensure shadow shows */
}
.elementor-video-wrapper:before,
.elementor-video:before{ content:none !important; }

/* Media (mobile/tablet): NO-CROP, natural height */
.tab-media{
  position:relative;
  height:auto;
  overflow:visible;
  background:transparent;
  padding: 0 20px 20px 0;             /* Right/bottom for shadow, no top/left */
}
.tab-media img,
.tab-media picture>img,
.tab-media figure>img{
  display:block !important;
  width:100% !important;
  height:auto !important;         /* preserve ratio */
  object-fit:unset !important;
  object-position:unset !important;
  margin:0 !important; padding:0 !important; border:0 !important;
}
.tab-media video,
.tab-media iframe,
.elementor-video-wrapper iframe{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9 !important;   /* stable height for video in stacked layout */
  object-fit:contain !important;  /* NO-CROP on small/tablet */
  object-position:50% 0 !important;
  border:0 !important;
}

/* Text column */
.tab-copy{
  max-width:65ch;
  margin-top:0 !important; 
  padding: 0 0 20px 0;                /* Only bottom padding, no top */
}
.tab-copy > *:first-child{ margin-top:0 !important; }
.tab-copy h1,.tab-copy h2,.tab-copy h3,
.tab-copy h4,.tab-copy h5,.tab-copy h6{ margin-top:0 !important; }

/* --------- MID-DESKTOP (1200–1599px): SIDE-BY-SIDE, NO-CROP --------- */
@media (min-width:1200px) and (max-width:1599.98px){
  .tab-pair{
    grid-template-columns:minmax(68%,1fr) minmax(360px,32%); /* media ~68%, text ~32% */
    gap:clamp(16px,2.5vw,40px);
  }
  .tab-media{
    height:auto;                /* let content height drive; you don't care about length */
    overflow:visible;
  }
  /* Ensure NO-CROP in mid-desktop */
  .tab-media img,
  .tab-media picture>img,
  .tab-media figure>img{
    width:100% !important; height:auto !important;
    object-fit:unset !important; object-position:unset !important;
  }
  .tab-media video,
  .tab-media iframe,
  .elementor-video-wrapper iframe{
    position:static !important;
    width:100% !important; height:auto !important;
    aspect-ratio:16/9 !important;
    object-fit:contain !important; object-position:50% 0 !important;
  }
}

/* --------- LARGE DESKTOP (≥1600px): SIDE-BY-SIDE, NATURAL HEIGHT --------- */
/* Let images show their natural height since they're pre-cropped */
@media (min-width:1600px){
  .tab-pair{
    grid-template-columns:minmax(68%,1fr) minmax(360px,32%);
    gap:clamp(16px,2.5vw,40px);
  }
  .tab-media{
    position:relative;
    height:auto;                       /* Natural height - no forced cropping */
    overflow:visible;                  /* allow shadow to show */
    padding: 0 20px 20px 0;            /* Right/bottom for shadow, no top/left */
  }
  /* Images: natural size since pre-cropped */
  .tab-media img,
  .tab-media picture>img,
  .tab-media figure>img{
    width:100% !important; height:auto !important;
    object-fit:unset !important;       /* No cropping needed */
    object-position:unset !important;
  }
  /* Video: maintain aspect ratio */
  .tab-media video,
  .tab-media iframe,
  .elementor-video-wrapper iframe{
    position:static !important;
    width:100% !important; height:auto !important;
    aspect-ratio:16/9 !important;
    object-fit:contain !important;
    object-position:50% 0 !important;
  }
}

/* --------- Tablet spacing tune --------- */
@media (min-width:768px) and (max-width:1199.98px){
  .tab-pair{ gap:clamp(16px,3vw,32px); }
}

/* =================================================================
   12. GLOBAL IMAGE & VIDEO STYLING - BORDER & SHADOW
================================================================= */

/* Atlas Media Border & Shadow - Apply to any image/video */
.atlas-media-border,
.atlas-media-border img,
.atlas-media-border video,
.atlas-media-border iframe,
.atlas-media-border .elementor-video-wrapper,
.atlas-media-border .elementor-video {
  border: 1px solid #DADADA !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.16) !important;
}

/* Ensure video containers don't override the border styling */
.atlas-media-border .elementor-video-wrapper {
  overflow: hidden !important;
}

/* Auto-apply consistent styling to all tab media */
.tab-media img,
.tab-media video,
.tab-media iframe,
.tab-media .elementor-video-wrapper,
.tab-media .elementor-video,
.tab-media .elementor-video iframe,
.tab-media .elementor-widget-video iframe {
  border: 1px solid #DADADA !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-medium) !important;  /* Consistent shadow for all media */
  overflow: hidden !important;          /* Clip content to rounded corners */
}