/* =====================================================================
   Custom Investopedia-style overrides for Mediavine Trellis
   Loaded after main.0.18.1.css via functions.php
   ===================================================================== */

:root {
  --mv-navy:        #0a2540;
  --mv-navy-2:      #122c4a;
  --mv-text:        #1a2533;
  --mv-muted:       #5f6b7a;
  --mv-line:        #e1e5eb;
  --mv-bg:          #ffffff;
  --mv-bg-alt:      #f6f7f9;
  --mv-accent:      #1668e3;
  --mv-accent-dark: #0d4fb8;
  --mv-content:     720px;
  --mv-side:        320px;
  --mv-gap:         48px;
  --mv-serif:       'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mv-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Base ---------- */
body {
  font-family: var(--mv-sans) !important;
  color: var(--mv-text);
  background: var(--mv-bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a, a:visited { color: var(--mv-accent); }
a:hover, a:focus { color: var(--mv-accent-dark); }

h1, h2, h3, h4, h5, h6,
.entry-title, .article-heading, .archive-title, .archive-heading,
.excerpt-title, .featured-hero-title, .post-title {
  font-family: var(--mv-serif) !important;
  color: var(--mv-navy);
  letter-spacing: -0.01em;
}

/* ---------- Utility bar (added via mvt_header_before) ---------- */
.mv-utility-bar {
  background: var(--mv-navy);
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mv-utility-bar .mv-util-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  gap: 22px;
  justify-content: flex-end;
}
.mv-utility-bar a {
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none;
}
.mv-utility-bar a:hover { color: #fff !important; }

/* ---------- Header ---------- */
.header {
  background: #fff;
  border-bottom: 1px solid var(--mv-line);
  box-shadow: none;
}
.wrapper-header {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 24px 0;
}
.header-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-bottom: 18px;
}
.header .searchform { grid-column: 1; justify-self: start; max-width: 260px; width: 100%; position: relative; }
.header .search-field {
  width: 100%;
  padding: 9px 14px 9px 36px !important;
  border: 1px solid var(--mv-line) !important;
  border-radius: 24px !important;
  font-size: 14px !important;
  background: var(--mv-bg-alt) !important;
  font-family: var(--mv-sans) !important;
}
.header .search-toggle, .header .search-submit, .header .search-close { color: var(--mv-muted) !important; }

/* Site title / logo — bigger, serif, navy */
.header .site-title, .header .site-title a, .header [class*="site-title"] a {
  font-family: var(--mv-serif) !important;
  font-size: 42px !important;
  font-weight: 900 !important;
  color: var(--mv-navy) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.header .site-description, .header .site-description a {
  font-family: var(--mv-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--mv-muted) !important;
  font-weight: 400 !important;
  margin-top: 4px !important;
}
/* Center the logo block */
.header .site-title-wrap, .header .site-branding, .header .header-logo {
  grid-column: 2;
  text-align: center;
  justify-self: center;
}
.header .custom-logo, .header .custom-logo-link img { max-height: 80px !important; width: auto !important; }

/* Push nav under the logo row, full-width */
.nav-wrapper, .wrapper.nav-wrapper, .header .nav, .header nav.menu {
  grid-column: 1 / -1;
  border-top: 1px solid var(--mv-line);
  margin-top: 0;
}
.header .menu, .header nav ul, .header .nav ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 28px;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  height: 48px;
  align-items: center;
}
.header .menu li, .header .nav li { margin: 0 !important; }
.header .menu a, .header .nav a {
  font-family: var(--mv-sans) !important;
  color: var(--mv-text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 14px 0 !important;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  text-decoration: none !important;
}
.header .menu a:hover, .header .nav a:hover,
.header .menu .current-menu-item > a, .header .nav .current-menu-item > a {
  color: var(--mv-accent) !important;
  border-bottom-color: var(--mv-accent) !important;
}

/* ---------- Content layout ---------- */
.wrapper-content {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 32px 24px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--mv-side) !important;
  gap: var(--mv-gap) !important;
}
@media (max-width: 980px) {
  .wrapper-content { grid-template-columns: 1fr !important; }
  .sidebar.sidebar-primary { order: 2; }
}
.content-container { min-width: 0; }

/* Single-post content column narrower */
body.single .content-container,
body.page .content-container {
  max-width: var(--mv-content);
  margin: 0 auto;
}

/* ---------- Single-post header ---------- */
.entry-header.header-singular {
  text-align: left !important;
  padding: 0 !important;
  margin-bottom: 24px;
  max-width: var(--mv-content);
}
.entry-title.article-heading {
  font-size: 42px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
  letter-spacing: -0.015em !important;
}
.post-meta-wrapper, .post-meta-single {
  border-top: 1px solid var(--mv-line);
  border-bottom: 1px solid var(--mv-line);
  padding: 14px 0;
  font-size: 13px;
  color: var(--mv-muted);
}
.post-meta-author strong, .author-meta strong, .post-meta-author a {
  color: var(--mv-text) !important;
  font-weight: 600 !important;
}

/* Category kicker (above title) */
.meta-cats, .post-meta .meta-cats a, .meta-cats a {
  font-family: var(--mv-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--mv-accent) !important;
  text-decoration: none !important;
}

/* ---------- Archive / page header ---------- */
.archive-header.header-archive,
.page-header.header-archive {
  border-bottom: 2px solid var(--mv-navy);
  padding-bottom: 12px;
  margin-bottom: 28px;
}
.archive-title.archive-heading {
  font-size: 28px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* ---------- Article body ---------- */
.entry-content, .post-content {
  font-family: var(--mv-serif) !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: var(--mv-text);
}
.entry-content p, .post-content p { margin: 0 0 1.1em; }
.entry-content > p:first-of-type::first-letter,
.post-content > p:first-of-type::first-letter {
  font-size: 56px;
  font-weight: 700;
  float: left;
  line-height: 1;
  padding: 4px 8px 0 0;
  color: var(--mv-navy);
  font-family: var(--mv-serif);
}
.entry-content h2, .post-content h2 {
  font-size: 26px !important;
  font-weight: 700 !important;
  margin: 1.6em 0 0.5em !important;
  color: var(--mv-navy) !important;
}
.entry-content h3, .post-content h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 1.4em 0 0.4em !important;
  color: var(--mv-navy) !important;
}
.entry-content blockquote, .post-content blockquote {
  border-left: 3px solid var(--mv-accent) !important;
  margin: 1.5em 0 !important;
  padding: 0.2em 0 0.2em 1.2em !important;
  font-style: italic;
  font-family: var(--mv-serif) !important;
  color: var(--mv-navy) !important;
  font-size: 22px;
  line-height: 1.45;
}
.entry-content a, .post-content a {
  color: var(--mv-accent);
  border-bottom: 1px solid rgba(22,104,227,0.3);
  text-decoration: none;
}
.entry-content a:hover, .post-content a:hover {
  border-bottom-color: var(--mv-accent);
  text-decoration: none;
}

/* ---------- Excerpt / Card grid (archive + home) ---------- */
.content-container .article.excerpt,
.content-container .excerpt {
  background: var(--mv-bg);
  border: 1px solid var(--mv-line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}
/* Make archives a multi-column grid */
.content-container > .excerpt,
.content-container > .article.excerpt {
  /* fallback */
}
@supports (display: grid) {
  body.archive .content-container,
  body.home .content-container,
  body.blog .content-container,
  body.search-results .content-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  @media (min-width: 1100px) {
    body.archive .content-container,
    body.home .content-container,
    body.blog .content-container { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 600px) {
    body.archive .content-container,
    body.home .content-container,
    body.blog .content-container { grid-template-columns: 1fr; }
  }
}
.excerpt-photo, .excerpt-photo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.excerpt-container { padding: 16px 18px 20px; }
.excerpt-title {
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  margin: 0 0 8px !important;
  color: var(--mv-navy) !important;
}
.excerpt-title a { color: var(--mv-navy) !important; text-decoration: none !important; }
.excerpt-title a:hover { color: var(--mv-accent) !important; }
.excerpt-excerpt {
  font-family: var(--mv-sans) !important;
  font-size: 14px !important;
  color: var(--mv-muted);
  line-height: 1.55;
  margin: 0 0 12px;
}
.excerpt-post-data, .excerpt-post-data span, .excerpt-post-data a {
  font-family: var(--mv-sans) !important;
  font-size: 12px !important;
  color: var(--mv-muted) !important;
}

/* Featured hero (homepage top story) */
.featured-hero, .wrapper-featured-hero {
  background: #fff;
  margin-bottom: 32px;
}
.featured-hero-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 24px 12px !important;
  display: grid !important;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 760px) {
  .featured-hero-container { grid-template-columns: 1fr !important; }
}
.featured-hero-photo, .featured-hero-photo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.featured-hero-title {
  font-size: 36px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  margin: 0 0 12px !important;
}
.featured-hero-excerpt {
  font-family: var(--mv-serif) !important;
  font-size: 17px !important;
  color: var(--mv-muted) !important;
  line-height: 1.55 !important;
  margin: 0 0 16px !important;
}
.article-read-more, .featured-hero-btn, .button.article-read-more {
  display: inline-block !important;
  background: var(--mv-navy) !important;
  color: #fff !important;
  padding: 10px 22px !important;
  border-radius: 22px !important;
  font-family: var(--mv-sans) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border: 0 !important;
  text-decoration: none !important;
}
.article-read-more:hover, .featured-hero-btn:hover {
  background: var(--mv-navy-2) !important;
  color: #fff !important;
}

/* ---------- Sidebar ---------- */
.sidebar.sidebar-primary { font-size: 14px; }
.sidebar .widget {
  margin-bottom: 36px;
}
.sidebar .widget-title, .sidebar h2.widget-title, .sidebar h3.widget-title {
  font-family: var(--mv-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--mv-navy) !important;
  margin: 0 0 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--mv-navy) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.sidebar a { color: var(--mv-navy); text-decoration: none; }
.sidebar a:hover { color: var(--mv-accent); }

/* ---------- Footer ---------- */
.footer {
  background: var(--mv-navy) !important;
  color: rgba(255,255,255,0.85) !important;
  padding: 56px 24px 24px !important;
  margin-top: 64px !important;
  border-top: 0 !important;
}
.wrapper-footer {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6,
.footer .widget-title {
  color: #fff !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-family: var(--mv-sans) !important;
  font-weight: 700 !important;
  margin: 0 0 14px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}
.footer p, .footer li, .footer span { color: rgba(255,255,255,0.75); font-size: 14px; }
.footer a { color: rgba(255,255,255,0.75) !important; text-decoration: none !important; }
.footer a:hover { color: #fff !important; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li { padding: 5px 0; border: 0; }

/* If footer has multiple widget areas, lay them out as columns */
.footer .wrapper-footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
@media (max-width: 900px) {
  .footer .wrapper-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer .wrapper-footer { grid-template-columns: 1fr; }
}

/* ---------- Buttons (generic) ---------- */
.button, button, input[type="submit"] {
  background: var(--mv-navy) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 22px !important;
  font-family: var(--mv-sans) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  padding: 10px 20px !important;
  cursor: pointer;
}
.button:hover, button:hover, input[type="submit"]:hover {
  background: var(--mv-navy-2) !important;
  color: #fff !important;
}