/**
 * Foundation Layer - Core Design Tokens & Base Styles
 * 
 * ============================================================================
 * ITCSS LAYER: FOUNDATION (01)
 * ============================================================================
 * 
 * This layer contains all foundational design elements including:
 * - Font imports and @font-face declarations
 * - Responsive breakpoint definitions
 * - Core design system variables (colors, typography, spacing)
 * - Base element styles with variable references
 * - Responsive variable overrides
 * 
 * CONSOLIDATED FROM:
 * - assets/css/variables.css (Core design tokens and base styles)
 * - assets/css/breakpoints.css (Responsive breakpoint definitions)
 * 
 * LOAD ORDER: First (after external dependencies like Bootstrap)
 * DEPENDENCIES: None (foundation layer)
 * DEPENDENTS: All other CSS files depend on these variables and breakpoints
 */

/* ============================================================================
 * FONT IMPORTS & @FONT-FACE DECLARATIONS
 * ============================================================================ */



@font-face {
    font-family: 'Icons Realtor Template';
    src: url('https://uploads-ssl.webflow.com/649f1b5831e1f1e01693f73f/649f1b5831e1f1e01693f8b5_icons-realtor-template.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============================================================================
 * RESPONSIVE BREAKPOINT DEFINITIONS
 * ============================================================================
 * 
 * BREAKPOINT STRATEGY:
 * This system defines consistent breakpoint values across all responsive files
 * and establishes the foundation for future mobile-first migration.
 * 
 * CURRENT APPROACH: Desktop-First (maintained for compatibility)
 * - Base: Desktop default (no media query) - 1400px+
 * - Large Desktop: min-width 1400px
 * - Desktop: 1200px-1399px
 * - Tablet Landscape: 992px-1199px  
 * - Tablet Portrait: 768px-991px
 * - Mobile: max-width 767px
 * - Small Mobile: max-width 576px
 */

:root {
    /* === BREAKPOINT DEFINITIONS === 
     * Centralized responsive breakpoint system
     * All breakpoint variables are defined here (--breakpoint-*)
     * Used by: responsive.css, mobile-consolidated.css, and component files
     * Note: This is the single source of truth for all breakpoints after optimization
     */
    --breakpoint-mobile-max: 767px;
    --breakpoint-small-mobile-max: 576px;
    --breakpoint-tablet-min: 768px;
    --breakpoint-tablet-max: 991px;
    --breakpoint-tablet-landscape-min: 992px;
    --breakpoint-tablet-landscape-max: 1199px;
    --breakpoint-desktop-min: 1200px;
    --breakpoint-desktop-max: 1399px;
    --breakpoint-large-desktop-min: 1400px;
    
    /* === RESPONSIVE SPACING === */
    --space-header-height-tablet: 80px;
    --space-header-height-desktop: 90px;

    /* ============================================================================
     * CORE DESIGN SYSTEM VARIABLES
     * ============================================================================ */

    /* === COLOR SYSTEM === */
    --color-primary: #000a4a;
    --color-primary-rgb: 0, 10, 74;
    --color-accent: #f85757;
    --color-accent-rgb: 248, 87, 87;
    
    --color-text-primary: #000;
    --color-text-secondary: #222223;
    --color-text-tertiary: #616066;
    --color-text-muted: #8d8d91;
    
    --color-bg-primary: #fff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #e9e9e9;
    
    --color-overlay-light: rgba(0, 0, 0, 0.05);
    
    --color-border-primary: #e9e9e9;
    
    /* === BORDER SYSTEM === */
    /* 2-Tier Border Thickness Hierarchy */
    --border-width-structural: 1px;      /* Cards, forms, containers */
    --border-width-interactive: 2px;     /* Buttons, clickable elements */
    --border-width-emphasis: 2px;        /* Decorative accents, status */

    /* Border Color System */
    --border-color-primary: var(--color-primary);
    --border-color-secondary: var(--color-border-primary); 
    --border-color-accent: var(--color-accent);
    --border-color-hover: var(--color-accent);    /* Universal hover color */
    --border-color-focus: var(--color-accent);    /* Universal focus color */
    
    /* === SPACING SYSTEM === */
    --space-xs-quarter: 1px;
    --space-xs-half: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 48px;
    
    --space-card-shadow: 10px;
    
    --shadow-margin-multiplier-desktop: 1.6;      /* Desktop: 1.6x blur radius + buffer */
    --shadow-margin-multiplier-tablet: 1.4;       /* Tablet: 1.4x blur radius + buffer */
    --shadow-margin-multiplier-mobile: 1.2;       /* Mobile: 1.2x blur radius + buffer */
    
    --space-header-height: 80px;
    --space-header-height-mobile: 70px;
    
    --space-header-padding-vertical: 8px;
    --space-nav-item-padding: 8px;
    --space-header-height-compact: 60px;
    
    --space-admin-bar-desktop: 32px;
    --space-admin-bar-mobile: 46px;
    
    --touch-target-min-height: 44px;
    
    /* === BORDER RADIUS SYSTEM === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    
    /* === SHADOW SYSTEM === */
    --shadow-sm: 0 3px 20px 0 rgba(8, 15, 52, .06);
    --shadow-md: 0 6px 12px rgba(0, 0, 0, .175);
    
    /* === TYPOGRAPHY SYSTEM === */
    --font-family-primary: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-property-title: 21px;
    --font-size-2xl: 24px;
    --font-size-2xl-plus: 28px;  /* New - fills gap between 24px and 32px */
    --font-size-3xl: 32px;
    --font-size-3xl-plus: 36px;  /* New - for tablet responsive scaling */
    --font-size-4xl: 48px;
    
    --body-text-primary: var(--font-size-lg);      /* 18px - Main content paragraphs */
    --body-text-secondary: var(--font-size-md);    /* 16px - Supporting content, navigation */
    --body-text-small: var(--font-size-sm);        /* 14px - Captions, metadata, reviews */
    --body-text-fine-print: var(--font-size-xs);   /* 12px - Legal disclaimers, form validation */
    
    --review-text-size: var(--body-text-small);    /* 14px - Standardize review content */
    --timestamp-text-size: 13px;                   /* 13px - Review timestamps (between 12px and 14px) */
    --ui-text-size: 15px;                          /* 15px - UI elements like cookie buttons */
    --navigation-text-size: var(--font-size-xl);   /* 20px - Navigation links */
    --rating-text-size: 21px;                      /* 21px - Google ratings display */
    
    --heading-size-h1: var(--font-size-4xl);    /* 48px */
    --heading-size-h2: var(--font-size-3xl);    /* 32px */
    --heading-size-h3: var(--font-size-2xl);    /* 24px */
    --heading-size-h4: var(--font-size-xl);     /* 20px */
    --heading-size-h5: var(--font-size-lg);     /* 18px */
    --heading-size-h6: var(--font-size-md);     /* 16px */
    
    --font-size-property-title-mobile: 28px;
    --font-size-property-h2-mobile: 20px;
    --font-size-property-h3-mobile: 18px;
    
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    --body-line-height-primary: 1.6;     /* Main content readability */
    --body-line-height-secondary: 1.5;   /* Supporting content */
    --body-line-height-small: 1.4;       /* Small text compactness */
    --body-line-height-fine-print: 1.3;  /* Fine print compactness */
    
    --heading-color-primary: var(--color-primary);
    --heading-color-accent: var(--color-accent);
    --heading-color-muted: var(--color-text-muted);
    
    --heading-margin-top: 0;
    --heading-margin-bottom: 1.5rem;
    
    --heading-line-height-tight: 1.15;
    --heading-line-height-h1: 1.2;
    --heading-line-height-h2: 1.3;
    --heading-line-height-h3: 1.4;
    --heading-line-height-normal: 1.4;
    --heading-line-height-small: 1.4;
    
    --bs-gutter-x: 1.5rem;
    
    /* === MOBILE SPACING SYSTEM === */
    --space-mobile-section-sm: 60px;
    --space-mobile-section: 60px;
    --space-mobile-section-lg: 100px;
    
    --space-mobile-property-banner: 40px;
    --space-mobile-property-section: 60px;
    --space-mobile-property-section-lg: 80px;
    --space-mobile-property-details: 50px;
    
    --space-mobile-content: 24px;
    --space-mobile-content-lg: 40px;
    --space-mobile-paragraph: 16px;
    
    --space-mobile-container: 2rem;
    --space-mobile-container-sm: 1.5rem;
    
    --space-mobile-section-gap: 32px;
    --space-mobile-section-gap-lg: 64px;
    
    /* === CARD SYSTEM VARIABLES === */
    --card-padding-sm: 0.75rem;
    --card-padding: 1.5rem;  /* Consolidated from all definitions */
    --card-padding-lg: 2rem;
    --card-padding-xl: 2.5rem;
    
    --card-radius-sm: var(--radius-sm);
    --card-radius: var(--radius-2xl);
    --card-radius-lg: var(--radius-lg);
    --card-radius-xl: var(--radius-xl);
    --card-image-radius: 5px;
    
    --card-shadow-sm: var(--shadow-sm);
    --card-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
    --card-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10);
    --card-shadow-xl: 0 15px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05);
    --card-shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.3);
    
    --card-bg: var(--color-bg-primary);
    --card-bg-hover: var(--color-bg-secondary);
    --card-border-color: var(--color-border-primary);
    --card-text-color: var(--color-text-primary);
    --card-text-muted: var(--color-text-muted);
    
    --card-gap: var(--space-md);
    --card-gap-lg: var(--space-lg);
    --card-gap-xl: var(--space-xl);
    
    --card-grid-cols-mobile: 1;
    --card-grid-cols-tablet: 2;
    --card-grid-cols-desktop: 3;
    --card-grid-cols-wide: 4;
    
    --card-grid-min-width: 300px;
    --card-grid-min-width-sm: 250px;
    
    --card-margin-bottom: 25px;                    /* For default --card-shadow (4px 4px 10px) - 1.6x blur + 5px buffer */
    --card-margin-bottom-sm: 37px;                 /* For --card-shadow-sm (0 3px 20px 0) - 1.6x blur + 5px buffer */
    --card-margin-bottom-lg: 53px;                 /* For --card-shadow-lg (0 10px 30px 0) - 1.6x blur + 5px buffer */
    --card-margin-bottom-xl: 69px;                 /* For --card-shadow-xl (0 20px 40px 0) - 1.6x blur + 5px buffer */
    
    --card-icon-size-sm: 16px;
    --card-icon-size: 24px;
    --card-icon-size-lg: 32px;
    
    --card-content-gap: 15px;
    --card-badge-padding: 12px 22px;
    --card-inner-padding: 40px;
    --card-compact-padding: 30px;
    --card-dream-padding: 50px 38px;
    
    --card-badge-radius: 60px;
    --card-special-radius: 24px;
    --card-city-partial-radius: 24px 0 0 24px;
    
    --card-overlay-text: #fff;
    
    --card-text-size: 16px;
    --card-subtitle-size: 22px;
    --card-text-line-height: 1.6;
    
    --card-excerpt-words: 25; /* Used for Ellis Presents excerpt length */
    
    --card-image-aspect-mobile: 4/3; /* 4:3 aspect ratio for mobile */
    --card-image-aspect-tablet: 16/9; /* 16:9 aspect ratio for tablet */
    --card-image-aspect-desktop: 16/10; /* 16:10 aspect ratio for desktop */
    
    --card-image-aspect-natural: auto; /* Natural aspect ratio for images */
    --card-image-height-natural: auto; /* Natural height for images */
    --card-vertical-image-height: 380px; /* Default height for card-vertical images */
    
    /* Content-specific aspect ratios */
    --card-image-aspect-blog: 4/5; /* Portrait blog images (820x1024 source) */
    --card-image-aspect-people: 1/1; /* Square people images (500x500 and 1080x1080 sources) */
    --card-image-aspect-properties: 3/2; /* Landscape property images (1920x1280 source) */
    --card-image-aspect-ellis: 16/9; /* Landscape Ellis Presents images (1280x720 source) */
    --card-image-aspect-cities: 16/9; /* Landscape cities images (1920x1080 source) */
    
    /* === LAYOUT VARIABLES === */
    --layout-content-max-width: 70%;
    
    /* === BLOG SYSTEM VARIABLES === */
    --blog-hero-padding: var(--space-3xl) 0;
    --blog-hero-padding-mobile: var(--space-2xl) 0;
    --blog-hero-content-gap: var(--space-xl);
    
    --blog-title-size: clamp(28px, 4vw, 42px);
    --blog-title-weight: var(--font-weight-bold);
    --blog-title-line-height: 1.2;
    --blog-excerpt-size: var(--font-size-lg);
    --blog-meta-size: var(--font-size-sm);
    
    --blog-image-aspect-ratio: 16/10;
    --blog-image-border-radius: var(--radius-xl);
    --blog-image-shadow: var(--card-shadow-lg);
    
    --breadcrumb-font-size: var(--font-size-sm);
    --breadcrumb-separator-color: var(--color-text-muted);
    
    --social-link-size: 40px;
    --social-link-border-radius: var(--radius-md);
    --social-link-gap: var(--space-sm);
    
    /* === BADGE SYSTEM VARIABLES === */
    --badge-buyer-questions: #28a745;
    --badge-seller-questions: #007bff;
    --badge-market-insights: #6f42c1;
    --badge-default: var(--color-text-muted);
    
    --badge-featured: #dc3545;
    --badge-primary: #dc3545;
    --badge-secondary: #6c757d;
    
    --badge-font-size: 0.75rem;
    --badge-padding-vertical: 0.25rem;
    --badge-padding-horizontal: 0.5rem;
    --badge-font-weight: 500;
    --badge-border-radius: var(--radius-sm);
    
    --badge-text-color: #fff;
    
    --card-featured-image-height-desktop: 415px;
    --card-featured-image-height-tablet: 320px;
    --card-featured-image-height-mobile: 240px;

    /* === Z-INDEX SYSTEM === */
    --z-index-header: 1000;
    --z-index-modal: 2000;
    --z-index-tooltip: 3000;
    
    /* Card z-index hierarchy */
    --z-index-card-content: 0;
    --z-index-card-overlay: 1;
    --z-index-card-interactive: 2;
    --z-index-card-focus: 3;

    /* === LAYOUT & SECTION SPACING === */
    --section-spacing-top: var(--space-3xl);
    --section-spacing-bottom: var(--space-3xl);
    --section-spacing-vertical: var(--space-3xl) 0;

    /* === HEADER SYSTEM === */
    --header-bg-color: var(--color-bg-primary);
    --space-header-padding-vertical-mobile: 6px;

    /* === BUTTON SYSTEM EXTENSIONS === */
    --btn-margin: 12px;
    --btn-margin-sm: 8px;

    /* === COLOR EXTENSIONS === */
    --color-white: #ffffff;
    --color-navy: var(--color-primary);
    --color-text-dark: var(--color-text-primary);
    --color-heading: var(--heading-color-primary);
    --color-secondary: var(--color-text-secondary);
    --color-border-light: rgba(233, 233, 233, 0.5);
    --color-primary-transparent: rgba(0, 10, 74, 0.1);
    --accent-color-transparent: rgba(248, 87, 87, 0.1);

    /* === CARD SYSTEM EXTENSIONS === */
    --card-transition: all 0.3s ease;

    /* === MOBILE TYPOGRAPHY === */
    --font-size-h1-mobile: var(--heading-size-h1);
    --font-size-h2-mobile: var(--heading-size-h2);
    --font-size-h3-mobile: var(--heading-size-h3);
    --heading-margin-bottom-mobile: 1rem;

    /* === HERO & SPECIAL TYPOGRAPHY === */
    --hero-heading-size: var(--font-size-4xl);

    /* === INTERACTION & ANIMATION === */
    --transition-fast: 0.2s ease;

    /* === LINK SYSTEM === */
    --link-card: var(--color-primary);
    --link-footer-hover: var(--color-accent);
    --link-utility: var(--color-text-muted);

    /* === MOBILE STATS & COMPONENTS === */
    --stats-gap-mobile: var(--space-md);
    --stats-padding-mobile: var(--space-lg);

    /* === LAYOUT & SECTION SPACING EXTENSIONS === */
    --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --section-spacing-minimal: 0.5rem;
    --section-spacing-tight: 3rem;
    --section-spacing-top-tight: var(--section-spacing-tight);

    /* === BOOTSTRAP OVERRIDES === */
    --bs-gutter-x: 1.5rem;

    /* === TYPOGRAPHY LINK SYSTEM === */
    --link-content: var(--color-accent);           /* In-text content links */
    --link-navigation: var(--color-primary);       /* Main navigation links */
    --link-footer: var(--color-primary);           /* Footer navigation links */
    --link-contact: var(--color-accent);           /* Tel, mailto, contact info */
    --link-social: var(--color-text-primary);      /* Social media links */
    --link-external: var(--color-accent);          /* External/third-party links */

    --link-content-hover: var(--color-accent);     /* Darker accent for content */
    --link-navigation-hover: var(--color-accent);  /* Accent for navigation hover */
    --link-footer-hover: #06c;                     /* Maintain current footer hover */
    --link-utility-hover: var(--color-accent);     /* Accent for utility hover */
    --link-contact-hover: var(--color-accent);     /* Accent for contact hover */
    --link-social-hover: var(--color-accent);      /* Accent for social hover */
    --link-external-hover: #d63d3d;                /* Darker accent for external */

    --link-blog: inherit;                          /* Blog card links */
    --link-team: var(--color-text-secondary);     /* Team member links */
    --link-media: var(--color-bg-primary);        /* Video, gallery links */

    /* === SPECIALIZED TYPOGRAPHY === */
    --card-heading-size: var(--font-size-xl);
    --section-heading-size: var(--font-size-4xl);

    /* === COMPLETE BUTTON SYSTEM === */
    --btn-padding: var(--space-sm) var(--space-lg);
    --btn-padding-sm: var(--space-xs) var(--space-md);
    --btn-padding-md: var(--space-sm) var(--space-lg);
    --btn-padding-lg: var(--space-md) var(--space-xl);
    --btn-padding-mobile: var(--space-sm) var(--space-lg);
    --btn-padding-mobile-lg: var(--space-md) var(--space-xl);
    --btn-min-height-mobile: 44px;
    --btn-min-width-mobile: 44px;
    --btn-disabled-opacity: 0.6;
    --btn-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
    --btn-accent-bg-hover: var(--color-accent);
    --btn-font-size: var(--font-size-md);
    --btn-font-size-sm: var(--font-size-sm);
    --btn-font-size-lg: var(--font-size-lg);
    --btn-font-weight: var(--font-weight-medium);
    --btn-line-height: var(--line-height-normal);
    --btn-border-width: var(--border-width-interactive);
    --btn-border-radius: var(--radius-md);
    
    --btn-primary-bg: var(--color-primary);
    --btn-primary-border: var(--border-color-primary);
    --btn-primary-text: var(--color-bg-primary);
    --btn-primary-bg-hover: var(--color-accent);
    --btn-primary-border-hover: var(--border-color-hover);
    --btn-primary-text-hover: var(--color-bg-primary);
    
    --btn-secondary-bg: var(--color-bg-primary);
    --btn-secondary-border: var(--border-color-primary);
    --btn-secondary-text: var(--color-primary);
    --btn-secondary-bg-hover: var(--color-accent);
    --btn-secondary-border-hover: var(--border-color-hover);
    --btn-secondary-text-hover: var(--color-bg-primary);
    
    --btn-accent-bg: var(--color-accent);
    --btn-accent-border: var(--border-color-accent);
    --btn-accent-text: var(--color-bg-primary);
    --btn-accent-bg-hover: #d63d3d;
    --btn-accent-border-hover: var(--border-color-hover);
    --btn-accent-text-hover: var(--color-bg-primary);
    
    --btn-focus-outline: 2px solid var(--color-accent);
    --btn-shadow: var(--shadow-sm);
    --btn-shadow-hover: var(--shadow-md);

    /* === COMPLETE CARD SYSTEM EXTENSIONS === */
    --card-shadow-sm: 0 3px 20px 0 rgba(8, 15, 52, .06);
    --card-shadow: 4px 4px 10px rgba(8, 15, 52, 0.08);
    --card-shadow-lg: 0 10px 30px 0 rgba(8, 15, 52, .06);
    --card-shadow-xl: 0 20px 40px 0 rgba(8, 15, 52, .08);
    --card-shadow-hover: 4px 4px 10px rgba(248, 87, 87, 0.2);
    --card-radius-sm: var(--radius-lg, 12px);
    --card-radius-xl: 32px;
    --card-image-padding: 0;
    --card-text-size: var(--font-size-md, 16px);
    --card-text-line-height: var(--line-height-relaxed, 1.6);
    --card-subtitle-size: var(--font-size-lg, 18px);
    --card-margin-bottom-lg: var(--space-lg, 1.5rem);
    --primary-color: var(--color-primary, #000a4a);
    --accent-color: var(--color-accent, #f85757);
    --card-shadow-dark: var(--shadow-dark, rgba(8, 15, 52, 0.06));
    --card-shadow-light: var(--shadow-light, rgba(0, 0, 0, 0.08));
    --card-overlay-bg: var(--overlay-dark, rgba(0, 0, 0, 0.4));
    --card-overlay-gradient: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    --card-loading-shimmer: rgba(255,255,255,0.4);
    --card-badge-shadow: var(--shadow-sm, rgba(20, 20, 43, 0.09));
    --card-info-gradient: linear-gradient(135deg, rgba(0, 10, 74, 0.9) 0%, rgba(0, 10, 74, 0.7) 100%);
    --card-text-dark: var(--color-text-dark, rgb(34, 34, 35));
    --card-white: var(--color-white, rgb(255, 255, 255));
    --card-navy: var(--color-navy, rgb(0, 10, 64));
    --card-hover-link: var(--color-hover-link, #000a41);
    
    /* Shadow and overlay extensions */
    --shadow-light: var(--shadow-sm, 0 3px 20px 0 rgba(8, 15, 52, .06));
    --shadow-dark: var(--shadow-md, 0 6px 12px rgba(0, 0, 0, .175));
    --overlay-dark: rgba(0, 0, 0, 0.6);
}

/* ============================================================================
 * BASE ELEMENT STYLES
 * ============================================================================ */

/**
 * Base heading styles provide fallback when utility classes aren't used.
 * Component-specific styling is handled in typography layer
 */
h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color-primary);
    margin-top: var(--heading-margin-top);
    margin-bottom: var(--heading-margin-bottom);
    font-family: var(--font-family-primary);
}

h1 {
    font-size: var(--heading-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--heading-line-height-tight);
}

h2 {
    font-size: var(--heading-size-h2);
    font-weight: var(--font-weight-semibold);
    line-height: var(--heading-line-height-normal);
}

h3 {
    font-size: var(--heading-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--heading-line-height-normal);
}

h4 {
    font-size: var(--heading-size-h4);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

h5 {
    font-size: var(--heading-size-h5);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

h6 {
    font-size: var(--heading-size-h6);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

p {
    font-size: var(--body-text-primary);
    margin-bottom: 15px;
    line-height: var(--body-line-height-primary);
}

p:last-child {
    margin-bottom: 0;
}

img {
    max-width: 100%;
    height: auto;
}

/* === THEME-SPECIFIC TYPOGRAPHY OVERRIDES === */

body.theme-pt h1,
body.theme-pt .section-title h1,
body.theme-pt .card .card-body h1,
body.theme-pt article h1,
body.theme-pt section h1 {
    font-size: var(--heading-size-h1) !important;
    line-height: var(--heading-line-height-tight) !important;
}

body.theme-pt h2,
body.theme-pt .section-title h2,
body.theme-pt .card .card-body h2,
body.theme-pt .card-featured h2,
body.theme-pt .latest-posts h2,
body.theme-pt article h2,
body.theme-pt section h2 {
    font-size: var(--heading-size-h2) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--heading-color-primary);
    line-height: var(--heading-line-height-h2) !important;
}

body.theme-pt h3,
body.theme-pt .section-title h3,
body.theme-pt .card .card-body h3,
body.theme-pt .card-title,
body.theme-pt article h3,
body.theme-pt section h3 {
    font-size: var(--heading-size-h3) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--heading-color-primary) !important;
    line-height: var(--heading-line-height-h3) !important;
}

body.theme-pt h4,
body.theme-pt .section-title h4,
body.theme-pt .card .card-body h4,
body.theme-pt article h4,
body.theme-pt section h4 {
    font-size: var(--heading-size-h4) !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: var(--heading-line-height-small) !important;
}

body.theme-pt h5,
body.theme-pt .section-title h5,
body.theme-pt .card .card-body h5 {
    font-size: var(--heading-size-h5) !important;
    line-height: var(--heading-line-height-small) !important;
}

body.theme-pt h6,
body.theme-pt .section-title h6,
body.theme-pt .card .card-body h6 {
    font-size: var(--heading-size-h6) !important;
    line-height: var(--heading-line-height-small) !important;
}

body.theme-pt p:not(.card p):not(.wp-google-feedback):not(.fine-print),
body.theme-pt .hero-content p,
body.theme-pt .content-section p,
body.theme-pt .blog p,
body.theme-pt .text-content p,
body.theme-pt .main-content p {
    font-size: var(--body-text-primary) !important;
    line-height: var(--body-line-height-primary) !important;
}

body.theme-pt .nav-link,
body.theme-pt .navbar-nav .nav-link,
body.theme-pt .supporting-text,
body.theme-pt .card-text,
body.theme-pt .card p,
body.theme-pt .card-body p,
body.theme-pt .card-property p,
body.theme-pt .card-experience p,
body.theme-pt .shortIntro {
    font-size: var(--body-text-secondary) !important;
    line-height: var(--body-line-height-secondary) !important;
}

body.theme-pt .wp-google-feedback,
body.theme-pt .grw-review .wp-google-feedback,
body.theme-pt .review-content,
body.theme-pt .card-meta,
body.theme-pt .card-meta span,
body.theme-pt .card-meta .text-muted,
body.theme-pt .card-meta .badge,
body.theme-pt .metadata {
    font-size: var(--body-text-small) !important;
    line-height: var(--body-line-height-small) !important;
}

body.theme-pt .wp-google-time,
body.theme-pt .timestamp,
body.theme-pt .chat-timestamp {
    font-size: var(--timestamp-text-size) !important;
    line-height: var(--body-line-height-small) !important;
}

body.theme-pt .wp-google-powered,
body.theme-pt .btn_policies,
body.theme-pt .ui-text {
    font-size: var(--ui-text-size) !important;
    line-height: var(--body-line-height-secondary) !important;
}

body.theme-pt mw-messages-form-error,
body.theme-pt .form-validation,
body.theme-pt .legal-text,
body.theme-pt .fine-print {
    font-size: var(--body-text-fine-print) !important;
    line-height: var(--body-line-height-fine-print) !important;
}

body.theme-pt .mc4wp-form label,
body.theme-pt .mc4wp-form-197 label,
body.theme-pt .subscribe-form .mc4wp-form label,
body.theme-pt footer .mc4wp-form label,
body.theme-pt .subscribe-form label,
body.theme-pt .mc4wp-form-fields p label,
body.theme-pt .mc4wp-form.mc4wp-form-197 label {
    font-size: var(--body-text-small) !important;
    line-height: var(--body-line-height-secondary) !important;
}

body.theme-pt .wpml-ls-link,
body.theme-pt .wp-google-name,
body.theme-pt .navigation-text,
body.theme-pt .grw-review .wp-google-name,
body.theme-pt .wp-google-left .wp-google-name,
body.theme-pt .grw-review-inner .wp-google-name {
    font-size: var(--navigation-text-size) !important;
    line-height: var(--body-line-height-secondary) !important;
}

body.theme-pt .wp-google-rating {
    font-size: var(--rating-text-size) !important;
    line-height: var(--body-line-height-secondary) !important;
}

/* ============================================================================
 * RESPONSIVE VARIABLE OVERRIDES
 * ============================================================================ */

@media (min-width: 768px) and (max-width: 991px) {
    :root {
        --heading-size-h1: 40px;  /* Between 32px mobile and 48px desktop */
        --heading-size-h2: 32px;  /* Maintain desktop size for good hierarchy */
        --heading-size-h3: 26px;  /* Between 22px mobile and 24px desktop */
        --heading-size-h4: 21px;  /* Between 18px mobile and 20px desktop */
        --heading-size-h5: 18px;  /* Keep desktop size */
        --heading-size-h6: 16px;  /* Keep desktop size */
        
        --card-margin-bottom: 23px;                    /* Tablet: 1.4x blur + 4px buffer */
        --card-margin-bottom-sm: 32px;                 /* Tablet: 1.4x blur + 4px buffer */
        --card-margin-bottom-lg: 46px;                 /* Tablet: 1.4x blur + 4px buffer */
        --card-margin-bottom-xl: 60px;                 /* Tablet: 1.4x blur + 4px buffer */
    }
}

@media (max-width: 767px) {
    :root {
        --heading-size-h1: 32px;  /* Readable but impactful */
        --heading-size-h2: 26px;  /* Clear differentiation from H1 (6px difference) */
        --heading-size-h3: 22px;  /* Clear differentiation from H2 (4px difference) */
        --heading-size-h4: 18px;  /* Clear differentiation from H3 (4px difference) */
        --heading-size-h5: 16px;  /* Equal to body text but with weight difference */
        --heading-size-h6: 14px;  /* Smaller than body text */
        
        --card-margin-bottom: 21px;                    /* Mobile: 1.2x blur + 3px buffer */
        --card-margin-bottom-sm: 27px;                 /* Mobile: 1.2x blur + 3px buffer */
        --card-margin-bottom-lg: 39px;                 /* Mobile: 1.2x blur + 3px buffer */
        --card-margin-bottom-xl: 51px;                 /* Mobile: 1.2x blur + 3px buffer */

        /* === MOBILE-SPECIFIC OVERRIDES === */
        --space-mobile-section: 60px;
        --space-mobile-section-sm: 24px;
        --space-mobile-section-gap: 30px;
        --space-mobile-section-gap-lg: 40px;
        --space-mobile-container: 1.25rem;
        --space-mobile-container-sm: 1rem;
        --space-mobile-content: 1rem;
        --space-mobile-paragraph: 0.75rem;

        /* Mobile typography overrides */
        --heading-margin-bottom-mobile: 1.25rem;
        --font-size-h1-mobile: clamp(1.75rem, 6vw, 2.25rem);
        --font-size-h2-mobile: clamp(1.5rem, 5vw, 1.875rem);
        --font-size-h3-mobile: clamp(1.25rem, 4vw, 1.5rem);
        --heading-line-height-tight: 1.25;
        --heading-line-height-normal: 1.35;

        /* Mobile button overrides */
        --btn-padding-mobile: 16px 24px;
        --btn-padding-mobile-lg: 20px 32px;
        --btn-margin: 0.75rem;
        --btn-margin-sm: 0.5rem;

        /* Mobile touch targets */
        --touch-target-min-width: 44px;
        --touch-target-padding: 16px 24px;

        /* Mobile stats overrides */
        --stats-gap-mobile: 2rem;
        --stats-padding-mobile: 1.5rem;
        --stats-border-mobile: 1px solid var(--color-border-light, rgba(0, 10, 64, 0.1));
        --stats-bg-mobile: var(--color-bg-secondary, rgba(255, 255, 255, 0.8));

        /* Mobile font scaling */
        --font-scale-factor-mobile: 0.85;
        
        /* Mobile paragraph spacing */
        --paragraph-margin-bottom: var(--space-lg);
        --body-line-height: var(--line-height-relaxed);
    }
}

/* === ADDITIONAL MOBILE BREAKPOINTS === */
@media (max-width: 576px) {
    :root {
        --font-scale-factor: 0.9;
    }
}

@media (max-width: 480px) {
    :root {
        --font-scale-factor: 0.85;
    }
}

@media (max-width: 400px) {
    :root {
        --font-scale-factor: 0.8;
    }
}

/* ============================================================================
 * BREAKPOINT USAGE GUIDELINES
 * ============================================================================
 * 
 * DESKTOP-FIRST MEDIA QUERIES (Current Implementation):
 * 
 * 1. Extra Large Desktop (1400px+):
 *    @media only screen and (min-width: 1400px) { }
 *    
 * 2. Large Desktop Range (1200px-1399px):
 *    @media only screen and (min-width: 1200px) and (max-width: 1399px) { }
 *    
 * 3. Tablet Landscape Range (992px-1199px):
 *    @media only screen and (min-width: 992px) and (max-width: 1199px) { }
 *    
 * 4. Tablet Portrait & Mobile Range (max-width: 991px):
 *    @media only screen and (max-width: 991px) { }
 *    
 * 5. Tablet Portrait Range (768px-991px):
 *    @media only screen and (min-width: 768px) and (max-width: 991px) { }
 *    
 * 6. Mobile Range (max-width: 767px):
 *    @media only screen and (max-width: 767px) { }
 *    
 * 7. Small Mobile Range (max-width: 576px):
 *    @media only screen and (max-width: 576px) { }
 *
 * CRITICAL: Ensure no overlapping ranges to prevent cascade conflicts
 * 
 * ============================================================================
 * MOBILE-FIRST MIGRATION PATH (Future Implementation)
 * ============================================================================
 * 
 * When migrating to mobile-first, use these patterns:
 * 
 * 1. Mobile Base (no media query - default)
 * 2. Small Tablet: @media (min-width: 576px) { }
 * 3. Tablet Portrait: @media (min-width: 768px) { }
 * 4. Tablet Landscape: @media (min-width: 992px) { }
 * 5. Desktop: @media (min-width: 1200px) { }
 * 6. Large Desktop: @media (min-width: 1400px) { }
 * 
 * MIGRATION BENEFITS:
 * - Smaller CSS bundle size (mobile styles as base)
 * - Better performance on mobile devices
 * - Progressive enhancement approach
 * - Cleaner cascade with minimal overrides
 * 
 * MIGRATION STRATEGY:
 * 1. Start with new components using mobile-first
 * 2. Gradually refactor existing components
 * 3. Test thoroughly at each breakpoint
 * 4. Maintain backward compatibility during transition
 */