/**
 * Webfix Digital - Main Stylesheet
 * Custom styles and theme variables
 */

/* ===========================
   CSS Custom Properties
   =========================== */
:root {
    /* Brand Colors */
    --color-primary: #2F6F9E;
    /* Harbor Blue */
    --color-secondary: #D9CBB8;
    /* Sandstone Beige */
    --color-accent: #4E9A7D;
    /* Bay Green */
    --color-dark: #1a1a1a;
    /* Deeper Black */
    --color-light: #F0F2F2;
    /* Mudded White */
    --color-mud: #E8E6E1;
    /* Mudded Background */

    /* Typography */
    --font-display: 'Fraunces', serif;
    --font-body: 'Inter', sans-serif;
    --font-sans: 'Source Sans 3', sans-serif;
}

/* ===========================
   Utility Classes
   =========================== */

/* Text Balance for Better Typography */
.text-balance {
    text-wrap: balance;
}

/* Mudded Background with Subtle Texture */
.bg-mudded {
    background-color: #E8E6E1;
    background-image: radial-gradient(at 50% 0%, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
}

/* Glass Panel Effect */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* ===========================
   Custom Scrollbar
   =========================== */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #D9CBB8;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2F6F9E;
}

/* ===========================
   Animations
   =========================== */

/* Float Animation */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* Swing Animation */
@keyframes swing {

    0%,
    100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }
}

/* Animation Classes */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float 6s ease-in-out 3s infinite;
}

.animate-swing {
    animation: swing 3s ease-in-out infinite;
}

/* ===========================
   Logo Styles
   =========================== */

.logo svg {
    margin: 0 -3px 0 -3px;
    transform: translateY(-3px) rotate(-5deg);
    opacity: 1;
    transition: opacity 0.2s ease-in;
    width: 15px;
    height: 25px;
    display: inline-block;
}

.logo:hover svg {
    opacity: 1;
}

.footer-logo svg {
    margin: 0 -3px 0 -6px;
    transform: translateY(-2px) rotate(-5deg);
    opacity: 1;
    transition: opacity 0.2s ease-in;
    width: 15px;
    height: 18px;
    display: inline-block;
}

.footer-logo:hover svg {
    opacity: 1;
}

/* ===========================
   Responsive Design Helpers
   =========================== */

/* Ensure smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Prevent horizontal overflow */
body {
    overflow-x: hidden;
}

/* ===========================
   Print Styles
   =========================== */
@media print {
    .no-print {
        display: none;
    }
}