/* =========================================================
   Nesist – Global Styles (v1.0)
   Location: /includes/css/nesist.css
   Purpose: consolidate shared CSS from landing, about, contact
   ========================================================= */

/* 1) Base reset & tokens */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: #0B0B0D;                 /* brand ink */
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Brand tokens (for non-Tailwind pieces) */
:root{
  --ink: #0B0B0D;
  --sand: #F6F6F4;
  /* Primary palette to mirror Tailwind extension */
  --primary-50:#effef4;  --primary-100:#dbfee6; --primary-200:#b3f8ca;
  --primary-300:#7cf0a6; --primary-400:#54e68c; --primary-500:#2fe06f;
  --primary-600:#11b853; --primary-700:#0b8a40; --primary-800:#0c6a35; --primary-900:#0b552e;

  /* Shadows */
  --shadow-card: 0 8px 30px rgba(17,24,39,.08);
  --shadow-card-hover: 0 18px 60px rgba(0,0,0,.12);
  /* Radii */
  --radius-xl: 1rem;     /* ~16px */
  --radius-2xl: 1.25rem; /* ~20px */
  --radius-3xl: 1.5rem;  /* ~24px */
}

/* 2) Layout helpers shared across pages */
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }

/* Card hover behavior seen on all three pages */
.card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.shadow-card { box-shadow: var(--shadow-card); }

/* Decorative grid background used in hero/illustrations */
.bg-gridLight,
.bg-gridlight, /* tolerant alias */
.bg-grid-light{
  background-image: radial-gradient(circle at 1px 1px, rgba(17,24,39,0.06) 1px, transparent 0);
  background-size: 16px 16px;
}

/* Soft outline button used on landing */
.btn-outline{
  position: relative;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  border-radius: var(--radius-xl);
}
.btn-outline:hover{ border-color: rgba(17,24,39,.25); box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-1px); }

/* Small pill/badge used on About hero */
.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .7rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  background:#fff; color:#475569; font-size:.8rem;
}

/* 3) Animation & decorative elements */
.marquee{ position: relative; overflow: hidden; }
.marquee-track{ display:flex; gap:48px; width:max-content; animation: nesist-scroll 28s linear infinite; }
@keyframes nesist-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.blob{ position:absolute; filter: blur(40px); opacity:.35; border-radius:9999px; }

/* 4) Forms – subtle defaults (works alongside Tailwind classes) */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select{
  font: inherit;
  color: inherit;
  border-radius: var(--radius-xl);
  border: 1px solid #e5e7eb;       /* gray-200 */
  background: #fff;
  padding: .8rem 1rem;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
input::placeholder, textarea::placeholder{ color:#9ca3af; } /* gray-400 */
textarea{ resize: vertical; }

/* Fallback first, then modern override so older browsers keep the first */
input:focus, textarea:focus, select:focus{
  border-color: var(--primary-200);
  /* fallback for browsers without color-mix() */
  box-shadow: 0 0 0 4px rgba(179, 248, 202, .5); /* approx of --primary-200 @ 50% */
  /* modern override */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-200) 50%, transparent);
}

/* Buttons (non-TW fallbacks) */
.button-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.2rem; border:none; border-radius: var(--radius-xl);
  background: var(--primary-600); color:#fff; font-weight:600; cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.button-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.10); background: var(--primary-700); }

/* Keyboard-focus rings for a11y */
.button-primary:focus-visible,
.btn-outline:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 2px solid var(--primary-400);
  outline-offset: 2px;
}

/* 5) Header helpers */
.header-blur{
  -webkit-backdrop-filter: blur(8px); /* Safari/iOS support */
  backdrop-filter: blur(8px);
  background: rgb(255 255 255 / .80);
  border-bottom: 1px solid rgb(229 231 235 / .80); /* gray-200 */
}

/* 6) Utilities */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip: rect(0, 0, 0, 0);            /* legacy */
  clip-path: inset(50%);             /* modern */
  white-space:nowrap; border:0;
}

/* Respect Reduced Motion */
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
  .card, .btn-outline, .button-primary{ transition: none; }
}

/* 7) Footer small print */
.footer-meta{
  color:#6b7280; /* gray-500 */
  font-size: .9rem;
}

/* 8) Map & media wrappers */
.media-rounded{
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

/* 9) Simple container for “max-w” hero media cards */
.media-card{
  border:1px solid #e5e7eb;
  background:#fff;
  padding: 1rem;
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-card);
}

/* 10) Year badge (used in footers) */
#year{ font-variant-numeric: tabular-nums; }

/* Mobile drawer & overlay behavior */
[data-nav] { transform: translateX(100%); }
[data-nav].open { transform: translateX(0); }
html.nav-open [data-nav-overlay]{ opacity:1; pointer-events:auto; }

/* Slight emphasis variant for footer small print inside footer */
footer .footer-meta { color:#6b7280; }