/*
 * ========================================================
 *  Axios Mortgage — Shared Brand Stylesheet
 *  Source of truth: axiosmortgagefunding.com
 *
 *  Color palette:
 *    Background  : #ffffff  (white)
 *    Surface     : #f5f6f7  (light gray)
 *    Primary/CTA : #32373c  (dark slate — matches AMF buttons)
 *    Text        : #1f2937  (near-black)
 *    Body text   : #374151  (dark gray)
 *    Muted text  : #6b7280  (medium gray)
 *    Border      : #e5e7eb  (light border)
 *
 *  Fonts: Space Grotesk (headings) + DM Sans (body)
 *  — retained for quality; AMF uses system fonts only
 * ========================================================
 */

/* ── 1. CSS Variable Overrides ─────────────────────────── */

:root {
    --ink:        #ffffff;          /* was dark navy  → page background  */
    --slate:      #f5f6f7;          /* was dark blue  → light surface    */
    --steel:      #e5e7eb;          /* was dark card  → light border     */
    --fog:        #6b7280;          /* muted text — works on white       */
    --cloud:      #374151;          /* was light-on-dark → dark-on-white */
    --snow:       #f9fafb;          /* very light gray section bg        */
    --white:      #111827;          /* was #fff (invisible on white bg) → now heading dark */
    --gold:       #32373c;          /* PRIMARY: Axios dark slate         */
    --gold-light: #555b61;          /* primary hover                     */
    --gold-dim:   rgba(50,55,60,0.07); /* subtle primary tint            */
    --emerald:    #0d7f3f;
    --red:        #dc3545;
    --red-dim:    rgba(220,53,69,0.10);

    /* Explicit additions for clarity */
    --text-heading: #111827;
    --border:       #e5e7eb;
    --bg-page:      #ffffff;
    --bg-surface:   #f5f6f7;
}


/* ── 2. Body & Global ──────────────────────────────────── */

body {
    background-color: var(--bg-page) !important;
    color: var(--cloud) !important;
}


/* ── 3. Headings ───────────────────────────────────────── */
/*  Pages define  h1-h4 { color: var(--white) }
    On a white bg that's invisible — force dark.             */

h1, h2, h3, h4, h5, h6 {
    color: var(--text-heading) !important;
}

/* Specific overrides that use color: var(--white) inline */
.deal-borrower,
.deal-amount,
.modal-title,
.step-content h4,
.column-title,
.logo {
    color: var(--text-heading) !important;
}


/* ── 4. Navigation ─────────────────────────────────────── */

nav {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* Logo image styles — Axios Mortgage Funding LLC */
.logo,
.logo-link {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    font-size: 0 !important;  /* hide any fallback text */
}

.logo img,
.logo-link img {
    height: 50px !important;
    width: auto !important;
    display: block !important;
}

.logo span,
.logo-link span {
    display: none !important;   /* hide old "OS" span */
}

.nav-tag {
    color: var(--fog) !important;
}

.nav-left {
    display: flex !important;
    align-items: center !important;
    gap: 2rem !important;
}

.nav-links {
    display: flex !important;
    gap: 0.25rem !important;
}

.nav-links a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--fog) !important;
    text-decoration: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
}

.nav-links a:hover {
    background: var(--gold-dim) !important;
    color: var(--cloud) !important;
}

.nav-links a.active {
    color: var(--gold) !important;
    background: var(--gold-dim) !important;
}

/* Nav CTA button */
.nav-cta {
    background: var(--gold) !important;
    color: #ffffff !important;
}
.nav-cta:hover {
    background: var(--gold-light) !important;
    color: #ffffff !important;
}

/* Pipeline "New Deal" button */
.btn-new-deal {
    background: var(--gold) !important;
    color: #ffffff !important;
}
.btn-new-deal:hover {
    background: var(--gold-light) !important;
    color: #ffffff !important;
}

/* Generic primary buttons on index page */
nav a[style*="background: var(--gold)"],
nav a[style*="background:var(--gold)"] {
    background: var(--gold) !important;
    color: #ffffff !important;
}


/* ── 5. Hero Section ───────────────────────────────────── */

/* Remove dark-theme glow effects */
.hero::before,
.closing::before,
.final-cta::before {
    display: none !important;
}

.hero-label {
    color: var(--gold) !important;
}

.hero-label::before {
    background: var(--gold) !important;
}

.hero h1 em,
.hero h1 span {
    color: var(--gold) !important;
}

.hero-sub {
    color: var(--fog) !important;
}

/* Stats row */
.stats {
    border-top: 1px solid var(--border) !important;
}

.stat-number {
    color: var(--gold) !important;
}

.stat-label {
    color: var(--fog) !important;
}

/* Trust row */
.trust-row {
    border-top: 1px solid var(--border) !important;
}

.trust-number {
    color: var(--gold) !important;
}

.trust-label {
    color: var(--fog) !important;
}


/* ── 6. CTA Buttons ────────────────────────────────────── */

.cta-btn {
    background: var(--gold) !important;
    color: #ffffff !important;
}
.cta-btn:hover {
    background: var(--gold-light) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.cta-sub {
    color: var(--fog) !important;
}


/* ── 7. Feature Cards ──────────────────────────────────── */

.feature-card {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.feature-card:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

.feature-card.featured {
    background: var(--bg-surface) !important;
    border-color: var(--steel) !important;
}

.feature-icon {
    background: var(--gold-dim) !important;
    color: var(--gold) !important;
}


/* ── 8. Divider Section ────────────────────────────────── */

.divider-section::before {
    background: linear-gradient(to bottom, transparent, var(--gold), transparent) !important;
}

.divider-quote {
    color: var(--cloud) !important;
}

.divider-quote em {
    color: var(--gold) !important;
}


/* ── 9. Metrics Section ────────────────────────────────── */

.metrics {
    background: var(--bg-surface) !important;
}

.metrics-text h2,
.metrics-text p {
    color: inherit;
}

.metric-row {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
}

.metric-row .label {
    color: var(--cloud) !important;
}

.metric-row .value {
    color: var(--gold) !important;
}


/* ── 10. Stat Chips (Pipeline) ─────────────────────────── */

.stat-chip {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.stat-chip .label {
    color: var(--fog) !important;
}

.stat-chip .value {
    color: var(--gold) !important;
}

.stats-bar {
    border-bottom: 1px solid var(--border) !important;
    background: var(--bg-surface) !important;
}


/* ── 11. Pipeline Filters ──────────────────────────────── */

.filters-bar {
    border-bottom: 1px solid var(--border) !important;
    background: #ffffff !important;
}

.filter-label {
    color: var(--fog) !important;
}

.filter-select,
.filter-input {
    background: #ffffff !important;
    color: var(--cloud) !important;
    border: 1px solid var(--steel) !important;
}

.filter-select:focus,
.filter-input:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px var(--gold-dim) !important;
}

.filter-select option {
    background: #ffffff !important;
    color: var(--cloud) !important;
}

.filter-clear {
    color: var(--fog) !important;
}

.filter-clear:hover {
    background: var(--gold-dim) !important;
    color: var(--cloud) !important;
}


/* ── 12. Pipeline Board ────────────────────────────────── */

.pipeline-board {
    background: var(--bg-surface) !important;
}

.pipeline-column {
    border-right: 1px solid var(--border) !important;
    background: var(--bg-surface) !important;
}

.column-header {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border) !important;
}

.column-title {
    color: var(--fog) !important;
}

.column-count {
    background: var(--gold-dim) !important;
    color: var(--gold) !important;
}

.column-amount {
    color: var(--fog) !important;
}

.column-cards.drag-over {
    background: var(--gold-dim) !important;
}

.empty-column {
    color: var(--steel) !important;
}


/* ── 13. Deal Cards (Pipeline) ─────────────────────────── */

.deal-card {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.deal-card:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08) !important;
    transform: translateY(-1px);
}

.deal-address {
    color: var(--fog) !important;
}

.deal-footer {
    border-top: 1px solid var(--border) !important;
}

.deal-days {
    color: var(--fog) !important;
}

.deal-days.warning {
    color: #b45309 !important;   /* amber — readable on white */
}

.deal-action-btn {
    color: var(--fog) !important;
}

.deal-action-btn:hover {
    background: var(--gold-dim) !important;
    color: var(--cloud) !important;
}

.deal-action-btn.move-forward:hover {
    color: var(--emerald) !important;
}

.deal-action-btn.move-back:hover {
    color: var(--gold) !important;
}

.deal-action-btn.delete:hover {
    color: var(--red) !important;
}


/* ── 14. Modal ─────────────────────────────────────────── */

.modal {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}

.modal-actions {
    border-top: 1px solid var(--border) !important;
}

.btn-cancel {
    color: var(--fog) !important;
    border: 1px solid var(--steel) !important;
}

.btn-cancel:hover {
    background: var(--bg-surface) !important;
    color: var(--cloud) !important;
}

.btn-submit {
    background: var(--gold) !important;
    color: #ffffff !important;
}

.btn-submit:hover {
    background: var(--gold-light) !important;
}

/* Stage buttons in deal detail */
.stage-btn {
    background: var(--bg-surface) !important;
    color: var(--fog) !important;
    border: 1px solid var(--border) !important;
}

.stage-btn:hover {
    border-color: var(--gold) !important;
    color: var(--cloud) !important;
}

.stage-btn.active {
    background: var(--gold-dim) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}

.detail-field-label {
    color: var(--fog) !important;
}


/* ── 15. Form Inputs ───────────────────────────────────── */

.form-input,
.form-select,
.form-textarea {
    background: #ffffff !important;
    color: var(--cloud) !important;
    border: 1px solid var(--steel) !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px var(--gold-dim) !important;
}

.form-select option {
    background: #ffffff !important;
    color: var(--cloud) !important;
}

.form-label {
    color: var(--fog) !important;
}

.form-hint {
    color: var(--fog) !important;
}


/* ── 16. Highlight Box (Content Pages) ─────────────────── */

.highlight-box {
    background: var(--bg-surface) !important;
    border: 1px solid var(--steel) !important;
    border-left: 4px solid var(--gold) !important;
}

.highlight-box h4 {
    color: var(--gold) !important;
}

.highlight-box p {
    color: var(--cloud) !important;
}


/* ── 17. Comparison Table ──────────────────────────────── */

.comparison-table-wrapper {
    border: 1px solid var(--border) !important;
}

.comparison-table thead {
    background: var(--gold) !important;
}

.comparison-table th {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

.comparison-table td {
    border-bottom: 1px solid var(--border) !important;
    color: var(--cloud) !important;
}

.comparison-table tbody tr:hover {
    background: var(--bg-surface) !important;
}

.comparison-table .tag-pro {
    background: rgba(13, 127, 63, 0.12) !important;
    color: var(--emerald) !important;
}

.comparison-table .tag-con {
    background: rgba(220, 53, 69, 0.10) !important;
    color: var(--red) !important;
}


/* ── 18. Steps ─────────────────────────────────────────── */

.step-num {
    background: var(--gold-dim) !important;
    color: var(--gold) !important;
}


/* ── 19. Case Study ────────────────────────────────────── */

.case-study {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
}

.case-study h3 {
    color: var(--gold) !important;
}

.case-metric {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
}

.case-metric .val {
    color: var(--gold) !important;
}

.case-metric .lbl {
    color: var(--fog) !important;
}


/* ── 20. Inline CTA / Final CTA ────────────────────────── */

.inline-cta {
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
}

.inline-cta p {
    color: var(--fog) !important;
}

.final-cta p {
    color: var(--fog) !important;
}

.section-divider {
    background: linear-gradient(to bottom, transparent, var(--gold), transparent) !important;
}


/* ── 21. FAQ ────────────────────────────────────────────── */

.faq-item {
    border-bottom: 1px solid var(--border) !important;
}

.faq-item h3 {
    color: var(--text-heading) !important;
}

.faq-item p {
    color: var(--fog) !important;
}


/* ── 22. Closing Section ───────────────────────────────── */

.closing {
    background: var(--bg-surface) !important;
}

.closing h2 {
    color: var(--text-heading) !important;
}

.closing p {
    color: var(--fog) !important;
}


/* ── 23. Footer ────────────────────────────────────────── */

footer {
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border) !important;
}

footer p {
    color: var(--fog) !important;
}

footer a {
    color: var(--cloud) !important;
    text-decoration: none;
}

footer a:hover {
    color: var(--gold) !important;
    text-decoration: underline;
}


/* ── 24. Section Backgrounds ───────────────────────────── */

.features {
    background: #ffffff;
}

.metrics {
    background: var(--bg-surface) !important;
}

/* Remove gold-tinted gradient on metrics */
.metrics[style],
section.metrics {
    background: var(--bg-surface) !important;
}


/* ── 25. Content Section (Long-form pages) ─────────────── */

.content-section p,
.content-section li {
    color: var(--cloud) !important;
}

.content-section a {
    color: var(--gold) !important;
}

.content-section a:hover {
    color: var(--gold-light) !important;
}


/* ── 26. Privacy / Terms Pages ─────────────────────────── */

.container a {
    color: var(--gold) !important;
}

.container a:hover {
    color: var(--gold-light) !important;
}

.updated {
    color: var(--fog) !important;
}


/* ── 27. Favicon / OG Image Visual Fix ─────────────────── */
/* Note: OG meta tag images use placehold.co with old colors —
   those are updated directly in HTML.                        */


/* ── 28. Term Sheet Lead Capture Form ──────────────────── */

.term-sheet-section {
    padding: 5rem 2rem;
    background: var(--bg-page);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.term-sheet-inner {
    max-width: 780px;
    margin: 0 auto;
}

.term-sheet-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.term-sheet-label::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--gold);
    display: block;
}

.term-sheet-section h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--text-heading) !important;
    margin-bottom: 0.75rem;
}

.term-sheet-section .ts-sub {
    font-size: 1rem;
    color: var(--fog);
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.ts-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.ts-form .full-width {
    grid-column: span 2;
}

.ts-form label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 0.4rem;
    letter-spacing: 0.3px;
}

.ts-form input,
.ts-form select,
.ts-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--text-heading);
    background: var(--bg-page);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.ts-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.ts-form input:focus,
.ts-form select:focus,
.ts-form textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(50, 55, 60, 0.08);
}

.ts-form input::placeholder,
.ts-form textarea::placeholder {
    color: var(--fog);
    opacity: 0.7;
}

.ts-form textarea {
    resize: vertical;
    min-height: 100px;
}

.ts-submit-btn {
    width: 100%;
    padding: 1rem 2rem;
    background: var(--gold);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    margin-top: 0.5rem;
}

.ts-submit-btn:hover:not(:disabled) {
    background: var(--gold-light);
}

.ts-submit-btn:active:not(:disabled) {
    transform: scale(0.99);
}

.ts-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ts-form-message {
    display: none;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 0.75rem;
    grid-column: span 2;
}

.ts-form-message.success {
    background: rgba(13, 127, 63, 0.08);
    border: 1px solid rgba(13, 127, 63, 0.25);
    color: #0d7f3f;
}

.ts-form-message.error {
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.25);
    color: #dc3545;
}

.ts-trust-row {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.ts-trust-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--fog);
}

.ts-trust-item::before {
    content: '✓';
    color: #0d7f3f;
    font-weight: 700;
}

@media (max-width: 600px) {
    .ts-form {
        grid-template-columns: 1fr;
    }
    .ts-form .full-width {
        grid-column: span 1;
    }
    .ts-form-message {
        grid-column: span 1;
    }
}