/* Import Loading Component Styles */
@import url('../../components/loading/component-loading.css');

/* Font Face Declarations */
@font-face {
    font-family: 'Termina';
    src: url('../fonts/Termina Test/TerminaTest-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Termina';
    src: url('../fonts/Termina Test/TerminaTest-ExtraLight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Termina';
    src: url('../fonts/Termina Test/TerminaTest-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Termina';
    src: url('../fonts/Termina Test/TerminaTest-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Termina';
    src: url('../fonts/Termina Test/TerminaTest-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Termina';
    src: url('../fonts/Termina Test/TerminaTest-Demi.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Termina';
    src: url('../fonts/Termina Test/TerminaTest-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Termina';
    src: url('../fonts/Termina Test/TerminaTest-Heavy.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Termina';
    src: url('../fonts/Termina Test/TerminaTest-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* AnySmart Website - Shared CSS */
/* This file contains only truly shared styles across all pages */

/* Reset and Base Styles - SHARED */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px; /* Base font size for rem calculations */
    scroll-behavior: smooth;
    /* Allow overflow for mobile menus but prevent horizontal page scroll */
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden; /* Prevent horizontal scroll on body only */
    background: #ffffff;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent; /* Remove blue highlight on mobile taps */
    font-size: 1rem; /* Use relative unit */
    max-width: 100vw; /* Ensure body doesn't exceed viewport width */
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.page-header h1,
.testimonial-title,
.insights-title,
.partners-title,
.logo-main,
.logo-sub,
.title-accent,
.title-emphasis {
    font-family: 'Termina', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

p, span, div, 
.hero-description,
.section-description,
.feature-content,
.testimonial-item blockquote,
.testimonial-item cite,
.insight-meta,
.nav-link,
.btn,
.section-label {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Improve touch targets for mobile */
@media (max-width: 768px) {
    * {
        /* Ensure all clickable elements have minimum 44px touch targets */
        min-height: inherit;
    }
    
    body {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

/* Container with responsive padding - SHARED */
.container {
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

@media (max-width: 768px) {
    .container {
        padding: 0 0.9375rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 0.625rem;
    }
}

/* Loading Overlay Styles - SHARED */
body.loading {
    overflow: hidden;
}

body.loading > *:not(#loading-overlay) {
    opacity: 0;
    pointer-events: none;
}

/* Button Styles - SHARED */
.btn {
    padding: 0.9375rem 1.875rem;
    border: none;
    border-radius: 1.5625rem;
    font-size: clamp(0.8rem, 0.875vw, 0.875rem);
    font-weight: 500;
    letter-spacing: 0.0625rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    min-height: 2.75rem; /* Improved touch target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background: transparent;
    color: white;
    border: 0.0625rem solid rgba(255, 255, 255, 0.5);
}

.btn-primary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 0.0625rem solid rgba(255, 255, 255, 0.5);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
}

.btn-outline {
    background: transparent;
    border: 0.0625rem solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.75rem 1.5625rem;
    margin: 1.5625rem auto 0 auto;
    border-radius: 6.25rem;
    font-size: clamp(0.7rem, 0.75vw, 0.75rem);
    font-weight: 500;
    letter-spacing: 0.0625rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    text-align: center;
    min-height: 2.75rem;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Mobile button improvements */
@media (max-width: 768px) {
    .btn {
        padding: 1rem 1.75rem;
        font-size: clamp(0.75rem, 0.8125vw, 0.8125rem);
        min-height: 3rem; /* Larger touch targets on mobile */
    }
    
    .btn-outline {
        padding: 0.875rem 1.375rem;
        font-size: clamp(0.65rem, 0.6875vw, 0.6875rem);
        min-height: 2.875rem;
    }
}

/* General Page Header Styles - SHARED */
.page-header {
    background: linear-gradient(135deg, #00231f 0%, #00231f 100%);
    padding: 9.375rem 0 6.25rem;
    text-align: center;
    color: white;
}

.page-header h1 {
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    margin-bottom: 1.25rem;
}

.page-header p {
    font-size: clamp(1rem, 1.125vw, 1.125rem);
    opacity: 0.9;
}

@media (max-width: 768px) {
    .page-header {
        padding: 7.5rem 0 5rem;
    }
    
    .page-header h1 {
        font-size: clamp(1.8rem, 2.2vw, 2.2rem);
    }
    
    .page-header p {
        font-size: clamp(0.9rem, 1vw, 1rem);
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: 6.25rem 0 3.75rem;
    }
    
    .page-header h1 {
        font-size: clamp(1.6rem, 1.8vw, 1.8rem);
    }
    
    .page-header p {
        font-size: clamp(0.8rem, 0.875vw, 0.875rem);
    }
}

/* Section Labels and Titles - SHARED */
.section-label {
    color: #e74c3c;
    font-size: clamp(0.7rem, 0.75vw, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    display: block;
}

.section-title {
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    color: #2c3e50;
    line-height: 1.2;
    margin-bottom: 1.875rem;
}

.title-accent {
    font-style: normal;
    font-weight: 500;
}

.section-description {
    font-size: clamp(0.9rem, 1vw, 1rem);
    color: #5a6c7d;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .section-label {
        font-size: clamp(0.65rem, 0.6875vw, 0.6875rem);
        letter-spacing: 0.09375rem;
        margin-bottom: 0.9375rem;
    }
    
    .section-title {
        font-size: clamp(1.8rem, 2.2vw, 2.2rem);
        margin-bottom: 1.5625rem;
    }
    
    .section-description {
        font-size: clamp(0.85rem, 0.9375vw, 0.9375rem);
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .section-label {
        font-size: clamp(0.6rem, 0.625vw, 0.625rem);
        letter-spacing: 0.0625rem;
    }
    
    .section-title {
        font-size: clamp(1.6rem, 1.8vw, 1.8rem);
        margin-bottom: 1.25rem;
    }
    
    .section-description {
        font-size: clamp(0.8rem, 0.875vw, 0.875rem);
    }
}

/* Custom Scrollbar - SHARED */
::-webkit-scrollbar {
    width: 0.5rem;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #00231f;
    border-radius: 0.25rem;
}

::-webkit-scrollbar-thumb:hover {
    background: #00231f;
}