/* ==========================================================================
   Bylaw — public website theme
   Plain, hand-written CSS. No build step required (no Tailwind/PostCSS/Vite).
   Loaded directly via <link> after Bootstrap 5 CDN CSS.
   ========================================================================== */

:root {
    --navy-950: #060f1e;
    --navy-900: #0b1b33;
    --navy-800: #132b4d;
    --navy-700: #1c3b66;
    --navy-600: #2a4d80;
    --navy-100: #e7ecf4;
    --navy-50: #f4f6fa;

    --gold-600: #a97b2f;
    --gold-500: #c8973f;
    --gold-400: #e8c375;
    --gold-300: #f2d9a1;
    --gold-100: #faf1de;

    --ink-900: #14181f;
    --ink-700: #3c4453;
    --ink-500: #6b7280;
    --ink-200: #e4e7ec;
    --ink-100: #f1f3f6;

    --font-display: 'Fraunces', ui-serif, Georgia, serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

    --shadow-premium: 0 20px 60px -20px rgba(11, 27, 51, 0.35);

    /* Re-theme Bootstrap's own CSS variables to the Bylaw palette (Bootstrap 5.3+) */
    --bs-primary: var(--navy-900);
    --bs-primary-rgb: 11, 27, 51;
    --bs-link-color: var(--gold-600);
    --bs-link-color-rgb: 169, 123, 47;
    --bs-link-hover-color: var(--gold-500);
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--ink-900);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--ink-900);
    background-color: #fff;
}

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

a {
    text-decoration: none;
}

[x-cloak], .js-cloak {
    display: none !important;
}

/* ---------- Color utilities ---------- */
.bg-navy-950 { background-color: var(--navy-950) !important; }
.bg-navy-900 { background-color: var(--navy-900) !important; }
.bg-navy-800 { background-color: var(--navy-800) !important; }
.bg-navy-50  { background-color: var(--navy-50) !important; }
.bg-gold-500 { background-color: var(--gold-500) !important; }
.bg-gold-100 { background-color: var(--gold-100) !important; }

.text-navy-900 { color: var(--navy-900) !important; }
.text-gold-400 { color: var(--gold-400) !important; }
.text-gold-500 { color: var(--gold-500) !important; }
.text-gold-600 { color: var(--gold-600) !important; }
.text-ink-500  { color: var(--ink-500) !important; }
.text-ink-700  { color: var(--ink-700) !important; }
.text-white-60 { color: rgba(255, 255, 255, 0.6) !important; }
.text-white-70 { color: rgba(255, 255, 255, 0.7) !important; }
.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }

.border-ink-200 { border-color: var(--ink-200) !important; }

.hover-gold:hover { color: var(--gold-400) !important; }

/* ---------- Buttons ---------- */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background-color: var(--gold-500);
    color: var(--navy-950);
    border: none;
    border-radius: 50px;
    padding: .75rem 1.75rem;
    font-weight: 600;
    font-size: .9rem;
    transition: all .2s ease;
}
.btn-gold:hover { background-color: var(--gold-400); color: var(--navy-950); transform: translateY(-2px); }

.btn-navy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background-color: var(--navy-900);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: .75rem 1.75rem;
    font-weight: 600;
    font-size: .9rem;
    transition: all .2s ease;
}
.btn-navy:hover { background-color: var(--navy-800); color: #fff; transform: translateY(-2px); }

.btn-outline-navy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: transparent;
    color: var(--navy-900);
    border: 1px solid var(--navy-900);
    border-radius: 50px;
    padding: .7rem 1.65rem;
    font-weight: 600;
    font-size: .9rem;
    transition: all .2s ease;
}
.btn-outline-navy:hover { background-color: var(--navy-900); color: #fff; }

.btn-outline-light-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    padding: .75rem 1.75rem;
    font-weight: 600;
    font-size: .9rem;
    transition: all .2s ease;
}
.btn-outline-light-premium:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* ---------- Typography helpers ---------- */
.section-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--gold-600);
}
.section-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--navy-900);
    font-size: 1.9rem;
}
@media (min-width: 992px) {
    .section-title { font-size: 2.35rem; }
}

/* ---------- Shadows / radii ---------- */
.shadow-premium { box-shadow: var(--shadow-premium) !important; }
.radius-lg { border-radius: 1.25rem !important; }
.radius-xl { border-radius: 1.75rem !important; }
.radius-2xl { border-radius: 2rem !important; }

/* ---------- Scroll reveal ---------- */
.fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Utility bar + navbar ---------- */
.utility-bar {
    background-color: var(--navy-950);
    color: rgba(255, 255, 255, 0.8);
    font-size: .8rem;
}
.utility-bar a { color: inherit; }
.utility-bar a:hover { color: var(--gold-400); }

.website-navbar {
    background-color: rgba(255, 255, 255, 0.97);
    box-shadow: 0 2px 20px rgba(11, 27, 51, 0.06);
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 1rem 0;
    transition: padding .25s ease, box-shadow .25s ease;
}
.website-navbar.is-scrolled {
    padding: .5rem 0;
    box-shadow: 0 10px 30px -15px rgba(11, 27, 51, 0.25);
}
.website-navbar .navbar-brand img { height: 44px; width: auto; object-fit: contain; }
.website-nav-link {
    color: var(--navy-900);
    font-weight: 500;
    font-size: .93rem;
    padding: .5rem .9rem !important;
}
.website-nav-link:hover, .website-nav-link.active { color: var(--gold-600); }

.mega-dropdown {
    border: none;
    border-radius: 1rem;
    box-shadow: var(--shadow-premium);
    padding: 1.25rem;
    width: 620px;
    max-width: 90vw;
}
.mega-dropdown .dropdown-item {
    border-radius: .6rem;
    padding: .55rem .75rem;
    color: var(--ink-700);
}
.mega-dropdown .dropdown-item:hover { background-color: var(--navy-50); color: var(--navy-900); }
.mega-dropdown .dropdown-item i { color: var(--gold-600); }

/* ---------- Hero ---------- */
.hero-section {
    position: relative;
    overflow: hidden;
    background-color: var(--navy-950);
    background-image:
        radial-gradient(circle at 15% 20%, rgba(200, 151, 63, 0.25), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(28, 59, 102, 0.5), transparent 45%);
    padding: 5rem 0;
}
@media (min-width: 992px) {
    .hero-section { padding: 7rem 0; }
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, 0.1);
    color: var(--gold-300);
    border-radius: 50px;
    padding: .4rem 1rem;
    font-size: .78rem;
    font-weight: 500;
}
.hero-heading {
    font-family: var(--font-display);
    color: #fff;
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 1.15;
}
@media (min-width: 992px) {
    .hero-heading { font-size: 3.2rem; }
}
.hero-image-wrap {
    position: relative;
}
.hero-image-wrap::before {
    content: '';
    position: absolute;
    inset: -1.5rem;
    background: rgba(200, 151, 63, 0.1);
    filter: blur(30px);
    border-radius: 2rem;
    z-index: 0;
}
.hero-image-wrap img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 32rem;
    margin: 0 auto;
    display: block;
    border-radius: 1.75rem;
    box-shadow: var(--shadow-premium);
}

/* ---------- Cards ---------- */
.card-premium {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 1.25rem;
    padding: 1.75rem;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
    height: 100%;
}
.card-premium:hover {
    box-shadow: var(--shadow-premium);
    transform: translateY(-4px);
}
.card-premium.hover-gold-border:hover { border-color: var(--gold-400); }
.card-icon-navy {
    height: 3rem;
    width: 3rem;
    border-radius: .85rem;
    background: var(--navy-900);
    color: var(--gold-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1.1rem;
    transition: all .25s ease;
}
.card-premium:hover .card-icon-navy {
    background: var(--gold-500);
    color: var(--navy-950);
}
.icon-circle-gold {
    height: 3.5rem;
    width: 3.5rem;
    border-radius: 50%;
    background: var(--gold-100);
    color: var(--gold-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
}

/* ---------- Stats ---------- */
.stat-number {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2.1rem;
    color: var(--gold-400);
}
@media (min-width: 992px) { .stat-number { font-size: 2.5rem; } }

/* ---------- Process steps ---------- */
.step-circle {
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    background: var(--navy-900);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 auto;
    position: relative;
}
.step-circle .step-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    height: 1.75rem;
    width: 1.75rem;
    border-radius: 50%;
    background: var(--gold-500);
    color: var(--navy-950);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}

/* ---------- Testimonial carousel ---------- */
.testimonial-section {
    background-color: var(--navy-950);
    position: relative;
    overflow: hidden;
}
.testimonial-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(200, 151, 63, 0.2), transparent 40%);
}
.testimonial-quote {
    font-family: var(--font-display);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.35rem;
    line-height: 1.6;
}
@media (min-width: 992px) { .testimonial-quote { font-size: 1.6rem; } }
.testimonial-avatar {
    height: 2.75rem;
    width: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
}
.testimonial-avatar-fallback {
    height: 2.75rem;
    width: 2.75rem;
    border-radius: 50%;
    background: var(--gold-500);
    color: var(--navy-950);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.carousel-indicators-gold [data-bs-target] {
    background-color: rgba(255, 255, 255, 0.3);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.carousel-indicators-gold .active {
    background-color: var(--gold-500);
    width: 24px;
    border-radius: 50px;
}

/* ---------- FAQ accordion ---------- */
.accordion-premium .accordion-item {
    border: 1px solid var(--ink-200);
    border-radius: 1rem !important;
    overflow: hidden;
    margin-bottom: .75rem;
}
.accordion-premium .accordion-button {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--navy-900);
    padding: 1.1rem 1.5rem;
}
.accordion-premium .accordion-button:not(.collapsed) {
    background-color: #fff;
    color: var(--navy-900);
    box-shadow: none;
}
.accordion-premium .accordion-button:focus { box-shadow: none; }
.accordion-premium .accordion-button::after {
    background-image: none;
    content: '\002B';
    font-size: 1.4rem;
    color: var(--gold-600);
    transition: transform .2s ease;
    width: auto;
    height: auto;
}
.accordion-premium .accordion-button:not(.collapsed)::after {
    transform: rotate(45deg);
    content: '\002B';
}
.accordion-premium .accordion-body {
    color: var(--ink-500);
    padding: 0 1.5rem 1.25rem;
}

/* ---------- CTA banner ---------- */
.cta-banner {
    position: relative;
    overflow: hidden;
    background-color: var(--navy-900);
    border-radius: 2rem;
    padding: 4rem 2rem;
}
@media (min-width: 992px) { .cta-banner { padding: 4.5rem 4rem; } }
.cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(200, 151, 63, 0.3), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(28, 59, 102, 0.6), transparent 45%);
}
.cta-banner > * { position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.website-footer {
    background-color: var(--navy-950);
    color: rgba(255, 255, 255, 0.8);
}
.website-footer h6 {
    color: #fff;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.website-footer a { color: rgba(255, 255, 255, 0.6); }
.website-footer a:hover { color: var(--gold-400); }
.footer-social-icon {
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    transition: all .2s ease;
}
.footer-social-icon:hover {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--navy-950);
}
.footer-logo { height: 40px; filter: brightness(0) invert(1); }

.floating-call-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1040;
    height: 3.5rem;
    width: 3.5rem;
    border-radius: 50%;
    background: var(--gold-500);
    color: var(--navy-950);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: var(--shadow-premium);
}
.floating-call-btn:hover { background: var(--gold-400); color: var(--navy-950); }

/* ---------- Rich text content (CKEditor output) ---------- */
.rich-content h2, .rich-content h3 {
    font-family: var(--font-display);
    color: var(--navy-900);
    margin-top: 1.5rem;
    margin-bottom: .75rem;
}
.rich-content p { margin-bottom: 1rem; }
.rich-content ul, .rich-content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.rich-content li { margin-bottom: .35rem; }
.rich-content a { color: var(--gold-600); text-decoration: underline; }
.rich-content table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.rich-content table td, .rich-content table th { border: 1px solid var(--ink-200); padding: .5rem; }
.rich-content-inline p { display: inline; margin: 0; }

/* ---------- Auth (login/register) ---------- */
.auth-section {
    position: relative;
    overflow: hidden;
    background-color: var(--navy-950);
    background-image:
        radial-gradient(circle at 20% 20%, rgba(200, 151, 63, 0.25), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(28, 59, 102, 0.6), transparent 45%);
    padding: 5rem 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
}
.auth-card {
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: var(--shadow-premium);
    overflow: hidden;
    max-width: 440px;
    margin: 0 auto;
}
.auth-card-header {
    background: var(--navy-900);
    color: #fff;
    text-align: center;
    padding: 2rem 1.5rem;
}
.auth-step-dot {
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 50%;
    background: var(--ink-100);
    color: var(--ink-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .9rem;
    transition: all .2s ease;
}
.auth-step-dot.active { background: var(--navy-900); color: #fff; }
.auth-step-line { height: 2px; width: 2.5rem; background: var(--ink-200); }
.auth-step-line.active { background: var(--navy-900); }
.otp-input-premium {
    letter-spacing: .5em;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
}