/* [00.01] File Name: styles.css */
/* [00.02] File Location: /home/momisadmin4this/public_html/styles.css */
/* [00.03] Description: Provides the shared responsive visual foundation for the public website, customer portal, and staff workspace. */

/*
 * [01] DOCUMENT-WIDE BOX MODEL
 *
 * [01.01] Apply the predictable border-box model without erasing Bootstrap's
 * intentional margins and padding. The previous universal reset removed those
 * values and fought Bootstrap's layout utilities.
 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
 * [02] SHARED DESIGN TOKENS
 *
 * [02.01] Keep site colors and common measurements in one place so future
 * visual changes do not require searching through every selector.
 */
:root {
    --warm-gold: #c5a880;
    --warm-gold-dark: #9f7d50;
    --walnut-brown: #3d3225;
    --walnut-brown-dark: #2c241b;
    --charcoal-dark: #222222;
    --text-muted-custom: #6f6a64;
    --cream-soft: #fcfbfa;
    --surface-white: #ffffff;
    --border-soft: rgba(61, 50, 37, 0.12);
    --shadow-soft: 0 0.75rem 2rem rgba(61, 50, 37, 0.08);
    --focus-ring: 0 0 0 0.25rem rgba(197, 168, 128, 0.30);
}

/*
 * [03] ROOT DOCUMENT BEHAVIOR
 */
html {
    min-height: 100%;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/*
 * [03.01] Stack the navigation, page content, and footer vertically.
 *
 * [03.02] The former maintenance stylesheet used display:flex without a
 * flex-direction. That made these three body children appear side by side and
 * caused the broken home-page layout shown in the screenshots.
 */
body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background: var(--cream-soft);
    color: var(--charcoal-dark);
    font-family: "Montserrat", Arial, sans-serif;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/*
 * [03.03] Allow the main content area to fill remaining viewport height while
 * keeping the footer below the content instead of beside it.
 */
main {
    display: block;
    flex: 1 0 auto;
    width: 100%;
}

footer {
    flex: 0 0 auto;
    width: 100%;
}

/*
 * [04] RESPONSIVE MEDIA DEFAULTS
 */
img,
svg,
video {
    max-width: 100%;
    height: auto;
}

/*
 * [05] TYPOGRAPHY
 */
.font-heading,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Cinzel", Georgia, serif;
    overflow-wrap: anywhere;
}

p,
li,
label,
input,
select,
textarea,
button {
    overflow-wrap: break-word;
}

/*
 * [06] KEYBOARD ACCESSIBILITY
 *
 * [06.01] Supply one consistent visible focus treatment across modern Chrome,
 * Edge, Firefox, and Safari.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--warm-gold-dark);
    outline-offset: 3px;
    box-shadow: var(--focus-ring);
}

/*
 * [07] PRIMARY NAVIGATION
 */
.navbar {
    width: 100%;
    z-index: 1030;
}

.navbar-brand {
    flex: 0 0 auto;
    max-width: min(100%, 22.5rem);
    padding-top: 0;
    padding-bottom: 0;
    white-space: normal;
}

/*
 * [07.01] Display logo.png at twice the former desktop width while preserving
 * the original image proportions.
 *
 * [07.02] A width of 22.5rem equals approximately 360 pixels when the browser
 * uses its normal 16-pixel root font size.
 */
.site-logo {
    display: block;
    width: 22.5rem;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.navbar-toggler:focus {
    box-shadow: var(--focus-ring);
}

/*
 * [08] SHARED BUTTONS
 */
.btn-artisan {
    background: var(--walnut-brown);
    border: 1px solid var(--walnut-brown);
    border-radius: 0.15rem;
    color: #ffffff !important;
    font-family: "Cinzel", Georgia, serif;
    font-weight: 600;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}

.btn-artisan:hover,
.btn-artisan:focus-visible {
    background: var(--walnut-brown-dark);
    border-color: var(--walnut-brown-dark);
    color: #ffffff !important;
    transform: translateY(-1px);
}

.btn-artisan:active {
    transform: translateY(0);
}

.btn-artisan:disabled,
.btn-artisan.disabled {
    transform: none;
}

/*
 * [09] CARDS AND SURFACES
 */
.premium-card {
    width: 100%;
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: 0.35rem;
    box-shadow: var(--shadow-soft);
}

/*
 * [10] HOME-PAGE HERO AND SERVICE PRINCIPLES
 */

/* [10.01] Give the hero generous space without recreating the excessive blank
 * areas produced by the previous maintenance-page stylesheet. */
.home-hero {
    width: 100%;
    padding-block: clamp(3rem, 6vw, 6.5rem);
    background:
        radial-gradient(circle at 12% 18%, rgba(197, 168, 128, 0.13), transparent 34rem),
        var(--cream-soft);
}

/* [10.02] Allow the hero to use more desktop width than ordinary text sections
 * so the restoration image has the visual impact requested for the page. */
.home-hero-container {
    max-width: 92rem;
}

/* [10.03] Limit the copy width for comfortable reading and align it centrally
 * on small screens. */
.home-hero-copy {
    max-width: 34rem;
    margin-inline: auto;
}

.home-hero-kicker {
    color: var(--walnut-brown);
    font-size: clamp(0.82rem, 1vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.09em;
}

.home-hero-title {
    margin-bottom: 0.85rem;
    font-size: clamp(2.65rem, 5vw, 5.15rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
}

.home-hero-service-line {
    margin-bottom: 0;
    color: var(--text-muted-custom);
    font-size: clamp(1.1rem, 1.65vw, 1.55rem);
    line-height: 1.45;
}

.home-hero-divider {
    width: 7rem;
    height: 2px;
    margin-block: 1.5rem;
    margin-inline: auto;
    background: var(--warm-gold);
    opacity: 0.55;
}

.home-hero-summary {
    margin-bottom: 2rem;
    color: var(--text-muted-custom);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
}

/* [10.04] Frame the before-and-after image as the hero's premium focal point.
 * The fixed aspect ratio prevents layout movement while the image downloads. */
.home-hero-figure {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(61, 50, 37, 0.16);
    border-radius: 0.55rem;
    background: #d9c9b7;
    box-shadow: 0 1.75rem 4rem rgba(44, 36, 27, 0.22);
    isolation: isolate;
}

/* [10.05] Add a restrained inset border without obscuring the photograph. */
.home-hero-figure::after {
    position: absolute;
    inset: 0.55rem;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 0.25rem;
    content: "";
    pointer-events: none;
}

.home-hero-picture,
.home-hero-image {
    display: block;
    width: 100%;
}

.home-hero-image {
    aspect-ratio: 1672 / 941;
    height: auto;
    object-fit: cover;
}

#philosophy {
    width: 100%;
}

#philosophy .col-md-4 {
    padding-inline: clamp(1rem, 2vw, 2rem);
}

/* [10.06] On desktop, align the divider with the left edge of the hero copy. */
@media (min-width: 992px) {
    .home-hero-divider {
        margin-left: 0;
        margin-right: 0;
    }
}

/*
 * [11] RFQ FORM
 */
#rfq {
    width: 100%;
    scroll-margin-top: 6rem;
}

#rfq .form-control,
#rfq .form-select {
    min-height: 3.25rem;
    border: 1px solid transparent !important;
    border-radius: 0.4rem;
}

#rfq textarea.form-control {
    min-height: 9rem;
    resize: vertical;
}

#rfq .form-control:focus,
#rfq .form-select:focus {
    background-color: #ffffff !important;
    border-color: var(--warm-gold) !important;
    box-shadow: var(--focus-ring);
}

/*
 * [11.01] Keep database-driven furniture type options readable at every width.
 */
#rfq .btn-check + .btn {
    display: flex;
    min-height: 4.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    white-space: normal;
    line-height: 1.35;
}

#rfq .btn-check:focus-visible + .btn {
    border-color: var(--warm-gold-dark);
    box-shadow: var(--focus-ring);
}

#rfq .btn-check:checked + .btn-outline-secondary {
    background: var(--walnut-brown);
    border-color: var(--walnut-brown);
    color: #ffffff;
}

/*
 * [12] TABLES, MODALS, AND PORTAL CONTENT
 */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.modal-content {
    border-color: var(--border-soft);
}

/*
 * [13] SMALL-SCREEN ADJUSTMENTS
 */
@media (max-width: 767.98px) {
    body {
        font-size: 0.98rem;
    }

    .navbar-brand {
        font-size: 1rem;
    }

    /*
     * [13.01] Reduce the logo only on phones so it remains clear of the
     * navigation toggle while staying visibly larger than the earlier version.
     */
    .site-logo {
        width: 13rem;
        max-width: 68vw;
        height: auto;
    }

    /* [13.02] Tighten hero spacing on phones while preserving the full image. */
    .home-hero {
        padding-block: 2.5rem 3.25rem;
    }

    .home-hero-copy {
        margin-bottom: 0.5rem;
    }

    .home-hero-figure {
        border-radius: 0.35rem;
        box-shadow: 0 1rem 2.5rem rgba(44, 36, 27, 0.18);
    }

    .home-hero-figure::after {
        inset: 0.35rem;
    }

    #rfq {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    #rfq .premium-card {
        padding: 1.25rem !important;
    }

    #rfq .btn-check + .btn {
        min-height: 4.25rem;
        font-size: 0.95rem;
    }
}

/*
 * [14] REDUCED-MOTION SUPPORT
 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}