/*
Theme Name: Chaunsa v2
Theme URI: https://chaunsa.net
Author: Waqar Younas
Author URI: https://chaunsa.net
Description: Chaunsa Digital Growth Consultancy — interactive, procedurally-animated theme. DIAGNOSE > BUILD > FIX > GROW > SCALE > TRAIN > CREATE. This is a separate, standalone theme package for staging/testing — it does not touch or overwrite the live "Chaunsa" theme.
Version: 2.1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: chaunsa-v2
*/

/* ==========================================================================
   DESIGN TOKENS — same locked Chaunsa brand system as v1, exposed as
   overridable CSS custom properties so Customizer color controls can
   repaint the site live without editing this file.
   ========================================================================== */
:root {
  --c-violet: #5B3FD4;
  --c-violet-light: #9D8CFF;
  --c-violet-dark: #4630A8;

  /* Dark-first foundation — controlled variation, not one flat color. */
  --c-ink: #14102B;
  --c-ink-alt: #1A1535;
  --c-ink-soft: #221D3F;

  --c-offwhite: #F6F1E7;   /* retained only for legacy/light-mode utilities, no longer a homepage-dominant tone */
  --c-white: #FFFFFF;
  --c-soft-white: #F6F4FF;

  /* Text, redefined for a dark-first environment. */
  --c-text: #FFFFFF;               /* default body text is now light, since dark is the default canvas */
  --c-text-muted: #B8AFDD;         /* soft desaturated violet/white, replacing the old beige-toned muted gray */
  --c-text-on-light: #2A2540;      /* used only inside light-surface utility contexts, if any remain */

  --c-border: rgba(157, 140, 255, 0.18);   /* violet-tinted border for dark surfaces, replacing the beige border */
  --c-border-strong: rgba(157, 140, 255, 0.32);

  --c-success: #4CAF7D;   /* lifted slightly for legibility on dark surfaces */
  --c-error: #E0685A;

  --font-display: 'Baloo 2', 'Segoe UI Rounded', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --container-width: 1240px;
  --shadow-soft: 0 8px 30px rgba(20, 16, 43, 0.08);
  --shadow-lift: 0 16px 40px rgba(91, 63, 212, 0.18);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;

  --z-header: 100;
  --z-cursor: 300;
  --z-nav-mobile: 99;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, canvas, svg { max-width: 100%; display: block; }
a { color: var(--c-violet-light); text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--c-white);
  line-height: 1.1;
  margin: 0 0 0.5em;
  font-weight: 600;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 24px; }
.section { position: relative; padding: 110px 0; overflow: hidden; }

/*
 * Dark-first section surfaces — controlled variation across the three ink
 * tones rather than one flat color, per the refinement brief. These three
 * are now the ONLY homepage section backgrounds; the old cream/white
 * variants are gone. `.section--surface` is a light utility kept only for
 * non-homepage contexts (see the "light-surface utility" block below) —
 * the homepage itself never uses it.
 */
.section--ink { background: var(--c-ink); }
.section--ink-alt { background: var(--c-ink-alt); }
.section--ink-soft { background: var(--c-ink-soft); }
.section--ink, .section--ink-alt, .section--ink-soft { color: var(--c-text); }

@media (max-width: 782px) {
  .section { padding: 64px 0; }
  body { font-size: 16px; }
}

.eyebrow {
  display: inline-block;
  color: var(--c-violet-light);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section-head { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.section-head p { color: var(--c-text-muted); font-size: 1.08rem; }

/* ==========================================================================
   LIGHT-SURFACE UTILITY — kept only for isolated non-homepage contexts
   (e.g. a future light-mode embed). The homepage itself never uses this;
   every homepage section is one of the three ink tones above.
   ========================================================================== */
.section--surface { background: var(--c-soft-white); color: var(--c-text-on-light); }
.section--surface h1, .section--surface h2, .section--surface h3, .section--surface h4 { color: var(--c-ink); }
.section--surface .eyebrow { color: var(--c-violet); }
.section--surface a { color: var(--c-violet); }

/*
 * Compatibility + upgrade: interior pages (Contact, About, single
 * Service/Case Study, archives, blog, 404) still use the pre-refinement
 * class names. Rather than leave them with NO rule at all (a real bug —
 * this is why the Contact page lost its text contrast), they're mapped
 * onto the same dark-first system as the homepage, so the whole site
 * reads as one connected environment instead of a dark homepage bolted
 * to light interior pages.
 */
.section--dark, .section--light, .section--white { background: var(--c-ink); color: var(--c-text); }
.section--dark .card, .section--light .card, .section--white .card {
  background: var(--c-ink-soft); border-color: var(--c-border); color: var(--c-text);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--c-violet); color: var(--c-white); box-shadow: var(--shadow-lift); }
.btn-primary:hover { background: var(--c-violet-dark); color: var(--c-white); }
.btn-outline { background: transparent; border: 2px solid var(--c-white); color: var(--c-white); }
.btn-outline:hover { background: rgba(255,255,255,0.1); }
/* On the one light utility surface, outline buttons need dark ink instead. */
.section--surface .btn-outline { border-color: var(--c-ink); color: var(--c-ink); }
.section--surface .btn-outline:hover { background: rgba(20,16,43,0.06); }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }

/* Cards / grids — dark surfaces by default (refinement pass 01) */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.card {
  background: var(--c-ink-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 30px;
  color: var(--c-text);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--c-border-strong);
  box-shadow: 0 18px 40px rgba(91, 63, 212, 0.18);
}
.card h3 { color: var(--c-white); }
.card p { color: var(--c-text-muted); }
.section--surface .card { background: var(--c-white); border-color: rgba(91,63,212,0.12); color: var(--c-text-on-light); }
.section--surface .card h3 { color: var(--c-ink); }
.section--surface .card p { color: var(--c-text-muted); }

/* Scroll-reveal utility (see scroll-reveal.js) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Skip link (accessibility) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--c-violet); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Focus states */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--c-violet-light);
  outline-offset: 2px;
}