/*
 * Renovalith brand system — "Signal / Charge"
 * Loaded on the landing page only by wp/mu-plugins/renovalith-site.php.
 * The page markup (content/home.html) carries the desktop look as inline styles;
 * this file supplies the base reset and the responsive overrides, mirroring
 * HomeMobile.dc.html from the Claude Design artifact.
 */

:root {
  --rl-bg:        #0B2A1D;
  --rl-accent:    #17A56A;
  --rl-accent-lt: #57DBA0;
  --rl-ink:       #EAFBF3;
  --rl-muted:     #93A09A;
}

*, *::before, *::after { box-sizing: border-box; }

body.rl-body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--rl-bg) !important;
  color: var(--rl-ink);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.rl-body .rl-page { display: block; width: 100%; overflow-x: hidden; }
body.rl-body .rl-page a { color: var(--rl-accent); text-decoration: none; }
body.rl-body .rl-page a:hover { color: var(--rl-accent-lt); }
body.rl-body ::selection { background: rgba(23, 165, 106, 0.35); }

/* Contact Form 7 — restyle the plugin's default markup to match the brand. */
.wpcf7-form { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 16px; }
.wpcf7-form p { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.wpcf7-form > p:has(.wpcf7-submit) { flex-direction: row; }
.wpcf7-form label { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--rl-muted); }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-form-control {
  width: 100%;
  background: rgba(234, 251, 243, 0.04);
  border: 1px solid rgba(147, 160, 154, 0.3);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--rl-ink);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
}
.wpcf7-form-control:focus { outline: none; border-color: var(--rl-accent); }
.wpcf7-form textarea.wpcf7-form-control { min-height: 120px; resize: vertical; }
.wpcf7-form input.wpcf7-submit {
  align-self: flex-start;
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0B2A1D;
  background: var(--rl-accent);
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.wpcf7-form input.wpcf7-submit:hover { background: var(--rl-accent-lt); }
.wpcf7-not-valid-tip { color: #EF4444; font-size: 12px; }
.wpcf7-response-output {
  margin: 0 !important;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  border: 1px solid rgba(147, 160, 154, 0.3) !important;
  color: var(--rl-ink);
}
.wpcf7-mail-sent-ok { border-color: var(--rl-accent) !important; color: var(--rl-accent-lt); }
.wpcf7-validation-errors, .wpcf7-spam-blocked, .wpcf7-mail-failed { border-color: #EF4444 !important; color: #EF4444; }

/* Tablet: pull the wide 96px gutters in so nothing crowds the edge. */
@media (max-width: 1200px) {
  .rl-nav, .rl-hero, .rl-section, .rl-cta, .rl-footer {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .rl-divider { margin-left: 40px !important; margin-right: 40px !important; }
}

/* Phone: single-column stack, per HomeMobile.dc.html. */
@media (max-width: 782px) {
  .rl-nav { height: 64px !important; padding-left: 20px !important; padding-right: 20px !important; }
  .rl-nav-links { display: none !important; }

  .rl-hero { padding: 56px 24px 48px !important; }
  .rl-hero-h1 { font-size: 40px !important; }
  .rl-hero-actions { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }

  .rl-section { padding: 48px 24px !important; }
  .rl-section-h2 { font-size: 28px !important; }
  .rl-grid-3 { grid-template-columns: 1fr !important; gap: 20px !important; }

  .rl-cta { padding: 48px 24px 56px !important; }
  .rl-cta-h2 { font-size: 30px !important; }

  .rl-footer { padding: 40px 24px 32px !important; }
  .rl-footer-cols { flex-direction: column !important; gap: 32px !important; }
  .rl-footer-groups { gap: 40px !important; }

  .rl-divider { margin-left: 24px !important; margin-right: 24px !important; }
}