/*
 Theme Name:   GeneratePress Child - Finance Site
 Template:     generatepress
 Description:  Child theme for the Personal Finance / Insurance & Loans / Real Estate site.
 Version:      1.0.0

 Install: install + activate the free "GeneratePress" parent theme first,
 then copy this whole "generatepress-child" folder into wp-content/themes/
 and activate "GeneratePress Child - Finance Site" from Appearance > Themes.
*/

:root {
  --content-max-width: 740px;
  --brand-color: #1a5f7a;       /* deep teal-blue - trust, common in finance brands */
  --brand-color-dark: #0f3d4f;
  --accent-color: #d98e2b;      /* warm gold accent - money/wealth association, used sparingly */
  --text-color: #2b2b2b;
  --muted-color: #5a6570;
  --bg-highlight: #f4f8fa;
  --border-color: #e3e6ea;
}

/* ---------- Site-wide header / navigation ---------- */
.site-header {
  border-bottom: 1px solid var(--border-color);
}
.site-logo, .site-title a {
  color: var(--brand-color) !important;
  font-weight: 700;
}
.main-navigation a {
  font-weight: 600;
}
.main-navigation a:hover {
  color: var(--brand-color);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-highlight);
  border-top: 1px solid var(--border-color);
  color: var(--muted-color);
  font-size: 0.9em;
}

/* ---------- Article content: comfortable line length + readable type ---------- */
.entry-content,
.site-content article {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-color);
}

.entry-content p { margin: 0 0 1.4em; }
.entry-content h2 { margin: 2em 0 0.6em; font-size: 1.5em; line-height: 1.3; }
.entry-content h3 { margin: 1.6em 0 0.5em; font-size: 1.2em; }

/* Images never overflow or break mobile layout */
.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1em 0;
}

/* Comparison tables (common in insurance/loan posts) scroll on mobile
   instead of squeezing every column unreadably small */
.entry-content .table-wrap { overflow-x: auto; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.entry-content th,
.entry-content td { padding: 10px 12px; border: 1px solid var(--border-color); text-align: left; }
.entry-content th { background: var(--brand-color); color: #fff; }
.entry-content tr:nth-child(even) { background: var(--bg-highlight); }

/* Quick-answer box - use right under the H1 to directly answer the search
   query in 1-2 sentences. Helps readers AND improves featured-snippet odds. */
.quick-answer {
  background: var(--bg-highlight);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-color);
  padding: 1em 1.2em;
  margin: 0 0 1.5em;
  border-radius: 4px;
  font-size: 1.05em;
}
.quick-answer strong { color: var(--brand-color); }

/* Highlight box - use as <div class="callout-box">...</div> in post content */
.callout-box {
  background: var(--bg-highlight);
  border-left: 4px solid var(--brand-color);
  padding: 1em 1.2em;
  margin: 1.5em 0;
  border-radius: 4px;
}

/* CTA button - use as <a class="cta-button" href="...">Compare Rates</a> */
.cta-button {
  display: inline-block;
  background: var(--brand-color);
  color: #fff !important;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  margin: 0.5em 0;
}
.cta-button:hover { background: var(--brand-color-dark); }

@media (max-width: 600px) {
  .entry-content { font-size: 16.5px; }
  .entry-content h2 { font-size: 1.3em; }
  .entry-content h3 { font-size: 1.1em; }
}