/*
 * McQueen Homes Style Guide Tokens & Components
 * Version: v1.0 (2025-09-24)
 * Scope: Brand variables and components specifically for McQueenHomesLLC.com.
 *        Include after Bootstrap to override defaults.
 */

:root {
    /* Brand Colours */
    --mh-color-red: #800C00;
    --mh-color-red-rgb: 128, 12, 0;
    --mh-color-bronze: #B5853B;
    --mh-color-bronze-dark: #8F6A2F;
    --mh-color-navy: #0C244A;
    --mh-color-navy-dark: #091A36;
    --mh-color-sky: #4BA3C3;
    --mh-color-slate: #6A778B;
    --mh-color-stone: #F1F2F4;
    --mh-color-white: #FFFFFF;

    /* Feedback Colours */
    --mh-color-success: #1F7A4D;
    --mh-color-warning: #DA8B22;
    --mh-color-danger: #C23B22;

    /* Typography */
    --mh-font-display: "Cormorant Garamond", "Playfair Display", serif;
    --mh-font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --mh-font-mono: "IBM Plex Mono", Menlo, Consolas, monospace;

    /* Type Scale */
    --mh-font-size-h1: 36px;
    --mh-font-line-h1: 44px;
    --mh-font-size-h2: 28px;
    --mh-font-line-h2: 36px;
    --mh-font-size-h3: 22px;
    --mh-font-line-h3: 30px;
    --mh-font-size-body: 16px;
    --mh-font-line-body: 24px;
    --mh-font-size-small: 14px;
    --mh-font-line-small: 20px;
    --mh-font-size-caption: 12px;
    --mh-font-line-caption: 16px;

    /* Spacing */
    --mh-space-1: 8px;
    --mh-space-2: 16px;
    --mh-space-3: 24px;
    --mh-space-4: 32px;
    --mh-space-5: 48px;

    /* Shadows */
    --mh-shadow-soft: 0 8px 18px rgba(12, 36, 74, 0.12);
    --mh-shadow-hard: 0 12px 32px rgba(12, 36, 74, 0.24);

    /* Radii */
    --mh-radius-sm: 4px;
    --mh-radius-md: 6px;
    --mh-radius-lg: 12px;
}

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

/* Typography Utilities */
.h1-mh {
    font-family: var(--mh-font-display);
    font-size: var(--mh-font-size-h1);
    line-height: var(--mh-font-line-h1);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.h2-mh {
    font-family: var(--mh-font-display);
    font-size: var(--mh-font-size-h2);
    line-height: var(--mh-font-line-h2);
    text-transform: capitalize;
}

.h3-mh {
    font-family: var(--mh-font-display);
    font-size: var(--mh-font-size-h3);
    line-height: var(--mh-font-line-h3);
}

.body-mh {
    font-family: var(--mh-font-body);
    font-size: var(--mh-font-size-body);
    line-height: var(--mh-font-line-body);
}

.caption-mh {
    font-family: var(--mh-font-body);
    font-size: var(--mh-font-size-caption);
    line-height: var(--mh-font-line-caption);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.muted-mh {
    color: var(--mh-color-slate);
}

/***** Buttons *****/
.btn-bnb-mh {
    color: var(--mh-color-white);
    background-color: var(--mh-color-navy);
    border-color: var(--mh-color-navy);
    padding: 12px 24px;
    border-radius: var(--mh-radius-sm);
    transition: all 0.2s ease;
}

.btn-bnb-mh:hover,
.btn-bnb-mh:focus {
    color: var(--mh-color-white);
    background-color: var(--mh-color-navy-dark);
    border-color: var(--mh-color-navy-dark);
    box-shadow: var(--mh-shadow-soft);
}

.btn-bronze-mh {
    color: var(--mh-color-white);
    background-color: var(--mh-color-bronze);
    border-color: var(--mh-color-bronze);
    padding: 12px 24px;
    border-radius: var(--mh-radius-sm);
    transition: all 0.2s ease;
}

.btn-bronze-mh:hover,
.btn-bronze-mh:focus {
    color: var(--mh-color-white);
    background-color: var(--mh-color-bronze-dark);
    border-color: var(--mh-color-bronze-dark);
    box-shadow: var(--mh-shadow-soft);
}

.btn-outline-mh {
    color: var(--mh-color-navy);
    background-color: transparent;
    border: 2px solid var(--mh-color-navy);
    padding: 10px 24px;
    border-radius: var(--mh-radius-sm);
    transition: all 0.2s ease;
}

.btn-outline-mh:hover,
.btn-outline-mh:focus {
    color: var(--mh-color-white);
    background-color: var(--mh-color-navy);
    border-color: var(--mh-color-navy);
}

/***** CRUD Action Buttons *****/
/* Add/Create Actions */
.btn-add-mh {
    color: var(--mh-color-white);
    background-color: var(--mh-color-success);
    border-color: var(--mh-color-success);
    padding: 8px 16px;
    border-radius: var(--mh-radius-sm);
    transition: all 0.2s ease;
}

.btn-add-mh:hover,
.btn-add-mh:focus {
    color: var(--mh-color-white);
    background-color: #0e5f2f;
    border-color: #0e5f2f;
    box-shadow: var(--mh-shadow-soft);
}

/* Edit/Update Actions */
.btn-edit-mh {
    color: var(--mh-color-white);
    background-color: var(--mh-color-warning);
    border-color: var(--mh-color-warning);
    padding: 8px 16px;
    border-radius: var(--mh-radius-sm);
    transition: all 0.2s ease;
}

.btn-edit-mh:hover,
.btn-edit-mh:focus {
    color: var(--mh-color-white);
    background-color: #b76b1a;
    border-color: #b76b1a;
    box-shadow: var(--mh-shadow-soft);
}

/* View/Read Actions */
.btn-view-mh {
    color: var(--mh-color-white);
    background-color: var(--mh-color-sky);
    border-color: var(--mh-color-sky);
    padding: 8px 16px;
    border-radius: var(--mh-radius-sm);
    transition: all 0.2s ease;
}

.btn-view-mh:hover,
.btn-view-mh:focus {
    color: var(--mh-color-white);
    background-color: #3a8aa3;
    border-color: #3a8aa3;
    box-shadow: var(--mh-shadow-soft);
}


/* Help Guide Buttons */
.btn-help-guide {
    padding: 2px;
}

/* Help Guide Card Headers */
.card-header-help-guide {
    background-color: #0dcaf0 !important;
    color: white !important;
}


/* Delete Actions */
.btn-delete-mh {
    color: var(--mh-color-white);
    background-color: var(--mh-color-danger);
    border-color: var(--mh-color-danger);
    padding: 8px 16px;
    border-radius: var(--mh-radius-sm);
    transition: all 0.2s ease;
}

.btn-delete-mh:hover,
.btn-delete-mh:focus {
    color: var(--mh-color-white);
    background-color: #a01e19;
    border-color: #a01e19;
    box-shadow: var(--mh-shadow-soft);
}

/* Cancel/Back Actions */
.btn-cancel-mh {
    color: var(--mh-color-white);
    background-color: var(--mh-color-stone);
    border-color: var(--mh-color-stone);
    padding: 8px 16px;
    border-radius: var(--mh-radius-sm);
    transition: all 0.2s ease;
}

.btn-cancel-mh:hover,
.btn-cancel-mh:focus {
    color: var(--mh-color-white);
    background-color: var(--mh-color-slate);
    border-color: var(--mh-color-slate);
    box-shadow: var(--mh-shadow-soft);
}

.btn:focus-visible {
    outline: 2px solid var(--mh-color-navy);
    outline-offset: 2px;
}

/***** Forms *****/
.form-control-mh {
    border-radius: var(--mh-radius-sm);
    border-color: rgba(12, 36, 74, 0.2);
    padding: 14px 16px;
    font-family: var(--mh-font-body);
}

.form-control-mh:focus {
    border-color: var(--mh-color-navy);
    box-shadow: 0 0 0 0.2rem rgba(12, 36, 74, 0.25);
}

.form-control-mh::placeholder {
    color: rgba(106, 119, 139, 0.7);
}

.is-valid.form-control-mh {
    border-color: var(--mh-color-success);
    background-image: none;
}

.is-invalid.form-control-mh {
    border-color: var(--mh-color-danger);
    background-image: none;
}

/***** Cards *****/
.card-mh {
    border: none;
    border-radius: var(--mh-radius-md);
    padding: var(--mh-space-2);
    box-shadow: var(--mh-shadow-soft);
    background-color: var(--mh-color-white);
}

.card-mh h3,
.card-mh .card-title {
    margin-bottom: var(--mh-space-1);
}

.card-mh .card-meta {
    font-size: var(--mh-font-size-caption);
    text-transform: uppercase;
    color: var(--mh-color-slate);
    letter-spacing: 0.08em;
}

/***** Tables *****/
.table-mh {
    font-family: var(--mh-font-body);
    font-size: var(--mh-font-size-small);
    line-height: var(--mh-font-line-small);
    margin-bottom: var(--mh-space-3);
}

.table-mh thead th {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mh-color-navy);
}

.table-mh tbody tr:nth-child(even) {
    background-color: var(--mh-color-stone);
}

.table-mh td.num,
.table-mh th.num {
    text-align: right;
}

/***** Navigation *****/
.navbar-mh {
    padding: 24px 0;
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(12, 36, 74, 0.08);
}

.navbar-mh .nav-link {
    color: var(--mh-color-navy);
    font-weight: 600;
    padding: 0 var(--mh-space-2);
}

.navbar-mh .nav-link:hover,
.navbar-mh .nav-link:focus,
.navbar-mh .nav-link.active {
    color: var(--mh-color-bronze);
    border-bottom: 2px solid var(--mh-color-bronze);
}

.navbar-mh .navbar-brand img {
    max-height: 48px;
}

/***** Icon Helpers *****/
.blue-fa-mh {
    color: var(--mh-color-navy);
}

.icon-24 {
    width: 24px;
    height: 24px;
}

.icon-32 {
    width: 32px;
    height: 32px;
}

/***** Shadow + Spacing Helpers *****/
.shadow-soft-mh {
    box-shadow: var(--mh-shadow-soft);
}

.shadow-hard-mh {
    box-shadow: var(--mh-shadow-hard);
}

.section-padding-mh {
    padding: var(--mh-space-4) 0;
}

.gap-mh {
    gap: var(--mh-space-2);
}

/***** Responsive Breakpoints Reference *****/
@media (max-width: 575.98px) {
    .btn-bnb-mh,
    .btn-bronze-mh,
    .btn-outline-mh {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .navbar-mh {
        position: sticky;
        top: 0;
        z-index: 1030;
    }
}

/*
 * Component Notes:
 * - Append new component blocks with inline documentation similar to the sections above.
 * - Reference the corresponding section number from docs/style-guide.md for discoverability.
 */