/* ReplicaRegalia brand system — pulled from the live replicaregalia.com: Caudex/Open Sans
   (their actual Google Fonts), a forest-green + antique-gold heraldic palette grounded in the
   family coat of arms used in their own header, and a wax-seal red held in reserve for the one
   thing that should never blend in: the custom-commission call to action. */

:root {
    --rr-ink: #17231c;
    --rr-parchment: #f2ecda;
    --rr-parchment-deep: #e6dcbc;
    --rr-forest: #1e4634;
    --rr-forest-deep: #122c20;
    --rr-gold: #ad8a3f;
    --rr-gold-bright: #cda758;
    --rr-wax: #7a2426;
    --rr-hairline: #c9bc97;

    --rr-font-display: 'Caudex', Georgia, 'Times New Roman', serif;
    --rr-font-body: 'Open Sans', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--rr-font-body);
    color: var(--rr-ink);
    background: var(--rr-parchment);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--rr-font-display);
    font-weight: 700;
    color: var(--rr-ink);
    letter-spacing: -0.01em;
}

a { color: var(--rr-forest); }
a:hover { color: var(--rr-forest-deep); }

::selection { background: var(--rr-gold); color: var(--rr-ink); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ── Eyebrow / label utility (no third typeface — letterspaced Open Sans caps) ───────────── */
.rr-eyebrow {
    display: inline-block;
    font-family: var(--rr-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rr-gold);
}

/* ── Shield rule — the recurring signature mark, a simple drawn shield, not the family crest ── */
.rr-shield-rule {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0.9rem 0 1.6rem;
}
.rr-shield-rule::before,
.rr-shield-rule::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--rr-hairline);
}
.rr-shield-rule.rr-shield-rule--light::before,
.rr-shield-rule.rr-shield-rule--light::after {
    background: rgba(242, 236, 218, 0.35);
}
.rr-shield-rule svg { flex: 0 0 auto; display: block; }

/* ── Header / navbar ───────────────────────────────────────────────────────────────────── */
.rr-header {
    background: var(--rr-forest);
    border-bottom: 3px solid var(--rr-gold);
}
.rr-header .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--rr-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--rr-parchment) !important;
    letter-spacing: 0.02em;
}
.rr-header .navbar-brand img {
    height: 34px;
    width: auto;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.rr-header .nav-link {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(242, 236, 218, 0.82) !important;
    padding: 0.5rem 0.85rem !important;
}
.rr-header .nav-link:hover,
.rr-header .nav-link.active {
    color: var(--rr-gold-bright) !important;
}
.rr-header .dropdown-menu {
    background: var(--rr-forest-deep);
    border: 1px solid var(--rr-gold);
    border-radius: 0.25rem;
}
.rr-header .dropdown-item {
    color: var(--rr-parchment);
}
.rr-header .dropdown-item:hover,
.rr-header .dropdown-item:focus {
    background: var(--rr-forest);
    color: var(--rr-gold-bright);
}
.rr-header .cart-count {
    background: var(--rr-wax) !important;
    color: var(--rr-parchment) !important;
}
.rr-header .navbar-toggler {
    border-color: var(--rr-gold);
}
.rr-header .navbar-toggler-icon {
    filter: invert(1);
}

/* ── Admin/Vendor dark navbar — used with the Bootstrap "navbar-dark" text-color helper, which
   only sets light text colors and assumes something else supplies the dark background. */
.bg-rr-dark {
    background-color: var(--rr-forest-deep) !important;
}

/* ── Subtle highlight tint — staff message bubbles, pinned notes — also referenced but never
   defined, same gap as .bg-rr-dark above. */
.bg-rr-light {
    background-color: var(--rr-parchment-deep) !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────────────────────── */
.btn {
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: 0.2rem;
}
.btn-primary {
    background-color: var(--rr-forest);
    border-color: var(--rr-forest);
    color: var(--rr-parchment);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--rr-forest-deep);
    border-color: var(--rr-forest-deep);
    color: var(--rr-parchment);
}
.btn-outline-primary {
    color: var(--rr-forest);
    border-color: var(--rr-forest);
}
.btn-outline-primary:hover {
    background-color: var(--rr-forest);
    border-color: var(--rr-forest);
    color: var(--rr-parchment);
}
.btn-outline-secondary {
    color: var(--rr-ink);
    border-color: var(--rr-hairline);
}
.btn-outline-dark {
    color: var(--rr-ink);
    border-color: var(--rr-ink);
}

/* Reserved for the one action that should read as urgent/singular: request a commission. */
.btn-rr-wax {
    background-color: var(--rr-wax);
    border-color: var(--rr-wax);
    color: var(--rr-parchment);
}
.btn-rr-wax:hover {
    background-color: #5e1a1c;
    border-color: #5e1a1c;
    color: var(--rr-parchment);
}

/* ── Hero ───────────────────────────────────────────────────────────────────────────────── */
.rr-hero {
    position: relative;
    overflow: hidden;
    background: var(--rr-forest);
    color: var(--rr-parchment);
    padding: 4.5rem 1.5rem 4rem;
    border-radius: 0;
}
.rr-hero__row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
}
.rr-hero__crest {
    /* the family crest — a real <img>, not a ::before, so it can switch from an absolutely
       positioned translucent overlay (desktop, sits between the copy and Carl's photo) to a
       solid, normal-flow block that stacks in sequence with the rest of the row (mobile) via a
       plain media-query override, rather than needing two different rendering techniques.
       Position is relative to .rr-hero__row (inside .container), not .rr-hero itself (full-bleed
       / 100vw via .rr-bleed) — anchoring to the section let it drift from the actual content at
       wide viewports, where the container is much narrower than the section. Sized in vh, capped
       smaller than the row's own height so it can't creep up into the header above. */
    position: absolute;
    top: 50%;
    right: 26%;
    width: min(42vh, 320px);
    height: min(42vh, 320px);
    transform: translateY(-50%);
    object-fit: contain;
    opacity: 0.45;
    pointer-events: none;
}
.rr-hero__inner {
    max-width: 560px;
}
.rr-hero__photo {
    flex: 0 0 auto;
    max-width: 240px;
    width: 100%;
    border: 3px solid var(--rr-gold);
    box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.5);
}
.rr-hero h1 {
    color: var(--rr-parchment);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.05;
    margin-bottom: 1.1rem;
}
.rr-hero p.lead {
    color: rgba(242, 236, 218, 0.86);
    font-size: 1.1rem;
    max-width: 34rem;
}
.rr-hero .rr-hero-actions {
    margin-top: 1.75rem;
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
}

/* ── Section rhythm ─────────────────────────────────────────────────────────────────────── */
.rr-section { padding: 3.25rem 0; }
.rr-section--forest {
    background: var(--rr-forest);
    color: var(--rr-parchment);
}
.rr-section--forest h2 { color: var(--rr-parchment); }
.rr-section--forest p { color: rgba(242, 236, 218, 0.82); }

/* Break a section out of the Bootstrap .container it sits inside (Pages/Shared/_Layout.cshtml
   wraps @@RenderBody() in one) so hero/band sections can go full-bleed without restructuring the
   shared layout for every other page. */
.rr-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.rr-btn-gold {
    background-color: var(--rr-gold);
    border-color: var(--rr-gold);
    color: var(--rr-ink);
}
.rr-btn-gold:hover {
    background-color: var(--rr-gold-bright);
    border-color: var(--rr-gold-bright);
    color: var(--rr-ink);
}

/* ── Collection tiles (Knightly Orders / Historic & Unique / Bespoke) ─────────────────────── */
.rr-tile {
    display: block;
    position: relative;
    background: var(--rr-parchment-deep);
    border: 1px solid var(--rr-hairline);
    border-top: 3px solid var(--rr-gold);
    padding: 2rem 1.5rem;
    text-align: center;
    text-decoration: none;
    color: var(--rr-ink);
    height: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.rr-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -12px rgba(23, 35, 28, 0.35);
    border-top-color: var(--rr-wax);
    color: var(--rr-ink);
}
.rr-tile h3 {
    font-size: 1.3rem;
    margin: 0.4rem 0 0.5rem;
}
.rr-tile p {
    color: #4a4638;
    font-size: 0.92rem;
    margin-bottom: 0;
}
.rr-tile svg { color: var(--rr-gold); }

/* ── Featured work strip (Achievements / Accessories / Public Displays) ───────────────────── */
.rr-work figure { margin: 0; }
.rr-work img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--rr-hairline);
}
.rr-work figcaption {
    margin-top: 0.75rem;
}
.rr-work figcaption .rr-eyebrow { display: block; margin-bottom: 0.25rem; }

/* ── Testimonial ────────────────────────────────────────────────────────────────────────── */
.rr-testimonial {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}
.rr-testimonial blockquote {
    font-family: var(--rr-font-display);
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    line-height: 1.45;
    color: var(--rr-ink);
    margin-bottom: 1.25rem;
}
.rr-testimonial cite {
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--rr-forest);
}

/* ── Product cards / catalog ───────────────────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--rr-hairline);
    border-radius: 0.2rem;
}
.product-card-img {
    height: 220px;
    object-fit: cover;
    background: var(--rr-parchment-deep);
}
.product-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 0.2rem;
}
.badge.bg-light {
    background-color: var(--rr-parchment-deep) !important;
    color: var(--rr-ink) !important;
    border-color: var(--rr-hairline) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── Footer ─────────────────────────────────────────────────────────────────────────────── */
.rr-footer {
    background: var(--rr-forest-deep);
    color: rgba(242, 236, 218, 0.75);
    border-top: 3px solid var(--rr-gold);
}
.rr-footer a {
    color: rgba(242, 236, 218, 0.85);
    text-decoration: none;
}
.rr-footer a:hover { color: var(--rr-gold-bright); }
.rr-footer h6 {
    color: var(--rr-gold);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
.rr-footer .form-control {
    background: rgba(242, 236, 218, 0.08);
    border-color: rgba(242, 236, 218, 0.25);
    color: var(--rr-parchment);
}
.rr-footer .form-control::placeholder { color: rgba(242, 236, 218, 0.5); }

@media (max-width: 767.98px) {
    .rr-hero { padding: 3rem 1.25rem 2.75rem; text-align: center; }
    .rr-hero__row { flex-direction: column; gap: 1.75rem; }
    .rr-hero__inner { max-width: none; }
    .rr-hero .rr-hero-actions { justify-content: center; }
    .rr-hero__photo { max-width: 180px; }
    /* Solid and in normal flow here — stacks between the copy and Carl's photo like any other
       block, instead of the desktop treatment (absolutely positioned, translucent overlay behind
       the row) which has no sensible mobile equivalent once the row becomes a single column. */
    .rr-hero__crest {
        position: static;
        transform: none;
        width: 100%;
        max-width: 200px;
        height: auto;
        opacity: 1;
        margin: 0 auto;
    }
}