/**
 * Bootstrap Utility Overrides
 * 
 * Fixes Bootstrap utilities that use !important and override our custom variables.
 * This file loads AFTER variables.css to ensure our brand colors win.
 * 
 * PRIMARY = Navy Blue #002542
 * SECONDARY = Orange #f47a16
 * DARK = Navy Blue (not black/gray)
 * 
 * @package 911myweb
 * @version 1.0.0
 */

/* ============================================================
   BACKGROUND COLOR UTILITIES
   Override Bootstrap's .bg-* utilities to use our variables
   ============================================================ */
.bg-primary {
    background-color: var(--bs-primary) !important;
    /* Navy Blue */
}

.bg-secondary {
    background-color: var(--bs-secondary) !important;
    /* Orange */
}

.bg-dark {
    background-color: var(--bs-dark) !important;
    /* Navy Blue, not black */
}

.bg-info {
    background-color: var(--bs-info) !important;
    /* Navy Blue */
}

.bg-warning {
    background-color: var(--bs-warning) !important;
    /* Orange */
}

.bg-gradient {
    background-image: var(--bs-gradient) !important;
}

/* ============================================================
   TEXT COLOR UTILITIES
   Override Bootstrap's .text-* utilities
   ============================================================ */
.text-primary {
    color: var(--bs-primary) !important;
    /* Navy Blue */
}

.text-secondary {
    color: var(--bs-secondary) !important;
    /* Orange */
}

.text-dark {
    color: var(--bs-dark) !important;
    /* Navy Blue, not black */
}

.text-body {
    color: var(--bs-body-color) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-info {
    color: var(--bs-info) !important;
    /* Navy Blue */
}

.text-warning {
    color: var(--bs-warning) !important;
    /* Orange */
}

/* ============================================================
   BORDER COLOR UTILITIES
   ============================================================ */
.border-primary {
    border-color: var(--bs-primary) !important;
    /* Navy Blue */
}

.border-secondary {
    border-color: var(--bs-secondary) !important;
    /* Orange */
}

.border-dark {
    border-color: var(--bs-dark) !important;
    /* Navy Blue */
}

.border-info {
    border-color: var(--bs-info) !important;
    /* Navy Blue */
}

.border-warning {
    border-color: var(--bs-warning) !important;
    /* Orange */
}

/* ============================================================
   BUTTON UTILITIES
   Ensure buttons use our brand colors
   ============================================================ */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #003d66;
    --bs-btn-hover-border-color: #003d66;
    --bs-btn-active-bg: #001a2e;
    --bs-btn-active-border-color: #001a2e;
    --bs-btn-color: #ffffff;
}

.btn-secondary {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: #e06e0e;
    --bs-btn-hover-border-color: #e06e0e;
    --bs-btn-active-bg: #c35f12;
    --bs-btn-active-border-color: #c35f12;
    --bs-btn-color: #ffffff;
}

.btn-dark {
    --bs-btn-bg: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-bg: #003d66;
    --bs-btn-hover-border-color: #003d66;
    --bs-btn-active-bg: #001a2e;
    --bs-btn-active-border-color: #001a2e;
    --bs-btn-color: #ffffff;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-color: #ffffff;
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-active-color: #ffffff;
}

.btn-outline-dark {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--bs-dark);
    --bs-btn-active-border-color: var(--bs-dark);
    --bs-btn-active-color: #ffffff;
}

/* ============================================================
   LINK UTILITIES
   ============================================================ */
.link-primary {
    color: var(--bs-primary) !important;
    /* Navy Blue */
}

.link-secondary {
    color: var(--bs-secondary) !important;
    /* Orange */
}

.link-dark {
    color: var(--bs-dark) !important;
    /* Navy Blue */
}

.link-primary:hover,
.link-primary:focus {
    color: var(--bs-link-hover-color) !important;
}

.link-secondary:hover,
.link-secondary:focus {
    color: var(--bs-primary) !important;
    /* Orange hover to Navy */
}

.link-dark:hover,
.link-dark:focus {
    color: var(--bs-secondary) !important;
    /* Navy hover to Orange */
}

/* ============================================================
   BADGE UTILITIES
   ============================================================ */
.badge.bg-primary {
    background-color: var(--bs-primary) !important;
}

.badge.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

.badge.bg-dark {
    background-color: var(--bs-dark) !important;
}

/* ============================================================
   ALERT UTILITIES
   ============================================================ */
.alert-primary {
    --bs-alert-color: var(--bs-primary-text-emphasis);
    --bs-alert-bg: var(--bs-primary-bg-subtle);
    --bs-alert-border-color: var(--bs-primary-border-subtle);
}

.alert-secondary {
    --bs-alert-color: var(--bs-secondary-text-emphasis);
    --bs-alert-bg: var(--bs-secondary-bg-subtle);
    --bs-alert-border-color: var(--bs-secondary-border-subtle);
}

/* ============================================================
   GRADIENT UTILITIES
   Fix gradient backgrounds to use our colors
   ============================================================ */
.bg-gradient {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !important;
}

/* Custom gradient with brand colors */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--bs-primary) 0%, #003d66 100%) !important;
}

.bg-gradient-secondary {
    background: linear-gradient(135deg, var(--bs-secondary) 0%, #e06e0e 100%) !important;
}

.bg-gradient-brand {
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-secondary) 100%) !important;
}

.bg-gradient-dark {
    background: linear-gradient(135deg, var(--bs-dark) 0%, #001a2e 100%) !important;
}

/* ============================================================
   NAVBAR & NAVIGATION
   ============================================================ */
.navbar-dark {
    --bs-navbar-color: rgba(255, 255, 255, 0.85);
    --bs-navbar-hover-color: var(--bs-secondary);
    --bs-navbar-active-color: var(--bs-secondary);
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: var(--bs-secondary);
}

/* ============================================================
   HEADINGS
   Ensure all headings use navy blue
   ============================================================ */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--bs-heading-color);
}

/**
 * 911MyWeb — Button System (UNIFIED)
 * Using CSS variables from variables.css
 * 
 * RULE: Hover NEVER changes background-color. Ever.
 * Only brightness filter for visual effect.
 * 
 * ALL buttons use identical base styles:
 * - border-radius: 0.75rem
 * - font-weight: 700
 * - hover: brightness(1.12) + translateY(-2px)
 * - active: brightness(0.95) + translateY(0)
 * 
 * SIZES AVAILABLE:
 * - .btn-lg:   padding: 1.25rem 2.5rem;  font-size: 1.25rem;
 * - .btn-md:   padding: 1.125rem 2.25rem; font-size: 1.1875rem; (DEFAULT)
 * - .btn-sm:   padding: 0.875rem 1.75rem; font-size: 1rem;
 * - .btn-xs:   padding: 0.625rem 1.25rem; font-size: 0.875rem;
 * 
 * Colors from variables.css:
 * - Primary:   var(--bs-primary)   #002542 (navy)
 * - Secondary: var(--bs-secondary) #f47a16 (orange)
 */

/* ============================================================
   BASE BUTTON — Universal reset
   ============================================================ */
.btn,
a.btn,
.wp-block-button__link,
.read-more,
button.btn,
input[type="submit"].btn {
    /* Base structure */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    /* Typography */
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;

    /* Border */
    border: 2px solid transparent;
    border-radius: var(--radius-lg, 0.75rem);

    /* Behavior */
    cursor: pointer;
    user-select: none;
    vertical-align: middle;

    /* Transitions */
    transition: filter 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
    box-sizing: border-box;
    width: auto;

    /* Default size (md) */
    padding: 1.125rem 2.25rem;
    font-size: 1.1875rem;

    /* Default color (will be overridden by variant classes) */
    color: var(--bs-white, #ffffff);
    /* background-color: var(--bs-primary); */
    /* border-color: var(--bs-primary); */
}

/* ============================================================
   SIZE VARIANTS
   ============================================================ */
.btn-lg {
    padding: 1.25rem 2.5rem;
    font-size: 1.25rem;
    gap: 0.75rem;
}

.btn-md {
    padding: 1.125rem 2.25rem;
    font-size: 1.1875rem;
    gap: 0.5rem;
}

.btn-sm {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    gap: 0.375rem;
}

.btn-xs {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    gap: 0.25rem;
}

/* ============================================================
   HOVER EFFECTS — NO background color change, only brightness
   ============================================================ */
.btn:hover,
.wp-block-button__link:hover,
.read-more:hover,
button.btn:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Active state */
.btn:active,
.wp-block-button__link:active,
button.btn:active {
    filter: brightness(0.95);
    transform: translateY(0);
}

/* Focus state */
.btn:focus,
.btn-check:focus+.btn,
.wp-block-button__link:focus {
    filter: brightness(1.12);
    transform: translateY(-2px);
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Disabled state */
.btn.disabled,
.btn:disabled,
.wp-block-button__link.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    filter: none;
    pointer-events: none;
}

/* ============================================================
   OVERRIDE BOOTSTRAP HOVER — Force NO background color change
   ============================================================ */
.btn:hover,
.btn:focus,
.btn-check:focus+.btn,
.btn-check:checked+.btn,
.btn.active,
.btn:active {
    background-color: var(--bs-btn-bg) !important;
    border-color: var(--bs-btn-border-color) !important;
}

/* ============================================================
   COLOR VARIANTS — Using CSS variables
   ============================================================ */

/* Primary - Navy */
.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    color: #ffffff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Secondary - Orange */
.btn-secondary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    color: #ffffff;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

/* Outline Primary */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-primary);
    color: var(--bs-primary);
    background-color: transparent;
    border-color: var(--bs-primary);
}

/* Outline Secondary */
.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-secondary);
    color: var(--bs-secondary);
    background-color: transparent;
    border-color: var(--bs-secondary);
}

/* White */
.btn-white {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #ffffff;
    color: var(--bs-primary);
    background-color: #ffffff;
    border-color: #ffffff;
}

/* Success - Green */
.btn-success {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--bs-success, #198754);
    --bs-btn-border-color: var(--bs-success, #198754);
    color: #ffffff;
    background-color: var(--bs-success, #198754);
    border-color: var(--bs-success, #198754);
}

/* Danger - Red */
.btn-danger {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--bs-danger, #dc3545);
    --bs-btn-border-color: var(--bs-danger, #dc3545);
    color: #ffffff;
    background-color: var(--bs-danger, #dc3545);
    border-color: var(--bs-danger, #dc3545);
}

/* Warning - Yellow */
.btn-warning {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: var(--bs-warning, #ffc107);
    --bs-btn-border-color: var(--bs-warning, #ffc107);
    color: var(--bs-primary);
    background-color: var(--bs-warning, #ffc107);
    border-color: var(--bs-warning, #ffc107);
}

/* Dark - Navy (uses primary) */
.btn-dark {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--bs-dark, var(--bs-primary));
    --bs-btn-border-color: var(--bs-dark, var(--bs-primary));
    color: #ffffff;
    background-color: var(--bs-dark, var(--bs-primary));
    border-color: var(--bs-dark, var(--bs-primary));
}

/* Light */
.btn-light {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: var(--bs-light, #f8f9fa);
    --bs-btn-border-color: var(--bs-border-color, #e2e8f0);
    color: var(--bs-primary);
    background-color: var(--bs-light, #f8f9fa);
    border-color: var(--bs-border-color, #e2e8f0);
}

/* Link style */
.btn-link {
    --bs-btn-color: var(--bs-link-color, var(--bs-secondary));
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    color: var(--bs-link-color, var(--bs-secondary));
    background-color: transparent;
    border-color: transparent;
    text-decoration: underline;
}

.btn-link:hover {
    color: var(--bs-link-hover-color, var(--bs-primary)) !important;
    background-color: transparent !important;
    border-color: transparent !important;
    text-decoration: none;
}

/* ============================================================
   ADDITIONAL COLOR VARIANTS FROM variables.css
   ============================================================ */

/* Primary 100 (light navy) */
.btn-primary-100 {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: var(--bs-primary-bg-subtle, #ccd5de);
    --bs-btn-border-color: var(--bs-primary-bg-subtle, #ccd5de);
    color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle, #ccd5de);
    border-color: var(--bs-primary-bg-subtle, #ccd5de);
}

/* Primary 600 (darker navy) */
.btn-primary-600 {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--bs-primary-600, #002542);
    --bs-btn-border-color: var(--bs-primary-600, #002542);
    color: #ffffff;
    background-color: var(--bs-primary-600, #002542);
    border-color: var(--bs-primary-600, #002542);
}

/* Secondary 100 (light orange) */
.btn-secondary-100 {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-bg: var(--bs-secondary-bg-subtle, #ffe8cc);
    --bs-btn-border-color: var(--bs-secondary-bg-subtle, #ffe8cc);
    color: var(--bs-secondary);
    background-color: var(--bs-secondary-bg-subtle, #ffe8cc);
    border-color: var(--bs-secondary-bg-subtle, #ffe8cc);
}

/* Secondary 600 (darker orange) */
.btn-secondary-600 {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--bs-primary-600, #e06e0e);
    --bs-btn-border-color: var(--bs-primary-600, #e06e0e);
    color: #ffffff;
    background-color: var(--bs-primary-600, #e06e0e);
    border-color: var(--bs-primary-600, #e06e0e);
}

/* Info - uses navy */
.btn-info {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--bs-info, var(--bs-primary));
    --bs-btn-border-color: var(--bs-info, var(--bs-primary));
    color: #ffffff;
    background-color: var(--bs-info, var(--bs-primary));
    border-color: var(--bs-info, var(--bs-primary));
}

/* ============================================================
   WP Block Button — default = primary (navy)
   ============================================================ */
.wp-block-button:not([class*="btn-"]) .wp-block-button__link {
    color: #ffffff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* ============================================================
   ICON SUPPORT
   ============================================================ */
.btn i,
.btn svg,
.btn .bi {
    font-size: 1.2em;
    line-height: 1;
    transition: transform 0.25s ease;
}

.btn:hover i,
.btn:hover svg,
.btn:hover .bi {
    transform: translateX(2px);
}

.btn-sm i,
.btn-sm svg,
.btn-sm .bi {
    font-size: 1.1em;
}

.btn-xs i,
.btn-xs svg,
.btn-xs .bi {
    font-size: 1em;
}

/* ============================================================
   BLOCK BUTTON (full width)
   ============================================================ */
.btn-block,
.wp-block-button__link {
    width: 100%;
}

/* ============================================================
   RESPONSIVE — maintain proportions on mobile
   ============================================================ */
@media (max-width: 768px) {

    .btn,
    .wp-block-button__link {
        white-space: normal;
        word-break: break-word;
    }

    /* Adjust sizes on mobile but maintain ratios */
    .btn-lg {
        padding: 1.125rem 2rem;
        font-size: 1.125rem;
    }

    .btn-md {
        padding: 1rem 1.75rem;
        font-size: 1.0625rem;
    }

    .btn-sm {
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
    }

    .btn-xs {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }
}

.btn.btn-tel {
    color: var(--brand-orange);
    background: transparent !important;
    font-size: 1.7rem;
    padding: 5px;
    border: none !important;
}

.btn.btn-tel.btn-light {
    color: #ffff;
    background: transparent !important;
    font-size: 1.7rem;
    padding: 5px;
    border: none !important;
}



/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {

    .btn,
    .wp-block-button__link {
        background: none !important;
        color: #000 !important;
        border: 2px solid #000 !important;
        box-shadow: none !important;
        transform: none !important;
        filter: none !important;
    }
}