/*
 * Code-Scripts 2026 brand refresh — the ONLY stylesheet for the code_scripts
 * theme's public pages (home, contact, sistema-clinica, custom-websites).
 * Loaded sitewide via base.html. Pulsebar is untouched and keeps its own
 * separate base template and stylesheet (css/style.css).
 * Mirrors the body reset from the "Identidade Visual Code-Scripts v1.0 —
 * 2026" source template exactly: Pine #16352B, Signal #3EA95F, Ink #0B1512,
 * Chalk #EEF1EA, Sage #7FA98C.
 */

body.cs26 {
  margin: 0;
  background: #eef1ea;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #14181a;
}
.cs26 a { color: #16352b; text-decoration: none; }
.cs26 a:hover { color: #3ea95f; }

.cs26-page {
  background: #eef1ea;
  color: #14181a;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

@keyframes cs-drift { from { background-position: 0 0; } to { background-position: 26px 26px; } }
@keyframes cs-pulse { 0% { transform: scale(.5); opacity: .45; } 75% { opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes cs-node { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@keyframes cs-mod0 { 0%, 20% { background: #3ea95f; } 24%, 100% { background: #eef1ea; } }
@keyframes cs-mod1 { 0%, 25% { background: #eef1ea; } 29%, 45% { background: #3ea95f; } 49%, 100% { background: #eef1ea; } }
@keyframes cs-mod2 { 0%, 50% { background: #eef1ea; } 54%, 70% { background: #3ea95f; } 74%, 100% { background: #eef1ea; } }
@keyframes cs-mod3 { 0%, 75% { background: #eef1ea; } 79%, 95% { background: #3ea95f; } 99%, 100% { background: #eef1ea; } }

/* Sitewide nav (base.html) — dark bar, brand links, lang switcher. */
.cs26-nav {
  position: relative;
  background: #0b1512;
}
.cs26-nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px clamp(20px, 5vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.cs26-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 26px);
}
.cs26-nav-links a { font-size: 13.5px; color: #a9bcae; }

/* Sitewide footer (base.html). */
.cs26-footer { background: #081310; color: #eef1ea; }
.cs26-footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 56px) clamp(20px, 5vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
}
.cs26-footer-links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; max-width: 620px; }
.cs26-footer-links a { font-size: 13px; color: #a9bcae; }
.cs26-footer-copy { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; color: rgba(127, 169, 140, .6); }

/* Language switcher removed sitewide — the source template's embedded nav
   has no language switcher, so this theme is single-language per page
   (home.html/home_pt.html etc.) with no in-page toggle. */

/* Contact form — kept functional (dashboard-backed ContactForm), laid out as
   a responsive grid to match the "Contato" mockup (name/email side by side,
   message full width). Two variants: light (chalk sections) and dark
   (ink/pine sections). */
.cs26-form-light .cms-contact-form,
.cs26-form-dark .cms-contact-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  align-items: start;
}
.cs26-form-light .cms-contact-form > .cms-contact-hp,
.cs26-form-dark .cms-contact-form > .cms-contact-hp,
.cs26-form-light .cms-contact-form > .alert,
.cs26-form-dark .cms-contact-form > .alert,
.cs26-form-light .cms-contact-form .mb-3:has(textarea),
.cs26-form-dark .cms-contact-form .mb-3:has(textarea),
.cs26-form-light .cms-contact-form > button,
.cs26-form-dark .cms-contact-form > button {
  grid-column: 1 / -1;
}
.cs26-form-light .cms-contact-form .mb-3,
.cs26-form-dark .cms-contact-form .mb-3 { margin-bottom: 0 !important; }

.cs26-form-light .cms-contact-form label,
.cs26-form-light .cms-contact-form .form-label {
  display: block;
  margin-bottom: 8px;
  color: #5d6b62;
  font: 600 10.5px/1.2 'JetBrains Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cs26-form-light .cms-contact-form input,
.cs26-form-light .cms-contact-form textarea,
.cs26-form-light .cms-contact-form select,
.cs26-form-light .cms-contact-form .form-control {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, .15) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #14181a;
  box-shadow: none !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  padding: 13px 15px;
  box-sizing: border-box;
}
.cs26-form-light .cms-contact-form input:focus,
.cs26-form-light .cms-contact-form textarea:focus,
.cs26-form-light .cms-contact-form select:focus,
.cs26-form-light .cms-contact-form .form-control:focus { border-color: #3ea95f !important; }
.cs26-form-light .cms-contact-form button,
.cs26-form-light .cms-contact-form .btn-primary {
  justify-self: start;
  border: 0 !important;
  border-radius: 10px !important;
  background: #16352b !important;
  color: #eef1ea !important;
  font: 600 15px/1 'Space Grotesk', system-ui, sans-serif;
  padding: 15px 30px !important;
  cursor: pointer;
  margin-top: 6px;
}

.cs26-form-dark .cms-contact-form label,
.cs26-form-dark .cms-contact-form .form-label {
  display: block;
  margin-bottom: 8px;
  color: #7fbf94;
  font: 600 10.5px/1.2 'JetBrains Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cs26-form-dark .cms-contact-form input,
.cs26-form-dark .cms-contact-form textarea,
.cs26-form-dark .cms-contact-form select,
.cs26-form-dark .cms-contact-form .form-control {
  width: 100%;
  border: 1px solid rgba(127, 169, 140, .3) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .04) !important;
  color: #eef1ea;
  box-shadow: none !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  padding: 13px 15px;
  box-sizing: border-box;
}
.cs26-form-dark .cms-contact-form input:focus,
.cs26-form-dark .cms-contact-form textarea:focus,
.cs26-form-dark .cms-contact-form select:focus,
.cs26-form-dark .cms-contact-form .form-control:focus { border-color: #3ea95f !important; }
.cs26-form-dark .cms-contact-form button,
.cs26-form-dark .cms-contact-form .btn-primary {
  justify-self: start;
  border: 0 !important;
  border-radius: 10px !important;
  background: #3ea95f !important;
  color: #0c1f17 !important;
  font: 600 15px/1 'Space Grotesk', system-ui, sans-serif;
  padding: 15px 30px !important;
  cursor: pointer;
  margin-top: 4px;
}

.cs26-form-light .cms-contact-form textarea,
.cs26-form-dark .cms-contact-form textarea { min-height: 110px; resize: vertical; }
.cs26-form-light .cms-contact-form .invalid-feedback,
.cs26-form-dark .cms-contact-form .invalid-feedback { color: #b91c1c; font-size: 13px; }
.cs26-form-dark .cms-contact-form .invalid-feedback { color: #ff9d8a; }
/* Alerts (success/error) render outside .cms-contact-form when the form
   isn't shown (e.g. after a successful submit), so target them relative to
   the wrapper instead of requiring a .cms-contact-form ancestor. */
.cs26-form-light .alert,
.cs26-form-dark .alert { padding: 14px 16px; border-radius: 10px; font-size: 14.5px; }
.cs26-form-light .alert-success { background: rgba(62, 169, 95, .12); color: #1c5c37; }
.cs26-form-dark .alert-success { background: rgba(62, 169, 95, .16); color: #bdeccb; }
.cs26-form-light .alert-danger,
.cs26-form-light .alert-warning { background: rgba(220, 38, 38, .1); color: #991b1b; }
.cs26-form-dark .alert-danger,
.cs26-form-dark .alert-warning { background: rgba(255, 130, 103, .16); color: #ffd2c4; }

/* Contact "channels" cards (email / phone / hours) next to the form. */
.cs26-channel-card { border-radius: 14px; padding: 28px; }
.cs26-channel-card .cs26-channel-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; }
.cs26-channel-dark { background: #0b1512; color: #eef1ea; }
.cs26-channel-dark .cs26-channel-label { color: #7fbf94; }
.cs26-channel-light { background: #f3f6f1; border: 1px solid rgba(0, 0, 0, .08); }
.cs26-channel-light .cs26-channel-label { color: #8a978c; }

@media only screen and (max-width: 767px) {
  .cs26 .codescripts-products,
  .cs26 .codescripts-clients { padding: 56px 0; }
}