/* ===============================
   Lundquist Capital – Cardone-Style Theme
   =============================== */

:root {
    /* Base palette – light theme with Cardone-like feel */
    --color-bg: #f5f6fa;             /* page background */
    --color-bg-alt: #ffffff;         /* section background */
    --color-bg-muted: #e1e4eb;       /* alternate section */
    --color-surface: #ffffff;        /* cards / panels */
    --color-surface-alt: #ffffff;

    --color-text: #1f2430;           /* main text */
    --color-text-soft: #5c6475;      /* body / supporting */
    --color-heading: #121622;        /* headings */

    --color-accent: #d4af37;         /* Lundquist gold */
    --color-accent-soft: rgba(212, 175, 55, 0.18);

    --color-primary: #153b7b;        /* deep navy (buttons, links) */
    --color-primary-soft: rgba(21, 59, 123, 0.12);
    --color-danger: #e4483b;         /* red CTA (optional) */

    --color-border: #dde1ec;

    --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.12);

    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-pill: 999px;

    --container-width: 1120px;
    --spacing-section: 72px;

    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", sans-serif;
}

/* ===============================
   Global Reset & Base
   =============================== */

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

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4 {
    color: var(--color-heading);
    margin-top: 0;
}

/* ===============================
   Header & Navigation
   =============================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #ffffff;
    border-bottom: none;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 1px;
}

.brand-logo {
    height: 75px;         /* Cardone-like size */
    width: auto;
}

/* Text block next to the icon */
.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

/* Top line — matches Cardone's bold, geometric look */
.brand-line-1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.65rem;
    font-weight: 1000;         /* “Black” weight, close to Cardone */
    letter-spacing: 0.04em;   /* slightly expanded like CARDONE */
    text-transform: uppercase;
    color: #0e1525;           /* deep blue-black like their brand */
}

/* Bottom line — thin, spaced out, like “CAPITAL” under CARDONE */
.brand-line-2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;         /* lighter, more elegant */
    letter-spacing: 0.70em;   /* wide tracking like Cardone */
    text-transform: uppercase;
    color: #3b4254;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 26px;
    margin: 0;
    padding: 0;
    align-items: center;
}

.main-nav a {
    color: #2d3342;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
}

.main-nav a:hover {
    color: var(--color-primary);
}

/* ===============================
   Mobile nav toggle (checkbox + hamburger)
   =============================== */

/* Checkbox: functional but invisible */
.nav-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Label becomes the hamburger icon */
.nav-toggle-label {
    display: none;       /* shown only on small screens via media query */
    cursor: pointer;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    display: block;
    width: 22px;
    height: 2px;
    background: #2d3342;
    border-radius: 999px;
    position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-label span::before {
    top: -6px;
}

.nav-toggle-label span::after {
    top: 6px;
}

/* ===============================
   Hero – Cardone-style
   =============================== */

.hero {
    position: relative;
    padding: 80px 0 70px;
    min-height: 68vh;
    color: #ffffff;
    background-image:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.10)
        ),
        url("/assets/img/hero-building.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* subtle parallax on desktop */
    border-bottom: 1px solid #e3e7f2;
    overflow: hidden;
}

.hero-content {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2.5fr);
    gap: 40px;
    align-items: center;
}

/* Default eyebrow style (used on About, Portfolio, etc.) */
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-heading);   /* dark on light backgrounds */
    margin-bottom: 12px;
    text-shadow: none;
}

/* Metallic gold ONLY in the main hero */
.hero .eyebrow {
    font-weight: 700;
    letter-spacing: 0.25em;
    background: linear-gradient(
        90deg,
        #f9e7b2 0%,
        #f7d873 25%,
        #d4af37 50%,
        #f7d873 75%,
        #f9e7b2 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* fallback */
    text-shadow:
        0 1px 2px rgba(0,0,0,0.35),
        0 0 8px rgba(255, 215, 130, 0.25);
}

.hero-text h1 {
    font-size: 2.7rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #ffffff;
}

.hero-subtitle {
    font-size: 1.1rem;
    font-weight: 500;
    color: #f3f4fb;
    margin-bottom: 16px;
}

.hero-body {
    font-size: 0.98rem;
    color: #e1e4f2;
    max-width: 540px;
    line-height: 1.7;
}

.hero-actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Right side hero “panel” – simple white Cardone-style callout */
.hero-panel {
    display: flex;
    justify-content: flex-end;
}

.hero-card {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 16px;
    padding: 22px 20px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.85);
    max-width: 360px;
}

.hero-card h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
}

.hero-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--color-text-soft);
    font-size: 0.95rem;
}

.hero-list li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 16px;
}

.hero-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-primary);
}

/* ===============================
   Sections
   =============================== */

.section {
    padding: var(--spacing-section) 0;
    background: var(--color-bg-alt);
}

.section-alt {
    background: var(--color-bg-muted);
    border-top: 1px solid #dce0eb;
    border-bottom: 1px solid #dce0eb;
}

.section-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2.4fr);
    gap: 36px;
    align-items: flex-start;
}

.section-header {
    text-align: left;
    margin-bottom: 22px;
}

.section-header h2 {
    margin-bottom: 6px;
}

.section-header p {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 0.96rem;
}

/* ===============================
   Cards & Highlights (Portfolio, etc.)
   =============================== */

.value-card,
.highlight-box,
.card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 20px 20px 18px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
}

.value-card ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    color: var(--color-text-soft);
    font-size: 0.95rem;
}

.value-card li {
    margin-bottom: 8px;
}

.highlight-box p,
.highlight-box ul {
    color: var(--color-text-soft);
    font-size: 0.95rem;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* Base styling for glossy labels */
.card-status {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 999px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Shine overlay */
.card-status::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45%;
    background: rgba(255,255,255,0.65);
    border-radius: inherit;
    filter: blur(2px);
}

/* ACTIVE – Glossy Mint Green */
.status-active {
    background: linear-gradient(135deg, #d9fbe8, #b7f0d0);
    color: #056c47;
    border: 1px solid #a2e8c3;
}

/* LEGACY – Glossy Gold Cream */
.status-legacy {
    background: linear-gradient(135deg, #fff1c9, #f7d990);
    color: #7a5b0b;
    border: 1px solid #e8c66a;
}

/* FUTURE – Glossy Blue Future */
.status-future {
    background: linear-gradient(135deg, #e0e8ff, #c2d3ff);
    color: #234b98;
    border: 1px solid #b0c3ff;
}

.card h3 {
    margin-top: 0;
    margin-bottom: 6px;
}

.card p {
    font-size: 0.95rem;
    color: var(--color-text-soft);
}

.card-tagline {
    font-size: 0.83rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-soft);
}

.card-note {
    font-size: 0.85rem;
    font-style: italic;
}

.card-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.9rem;
}

.card-meta {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-soft);
    margin: 4px 0 10px;
}

/* Bulleted lists with softer look */

.bullet-list {
    color: var(--color-text-soft);
    font-size: 0.95rem;
    padding-left: 18px;
}

/* ===============================
   Page Hero (About, Portfolio, Legal, Contact)
   =============================== */

.page-hero {
    padding: 60px 0 26px;
    background: #ffffff;
    border-bottom: 1px solid #e3e7f2;
}

.page-subtitle {
    max-width: 680px;
    color: var(--color-text-soft);
    font-size: 0.96rem;
}

/* ===============================
   Contact
   =============================== */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 34px;
}

.contact-block {
    font-size: 0.95rem;
}

.contact-note {
    font-size: 0.9rem;
    color: var(--color-text-soft);
}

.contact-form {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 20px 18px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
}

.form-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

.form-row label {
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: var(--color-text-soft);
}

.form-row input,
.form-row select,
.form-row textarea {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #ccd2e1;
    padding: 8px 10px;
    color: var(--color-text);
    font: inherit;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px rgba(21, 59, 123, 0.16);
}

.form-note {
    font-size: 0.82rem;
    color: var(--color-text-soft);
    margin-top: 6px;
}

/* ===============================
   Buttons – Cardone-style Red/Blue + Gold
   =============================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    padding: 9px 20px;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease,
        background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    font-weight: 600;
}

/* Primary – strong red CTA (Cardone vibe) */
.btn-primary {
    background: linear-gradient(135deg, #f26d5c, #e4483b);
    color: #ffffff;
    border-color: #e4483b;
    box-shadow: 0 10px 24px rgba(228, 72, 59, 0.35);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(228, 72, 59, 0.45);
    text-decoration: none;
}

/* Secondary – white button with blue border/text */
.btn-outline {
    background: #ffffff;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline:hover {
    background: #f2f5ff;
    border-color: #102b5d;
    text-decoration: none;
}

/* Optional Gold CTA – use class="btn btn-gold" anywhere you want gold */
.btn-gold {
    background: linear-gradient(135deg, #f3d789, #d4af37);
    color: #1a1203;
    border-color: #d4af37;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20);
}

.btn-gold:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    text-decoration: none;
}

/* ===============================
   Footer – dark band like Cardone
   =============================== */

.site-footer {
    margin-top: 40px;
    background: #0b1020;
    color: #f4f5fb;
    padding-top: 28px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2.1fr 1.3fr 1.3fr;
    gap: 28px;
    font-size: 0.9rem;
}

/* Footer brand lockup – Cardone-style logo in the dark footer */
.footer-brand {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 1px;
}

.site-footer .brand-logo {
    height: 75px;          /* footer size */
    width: auto;
    transform: translateY(-16px);  /* raise the icon */
}

/* Make footer wordmark white like Cardone's footer */
.site-footer .brand-line-1,
.site-footer .brand-line-2 {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

/* Slightly soften the bottom line in the footer */
.site-footer .brand-line-2 {
    font-weight: 700;
    letter-spacing: 0.70em;
    opacity: 0.92;
}

/* Tagline text under the logo */
.footer-tagline {
    margin: 4px 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.site-footer h3,
.site-footer h4 {
    color: #ffffff;
    margin-top: 0;
}

.footer-small {
    font-size: 0.85rem;
    color: #c8ccdb;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
}

.footer-links li {
    margin-bottom: 4px;
}

.footer-links a {
    color: #e2e5f2;
}

.footer-links a:hover {
    color: #ffffff;
}

/* Make footer links/text white by default */
.site-footer a {
    color: #ffffff;
    text-decoration: none;
}

.site-footer a:hover {
    color: #f3d789;
    text-decoration: underline;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 16px;
    padding: 10px 0 16px;
    text-align: center;
    font-size: 0.8rem;
    color: #a9afc5;
}
.footer-social {
    margin-top: 12px;
}

.footer-social a {
    display: inline-block;
}

.social-icon {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-icon:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.footer-social {
    text-align: left; /* or center */
    margin-top: 16px;
}

/* ===============================
   Responsive
   =============================== */

@media (max-width: 900px) {
    .hero-content,
    .section-grid,
    .card-grid,
    .contact-grid,
    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero {
        padding: 60px 0 50px;
        min-height: 0;
        background-position: center top;
    }

    .hero-panel {
        justify-content: flex-start;
        margin-top: 18px;
    }

    .card-grid {
        gap: 18px;
    }

    /* Mobile nav layout */
    .main-nav {
        position: absolute;
        top: 70px;
        right: 0;
        left: 0;
        background: #ffffff;
        border-bottom: 1px solid #e4e7f0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.18s ease-out;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 20px 14px;
        gap: 10px;
    }

    /* Show the hamburger icon on mobile */
    .nav-toggle-label {
        display: block;
    }

    /* When the checkbox is checked, reveal menu */
    .nav-toggle:checked ~ .main-nav {
        max-height: 220px;
    }

    /* Slightly shrink the wordmark on small screens */
    .brand-logo {
        height: 52px;
    }
    .brand-line-1 {
        font-size: 1.3rem;
    }
    .brand-line-2 {
        font-size: 0.7rem;
        letter-spacing: 0.40em;
    }
}

@media (max-width: 600px) {
    .hero-text h1 {
        font-size: 2.1rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .section {
        padding: 56px 0;
    }
}

/* ===============================
   Toast Notification
   =============================== */

.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #153b7b; /* default if no type */
    color: #ffffff;
    padding: 12px 40px 12px 16px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    font-size: 0.95rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toast.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Success (green) and error (red) variants */
.toast-success {
    background: #15803d; /* green */
}

.toast-error {
    background: #b91c1c; /* red */
}

/* Toast close button */
.toast-close {
    position: absolute;
    top: 6px;
    right: 10px;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
/* ====================================================
   FINAL HEADER + FOOTER TWEAKS
   ==================================================== */

/* Header tweaks on tablets / phones */
@media (max-width: 900px) {
    .nav-container {
        padding: 0 14px;
        height: 64px;
    }

    .brand-logo {
        height: 56px;
    }

    .brand-line-1 {
        font-size: 1.35rem;
    }

    .brand-line-2 {
        font-size: 0.7rem;
        letter-spacing: 0.65em;
    }
    
    .hero {
        padding: 60px 0 50px;
        min-height: 0;
        background-position: center top;
        background-attachment: scroll; /* ✅ disable fixed background on mobile */
    }
}

@media (max-width: 600px) {
    .nav-container {
        padding: 0 12px;
        height: 60px;
    }

    .brand-logo {
        height: 48px;
    }

    .brand-line-1 {
        font-size: 1.1rem;
        letter-spacing: 0.03em;
    }

    .brand-line-2 {
        font-size: 0.62rem;
        letter-spacing: 0.35em;
    }
}

/* Mobile footer – left aligned (Cardone-style), clean spacing */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: left;
        gap: 22px;
    }

    .footer-brand {
        justify-content: flex-start;
    }

    .footer-brand .brand-logo {
        height: 52px;
    }

    .footer-tagline,
    .footer-small,
    .footer-links {
        text-align: left;
    }

    .footer-links {
        margin-top: 6px;
    }

    /* Add a little breathing room between sections */
    .site-footer h4 {
        margin-top: 10px;
    }
}

/* ====================================================
   MOBILE BRANDING TWEAKS – HEADER & FOOTER
   (place at the bottom of style.css)
   ==================================================== */

/* Tablet & mobile header – Cardone-style proportions */
@media (max-width: 768px) {
    .nav-container {
        height: 56px;
        padding: 0 14px;
    }

    .brand {
        gap: 1px;
    }

    .brand-logo {
        height: 60px;
    }

    .brand-line-1 {
        font-size: 1.15rem;
        font-weight: 900;
        letter-spacing: 0.06em;   /* a bit more like CARDONE */
    }

    .brand-line-2 {
        font-size: 0.62rem;
        letter-spacing: 0.50em;
        margin-top: 1px;
    }
}

/* Very small phones – tighten a bit more */
@media (max-width: 430px) {
    .nav-container {
        padding: 0 10px;
    }

    .brand-logo {
        height: 38px;
    }

    .brand-line-1 {
        font-size: 1.05rem;
        letter-spacing: 0.05em;
    }

    .brand-line-2 {
        font-size: 0.58rem;
        letter-spacing: 0.30em;
    }
}

/* Mobile footer – same logo lockup style on dark background */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .footer-brand {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .footer-brand .brand-logo {
        height: 46px;
    }

    .footer-brand .brand-line-1 {
        font-size: 1.15rem;
        font-weight: 900;
        letter-spacing: 0.06em;
    }

    .footer-brand .brand-line-2 {
        font-size: 0.62rem;
        letter-spacing: 0.32em;
    }

    .footer-tagline,
    .footer-small,
    .footer-links {
        text-align: left;
    }

    .site-footer h4 {
        margin-top: 8px;
    }
}

/* ==========================================
   Improved Mobile Footer Brand Alignment
   ========================================== */

@media (max-width: 768px) {

    /* Align logo + wordmark perfectly */
    .footer-brand {
        display: flex;
        align-items: center;     /* vertical centering */
        gap: 1px;
        margin-bottom: 12px;
    }

    .footer-brand .brand-logo {
        height: 60px;
        width: auto;
        transform: translateY(0); /* remove old negative offset */
    }

    /* Tighten the typography next to the logo */
    .footer-brand .brand-text {
        display: flex;
        flex-direction: column;
        justify-content: center;  /* vertically center lines */
        line-height: 1.05;
    }

    .footer-brand .brand-line-1 {
        font-size: 1.18rem;
        font-weight: 900;
        letter-spacing: 0.05em;
        margin: 0;
    }

    .footer-brand .brand-line-2 {
        font-size: 0.63rem;
        letter-spacing: 0.50em;
        margin-top: 2px;
        opacity: 0.92;
    }
}

@media (max-width: 900px) {
    .site-header {
        position: relative;  /* 👈 no more sticky on mobile */
        top: auto;
        left: auto;
        right: auto;
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06); /* you can set this to 'none' if you prefer no shadow */
    }
}

/* ===============================
   Breadcrumbs
   =============================== */

.breadcrumbs {
    font-size: 0.85rem;
    margin: 8px 0 0;
    background: #f5f6fa; /* subtle band like in your screenshot */
    padding: 8px 0;
}

.breadcrumbs ol {
    list-style: none;             /* remove numbers */
    padding: 0;
    margin: 0;
    display: flex;                /* lay items out in a row */
    flex-wrap: wrap;
    gap: 6px;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.breadcrumbs li::after {
    content: "›";                 /* separator arrow */
    font-size: 0.8rem;
    color: var(--color-text-soft);
}

.breadcrumbs li:last-child::after {
    content: "";                  /* no arrow after last item */
}

.breadcrumbs a {
    color: var(--color-primary);
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
    color: var(--color-primary);
}

/* Article meta (date, author, tags) */
.article-meta {
    font-size: 0.85rem;
    color: var(--color-text-soft);
    margin: 8px 0 0;
}

.article-meta span + span::before {
    content: "·";
    margin: 0 6px;
    color: var(--color-text-soft);
}