/* Hand-written layer on top of the generated keepone.css: what the prototype
   runtime did in JavaScript (state, hover, focus) and what WordPress needs. */

body.k1-body { margin: 0; background: #F7F8F8; }
html:has(body.k1-body) { scroll-behavior: smooth; }

.k1 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-align: left; }
.k1-root { min-height: 100vh; background: var(--op-ink-50); color: var(--op-ink-700); }
.k1 [hidden] { display: none !important; }
.k1 img { max-width: 100%; }
.k1 a:hover { text-decoration: none; }
.k1 button { text-transform: none; letter-spacing: normal; }

.k1-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: #fff; color: #101413; font: 600 14px/1.2 'Plus Jakarta Sans', system-ui, sans-serif; border-radius: 0 0 8px 0; }
.k1-skip:focus { left: 0; }

/* Plataformas menu: opens on hover and focus, and on click for touch */
.k1 .k1-menu-pop { display: none; }
.k1 .k1-menu:hover .k1-menu-pop,
.k1 .k1-menu:focus-within .k1-menu-pop,
.k1 .k1-menu.is-open .k1-menu-pop { display: contents; }

/* design-system buttons: hover/active lived in React state */
.k1 button[data-k1-act="goContato"]:hover,
.k1 .k1-submit:hover { background: var(--action-primary-hover) !important; }
.k1 button[data-k1-act="goContato"]:active,
.k1 .k1-submit:active { transform: translateY(1px); }

/* form fields: focus ring on the wrapper, as the design-system Input does */
.k1 div:has(> input:focus-visible) { border-color: var(--border-accent) !important; box-shadow: 0 0 0 3px rgba(52, 200, 126, .18) !important; }
.k1 input:focus-visible { outline: none; }
.k1 select:focus-visible { border-color: var(--border-accent) !important; box-shadow: 0 0 0 3px rgba(52, 200, 126, .18) !important; }
.k1 textarea:focus-visible { border-color: var(--border-accent) !important; box-shadow: 0 0 0 3px rgba(52, 200, 126, .18) !important; }
/* design-system checkbox: the box is a <span> painted by React state in the prototype */
.k1 input[type="checkbox"]:not(:checked) + span { background: var(--surface-card) !important; border-color: var(--border-strong) !important; }
.k1 input[type="checkbox"]:not(:checked) + span svg { visibility: hidden; }
.k1 input[type="checkbox"]:focus-visible + span { box-shadow: 0 0 0 3px rgba(52, 200, 126, .3); }
.k1 .k1-form-msg { margin: 0; font-size: 13.5px; line-height: 1.5; }
.k1 .k1-form-msg[data-state="ok"] { color: var(--op-green-600); }
.k1 .k1-form-msg[data-state="error"] { color: var(--op-status-critical); }
.k1 .k1-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* WordPress admin bar pushes the sticky header down */
body.admin-bar .k1-header { top: 32px !important; }
@media (max-width: 782px) { body.admin-bar .k1-header { top: 46px !important; } }
@media (max-width: 600px) { body.admin-bar .k1-header { top: 0 !important; } }

@media (prefers-reduced-motion: reduce) {
  html:has(body.k1-body) { scroll-behavior: auto; }
  .k1 * { transition-duration: 0s !important; }
}

/* ── small screens: the prototype's own panel (.mob-nav) under the header ── */
.k1 .k1-logo { display: block; flex-shrink: 0; line-height: 0; }
.k1 .k1-mob-pop { display: none; }
.k1.k1-header.is-nav-open .k1-mob-pop { display: contents; }

/* ── small-screen fixes on top of the prototype ──────────────────────────────
   The prototype has these defects below ~430px; they are fixed here, in the
   hand-written layer, so a new export does not bring them back. */

/* Demo form: the select's longest option set the width of the whole form,
   pushing every field past the card's right edge. Let the tracks shrink. */
.k1 .k1-form, .k1 .k1-form div:has(> select) { grid-template-columns: minmax(0, 1fr); }
.k1 .k1-form div { min-width: 0; }
.k1 .k1-form select { width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.k1 .k1-form textarea { width: 100%; min-width: 0; max-width: 100%; }

@media (max-width: 600px) {
  /* Report tables: three fixed columns (110 + 72 + 110) are wider than the card,
     so the last value was cut off. The two right-hand columns take the width of
     what they hold (a bar, a percentage, "↘ R$ 52.300") and the name gets the rest.
     Fixed narrow columns were tried first and made the percentage run into the
     cost figure next to it. Rows are separate grids; they still line up because
     the figures are monospaced and the same length within a table. */
  .k1 [style*="minmax(110px, 1fr) 72px 110px"] { grid-template-columns: minmax(0, 1fr) max-content max-content !important; gap: 12px !important; padding-left: 16px !important; padding-right: 16px !important; }
  .k1 [style*="minmax(110px, 1fr) 72px 110px"] > span:not(:first-child) { font-size: 12px !important; }
  .k1 [style*="minmax(110px, 1fr) 72px 110px"] > span:first-child { overflow: hidden; text-overflow: ellipsis; }
  /* KeepMonitor panel: four indicators side by side; the labels ran into each
     other and the last one touched the edge. Tighter cells, same four columns. */
  .k1 [style^="display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr))"] > div { padding: 12px 8px 12px 10px !important; }
  .k1 [style^="display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr))"] > div > span:first-child { font-size: 9.5px !important; letter-spacing: .03em !important; }
  .k1 [style^="display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr))"] > div > span:last-child { font-size: 19px !important; }
  /* Contact page. The prototype's small-screen rule "every h2 is 30px" also hits
     the titles inside the form card and its confirmation, which are card titles,
     not section titles: keep their own sizes. */
  .k1 .k1-form h2 { font-size: 22px !important; line-height: 1.25 !important; }
  .k1 [data-k1-state="sent"] h2 { font-size: 26px !important; line-height: 1.2 !important; }
  /* Report cards: two indicators side by side, label and value both on one line.
     At phone width a cell is ~140px and "TEMPO DE RESPOSTA" or the cost figure ran
     over the divider into the neighbour. Smaller type and padding, still one line. */
  .k1 [data-k1-rep] [style="display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr));"] > div { padding: 14px 12px !important; min-width: 0; }
  .k1 [data-k1-rep] [style="display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr));"] > div > span:first-child { font-size: 10px !important; letter-spacing: .03em !important; }
  .k1 [data-k1-rep] [style="display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr));"] > div > span:last-child { font-size: 18px !important; }
  .k1 [data-k1-rep] [style="display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr));"] > div > span:last-child i { font-size: 15px !important; margin-right: 4px !important; }
  /* iOS zooms the page when a focused field has text under 16px. */
  .k1 .k1-form input, .k1 .k1-form select, .k1 .k1-form textarea { font-size: 16px !important; }
}

@media (max-width: 560px) {
  /* Thank-you page: "Serviços gerenciados" sets its two columns inline (0.8fr/1.2fr),
     so the prototype's own one-column rule for .g2 does not reach it. Stack them. */
  .k1 .g2[style*="0.8fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* "Produto ou serviço de interesse" + "Estado" share a row (2fr/1fr, set inline,
     so the prototype's own one-column rule does not reach it). On a phone the
     first label wraps and the two fields stop lining up: stack them. */
  .k1 .k1-form .g2[style*="2fr"] { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 400px) {
  .k1 [data-k1-rep] [style="display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr));"] > div { padding: 12px 10px !important; }
  .k1 [data-k1-rep] [style="display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr));"] > div > span:first-child { font-size: 9.5px !important; letter-spacing: .01em !important; }
  .k1 [data-k1-rep] [style="display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr));"] > div > span:last-child { font-size: 16px !important; }
  .k1 [style^="display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr))"] > div { padding: 12px 4px 12px 8px !important; }
  .k1 [style^="display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr))"] > div > span:first-child { font-size: 9px !important; letter-spacing: .02em !important; }
  .k1 [style^="display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr))"] > div > span:last-child { font-size: 17px !important; }
  .k1 [style*="minmax(110px, 1fr) 72px 110px"] { gap: 10px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .k1 [style*="minmax(110px, 1fr) 72px 110px"] > span:first-child { font-size: 13px; }
  .k1 [style*="minmax(110px, 1fr) 72px 110px"] > span:not(:first-child) { font-size: 11.5px !important; }
}

@media (max-width: 340px) {
  .k1 [style*="minmax(110px, 1fr) 72px 110px"] { gap: 6px !important; padding-left: 10px !important; padding-right: 10px !important; }
  .k1 [style*="minmax(110px, 1fr) 72px 110px"] > span:not(:first-child) { font-size: 10.5px !important; }
  .k1 [style*="minmax(110px, 1fr) 72px 110px"] > span:first-child { font-size: 12px; }
  .k1 [style*="minmax(110px, 1fr) 72px 110px"] i { margin-right: 3px !important; }
  .k1 [data-k1-rep] [style="display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr));"] > div { padding: 10px 8px !important; }
  .k1 [data-k1-rep] [style="display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr));"] > div > span:first-child { font-size: 8.5px !important; letter-spacing: 0 !important; }
  .k1 [data-k1-rep] [style="display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr));"] > div > span:last-child { font-size: 14.5px !important; }
}

/* ── header and footer on theme pages ────────────────────────────────────────
   There the theme's element rules (a, p, strong, button, img) are still loaded.
   Each line below undoes one that was measured against the same markup on the
   new home, where no theme CSS exists. */
.k1.k1-header a, .k1.k1-header button,
.k1.k1-footer a, .k1.k1-footer p { font-family: inherit; }
.k1.k1-header a, .k1.k1-footer a { font-weight: inherit; }
.k1.k1-header strong, .k1.k1-footer strong { font-weight: bolder; }
.k1.k1-footer p { color: inherit; }
.k1.k1-header img, .k1.k1-footer img { vertical-align: baseline; }
.k1.k1-header button { text-align: center; }
.k1.k1-header .burger { line-height: 1; }