/* ============================================
   SIRATIM - GLOBAL STYLES
   ============================================ */

/* CSS Variables - Brand Identity */
:root {
    /* Colors */
    --bg-white: #FFFFFF;
    --brand-red: #A4161A;
    --primary-text: #111111;
    --secondary-text: #4B4B4B;
    --muted-text: #6B6B6B;
    --divider: #EDEDED;
    --bottle-grey: #D9D9D9;
    --shadow: rgba(0, 0, 0, 0.08);
    --hover-shadow: rgba(0, 0, 0, 0.12);
    --reflection-highlight: rgba(255, 255, 255, 0.45);

    /* Typography */
    --font-heading: 'Sora', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    --spacing-xxl: 6rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 18px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Layout */
    --container-max-width: 1200px;
    --header-height: 80px;
    --header-height-scrolled: 70px;
}

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

/* Prevent horizontal overflow globally */
*,
*::before,
*::after {
    max-width: 100%;
}

/* Ensure all sections respect viewport */
section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* Hide any unwanted pseudo-elements on right side */
section::after,
section::before {
    display: none !important;
}

/* Prevent any content from appearing on right side */
.container {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

.container::after,
.container::before {
    display: none !important;
}

/* Hide scrollbars on all sections and containers */
section,
.container,
.grid-12 {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

section::-webkit-scrollbar,
.container::-webkit-scrollbar,
.grid-12::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
}

/* Ensure no content overflows to right */
* {
    box-sizing: border-box;
}

body > * {
    max-width: 100vw;
    overflow-x: hidden;
}

html {
    font-size: 16px;
    scroll-behavior: auto; /* Let Lenis handle smooth scrolling */
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--primary-text);
    background-color: var(--bg-white);
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    position: relative;
    /* Optimize for smooth scrolling */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Mobile touch optimizations */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Hide horizontal scrollbar but allow scrolling */
body::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}

html::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}

/* Hide any unwanted right-side scrollbars or elements */
section::-webkit-scrollbar,
.container::-webkit-scrollbar,
.grid-12::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-white);
}

::-webkit-scrollbar-thumb {
    background: var(--divider);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--muted-text);
}

/* Hide horizontal scrollbar */
::-webkit-scrollbar:horizontal {
    height: 0px;
    display: none;
}

/* Hide scrollbar on right side but allow scrolling */
body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: transparent;
}

body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Optimize elements that animate on scroll */
[data-scroll],
.gsap-animate {
    will-change: transform, opacity;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    color: var(--primary-text);
    margin-bottom: var(--spacing-sm);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

p {
    margin-bottom: var(--spacing-sm);
    color: var(--secondary-text);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
    /* Mobile touch optimizations */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

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

/* Container - 12 Column Grid System */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    overflow-x: hidden;
    position: relative;
}

/* 12-Column Grid */
.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--spacing-md);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Column Classes */
.col-12 { grid-column: span 12; }
.col-11 { grid-column: span 11; }
.col-10 { grid-column: span 10; }
.col-9 { grid-column: span 9; }
.col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.col-2 { grid-column: span 2; }
.col-1 { grid-column: span 1; }

/* Section Spacing */
.section-padding {
    padding: var(--spacing-xxl) 0;
}

.bg-light {
    background-color: #FAFAFA;
}

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-title {
    margin-bottom: var(--spacing-sm);
}

.section-description {
    font-size: 1.125rem;
    color: var(--muted-text);
    max-width: 600px;
    margin: 0 auto;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.875rem 2rem;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-base);
    border: none;
    background: none;
    /* Mobile touch optimizations */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.btn-primary {
    background: linear-gradient(135deg, #1a1a1a 0%, var(--brand-red) 100%);
    color: var(--bg-white);
    box-shadow: 0 4px 12px var(--shadow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--hover-shadow);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-text);
    border: 2px solid var(--divider);
}

.btn-secondary:hover {
    border-color: var(--brand-red);
    color: var(--brand-red);
}

.btn-large {
    padding: 1.125rem 2.5rem;
    font-size: 1.125rem;
}

/* Cards */
.card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: 0 2px 8px var(--shadow);
    transition: var(--transition-base);
}

.card:hover {
    box-shadow: 0 4px 16px var(--hover-shadow);
    transform: translateY(-4px);
}

/* Responsive - Mobile First */
@media (min-width: 768px) {
    .col-md-12 { grid-column: span 12; }
    .col-md-11 { grid-column: span 11; }
    .col-md-10 { grid-column: span 10; }
    .col-md-9 { grid-column: span 9; }
    .col-md-8 { grid-column: span 8; }
    .col-md-7 { grid-column: span 7; }
    .col-md-6 { grid-column: span 6; }
    .col-md-5 { grid-column: span 5; }
    .col-md-4 { grid-column: span 4; }
    .col-md-3 { grid-column: span 3; }
    .col-md-2 { grid-column: span 2; }
    .col-md-1 { grid-column: span 1; }
}

@media (min-width: 1024px) {
    .col-lg-12 { grid-column: span 12; }
    .col-lg-11 { grid-column: span 11; }
    .col-lg-10 { grid-column: span 10; }
    .col-lg-9 { grid-column: span 9; }
    .col-lg-8 { grid-column: span 8; }
    .col-lg-7 { grid-column: span 7; }
    .col-lg-6 { grid-column: span 6; }
    .col-lg-5 { grid-column: span 5; }
    .col-lg-4 { grid-column: span 4; }
    .col-lg-3 { grid-column: span 3; }
    .col-lg-2 { grid-column: span 2; }
    .col-lg-1 { grid-column: span 1; }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }