/**
 * Base Global Styles & Variables - Custom Agency
 * Matches React index.css
 */
:root {
    --base-100: #181717;
    --base-200: #292725;
    --base-300: #f5f5f5;
    --gold: #b1a696;
    --light: #f4efe7;
}

html,
body {
    background-color: #181717;
    color: #f4efe7;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-x: hidden;
    max-width: 100vw;
    margin: 0;
    padding: 0;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* Fluid responsive typography */
.fluid-heading {
    font-size: clamp(2rem, 6vw + 1rem, 6rem);
}
.fluid-display {
    font-size: clamp(3rem, 10vw + 1rem, 10rem);
}

/* Essential Responsive Visibility Helpers */
.hidden {
    display: none !important;
}
.inline-block {
    display: inline-block;
}
.block {
    display: block;
}
.flex {
    display: flex;
}

@media (min-width: 640px) {
    .sm\:hidden {
        display: none !important;
    }
    .hidden.sm\:inline-block {
        display: inline-block !important;
    }
    .hidden.sm\:flex {
        display: flex !important;
    }
    .hidden.sm\:block {
        display: block !important;
    }
    .hidden.sm\:inline {
        display: inline !important;
    }
}

@media (min-width: 768px) {
    .md\:hidden {
        display: none !important;
    }
    .hidden.md\:inline-block {
        display: inline-block !important;
    }
    .hidden.md\:flex {
        display: flex !important;
    }
    .hidden.md\:block {
        display: block !important;
    }
}

@media (min-width: 1024px) {
    .lg\:hidden {
        display: none !important;
    }
    .hidden.lg\:inline-block {
        display: inline-block !important;
    }
    .hidden.lg\:flex {
        display: flex !important;
    }
    .hidden.lg\:block {
        display: block !important;
    }
    .hidden.lg\:grid {
        display: grid !important;
    }
}

/* WordPress Admin Bar Compatibility */
body.admin-bar .site-header-logo-pill,
body.admin-bar .site-header-cta-pill {
    top: calc(1rem + 32px);
}
@media (min-width: 640px) {
    body.admin-bar .site-header-logo-pill,
    body.admin-bar .site-header-cta-pill {
        top: calc(1.5rem + 32px);
    }
}
@media (min-width: 768px) {
    body.admin-bar .site-header-logo-pill,
    body.admin-bar .site-header-cta-pill {
        top: calc(2rem + 32px);
    }
}
@media screen and (max-width: 782px) {
    body.admin-bar .site-header-logo-pill,
    body.admin-bar .site-header-cta-pill {
        top: calc(1rem + 46px);
    }
}