/*
Theme Name:  FinancePress
Theme URI:   https://example.com/financepress
Author:      FinancePress Team
Description: A professional, high-performance WordPress theme for financial news, market analysis, and investment content. Features real-time market tickers, paywall support, rich schema markup, and a premium editorial design.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: financepress
Tags: finance, news, magazine, dark-mode, custom-colors, featured-images, full-width-template
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Brand */
    --fp-navy:          #0B1D35;
    --fp-navy-mid:      #132847;
    --fp-navy-light:    #1A3358;
    --fp-gold:          #C8A84B;
    --fp-gold-light:    #E8C96D;
    --fp-gold-pale:     #F5E9C4;

    /* Market status */
    --fp-bull:          #0E9F6E;
    --fp-bull-bg:       #D1FAE5;
    --fp-bear:          #E53E3E;
    --fp-bear-bg:       #FED7D7;
    --fp-neutral:       #6B7280;
    --fp-neutral-bg:    #F3F4F6;

    /* Surfaces */
    --fp-bg:            #FAFAF8;
    --fp-bg-card:       #FFFFFF;
    --fp-bg-subtle:     #F4F2ED;
    --fp-bg-dark:       #0B1D35;
    --fp-border:        #E5E1D8;
    --fp-border-dark:   #1E3A5F;

    /* Text */
    --fp-text-primary:   #111827;
    --fp-text-secondary: #4B5563;
    --fp-text-muted:     #9CA3AF;
    --fp-text-inverse:   #F9FAFB;

    /* Typography */
    --fp-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --fp-font-body:    'Source Serif 4', Georgia, serif;
    --fp-font-ui:      'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --fp-font-data:    'IBM Plex Mono', 'Courier New', monospace;

    /* Type scale */
    --fp-text-xs:   0.6875rem;
    --fp-text-sm:   0.8125rem;
    --fp-text-base: 1.0625rem;
    --fp-text-lg:   1.1875rem;
    --fp-text-xl:   1.375rem;
    --fp-text-2xl:  1.75rem;
    --fp-text-3xl:  2.25rem;
    --fp-text-4xl:  3rem;
    --fp-text-5xl:  3.75rem;

    /* Spacing */
    --fp-space-1:  4px;
    --fp-space-2:  8px;
    --fp-space-3:  12px;
    --fp-space-4:  16px;
    --fp-space-5:  20px;
    --fp-space-6:  24px;
    --fp-space-8:  32px;
    --fp-space-10: 40px;
    --fp-space-12: 48px;
    --fp-space-16: 64px;
    --fp-space-20: 80px;
    --fp-space-24: 96px;

    /* Radii */
    --fp-radius-sm: 4px;
    --fp-radius-md: 6px;
    --fp-radius-lg: 10px;
    --fp-radius-xl: 16px;
    --fp-radius-pill: 9999px;

    /* Shadows */
    --fp-shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
    --fp-shadow-sm:   0 1px 4px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04);
    --fp-shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --fp-shadow-lg:   0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.04);
    --fp-shadow-gold: 0 4px 24px rgba(200,168,75,0.2);

    /* Transitions */
    --fp-ease:    cubic-bezier(0.4, 0, 0.2, 1);
    --fp-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --fp-duration-fast: 150ms;
    --fp-duration-base: 250ms;
    --fp-duration-slow: 400ms;

    /* Layout */
    --fp-max-width:         1280px;
    --fp-content-width:     768px;
    --fp-sidebar-width:     320px;
    --fp-ticker-height:     40px;
    --fp-header-height:     64px;
    --fp-breaking-height:   36px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --fp-bg:             #080F1C;
        --fp-bg-card:        #0F1E33;
        --fp-bg-subtle:      #0B1625;
        --fp-border:         #1E3050;
        --fp-text-primary:   #F1F5F9;
        --fp-text-secondary: #94A3B8;
        --fp-text-muted:     #475569;
        --fp-bull:           #34D399;
        --fp-bull-bg:        #064E3B;
        --fp-bear:           #F87171;
        --fp-bear-bg:        #7F1D1D;
    }
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--fp-font-ui);
    font-size: var(--fp-text-base);
    color: var(--fp-text-primary);
    background-color: var(--fp-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }

/* ============================================================
   LAYOUT CONTAINERS
   ============================================================ */
.fp-container {
    width: 100%;
    max-width: var(--fp-max-width);
    margin-inline: auto;
    padding-inline: var(--fp-space-6);
}

.fp-container--narrow {
    max-width: calc(var(--fp-content-width) + var(--fp-sidebar-width) + var(--fp-space-12));
}

.fp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--fp-sidebar-width);
    gap: var(--fp-space-10);
    align-items: start;
}

@media (max-width: 1024px) {
    .fp-grid { grid-template-columns: 1fr; }
    .fp-sidebar { order: 2; }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.fp-display {
    font-family: var(--fp-font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--fp-text-primary);
}

.fp-headline { font-size: var(--fp-text-3xl); }
.fp-headline--lg { font-size: var(--fp-text-4xl); }
.fp-headline--xl { font-size: var(--fp-text-5xl); }
.fp-headline--sm { font-size: var(--fp-text-2xl); }
.fp-headline--xs { font-size: var(--fp-text-xl); }

.fp-body-text {
    font-family: var(--fp-font-body);
    font-size: var(--fp-text-base);
    line-height: 1.8;
    color: var(--fp-text-primary);
}

.fp-label {
    font-family: var(--fp-font-ui);
    font-size: var(--fp-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fp-text-muted);
}

.fp-data {
    font-family: var(--fp-font-data);
    font-size: var(--fp-text-sm);
    font-weight: 500;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.fp-bull-text  { color: var(--fp-bull) !important; }
.fp-bear-text  { color: var(--fp-bear) !important; }
.fp-gold-text  { color: var(--fp-gold) !important; }
.fp-muted-text { color: var(--fp-text-muted) !important; }

.fp-bull-badge, .fp-bear-badge, .fp-neutral-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-1);
    padding: 2px var(--fp-space-2);
    border-radius: var(--fp-radius-pill);
    font-family: var(--fp-font-data);
    font-size: var(--fp-text-xs);
    font-weight: 600;
}
.fp-bull-badge    { background: var(--fp-bull-bg); color: var(--fp-bull); }
.fp-bear-badge    { background: var(--fp-bear-bg); color: var(--fp-bear); }
.fp-neutral-badge { background: var(--fp-neutral-bg); color: var(--fp-neutral); }

.fp-tag {
    display: inline-block;
    padding: 3px var(--fp-space-3);
    background: var(--fp-bg-subtle);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-sm);
    font-size: var(--fp-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fp-text-secondary);
    transition: all var(--fp-duration-fast) var(--fp-ease);
}
.fp-tag:hover {
    background: var(--fp-navy);
    border-color: var(--fp-navy);
    color: var(--fp-text-inverse);
}

.fp-section-rule {
    display: flex;
    align-items: center;
    gap: var(--fp-space-4);
    margin-bottom: var(--fp-space-6);
}
.fp-section-rule h2 {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-xl);
    font-weight: 700;
    white-space: nowrap;
}
.fp-section-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--fp-gold), transparent);
}

/* ============================================================
   CARDS
   ============================================================ */
.fp-card {
    background: var(--fp-bg-card);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg);
    overflow: hidden;
    transition: box-shadow var(--fp-duration-base) var(--fp-ease),
                transform var(--fp-duration-base) var(--fp-ease);
}
.fp-card:hover {
    box-shadow: var(--fp-shadow-md);
    transform: translateY(-2px);
}

.fp-card__image {
    aspect-ratio: 16/9;
    overflow: hidden;
}
.fp-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--fp-duration-slow) var(--fp-ease);
}
.fp-card:hover .fp-card__image img { transform: scale(1.04); }

.fp-card__body { padding: var(--fp-space-5); }
.fp-card__category {
    display: inline-block;
    margin-bottom: var(--fp-space-2);
    color: var(--fp-gold);
    font-size: var(--fp-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fp-card__title {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-lg);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--fp-space-3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fp-card__title:hover { color: var(--fp-gold); transition: color var(--fp-duration-fast); }
.fp-card__excerpt {
    font-size: var(--fp-text-sm);
    color: var(--fp-text-secondary);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--fp-space-4);
}
.fp-card__meta {
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
    font-size: var(--fp-text-xs);
    color: var(--fp-text-muted);
}
.fp-card__meta-dot::before { content: '·'; }

/* Hero card variant */
.fp-card--hero .fp-card__image { aspect-ratio: 21/9; }
.fp-card--hero .fp-card__body  { padding: var(--fp-space-8); }
.fp-card--hero .fp-card__title { font-size: var(--fp-text-3xl); -webkit-line-clamp: 2; }

/* List card variant */
.fp-card--list {
    display: grid;
    grid-template-columns: 120px 1fr;
    border-radius: var(--fp-radius-md);
}
.fp-card--list .fp-card__image { aspect-ratio: 4/3; }
.fp-card--list .fp-card__body  { padding: var(--fp-space-4); }
.fp-card--list .fp-card__title { font-size: var(--fp-text-base); -webkit-line-clamp: 2; }

/* ============================================================
   BUTTONS
   ============================================================ */
.fp-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--fp-space-2);
    padding: var(--fp-space-3) var(--fp-space-6);
    border-radius: var(--fp-radius-md);
    font-family: var(--fp-font-ui);
    font-size: var(--fp-text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all var(--fp-duration-fast) var(--fp-ease);
    cursor: pointer;
    border: 1.5px solid transparent;
    text-decoration: none;
}
.fp-btn--primary {
    background: var(--fp-navy);
    color: var(--fp-text-inverse);
    border-color: var(--fp-navy);
}
.fp-btn--primary:hover { background: var(--fp-navy-light); border-color: var(--fp-navy-light); }
.fp-btn--gold {
    background: var(--fp-gold);
    color: var(--fp-navy);
    border-color: var(--fp-gold);
}
.fp-btn--gold:hover { background: var(--fp-gold-light); box-shadow: var(--fp-shadow-gold); }
.fp-btn--outline {
    background: transparent;
    color: var(--fp-text-primary);
    border-color: var(--fp-border);
}
.fp-btn--outline:hover { border-color: var(--fp-text-primary); }
.fp-btn--sm { padding: var(--fp-space-2) var(--fp-space-4); font-size: var(--fp-text-xs); }
.fp-btn--lg { padding: var(--fp-space-4) var(--fp-space-8); font-size: var(--fp-text-base); }

/* ============================================================
   FORMS
   ============================================================ */
.fp-input {
    width: 100%;
    padding: var(--fp-space-3) var(--fp-space-4);
    background: var(--fp-bg-card);
    border: 1.5px solid var(--fp-border);
    border-radius: var(--fp-radius-md);
    font-family: var(--fp-font-ui);
    font-size: var(--fp-text-sm);
    color: var(--fp-text-primary);
    transition: border-color var(--fp-duration-fast) var(--fp-ease);
    outline: none;
}
.fp-input:focus { border-color: var(--fp-gold); box-shadow: 0 0 0 3px rgba(200,168,75,0.12); }
.fp-input::placeholder { color: var(--fp-text-muted); }

/* ============================================================
   DISCLOSURE / ALERTS
   ============================================================ */
.fp-disclosure {
    padding: var(--fp-space-4) var(--fp-space-5);
    background: var(--fp-bg-subtle);
    border-left: 3px solid var(--fp-gold);
    border-radius: 0 var(--fp-radius-md) var(--fp-radius-md) 0;
    font-size: var(--fp-text-xs);
    color: var(--fp-text-secondary);
    line-height: 1.7;
}
.fp-disclosure strong { color: var(--fp-text-primary); }

.fp-breaking-alert {
    display: flex;
    align-items: center;
    gap: var(--fp-space-3);
    padding: var(--fp-space-2) var(--fp-space-5);
    background: var(--fp-bear);
    color: #fff;
    font-size: var(--fp-text-sm);
    font-weight: 600;
}
.fp-breaking-alert__label {
    display: inline-block;
    padding: 1px var(--fp-space-2);
    background: rgba(255,255,255,0.2);
    border-radius: var(--fp-radius-sm);
    font-size: var(--fp-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.fp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fp-space-2);
    padding: var(--fp-space-10) 0;
}
.fp-pagination a, .fp-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-md);
    font-size: var(--fp-text-sm);
    font-weight: 500;
    color: var(--fp-text-secondary);
    transition: all var(--fp-duration-fast) var(--fp-ease);
}
.fp-pagination a:hover { border-color: var(--fp-navy); color: var(--fp-navy); }
.fp-pagination .current { background: var(--fp-navy); border-color: var(--fp-navy); color: #fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.fp-footer {
    background: var(--fp-navy);
    color: var(--fp-text-inverse);
    padding: var(--fp-space-16) 0 var(--fp-space-8);
    margin-top: var(--fp-space-16);
}
.fp-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--fp-space-10);
    margin-bottom: var(--fp-space-12);
}
.fp-footer__logo {
    font-family: var(--fp-font-display);
    font-size: var(--fp-text-2xl);
    font-weight: 700;
    color: var(--fp-gold);
    margin-bottom: var(--fp-space-4);
}
.fp-footer__desc {
    font-size: var(--fp-text-sm);
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
    max-width: 280px;
}
.fp-footer__heading {
    font-size: var(--fp-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fp-gold);
    margin-bottom: var(--fp-space-5);
}
.fp-footer__links { display: flex; flex-direction: column; gap: var(--fp-space-3); }
.fp-footer__links a {
    font-size: var(--fp-text-sm);
    color: rgba(255,255,255,0.65);
    transition: color var(--fp-duration-fast);
}
.fp-footer__links a:hover { color: #fff; }
.fp-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: var(--fp-space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--fp-space-4);
    font-size: var(--fp-text-xs);
    color: rgba(255,255,255,0.4);
}
.fp-footer__bottom-links { display: flex; gap: var(--fp-space-5); }
.fp-footer__bottom-links a { color: rgba(255,255,255,0.4); }
.fp-footer__bottom-links a:hover { color: rgba(255,255,255,0.8); }

@media (max-width: 900px) {
    .fp-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .fp-footer__grid { grid-template-columns: 1fr; }
    .fp-container { padding-inline: var(--fp-space-4); }
}