/* ==========================================================================
   Flaik skin — Direction 02 Bold applied over the existing Voxel + Elementor
   front-end. Pure visual overlay: no layout/structural rules, only color,
   type, border, radius, shadow, transition. Every rule is scoped to
   body.flaik-skin so the stylesheet is inert unless the skin is activated
   (see inc/flaik-skin.php).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Elementor kit palette remap — one place where the old palette becomes
   the ink scale. Header (doc 272) and footer (doc 273) backgrounds reference
   --e-global-color-primary, so the footer goes dark-ink automatically.
   -------------------------------------------------------------------------- */
body.flaik-skin.elementor-kit-10 {
  --e-global-color-primary: var(--ink-800);
  --e-global-color-secondary: var(--ink-500);
  --e-global-color-text: var(--ink-800);
  --e-global-color-accent: var(--flaik-pink);
  /* custom kit swatches → nearest ink equivalent */
  --e-global-color-145daef: var(--ink-800);   /* was translucent blue — off-brand */
  --e-global-color-213720e: var(--ink-400);   /* was #9F9A93 */
  --e-global-color-271d970: var(--ink-200);   /* was #DEDEDE */
  --e-global-color-7b0814c: var(--ink-100);   /* was beige #EEE8E0 */
  --e-global-color-aca7e67: var(--ink-700);   /* was #434343 */
  --e-global-color-b3485b2: var(--ink-600);   /* was #5D5D5D */
  --e-global-typography-text-font-family: 'Inter';
}

/* --------------------------------------------------------------------------
   2. Base typography
   -------------------------------------------------------------------------- */
body.flaik-skin {
  font-family: var(--font-body);
  color: var(--ink-800);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

body.flaik-skin h1,
body.flaik-skin h2,
body.flaik-skin h3,
body.flaik-skin h4,
body.flaik-skin h5,
body.flaik-skin h6,
body.flaik-skin .elementor-heading-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink-800);
}

body.flaik-skin h1,
body.flaik-skin .elementor-heading-title.elementor-size-xl,
body.flaik-skin .elementor-heading-title.elementor-size-xxl {
  letter-spacing: -0.035em;
}

body.flaik-skin ::selection {
  background: var(--flaik-pink-100);
  color: var(--ink-900);
}

body.flaik-skin a {
  transition: color 0.15s ease;
}

/* --------------------------------------------------------------------------
   3. Buttons — pink primary, ink/neutral secondary. Voxel convention:
   .ts-btn-2 = accent button, .ts-btn-1 = neutral button.
   -------------------------------------------------------------------------- */
body.flaik-skin .ts-btn,
body.flaik-skin .elementor-button,
body.flaik-skin .agent-job-form .btn,
body.flaik-skin .agent-job-form button {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.15s ease;
}

body.flaik-skin .ts-btn-1 {
  background: var(--ink-0);
  border: 1px solid var(--ink-200);
  color: var(--ink-800);
}

body.flaik-skin .ts-btn-1:hover {
  background: var(--ink-50);
  border-color: var(--ink-300);
  color: var(--ink-900);
}

body.flaik-skin .ts-btn-2,
body.flaik-skin .agent-job-form #submit.ts-btn-2 {
  background: var(--flaik-pink);
  border: 1px solid var(--flaik-pink);
  color: #fff;
}

body.flaik-skin .ts-btn-2:hover,
body.flaik-skin .agent-job-form #submit.ts-btn-2:hover {
  background: var(--flaik-pink-600);
  border-color: var(--flaik-pink-600);
  color: #fff;
}

body.flaik-skin .elementor-button:hover {
  transform: translateY(-1px);
}

body.flaik-skin .ts-icon-btn {
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

body.flaik-skin .ts-icon-btn:hover {
  background: var(--ink-100);
}

/* --------------------------------------------------------------------------
   4. Cards — borders do the work, no drop shadows.
   .ts-preview wraps every card the Voxel post feed renders.
   -------------------------------------------------------------------------- */
body.flaik-skin .ts-preview {
  background: var(--ink-0);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

body.flaik-skin .ts-preview:hover {
  border-color: var(--ink-300);
  transform: translateY(-2px);
}

body.flaik-skin .ts-preview img {
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   5. Forms — quiet borders, pink focus ring.
   -------------------------------------------------------------------------- */
body.flaik-skin .ts-form-group input[type="text"],
body.flaik-skin .ts-form-group input[type="email"],
body.flaik-skin .ts-form-group input[type="number"],
body.flaik-skin .ts-form-group input[type="password"],
body.flaik-skin .ts-form-group input[type="search"],
body.flaik-skin .ts-form-group input[type="url"],
body.flaik-skin .ts-form-group textarea,
body.flaik-skin .ts-form-group select,
body.flaik-skin .ts-filter,
body.flaik-skin .agent-job-form input[type="text"],
body.flaik-skin .agent-job-form input[type="email"],
body.flaik-skin .agent-job-form input[type="number"],
body.flaik-skin .agent-job-form textarea,
body.flaik-skin .agent-job-form select {
  font-family: var(--font-body);
  background: var(--ink-0);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  color: var(--ink-800);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.flaik-skin .ts-form-group input:focus,
body.flaik-skin .ts-form-group textarea:focus,
body.flaik-skin .ts-form-group select:focus,
body.flaik-skin .agent-job-form input:focus,
body.flaik-skin .agent-job-form textarea:focus,
body.flaik-skin .agent-job-form select:focus {
  border-color: var(--flaik-pink);
  box-shadow: 0 0 0 3px var(--flaik-pink-100);
  outline: none;
}

body.flaik-skin .ts-filter:hover {
  border-color: var(--ink-300);
}

body.flaik-skin .agent-job-form label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   6. Navigation / menus
   -------------------------------------------------------------------------- */
body.flaik-skin .ts-navbar,
body.flaik-skin .ts-navbar a {
  font-family: var(--font-body);
  font-weight: 500;
}

body.flaik-skin .ts-term-dropdown,
body.flaik-skin .ts-term-dropdown-list {
  border-radius: var(--radius-md);
}

body.flaik-skin .ts-term-dropdown-list li a:hover {
  background: var(--ink-50);
}

/* --------------------------------------------------------------------------
   7. Popups & dropdown panels (Voxel)
   -------------------------------------------------------------------------- */
body.flaik-skin .ts-field-popup,
body.flaik-skin .ts-popup-content-wrapper {
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   8. Job output components (custom agent-job UI)
   -------------------------------------------------------------------------- */
body.flaik-skin .output-html-wrapper,
body.flaik-skin .output-html-preview,
body.flaik-skin .job-output-preview-table {
  border-radius: var(--radius-md);
  border-color: var(--ink-200);
}

body.flaik-skin .output-html-modal__dialog {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

body.flaik-skin .job_completed {
  color: var(--status-done);
}

body.flaik-skin .agent-job-form .response-message p.success {
  color: var(--status-done);
}

body.flaik-skin .agent-job-form .response-message p.error {
  color: var(--flaik-pink-700);
}

/* --------------------------------------------------------------------------
   9. Layout — widen boxed containers toward the 1320px design grid on
   large screens only, so tablet/mobile media queries stay untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  body.flaik-skin .e-con-boxed {
    --container-max-width: var(--max-width);
  }
}

/* --------------------------------------------------------------------------
   10. Polish
   -------------------------------------------------------------------------- */
body.flaik-skin :focus-visible {
  outline: 2px solid var(--flaik-pink);
  outline-offset: 2px;
}

body.flaik-skin .ts-no-posts {
  color: var(--ink-500);
  font-family: var(--font-body);
}