/**
 * ============================================================================
 * CLINIC WEBSITE CUSTOM STYLES
 * ============================================================================
 * Version: 1.9 (Optimized)
 * Last Updated: February 26, 2026
 * Description: Custom CSS for clinic website built with Elementor & JetEngine
 * ============================================================================
 */


/* ==========================================================================
   TABLE OF CONTENTS
   ========================================================================== */
/*
   1. ELEMENTOR SETTINGS
   2. SPACING UTILITIES
   3. BUTTONS
   4. TYPOGRAPHY
   5. GENERAL STYLES
   6. COLORS
   7. ACCORDIONS
   8. EDITOR OVERRIDES
*/


/* ==========================================================================
   1. ELEMENTOR SETTINGS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1.1 General Enhancements
   -------------------------------------------------------------------------- */

/**
 * Remove bottom margin from last paragraph in text editor widgets
 * Prevents unnecessary whitespace at the end of content blocks
 */
.elementor-widget-text-editor p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   2. SPACING UTILITIES
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.1 Padding - All Sides
   -------------------------------------------------------------------------- */

/**
 * Responsive padding classes using clamp() for fluid scaling
 * Automatically adjusts between min and max values based on viewport
 */

/* Small padding: 24px → 32px */
.pad-s {
    padding: clamp(1.5rem, 1.2692rem + 1.0256vw, 2rem) !important;
}

/* Medium padding: 40px-64px (vertical) | 24px-64px (horizontal) */
.pad-m {
    padding: clamp(2.5rem, 1.8077rem + 3.0769vw, 4rem) clamp(1.5rem, 0.3462rem + 5.1282vw, 4rem) !important;
}

/* Large padding: 40px → 80px */
.pad-l {
    padding: clamp(2.5rem, 1.3462rem + 5.1282vw, 5rem) !important;
}

/* --------------------------------------------------------------------------
   2.2 Padding - Top & Bottom
   -------------------------------------------------------------------------- */

/* 0px → 64px (responsive from 0 to 4rem) */
.pad-tb-0-4 {
    padding: clamp(0rem, -1.8462rem + 8.2051vw, 4rem) 0 !important;
}

/* Small: 40px → 48px */
.pad-tb-s {
    padding: clamp(2.5rem, 2.2692rem + 1.0256vw, 3rem) 0 !important;
}

/* Medium: 64px → 96px */
.pad-tb-m {
    padding: clamp(4rem, 3.0769rem + 4.1026vw, 6rem) 0 !important;
}

/* Small to Medium range: 24px → 96px */
.pad-tb-s-m {
    padding: clamp(1.5rem, -0.5769rem + 9.2308vw, 6rem) 0 !important;
}

/* Large: 80px → 128px */
.pad-tb-l {
    padding: clamp(5rem, 3.6154rem + 6.1538vw, 8rem) 0 !important;
}

/* --------------------------------------------------------------------------
   2.3 Padding - Top Only
   -------------------------------------------------------------------------- */

/* 0px → 64px */
.pad-t-0-4 {
    padding-top: clamp(0rem, -1.8462rem + 8.2051vw, 4rem) !important;
}

/* Small: 40px → 48px */
.pad-t-s {
    padding-top: clamp(2.5rem, 2.2692rem + 1.0256vw, 3rem) !important;
}

/* Medium: 64px → 96px */
.pad-t-m {
    padding-top: clamp(4rem, 3.0769rem + 4.1026vw, 6rem) !important;
}

/* Small to Medium: 24px → 96px */
.pad-t-s-m {
    padding-top: clamp(1.5rem, -0.5769rem + 9.2308vw, 6rem) !important;
}

/* Large: 80px → 128px */
.pad-t-l {
    padding-top: clamp(5rem, 3.6154rem + 6.1538vw, 8rem) !important;
}

/* --------------------------------------------------------------------------
   2.4 Padding - Bottom Only
   -------------------------------------------------------------------------- */

/* 0px → 64px */
.pad-b-0-4 {
    padding-bottom: clamp(0rem, -1.8462rem + 8.2051vw, 4rem) !important;
}

/* Small: 40px → 48px */
.pad-b-s {
    padding-bottom: clamp(2.5rem, 2.2692rem + 1.0256vw, 3rem) !important;
}

/* Fixed 64px */
.pad-b-4 {
    padding-bottom: 4rem !important;
}

/* Medium: 64px → 96px */
.pad-b-m {
    padding-bottom: clamp(4rem, 3.0769rem + 4.1026vw, 6rem) !important;
}

/* Small to Medium: 24px → 96px */
.pad-b-s-m {
    padding-bottom: clamp(1.5rem, -0.5769rem + 9.2308vw, 6rem) !important;
}

/* Large: 80px → 128px */
.pad-b-l {
    padding-bottom: clamp(5rem, 3.6154rem + 6.1538vw, 8rem) !important;
}


/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   3.1 General Button Behavior
   -------------------------------------------------------------------------- */

/**
 * Main animation applied to all Elementor buttons
 * Creates lift effect on hover with subtle brightness change
 */
.elementor-button {
    transition: transform 0.3s ease-out;
}

.elementor-button:hover {
    transform: translateY(-4px);
    filter: brightness(95%);
}

/**
 * Light animation variant
 * Reduced lift for subtle hover effect
 */
.lightanim .elementor-button:hover {
    transform: translateY(-2px);
    filter: brightness(95%);
}

/**
 * No animation variant
 * For buttons that should not animate
 */
.noanim-g .elementor-button {
    transition: none;
}

.noanim-g .elementor-button:hover {
    transform: none;
}

/**
 * Base button layout
 * Ensures proper flexbox alignment for icons and text
 */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* --------------------------------------------------------------------------
   3.2 Button Styles - Primary
   -------------------------------------------------------------------------- */

/**
 * Primary button styling
 * Main CTA buttons throughout the site
 */
.btn-pri .elementor-button,
.btn-pri:focus .elementor-button {
    background: var(--e-global-color-9e34d25, #728F9D);
}

.btn-pri .elementor-button,
.btn-pri .elementor-button:visited,
.btn-pri .elementor-button-icon,
.btn-pri:focus .elementor-button,
.btn-pri:focus .elementor-button-icon {
    color: #FFFFFF !important;
}

.btn-pri:hover .elementor-button {
    background: var(--e-global-color-2083e01, #4A606D);
    color: var(--e-global-color-2671580, #F2F5F7) !important;
}

/* --------------------------------------------------------------------------
   3.3 Button Styles - Secondary Gray
   -------------------------------------------------------------------------- */

/**
 * Secondary gray button
 * Alternative CTA with gray border and fill
 */
.btn-sec-gray .elementor-button {
    background: #FFF;
    border: 1px solid var(--e-global-color-92e79ed, #C8D4DA);
}

.btn-sec-gray .elementor-button,
.btn-sec-gray .elementor-button:visited {
    color: var(--e-global-color-4105b9a, #455763) !important;
}

.btn-sec-gray:hover .elementor-button {
    background: var(--e-global-color-92e79ed, #C8D4DA);
    color: var(--e-global-color-eae4c80, #353E46) !important;
}

/* --------------------------------------------------------------------------
   3.4 Button Styles - Secondary Color
   -------------------------------------------------------------------------- */

/**
 * Secondary color button
 * Alternative CTA with accent color scheme
 */
.btn-sec-color .elementor-button {
    background: #FFF;
    border: 1px solid var(--e-global-color-8d3c0df, #CCBCA5);
}

.btn-sec-color .elementor-button,
.btn-sec-color .elementor-button:visited {
    color: var(--e-global-color-2f7b41e, #80604E) !important;
}

.btn-sec-color:hover .elementor-button {
    background: var(--e-global-color-876ce07, #F9F7F3);
    color: var(--e-global-color-cd1ea5f, #695043) !important;
}

/* --------------------------------------------------------------------------
   3.5 Button Styles - Secondary Full
   -------------------------------------------------------------------------- */

/**
 * Secondary button with full color background
 * Filled version of secondary color button
 */
.btn-sec-full .elementor-button {
    background: var(--e-global-color-8d3c0df, #CCBCA5);
}

.btn-sec-full .elementor-button,
.btn-sec-full .elementor-button:visited {
    color: var(--e-global-color-6f7d677, #564338) !important;
}

.btn-sec-full:hover .elementor-button {
    background: var(--e-global-color-8d3c0df_hover, #A78868);
    color: #FFF !important;
}

/* --------------------------------------------------------------------------
   3.6 Button Styles - Link Primary
   -------------------------------------------------------------------------- */

/**
 * Link-style button (primary color)
 * Transparent background, acts as text link with icon
 */
.btn-link-pri .elementor-button {
    background: transparent;
    border: none;
    font-weight: 400 !important;
    text-align: left;
}

.btn-link-pri .elementor-button,
.btn-link-pri .elementor-button:visited {
    color: var(--e-global-color-2083e01, #4A606D) !important;
}

.btn-link-pri .elementor-button .elementor-button-icon {
    color: var(--e-global-color-390af49, #B69E81) !important;
}

.btn-link-pri:hover .elementor-button {
    background: transparent;
    color: var(--e-global-color-a9ecb19, #3B464E) !important;
    border: none;
}

/* --------------------------------------------------------------------------
   3.6b Button Styles - Link Disabled
   -------------------------------------------------------------------------- */

/**
 * Link-style button (primary color)
 * Transparent background, acts as text link with icon
 */
.btn-link-disabled .elementor-button {
    background: transparent;
    border: none;
    font-weight: 400 !important;
    text-align: left;
}

.btn-link-disabled .elementor-button,
.btn-link-disabled .elementor-button:visited {
    color: var(--e-global-color-7eb530a, #D6D6D6) !important;
}

.btn-link-disabled .elementor-button .elementor-button-icon {
    color: var(--e-global-color-7eb530a, #D6D6D6) !important;
}

.btn-link-disabled:hover .elementor-button {
    background: transparent;
    color: var(--e-global-color-7eb530a, #D6D6D6) !important;
    border: none;
}

/* --------------------------------------------------------------------------
   3.7 Button Styles - Link Primary with Outline
   -------------------------------------------------------------------------- */

/**
 * Link button with border
 * Combines link styling with subtle border
 */
.btn-link-pri-outline .elementor-button {
    background: transparent;
    border: 2px solid var(--e-global-color-92e79ed, #C8D4DA);
    font-weight: 400 !important;
}

.btn-link-pri-outline .elementor-button,
.btn-link-pri-outline .elementor-button:visited {
    color: var(--e-global-color-2083e01, #4A606D) !important;
}

.btn-link-pri-outline .elementor-button .elementor-button-icon {
    color: var(--e-global-color-390af49, #B69E81) !important;
}

.btn-link-pri-outline:hover .elementor-button {
    background: var(--Colors-Chiswick-blue-50, #F2F5F7);
    color: var(--e-global-color-a9ecb19, #3B464E) !important;
}

/* --------------------------------------------------------------------------
   3.8 Button Styles - Link Secondary
   -------------------------------------------------------------------------- */

/**
 * Link-style button (secondary color)
 * Alternative color scheme for link buttons
 */
.btn-link-sec .elementor-button {
    background: transparent;
    border: none;
}

.btn-link-sec .elementor-button,
.btn-link-sec .elementor-button:visited {
    color: var(--e-global-color-128409c, #9A775C) !important;
}

.btn-link-sec:hover .elementor-button {
    background: transparent;
    color: var(--e-global-color-2f7b41e, #80604E) !important;
    border: none;
}

/* --------------------------------------------------------------------------
   3.9 Button States - Focus
   -------------------------------------------------------------------------- */

/**
 * Focus state styling for accessibility
 * Visible focus ring for keyboard navigation
 */
.btn-pri:focus .elementor-button,
.btn-sec-gray:focus .elementor-button,
.btn-sec-full:focus .elementor-button {
    box-shadow: 0px 0px 0px 1px rgba(15, 15, 15, 0.18) inset,
    0px -2px 0px 0px rgba(15, 15, 15, 0.05) inset,
    0px 1px 2px 0px rgba(15, 15, 15, 0.05),
    0px 0px 0px 2px #FFF,
    0px 0px 0px 4px var(--Colors-Effects-Focus-rings-focus-ring, #A78868);
}

/* --------------------------------------------------------------------------
   3.10 Button Sizes
   -------------------------------------------------------------------------- */

/**
 * Button size variants
 * Consistent spacing and border radius across sizes
 */

/* 2XL - Largest button size */
.btn-2xl .elementor-button {
    padding: 1rem 1.375rem;
    border-radius: 10px;
    gap: 0.5rem;
}

/* XL - Extra large */
.btn-xl .elementor-button {
    padding: 0.75rem 1.125rem;
    border-radius: 8px;
    gap: 0.375rem;
}

/* Large */
.btn-lg .elementor-button {
    padding: 0.625rem 1rem;
    border-radius: 8px;
    gap: 0.375rem;
}

/* Medium - Default size */
.btn-md .elementor-button {
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    gap: 0.25rem;
}

/* Small */
.btn-sm .elementor-button {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    gap: 0.25rem;
}

/* Link buttons - No padding */
.btn-link-pri .elementor-button,
.btn-link-sec .elementor-button,
.btn-link-disabled .elementor-button {
    padding: 0;
    border: none;
}

/* Link button with outline */
.btn-link-pri-outline .elementor-button {
    padding: 0.5rem 0.75rem;
}

/* --------------------------------------------------------------------------
   3.11 Button Typography
   -------------------------------------------------------------------------- */

/**
 * Button text styling
 * Ensures proper alignment and sizing
 */
.elementor-button-text {
    display: inline-flex;
    align-items: center;
}

/* 2XL button text: 16px → 18px */
.btn-2xl .elementor-button-text {
    font-size: clamp(1rem, 0.9423rem + 0.2564vw, 1.125rem);
    line-height: 1.55em;
}

/* XL and Large button text: 16px */
.btn-xl .elementor-button-text,
.btn-lg .elementor-button-text {
    font-size: 1rem;
    line-height: 1.5em;
}

/* Medium and Small button text: 14px */
.btn-md .elementor-button-text,
.btn-sm .elementor-button-text {
    font-size: 0.875rem;
    line-height: 1.42em;
}

/* --------------------------------------------------------------------------
   3.12 Button Icons
   -------------------------------------------------------------------------- */

/**
 * Icon sizing for different button sizes
 * Icons inherit color from button text
 */
.elementor-button .elementor-button-icon {
    color: inherit;
}

/* 2XL icons */
.btn-2xl .elementor-button .elementor-button-icon {
    font-size: 24px;
}

/* XL and Large icons */
.btn-xl .elementor-button .elementor-button-icon,
.btn-lg .elementor-button .elementor-button-icon {
    font-size: 1.25rem;
}

/* Medium and Small icons */
.btn-md .elementor-button .elementor-button-icon,
.btn-sm .elementor-button .elementor-button-icon {
    font-size: 1.125rem;
}

/* Check button - Hide icon */
.btn-check .elementor-button .elementor-button-icon {
    color: transparent;
}

/* --------------------------------------------------------------------------
   3.13 Button Shadows
   -------------------------------------------------------------------------- */

/**
 * Extra small shadow
 * Subtle depth for buttons
 */
.shadow-xs .elementor-button {
    box-shadow: 0px 0px 0px 1px rgba(15, 15, 15, 0.18) inset,
    0px -2px 0px 0px rgba(15, 15, 15, 0.05) inset,
    0px 1px 2px 0px rgba(15, 15, 15, 0.05);
}

/* --------------------------------------------------------------------------
   3.14 Button State Fixes (Visited State)
   -------------------------------------------------------------------------- */

/**
 * Fix for white button on click issue
 * Prevents visited state from overriding button colors
 * CRITICAL: This fixes the issue where buttons turn white after clicking
 */
.elementor-button:link,
.elementor-button:visited,
.elementor-button:hover,
.elementor-button:active,
.elementor-button:focus {
    color: inherit;
}

/* Specific override for visited state */
.elementor-button:visited {
    color: inherit !important;
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.1 Font Styles
   -------------------------------------------------------------------------- */

/**
 * Light italic text utility
 * For subtle emphasis in content
 */
.lightitalic {
    font-weight: 300;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   4.2 Headings in Content Areas
   -------------------------------------------------------------------------- */

/**
 * Base heading styles for content areas
 * Applies to post content and text editor widgets
 */
.elementor-widget-theme-post-content :is(h1, h2, h3, h4, h5, h6),
.elementor-widget-text-editor :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--e-global-typography-ae1ef41-font-family, sans-serif);
    color: var(--e-global-color-text);
    letter-spacing: 1.25px;
    font-weight: 400;
    line-height: 1.2;
}

/**
 * Spacing before headings
 * Adds padding when heading follows a paragraph
 */
.elementor-widget-text-editor p + :is(h1, h2, h3, h4, h5, h6) {
    padding-top: 20px;
}

/* Un-nested for pre-processor compatibility */
.elementor-widget-theme-post-content :is(p, ol, ul) + :is(h1, h2),
.elementor-widget-text-editor :is(p, ol, ul) + :is(h1, h2) {
    padding-top: 2.75rem;
}

.elementor-widget-theme-post-content :is(p, ol, ul) + :is(h3, h4, h5, h6),
.elementor-widget-text-editor :is(p, ol, ul) + :is(h3, h4, h5, h6) {
    padding-top: 1.5rem;
}

/**
 * Heading sizes with responsive scaling
 */

/* H2: 36px → 48px */
.elementor-widget-theme-post-content h2,
.elementor-widget-text-editor h2 {
  font-size: clamp(1.875rem, 1.7019rem + 0.7692vw, 2.25rem); /* min: 30px, max: 36px */
}

/* H3: 30px → 36px */
.elementor-widget-theme-post-content h3,
.elementor-widget-text-editor h3 {
  font-size: clamp(1.5rem, 1.3269rem + 0.7692vw, 1.875rem); /* min: 24px, max: 30px */
}

/* H4 and H3 in treatment content: 24px → 30px */
.elementor-widget-theme-post-content h4,
.elementor-widget-text-editor h4,
.treatment-content .elementor-widget-text-editor h3,
.elementor-widget-theme-post-content h3 {
  font-family: 'ivypresto-headline', serif;
  font-size: clamp(1.125rem, 0.9519rem + 0.7692vw, 1.5rem); /* min: 18px, max: 24px */
}

/* H5: 20px → 24px */
.elementor-widget-theme-post-content h5,
.elementor-widget-text-editor h5 {
    font-size: clamp(1.125rem, 0.9519rem + 0.7692vw, 1.5rem); /* min: 18px, max: 24px */
}

/* --------------------------------------------------------------------------
   4.3 Lists - Ordered & Unordered
   -------------------------------------------------------------------------- */

/**
 * List spacing and indentation
 */
.elementor-widget-theme-post-content ol,
.elementor-widget-theme-post-content ul,
.elementor-widget-text-editor ol,
.elementor-widget-text-editor ul {
    padding-inline-start: 1rem;
    padding-block-end: 1rem;
}

/**
 * Ordered list styling
 * Colored numbers with spacing between items
 */
.elementor-widget-text-editor ol li {
    margin-bottom: 0.5rem;
}

.elementor-widget-theme-post-content ol li::marker,
.elementor-widget-text-editor ol li::marker {
    color: var(--e-global-color-390af49);
    font-weight: 600;
}

/**
 * Unordered list styling
 * Colored bullets
 */
.elementor-widget-theme-post-content ul li::marker,
.elementor-widget-text-editor ul li::marker {
    color: var(--e-global-color-390af49);
}


/* ==========================================================================
   5. GENERAL STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 Links & Underlines
   -------------------------------------------------------------------------- */

/**
 * Underline links within paragraph text on hover
 * Improves link visibility and user experience
 */

/* Text editor widgets */
.elementor-widget-text-editor p a:hover {
    text-decoration: underline;
}

/* General content areas */
.entry-content p a:hover,
.post-content p a:hover,
.page-content p a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5.2 Layout Utilities
   -------------------------------------------------------------------------- */

/**
 * Maximum height utility
 */
.max-h-680 {
    max-height: 43rem;
}

/**
 * Remove padding from listing grid items
 */
.nopadding .jet-listing-grid__item {
    padding: 0 !important;
}

/**
 * Full-width images in links
 */
.fullwidth-img a {
    width: 100%;
}

/**
 * Text alignment
 */
.text-centred {
    text-align: center;
}

/* --------------------------------------------------------------------------
   5.3 Gallery Specific
   -------------------------------------------------------------------------- */

/**
 * Display flex for gallery items with links
 */
.dispflex a {
    display: flex;
}

.dispflex a picture {
    display: contents;
}

/* --------------------------------------------------------------------------
   5.4 Miscellaneous
   -------------------------------------------------------------------------- */

/**
 * Breadcrumbs icon alignment
 */
.jet-blocks-icon {
    display: inline-block;
    line-height: 1;
    text-align: center;
    padding-top: 7px;
}


/* ==========================================================================
   6. COLORS
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1 Color Utilities
   -------------------------------------------------------------------------- */

/**
 * Secondary color utilities
 */
.color-sec,
.color-sec-sb,
.link-sec a {
    color: var(--e-global-color-128409c, #9A775C);
}

/**
 * Semi-bold variants
 */
.color-sec-sb,
.color-pri-sb {
    font-weight: 600;
}

/**
 * Primary color utilities
 */
.color-pri-600,
.color-pri-sb {
    color: var(--e-global-color-2083e01, #4A606D);
}


/* ==========================================================================
   7. ACCORDIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   7.1 Accordion Styling
   -------------------------------------------------------------------------- */

/**
 * Remove first border from accordion
 * Cleaner appearance for first item
 */
.e-n-accordion-item-title[data-accordion-index="1"] {
    border-top: none !important;
}

/**
 * Accordion icon sizing
 * Ensures consistent icon appearance
 */
.elementor-accordion .elementor-accordion-icon {
    font-size: 1.2em !important;
    width: auto;
    height: auto;
}


/* ==========================================================================
   8. EDITOR OVERRIDES
   ========================================================================== */

/* --------------------------------------------------------------------------
   8.1 WordPress Editor Styles
   -------------------------------------------------------------------------- */

/**
 * Fix for editor contrast
 * Makes editor controls more visible
 */
.mce-container .wp-link-input input,
.mce-container label {
    color: #888 !important;
}


/* ==========================================================================
   END OF STYLESHEET
   ========================================================================== */