/* Monte Paulino - Professional Styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Oswald', sans-serif;
    background: rgba(255, 255, 255, 0);
    color: #163253;
    overflow-x: hidden;
    cursor: url('assets/img/cursor-egg.png') 8 8, auto;
}

/* Interactive elements use a slightly different egg cursor */
a,
button,
input[type="button"],
input[type="submit"],
label,
[role="button"] {
    cursor: url('assets/img/cursor-egg-pointer.png') 8 8, pointer;
}

/* Retina/HiDPI cursors (2x) */
@media (min-resolution: 2dppx) {
    body {
        cursor: url('assets/img/cursor-egg@2x.png') 16 16, auto;
    }
    a,
    button,
    input[type="button"],
    input[type="submit"],
    label,
    [role="button"] {
        cursor: url('assets/img/cursor-egg-pointer@2x.png') 16 16, pointer;
    }
}

/* Typography */
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
}

/* Container max-width */
.container {
    width: 100%;
    max-width: 1440px;
}

/* Smooth transitions */
a,
button,
input,
textarea {
    transition: all 0.3s ease;
}

/* Form elements */
input,
textarea {
    font-family: 'Oswald', sans-serif;
}

input::placeholder,
textarea::placeholder {
    color: #8B6F47;
    opacity: 0.6;
}

input:focus,
textarea:focus {
    outline: none;
}

/* Button styles */
button {
    border: none;
    cursor: pointer;
}

button:active {
    transform: scale(0.98);
}

/* Link styles */
a {
    text-decoration: none;
}

/* Image optimization - Prevent stretching */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Opt-in pixel-perfect scaling */
.pixelated {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* SVG images - maintain aspect ratio */
img[src$=".svg"] {
    object-fit: contain;
}

/* Ensure logos and icons don't stretch */
.logo img,
nav img,
footer img {
    object-fit: contain;
    width: auto;
    height: auto;
}

/* Prevent horizontal scroll */
body,
html {
    overflow-x: hidden;
    max-width: 100vw;
}

section {
    width: 100%;
    max-width: 100vw;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: #bd835e;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a67350;
}

/* Responsive Typography */
@media (max-width: 1024px) {
    h1 {
        font-size: 64px !important;
    }
    
    h2 {
        font-size: 32px !important;
    }
    
    p {
        font-size: 28px !important;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 48px !important;
    }
    
    h2 {
        font-size: 28px !important;
    }
    
    .contact-title-mobile {
        font-size: 48px !important;
    }
    
    p {
        font-size: 20px !important;
    }
    
    .statement-title-mobile {
        font-size: 32px !important;
    }
    
    /* Hide desktop nav, show mobile menu */
    nav.hidden.lg\:flex {
        display: none !important;
    }
}

@media (max-width: 640px) {
    h1 {
        font-size: 36px !important;
    }
    
    h2 {
        font-size: 24px !important;
    }
    
    .contact-title-mobile {
        font-size: 48px !important;
    }
    
    p {
        font-size: 18px !important;
    }
    
    .statement-title-mobile {
        font-size: 32px !important;
    }
}

/* Prevent text selection on UI elements */
nav a,
button {
    user-select: none;
    -webkit-user-select: none;
}

/* Ensure full width sections */
.w-full {
    width: 100%;
}

/* Object-fit polyfill support */
.object-cover {
    object-fit: cover;
}

.object-contain {
    object-fit: contain;
}

.object-center {
    object-position: center;
}

/* Prevent image distortion */
img[src$=".svg"] {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Aspect ratio preservation */
.aspect-square {
    aspect-ratio: 1 / 1;
}

/* Ensure images maintain their aspect ratio */
img:not([style*="height"]):not([class*="w-full"]) {
    width: auto !important;
    height: auto !important;
}

/* Hide mobile menu button on desktop */
@media (min-width: 1024px) {
    #mobile-menu-btn {
        display: none !important;
    }
}

/* Hide green background on mobile hero */
@media (max-width: 1023px) {
    .hero-bg-mobile {
        background: transparent !important;
    }
}