/* L5 Portable Structures - custom site styles (built out starting Phase 6) */

/* ---- Brand palette ----
   Colors sampled directly (via pixel-picking, not eyeballed) from the
   official L5 banner: badge/button red, a slightly darker red used for
   heading text, the blue used for "Rent-to-Own - No Credit Check!", and the
   green used for the feature checkmarks.

   Bootstrap 5.3's compiled CSS bakes theme colors into each component's own
   custom properties (e.g. --bs-btn-bg, --bs-primary-bg-subtle) at build
   time rather than referencing --bs-primary/--bs-info/--bs-success at
   runtime, so utility
   classes (.bg-primary, .text-primary, .link-primary) pick up a :root
   override automatically, but components (.btn-primary, .btn-info) need
   their own property overrides below too - both are done here, not by
   hand-editing colors on every element that uses them.

   --bs-warning and --bs-danger are deliberately left at Bootstrap's
   defaults: text-bg-warning marks "pending" status badges elsewhere
   (admin + public), and --bs-danger backs real error/destructive-action
   states - recoloring either to a brand color would blur an existing
   semantic meaning that has nothing to do with marketing/branding. --bs-info
   only backs the much rarer "coming soon"/"sending" statuses, where the
   brand blue reads naturally rather than colliding with anything. */
:root {
    --l5-red: #aa0000;
    --l5-red-dark: #8b0000;
    --l5-red-text: #b71c1a;
    --l5-red-light: #f5e6e6;
    --l5-red-border: #dcb3b3;

    --l5-blue: #4068b2;
    --l5-blue-dark: #33538e;
    --l5-blue-light: #e8edf7;
    --l5-blue-border: #c7d3ea;

    --l5-green: #00ad4e;
    --l5-green-dark: #008a3e;

    --bs-primary: var(--l5-red);
    --bs-primary-rgb: 170, 0, 0;
    --bs-primary-text-emphasis: var(--l5-red-text);
    --bs-primary-bg-subtle: var(--l5-red-light);
    --bs-primary-border-subtle: var(--l5-red-border);

    --bs-info: var(--l5-blue);
    --bs-info-rgb: 64, 104, 178;
    --bs-info-text-emphasis: var(--l5-blue-dark);
    --bs-info-bg-subtle: var(--l5-blue-light);
    --bs-info-border-subtle: var(--l5-blue-border);

    --bs-success: var(--l5-green);
    --bs-success-rgb: 0, 173, 78;
    --bs-success-text-emphasis: var(--l5-green-dark);

    --bs-link-color: var(--l5-red);
    --bs-link-color-rgb: 170, 0, 0;
    --bs-link-hover-color: var(--l5-red-dark);
    --bs-link-hover-color-rgb: 139, 0, 0;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--l5-red);
    --bs-btn-border-color: var(--l5-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--l5-red-dark);
    --bs-btn-hover-border-color: var(--l5-red-dark);
    --bs-btn-active-bg: var(--l5-red-dark);
    --bs-btn-active-border-color: var(--l5-red-dark);
    --bs-btn-disabled-bg: var(--l5-red);
    --bs-btn-disabled-border-color: var(--l5-red);
    --bs-btn-focus-shadow-rgb: 170, 0, 0;
}

.btn-outline-primary {
    --bs-btn-color: var(--l5-red);
    --bs-btn-border-color: var(--l5-red);
    --bs-btn-hover-bg: var(--l5-red);
    --bs-btn-hover-border-color: var(--l5-red);
    --bs-btn-active-bg: var(--l5-red);
    --bs-btn-active-border-color: var(--l5-red);
    --bs-btn-focus-shadow-rgb: 170, 0, 0;
}

/* Secondary CTAs (Subscribe, Get Updates, Browse Inventory) use .btn-info,
   recolored here to the brand blue - the same color the source banner uses
   for "Rent-to-Own - No Credit Check!", i.e. its own designated
   call-to-action accent, distinct from the primary red. */
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--l5-blue);
    --bs-btn-border-color: var(--l5-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--l5-blue-dark);
    --bs-btn-hover-border-color: var(--l5-blue-dark);
    --bs-btn-active-bg: var(--l5-blue-dark);
    --bs-btn-active-border-color: var(--l5-blue-dark);
    --bs-btn-disabled-bg: var(--l5-blue);
    --bs-btn-disabled-border-color: var(--l5-blue);
    --bs-btn-focus-shadow-rgb: 64, 104, 178;
}

.btn-outline-info {
    --bs-btn-color: var(--l5-blue);
    --bs-btn-border-color: var(--l5-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--l5-blue);
    --bs-btn-hover-border-color: var(--l5-blue);
    --bs-btn-active-bg: var(--l5-blue);
    --bs-btn-active-border-color: var(--l5-blue);
    --bs-btn-focus-shadow-rgb: 64, 104, 178;
}

/* ---- Header / footer ---- */
.navbar-brand-mark {
    height: 34px;
    width: auto;
}

footer.site-footer {
    background-color: #1c1414;
}

/* ---- Hero ---- */
.hero-brand {
    background: linear-gradient(135deg, var(--l5-red-dark), var(--l5-red) 65%, #b23a2e);
}

/* The cabin photo is a background on the inner .container, not the
   full-bleed .hero-brand, so its right edge lines up with the content
   below it (e.g. the Featured Inventory section) - both sit inside the
   same .container width/centering - rather than the viewport edge, which
   on wide screens is well past where the container actually ends. */
.hero-brand > .container {
    background-image: url('/assets/images/hero-cabin.webp');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
}

/* Below the point where the text column (col-lg-7) drops to full width,
   there's no clear space on the right for the cabin photo to sit without
   competing with the text - drop it entirely rather than just overriding
   background-image, since background-position/-size above are still in
   scope and (being single-layer here, unlike the old two-layer setup)
   would otherwise misapply to whatever's left. */
@media (max-width: 991.98px) {
    .hero-brand > .container {
        background-image: none;
    }
}

/* ---- Feature checkmarks (echoes the banner's checkmark treatment) ---- */
.feature-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--l5-green);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
}