/*
Theme Name: Ledger Finance
Theme URI: https://sunvizconsultant.com
Author: Sunviz Consultant
Author URI: https://sunvizconsultant.com
Description: A fast, schema-rich, SEO & GEO-optimized WordPress blog theme built for U.S. personal finance publishers. Server-rendered HTML, semantic structure, JSON-LD baked in, and a ledger-inspired editorial design.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
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: ledger-finance
Tags: blog, custom-menu, custom-logo, featured-images, translation-ready, block-styles

This theme is intentionally lightweight and dependency-free so that AI
crawlers and search engines can read every page as plain server-rendered
HTML. No content is injected client-side via JavaScript.
*/

/* -------------------------------------------------------------
   DESIGN TOKENS — "Running Ledger"
   Palette drawn from green-tinted accounting ledger paper, ink,
   and brass stamp accents. Data/figures use a monospace face to
   read like entries in a ledger column.
------------------------------------------------------------- */
:root{
  /* color */
  --paper:        #EEF1EA;   /* ledger paper, green-grey tint */
  --paper-card:   #F9FAF6;   /* card surface, slightly lighter */
  --ink:          #1C2320;   /* near-black, green-black ink */
  --ink-soft:     #4A5049;   /* secondary text */
  --navy:         #1F3350;   /* header / nav / trust color */
  --navy-deep:    #16253B;
  --brass:        #9C7A3C;   /* stamp / accent — borders & backgrounds only, see --brass-text */
  --brass-text:   #7A5D28;   /* WCAG AA-safe version of --brass for use as foreground text (5.3:1+ on paper) */
  --brass-soft:   #C9AE7D;
  --rule:         #C9CBB8;   /* ledger rule lines */
  --rule-soft:    #DEE1D6;
  --alert:        #A63D40;   /* red ink — warnings, negative figures */
  --focus:        #2E6E62;   /* keyboard focus ring, distinct from links */

  /* type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --step-3:  clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  --step-4:  clamp(2.6rem, 2rem + 2.6vw, 3.8rem);

  --content-w: 720px;
  --wide-w: 1180px;
  --radius: 3px;
}

/* -------------------------------------------------------------
   RESET / BASE
------------------------------------------------------------- */
*,*::before,*::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* stop iOS/Android auto-inflating text on rotate */
  text-size-adjust: 100%;
  overflow-x: hidden; /* safety net: nothing should be able to force horizontal scroll on mobile */
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word; /* long URLs/figures in finance content never bust the mobile viewport */
}
img{ max-width: 100%; height: auto; display: block; }
figure{ margin: 0; } /* reset the browser's 40px default figure margin, which was silently shrinking every featured image on mobile */
.entry-content iframe, .entry-content video, .entry-content embed, .entry-content object{
  max-width: 100%;
}
a{ color: var(--navy); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover{ color: var(--brass-text); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--navy-deep); margin: 0 0 0.5em; }
p{ margin: 0 0 1.2em; }
.tabular, .figure, time, .price, .stat{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff;
  padding: 0.75em 1.25em; z-index: 999; border-radius: var(--radius);
}
.skip-link:focus{ left: 1em; top: 1em; }

.container{ max-width: var(--wide-w); margin-inline: auto; padding-inline: 1.25rem; }
.container--narrow{ max-width: var(--content-w); margin-inline: auto; padding-inline: 1.25rem; }

/* -------------------------------------------------------------
   SIGNATURE ELEMENT — the ledger rule
   A divider that behaves like a ruled ledger row: a hairline with
   tick marks and a small right-aligned monospace notation. Used
   under H2s in article body and between structural sections.
------------------------------------------------------------- */
.ledger-rule{
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0.4em 0 1.4em;
  color: var(--ink-soft);
}
.ledger-rule::before{
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right, var(--rule) 0, var(--rule) 6px, transparent 6px, transparent 12px
  );
}
.ledger-rule__tag{
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Stamp-style category badge */
.stamp{
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: 0.08em;
  border: 1.5px solid var(--brass);
  color: var(--brass-text);
  padding: 0.25em 0.7em;
  border-radius: 999px;
  transform: rotate(-1deg);
  background: color-mix(in srgb, var(--brass) 6%, transparent);
}
.stamp--alert{ border-color: var(--alert); color: var(--alert); }

/* -------------------------------------------------------------
   SITE HEADER
------------------------------------------------------------- */
.site-header{
  background: var(--navy);
  color: #fff;
  border-bottom: 4px solid var(--brass);
}
.site-header .container{
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1rem;
  gap: 1rem;
}
.site-branding{ display:flex; align-items:center; gap:0.75rem; }
.site-title{
  font-family: var(--font-display); font-size: var(--step-2); margin:0;
}
.site-title a{ color:#fff; text-decoration:none; }
.site-description{
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--brass-soft); margin: 0.1em 0 0;
}
.primary-nav ul{
  list-style:none; display:flex; gap:1.5rem; margin:0; padding:0; flex-wrap:wrap;
}
.primary-nav a{
  color:#fff; text-decoration:none; font-size: var(--step--1);
  letter-spacing:0.03em; text-transform:uppercase;
  border-bottom: 2px solid transparent;
}
.primary-nav a:hover, .primary-nav a:focus-visible{ border-bottom-color: var(--brass); color:#fff; }
.menu-toggle{ display:none; }

@media (max-width: 720px){
  .menu-toggle{
    display:block; background:none; border:1px solid #fff; color:#fff;
    padding: 0.6em 1em; min-height: 44px; border-radius: var(--radius); font-family: var(--font-mono);
  }
  .primary-nav{ display:none; width:100%; }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{ flex-direction:column; gap:0.25rem; padding-block: 1rem; }
  .primary-nav a{ display:block; padding: 0.65em 0.25em; } /* full-width, 44px+ tap target once stacked */
  .site-header .container{ flex-wrap:wrap; }
}

/* -------------------------------------------------------------
   TRUST / DISCLOSURE BAR — every YMYL page carries this
------------------------------------------------------------- */
.trust-bar{
  background: var(--paper-card);
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.trust-bar .container{ padding-block: 0.5rem; display:flex; gap:1.5rem; flex-wrap:wrap; }
.trust-bar strong{ color: var(--navy); }

/* -------------------------------------------------------------
   LAYOUT
------------------------------------------------------------- */
.site-main{ padding-block: 2.5rem; }
.layout{
  display:grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 3rem; max-width: var(--wide-w); margin-inline:auto; padding-inline:1.25rem;
}
@media (max-width: 900px){ .layout{ grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 600px){ .site-main{ padding-block: 1.5rem; } }

/* Post cards (archive/index) */
.post-grid{ display:grid; gap: 2rem; }
.post-card{
  background: var(--paper-card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  overflow:hidden;
}
.post-card__media img{ aspect-ratio: 16/9; object-fit:cover; width:100%; }
.post-card__body{ padding: 1.25rem 1.4rem 1.5rem; }
.post-card__meta{
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-soft);
  display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:0.5rem;
}
.post-card h2{ font-size: var(--step-1); margin: 0.2em 0 0.4em; }
.post-card h2 a{ color: var(--navy-deep); text-decoration:none; }
.post-card p.excerpt{ color: var(--ink-soft); margin-bottom: 0.75rem; }

/* -------------------------------------------------------------
   ARTICLE (single post)
------------------------------------------------------------- */
.article-header{ max-width: var(--content-w); margin: 0 auto 1.5rem; }
.article-header .stamp{ margin-bottom: 0.75rem; }
.article-header h1{ font-size: var(--step-4); }
@media (max-width: 400px){
  .article-header h1{ font-size: clamp(1.9rem, 1.5rem + 4vw, 2.6rem); } /* keeps headlines from crowding very small phones */
}
.article-meta{
  display:flex; flex-wrap:wrap; gap: 1.25rem;
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-soft);
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule);
}
.article-meta .reviewed{ color: var(--focus); font-weight:600; }

.entry-content{ max-width: var(--content-w); margin-inline:auto; }
.entry-content h2{ font-size: var(--step-2); margin-top: 2em; }
.entry-content h3{ font-size: var(--step-1); margin-top: 1.6em; }
.entry-content ul, .entry-content ol{ padding-left: 1.4em; }
.entry-content li{ margin-bottom: 0.5em; }
.entry-content blockquote{
  border-left: 3px solid var(--brass);
  margin: 1.5em 0; padding: 0.25em 1.25em;
  font-family: var(--font-display); font-style: italic; font-size: var(--step-1);
  color: var(--navy-deep);
}
.entry-content table{
  width:100%; border-collapse: collapse; margin: 0; font-size: var(--step--1);
}
.entry-content th, .entry-content td{
  border: 1px solid var(--rule); padding: 0.6em 0.8em; text-align:left;
  font-family: var(--font-mono);
}
.entry-content th{ background: var(--paper-card); color: var(--navy-deep); }
.entry-content figure.wp-block-table{ overflow-x:auto; }
/* Rate/fee comparison tables are common in finance content — this keeps them
   scrollable instead of breaking the mobile layout, without shrinking the data. */
.table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5em 0;
  border-radius: var(--radius);
}

/* Table of contents */
.toc{
  background: var(--paper-card); border:1px solid var(--rule-soft); border-radius: var(--radius);
  padding: 1.25rem 1.5rem; max-width: var(--content-w); margin: 0 auto 2rem;
}
.toc__title{ font-family: var(--font-mono); text-transform:uppercase; font-size: var(--step--1); letter-spacing:0.08em; color: var(--brass-text); margin-bottom:0.5em; }
.toc ol{ margin:0; padding-left: 1.2em; }
.toc a{ text-decoration:none; }

/* Quick-answer / AEO callout — [ledger_quick_answer] shortcode. Deliberately
   placed high in an article so both human skimmers and AI answer engines
   (AI Overviews, Perplexity, ChatGPT search) hit the direct answer first. */
.quick-answer{
  background: var(--paper-card); border:1px solid var(--rule-soft); border-left: 4px solid var(--brass);
  border-radius: var(--radius); padding: 1.25rem 1.5rem;
  max-width: var(--content-w); margin: 0 auto 2rem;
}
.quick-answer__label{
  font-family: var(--font-mono); text-transform:uppercase; letter-spacing:0.08em;
  font-size: var(--step--1); color: var(--brass-text); display:block; margin-bottom:0.5em;
}
.quick-answer p:last-child{ margin-bottom: 0; }

/* Disclaimer / disclosure block */
.disclosure-block{
  background: var(--paper-card); border-left: 4px solid var(--navy);
  padding: 1rem 1.25rem; font-size: var(--step--1); color: var(--ink-soft);
  max-width: var(--content-w); margin: 2rem auto;
}

/* FAQ schema block */
.faq-block{ max-width: var(--content-w); margin: 2rem auto; }
.faq-item{ border-bottom: 1px solid var(--rule); padding: 0.25rem 0; }
.faq-item summary{
  font-family: var(--font-display); font-weight:600; cursor:pointer; color: var(--navy-deep);
  padding: 0.75em 0; min-height: 44px; display:flex; align-items:center; /* comfortable tap target on mobile */
}
.faq-item p{ margin: 0 0 0.75em; }

/* Topic/tag pill list — internal links from an article to its keyword clusters */
.tag-list{
  max-width: var(--content-w); margin: 2rem auto 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem;
  font-family: var(--font-mono); font-size: var(--step--1);
}
.tag-list__label{ color: var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; margin-right:0.25em; }
.tag-list a{
  display:inline-block; padding:0.35em 0.85em; min-height:32px; line-height:1.4;
  border:1px solid var(--rule); border-radius:999px; text-decoration:none; color: var(--ink-soft);
}
.tag-list a:hover, .tag-list a:focus-visible{ border-color: var(--brass); color: var(--brass-text); }

/* Author box (E-E-A-T signal) */
.author-box{
  display:flex; gap:1.25rem; align-items:flex-start;
  background: var(--paper-card); border:1px solid var(--rule-soft); border-radius: var(--radius);
  padding: 1.5rem; max-width: var(--content-w); margin: 2.5rem auto;
}
.author-box img{ width:72px; height:72px; border-radius:50%; flex-shrink:0; }
.author-box h3{ margin:0 0 0.2em; font-size: var(--step-1); }
.author-box .credentials{ font-family: var(--font-mono); font-size: var(--step--1); color: var(--brass-text); margin-bottom:0.5em; display:block; }

/* Freshness / review notice */
.freshness-notice{
  font-family: var(--font-mono); font-size: var(--step--1);
  background: color-mix(in srgb, var(--focus) 8%, transparent);
  border: 1px solid var(--focus); color: var(--navy-deep);
  padding: 0.6em 1em; border-radius: var(--radius);
  max-width: var(--content-w); margin: 0 auto 1.5rem; display:inline-block;
}

/* -------------------------------------------------------------
   SIDEBAR
------------------------------------------------------------- */
.widget{
  background: var(--paper-card); border:1px solid var(--rule-soft); border-radius: var(--radius);
  padding: 1.25rem 1.4rem; margin-bottom: 1.75rem;
}
.widget h2, .widget h3{
  font-family: var(--font-mono); text-transform:uppercase; letter-spacing:0.06em;
  font-size: var(--step--1); color: var(--brass-text); border-bottom:1px solid var(--rule); padding-bottom:0.5em;
}
.widget ul{ list-style:none; padding:0; margin:0; }
.widget li{ padding: 0.5em 0; border-bottom: 1px dashed var(--rule-soft); font-size: var(--step--1); }
.widget li:last-child{ border-bottom:none; }

/* "Explore Topics" tag cloud — spreads internal links across every keyword/topic
   page (credit cards, debt, BNPL, immigration finance, etc.) from every sidebar. */
.widget .tagcloud{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.widget .tagcloud a{
  font-size: var(--step--1) !important; /* normalize WP's default wildly-varying tag-cloud sizes */
  padding:0.3em 0.75em; min-height:32px; display:inline-flex; align-items:center;
  border:1px solid var(--rule); border-radius:999px; text-decoration:none; color: var(--ink-soft);
}
.widget .tagcloud a:hover, .widget .tagcloud a:focus-visible{ border-color: var(--brass); color: var(--brass-text); }

.newsletter-widget input[type="email"]{
  width:100%; padding: 0.6em 0.8em; margin-bottom: 0.6em;
  border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--font-body);
}
.newsletter-widget button{
  width:100%; padding: 0.6em; background: var(--navy); color:#fff; border:none;
  border-radius: var(--radius); font-family: var(--font-mono); text-transform:uppercase; letter-spacing:0.05em;
  cursor:pointer;
}
.newsletter-widget button:hover{ background: var(--brass); }

/* -------------------------------------------------------------
   FOOTER
------------------------------------------------------------- */
.site-footer{ background: var(--navy-deep); color: var(--paper); margin-top: 3rem; }
.site-footer .container{ padding-block: 2.5rem; display:grid; gap:2rem; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
.site-footer h3{ color:#fff; font-size: var(--step-0); }
.site-footer a{ color: var(--brass-soft); }
.site-footer .footer-bottom{
  grid-column: 1/-1; border-top:1px solid rgba(255,255,255,0.15); padding-top:1.5rem;
  font-family: var(--font-mono); font-size: var(--step--1); color: rgba(255,255,255,0.6);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}

/* -------------------------------------------------------------
   MISC
------------------------------------------------------------- */
.pagination{ display:flex; gap:0.6rem; flex-wrap:wrap; justify-content:center; margin-top:2rem; font-family: var(--font-mono); }
.pagination a, .pagination span{
  padding: 0.6em 1em; min-width:44px; min-height:44px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); border-radius: var(--radius); text-decoration:none;
}
.pagination .current{ background: var(--navy); color:#fff; border-color: var(--navy); }

.breadcrumbs{
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-soft);
  max-width: var(--content-w); margin: 0 auto 1rem;
}
.breadcrumbs a{ text-decoration:none; }
.breadcrumbs [aria-current]{ color: var(--ink); }

/* Search form — used on 404 page and anywhere get_search_form() is called.
   Previously unstyled (raw browser defaults); brought in line with the rest
   of the form controls and given touch-friendly sizing. */
.search-form{ display:flex; gap:0.6rem; max-width:480px; margin: 1.25rem auto; }
.search-form input[type="search"]{
  flex:1 1 auto; min-width:0; padding:0.6em 0.8em; font-size:16px; /* 16px avoids iOS auto-zoom on focus */
  font-family: var(--font-body); border:1px solid var(--rule); border-radius: var(--radius);
}
.search-form button{
  flex:0 0 auto; padding:0.6em 1.1em; min-height:44px; background: var(--navy); color:#fff; border:none;
  border-radius: var(--radius); font-family: var(--font-mono); text-transform:uppercase; letter-spacing:0.05em;
  cursor:pointer;
}
.search-form button:hover{ background: var(--brass); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}