/* ==========================================================================
   Codr — web brand stylesheet
   Mirrors the app's design system (src/app/globals.css) for the website.
   Use alongside theme.json: theme.json sets colours, fonts and sizes for the
   block editor; this file adds what theme.json can't express — the tactile
   3D lip, the dotted brand sky, chips, progress bars and the wordmark.

   Fonts: Nunito (everything) + JetBrains Mono (code), from Google Fonts.
   ========================================================================== */


:root {
  /* Brand (primary) */
  --codr-brand: #1cb0f6;
  --codr-brand-dark: #168fcc;
  --codr-brand-light: #58c7f7;
  --codr-brand-pale: #e8f7fe;
  --codr-brand-ink: #0f78ad;

  /* Semantic accents: face / lip / pale / ink (ink = the only text-safe one) */
  --codr-success: #58cc02;  --codr-success-dark: #46a900; --codr-success-light: #89e219; --codr-success-pale: #e8f8dc; --codr-success-ink: #348000;
  --codr-danger: #ff4b4b;   --codr-danger-dark: #d93d3d;  --codr-danger-pale: #fff0f0;  --codr-danger-ink: #c42a2a;
  --codr-gold: #ffc800;     --codr-gold-dark: #d9a900;    --codr-gold-pale: #fff8d9;    --codr-gold-ink: #8c6300;
  --codr-orange: #ff9600;   --codr-orange-dark: #d77c00;  --codr-orange-pale: #fff1df;  --codr-orange-ink: #a85e00;
  --codr-purple: #ce82ff;   --codr-purple-dark: #a85ddb;  --codr-purple-pale: #f5e8ff;  --codr-purple-ink: #8a42c2;
  --codr-mythic: #ff4fa3;   --codr-mythic-dark: #d62f80;  --codr-mythic-pale: #ffebf5;  --codr-mythic-ink: #d62f80;

  /* Neutrals */
  --codr-ink: #4b4b4b;
  --codr-ink-secondary: #696969;
  --codr-ink-muted: #afafaf;
  --codr-background: #ffffff;
  --codr-elevated: #f7f7f7;
  --codr-hover: #efefef;
  --codr-edge: #e5e5e5;
  --codr-edge-strong: #cfcfcf;

  /* The one dark surface: code */
  --codr-editor: #1e2430;
  --codr-editor-edge: #303746;
  --codr-editor-ink: #e6e9f2;
  --codr-editor-muted: #7f879c;

  /* Type */
  --codr-font: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --codr-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Shape */
  --codr-radius-input: 12px;
  --codr-radius-card: 16px;
  --codr-radius-button: 16px;
  --codr-radius-feature: 20px;
  --codr-radius-section: 32px;
  --codr-shadow-card: 0 2px 0 rgb(0 0 0 / 0.08);
  --codr-shadow-pop: 0 4px 0 rgb(0 0 0 / 0.08);

  /* Layout */
  --codr-content: 720px;
  --codr-page: 1080px;
  --codr-wide: 1200px;
  --codr-gutter: clamp(16px, 4vw, 32px);

  /* Motion */
  --codr-fast: 140ms;
  --codr-normal: 200ms;
  --codr-smooth: 260ms;
  --codr-slow: 360ms;
  --codr-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --codr-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ---------- Base ---------- */
body {
  margin: 0;
  background: var(--codr-background);
  color: var(--codr-ink);
  font-family: var(--codr-font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--codr-ink); font-weight: 800; margin: 0 0 0.5em; }
code, pre, kbd { font-family: var(--codr-font-mono); }
a { color: var(--codr-brand-ink); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--codr-brand-pale); color: var(--codr-brand-ink); }
:focus-visible { outline: 3px solid rgb(28 176 246 / 0.45); outline-offset: 2px; border-radius: 8px; }

/* ---------- Type roles (marketing scale; the app's scale tops out at 40px) ---------- */
.codr-hero-title { font-size: clamp(40px, 7vw, 72px); font-weight: 900; line-height: 1.02; letter-spacing: -0.03em; }
.codr-display { font-size: clamp(34px, 5vw, 56px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
.codr-h1 { font-size: clamp(30px, 4vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.codr-h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; }
.codr-h3 { font-size: 22px; font-weight: 800; line-height: 1.25; }
.codr-lead { font-size: clamp(18px, 2vw, 20px); font-weight: 600; line-height: 1.5; color: var(--codr-ink-secondary); }
.codr-body { font-size: 17px; font-weight: 400; line-height: 1.55; }
.codr-small { font-size: 14px; font-weight: 600; line-height: 1.4; }
.codr-label { font-size: 12px; font-weight: 800; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; color: var(--codr-ink-secondary); }
.codr-label--brand { color: var(--codr-brand-ink); }

/* ---------- Wordmark ---------- */
.codr-wordmark {
  display: inline-block;
  font-family: var(--codr-font);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--codr-brand);
  text-shadow: 0 0.07em 0 var(--codr-brand-dark);
  padding-bottom: 0.07em;
}
.codr-wordmark--on-brand { color: #fff; }

/* ---------- Buttons: solid face, 4px darker lip, presses down ---------- */
.codr-btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  font-family: var(--codr-font);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  user-select: none;
  border: 2px solid var(--codr-brand-dark);
  border-bottom-width: 4px;
  border-radius: var(--codr-radius-button);
  background: var(--codr-brand);
  color: #fff;
  transition: transform var(--codr-fast) var(--codr-ease-out), border-bottom-width var(--codr-fast) var(--codr-ease-out), background-color var(--codr-normal) var(--codr-ease-out);
}
.codr-btn:hover,
.wp-block-button__link:hover { background: var(--codr-brand-light); color: #fff; }
.codr-btn:active,
.wp-block-button__link:active { transform: translateY(3px) scale(0.985); border-bottom-width: 1px; }

.codr-btn--secondary,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-codr-secondary .wp-block-button__link { background: #fff; color: var(--codr-brand-ink); border-color: var(--codr-edge); }
.codr-btn--secondary:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-codr-secondary .wp-block-button__link:hover { background: var(--codr-elevated); color: var(--codr-brand-ink); }

.codr-btn--success,
.wp-block-button.is-style-codr-success .wp-block-button__link { background: var(--codr-success); border-color: var(--codr-success-dark); }
.codr-btn--success:hover,
.wp-block-button.is-style-codr-success .wp-block-button__link:hover { background: var(--codr-success-light); }

/* On the brand-blue sky: white face, blue text */
.codr-btn--white,
.wp-block-button.is-style-codr-white .wp-block-button__link { background: #fff; color: var(--codr-brand-ink); border-color: #d2ecfa; border-bottom-color: rgb(8 50 90 / 0.28); }
.codr-btn--white:hover,
.wp-block-button.is-style-codr-white .wp-block-button__link:hover { background: var(--codr-brand-pale); color: var(--codr-brand-ink); }

.codr-btn--ghost { background: transparent; border-color: transparent; border-bottom-width: 2px; color: var(--codr-ink-secondary); }
.codr-btn--ghost:hover { background: var(--codr-elevated); color: var(--codr-ink); }
.codr-btn--ghost:active { transform: scale(0.97); border-bottom-width: 2px; }

.codr-btn--sm { min-height: 44px; padding: 0 16px; font-size: 14px; border-radius: 12px; }
.codr-btn--lg { min-height: 60px; padding: 0 32px; font-size: 17px; }
.codr-btn--block { width: 100%; }
.codr-btn[disabled], .codr-btn.is-disabled { pointer-events: none; background: var(--codr-edge); color: var(--codr-ink-muted); border-color: var(--codr-edge); border-bottom-width: 2px; }

/* ---------- Cards: borders carry the weight, never blurry shadows ---------- */
.codr-card { background: #fff; border: 2px solid var(--codr-edge); border-radius: var(--codr-radius-card); padding: 24px; }
.codr-card--elevated { background: var(--codr-elevated); }
.codr-card--feature { border-radius: var(--codr-radius-feature); padding: 28px; }
.codr-card--interactive {
  border-bottom-width: 4px;
  cursor: pointer;
  transition: transform var(--codr-fast) var(--codr-ease-out), border-color var(--codr-normal) var(--codr-ease-out), border-bottom-width var(--codr-fast) var(--codr-ease-out);
}
.codr-card--interactive:hover { transform: translateY(-1px); border-color: var(--codr-edge-strong); }
.codr-card--interactive:active { transform: translateY(2px) scale(0.985); border-bottom-width: 2px; }
/* A card in an accent colour: pale fill, accent edge */
.codr-card--brand { background: var(--codr-brand-pale); border-color: #bfe7fb; border-bottom-color: var(--codr-brand-light); }

/* ---------- Chips ---------- */
.codr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; background: var(--codr-elevated); color: var(--codr-ink-secondary); }
.codr-chip--upper { text-transform: uppercase; letter-spacing: 0.1em; }
.codr-chip--brand { background: var(--codr-brand-pale); color: var(--codr-brand-ink); }
.codr-chip--success { background: var(--codr-success-pale); color: var(--codr-success-ink); }
.codr-chip--gold { background: var(--codr-gold-pale); color: var(--codr-gold-ink); }
.codr-chip--orange { background: var(--codr-orange-pale); color: var(--codr-orange-ink); }
.codr-chip--purple { background: var(--codr-purple-pale); color: var(--codr-purple-ink); }
.codr-chip--danger { background: var(--codr-danger-pale); color: var(--codr-danger-ink); }
.codr-chip--mythic { background: var(--codr-mythic-pale); color: var(--codr-mythic-ink); }

/* ---------- Progress: a fat pill track with a bright fill ---------- */
.codr-progress { height: 14px; border-radius: 999px; background: var(--codr-edge); overflow: hidden; }
.codr-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--codr-brand); box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.08), inset 0 4px 0 rgb(255 255 255 / 0.25); }
.codr-progress--success > span { background: var(--codr-success); }
.codr-progress--gold > span { background: var(--codr-gold); }
.codr-progress--orange > span { background: var(--codr-orange); }

/* ---------- Inputs ---------- */
.codr-input,
.wp-block-search__input,
input[type="email"].codr-input {
  display: block; width: 100%; min-height: 52px; padding: 12px 16px; box-sizing: border-box;
  background: #fff; color: var(--codr-ink); font: 700 16px/1.3 var(--codr-font);
  border: 2px solid var(--codr-edge); border-radius: var(--codr-radius-input); outline: none;
  transition: border-color var(--codr-normal) var(--codr-ease-out), box-shadow var(--codr-normal) var(--codr-ease-out);
}
.codr-input::placeholder { color: var(--codr-ink-muted); font-weight: 600; }
.codr-input:focus { border-color: var(--codr-brand); box-shadow: 0 0 0 3px rgb(28 176 246 / 0.18); }

/* ---------- Code surface ---------- */
.codr-code,
.wp-block-code {
  background: var(--codr-editor); color: var(--codr-editor-ink);
  border: 2px solid var(--codr-editor-edge); border-radius: var(--codr-radius-card);
  padding: 20px 22px; font: 400 15px/1.65 var(--codr-font-mono); overflow-x: auto;
}
.codr-code .k { color: #c792ea; } /* keyword */
.codr-code .s { color: #a5e075; } /* string */
.codr-code .f { color: #58c7f7; } /* function */
.codr-code .n { color: #ffc857; } /* number */
.codr-code .c { color: var(--codr-editor-muted); } /* comment */

/* ---------- The brand sky: blue, dotted grid, soft bloom (launch screen / hero) ---------- */
.codr-sky {
  position: relative;
  background-color: var(--codr-brand);
  background-image:
    radial-gradient(ellipse 72% 46% at 50% 42%, rgb(255 255 255 / 0.30), rgb(255 255 255 / 0) 70%),
    radial-gradient(rgb(255 255 255 / 0.22) 1.6px, transparent 1.8px);
  background-size: 100% 100%, 24px 24px;
  background-position: 0 0, 12px 12px;
  color: #fff;
}
.codr-sky h1, .codr-sky h2, .codr-sky h3 { color: #fff; }
.codr-sky .codr-lead { color: rgb(255 255 255 / 0.94); }
.codr-dots { background-image: radial-gradient(var(--codr-edge) 1.6px, transparent 1.8px); background-size: 24px 24px; background-position: 12px 12px; }

/* ---------- Layout helpers ---------- */
.codr-container { width: 100%; max-width: var(--codr-page); margin: 0 auto; padding: 0 var(--codr-gutter); box-sizing: border-box; }
.codr-section { padding: clamp(64px, 10vw, 120px) 0; }
.codr-section--grey { background: var(--codr-elevated); }
.codr-rounded-bottom { border-radius: 0 0 var(--codr-radius-section) var(--codr-radius-section); }

/* ---------- Motion ---------- */
.codr-pop { animation: codrPop var(--codr-slow) var(--codr-ease-out) backwards; }
.codr-rise { animation: codrRise var(--codr-smooth) var(--codr-ease-out) backwards; }
.codr-float { animation: codrFloat 4s ease-in-out infinite; }
@keyframes codrPop { 0% { opacity: 0; transform: scale(0.8); } 60% { opacity: 1; transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes codrRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes codrFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .codr-pop, .codr-rise, .codr-float { animation: none !important; }
  .codr-btn, .codr-card--interactive, .wp-block-button__link { transition: none; }
}

/* ---------- WordPress block-style hooks (registered in functions-snippet.php) ---------- */
.wp-block-group.is-style-codr-sky {
  background-color: var(--codr-brand);
  background-image:
    radial-gradient(ellipse 72% 46% at 50% 42%, rgb(255 255 255 / 0.30), rgb(255 255 255 / 0) 70%),
    radial-gradient(rgb(255 255 255 / 0.22) 1.6px, transparent 1.8px);
  background-size: 100% 100%, 24px 24px;
  background-position: 0 0, 12px 12px;
  color: #fff;
}
.wp-block-group.is-style-codr-sky :where(h1, h2, h3, h4, p) { color: #fff; }
.wp-block-group.is-style-codr-card,
.wp-block-group.is-style-codr-card-interactive { background: #fff; border: 2px solid var(--codr-edge); border-radius: var(--codr-radius-card); padding: 24px; }
.wp-block-group.is-style-codr-card-interactive { border-bottom-width: 4px; transition: transform var(--codr-fast) var(--codr-ease-out), border-color var(--codr-normal) var(--codr-ease-out); }
.wp-block-group.is-style-codr-card-interactive:hover { transform: translateY(-1px); border-color: var(--codr-edge-strong); }