/* ============================================================
   REMECO.SK — Global CSS Variables & Base Styles
   Extrahované z aktualna/styles.css
   ============================================================ */

/* ============= CSS CUSTOM PROPERTIES ============= */
:root {
    /* === FARBY (Colors) === */

    /* Primárna oranžová paleta */
    --color-primary: #ff6b35;
    --color-primary-dark: #e55a2b;
    --color-primary-darker: #c43f26;
    --color-primary-alt: #DB4A2B;
    --color-primary-hover: #d14826;
    --color-black: black;

    /* Primárna s opacity */
    --color-primary-10: rgba(255, 107, 53, 0.1);
    --color-primary-20: rgba(255, 107, 53, 0.2);
    --color-primary-30: rgba(255, 107, 53, 0.3);
    --color-primary-40: rgba(255, 107, 53, 0.4);

    /* Alt oranžová s opacity */
    --color-alt-05: rgba(219, 74, 43, 0.05);
    --color-alt-08: rgba(219, 74, 43, 0.08);
    --color-alt-10: rgba(219, 74, 43, 0.1);
    --color-alt-12: rgba(219, 74, 43, 0.12);
    --color-alt-20: rgba(219, 74, 43, 0.2);
    --color-alt-30: rgba(219, 74, 43, 0.3);

    /* Text */
    --color-text-primary: #333;
    --color-text-secondary: #666;
    --color-text-light: #ccc;
    --color-text-white: #fff;

    /* Pozadia */
    --color-bg-white: #fff;
    --color-bg-light: #f8f9fa;
    --color-bg-lighter: #e9ecef;
    --color-bg-dark: #1a1a1a;
    --color-bg-header: rgba(255, 255, 255, 0.95);
    --color-bg-header-mobile: rgba(255, 255, 255, 0.98);

    /* Sociálne siete */
    --color-whatsapp: #25D366;
    --color-whatsapp-hover: #128C7E;
    --color-email: #007BFF;
    --color-email-hover: #0056b3;
    --color-instagram-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

    /* Borders */
    --color-border: #e9ecef;
    --color-border-primary: rgba(255, 107, 53, 0.2);

    /* === TYPOGRAPHY === */
    --font-family: 'Montserrat', sans-serif;
    --line-height: 1.6;
    --line-height-tight: 1.1;
    --line-height-heading: 1.2;
    --line-height-relaxed: 1.4;

    /* Font weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Desktop Typography (1200px+) */
    --font-size-hero-h1: 3.2rem;
    --font-size-section-title: 2.8rem;
    --font-size-hero-subtext: 1.2rem;
    --font-size-hero-stat: 2.0rem;
    --font-size-stat-h3: 3.2rem;
    --font-size-card-h3: 1.5rem;
    --font-size-card-h4: 1.4rem;
    --font-size-btn: 1.1rem;
    --font-size-btn-large: 1.2rem;
    --font-btn-large-pricing: 1rem;
    --font-size-section-subtitle: 1.2rem;
    --font-size-body: 1rem;
    --font-size-small: 0.9rem;
    --font-size-xs: 0.85rem;
    --font-testimonial-mobile: 0.9rem;
    --font-cta-info-mobile: 0.9rem;
    --font-size-btn-large-mobile: 0.85rem;
    --cta-subtitle-text: 0.8rem;
    --font-contact-details: 1rem;
    --font-contact-cta-tablet: 0.95rem;

    /* === SPACING === */
    --container-max-width: 1200px;
    --container-padding: 0 20px;

    /* Section spacing */
    --section-padding: 50px 0;
    --section-padding-stats: 50px 0;
    --section-margin-bottom: 4rem;
    --header-container-padding: 10px 0; /* up/down left/right */

    /* Card spacing */
    --card-padding: 2.5rem;
    --card-padding-mobile: 1.5rem 1rem;

    /* Button spacing */
    --btn-padding: 18px 35px;
    --btn-padding-large: 20px 40px;
    --btn-padding-large-pricing: 10px 20px;
    --btn-padding-mobile: 12px 24px;

    /* Nav spacing */
    --nav-gap: 2rem;
    --nav-gap-tablet: 1rem;
    --nav-link-padding: 0.5rem 1rem;

    /* Grid gaps */
    --grid-gap: 2rem;
    --grid-gap-large: 2.5rem;
    --grid-gap-xl: 3rem;
    --grid-gap-small: 1.5rem;

    /* Footer */
    --footer-padding: 3rem 0;

    /* === BORDER RADIUS === */
    --radius-small: 8px;
    --radius-medium: 10px;
    --radius-card: 15px;
    --radius-large: 20px;
    --radius-nav: 25px;
    --radius-pill: 50px;

    /* === SHADOWS === */
    --shadow-sm: 0 2px 20px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 5px 15px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 20px 40px rgba(219, 74, 43, 0.2);
    --shadow-portfolio: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-portfolio-hover: 0 20px 50px rgba(219, 74, 43, 0.2);
    --shadow-btn: 0 8px 25px rgba(219, 74, 43, 0.4);
    --shadow-btn-hover: 0 12px 35px rgba(219, 74, 43, 0.6);
    --shadow-contact: 0 10px 40px rgba(0, 0, 0, 0.1);
    --shadow-contact-link: 0 4px 15px rgba(255, 107, 53, 0.3);
    --shadow-contact-link-hover: 0 8px 25px rgba(255, 107, 53, 0.4);
    --shadow-gallery: 0 10px 50px rgba(0, 0, 0, 0.5);
    --shadow-nav-mobile: 0 5px 20px rgba(0, 0, 0, 0.1);

    /* Text shadows */
    --text-shadow-hero: 2px 2px 8px rgba(0, 0, 0, 0.8);
    --text-shadow-hero-sub: 1px 1px 4px rgba(0, 0, 0, 0.8);
    --text-shadow-stat: 0 0 10px rgba(219, 74, 43, 0.5);
    --text-shadow-icon: 0 0 20px rgba(219, 74, 43, 0.3);

    /* === TRANSITIONS === */
    --transition-fast: 0.3s;
    --transition-medium: 0.4s;
    --transition-slow: 0.5s;
    --transition-slower: 0.6s;
    --transition-hero: 1.5s ease-in-out;
    --transition-default: all 0.3s;
    --transition-transform: transform 0.3s;
    --transition-opacity: opacity 0.6s ease;

    /* === GRADIENTS === */
    --gradient-btn: linear-gradient(45deg, #ff6b35, #e55a2b);
    --gradient-btn-hover: linear-gradient(45deg, #c43f26, #d14826);
    --gradient-hero-overlay: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.8) 100%);
    --gradient-section-light: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --gradient-section-white: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    --gradient-stats: linear-gradient(135deg, #DB4A2B 0%, #e55a2b 100%);
    --gradient-card: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    --gradient-pricing-accent: linear-gradient(to bottom, #ff6b35, #e55a2b);

    /* === BREAKPOINTS (for reference in media queries) === */
    /* Desktop: 1200px+ */
    /* Tablet: 768px - 1199px */
    /* Mobile: 480px - 767px */
    /* Small Mobile: 0px - 479px */

    /* === Z-INDEX LAYERS === */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-header: 1000;
    --z-floating-cta: 1000;
    --z-modal: 2000;
    --z-modal-close: 2001;

    /* === HEADER === */
    --header-height: 60px;
    --header-padding: 0.5rem 0;
    --header-blur: blur(15px);
    --logo-height: 50px;

    /* === FLOATING CTA === */
    --floating-cta-bottom: 30px;
    --floating-cta-right: 30px;
    --floating-cta-size-mobile: 60px;
    --floating-cta-size-small: 50px;
}

/* ============= BASE RESET ============= */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============= BASE TYPOGRAPHY ============= */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    line-height: var(--line-height);
    color: var(--color-text-primary);
    background: var(--color-bg-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============= CONTAINER ============= */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--container-padding);
}

/* ============= BUTTONS ============= */
.btn {
    display: inline-block;
    background: var(--gradient-btn);
    color: var(--color-text-white);
    padding: var(--btn-padding);
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-btn);
    font-family: var(--font-family);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition-default);
    box-shadow: var(--shadow-btn);
    border: none;
    cursor: pointer;
    /* Button text overflow protection */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.btn:hover {
    background: var(--gradient-btn-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-btn-hover);
}

.btn-secondary {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid var(--color-primary);
    margin-left: 1rem;
}

.btn-secondary:hover {
    background: var(--color-primary-alt);
}

.btn-large {
    padding: var(--btn-padding-large);
    font-size: var(--font-size-btn-large);
    margin: 0.5rem;
}

.btn-large-pricing {
    padding: var(--btn-padding-large-pricing);
    font-size: var(--font-size-btn-large-pricing);
    margin: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ============= SECTION TITLES ============= */
.section-title {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-section-title);
}

.black {
    color: black;
}

.section-subtitle {
    text-align: center;
    font-size: var(--font-size-section-subtitle);
    margin-bottom: var(--section-margin-bottom);
    opacity: 0.8;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-text-secondary);
}

/* ============= LINKS ============= */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-default);
}

a:hover {
    color: var(--color-primary-dark);
}

/* ============= UTILITY CLASSES ============= */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============= SCROLL ANIMATIONS ============= */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition-opacity), var(--transition-transform);
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============= RESPONSIVE TYPOGRAPHY ============= */

/* Tablet: 768px - 1199px */
@media (max-width: 1199px) and (min-width: 768px) {
    :root {
        --font-size-hero-h1: 2.4rem;
        --font-size-section-title: 2.0rem;
        --font-size-hero-subtext: 1.2rem;
        --font-size-hero-stat: 1.6rem;
        --font-size-stat-h3: 2.4rem;
    }
}

/* Mobile: 480px - 767px */
@media (max-width: 767px) {
    :root {
        --font-size-hero-h1: 1.6rem;
        --font-size-section-title: 1.6rem;
        --font-size-hero-subtext: 0.95rem;
        --font-size-hero-stat: 1.4rem;
        --font-size-stat-h3: 1.8rem;
        --font-size-btn: 0.5rem;
        --btn-padding: 12px 24px;
    }

    .btn {
        display: block;
        width: 100%;
        max-width: 250px;
        text-align: center;
        margin: 0.3rem auto;
        white-space: normal;
        /*word-wrap: break-word;*/
    }

    .btn-secondary {
        margin: 0.3rem auto 0 auto;
    }
}

/* Small Mobile: 0px - 479px */
@media (max-width: 479px) {
    :root {
        --font-size-hero-h1: 1.4rem;
        --font-size-section-title: 1.4rem;
        --font-size-hero-subtext: 0.9rem;
        --font-size-hero-stat: 1.2rem;
        --font-size-stat-h3: 1.6rem;
    }
    
    .btn-large {
    font-size: var(--font-size-btn-large-mobile);
    }

    .pricing-cta {
        padding: 1rem 0;
    }
}