@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    --navy: #0B1121;
    --navy-light: #131D35;
    --navy-mid: #1A2744;
    --charcoal: #1E2A3A;
    --gold: #C9A84C;
    --gold-light: #E2C97E;
    --gold-dim: rgba(201, 168, 76, 0.15);
    --silver: #B8C4D0;
    --silver-dim: #8A96A3;
    --text-primary: #E8ECF0;
    --text-secondary: #9AA5B4;
    --text-muted: #6B7A8D;
    --border: rgba(201, 168, 76, 0.12);
    --card-bg: rgba(19, 29, 53, 0.6);
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

body { font-family: var(--font-body); line-height: 1.8; max-width: 800px; margin: 0 auto; padding: 40px 20px; color: var(--text-primary); background: var(--navy); -webkit-font-smoothing: antialiased; }
h1 { font-family: var(--font-heading); color: var(--gold); border-bottom: 2px solid rgba(201,168,76,0.3); padding-bottom: 15px; margin-bottom: 30px; font-size: 2em; line-height: 1.2; }
h2 { font-family: var(--font-heading); color: var(--text-primary); margin-top: 45px; margin-bottom: 20px; font-size: 1.5em; }
h3 { font-family: var(--font-heading); color: var(--gold); margin-top: 30px; font-size: 1.15em; }
a { color: var(--gold); transition: color 0.2s; }
a:hover { color: var(--gold-light); }
p { color: var(--text-secondary); }
ul, ol { color: var(--text-secondary); }
li { margin-bottom: 0.5rem; }
strong { color: var(--text-primary); }
img { border-radius: 10px; }

/* Tables */
table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.95em; }
th { background: var(--navy-mid); color: var(--gold); padding: 12px; text-align: left; font-family: var(--font-heading); font-weight: 600; border-bottom: 1px solid var(--border); }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
tr:hover { background: rgba(201,168,76,0.04); }

/* Boxes */
.tldr-box { background: rgba(201,168,76,0.08); border-left: 4px solid var(--gold); padding: 20px 25px; margin: 25px 0; border-radius: 0 10px 10px 0; font-size: 1.05em; color: var(--text-secondary); }
.tldr-box strong { color: var(--gold); }
.toc { background: var(--navy-light); border: 1px solid var(--border); padding: 20px 25px; margin: 25px 0; border-radius: 10px; }
.toc h3 { margin-top: 0; color: var(--text-primary); font-size: 1.1em; }
.toc ul { margin: 0; padding-left: 20px; }
.toc li { margin: 6px 0; }
.toc a { text-decoration: none; color: var(--gold); }
.toc a:hover { color: var(--gold-light); }
.warning-box { background: rgba(201,168,76,0.08); border-left: 4px solid #D4A017; padding: 15px 20px; margin: 20px 0; border-radius: 0 8px 8px 0; color: var(--text-secondary); }
.warning-box strong { color: #E2C97E; }
.warning-box a { color: var(--gold); }
.tip-box { background: rgba(40,167,69,0.08); border-left: 4px solid #28a745; padding: 15px 20px; margin: 20px 0; border-radius: 0 8px 8px 0; color: var(--text-secondary); }
.tip-box strong { color: #5cb85c; }
.tip-box a { color: var(--gold); }
.danger-box { background: rgba(220,53,69,0.08); border-left: 4px solid #dc3545; padding: 15px 20px; margin: 20px 0; border-radius: 0 8px 8px 0; color: var(--text-secondary); }
.danger-box strong { color: #e57373; }
.danger-box a { color: var(--gold); }

/* Guide CTA */
.guide-cta { background: linear-gradient(135deg, var(--navy-mid) 0%, var(--charcoal) 100%); color: white; padding: 25px 30px; border-radius: 12px; margin: 35px 0; text-align: center; border: 1px solid var(--border); }
.guide-cta h3 { font-family: var(--font-heading); color: var(--gold); margin-top: 0; }
.guide-cta p { color: var(--text-muted); margin-bottom: 15px; }
.guide-cta a { display: inline-block; background: var(--gold); color: var(--navy); padding: 12px 30px; border-radius: 8px; text-decoration: none; font-weight: 700; }
.guide-cta a:hover { background: var(--gold-light); }

/* Step/Info Boxes */
.step-box { background: var(--navy-light); border: 1px solid var(--border); border-radius: 10px; padding: 20px 25px; margin: 20px 0; }
.step-box h3 { margin-top: 0; color: var(--gold); }
.step-box p { color: var(--text-secondary); }

/* Cards */
.exchange-card, .area-card, .dest-card { background: var(--navy-light); border: 1px solid var(--border); border-radius: 12px; padding: 20px 25px; margin: 20px 0; }
.exchange-card h3, .area-card h3, .dest-card h3 { margin-top: 0; color: var(--gold); }
.exchange-card .details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; font-size: 0.9em; }
.exchange-card .details span { color: var(--text-muted); }
.exchange-card .details strong { color: var(--text-secondary); }

/* Area/Dest Card Stats */
.area-card .stats, .dest-card .stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 12px; }
.area-card .stat, .dest-card .stat { text-align: center; }
.area-card .stat .label, .dest-card .stat .label { font-size: 0.75em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.area-card .stat .value, .dest-card .stat .value { font-size: 1.1em; font-weight: 700; color: var(--text-primary); }
.area-card .stat .value.great, .dest-card .stat .value.great { color: #28a745; }
.area-card .stat .value.good, .dest-card .stat .value.good { color: #17a2b8; }
.area-card .stat .value.ok, .dest-card .stat .value.ok { color: #D4A017; }
.area-card .stat .value.poor, .dest-card .stat .value.poor { color: #dc3545; }

/* Tax Highlight */
.tax-highlight { background: rgba(201,168,76,0.1); border: 2px solid var(--gold); border-radius: 12px; padding: 25px; margin: 25px 0; text-align: center; }
.tax-highlight .big { font-size: 3em; font-weight: 700; color: var(--gold); font-family: var(--font-heading); }
.tax-highlight p { color: var(--text-secondary); margin: 8px 0 0; }

/* VS Box */
.vs-box { display: grid; grid-template-columns: 1fr auto 1fr; gap: 15px; align-items: center; margin: 25px 0; }
.vs-side { background: var(--navy-light); border: 1px solid var(--border); border-radius: 10px; padding: 20px; text-align: center; }
.vs-side h4 { color: var(--text-primary); margin: 0 0 5px; font-family: var(--font-heading); }
.vs-side p { color: var(--text-secondary); font-size: 0.9em; margin: 0; }
.vs-center { font-size: 1.5em; font-weight: 700; color: var(--text-muted); }

/* Part Nav */
.part-nav { background: var(--gold-dim); color: var(--gold); padding: 15px 20px; border-radius: 10px; margin: 30px 0; text-align: center; font-weight: 700; border: 1px solid var(--border); }
.part-nav a { color: var(--gold); text-decoration: none; }
.part-nav a:hover { color: var(--gold-light); }

/* Related Grid */
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin: 25px 0; }
.related-card { background: var(--navy-light); border: 1px solid var(--border); border-radius: 10px; padding: 16px; text-decoration: none; color: var(--text-secondary); transition: all 0.3s; }
.related-card:hover { border-color: var(--gold); background: rgba(201,168,76,0.05); }
.related-card h4 { color: var(--gold); font-size: 0.95em; margin: 0 0 6px; font-family: var(--font-heading); }
.related-card p { font-size: 0.8em; color: var(--text-muted); margin: 0; }

/* Affiliate Box */
.affiliate-box { background: rgba(201,168,76,0.06); border: 1px solid var(--border); border-radius: 10px; padding: 18px 22px; margin: 25px 0; font-size: 0.95em; color: var(--text-secondary); }
.affiliate-box strong { color: var(--text-primary); }
.affiliate-box a { color: var(--gold); }

/* Island Header (for island comparison article) */
.island-header { background: linear-gradient(135deg, var(--navy-mid) 0%, var(--charcoal) 100%); color: white; padding: 20px 25px; border-radius: 12px; margin: 40px 0 20px 0; border: 1px solid var(--border); }
.island-header h2 { color: var(--gold); margin: 0 0 5px 0; border: none; font-family: var(--font-heading); }
.island-header p { margin: 0; color: var(--text-muted); font-size: 0.95em; }

/* Scorecard */
.scorecard { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.score-item { background: var(--navy-light); border: 1px solid var(--border); border-radius: 8px; padding: 12px 15px; }
.score-item .label { font-size: 0.8em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.score-item .value { font-size: 1.1em; font-weight: 700; color: var(--text-primary); }
.score-item .value.great { color: #28a745; }
.score-item .value.good { color: #17a2b8; }
.score-item .value.ok { color: #D4A017; }
.score-item .value.poor { color: #dc3545; }

/* Back Link */
.back-link { display: inline-block; margin-top: 30px; color: var(--gold); text-decoration: none; font-weight: bold; }
.back-link:hover { color: var(--gold-light); }

/* Meta */
.meta { color: var(--text-muted); font-size: 0.9em; margin-bottom: 25px; }

/* Nav header for articles */
.article-nav { background: rgba(11,17,33,0.92); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 0.8rem 0; margin-bottom: 30px; margin: -40px -20px 30px -20px; padding: 1rem 20px; position: sticky; top: 0; z-index: 100; }
.article-nav a { color: var(--gold); text-decoration: none; font-weight: bold; letter-spacing: 1px; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.article-nav img { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold); }

/* Footer area on articles */
.article-footer { background: var(--navy-light); border: 1px solid var(--border); padding: 15px 20px; border-radius: 8px; font-size: 0.85em; color: var(--text-muted); margin-top: 30px; }
.article-footer strong { color: var(--text-secondary); }
.article-footer-links { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--border); font-size: 0.85em; text-align: center; }
.article-footer-links a { color: var(--text-muted); text-decoration: none; margin: 0 10px; }
.article-footer-links a:hover { color: var(--gold); }

/* Responsive */
@media (max-width: 600px) {
    body { padding: 20px 15px; }
    h1 { font-size: 1.5em; }
    .exchange-card .details { grid-template-columns: 1fr; }
    .area-card .stats, .dest-card .stats { grid-template-columns: 1fr; }
    .vs-box { grid-template-columns: 1fr; }
    .vs-center { display: none; }
    .scorecard { grid-template-columns: 1fr; }
}