/**
 * Buffalo Eats Online - Storefront Theme CSS
 *
 * Maps CSS custom properties (--beo-*) to Bootstrap overrides.
 * Values are set via ThemeService::generateCssVariablesBlock() per business.
 * Fallback values match the default hardcoded appearance.
 *
 * @author    J.J. Johnson <visionquest716@gmail.com>
 * @copyright 2026 VisionQuestServices LLC
 * @package   BuffaloEatsOnline
 */

/* ===========================================
   Root Defaults (fallbacks)
   =========================================== */
:root {
    --beo-primary: #2c3e50;
    --beo-primary-rgb: 44, 62, 80;
    --beo-accent: #e67e22;
    --beo-accent-rgb: 230, 126, 34;
    --beo-hero-bg: #2c3e50;
    --beo-hero-text: #ffffff;
    --beo-navbar-bg: #212529;
    --beo-navbar-text: #ffffff;
    --beo-body-bg: #ffffff;
    --beo-body-text: #212529;
    --beo-card-bg: #ffffff;
    --beo-card-border: #dee2e6;
    --beo-footer-bg: #212529;
    --beo-footer-text: #f8f9fa;
    --beo-link-color: #0d6efd;
    --beo-btn-primary-bg: #0d6efd;
    --beo-btn-primary-text: #ffffff;
    --beo-font-heading: inherit;
    --beo-font-body: inherit;
    --beo-border-radius: 0.375rem;
}

/* ===========================================
   Body & Typography
   =========================================== */
body {
    background-color: var(--beo-body-bg);
    color: var(--beo-body-text);
    font-family: var(--beo-font-body);
}

a {
    color: var(--beo-link-color);
}

a:hover {
    color: var(--beo-link-color);
    opacity: 0.85;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--beo-font-heading);
}

/* ===========================================
   Navbar
   =========================================== */
.storefront-navbar {
    background-color: var(--beo-navbar-bg) !important;
}

.storefront-navbar .navbar-brand,
.storefront-navbar .nav-link {
    color: var(--beo-navbar-text) !important;
}

.storefront-navbar .nav-link:hover {
    opacity: 0.85;
}

/* ===========================================
   Hero Section
   =========================================== */
.hero-section {
    background-color: var(--beo-hero-bg);
    color: var(--beo-hero-text);
    padding: 3rem 0;
}

.hero-section h1 {
    font-weight: 700;
}

.hero-section a.text-light,
.hero-section .breadcrumb-item a {
    color: var(--beo-hero-text) !important;
    opacity: 0.85;
}

/* Header style: Hero Full (default) */
.header-hero-full .hero-section {
    padding: 4rem 0;
}

/* Header style: Hero Minimal */
.header-hero-minimal .hero-section {
    padding: 1.5rem 0;
}

/* Header style: Centered */
.header-centered .hero-section {
    padding: 2rem 0;
    text-align: center;
}

/* ===========================================
   Cards
   =========================================== */
.card {
    background-color: var(--beo-card-bg);
    border-color: var(--beo-card-border);
    border-radius: var(--beo-border-radius);
}

/* ===========================================
   Buttons
   =========================================== */
.btn-primary {
    background-color: var(--beo-btn-primary-bg);
    border-color: var(--beo-btn-primary-bg);
    color: var(--beo-btn-primary-text);
}

.btn-primary:hover {
    background-color: var(--beo-btn-primary-bg);
    border-color: var(--beo-btn-primary-bg);
    opacity: 0.9;
    color: var(--beo-btn-primary-text);
}

.btn {
    border-radius: var(--beo-border-radius);
}

/* ===========================================
   Footer
   =========================================== */
.storefront-footer {
    background-color: var(--beo-footer-bg) !important;
    color: var(--beo-footer-text);
}

.storefront-footer a {
    color: var(--beo-footer-text);
    opacity: 0.85;
}

.storefront-footer a:hover {
    opacity: 1;
}

/* ===========================================
   Business Info & Utilities
   =========================================== */
.business-info {
    padding: 2rem 0;
}

.hours-table th {
    width: 40%;
}

.action-buttons .btn {
    margin: 0.25rem;
}

.cart-badge {
    position: relative;
    top: -8px;
    font-size: 0.65rem;
}

/* ===========================================
   Menu Layout: Grid (default)
   =========================================== */
.menu-grid .menu-item-col {
    /* Uses Bootstrap col-sm-6 col-lg-4 by default */
}

/* ===========================================
   Menu Layout: List
   =========================================== */
.menu-list .menu-item-col {
    flex: 0 0 100%;
    max-width: 100%;
}

.menu-list .card {
    flex-direction: row;
}

.menu-list .card-img-top {
    width: 180px;
    min-height: 140px;
    object-fit: cover;
    border-radius: var(--beo-border-radius) 0 0 var(--beo-border-radius);
}

.menu-list .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 575.98px) {
    .menu-list .card {
        flex-direction: column;
    }

    .menu-list .card-img-top {
        width: 100%;
        height: 180px;
        border-radius: var(--beo-border-radius) var(--beo-border-radius) 0 0;
    }
}

/* ===========================================
   Theme Preview Bar
   =========================================== */
.theme-preview-bar {
    position: sticky;
    top: 0;
    z-index: 1050;
    background-color: #ffc107;
    color: #000;
    padding: 0.5rem 1rem;
    text-align: center;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-preview-bar .btn {
    margin-left: 0.5rem;
}

/* ===========================================
   Global Overflow Protection
   =========================================== */
html, body {
    overflow-x: hidden;
}

.container, .container-fluid {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ===========================================
   Mobile Optimizations
   =========================================== */
@media (max-width: 767.98px) {
    /* Smaller container padding on mobile */
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Compact hero section */
    .hero-section {
        padding: 1.5rem 0;
    }

    .hero-section h1 {
        font-size: 1.5rem;
    }

    .hero-section .lead {
        font-size: 0.9rem;
    }

    /* Smaller headings */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem; }

    /* Smaller buttons */
    .btn-lg {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }

    /* Compact cards */
    .card-body {
        padding: 0.75rem;
    }

    .card-header {
        padding: 0.5rem 0.75rem;
    }

    /* Compact tables */
    .table {
        font-size: 0.875rem;
    }

    /* Remove fixed column widths on mobile */
    .table th[style*="width"],
    .table td[style*="width"] {
        width: auto !important;
    }

    /* Reduce spacing */
    .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .mb-4 { margin-bottom: 1rem !important; }
    .mb-5 { margin-bottom: 1.5rem !important; }

    /* Compact form controls */
    .form-control, .form-select {
        font-size: 0.9rem;
        padding: 0.375rem 0.5rem;
    }

    /* Override fixed-width inputs on mobile */
    input[style*="width: 70px"],
    input[style*="width: 80px"],
    input[style*="width: 120px"] {
        width: 100% !important;
        max-width: 120px;
    }

    /* Full-width action buttons */
    .action-buttons .btn {
        display: block;
        width: 100%;
        margin: 0.25rem 0;
    }

    /* Smaller navbar brand text */
    .navbar-brand {
        font-size: 0.9rem;
    }

    .navbar-brand img {
        height: 28px !important;
    }

    /* Footer compact */
    .storefront-footer {
        font-size: 0.85rem;
    }

    /* Hide dine-in badges on mobile (takeout context) */
    .dine-in-badge {
        display: none !important;
    }

    /* Stack split-bill summary cards */
    .col-sm-4 .card.text-center .card-body h3 {
        font-size: 1.25rem;
    }

    /* Breadcrumb overflow */
    .breadcrumb {
        flex-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .breadcrumb-item {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* d-flex rows should wrap on mobile */
    .d-flex.justify-content-between {
        flex-wrap: wrap;
    }

    /* Ensure long item names wrap */
    td, th {
        word-break: break-word;
    }
}