/*
 * Brand color overrides for the Park Sales platform.
 * These are the site's brand defaults — they override Bootstrap's
 * out-of-the-box styling. In dark mode, dark-overrides.css takes
 * precedence via higher specificity ([data-bs-theme="dark"]).
 *
 * Architecture:
 *   brand-overrides.css  — brand defaults (this file)
 *   dark-overrides.css   — dark mode overrides
 *   inline <style>       — page-specific styles in Blade templates
 */

/* =====================================================
   Layout & component overrides
   ===================================================== */

/* Theme switcher dropdown — compact sizing inside collapsed navbar.
   Bootstrap sets .navbar-nav .dropdown-menu { position: static; width: 100% }
   in collapsed state. Override with high specificity to keep the toggle compact. */
.navbar-nav .dropdown-menu.theme-switcher-menu {
    width: auto !important;
    min-width: 140px;
    max-width: calc(100vw - 2rem);
    position: absolute !important;
    right: 0;
}

/* Theme switcher active indicator */
.theme-switcher-menu .dropdown-item.active {
    background: #e8f5e9;
    color: #2c5e1a;
    border-left: 3px solid #2c5e1a;
    font-weight: 600;
}

/* Favorite heart button — default appearance (both modes need explicit
   styles because inline styles were removed during dark mode work). */
.btn-favorite {
    background-color: #ffffff;
    color: #212529;
    border: 1px solid #dee2e6;
}

/* Dark logo hidden by default — dark-overrides.css shows it in dark mode */
.site-logo--dark { display: none; }

/* =====================================================
   Navbar — brand green background and light text
   ===================================================== */

.navbar.navbar-light {
    background: var(--brand-light-primary);
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .links {
    color: var(--brand-light-on-primary);
}

.navbar .nav-link:hover,
.navbar .links:hover {
    color: color-mix(in srgb, var(--brand-light-on-primary), var(--brand-light-primary) 15%);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28240, 248, 232, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* =====================================================
   Brand colors — override Bootstrap defaults
   ===================================================== */

/* Card headers — brand green background (replaces Bootstrap blue/gray) */
.card .card-header {
    background-color: var(--brand-light-primary);
    color: var(--brand-light-on-primary);
}

.card .card-header .card-title {
    color: color-mix(in srgb, var(--brand-light-on-primary), white 15%);
}

/* .bg-primary headers (modals, auth pages) — same green, override Bootstrap blue */
.card-header.bg-primary {
    background-color: var(--brand-light-primary) !important;
}

/* .btn-primary — brand green (replaces Bootstrap blue) */
.btn-primary {
    background-color: var(--brand-light-accent);
    border-color: var(--brand-light-accent);
    color: white;
}

.btn-primary:hover {
    background-color: color-mix(in srgb, var(--brand-light-accent), black 15%);
    border-color: color-mix(in srgb, var(--brand-light-accent), black 15%);
}

/* Radio buttons and checkboxes — brand green checked state */
.form-check-input:checked {
    background-color: var(--brand-light-accent);
    border-color: var(--brand-light-accent);
}

/* .bg-primary utility — brand green */
.bg-primary {
    background-color: var(--brand-light-primary) !important;
}

/* Links — brand highlight color */
.links {
    color: var(--brand-light-highlight);
}

/* Main website callout card — brand colors extracted from inline styles */
.main-website-callout {
    background: linear-gradient(135deg,
        var(--brand-light-on-primary),
        color-mix(in srgb, var(--brand-light-on-primary), white 15%));
    border: 2px solid color-mix(in srgb, var(--brand-light-primary), white 20%);
}

.main-website-callout h4,
.main-website-callout p {
    color: var(--brand-light-primary);
}

/* Admin lot list — video badge */
.badge-video {
    background-color: var(--brand-light-primary) !important;
    color: white !important;
    display: inline-block;
    text-align: center;
}

/* Non-membership (RV/Trailer Only) badge in listing card headers */
.badge-trailer-only {
    background-color: orangered !important;
    color: #fff !important;
    min-width: 80px;
    display: inline-block;
    text-align: center;
}