/*
 * Roberto Pinto Marketing — Mobile UX/UI System
 * ----------------------------------------------
 * Design system override for mobile (< 768px) + tablet refinements.
 * Loaded after Elementor CSS via wp_enqueue_style with high priority.
 *
 * Principles:
 * - 8pt spacing scale
 * - Mobile-first typography (17px body min, 36px display max on mobile)
 * - Touch targets >= 44x44px
 * - Consistent lateral margins (20px mobile, 40px tablet, 80px desktop)
 * - Backdrop blur for overlays
 * - Reduced motion respected
 *
 * Author: prepared for rpintomarketing.com
 */

/* ============================================================
   DESIGN TOKENS — applied site-wide as CSS variables
   ============================================================ */
:root {
    /* Spacing scale (8pt) */
    --rp-space-xs: 8px;
    --rp-space-sm: 16px;
    --rp-space-md: 24px;
    --rp-space-lg: 40px;
    --rp-space-xl: 64px;
    --rp-space-2xl: 96px;
    --rp-space-3xl: 128px;

    /* Lateral container margins (responsive) */
    --rp-margin-side: 20px;

    /* Touch target minimum */
    --rp-touch-min: 44px;

    /* Typography scale (mobile defaults — overridden up) */
    --rp-fs-display: 36px;
    --rp-fs-h1: 32px;
    --rp-fs-h2: 28px;
    --rp-fs-h3: 22px;
    --rp-fs-h4: 18px;
    --rp-fs-body-lg: 17px;
    --rp-fs-body: 16px;
    --rp-fs-caption: 13px;

    /* Line heights */
    --rp-lh-tight: 1.2;
    --rp-lh-snug: 1.4;
    --rp-lh-normal: 1.6;
    --rp-lh-relaxed: 1.75;

    /* Letter spacing */
    --rp-tracking-tight: -0.02em;
    --rp-tracking-normal: 0;
    --rp-tracking-wide: 0.05em;
    --rp-tracking-uppercase: 0.15em;

    /* Brand colors (reference — actual values may differ in Elementor kit) */
    --rp-color-bg: #000613;
    --rp-color-bg-soft: #0a0a1a;
    --rp-color-fg: #f5f1e8;
    --rp-color-fg-muted: rgba(245, 241, 232, 0.7);
    --rp-color-fg-faint: rgba(245, 241, 232, 0.5);
    --rp-color-accent: #c8a564;
    --rp-color-accent-soft: rgba(200, 165, 100, 0.3);
    --rp-color-border: rgba(245, 241, 232, 0.1);

    /* Borders + radius */
    --rp-radius-sm: 4px;
    --rp-radius-md: 8px;
    --rp-radius-lg: 16px;

    /* Shadows (subtle, premium) */
    --rp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --rp-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --rp-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.5);

    /* Transitions */
    --rp-trans-fast: 150ms ease-out;
    --rp-trans-normal: 250ms ease-out;
    --rp-trans-slow: 400ms ease-out;
}

/* Tablet refinements */
@media (min-width: 768px) {
    :root {
        --rp-margin-side: 40px;
        --rp-fs-display: 56px;
        --rp-fs-h1: 48px;
        --rp-fs-h2: 40px;
        --rp-fs-h3: 26px;
        --rp-fs-h4: 20px;
        --rp-fs-body-lg: 18px;
        --rp-fs-body: 16px;
        --rp-fs-caption: 14px;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    :root {
        --rp-margin-side: 80px;
        --rp-fs-display: 72px;
        --rp-fs-h1: 56px;
        --rp-fs-h2: 48px;
        --rp-fs-h3: 32px;
        --rp-fs-h4: 22px;
        --rp-fs-body-lg: 20px;
        --rp-fs-body: 17px;
        --rp-fs-caption: 14px;
    }
}


/* ============================================================
   MOBILE OVERRIDES — apply where Elementor falls short
   ============================================================ */
@media (max-width: 767px) {

    /* ---- Body baseline ---- */
    body {
        font-size: var(--rp-fs-body);
        line-height: var(--rp-lh-normal);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* ---- Lateral margins on every section ---- */
    .elementor-section .elementor-container {
        padding-left: var(--rp-margin-side);
        padding-right: var(--rp-margin-side);
    }

    /* ---- Top/bottom section padding (vertical rhythm) ---- */
    .elementor-section.elementor-top-section {
        padding-top: var(--rp-space-xl);
        padding-bottom: var(--rp-space-xl);
    }
    .elementor-section.elementor-top-section.rp-hero {
        padding-top: var(--rp-space-2xl);
        padding-bottom: var(--rp-space-2xl);
    }

    /* ---- Typography overrides ---- */
    .elementor-widget-heading h1,
    .elementor-widget-heading h2,
    .elementor-widget-heading h3,
    .elementor-widget-heading h4,
    .elementor-widget-heading h5,
    .elementor-widget-heading h6 {
        font-size: revert; /* let kit apply, but constrain below */
    }

    .elementor-heading-title.elementor-size-xxl,
    .elementor-heading-title.elementor-size-xl {
        font-size: var(--rp-fs-display) !important;
        line-height: var(--rp-lh-tight) !important;
        letter-spacing: var(--rp-tracking-tight) !important;
    }
    .elementor-heading-title.elementor-size-large,
    h1.elementor-heading-title {
        font-size: var(--rp-fs-h1) !important;
        line-height: var(--rp-lh-tight) !important;
    }
    .elementor-heading-title.elementor-size-medium,
    h2.elementor-heading-title {
        font-size: var(--rp-fs-h2) !important;
        line-height: var(--rp-lh-snug) !important;
    }
    .elementor-heading-title.elementor-size-small,
    h3.elementor-heading-title {
        font-size: var(--rp-fs-h3) !important;
        line-height: var(--rp-lh-snug) !important;
    }
    h4.elementor-heading-title {
        font-size: var(--rp-fs-h4) !important;
        line-height: var(--rp-lh-snug) !important;
    }

    /* Text editor / body */
    .elementor-widget-text-editor,
    .elementor-widget-text-editor p,
    .elementor-widget-text-editor li {
        font-size: var(--rp-fs-body) !important;
        line-height: var(--rp-lh-normal) !important;
    }

    /* ---- Buttons: minimum 56px tall, full width with margin ---- */
    .elementor-button {
        min-height: 56px !important;
        padding: 16px 32px !important;
        font-size: var(--rp-fs-body) !important;
        letter-spacing: var(--rp-tracking-wide) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .elementor-widget-button .elementor-button-wrapper {
        display: block;
    }
    .elementor-widget-button .elementor-button-link {
        display: block;
        width: 100%;
    }

    /* ---- Social icons + small touch targets ---- */
    .elementor-widget-social-icons .elementor-social-icon,
    .elementor-widget-icon-list .elementor-icon-list-icon,
    a[class*="icon"] {
        min-width: var(--rp-touch-min);
        min-height: var(--rp-touch-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .elementor-widget-social-icons .elementor-grid {
        gap: var(--rp-space-sm) !important;
    }

    /* ---- Spacing between widgets ---- */
    .elementor-column .elementor-widget:not(:last-child) {
        margin-bottom: var(--rp-space-md);
    }

    /* ---- Image responsive ---- */
    .elementor-widget-image img,
    .elementor-widget-video video,
    .elementor-widget-video iframe {
        max-width: 100%;
        height: auto;
    }

    /* ---- Form fields: 48px tall ---- */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea,
    select,
    .elementor-field-textual {
        min-height: 48px !important;
        font-size: 16px !important; /* 16px prevents iOS zoom on focus */
        padding: 12px 16px !important;
        border-radius: var(--rp-radius-sm) !important;
    }

    textarea,
    textarea.elementor-field-textual {
        min-height: 120px !important;
    }

    /* Checkbox + label touch friendly */
    .elementor-field-type-checkbox label,
    .elementor-field-type-acceptance label {
        font-size: var(--rp-fs-body) !important;
        line-height: var(--rp-lh-snug) !important;
        padding-left: var(--rp-space-sm);
        position: relative;
        cursor: pointer;
        min-height: var(--rp-touch-min);
        display: flex;
        align-items: center;
    }
    .elementor-field-type-checkbox input[type="checkbox"],
    .elementor-field-type-acceptance input[type="checkbox"] {
        width: 24px !important;
        height: 24px !important;
        margin-right: var(--rp-space-sm);
        cursor: pointer;
        accent-color: var(--rp-color-accent);
    }

    /* ---- Header: tighter padding ---- */
    header.elementor-location-header,
    .elementor-location-header .elementor-section {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Logo size on mobile */
    .elementor-widget-image.rp-logo img,
    header .elementor-widget-image img {
        max-height: 40px;
        width: auto;
    }

    /* ---- Hamburger menu: bigger target ---- */
    .elementor-menu-toggle {
        min-width: var(--rp-touch-min) !important;
        min-height: var(--rp-touch-min) !important;
        padding: 8px !important;
    }
    .elementor-menu-toggle svg,
    .elementor-menu-toggle i {
        font-size: 24px !important;
        width: 28px !important;
        height: 28px !important;
    }

    /* ---- Mobile dropdown menu: slide-in feel ---- */
    .elementor-nav-menu--dropdown {
        background: var(--rp-color-bg) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: var(--rp-space-md) var(--rp-margin-side) !important;
        animation: rpSlideDown var(--rp-trans-normal);
    }
    .elementor-nav-menu--dropdown li.menu-item {
        border-bottom: 1px solid var(--rp-color-border);
    }
    .elementor-nav-menu--dropdown li.menu-item:last-child {
        border-bottom: none;
    }
    .elementor-nav-menu--dropdown li.menu-item > a {
        padding: var(--rp-space-md) 0 !important;
        font-size: var(--rp-fs-body-lg) !important;
        letter-spacing: var(--rp-tracking-wide) !important;
        min-height: var(--rp-touch-min);
        display: flex !important;
        align-items: center;
    }
    /* Language flags as last item, visually separated */
    .elementor-nav-menu--dropdown li.rpinto-lang-flags {
        margin-top: var(--rp-space-md);
        padding-top: var(--rp-space-md);
        border-top: 1px solid var(--rp-color-accent-soft) !important;
        border-bottom: none !important;
    }
    .elementor-nav-menu--dropdown li.rpinto-lang-flags a {
        padding: var(--rp-space-sm) 0 !important;
        display: inline-flex !important;
        gap: var(--rp-space-sm);
    }

    /* ---- Hero section refinements ---- */
    .rp-hero h1,
    .elementor-section.elementor-top-section:first-of-type h1 {
        font-size: var(--rp-fs-display) !important;
        line-height: var(--rp-lh-tight) !important;
        margin-bottom: var(--rp-space-md);
    }
    .rp-hero p,
    .elementor-section.elementor-top-section:first-of-type .elementor-widget-text-editor p {
        font-size: var(--rp-fs-body-lg) !important;
        line-height: var(--rp-lh-relaxed) !important;
        margin-bottom: var(--rp-space-lg);
    }

    /* ---- Accordion / Tabs (the Consultancy modalities) ---- */
    .elementor-widget-tabs .elementor-tabs-wrapper,
    .elementor-widget-accordion .elementor-accordion {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .elementor-tab-title,
    .elementor-accordion-item .elementor-tab-title {
        padding: var(--rp-space-md) var(--rp-space-sm) !important;
        font-size: var(--rp-fs-body-lg) !important;
        border-bottom: 1px solid var(--rp-color-accent-soft) !important;
        cursor: pointer;
        min-height: var(--rp-touch-min);
        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }
    .elementor-tab-content {
        padding: var(--rp-space-md) var(--rp-space-sm) var(--rp-space-lg) !important;
        font-size: var(--rp-fs-body) !important;
        line-height: var(--rp-lh-normal) !important;
    }

    /* ---- USP cards stack ---- */
    .elementor-column.rp-usp-card,
    [class*="rp-usp"] .elementor-column {
        background: var(--rp-color-bg-soft);
        border: 1px solid var(--rp-color-accent-soft);
        border-radius: var(--rp-radius-md);
        padding: var(--rp-space-lg) !important;
        margin-bottom: var(--rp-space-md);
    }

    /* ---- Spacing between major sections ---- */
    section.elementor-top-section + section.elementor-top-section {
        margin-top: 0; /* sections already have their padding */
    }

    /* ---- Footer mobile ---- */
    footer.elementor-location-footer .elementor-section {
        padding-top: var(--rp-space-xl) !important;
        padding-bottom: var(--rp-space-lg) !important;
    }
    footer.elementor-location-footer .elementor-column {
        margin-bottom: var(--rp-space-lg);
    }
    footer.elementor-location-footer .elementor-column:last-child {
        margin-bottom: 0;
    }

    /* Footer text smaller, centered */
    footer.elementor-location-footer p,
    footer.elementor-location-footer .elementor-widget-text-editor {
        font-size: var(--rp-fs-body) !important;
        line-height: var(--rp-lh-normal) !important;
        text-align: center !important;
    }
    footer.elementor-location-footer .elementor-heading-title {
        text-align: center !important;
    }

    /* Footer nav links: full width tap, centered */
    footer.elementor-location-footer .elementor-nav-menu li > a,
    footer.elementor-location-footer .elementor-icon-list-item {
        font-size: var(--rp-fs-body) !important;
        padding: var(--rp-space-sm) 0 !important;
        text-align: center !important;
        display: block;
        min-height: var(--rp-touch-min);
        line-height: var(--rp-touch-min);
    }

    /* Logo in footer centered */
    footer.elementor-location-footer .elementor-widget-image {
        text-align: center;
    }
    footer.elementor-location-footer .elementor-widget-image img {
        max-height: 80px;
        width: auto;
        margin: 0 auto var(--rp-space-md);
    }

    /* ---- Disable horizontal scroll (mobile common bug) ---- */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* ---- Animations: subtle fade-in on scroll ---- */
    @media (prefers-reduced-motion: no-preference) {
        .elementor-widget {
            /* opacity: 0; */ /* removed - was breaking widgets */
            /* transform: translateY(8px); */ /* removed */
            transition: opacity 400ms ease-out, transform 400ms ease-out;
        }
        .elementor-widget.rp-in-view,
        .elementor-widget.elementor-invisible {
            opacity: 1;
            transform: translateY(0);
        }
        /* Reduce delay since stagger can feel slow on mobile */
        .elementor-widget {
            transition-delay: 0ms !important;
        }
    }
}


/* ============================================================
   TABLET REFINEMENTS (768px – 1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-section .elementor-container {
        padding-left: var(--rp-margin-side);
        padding-right: var(--rp-margin-side);
    }

    .elementor-section.elementor-top-section {
        padding-top: var(--rp-space-2xl);
        padding-bottom: var(--rp-space-2xl);
    }

    /* Two-column USP cards on tablet */
    .rp-usp-grid .elementor-column {
        flex-basis: calc(50% - var(--rp-space-md)) !important;
    }
}


/* ============================================================
   DESKTOP REFINEMENTS (>= 1025px) — slight polish, not overhaul
   ============================================================ */
@media (min-width: 1025px) {
    .elementor-section.elementor-top-section {
        padding-top: var(--rp-space-3xl);
        padding-bottom: var(--rp-space-3xl);
    }
}


/* ============================================================
   ACCESSIBILITY: focus states, reduced motion, high contrast
   ============================================================ */
:focus-visible {
    outline: 2px solid var(--rp-color-accent);
    outline-offset: 3px;
    border-radius: var(--rp-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes rpSlideDown {
    from {
        /* opacity: 0; */ /* removed - was breaking widgets */
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rpFadeIn {
    from { /* opacity: 0; */ /* removed - was breaking widgets */ }
    to { opacity: 1; }
}


/* ============================================================
   PRINT STYLES (minor — useful for PDF exports of cases)
   ============================================================ */
@media print {
    .elementor-location-header,
    .elementor-location-footer,
    .elementor-menu-toggle,
    #wpadminbar {
        display: none !important;
    }
    body {
        font-size: 11pt;
        line-height: 1.5;
        color: #000;
    }
}