/*
Theme Name: InvestClarify
Theme URI: https://investclarify.com
Author: InvestClarify
Author URI: https://investclarify.com
Description: A clean, flat, mobile-first WordPress theme for beginner investing, ETFs, and personal finance blogs.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: investclarify
Tags: blog, finance, custom-logo, featured-images, responsive-layout
*/

 :root {
  --ic-primary: #0A5CA8;
  --ic-dark: #2B2B29;
  --ic-panel: #242421;
  --ic-panel-2: #20201E;
  --ic-card: #2B2B29;
  --ic-mid: #0B67B2;
  --ic-blue-light: #DDEBF8;
  --ic-blue-border: #A8C7E8;
  --ic-green-light: #EAF3DE;
  --ic-green-text: #3B6D11;
  --ic-amber-light: #FAEEDA;
  --ic-amber-text: #854F0B;
  --ic-text: #F4F4F1;
  --ic-muted: rgba(255,255,255,0.68);
  --ic-border: rgba(255,255,255,0.14);
  --ic-white: #FFFFFF;
  --ic-radius-card: 12px;
  --ic-radius-btn: 8px;
  --ic-border-width: 0.5px;
  --ic-container: 1120px;
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--ic-text);
  background: var(--ic-dark);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ic-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4,h5,h6 { color: var(--ic-text); font-weight: 500; line-height: 1.18; margin: 0 0 16px; }
p { margin: 0 0 18px; }
ul,ol { margin: 0 0 20px 22px; padding: 0; }
.container, .ic-container { width: min(100% - 32px, var(--ic-container)); margin-inline: auto; }
.screen-reader-text { position: absolute; left: -9999px; }

.ic-btn, button, input[type='submit'] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--ic-radius-btn); border: var(--ic-border-width) solid var(--ic-primary);
  padding: 12px 18px; background: var(--ic-primary); color: var(--ic-white);
  font: inherit; font-weight: 500; cursor: pointer; min-height: 44px;
}
.ic-btn:hover, button:hover, input[type='submit']:hover { background: var(--ic-dark); text-decoration: none; }
.ic-btn.ghost { background: transparent; color: var(--ic-text); border-color: rgba(255,255,255,.24); }
.ic-btn.ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.38); }

.ic-badge, .badge { display:inline-flex; align-items:center; border:var(--ic-border-width) solid var(--ic-blue-border); background:var(--ic-panel); color:var(--ic-primary); border-radius:999px; padding:6px 11px; font-size:13px; font-weight:500; }
.ic-card { border: var(--ic-border-width) solid var(--ic-border); border-radius: var(--ic-radius-card); background: var(--ic-card); overflow:hidden; }

/* Header — dark version based on the provided reference */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--ic-dark);
  border-bottom: var(--ic-border-width) solid rgba(255,255,255,0.12);
}
.admin-bar .site-header { top:32px; }
.header-inner { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-logo { display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:16px; font-weight:500; letter-spacing:-0.04em; }
.site-logo:hover { text-decoration:none; }
.logo-mark { width:26px; height:26px; border-radius:7px; background:var(--ic-primary); color:#fff; display:grid; place-items:center; flex:0 0 26px; }
.logo-text { color:#fff; }
.logo-text span { color:var(--ic-mid); }
.main-nav ul { display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.main-nav a { color:rgba(255,255,255,.68); font-size:14px; font-weight:500; }
.main-nav a:hover, .main-nav .current-menu-item > a { color:#fff; text-decoration:none; }
.menu-toggle { display:none; background:var(--ic-panel-2); color:#fff; border:var(--ic-border-width) solid rgba(255,255,255,0.1); width:40px; height:34px; padding:0; border-radius:8px; position:relative; }
.menu-toggle .hamburger-line,
.menu-toggle .hamburger-line::before,
.menu-toggle .hamburger-line::after { display:block; width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.72); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.menu-toggle .hamburger-line::before { content:''; transform:translate(-11px,-50%); }
.menu-toggle .hamburger-line::after { content:''; transform:translate(7px,-50%); }
.mobile-menu { display:none; background:var(--ic-dark); border-top:var(--ic-border-width) solid rgba(255,255,255,0.12); }
.mobile-menu ul { list-style:none; margin:0; padding:10px 0 18px; }
.mobile-menu a { display:block; padding:12px 0; color:rgba(255,255,255,.78); font-weight:500; }
.mobile-menu a:hover { color:#fff; text-decoration:none; }
.mobile-menu.is-open { display:block; }

/* Footer — dark version based on the provided reference */
.site-footer { background:var(--ic-dark); border-top:var(--ic-border-width) solid rgba(255,255,255,0.12); margin-top:64px; border-radius:0 0 8px 8px; }
.footer-inner { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-nav ul { display:flex; flex-wrap:wrap; gap:22px; list-style:none; margin:0; padding:0; }
.footer-nav a, .copyright { color:rgba(255,255,255,.68); font-size:13px; font-weight:500; }
.footer-nav a:hover { color:#fff; text-decoration:none; }
/* Cards and grids */
.section { padding:64px 0; }
.section-header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.section-header h2 { font-size:32px; letter-spacing:-0.04em; margin:0; }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.post-card { border:var(--ic-border-width) solid var(--ic-border); border-radius:var(--ic-radius-card); overflow:hidden; background:var(--ic-card); display:flex; flex-direction:column; min-height:100%; }
.post-card-image { aspect-ratio:16/10; background:var(--ic-panel); overflow:hidden; }
.post-card-image img { width:100%; height:100%; object-fit:cover; border-radius:12px 12px 0 0; }
.post-card-body { padding:20px; display:flex; flex-direction:column; flex:1; }
.post-card h2, .post-card h3 { font-size:21px; letter-spacing:-0.03em; margin:12px 0 10px; }
.post-card h2 a,.post-card h3 a { color:var(--ic-text); }
.post-card p { color:var(--ic-muted); font-size:15px; }
.post-meta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; color:var(--ic-muted); font-size:13px; margin:0 0 10px; }
.read-more { margin-top:auto; font-weight:500; color:var(--ic-primary); }
.cat-pill { display:inline-flex; align-self:flex-start; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:500; background:var(--ic-panel); color:var(--ic-primary); border:var(--ic-border-width) solid var(--ic-blue-border); }
.cat-etfs, .category-etfs .cat-pill { background:var(--ic-green-light); color:var(--ic-green-text); border-color:rgba(59,109,17,.18); }
.cat-personal-finance, .cat-finance { background:var(--ic-amber-light); color:var(--ic-amber-text); border-color:rgba(133,79,11,.18); }
.pagination { margin-top:36px; display:flex; justify-content:center; gap:8px; }
.pagination .page-numbers { border:var(--ic-border-width) solid var(--ic-border); border-radius:8px; padding:9px 13px; color:var(--ic-text); }
.pagination .current { background:var(--ic-primary); color:#fff; border-color:var(--ic-primary); }

/* Homepage */
.hero { padding:78px 0 64px; background:var(--ic-dark); }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero h1 { font-size:clamp(42px,6vw,72px); letter-spacing:-0.07em; margin:18px 0; }
.hero h1 .navy { color:var(--ic-primary); }
.hero-subtitle { max-width:620px; font-size:19px; color:var(--ic-muted); margin-bottom:28px; }
.stat-card { background:var(--ic-panel-2); color:#fff; border-radius:var(--ic-radius-card); padding:28px; border:var(--ic-border-width) solid var(--ic-dark); }
.stat-card small { color:rgba(255,255,255,.72); }
.stat-number { font-size:52px; line-height:1; font-weight:500; margin:16px 0; }
.mini-chart { display:flex; align-items:end; gap:10px; height:150px; margin:30px 0; border-bottom:var(--ic-border-width) solid rgba(255,255,255,.2); }
.mini-chart span { flex:1; background:var(--ic-card); border-radius:6px 6px 0 0; min-height:24px; }
.editor-grid { display:grid; grid-template-columns:1.4fr .8fr; gap:24px; }
.featured-card { padding:28px; min-height:320px; display:flex; flex-direction:column; justify-content:end; background:var(--ic-panel); border:var(--ic-border-width) solid var(--ic-blue-border); border-radius:var(--ic-radius-card); }
.popular-list { border:var(--ic-border-width) solid var(--ic-border); border-radius:var(--ic-radius-card); padding:20px; }
.popular-item { display:grid; grid-template-columns:42px 1fr; gap:14px; padding:16px 0; border-bottom:var(--ic-border-width) solid var(--ic-border); }
.popular-item:last-child { border-bottom:0; }
.icon-square { width:42px; height:42px; border-radius:10px; background:var(--ic-panel); color:var(--ic-primary); display:grid; place-items:center; font-weight:500; }
.icon-square.green { background:var(--ic-green-light); color:var(--ic-green-text); }
.icon-square.amber { background:var(--ic-amber-light); color:var(--ic-amber-text); }
.newsletter { background:var(--ic-panel-2); color:#fff; border-radius:var(--ic-radius-card); padding:40px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.newsletter h2 { color:#fff; }
.newsletter p { color:rgba(255,255,255,.72); margin:0; }
.newsletter form { display:flex; gap:10px; }
.newsletter input[type='email'] { min-width:260px; border:var(--ic-border-width) solid rgba(255,255,255,.25); border-radius:8px; padding:12px 14px; font:inherit; }
.newsletter button { background:var(--ic-card); color:var(--ic-dark); border-color:#fff; }

/* Single */
.reading-progress { position:fixed; top:0; left:0; height:3px; width:0; background:var(--ic-primary); z-index:2000; }
.admin-bar .reading-progress { top:32px; }
.single-wrap { width:min(100% - 32px,720px); margin:0 auto; padding:56px 0 0; }
.single-header { margin-bottom:32px; }
.single-header h1 { font-size:clamp(36px,5vw,54px); letter-spacing:-0.06em; margin:16px 0; }
.single-featured { margin:32px 0; border-radius:12px; overflow:hidden; border:var(--ic-border-width) solid var(--ic-border); }
.toc-box, .key-takeaways, .ic-disclaimer, .author-box, .legal-notice { border:var(--ic-border-width) solid var(--ic-blue-border); border-radius:var(--ic-radius-card); background:var(--ic-panel); padding:20px; margin:26px 0; }
.toc-box h2,.key-takeaways h2 { font-size:18px; margin-bottom:10px; }
.toc-box ol { margin-bottom:0; }
.key-takeaways ul { margin-bottom:0; }
.ic-disclaimer { background:var(--ic-amber-light); color:var(--ic-amber-text); border-color:rgba(133,79,11,.18); }
.entry-content { font-size:18px; }
.entry-content h2 { font-size:32px; letter-spacing:-0.04em; margin-top:44px; }
.entry-content h3 { font-size:24px; margin-top:32px; }
.entry-content blockquote { margin:28px 0; padding:18px 22px; border-left:3px solid var(--ic-primary); background:var(--ic-panel); color:var(--ic-text); }
.entry-content table { width:100%; border-collapse:collapse; margin:28px 0; font-size:15px; }
.entry-content th,.entry-content td { border:var(--ic-border-width) solid var(--ic-border); padding:12px; text-align:left; }
.entry-content th { background:var(--ic-panel); font-weight:500; }
.author-box { display:grid; grid-template-columns:64px 1fr; gap:16px; background:var(--ic-card); border-color:var(--ic-border); }
.author-avatar { width:64px; height:64px; border-radius:50%; background:var(--ic-primary); color:#fff; display:grid; place-items:center; font-weight:500; font-size:26px; }
.related-posts { width:min(100% - 32px,var(--ic-container)); margin:64px auto 0; }

/* Pages */
.page-hero { background:var(--ic-panel); border-bottom:var(--ic-border-width) solid var(--ic-blue-border); padding:64px 0; }
.page-hero h1 { font-size:clamp(38px,5vw,60px); letter-spacing:-0.06em; margin:18px 0 12px; }
.page-subtitle { color:var(--ic-muted); font-size:18px; max-width:720px; }
.page-content { padding:56px 0; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:34px 0; }
.stat-box,.value-card,.info-card { border:var(--ic-border-width) solid var(--ic-border); border-radius:var(--ic-radius-card); padding:22px; background:var(--ic-card); }
.stat-box strong { display:block; font-size:30px; color:var(--ic-primary); }
.author-card { display:grid; grid-template-columns:76px 1fr; gap:20px; border:var(--ic-border-width) solid var(--ic-border); border-radius:var(--ic-radius-card); padding:24px; margin:28px 0; }
.value-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.contact-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:start; }
.contact-form { border:var(--ic-border-width) solid var(--ic-border); border-radius:var(--ic-radius-card); padding:24px; }
.contact-form label { display:block; font-weight:500; margin-bottom:6px; }
input, textarea, select { width:100%; border:var(--ic-border-width) solid var(--ic-border); border-radius:8px; padding:12px 14px; font:inherit; color:var(--ic-text); background:var(--ic-card); }
textarea { min-height:150px; resize:vertical; }
.form-row { margin-bottom:16px; }
.info-card { background:var(--ic-panel); border-color:var(--ic-blue-border); margin-bottom:14px; }
.response-notice { background:var(--ic-green-light); color:var(--ic-green-text); border:var(--ic-border-width) solid rgba(59,109,17,.18); border-radius:var(--ic-radius-card); padding:16px; margin-top:18px; }
.legal-notice { border-left:3px solid var(--ic-primary); }
.privacy-table { width:100%; border-collapse:collapse; margin:24px 0; }
.privacy-table th,.privacy-table td { border:var(--ic-border-width) solid var(--ic-border); padding:14px; text-align:left; }
.privacy-table th { background:var(--ic-panel); }

.widget-area { margin-top:48px; }
.wp-caption, .gallery-caption { color:var(--ic-muted); }
.bypostauthor { border-color:var(--ic-primary); }
.alignleft { float:left; margin:0 20px 20px 0; }
.alignright { float:right; margin:0 0 20px 20px; }
.aligncenter { margin-left:auto; margin-right:auto; }

@media (max-width: 860px) {
  .main-nav { display:none; }
  .menu-toggle { display:inline-flex; }
  .hero-grid, .editor-grid, .newsletter, .contact-grid { grid-template-columns:1fr; }
  .post-grid, .stat-grid { grid-template-columns:1fr 1fr; }
  .newsletter form { flex-direction:column; }
  .newsletter input[type='email'] { min-width:0; }
}
@media (max-width: 640px) {
  .container, .ic-container, .single-wrap, .related-posts { width:min(100% - 24px, var(--ic-container)); }
  .hero, .section, .page-content { padding:44px 0; }
  .post-grid, .stat-grid, .value-grid { grid-template-columns:1fr; }
  .section-header { align-items:start; flex-direction:column; }
  .footer-inner { align-items:flex-start; flex-direction:column; padding:24px 0; }
  .author-box,.author-card { grid-template-columns:1fr; }
  .entry-content { font-size:16px; }
}

/* Blog page */
.blog-page { background:var(--ic-dark); }
.blog-hero { max-width:720px; margin:0 auto 36px; text-align:center; }
.blog-hero h1 { font-size:clamp(38px,5vw,58px); letter-spacing:-0.06em; margin-top:16px; }
.blog-hero p { color:var(--ic-muted); font-size:18px; }


/* InvestClarify dark gray final palette inspired by the supplied mockup */
body { background: var(--ic-dark) !important; color: var(--ic-text); }
a { color: var(--ic-mid); }
h1,h2,h3,h4,h5,h6 { color: var(--ic-text); }
.site-header { background: rgba(43,43,41,.94); backdrop-filter: blur(10px); }
.site-footer { background: var(--ic-dark); }
.hero { background: var(--ic-dark) !important; border-bottom: var(--ic-border-width) solid var(--ic-border); }
.ic-badge, .badge { background: #DDEBF8; border-color: #DDEBF8; color: #064D89; }
.hero-subtitle, .post-card p, .page-subtitle, .popular-item p, .entry-content, p { color: var(--ic-muted); }
.stat-card { background: var(--ic-panel-2); border-color: var(--ic-border); }
.stat-number { color: var(--ic-mid); }
.mini-chart span { background: #DDEBF8; }
.mini-chart span:nth-child(2), .mini-chart span:nth-child(5) { background: var(--ic-mid); }
.section { background: var(--ic-dark); }
.post-card, .popular-list, .contact-form, .stat-box, .value-card, .info-card, .author-card, .author-box { background: var(--ic-card) !important; border-color: var(--ic-border); color: var(--ic-text); }
.post-card-image { background: #DDEBF8 !important; display:grid; place-items:center; }
.post-card-image:empty::before { content:'▥'; font-size:32px; color:var(--ic-mid); }
.post-card h2 a, .post-card h3 a { color: var(--ic-text); }
.post-meta, .copyright, .footer-nav a, .main-nav a { color: var(--ic-muted); }
.cat-pill { background:#DDEBF8; color:#064D89; border-color:#DDEBF8; }
.cat-etfs, .category-etfs .cat-pill { background:var(--ic-green-light); color:var(--ic-green-text); border-color:var(--ic-green-light); }
.cat-personal-finance, .cat-finance { background:var(--ic-amber-light); color:var(--ic-amber-text); border-color:var(--ic-amber-light); }
.featured-card { background: #14558E !important; border-color: rgba(255,255,255,.16); color:#fff; }
.featured-card h2 a, .featured-card p { color:#fff; }
.icon-square { background:var(--ic-green-light); color:var(--ic-green-text); }
.icon-square.amber { background:var(--ic-amber-light); color:var(--ic-amber-text); }
.newsletter { background: var(--ic-panel-2); border: var(--ic-border-width) solid var(--ic-border); }
.newsletter input[type='email'], input, textarea, select { background:#1F1F1D; color:#fff; border-color:var(--ic-border); }
.newsletter input::placeholder, input::placeholder, textarea::placeholder { color:rgba(255,255,255,.45); }
.newsletter button { background:#fff; color:#1F1F1D; }
.page-hero { background: var(--ic-dark) !important; border-bottom: var(--ic-border-width) solid var(--ic-border); }
.blog-hero { padding:0 0 34px !important; background:transparent !important; border-bottom:0; }
.toc-box, .key-takeaways, .legal-notice { background:var(--ic-panel) !important; border-color:var(--ic-border); }
.ic-disclaimer { background:#322A1F !important; color:#F7D9A3; border-color:rgba(247,217,163,.2); }
.entry-content blockquote, .entry-content th, .privacy-table th { background:var(--ic-panel) !important; }
.entry-content td, .entry-content th, .privacy-table td, .privacy-table th { border-color:var(--ic-border); }
.read-more { color:var(--ic-mid); }
.pagination .page-numbers { border-color:var(--ic-border); color:var(--ic-text); background:var(--ic-card); }
.pagination .current { background:var(--ic-mid); border-color:var(--ic-mid); }