/* Your standard CSS goes here. Use CSS variables instead of SCSS. */
:root {
    --primary-color: #0d6efd;
    --dark-bg: #121212;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.btn-agency-custom {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-agency-custom:hover {
    filter: brightness(0.85);
    transform: translateY(-2px);
}

/* ==========================================
   MOBILE & RESPONSIVE GROUNDWORK
   ========================================== */

/* 1. Touch & Native Feel */
html, body {
    /* Prevent text resizing when rotating device */
    -webkit-text-size-adjust: 100%;
    /* Remove the default blue tap highlight on mobile */
    -webkit-tap-highlight-color: transparent;
    /* Smooth scrolling for anchor links */
    scroll-behavior: smooth;
}

/* 2. Safe Areas (For iPhone Notches & Home Indicator) */
.safe-area-pt { padding-top: env(safe-area-inset-top); }
.safe-area-pb { padding-bottom: env(safe-area-inset-bottom); }

/* 3. The Real 100vh (Dynamic Viewport Height)
   We will calculate --vh in JS to fix the mobile browser UI overlay bug */
.min-h-screen {
    min-height: 100vh; /* Fallback */
    min-height: calc(var(--vh, 1vh) * 100);
}

/* 4. Standard Agency Breakpoints (Mobile First) */
/* Write base styles for mobile outside media queries, then scale up here: */

/* Tablet Landscape & Small Laptops */
@media (min-width: 768px) {
    /* Add tablet-specific spacing/typography here */
}

/* Desktops */
@media (min-width: 992px) {
    /* Add desktop-specific hover states and layout changes here */
}

/* Extra Large Screens (Ultrawide/TV) */
@media (min-width: 1400px) {
    /* Cap max-widths and scale up typography */
}