/*
Theme Name: Nomad Tech Labs
Theme URI: https://nomadtechlabs.com
Author: Nomad Tech Labs
Description: Premium composable WordPress theme framework — component-first architecture (Components → Sections → Templates). Drag-reorder Hero & Footer builders, CPT library, particle/motion effects.
Version: 0.1.0 (Phase 1 — Foundation + Hero Builder)
Requires PHP: 7.4
Text Domain: nomad-tech-labs
*/

:root {
  --nt-bg: #f8fafc;
  --nt-card-bg: #ffffff;
  --nt-shadow-light: #ffffff;
  --nt-shadow-dark: #e2e8f0;
  --nt-indigo: #6366f1;
  --nt-blue: #0ea5e9;
  --nt-slate-text: #0f172a;
  --nt-slate-600: #475569;
  --nt-slate-400: #94a3b8;
  --nt-radius-lg: 1rem;
  --nt-radius-xl: 1.25rem;
  --nt-font-heading: 'Plus Jakarta Sans', sans-serif;
  --nt-font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

body.nomad-theme {
  background-color: var(--nt-bg);
  font-family: var(--nt-font-heading);
  color: var(--nt-slate-text);
  overflow-x: hidden;
  margin: 0;
}

.nt-mono { font-family: var(--nt-font-mono); }

/* Lucide replaces [data-lucide] elements with inline SVGs; without a size
   rule they render at the library's 24px default everywhere — oversized
   next to 14px button/badge text. em-based so it scales with context
   (buttons, badges, panels) instead of one fixed pixel value. */
[data-lucide] { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.15em; }

.nt-container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Site header + primary nav ---------- */
/* Never written before now — wp_nav_menu() was outputting a plain <ul
   class="nt-nav"> with zero matching CSS, so it rendered as an unstyled
   bulleted list stacked vertically instead of the mockup's horizontal nav. */
.nt-site-header a { color: inherit; }
.nt-nav {
	display: flex;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.nt-nav li { position: relative; }
.nt-nav > li > a {
	display: inline-block;
	color: var(--nt-slate-600);
	text-decoration: none;
	font-weight: 500;
	font-size: .875rem;
	transition: color .2s;
}
.nt-nav > li > a:hover,
.nt-nav > li.current-menu-item > a,
.nt-nav > li.current_page_item > a { color: var(--nt-indigo); }

/* Submenu / dropdown support (wp_nav_menu adds .sub-menu automatically
   for menu items with children — unstyled by default, so it would render
   as an inline, undropped nested list without this). */
.nt-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 12rem;
	margin: .5rem 0 0;
	padding: .5rem;
	list-style: none;
	background: var(--nt-card-bg);
	border: 1px solid rgba(15, 23, 42, .08);
	border-radius: .75rem;
	box-shadow: 0 10px 30px -10px rgba(15, 23, 42, .15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 60;
}
.nt-nav li:hover > .sub-menu,
.nt-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nt-nav .sub-menu > li > a { display: block; padding: .5rem .75rem; border-radius: .5rem; font-size: .8125rem; }
.nt-nav .sub-menu > li > a:hover { background: var(--nt-bg); }

@media (max-width: 782px) {
	.nt-nav { gap: 1rem 1.5rem; }
	.nt-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding-left: 1rem; }
}

/* ---------- Particle canvas host ---------- */
.nt-particle-host {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid rgba(15,23,42,0.06);
}
.nt-particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.6;
}

/* ---------- Modern card / panel / button (from design system) ---------- */
.nt-card {
  background: var(--nt-card-bg);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow:
    0 10px 30px -10px rgba(15, 23, 42, 0.08),
    inset 1px 1px 0px var(--nt-shadow-light),
    inset -1px -1px 2px rgba(15, 23, 42, 0.02);
  transition: all .3s cubic-bezier(.4,0,.2,1);
  border-radius: var(--nt-radius-xl);
}
.nt-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -15px rgba(99,102,241,.12), inset 1px 1px 0px var(--nt-shadow-light);
  border-color: rgba(99,102,241,.15);
}

.nt-sunken {
  background: #f1f5f9;
  border-radius: .75rem;
  box-shadow: inset 2px 2px 5px rgba(15,23,42,.05), inset -2px -2px 5px var(--nt-shadow-light);
}

.nt-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .875rem;
  padding: .875rem 1.5rem;
  border-radius: .75rem;
  background: var(--nt-card-bg);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 4px 12px rgba(15,23,42,.04), inset 1px 1px 0px var(--nt-shadow-light);
  transition: all .2s cubic-bezier(.4,0,.2,1);
  text-decoration: none;
  color: var(--nt-slate-text);
  cursor: pointer;
}
.nt-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,23,42,.08), inset 1px 1px 0px var(--nt-shadow-light); }
.nt-btn:active, .nt-btn.is-active { transform: translateY(1px); box-shadow: inset 2px 2px 5px rgba(15,23,42,.08), inset -2px -2px 5px var(--nt-shadow-light); background: #f1f5f9; }
.nt-btn--primary { background: var(--nt-indigo); border-color: var(--nt-indigo); color: #fff; }
.nt-btn--primary:hover { background: #4f46e5; }
.nt-btn--dark { background: var(--nt-slate-text); border-color: var(--nt-slate-text); color: #fff; }
.nt-btn--dark:hover { background: #1e293b; }

/* ---------- Blocks ---------- */
.nt-badge {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .75rem; margin-bottom: 1.5rem;
  border-radius: 9999px; background: #eef2ff; border: 1px solid #e0e7ff;
  color: #4338ca; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
}
.nt-badge__dot { width: .375rem; height: .375rem; border-radius: 9999px; background: #10b981; animation: nt-pulse 1.8s infinite; }
@keyframes nt-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.nt-badge--rose { background: #fff1f2; border-color: #ffe4e6; color: #be123c; }
.nt-badge--rose .nt-badge__dot { background: #fb7185; }

.nt-heading { font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--nt-slate-text); margin: 0 0 1.5rem; }
.nt-heading--h1 { font-size: clamp(2.25rem, 4vw, 3.75rem); }
.nt-heading__highlight { color: transparent; background-clip: text; -webkit-background-clip: text; background-image: linear-gradient(to right, var(--nt-indigo), var(--nt-blue)); }

.nt-richtext { font-size: 1.0625rem; font-weight: 500; color: var(--nt-slate-600); max-width: 36rem; line-height: 1.7; margin: 0 0 2rem; }

.nt-btn-group { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }

.nt-stat-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(15,23,42,.08); }
.nt-stat__value { font-size: 1.75rem; font-weight: 800; color: #020617; }
.nt-stat__label { font-size: .625rem; font-weight: 700; color: var(--nt-slate-400); text-transform: uppercase; letter-spacing: .05em; margin-top: .25rem; }

.nt-feature-panel { padding: 1.5rem; }
.nt-feature-panel__head { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #f1f5f9; padding-bottom:1rem; margin-bottom:1.5rem; }
.nt-feature-panel__dots span { width:.625rem; height:.625rem; border-radius:9999px; background:#e2e8f0; display:inline-block; margin-right:.25rem; }
.nt-metric { margin-bottom: 1rem; }
.nt-metric__row { display:flex; justify-content:space-between; font-size:.75rem; font-weight:600; color:var(--nt-slate-600); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.375rem; }
.nt-metric__track { height:.5rem; background:#e2e8f0; border-radius:9999px; overflow:hidden; }
.nt-metric__fill { height:100%; background: var(--nt-indigo); border-radius:9999px; transition: width .3s ease; }
.nt-terminal { margin-top:1.5rem; padding:1rem; background:#020617; border-radius:.5rem; font-family: var(--nt-font-mono); font-size:.6875rem; color:#cbd5e1; line-height:1.6; }
.nt-terminal .nt-dim { color:#64748b; }
.nt-terminal .nt-ok { color:#34d399; }
.nt-toggle-group { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---------- Hero section grid ---------- */
.nt-hero { position: relative; z-index: 10; padding: 5rem 0 8rem; }
.nt-hero__grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
@media (min-width: 1024px) { .nt-hero__grid { grid-template-columns: repeat(12, 1fr); } }
.nt-hero__col { min-width: 0; }
.nt-hero__col > * + * { margin-top: 0; }

/* ---------- Case Study Detail (Service/Product single template) ---------- */
.nt-case-hero { position: relative; background-color: #0b0c1a; background-size: cover; background-position: center; }
.nt-case-hero__overlay { background: linear-gradient(180deg, rgba(10,10,20,.75), rgba(10,10,20,.92)); padding: 5rem 1.5rem 4rem; }
.nt-case-hero__back { display: inline-block; margin-bottom: 1.5rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em; color: #38bdf8; text-decoration: none; }
.nt-case-hero__back:hover { text-decoration: underline; }
.nt-case-hero__title { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; color: #fff; letter-spacing: -.02em; margin: 1rem 0 1.25rem; }
.nt-case-hero__intro { max-width: 40rem; color: #cbd5e1; font-size: 1.0625rem; line-height: 1.7; margin: 0; }

.nt-case-overview-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; padding: 4rem 1.5rem; }
@media (min-width: 900px) { .nt-case-overview-grid { grid-template-columns: 1fr 1fr; } }

.nt-case-heading { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 1.25rem; color: var(--nt-slate-text); }
.nt-case-heading--light { color: #fff; }
.nt-case-body { color: var(--nt-slate-600); line-height: 1.75; font-size: .9375rem; margin: 0 0 1rem; }
.nt-case-body--light { color: #cbd5e1; }

.nt-case-problem-card { background: #fdf2f4; border-left: 4px solid #e11d48; border-radius: .75rem; padding: 2rem; }
.nt-case-arrow-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.nt-case-arrow-list li { position: relative; padding-left: 1.5rem; margin-bottom: .625rem; color: var(--nt-slate-600); font-size: .875rem; line-height: 1.6; }
.nt-case-arrow-list li::before { content: '\2192'; position: absolute; left: 0; color: #e11d48; font-weight: 700; }

.nt-case-arch-item { display: flex; align-items: flex-start; gap: 1rem; background: var(--nt-card-bg); border: 1px solid rgba(15,23,42,.06); border-radius: .75rem; padding: 1.25rem; margin-bottom: 1rem; }
.nt-case-arch-item__tag { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: linear-gradient(135deg, var(--nt-indigo), #ec4899); color: #fff; font-weight: 800; font-size: .6875rem; display: flex; align-items: center; justify-content: center; }
.nt-case-arch-item__title { font-size: .9375rem; font-weight: 700; margin: 0 0 .25rem; }
.nt-case-arch-item__desc { font-size: .8125rem; color: var(--nt-slate-600); margin: 0; line-height: 1.6; }

.nt-case-steps { margin: 0 0 1.5rem; padding-left: 1.25rem; }
.nt-case-steps li { color: var(--nt-slate-600); font-size: .875rem; line-height: 1.7; margin-bottom: .5rem; font-weight: 600; }
.nt-case-steps li::marker { color: var(--nt-indigo); font-weight: 800; }

.nt-case-stack-band { background: #0b0c1a; padding: 4rem 0; }
.nt-case-pills { display: flex; flex-wrap: wrap; gap: .75rem; }
.nt-case-pill { padding: .5rem 1.125rem; border-radius: 9999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); color: #e2e8f0; font-size: .8125rem; font-weight: 600; }
.nt-case-pill--gradient { background: linear-gradient(135deg, var(--nt-indigo), #ec4899); border-color: transparent; color: #fff; }

/* ---------- Custom Section (1-3 flexible columns) ---------- */
.nt-flex-columns { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding: 4rem 1.5rem; }
@media (min-width: 768px) { .nt-flex-columns { grid-template-columns: repeat(var(--nt-cols, 2), 1fr); } }
.nt-flex-columns__col { min-width: 0; }
.nt-flex-columns__col > * + * { margin-top: 0; }

/* ---------- Section wrapper + heading pattern ---------- */
.nt-section { padding: 5rem 0; }
.nt-section--tint { background: var(--nt-bg); }
.nt-section--border { border-bottom: 1px solid rgba(15,23,42,.06); }
.nt-section-heading { max-width: 42rem; margin-bottom: 3rem; }
.nt-section-heading--center { max-width: 36rem; margin-left: auto; margin-right: auto; text-align: center; }
.nt-section-heading__eyebrow { display: block; font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; color: var(--nt-indigo); margin-bottom: .5rem; }
.nt-section-heading__title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; color: var(--nt-slate-text); margin: 0; }
.nt-section-heading__subtitle { color: var(--nt-slate-600); font-weight: 500; margin: .75rem 0 0; }
.nt-cpt-grid { padding-top: 0; padding-bottom: 0; }

/* ---------- Page header (Services / Products / Landing intro) ---------- */
.nt-page-header { padding: 6rem 0 4rem; text-align: center; }
.nt-page-header__title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 1rem; }
.nt-page-header__intro { max-width: 40rem; margin: 0 auto; color: var(--nt-slate-600); font-size: 1.0625rem; line-height: 1.7; }

/* ---------- CTA banner ---------- */
.nt-cta-banner { text-align: center; padding: 5rem 1.5rem; border-radius: var(--nt-radius-xl); background: var(--nt-slate-text); color: #fff; margin: 0 1.5rem; }
.nt-cta-banner__title { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 800; margin: 0 0 1rem; }
.nt-cta-banner__text { color: #cbd5e1; margin: 0 0 2rem; }
.nt-cta-banner__actions { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.nt-cta-banner__secondary { color: inherit; font-weight: 600; font-size: .875rem; text-decoration: none; opacity: .85; }
.nt-cta-banner__secondary:hover { opacity: 1; text-decoration: underline; }

/* Opt-in modifiers — existing callers (Landing template, Page Builder's
   cta_banner, bare [nomad_cta]) don't pass align/card_style, so they keep
   the original dark+centered look untouched. */
.nt-cta-banner--left { text-align: left; }
.nt-cta-banner--left .nt-cta-banner__actions { justify-content: flex-start; }
.nt-cta-banner--light { background: var(--nt-card-bg); color: var(--nt-slate-text); border: 1px solid rgba(15,23,42,.06); }
.nt-cta-banner--light .nt-cta-banner__text { color: var(--nt-slate-600); }
.nt-cta-banner--light .nt-cta-banner__secondary { color: var(--nt-slate-600); }

/* ---------- Article ---------- */
.nt-article-header { padding: 5rem 0 3rem; text-align: center; }
.nt-article-header__meta { display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: .75rem; font-weight: 700; color: var(--nt-slate-400); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1.25rem; }
.nt-article-header__title { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -.02em; max-width: 48rem; margin: 0 auto 1.5rem; }
.nt-article-header__excerpt { max-width: 36rem; margin: 0 auto; color: var(--nt-slate-600); font-size: 1.0625rem; }
.nt-article-media { max-width: 64rem; margin: 0 auto 3rem; border-radius: var(--nt-radius-xl); overflow: hidden; }
.nt-article-media img { width: 100%; display: block; }
.nt-article-content { max-width: 42rem; margin: 0 auto; font-size: 1.0625rem; line-height: 1.8; color: #1e293b; }
.nt-article-content h2 { font-size: 1.5rem; font-weight: 800; margin: 2.5rem 0 1rem; letter-spacing: -.01em; }
.nt-article-content h3 { font-size: 1.1875rem; font-weight: 700; margin: 2rem 0 .75rem; }
.nt-article-content p { margin: 0 0 1.5rem; }
.nt-article-content ul, .nt-article-content ol { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.nt-article-content li { margin-bottom: .5rem; }
.nt-article-content a { color: var(--nt-indigo); }
.nt-article-content blockquote { margin: 2rem 0; padding: 1rem 1.5rem; border-left: 3px solid var(--nt-indigo); background: var(--nt-bg); font-style: italic; color: var(--nt-slate-600); }
.nt-article-content img { max-width: 100%; border-radius: .75rem; margin: 1.5rem 0; }
.nt-article-content code { background: #f1f5f9; padding: .125rem .375rem; border-radius: .25rem; font-family: var(--nt-font-mono); font-size: .875em; }
.nt-article-content pre { background: #020617; color: #cbd5e1; padding: 1.25rem; border-radius: .75rem; overflow-x: auto; font-family: var(--nt-font-mono); font-size: .8125rem; margin: 0 0 1.5rem; }
.nt-article-tags { max-width: 42rem; margin: 2.5rem auto 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.nt-article-tags a { font-size: .75rem; font-weight: 600; padding: .375rem .875rem; border-radius: 9999px; background: var(--nt-bg); color: var(--nt-slate-600); text-decoration: none; }
.nt-article-author { max-width: 42rem; margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid #f1f5f9; display: flex; align-items: center; gap: 1rem; }
.nt-article-author img { width: 3rem; height: 3rem; border-radius: 9999px; object-fit: cover; }
.nt-article-author__name { font-weight: 700; font-size: .9375rem; }
.nt-article-author__bio { font-size: .8125rem; color: var(--nt-slate-400); }

/* ---------- Comments (minimal) ---------- */
.nt-comments__title { font-size: 1.25rem; font-weight: 800; margin: 0 0 1.5rem; }
.nt-comments__list { list-style: none; margin: 0 0 2rem; padding: 0; }
.nt-comments__list .comment-body { padding: 1.25rem 0; border-bottom: 1px solid #f1f5f9; font-size: .875rem; color: var(--nt-slate-600); }
.nt-comments__closed { color: var(--nt-slate-400); font-size: .875rem; }

/* ---------- Footer ---------- */
.nt-footer { background: #020617; color: #64748b; border-top: 1px solid #1e293b; padding: 4rem 0 2rem; }
.nt-footer__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid #0f172a; }
@media (min-width: 768px) { .nt-footer__grid { grid-template-columns: repeat(4, 1fr); } }

.nt-footer-brand__row { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.nt-footer-brand__mark { width: 2rem; height: 2rem; border-radius: .5rem; display: flex; align-items: center; justify-content: center; background: var(--nt-indigo); color: #fff; font-weight: 800; }
.nt-footer-brand__name { font-weight: 800; letter-spacing: -.02em; color: #fff; font-size: 1rem; }
.nt-footer-brand__text { font-size: .75rem; font-weight: 500; color: #94a3b8; line-height: 1.7; margin: 0; }

.nt-footer-links__heading { font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #e2e8f0; margin: 0 0 1rem; }
.nt-footer-links__list { list-style: none; margin: 0; padding: 0; font-size: .75rem; font-weight: 500; color: #94a3b8; }
.nt-footer-links__list li { margin-bottom: .5rem; }
.nt-footer-links__list a { color: inherit; text-decoration: none; }
.nt-footer-links__list a:hover { color: #fff; text-decoration: underline; }

.nt-footer-status { font-size: .75rem; font-weight: 500; color: #94a3b8; }
.nt-footer-status__row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.nt-footer-status__dot { width: .375rem; height: .375rem; border-radius: 9999px; background: var(--nt-indigo); flex-shrink: 0; }

.nt-footer__bottom { padding-top: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; font-size: .6875rem; font-weight: 600; color: #64748b; }
@media (min-width: 768px) { .nt-footer__bottom { flex-direction: row; } }
.nt-footer__bottom-links { display: flex; gap: 1.5rem; }
.nt-footer__bottom-links a { color: inherit; text-decoration: none; }
.nt-footer__bottom-links a:hover { color: #fff; }