/* ============================================
   Bidzen.ai - Common Styles
   ============================================ */

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    vertical-align: middle;
}

/* Dot Grid Background Pattern */
.dot-grid {
    background-image: radial-gradient(#c6c6cf 0.5px, transparent 0.5px);
    background-size: 24px 24px;
}

/* Hero Section Gradient */
.hero-gradient {
    background: linear-gradient(135deg, #000000 0%, #0e1a3a 100%);
}

/* Glass Effect */
.glass-effect {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background-color: rgba(251, 248, 252, 0.7);
}

/* No-line Card (Contact page) */
.no-line-card {
    background-color: #ffffff;
    border: none;
}

/* Serif Title (Contact page) */
.serif-title {
    font-family: 'Newsreader', serif;
}

/* Serif Italic (Use Cases page) */
.serif-italic {
    font-style: italic;
}

/* No Scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

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

/* About Page Gradients */
.bg-gradient-hero {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8F9FA 100%);
}

.bg-gradient-mission {
    background: linear-gradient(180deg, #F8F9FA 0%, #F1F3F5 100%);
}

.bg-gradient-architecture {
    background: linear-gradient(180deg, #F1F3F5 0%, #F8F9FA 100%);
}

/* About page font overrides */
.about-page {
    font-family: 'Inter', sans-serif;
    color: #333;
}

.about-page h1,
.about-page h2,
.about-page h3,
.about-page .font-serif {
    font-family: 'Playfair Display', serif;
}

/* Mobile hamburger menu overlay */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
    display: none;
}

.mobile-menu-overlay.active {
    display: block;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100%;
    background: white;
    z-index: 60;
    transition: right 0.3s ease;
    padding: 2rem;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu a {
    display: block;
    padding: 0.75rem 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: #1b1b1e;
    border-bottom: 1px solid #e4e2e5;
}

.mobile-menu a:hover {
    color: #156969;
}

.mobile-menu a.active {
    color: #0ea5e9;
}