/* =========================================================================
   Anant Patankar — Portfolio Design System
   GeneratePress child · dark-mode-first · minimal · zero external requests
   Single accent token (--accent) — change it in one place to re-skin.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. SELF-HOSTED FONTS (woff2, SIL OFL — no external requests)
      font-display: swap → text paints immediately with system fallback,
      upgrades to the webfont when loaded.
   ---------------------------------------------------------------------- */
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Regular.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
	font-weight: 500 650; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Bold.woff2") format("woff2");
	font-weight: 700 900; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2");
	font-weight: 500 700; font-style: normal; font-display: swap;
}

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------------- */
:root {
	/* Surface palette (dark-first) */
	--bg:            #0b0f14;   /* page background            */
	--bg-elev:       #111821;   /* elevated cards / sections  */
	--bg-elev-2:     #16202b;   /* nested / hover surfaces    */
	--border:        #223040;   /* hairline borders           */
	--border-soft:   #1a2431;

	/* Text */
	--text:          #e6edf3;   /* primary text               */
	--text-muted:    #9fb0c0;   /* secondary text             */
	--text-dim:      #6b7c8c;   /* captions / meta            */

	/* Accent — single source of truth. Swap this to re-theme the whole site. */
	--accent:        #34d8c0;   /* teal/cyan "signal" color   */
	--accent-strong: #14b8a6;
	--accent-soft:   rgba(52, 216, 192, 0.12);
	--accent-line:   rgba(52, 216, 192, 0.35);

	/* Type */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             Helvetica, Arial, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
	             Menlo, Consolas, "Liberation Mono", monospace;

	/* Rhythm */
	--maxw: 1120px;
	--radius: 12px;
	--radius-sm: 8px;
	--gap: clamp(1rem, 2vw, 1.5rem);
	--section-y: clamp(3.5rem, 8vw, 6rem);
}

/* -------------------------------------------------------------------------
   2. BASE
   ---------------------------------------------------------------------- */
body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--text); line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.4rem); font-weight: 650; }

a { color: var(--accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent-strong); }

code, pre, .mono { font-family: var(--font-mono); }

::selection { background: var(--accent-soft); color: var(--text); }

/* Full-bleed page shell: GeneratePress pins .grid-container to a fixed width;
   we release it so .pf-section backgrounds span the viewport and .pf-wrap
   does the centering (min(100% - 2.5rem, var(--maxw)) + margin auto). */
body .site.grid-container,
.site-content,
.content-area,
.site-main {
	width: 100% !important;
	max-width: 100% !important;
	margin-inline: 0;
}
.site-main { margin: 0 !important; }
.inside-article { padding: 0 !important; }

/* -------------------------------------------------------------------------
   3. SECTION SCAFFOLD
   ---------------------------------------------------------------------- */
.pf-section { padding-block: var(--section-y); }
.pf-section--elev { background: var(--bg-elev); border-block: 1px solid var(--border-soft); }
.pf-wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }

.pf-eyebrow {
	font-family: var(--font-mono);
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: .5rem;
}
.pf-section > .pf-wrap > h2 { margin-bottom: .35em; }
.pf-lead { color: var(--text-muted); font-size: 1.05rem; max-width: 60ch; }

/* -------------------------------------------------------------------------
   4. HERO
   ---------------------------------------------------------------------- */
.pf-hero {
	padding-block: clamp(4rem, 12vw, 8rem) var(--section-y);
	background:
		radial-gradient(1200px 500px at 75% -10%, var(--accent-soft), transparent 60%),
		var(--bg);
}
.pf-hero h1 { max-width: 18ch; }
.pf-hero .pf-role {
	font-family: var(--font-mono);
	color: var(--accent);
	font-size: clamp(.95rem, 2vw, 1.15rem);
	margin-block: 1rem .75rem;
}
.pf-hero .pf-value {
	color: var(--text-muted);
	font-size: clamp(1.05rem, 2.2vw, 1.3rem);
	max-width: 56ch;
	margin-bottom: 2rem;
}

/* -------------------------------------------------------------------------
   5. BUTTONS
   ---------------------------------------------------------------------- */
.pf-btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.pf-btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .7rem 1.15rem;
	border-radius: var(--radius-sm);
	font-weight: 600; font-size: .95rem;
	border: 1px solid transparent;
	transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.pf-btn:hover { transform: translateY(-1px); }
.pf-btn--primary { background: var(--accent); color: #05141a; }
.pf-btn--primary:hover { background: var(--accent-strong); color: #05141a; }
.pf-btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.pf-btn--ghost:hover { border-color: var(--accent-line); color: var(--accent); }

/* -------------------------------------------------------------------------
   6. SPECIALIZATION PILLARS
   ---------------------------------------------------------------------- */
.pf-pillars { display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); }
.pf-pillar {
	background: var(--bg-elev); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 1.4rem 1.4rem 1.5rem;
}
.pf-pillar .pf-num { font-family: var(--font-mono); color: var(--accent); font-size: .85rem; }
.pf-pillar h3 { margin: .35rem 0 .4rem; }
.pf-pillar p { color: var(--text-muted); font-size: .95rem; margin: 0; }

/* -------------------------------------------------------------------------
   7. SKILLS / TECH CHIPS
   ---------------------------------------------------------------------- */
.pf-skillgroups { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); }
.pf-skillgroup h3 { font-size: 1.05rem; margin-bottom: .75rem; color: var(--text); }
.pf-skillgroup h3 span { color: var(--accent); font-family: var(--font-mono); font-size: .85rem; }
.pf-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.pf-chip {
	font-family: var(--font-mono); font-size: .82rem;
	padding: .3rem .6rem; border-radius: 6px;
	background: var(--bg-elev-2); border: 1px solid var(--border);
	color: var(--text-muted);
}
.pf-chip--accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

/* -------------------------------------------------------------------------
   8. PROJECT CARDS
   ---------------------------------------------------------------------- */
.pf-projects { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
.pf-card {
	display: flex; flex-direction: column;
	background: var(--bg-elev); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 1.5rem;
	transition: border-color .15s ease, transform .12s ease;
}
.pf-card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.pf-card__top { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.pf-card h3 { margin: 0 0 .25rem; }
.pf-card__tag { font-family: var(--font-mono); font-size: .75rem; color: var(--text-dim); }
.pf-card__problem { color: var(--text-muted); font-size: .95rem; margin: .75rem 0 1rem; }
.pf-card__metric {
	font-family: var(--font-mono); font-size: .9rem; color: var(--accent);
	border-left: 2px solid var(--accent-line); padding-left: .7rem; margin-bottom: 1rem;
}
.pf-card__stack { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.pf-card__links { margin-top: auto; display: flex; gap: 1rem; flex-wrap: wrap; }
.pf-card__links a { font-weight: 600; font-size: .9rem; }

/* Featured / flagship card spans full width on top row */
.pf-card--flagship { grid-column: 1 / -1; border-color: var(--accent-line); }

/* -------------------------------------------------------------------------
   9. OPEN-SOURCE PROOF BADGES
   ---------------------------------------------------------------------- */
.pf-badge {
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase;
	padding: .28rem .55rem; border-radius: 5px;
	background: var(--accent-soft); color: var(--accent);
	border: 1px solid var(--accent-line);
}
.pf-badge::before { content: "◆"; font-size: .7em; }
.pf-oss { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
.pf-oss__meta { font-family: var(--font-mono); font-size: .8rem; color: var(--text-dim); margin-top: .5rem; }

/* -------------------------------------------------------------------------
   10. EXPERIENCE TIMELINE
   ---------------------------------------------------------------------- */
.pf-timeline { border-left: 1px solid var(--border); padding-left: 1.5rem; }
.pf-job { position: relative; padding-bottom: 1.75rem; }
.pf-job::before {
	content: ""; position: absolute; left: -1.5rem; top: .4rem;
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--accent); box-shadow: 0 0 0 4px var(--bg);
	transform: translateX(-4px);
}
.pf-job__role { font-weight: 650; }
.pf-job__meta { font-family: var(--font-mono); font-size: .8rem; color: var(--text-dim); margin-bottom: .35rem; }
.pf-job__desc { color: var(--text-muted); font-size: .95rem; }

/* -------------------------------------------------------------------------
   11. CONTACT
   ---------------------------------------------------------------------- */
.pf-contact { display: flex; flex-wrap: wrap; gap: .75rem; }

/* -------------------------------------------------------------------------
   12. ARCHITECTURE DIAGRAM + CODE (project pages)
   ---------------------------------------------------------------------- */
.pf-diagram { width: 100%; height: auto; background: var(--bg-elev);
	border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
pre.wp-block-code, .pf-code {
	background: #0d141c; border: 1px solid var(--border);
	border-radius: var(--radius-sm); padding: 1rem 1.15rem;
	overflow-x: auto; font-size: .85rem; line-height: 1.55; color: #cdd9e5;
}

/* -------------------------------------------------------------------------
   12b. CONTACT FORM (Contact Form 7) — dark theme
   ---------------------------------------------------------------------- */
.wpcf7 label { display: block; color: var(--text-muted); font-size: .9rem; margin-bottom: 1rem; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	display: block; width: 100%; margin-top: .4rem;
	background: var(--bg-elev); color: var(--text);
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	padding: .65rem .8rem; font-family: var(--font-sans); font-size: .95rem;
	transition: border-color .15s ease;
}
.wpcf7 input:focus, .wpcf7 textarea:focus {
	outline: none; border-color: var(--accent-line);
}
.wpcf7 textarea { min-height: 140px; resize: vertical; }
.wpcf7 input[type="submit"] {
	background: var(--accent); color: #05141a; border: none;
	border-radius: var(--radius-sm); padding: .7rem 1.3rem;
	font-weight: 600; font-size: .95rem; cursor: pointer;
	transition: background .15s ease, transform .12s ease;
}
.wpcf7 input[type="submit"]:hover { background: var(--accent-strong); transform: translateY(-1px); }
.wpcf7 .wpcf7-not-valid-tip { color: #f87171; font-size: .8rem; }
.wpcf7 .wpcf7-response-output { border-color: var(--accent-line) !important; color: var(--text-muted); border-radius: var(--radius-sm); }

/* -------------------------------------------------------------------------
   12c. PROJECT-PAGE FOOTER NAV
   ---------------------------------------------------------------------- */
.pf-pagenav {
	display: flex; justify-content: space-between; align-items: center;
	flex-wrap: wrap; gap: .75rem;
	border-top: 1px solid var(--border);
	margin-top: 3.5rem; padding-top: 2rem;
}

/* -------------------------------------------------------------------------
   13. RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width: 860px) {
	.pf-pillars { grid-template-columns: 1fr; }
	.pf-skillgroups,
	.pf-projects,
	.pf-oss { grid-template-columns: 1fr; }
	.pf-card--flagship { grid-column: auto; }
}

/* -------------------------------------------------------------------------
   14. LIGHT-MODE FALLBACK (respect users who force light)
        Optional: keep site dark by default; only softens if user prefers light.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}