/* ForexBasics India — base stylesheet
   Palette: deep forest ink + soft mint surface + muted gold accent.
   Chosen to feel like a calm, trustworthy financial-education publication —
   not a flashy trading-signals site. */

:root{
  --bg: #FFFFFF;
  --surface: #EEF3EF;
  --surface-deep: #16281F;
  --ink: #12241D;
  --ink-muted: #52645C;
  --accent: #AD7C24;
  --accent-deep: #7E5A18;
  --border: #DCE3DE;
  --cta-fg: #FBF8F1;
  --max: 1120px;
  --font-body: 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Bengali', system-ui, sans-serif;
  --font-head: 'Noto Serif', 'Noto Sans Devanagari', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Bengali', Georgia, serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
:lang(ta){ font-family:'Noto Sans Tamil', var(--font-body); }
:lang(te){ font-family:'Noto Sans Telugu', var(--font-body); }
:lang(bn){ font-family:'Noto Sans Bengali', var(--font-body); }
:lang(hi), :lang(mr){ font-family:'Noto Sans Devanagari', var(--font-body); }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

h1,h2,h3{ font-family:var(--font-head); font-weight:700; line-height:1.2; color:var(--ink); }
h1{ font-size:clamp(2rem, 4vw, 2.75rem); }
h2{ font-size:1.5rem; margin-top:2.4em; }
h3{ font-size:1.1rem; }
a{ color:var(--accent-deep); text-decoration-thickness:1px; }
a:hover{ color:var(--accent); }

/* ---------- Header ---------- */
.site-header{ border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:10; }
.site-header__inner{ display:flex; align-items:center; gap:28px; height:68px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:700; }
.brand__logo{ height:32px; width:auto; display:block; }
.main-nav{ display:flex; gap:22px; flex:1; font-size:.95rem; }
.main-nav a{ color:var(--ink); text-decoration:none; }
.main-nav a:hover{ color:var(--accent-deep); }
.header-actions{ display:flex; align-items:center; gap:14px; }

.lang-switch{ position:relative; }
.lang-switch summary{ list-style:none; cursor:pointer; border:1px solid var(--border); border-radius:4px; padding:6px 10px; font-size:.85rem; }
.lang-switch summary::-webkit-details-marker{ display:none; }
.lang-switch ul{ position:absolute; right:0; top:110%; background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:6px; margin:0; list-style:none; min-width:150px; box-shadow:0 8px 24px rgba(18,36,29,.12); }
.lang-switch li a{ display:block; padding:6px 10px; text-decoration:none; color:var(--ink); border-radius:4px; }
.lang-switch li a:hover{ background:var(--surface); }

.btn{ display:inline-block; padding:10px 18px; border-radius:4px; font-weight:600; text-decoration:none; font-size:.92rem; }
.btn--cta{ background:var(--accent-deep); color:var(--cta-fg); }
.btn--cta:hover{ background:var(--accent); color:var(--cta-fg); }
.btn--ghost{ border:1px solid var(--border); color:var(--ink); }
.btn--lg{ padding:14px 24px; font-size:1rem; }

/* ---------- Hero ---------- */
.hero{ background:var(--surface-deep); color:var(--cta-fg); padding:72px 0; }
.hero__inner{ display:flex; align-items:center; justify-content:space-between; gap:48px; }
.hero__text{ flex:1; min-width:0; }
.hero h1{ color:var(--cta-fg); max-width:16ch; }
.hero__sub{ max-width:52ch; color:#CFE0D6; font-size:1.05rem; }
.hero__actions{ margin-top:28px; display:flex; gap:16px; flex-wrap:wrap; }
.hero .btn--ghost{ border-color:#3E5A4C; color:var(--cta-fg); }
.hero__art{ flex:0 0 320px; width:320px; height:auto; opacity:.95; }

/* ---------- Home topic sections ---------- */
.topic-section{ padding:40px 0; border-top:1px solid var(--border); }
.topic-section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.topic-section__head h2{ margin-top:0; }
.view-all{ font-size:.9rem; text-decoration:none; white-space:nowrap; color:var(--ink-muted); }
.view-all:hover{ color:var(--accent-deep); }

.topic-list{ list-style:none; margin:0; padding:0; }
.topic-list li{ border-bottom:1px solid var(--border); }
.topic-list a{ display:block; padding:14px 4px; text-decoration:none; color:var(--ink); font-size:1.05rem; }
.topic-list a:hover{ color:var(--accent-deep); padding-left:10px; transition:padding .15s ease; }

/* ---------- Card grids (home sections + category index pages) ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 340px)); gap:20px; margin-top:20px; }
.card-grid--compact{ grid-template-columns:repeat(4, 1fr); }
.card{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink); border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--bg); transition:border-color .15s ease; }
.card:hover{ border-color:var(--accent-deep); }
.card__img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.card__title{ padding:14px 16px 6px; font-weight:600; font-size:1rem; line-height:1.35; }
.card__excerpt{ padding:0 16px 16px; color:var(--ink-muted); font-size:.88rem; }
.card--featured .card__title{ font-size:1.1rem; }
.card--pillar{ border-color:var(--accent-deep); }
.pillar-badge{ display:inline-block; margin:14px 16px 0; padding:3px 9px; border-radius:3px; background:var(--surface); color:var(--accent-deep); font-size:.72rem; font-weight:700; letter-spacing:.02em; width:fit-content; }
/* Cards without an image (positions 2-4 in a home section) still need
   the title to sit somewhere sensible without an empty image gap. */
.card:not(:has(.card__img)) .card__title{ padding-top:16px; }

.category-page h1{ margin-bottom:6px; }

.all-topics{ padding:32px 0 56px; border-top:1px solid var(--border); }
.all-topics h2{ margin-top:0; font-size:1.1rem; color:var(--ink-muted); }
.topic-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{ border:1px solid var(--border); border-radius:20px; padding:8px 16px; font-size:.9rem; text-decoration:none; color:var(--ink); }
.pill:hover{ border-color:var(--accent-deep); color:var(--accent-deep); }

@media (max-width: 860px){
  .hero__inner{ flex-direction:column-reverse; align-items:flex-start; }
  .hero__art{ width:220px; flex-basis:auto; }
  .card-grid--compact{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .card-grid--compact{ grid-template-columns:1fr; }
}

/* ---------- Article ---------- */
.article-wrap{ padding:40px 0 80px; display:grid; grid-template-columns:1fr 260px; gap:56px; }
.breadcrumb{ grid-column:1/-1; font-size:.85rem; color:var(--ink-muted); margin-bottom:6px; }
.breadcrumb a{ color:var(--ink-muted); text-decoration:none; }
article{ max-width:72ch; }
.byline{ color:var(--ink-muted); font-size:.9rem; }
.pillar-note{ font-size:.9rem; color:var(--ink-muted); background:var(--surface); border-left:3px solid var(--accent-deep); padding:8px 14px; border-radius:3px; display:inline-block; margin:10px 0 0; }
.pillar-note a{ font-weight:600; }
.article-hero-img{ width:100%; max-width:70ch; aspect-ratio:16/9; object-fit:cover; border-radius:6px; margin:18px 0 8px; display:block; }
.article-body p, .article-body li{ font-size:1.05rem; }
.article-body{ max-width:70ch; }
.glossary dt{ font-weight:700; margin-top:1.2em; font-family:var(--font-head); }
.glossary dd{ margin:.2em 0 0; color:var(--ink-muted); }

.article-body table{ width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.95rem; }
.article-body th, .article-body td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--border); }
.article-body th{ font-family:var(--font-head); font-weight:700; background:var(--surface); }
.article-body tr:last-child td{ border-bottom:none; }

.ib-cta-box{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent-deep); border-radius:4px; padding:22px; margin:36px 0; }
.ib-cta-box p{ margin-top:0; font-weight:600; }

.faq__item{ border-top:1px solid var(--border); padding:16px 0; }
.faq__item h3{ margin:0 0 6px; }
.faq__item p{ margin:0; color:var(--ink-muted); }

.related{ font-size:.95rem; }
.related h2{ font-size:1.05rem; margin-top:0; }
.related ul{ list-style:none; padding:0; margin:0; }
.related li{ border-bottom:1px solid var(--border); }
.related a{ display:block; padding:10px 0; text-decoration:none; color:var(--ink); }

.notice{ background:#FCF3E3; border:1px solid #EED9AE; padding:10px 14px; border-radius:4px; font-size:.9rem; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--surface-deep); color:#CFE0D6; padding:48px 0 24px; margin-top:60px; }
.footer-disclaimer{ font-size:.85rem; max-width:80ch; margin-bottom:10px; }
.footer-disclaimer--muted{ color:#A8BFAF; }
.footer-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; margin:36px 0 24px; border-top:1px solid #2C4438; padding-top:28px; }
.footer-grid h4{ color:var(--cta-fg); font-size:.85rem; text-transform:none; margin:0 0 10px; }
.footer-grid a{ color:#CFE0D6; font-size:.9rem; text-decoration:none; display:inline-block; margin-bottom:6px; }
.brand--footer{ color:var(--cta-fg); font-family:var(--font-head); font-weight:700; }
.brand--footer em{ font-style:normal; color:#E4C878; }
.footer-bottom{ font-size:.8rem; color:#8FA79A; border-top:1px solid #2C4438; padding-top:16px; }
.muted{ color:#A8BFAF; font-size:.85rem; }

@media (max-width: 860px){
  .main-nav{ display:none; }
  .article-wrap{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}