/*
Theme Name: Forward Intelligence
Theme URI: https://aiwithsuchit.in
Author: Suchit Bhatwadekar
Author URI: https://aiwithsuchit.in
Description: A minimal, premium editorial blog theme for AIWithSuchit. Single-column, readability-first, built around the Forward Intelligence brand system. Gutenberg-compatible, fast-loading, system-font based (zero web-font dependency), accessible, and fully customizable via the WordPress Customizer.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: forward-intelligence
Tags: blog, one-column, editorial, custom-logo, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, rtl-language-support, block-styles, wide-blocks
*/

/* ==========================================================================
   FORWARD INTELLIGENCE — DESIGN TOKENS
   Brand system: DarkTeal / Teal / Gold / Cream + Georgia (serif) + Consolas (mono)
   All tokens are exposed as CSS variables and overridable via the Customizer
   (see inc/customizer.php → fi_customizer_css()).
   ========================================================================== */

:root {
  /* --- Brand colours (locked AIWithSuchit palette) --- */
  --fi-dark-teal: #0F2B26;
  --fi-teal: #016B5F;
  --fi-gold: #C9A962;
  --fi-cream: #FAFAF8;
  --fi-cream-2: #F4F2EC;
  --fi-wine: #C47363;          /* failure / accent-warning */
  --fi-text: #1A1A1A;
  --fi-text-muted: #5A5A5A;
  --fi-border: #E2DFD6;

  /* --- Semantic roles (Customizer maps onto these) --- */
  --fi-color-primary: var(--fi-dark-teal);
  --fi-color-secondary: var(--fi-teal);
  --fi-color-accent: var(--fi-gold);
  --fi-color-bg: var(--fi-cream);
  --fi-color-surface: #FFFFFF;
  --fi-color-text: var(--fi-text);
  --fi-color-text-muted: var(--fi-text-muted);
  --fi-color-link: var(--fi-teal);
  --fi-color-link-hover: var(--fi-dark-teal);
  --fi-color-border: var(--fi-border);
  --fi-color-btn-bg: var(--fi-dark-teal);
  --fi-color-btn-text: var(--fi-cream);
  --fi-color-btn-bg-hover: var(--fi-teal);

  /* --- Typography (system fonts — zero web-font dependency) --- */
  --fi-font-heading: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --fi-font-body: Charter, Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --fi-font-mono: Consolas, 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;

  --fi-font-size-base: 1.1875rem;   /* ~19px — readability-first */
  --fi-line-height-base: 1.75;
  --fi-font-weight-body: 400;
  --fi-font-weight-bold: 700;

  /* --- Spacing rhythm (8px base) --- */
  --fi-space-1: 0.5rem;
  --fi-space-2: 1rem;
  --fi-space-3: 1.5rem;
  --fi-space-4: 2rem;
  --fi-space-5: 3rem;
  --fi-space-6: 4rem;
  --fi-space-7: 6rem;

  /* --- Layout --- */
  --fi-content-width: 800px;       /* 760–820px readability target */
  --fi-wide-width: 1100px;
  --fi-header-pad: 1.5rem;          /* medium default; Customizer adjusts */
  --fi-footer-pad: 4rem;

  /* --- Shape --- */
  --fi-radius: 10px;
  --fi-radius-sm: 6px;
  --fi-shadow: 0 1px 3px rgba(15, 43, 38, 0.08), 0 8px 24px rgba(15, 43, 38, 0.06);
  --fi-shadow-sm: 0 1px 2px rgba(15, 43, 38, 0.06);

  /* --- Transitions --- */
  --fi-transition: 0.2s ease;
}

/* --- Dark mode tokens (toggled by body.fi-dark or prefers-color-scheme) --- */
body.fi-dark {
  --fi-color-bg: #0B1F1B;
  --fi-color-surface: #12302A;
  --fi-color-text: #ECEAE3;
  --fi-color-text-muted: #A9B3AE;
  --fi-color-border: #214139;
  --fi-color-link: #D9BE7E;
  --fi-color-link-hover: var(--fi-gold);
  --fi-color-btn-bg: var(--fi-gold);
  --fi-color-btn-text: var(--fi-dark-teal);
  --fi-color-btn-bg-hover: #D9BE7E;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--fi-color-bg);
  color: var(--fi-color-text);
  font-family: var(--fi-font-body);
  font-size: var(--fi-font-size-base);
  line-height: var(--fi-line-height-base);
  font-weight: var(--fi-font-weight-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--fi-transition), color var(--fi-transition);
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fi-font-heading);
  color: var(--fi-color-primary);
  line-height: 1.2;
  margin: 0 0 var(--fi-space-3);
  font-weight: var(--fi-font-weight-bold);
  letter-spacing: -0.01em;
}
body.fi-dark h1, body.fi-dark h2, body.fi-dark h3,
body.fi-dark h4, body.fi-dark h5, body.fi-dark h6 { color: var(--fi-color-text); }

h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; margin-top: var(--fi-space-5); }
h3 { font-size: 1.55rem; margin-top: var(--fi-space-4); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--fi-font-mono); }

p { margin: 0 0 var(--fi-space-3); }

a {
  color: var(--fi-color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--fi-transition);
}
a:hover, a:focus { color: var(--fi-color-link-hover); }

strong, b { font-weight: var(--fi-font-weight-bold); }
em, i { font-style: italic; }
small { font-size: 0.85em; color: var(--fi-color-text-muted); }

/* Eyebrows / labels / meta — mono, the brand signature */
.fi-eyebrow, .fi-meta, .post-meta, .fi-label {
  font-family: var(--fi-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fi-color-text-muted);
}
.fi-eyebrow { color: var(--fi-color-accent); font-weight: 700; }

/* Blockquote */
blockquote {
  margin: var(--fi-space-4) 0;
  padding: var(--fi-space-2) var(--fi-space-4);
  border-left: 4px solid var(--fi-color-accent);
  font-style: italic;
  font-size: 1.1em;
  color: var(--fi-color-text);
}
blockquote p:last-child { margin-bottom: 0; }
blockquote cite { display: block; margin-top: var(--fi-space-2); font-style: normal; font-family: var(--fi-font-mono); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--fi-color-text-muted); }

/* Lists */
ul, ol { margin: 0 0 var(--fi-space-3); padding-left: 1.5rem; }
li { margin-bottom: var(--fi-space-1); }

/* Code */
code, kbd, samp {
  font-family: var(--fi-font-mono);
  font-size: 0.9em;
  background: var(--fi-color-cream-2, var(--fi-cream-2));
  padding: 0.15em 0.4em;
  border-radius: var(--fi-radius-sm);
  border: 1px solid var(--fi-color-border);
}
body.fi-dark code, body.fi-dark kbd, body.fi-dark samp { background: #0B1F1B; }
pre {
  font-family: var(--fi-font-mono);
  background: var(--fi-dark-teal);
  color: #ECEAE3;
  padding: var(--fi-space-3);
  border-radius: var(--fi-radius);
  overflow-x: auto;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: var(--fi-space-4) 0;
}
pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }

/* Tables */
table { width: 100%; border-collapse: collapse; margin: var(--fi-space-4) 0; font-size: 0.95em; }
th, td { padding: var(--fi-space-2); text-align: left; border-bottom: 1px solid var(--fi-color-border); }
th { font-family: var(--fi-font-mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fi-color-secondary); }

/* Media */
img, video, iframe, embed, object { max-width: 100%; height: auto; }
figure { margin: var(--fi-space-4) 0; }
figcaption { font-size: 0.85rem; color: var(--fi-color-text-muted); text-align: center; margin-top: var(--fi-space-1); font-family: var(--fi-font-mono); letter-spacing: 0.04em; }
hr { border: none; border-top: 1px solid var(--fi-color-border); margin: var(--fi-space-5) 0; }

/* ==========================================================================
   LAYOUT — single column, readability-first
   ========================================================================== */
.fi-container { width: 100%; max-width: var(--fi-content-width); margin: 0 auto; padding-left: var(--fi-space-3); padding-right: var(--fi-space-3); }
.fi-container--wide { max-width: var(--fi-wide-width); }
.fi-site { display: flex; flex-direction: column; min-height: 100vh; }
.fi-main { flex: 1 0 auto; padding: var(--fi-space-6) 0; }

/* Gutenberg alignment support inside single column */
.entry-content > * { max-width: var(--fi-content-width); margin-left: auto; margin-right: auto; }
.entry-content > .alignwide { max-width: var(--fi-wide-width); }
.entry-content > .alignfull { max-width: 100%; }
.entry-content > .alignleft { float: left; margin-right: var(--fi-space-3); max-width: 50%; }
.entry-content > .alignright { float: right; margin-left: var(--fi-space-3); max-width: 50%; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.fi-header {
  background: var(--fi-color-bg);
  border-bottom: 1px solid var(--fi-color-border);
  padding: var(--fi-header-pad) 0;
}
.fi-header.is-sticky { position: sticky; top: 0; z-index: 100; backdrop-filter: saturate(1.2) blur(8px); }
.fi-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--fi-space-3); }

/* Brand mark — two-tone AIWithSuchit */
.fi-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.fi-brand__logo img { display: block; max-height: 48px; width: auto; }
.fi-brand__text { font-family: var(--fi-font-mono); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; text-decoration: none; }
.fi-brand__text .fi-brand__ai { color: var(--fi-color-accent); }
.fi-brand__text .fi-brand__rest { color: var(--fi-color-primary); }
body.fi-dark .fi-brand__text .fi-brand__rest { color: var(--fi-color-text); }
.fi-brand__tagline { display: block; font-family: var(--fi-font-body); font-style: italic; font-size: 0.8rem; color: var(--fi-color-text-muted); letter-spacing: 0; }
.fi-hex { color: var(--fi-color-accent); font-size: 1.1rem; line-height: 1; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.fi-nav { display: flex; align-items: center; gap: var(--fi-space-3); }
.fi-nav__menu { list-style: none; display: flex; gap: var(--fi-space-3); margin: 0; padding: 0; }
.fi-nav__menu li { margin: 0; position: relative; }
.fi-nav__menu a {
  font-family: var(--fi-font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fi-color-text);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--fi-transition), border-color var(--fi-transition);
}
.fi-nav__menu a:hover, .fi-nav__menu .current-menu-item > a { color: var(--fi-color-accent); border-bottom-color: var(--fi-color-accent); }

/* Dropdown */
.fi-nav__menu ul.sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 200px;
  background: var(--fi-color-surface);
  border: 1px solid var(--fi-color-border);
  border-radius: var(--fi-radius-sm);
  box-shadow: var(--fi-shadow);
  padding: var(--fi-space-1) 0;
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: all var(--fi-transition); z-index: 50;
}
.fi-nav__menu li:hover > ul.sub-menu,
.fi-nav__menu li:focus-within > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.fi-nav__menu ul.sub-menu a { display: block; padding: 0.5rem var(--fi-space-2); border: none; }

/* Search & hamburger */
.fi-nav__search-toggle, .fi-nav__toggle {
  background: none; border: none; cursor: pointer; padding: 0.4rem;
  color: var(--fi-color-text); display: inline-flex; align-items: center;
}
.fi-nav__toggle { display: none; }
.fi-search-panel { display: none; padding: var(--fi-space-3) 0 0; }
.fi-search-panel.is-open { display: block; }

/* CTA button in header */
.fi-cta {
  display: inline-block;
  background: var(--fi-color-btn-bg);
  color: var(--fi-color-btn-text);
  font-family: var(--fi-font-mono);
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.6rem 1.1rem; border-radius: var(--fi-radius-sm);
  text-decoration: none; border: none; cursor: pointer;
  transition: background var(--fi-transition);
}
.fi-cta:hover { background: var(--fi-color-btn-bg-hover); color: var(--fi-color-btn-text); }

/* ==========================================================================
   HERO (front page)
   ========================================================================== */
.fi-hero { padding: var(--fi-space-7) 0; text-align: left; }
.fi-hero__inner { max-width: var(--fi-content-width); margin: 0 auto; }
.fi-hero__title { font-size: 3.2rem; margin-bottom: var(--fi-space-3); }
.fi-hero__lede { font-size: 1.35rem; color: var(--fi-color-text-muted); }
.fi-hero__accent { width: 90px; height: 4px; background: var(--fi-color-secondary); margin: var(--fi-space-3) 0; }

/* ==========================================================================
   POST LIST (blog feed)
   ========================================================================== */
.fi-post-card { padding: var(--fi-space-5) 0; border-bottom: 1px solid var(--fi-color-border); }
.fi-post-card__thumb { display: block; margin-bottom: var(--fi-space-3); border-radius: var(--fi-radius); overflow: hidden; }
.fi-post-card__thumb img { width: 100%; display: block; }
.fi-post-card__title { font-size: 1.9rem; margin-bottom: var(--fi-space-2); }
.fi-post-card__title a { text-decoration: none; color: inherit; }
.fi-post-card__title a:hover { color: var(--fi-color-secondary); }
.fi-post-card__meta { margin-bottom: var(--fi-space-2); display: flex; flex-wrap: wrap; gap: var(--fi-space-2); }
.fi-post-card__excerpt { color: var(--fi-color-text); }
.fi-read-more {
  display: inline-block; margin-top: var(--fi-space-2);
  font-family: var(--fi-font-mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fi-color-secondary); text-decoration: none;
}
.fi-read-more:hover { color: var(--fi-color-accent); }
.fi-read-more::after { content: " \2192"; }

/* ==========================================================================
   SINGLE POST
   ========================================================================== */
.fi-article__header { margin-bottom: var(--fi-space-5); }
.fi-article__title { font-size: 2.8rem; }
.fi-article__meta { margin-top: var(--fi-space-3); display: flex; flex-wrap: wrap; gap: var(--fi-space-2); align-items: center; }
.fi-article__featured { margin: var(--fi-space-4) 0; border-radius: var(--fi-radius); overflow: hidden; }
.fi-article__featured img { width: 100%; display: block; }
.entry-content { font-size: var(--fi-font-size-base); }
.entry-content p { margin-bottom: var(--fi-space-3); }

/* Author box */
.fi-author-box {
  display: flex; gap: var(--fi-space-3); align-items: flex-start;
  margin: var(--fi-space-6) 0; padding: var(--fi-space-4);
  background: var(--fi-color-surface); border: 1px solid var(--fi-color-border); border-radius: var(--fi-radius);
}
.fi-author-box__avatar img { border-radius: 50%; display: block; }
.fi-author-box__name { font-family: var(--fi-font-heading); font-size: 1.2rem; font-weight: 700; margin-bottom: var(--fi-space-1); }

/* Post navigation */
.fi-post-nav { display: flex; justify-content: space-between; gap: var(--fi-space-3); margin: var(--fi-space-6) 0; }
.fi-post-nav a { text-decoration: none; display: block; max-width: 48%; }
.fi-post-nav .fi-label { display: block; margin-bottom: var(--fi-space-1); }
.fi-post-nav__next { text-align: right; margin-left: auto; }

/* Related posts */
.fi-related { margin: var(--fi-space-6) 0; }
.fi-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fi-space-3); }
.fi-related__item a { text-decoration: none; }
.fi-related__item .fi-related__title { font-family: var(--fi-font-heading); font-size: 1.05rem; font-weight: 700; color: var(--fi-color-primary); }
body.fi-dark .fi-related__item .fi-related__title { color: var(--fi-color-text); }

/* Social share */
.fi-share { display: flex; gap: var(--fi-space-2); align-items: center; margin: var(--fi-space-4) 0; }
.fi-share a { font-family: var(--fi-font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 0.4rem 0.8rem; border: 1px solid var(--fi-color-border); border-radius: var(--fi-radius-sm); color: var(--fi-color-text); }
.fi-share a:hover { border-color: var(--fi-color-accent); color: var(--fi-color-accent); }

/* Reading progress bar */
.fi-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--fi-color-accent); width: 0; z-index: 200; transition: width 0.1s linear; }

/* ==========================================================================
   COMMENTS
   ========================================================================== */
.fi-comments { margin: var(--fi-space-6) 0; }
.fi-comments .comment-list { list-style: none; padding: 0; }
.fi-comments .comment-body { padding: var(--fi-space-3) 0; border-bottom: 1px solid var(--fi-color-border); }
.fi-comments .comment-author { font-family: var(--fi-font-heading); font-weight: 700; }
.fi-comments .comment-metadata { font-family: var(--fi-font-mono); font-size: 0.75rem; color: var(--fi-color-text-muted); }
.fi-comments .children { list-style: none; margin-left: var(--fi-space-4); }
.fi-comment-form input[type="text"], .fi-comment-form input[type="email"], .fi-comment-form input[type="url"], .fi-comment-form textarea {
  width: 100%; padding: var(--fi-space-2); border: 1px solid var(--fi-color-border); border-radius: var(--fi-radius-sm);
  font-family: var(--fi-font-body); font-size: 1rem; background: var(--fi-color-surface); color: var(--fi-color-text); margin-bottom: var(--fi-space-2);
}

/* ==========================================================================
   WIDGETS / SIDEBAR / FOOTER
   ========================================================================== */
.fi-widget { margin-bottom: var(--fi-space-4); }
.fi-widget__title { font-family: var(--fi-font-mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fi-color-secondary); margin-bottom: var(--fi-space-2); }
.fi-widget ul { list-style: none; padding: 0; }
.fi-widget li { margin-bottom: var(--fi-space-1); }

.fi-footer { background: var(--fi-dark-teal); color: var(--fi-cream); padding: var(--fi-footer-pad) 0; margin-top: var(--fi-space-7); }
.fi-footer a { color: var(--fi-gold); }
.fi-footer__widgets { display: grid; gap: var(--fi-space-4); margin-bottom: var(--fi-space-4); }
.fi-footer__widgets.cols-1 { grid-template-columns: 1fr; }
.fi-footer__widgets.cols-2 { grid-template-columns: repeat(2, 1fr); }
.fi-footer__widgets.cols-3 { grid-template-columns: repeat(3, 1fr); }
.fi-footer__widgets.cols-4 { grid-template-columns: repeat(4, 1fr); }
.fi-footer .fi-widget__title { color: var(--fi-gold); }
.fi-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--fi-space-3); padding-top: var(--fi-space-3); border-top: 1px solid rgba(201,169,98,0.25); font-family: var(--fi-font-mono); font-size: 0.8rem; letter-spacing: 0.04em; }
.fi-social { display: flex; gap: var(--fi-space-2); list-style: none; padding: 0; margin: 0; }

/* Back to top */
.fi-back-to-top {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--fi-color-accent); color: var(--fi-dark-teal);
  border: none; cursor: pointer; display: none; align-items: center; justify-content: center;
  box-shadow: var(--fi-shadow); font-size: 1.2rem;
}
.fi-back-to-top.is-visible { display: flex; }

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--fi-color-accent); color: var(--fi-dark-teal);
  padding: var(--fi-space-2) var(--fi-space-3); z-index: 1000; font-family: var(--fi-font-mono); text-decoration: none;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--fi-color-accent); outline-offset: 2px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .fi-related__grid { grid-template-columns: 1fr; }
  .fi-footer__widgets.cols-2, .fi-footer__widgets.cols-3, .fi-footer__widgets.cols-4 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  h1 { font-size: 2.1rem; } .fi-hero__title { font-size: 2.3rem; } .fi-article__title { font-size: 2.1rem; }
  .fi-nav__toggle { display: inline-flex; }
  .fi-nav__menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; background: var(--fi-color-surface);
    border: 1px solid var(--fi-color-border); padding: var(--fi-space-2); gap: var(--fi-space-1); z-index: 100;
  }
  .fi-nav__menu.is-open { display: flex; }
  .fi-nav__menu ul.sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding-left: var(--fi-space-2); }
  .fi-header__inner { position: relative; }
  .fi-post-nav { flex-direction: column; }
  .fi-post-nav a, .fi-post-nav__next { max-width: 100%; text-align: left; margin-left: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* WP core helper classes */
.alignleft { float: left; margin-right: var(--fi-space-3); }
.alignright { float: right; margin-left: var(--fi-space-3); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.sticky, .bypostauthor { display: block; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fi-space-2); }