/* =============================================================================
   Bootstrap 5 Color Scheme — override these variables per project
   ============================================================================= */

:root {
    /* Brand colors */
    --bs-blue:    #0d6efd;
    --bs-indigo:  #6610f2;
    --bs-purple:  #6f42c1;
    --bs-pink:    #d63384;
    --bs-red:     #dc3545;
    --bs-orange:  #fd7e14;
    --bs-yellow:  #ffc107;
    --bs-green:   #198754;
    --bs-teal:    #20c997;
    --bs-cyan:    #0dcaf0;
    --bs-white:   #ffffff;
    --bs-gray:    #6c757d;
    --bs-gray-dark: #343a40;
    --bs-black:   #000000;

    /* Theme colors — J. Fisk Construction */
    --bs-primary:   #c8860a;   /* construction amber */
    --bs-secondary: #6c757d;
    --bs-success:   #198754;
    --bs-info:      #0dcaf0;
    --bs-warning:   #c8860a;
    --bs-danger:    #dc3545;
    --bs-light:     #f5f3f0;   /* warm off-white */
    --bs-dark:      #1e1e1e;   /* near-black */

    /* Theme color RGB values (used by Bootstrap utilities) */
    --bs-primary-rgb:   13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb:   25, 135, 84;
    --bs-info-rgb:      13, 202, 240;
    --bs-warning-rgb:   255, 193, 7;
    --bs-danger-rgb:    220, 53, 69;
    --bs-light-rgb:     248, 249, 250;
    --bs-dark-rgb:      33, 37, 41;

    /* Body */
    --bs-body-color:      #212529;
    --bs-body-bg:         #ffffff;
    --bs-body-font-family: system-ui, -apple-system, sans-serif;
    --bs-body-font-size:  1rem;
    --bs-body-line-height: 1.5;

    /* Links */
    --bs-link-color:       #0d6efd;
    --bs-link-hover-color: #0a58ca;

    /* Borders */
    --bs-border-color: #dee2e6;
    --bs-border-radius: 0.375rem;

    /* Grays */
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
}

/* =============================================================================
   Global styles
   ============================================================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

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

a:hover {
    color: var(--bs-link-hover-color);
}

/* =============================================================================
   Layout
   ============================================================================= */

main {
    min-height: 60vh;
}

/* =============================================================================
   Hero section
   ============================================================================= */

.hero-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #1e1e1e;
    min-height: 480px;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.hero-section > .container {
    position: relative;
    z-index: 1;
}

.btn-call-order {
    background-color: #c8860a;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
}

.btn-call-order:hover,
.btn-call-order:focus {
    background-color: #a06d08;
    color: #fff;
}

.product-card-img {
    height: 200px;
    background-color: #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 0.85rem;
    border-radius: 0.375rem 0.375rem 0 0;
    overflow: hidden;
}

.product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =============================================================================
   Messages — map Django message tags to Bootstrap alert colors
   ============================================================================= */

.messages {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.message {
    padding: 0.75rem 1rem;
    border-radius: var(--bs-border-radius);
    margin-bottom: 0.5rem;
}

.message--success { background: #d1e7dd; color: #0a3622; }
.message--error   { background: #f8d7da; color: #58151c; }
.message--warning { background: #fff3cd; color: #664d03; }
.message--info    { background: #cff4fc; color: #055160; }

/* =============================================================================
   Forms
   ============================================================================= */

form p {
    margin-bottom: 0.75rem;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    display: block;
    width: 100%;
    max-width: 400px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    font-size: 1rem;
}

button[type="submit"] {
    padding: 0.5rem 1.25rem;
    background: var(--bs-primary);
    color: var(--bs-white);
    border: none;
    border-radius: var(--bs-border-radius);
    font-size: 1rem;
    cursor: pointer;
}

button[type="submit"]:hover {
    background: var(--bs-link-hover-color);
}