/* ==========================================================================
   Rapid Digify design system
   Tokens are DESIGN.md sections 2 to 5, verbatim. Do not invent values here:
   if a colour is not in this file it is not on brand.
   ========================================================================== */

/* --- Fonts. Local only; Elementor's Google Fonts are switched off in PHP. -- */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Variable.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour, DESIGN.md section 2 */
  --rd-blue: #1f5eff;
  --rd-navy: #0a1f44;
  --rd-sky: #4c8dff;
  --rd-mist: #eef4ff;
  --rd-white: #ffffff;
  --rd-amber: #ffb020;
  --rd-text: #334155;   /* Slate 700, body copy on white */
  --rd-muted: #64748b;  /* Slate 500, captions and meta */
  /* Slate 500 on Mist Blue is 4.31:1 and fails the 4.5:1 rule DESIGN.md calls
     non-negotiable. Slate 600 is the muted grey for Mist backgrounds. */
  --rd-muted-on-mist: #5c6b82;
  --rd-border: #e2e8f0; /* Slate 200 */
  --rd-green: #12a150;
  --rd-red: #d92d20;

  /* Type, DESIGN.md section 3 */
  --rd-font-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --rd-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* The carried-over utilities read these two, which Next's font loader used
     to define. Pointing them at the self-hosted families keeps .font-heading
     and .font-body working inside the fragments. */
  --font-heading: var(--rd-font-heading);
  --font-body: var(--rd-font-body);

  /* Layout, DESIGN.md section 4 */
  --rd-max: 1200px;
  --rd-gutter: 24px;
  --rd-section-y: 96px;
  --rd-radius: 8px;      /* inputs and small elements */
  --rd-radius-card: 16px;
  --rd-radius-chip: 999px;
  --rd-shadow-card: 0 8px 24px -8px rgba(10, 31, 68, 0.18);
}

@media (max-width: 767px) {
  :root { --rd-section-y: 56px; }
}

/* --- Base ---------------------------------------------------------------- */

body {
  font-family: var(--rd-font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--rd-text);
  background: var(--rd-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--rd-font-heading);
  color: var(--rd-navy);
  font-weight: 800;
  margin-top: 0;
}

/* Scale from DESIGN.md section 3: desktop / mobile, with the given line heights. */
h1 { font-size: 3.5rem;   line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: 2.5rem;   line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: 1.625rem; line-height: 1.3; font-weight: 700; }
h4 { font-size: 1.25rem;  line-height: 1.4; font-weight: 700; }

@media (max-width: 767px) {
  body { font-size: 16px; }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.375rem; }
  h4 { font-size: 1.125rem; }
}

a { color: var(--rd-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* DESIGN.md section 5: a visible keyboard focus ring, Sky Blue, 3px. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--rd-sky);
  outline-offset: 2px;
  border-radius: var(--rd-radius);
}

/* Keep line length under 75 characters, DESIGN.md section 3. */
.rd-prose p, .rd-prose li { max-width: 68ch; }

/* --- Sections ------------------------------------------------------------ */

.rd-section { padding-block: var(--rd-section-y); }
.rd-section--navy { background: var(--rd-navy); color: rgba(255, 255, 255, 0.86); }
.rd-section--mist { background: var(--rd-mist); }
.rd-section--blue { background: var(--rd-blue); color: #fff; }

.rd-section--navy :is(h1, h2, h3, h4),
.rd-section--blue :is(h1, h2, h3, h4),
.rd-section--navy .elementor-heading-title,
.rd-section--blue .elementor-heading-title { color: #fff; }

.rd-section--navy a:not(.rd-btn) { color: var(--rd-sky); }
.rd-section--mist .rd-muted { color: var(--rd-muted-on-mist); }
.rd-muted { color: var(--rd-muted); }

/* --- Buttons, DESIGN.md section 5 --------------------------------------- */

.rd-btn,
.elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--rd-radius);
  font-family: var(--rd-font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rd-btn:hover, .elementor-button:hover { text-decoration: none; }

/* Primary: Digify Blue with white text on light. Hover darkens 8%. */
.rd-btn--primary, .elementor-button:not([class*="rd-btn--"]) {
  background: var(--rd-blue);
  color: #fff;
}
.rd-btn--primary:hover, .elementor-button:not([class*="rd-btn--"]):hover {
  background: #1a51db;
  color: #fff;
}

/* Secondary: white, 1px Digify Blue border, blue text. */
.rd-btn--secondary {
  background: #fff;
  border-color: var(--rd-blue);
  color: var(--rd-blue);
}
.rd-btn--secondary:hover { background: var(--rd-mist); }

/* Amber is the one main CTA on navy, and only one per screen. */
.rd-btn--amber {
  background: var(--rd-amber);
  color: var(--rd-navy);
}
.rd-btn--amber:hover { background: #eda216; color: var(--rd-navy); }

/* On navy, a secondary button cannot be white-on-white. */
.rd-section--navy .rd-btn--secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.rd-section--navy .rd-btn--secondary:hover { background: rgba(255, 255, 255, 0.08); }

/* --- Cards, DESIGN.md section 5 ----------------------------------------- */

/* Service card: Mist Blue background, icon, name, one sentence, a link. */
.rd-card {
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-card);
  padding: 32px;
  height: 100%;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.rd-card:hover { box-shadow: var(--rd-shadow-card); }

.rd-card--mist { background: var(--rd-mist); border-color: transparent; }
.rd-card--navy { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }

.rd-card h3 { margin-bottom: 8px; }
.rd-card p { margin-bottom: 16px; }

/* Stat block: big number in Plus Jakarta Sans 800, one short label under it. */
.rd-stat__number {
  font-family: var(--rd-font-heading);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.rd-stat__label { font-size: 0.875rem; line-height: 1.5; opacity: 0.85; }

/* Tag chips are the only place the 999px radius is used, DESIGN.md section 4. */
.rd-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--rd-radius-chip);
  background: var(--rd-mist);
  color: var(--rd-blue);
  font-size: 0.875rem;
  font-weight: 500;
}

.rd-positive { color: var(--rd-green); font-weight: 700; }

/* --- FAQ ---------------------------------------------------------------- */

.rd-faq__item { border-bottom: 1px solid var(--rd-border); padding-block: 24px; }
.rd-faq__item h3 { font-size: 1.25rem; margin-bottom: 8px; }
.rd-faq__item p { margin: 0; max-width: 68ch; }

/* --- Forms, DESIGN.md section 5 ----------------------------------------- */

input[type="text"], input[type="email"], input[type="url"], input[type="tel"], textarea, select,
.mf-input, .mf-input-wrapper input, .mf-input-wrapper textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  font-family: var(--rd-font-body);
  font-size: 16px;
  color: var(--rd-text);
  background: #fff;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--rd-blue);
  outline: 3px solid var(--rd-sky);
  outline-offset: 1px;
}

.rd-error, .mf-error-message { color: var(--rd-red); font-size: 0.875rem; }

/* --- Elementor containers: hold the 1200px / 24px grid ------------------ */

.elementor-section.elementor-section-boxed > .elementor-container,
.e-con > .e-con-inner {
  max-width: var(--rd-max);
}

.e-con, .elementor-section { padding-inline: var(--rd-gutter); }

/* --- Long-form content -------------------------------------------------- */

.rd-prose { font-size: 18px; line-height: 1.65; }
.rd-prose h2 { margin-top: 48px; margin-bottom: 16px; }
.rd-prose h3 { margin-top: 32px; margin-bottom: 12px; }
.rd-prose p, .rd-prose ul, .rd-prose ol { margin-bottom: 24px; }
.rd-prose ul, .rd-prose ol { padding-left: 24px; }
.rd-prose li { margin-bottom: 8px; }
.rd-prose a { text-decoration: underline; }

.rd-prose blockquote {
  margin: 32px 0;
  padding: 24px 32px;
  background: var(--rd-mist);
  border-left: 4px solid var(--rd-blue);
  border-radius: var(--rd-radius);
  font-size: 1.125rem;
}

.rd-prose table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.rd-prose :is(th, td) { border: 1px solid var(--rd-border); padding: 12px 16px; text-align: left; }
.rd-prose th { background: var(--rd-mist); font-family: var(--rd-font-heading); font-weight: 700; color: var(--rd-navy); }

/* Tables are the one thing allowed to scroll sideways on a phone. */
.rd-table-scroll { overflow-x: auto; }

/* --- Skip link ---------------------------------------------------------- */

.rd-skip {
  position: absolute;
  left: -9999px;
}
.rd-skip:focus {
  left: 16px;
  top: 16px;
  z-index: 9999;
  background: #fff;
  padding: 12px 16px;
  border-radius: var(--rd-radius);
}