/* ==================================================================
   JUSTPIXEL
   GLOBAL SHARED STYLES

   Reusable layout, typography, controls and components used
   throughout the entire site.
   ================================================================== */

/* ==================================================================
   DOCUMENT
   ================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: var(--jp-bg);
  color: var(--jp-text);

  font-family: var(--jp-font-sans);
  font-size: var(--jp-text-base);
  line-height: var(--jp-leading-normal);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==================================================================
   BASIC TYPOGRAPHY
   ================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--jp-text);

  line-height: var(--jp-leading-tight);

  margin-top: 0;
}

h1 {
  font-weight: var(--jp-weight-heavy);
}

h2,
h3 {
  font-weight: var(--jp-weight-bold);
}

p {
  line-height: var(--jp-leading-relaxed);
}

a {
  color: var(--jp-primary);

  text-underline-offset: 3px;

  transition:
    color var(--jp-transition-fast),
    opacity var(--jp-transition-fast);
}

a:hover {
  color: var(--jp-primary-hover);
}

/* ==================================================================
   GLOBAL PAGE LAYOUT
   ================================================================== */

.jp-page {
  padding: var(--jp-page-padding) 0;
}

.jp-page-header {
  max-width: 820px;

  margin-bottom: var(--jp-space-8);
}

.jp-page-header h1 {
  margin-bottom: var(--jp-space-3);
}

.jp-page-header p:last-child {
  margin-bottom: 0;
}

/* ==================================================================
   TEXT HELPERS
   ================================================================== */

.jp-muted {
  color: var(--jp-text-muted);
}

.jp-text-soft {
  color: var(--jp-text-soft);
}

.jp-text-primary {
  color: var(--jp-primary);
}

.jp-text-success {
  color: var(--jp-success);
}

.jp-text-warning {
  color: var(--jp-warning);
}

.jp-text-danger {
  color: var(--jp-danger);
}

/* ==================================================================
   SHADOW HELPERS
   ================================================================== */

.jp-shadow {
  box-shadow: var(--jp-shadow);
}

.jp-shadow-sm {
  box-shadow: var(--jp-shadow-sm);
}

/* ==================================================================
   GENERIC CARD
   ================================================================== */

.jp-card {
  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-lg);

  background: var(--jp-surface);

  box-shadow: var(--jp-shadow-sm);
}

/* ==================================================================
   GENERIC PANEL
   ================================================================== */

.jp-panel {
  padding: var(--jp-space-6);

  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-md);

  background: var(--jp-surface);
}

/* ==================================================================
   SOFT SURFACE
   ================================================================== */

.jp-soft-surface {
  background: var(--jp-surface-soft);

  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-lg);
}

/* ==================================================================
   BUTTONS
   ================================================================== */

.jp-btn,
.jp-tool-button,
.jp-json-action-button,
.jp-case-button,
.jp-password-generate-button,
.jp-wheel-spin-button,
.jp-higher-lower-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: var(--jp-space-2);

  padding: 0.7rem 1rem;

  border: 1px solid transparent;
  border-radius: var(--jp-radius-sm);

  font: inherit;
  font-weight: var(--jp-weight-semibold);
  line-height: 1.2;

  text-decoration: none;

  cursor: pointer;

  transition:
    background-color var(--jp-transition-fast),
    border-color var(--jp-transition-fast),
    color var(--jp-transition-fast),
    box-shadow var(--jp-transition-fast),
    transform var(--jp-transition-fast);
}

/* ------------------------------------------------------------------
   PRIMARY BUTTON
   ------------------------------------------------------------------ */

.jp-btn,
.jp-btn-primary,
.jp-tool-button-primary,
.jp-password-generate-button,
.jp-wheel-spin-button {
  background: var(--jp-primary);

  border-color: var(--jp-primary);

  color: var(--jp-text-inverse);
}

.jp-btn:hover,
.jp-btn-primary:hover,
.jp-tool-button-primary:hover,
.jp-password-generate-button:hover:not(:disabled),
.jp-wheel-spin-button:hover:not(:disabled) {
  background: var(--jp-primary-hover);

  border-color: var(--jp-primary-hover);

  color: var(--jp-text-inverse);

  text-decoration: none;

  transform: translateY(-1px);
}

/* ------------------------------------------------------------------
   SECONDARY BUTTON
   ------------------------------------------------------------------ */

.jp-btn-secondary,
.jp-tool-button-secondary,
.jp-json-action-button,
.jp-case-button,
.jp-higher-lower-button {
  background: var(--jp-surface);

  border-color: var(--jp-border);

  color: var(--jp-text);
}

.jp-btn-secondary:hover,
.jp-tool-button-secondary:hover,
.jp-json-action-button:hover,
.jp-case-button:hover,
.jp-higher-lower-button:hover:not(:disabled) {
  background: var(--jp-surface-hover);

  border-color: var(--jp-border-strong);

  color: var(--jp-text);

  text-decoration: none;

  transform: translateY(-1px);
}

/* ------------------------------------------------------------------
   DISABLED BUTTONS
   ------------------------------------------------------------------ */

.jp-btn:disabled,
.jp-tool-button:disabled,
.jp-json-action-button:disabled,
.jp-case-button:disabled,
.jp-password-generate-button:disabled,
.jp-wheel-spin-button:disabled,
.jp-higher-lower-button:disabled {
  opacity: 0.5;

  cursor: not-allowed;

  transform: none;
}

/* ------------------------------------------------------------------
   BUTTON FOCUS
   ------------------------------------------------------------------ */

.jp-btn:focus-visible,
.jp-tool-button:focus-visible,
.jp-json-action-button:focus-visible,
.jp-case-button:focus-visible,
.jp-password-generate-button:focus-visible,
.jp-wheel-spin-button:focus-visible,
.jp-higher-lower-button:focus-visible {
  outline: none;

  box-shadow: var(--jp-focus-ring);
}

/* ==================================================================
   BOOTSTRAP BUTTON COMPATIBILITY
   ================================================================== */

.btn-primary {
  background-color: var(--jp-primary);

  border-color: var(--jp-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--jp-primary-hover);

  border-color: var(--jp-primary-hover);
}

.btn-outline-primary {
  color: var(--jp-primary);

  border-color: var(--jp-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--jp-primary);

  border-color: var(--jp-primary);

  color: var(--jp-text-inverse);
}

/*
 * Existing CTA class retained while older pages are migrated.
 */
.jp-cta {
  border-radius: var(--jp-radius-sm);

  padding: 0.75rem 1.125rem;

  font-weight: var(--jp-weight-semibold);
}

/* ==================================================================
   FORM CONTROLS
   ================================================================== */

.jp-input,
.jp-textarea,
.jp-select,
.jp-library-search-input,
.jp-text-counter-input,
.jp-case-converter-input,
.jp-json-input,
.jp-password-output,
.jp-wheel-options-input {
  display: block;

  width: 100%;

  box-sizing: border-box;

  padding: 0.875rem 1rem;

  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-sm);

  background: var(--jp-surface);
  color: var(--jp-text);

  font: inherit;
  line-height: var(--jp-leading-normal);

  outline: none;

  transition:
    border-color var(--jp-transition-fast),
    box-shadow var(--jp-transition-fast),
    background-color var(--jp-transition-fast);
}

.jp-input:hover,
.jp-textarea:hover,
.jp-select:hover,
.jp-library-search-input:hover,
.jp-text-counter-input:hover,
.jp-case-converter-input:hover,
.jp-json-input:hover,
.jp-password-output:hover,
.jp-wheel-options-input:hover {
  border-color: var(--jp-border-strong);
}

.jp-input:focus,
.jp-textarea:focus,
.jp-select:focus,
.jp-library-search-input:focus,
.jp-text-counter-input:focus,
.jp-case-converter-input:focus,
.jp-json-input:focus,
.jp-password-output:focus,
.jp-wheel-options-input:focus {
  border-color: var(--jp-border-focus);

  box-shadow: var(--jp-focus-ring);

  background: var(--jp-surface);
}

.jp-input::placeholder,
.jp-textarea::placeholder,
.jp-library-search-input::placeholder,
.jp-text-counter-input::placeholder,
.jp-case-converter-input::placeholder,
.jp-json-input::placeholder,
.jp-wheel-options-input::placeholder {
  color: var(--jp-text-soft);

  opacity: 1;
}

/* ------------------------------------------------------------------
   MONOSPACE INPUT
   ------------------------------------------------------------------ */

.jp-input-mono,
.jp-json-input,
.jp-password-output {
  font-family: var(--jp-font-mono);
}

/* ==================================================================
   LABELS
   ================================================================== */

.jp-label {
  display: inline-block;

  margin-bottom: var(--jp-space-2);

  font-size: var(--jp-text-sm);
  font-weight: var(--jp-weight-semibold);
}

/* ==================================================================
   TAGS / PILLS
   ================================================================== */

.jp-tag,
.jp-pill,
.jp-library-tag,
.jp-library-status {
  display: inline-flex;
  align-items: center;

  gap: var(--jp-space-1);

  padding: 0.3rem 0.6rem;

  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-pill);

  background: var(--jp-surface-accent);

  color: var(--jp-text-muted);

  font-size: var(--jp-text-xs);
  font-weight: var(--jp-weight-medium);
}

/* ==================================================================
   STATUS / ALERT BOXES
   ================================================================== */

.jp-status {
  padding: var(--jp-space-3) var(--jp-space-4);

  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-sm);

  background: var(--jp-surface-soft);

  font-size: var(--jp-text-sm);
}

.jp-status-success {
  border-color: var(--jp-success-border);

  background: var(--jp-success-soft);

  color: var(--jp-success);
}

.jp-status-warning {
  border-color: var(--jp-warning-border);

  background: var(--jp-warning-soft);

  color: var(--jp-warning);
}

.jp-status-danger {
  border-color: var(--jp-danger-border);

  background: var(--jp-danger-soft);

  color: var(--jp-danger);
}

/* ==================================================================
   TOOL BREADCRUMBS
   ================================================================== */

.jp-tool-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: var(--jp-space-2);

  margin-bottom: var(--jp-space-6);

  color: var(--jp-text-soft);

  font-size: var(--jp-text-sm);
}

.jp-tool-breadcrumb a {
  color: var(--jp-primary);

  font-weight: var(--jp-weight-medium);

  text-decoration: none;
}

.jp-tool-breadcrumb a:hover {
  text-decoration: underline;
}

/* ==================================================================
   TOOL HEADER
   ================================================================== */

.jp-tool-header {
  margin-bottom: var(--jp-space-8);
}

.jp-tool-category {
  display: inline-flex;

  margin-bottom: var(--jp-space-3);

  padding: 0.3rem 0.65rem;

  border-radius: var(--jp-radius-pill);

  background: var(--jp-surface-accent);

  color: var(--jp-primary);

  font-size: var(--jp-text-xs);
  font-weight: var(--jp-weight-bold);

  text-transform: uppercase;

  letter-spacing: 0.08em;
}

/* ==================================================================
   TOOL PANEL HEADER
   ================================================================== */

.jp-tool-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--jp-space-4);

  margin-bottom: var(--jp-space-4);
}

.jp-tool-panel-header h2 {
  margin-bottom: var(--jp-space-1);

  font-size: var(--jp-text-lg);
}

.jp-tool-panel-header p {
  margin-bottom: 0;
}

/* ==================================================================
   TOOL NOTE
   ================================================================== */

.jp-tool-note {
  margin-top: var(--jp-space-6);

  padding: var(--jp-space-4) var(--jp-space-5);

  border: 1px solid var(--jp-info-border);
  border-radius: var(--jp-radius-sm);

  background: var(--jp-info-soft);

  color: var(--jp-text-muted);

  font-size: var(--jp-text-sm);
  line-height: var(--jp-leading-relaxed);
}

.jp-tool-note strong {
  color: var(--jp-text);
}

/* ==================================================================
   GENERIC STAT CARD
   ================================================================== */

.jp-stat-card,
.jp-reaction-stat-card {
  padding: var(--jp-space-5);

  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-md);

  background: var(--jp-surface);

  box-shadow: var(--jp-shadow-xs);
}

.jp-stat-value,
.jp-reaction-stat-value {
  color: var(--jp-text);

  font-weight: var(--jp-weight-bold);
}

.jp-stat-label,
.jp-reaction-stat-label {
  color: var(--jp-text-muted);
}

/* ==================================================================
   ACCESSIBILITY
   ================================================================== */

:focus-visible {
  outline-color: var(--jp-primary);
}

/* ==================================================================
   SOFTWARE TOOL PAGE DENSITY
   ================================================================== */

.jp-tool-page {
  padding-top: var(--jp-space-6);
}

.jp-tool-page .jp-tool-breadcrumb {
  margin-bottom: var(--jp-space-4);
}

.jp-tool-page .jp-tool-header {
  margin-bottom: var(--jp-space-5);
}

.jp-tool-page .jp-tool-header h1 {
  margin-bottom: var(--jp-space-2);
}

.jp-tool-page .jp-tool-note {
  margin-top: var(--jp-space-5);
}

/* Slightly tighter stat cards inside tools */
.jp-tool-page .jp-stat-card,
.jp-tool-page .jp-reaction-stat-card {
  padding: var(--jp-space-4);
}

/* ==================================================================
   MOBILE GLOBAL ADJUSTMENTS
   ================================================================== */

@media (max-width: 767px) {
  :root {
    --jp-page-padding: 2rem;
  }

  .jp-page-header {
    margin-bottom: var(--jp-space-6);
  }

  .jp-tool-header {
    margin-bottom: var(--jp-space-6);
  }

  .jp-tool-panel-header {
    align-items: flex-start;

    flex-direction: column;
  }
}