/*
Theme Name:  Think2Invest
Theme URI:   https://think2invest.in
Author:      Thabresh Syed
Author URI:  https://think2invest.in/about/
Description: Think2Invest v2.1 — A modern, fast WordPress theme built for India's entrepreneurs, investors, and professionals. Features a lively animated hero with word-highlight animations, 21 custom Gutenberg blocks for rich content writing, full dark/light mode, responsive sidebar with live TOC, share buttons, suggested reading, newsletter banner, and Source Serif 4 typography. Practical. India-First. Always Free.
Version:     2.1.0
Requires at least: 6.0
Tested up to: 6.7
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: think2invest
Tags:        blog, finance, dark-mode, custom-colors, custom-logo, custom-blocks, featured-images, full-width-template, sticky-post, threaded-comments, india, translation-ready
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — Light Mode (default)
   ============================================================ */
:root {
  /* Brand */
  --t2i-green:        #1a8f4e;
  --t2i-green-dark:   #146b3a;
  --t2i-green-light:  #e6f5ed;
  --t2i-green-border: #b6dfc8;
  --t2i-green-mid:    #25a862;

  /* Accent palette */
  --t2i-blue:         #2563eb;
  --t2i-purple:       #7c3aed;
  --t2i-amber:        #d97706;
  --t2i-rose:         #e11d48;
  --t2i-cyan:         #0891b2;

  /* Typography */
  --t2i-ink:          #1a1a2e;
  --t2i-body:         #374151;
  --t2i-muted:        #6b7280;
  --t2i-subtle:       #9ca3af;

  /* Surfaces */
  --t2i-bg:           #ffffff;
  --t2i-surface:      #f7f8fa;
  --t2i-surface-2:    #f0f2f5;
  --t2i-card:         #ffffff;
  --t2i-border:       #e5e7eb;
  --t2i-border-dark:  #d1d5db;

  /* Shadows */
  --t2i-shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --t2i-shadow:       0 2px 8px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
  --t2i-shadow-md:    0 4px 16px rgba(0,0,0,.09), 0 8px 32px rgba(0,0,0,.06);
  --t2i-shadow-green: 0 4px 20px rgba(26,143,78,.15);

  /* Layout */
  --t2i-radius-sm:    6px;
  --t2i-radius:       10px;
  --t2i-radius-lg:    16px;
  --t2i-max-width:    1140px;
  --t2i-content-width:760px;

  /* Transitions */
  --t2i-transition:   .22s ease;
}

/* ============================================================
   DARK MODE
   ============================================================ */
body.dark-mode,
body[data-theme="dark"],
body[data-mode="dark"],
body.dark,
html.dark body,
html[data-theme="dark"] body {
  --t2i-ink:          #f9fafb;
  --t2i-body:         #e5e7eb;
  --t2i-muted:        #9ca3af;
  --t2i-subtle:       #6b7280;
  --t2i-bg:           #0f1117;
  --t2i-surface:      #1a1f2e;
  --t2i-surface-2:    #222839;
  --t2i-card:         #1e2433;
  --t2i-border:       #2d3748;
  --t2i-border-dark:  #374151;
  --t2i-green-light:  #052e16;
  --t2i-green-border: #14532d;
  --t2i-shadow-sm:    0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --t2i-shadow:       0 2px 8px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  --t2i-shadow-md:    0 4px 16px rgba(0,0,0,.5), 0 8px 32px rgba(0,0,0,.4);
}

@media (prefers-color-scheme: dark) {
  body:not(.light-mode):not([data-theme="light"]):not([data-mode="light"]) {
    --t2i-ink:          #f9fafb;
    --t2i-body:         #e5e7eb;
    --t2i-muted:        #9ca3af;
    --t2i-subtle:       #6b7280;
    --t2i-bg:           #0f1117;
    --t2i-surface:      #1a1f2e;
    --t2i-surface-2:    #222839;
    --t2i-card:         #1e2433;
    --t2i-border:       #2d3748;
    --t2i-border-dark:  #374151;
    --t2i-green-light:  #052e16;
    --t2i-green-border: #14532d;
  }
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--t2i-body);
  background: var(--t2i-bg);
  margin: 0;
  transition: background var(--t2i-transition), color var(--t2i-transition);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Source Serif 4', 'Georgia', serif;
  color: var(--t2i-ink);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 .75em;
  letter-spacing: -.02em;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.625rem, 3.2vw, 2.375rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 1.8vw, 1.375rem); font-family: 'Inter', sans-serif; letter-spacing: -.01em; }
h5 { font-size: 1.125rem; font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 0; }
h6 { font-size: 1rem; font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; color: var(--t2i-muted); }

p { margin: 0 0 1.25em; color: var(--t2i-body); }

a { color: var(--t2i-green); text-decoration: none; transition: color var(--t2i-transition); }
a:hover { color: var(--t2i-green-dark); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { padding-left: 1.5em; margin: 0 0 1.2em; }
li { margin-bottom: .4em; }

blockquote {
  border-left: 4px solid var(--t2i-green);
  margin: 1.5em 0;
  padding: 1em 1.5em;
  background: var(--t2i-green-light);
  border-radius: 0 var(--t2i-radius) var(--t2i-radius) 0;
  font-style: italic;
  color: var(--t2i-ink);
}

code, pre {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .875em;
  background: var(--t2i-surface);
  border: 1px solid var(--t2i-border);
  border-radius: var(--t2i-radius-sm);
}
code { padding: .15em .4em; }
pre { padding: 1.25em 1.5em; overflow-x: auto; margin: 0 0 1.5em; }
pre code { background: none; border: none; padding: 0; }

hr {
  border: none;
  border-top: 1px solid var(--t2i-border);
  margin: 2em 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1em;
  margin: 0 0 1.5em;
}
th, td {
  padding: .85em 1.1em;
  border: 1px solid var(--t2i-border);
  text-align: left;
}
th {
  background: var(--t2i-surface);
  font-weight: 600;
  color: var(--t2i-ink);
  font-family: 'Inter', sans-serif;
}
tr:nth-child(even) td { background: var(--t2i-surface); }

input, textarea, select {
  font-family: inherit;
  font-size: 1rem;
  background: var(--t2i-bg);
  color: var(--t2i-body);
  border: 1px solid var(--t2i-border);
  border-radius: var(--t2i-radius-sm);
  padding: .6em 1em;
  width: 100%;
  transition: border-color var(--t2i-transition), box-shadow var(--t2i-transition);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--t2i-green);
  box-shadow: 0 0 0 3px rgba(26,143,78,.15);
}

button, .btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .2px;
  padding: .65em 1.6em;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background var(--t2i-transition), transform var(--t2i-transition), box-shadow var(--t2i-transition), color var(--t2i-transition);
}
.btn-primary {
  background: var(--t2i-green);
  color: #fff;
  box-shadow: 0 2px 10px rgba(26,143,78,.18);
}
.btn-primary:hover { background: var(--t2i-green-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,143,78,.28); }
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--t2i-green);
  color: var(--t2i-green);
}
.btn-outline:hover { background: var(--t2i-green); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,143,78,.22); }
.btn-ghost { background: transparent; color: var(--t2i-muted); border-radius: 100px; }
.btn-ghost:hover { color: var(--t2i-ink); background: var(--t2i-surface); }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  max-width: var(--t2i-max-width);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}
.container-narrow { max-width: var(--t2i-content-width); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.container-wide   { max-width: 1400px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media(max-width:900px) { .grid-3,.grid-4 { grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px) { .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap { display: flex; align-items: center; gap: 12px; }

.text-center { text-align: center; }
.text-green  { color: var(--t2i-green); }
.text-muted  { color: var(--t2i-muted); }
.text-ink    { color: var(--t2i-ink); }
.fw-700 { font-weight: 700; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--t2i-green);
  outline-offset: 3px;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--t2i-green);
  color: #fff;
  padding: .5em 1em;
  border-radius: 0 0 var(--t2i-radius-sm) var(--t2i-radius-sm);
  font-weight: 600;
  z-index: 9999;
  transition: top .2s;
}
.skip-link:focus { top: 0; }