/* ==========================================================================
   KODEIT KG — WordPress corrections.

   Loaded after assets/css/kodeit-kg.css, which is byte-identical to the static
   site's stylesheet. Everything here exists only because WordPress is present:
   it styles markup the static site never had (editor content, WordPress's own
   menus, alignment classes) and offsets the admin bar. Nothing here changes a
   single value of the KG design system.
   ========================================================================== */

/* ---- the server-rendered SEO fallback ----------------------------------- */
/* Present in <main> until app.js renders over it. Styled like a slim hero so a
   no-JavaScript visitor still gets a real page rather than bare text. */
#kg-fallback .chips { gap: 8px }
#kg-fallback .chip { padding: 6px 13px; font-size: 12.5px }

/* ---- WordPress editor content inside the KG shell ----------------------- */
/* Used by an ordinary page, a post, or optional content added below a KG
   route. Inherits the design system's type and colour tokens. */
.kg-editor-content { max-width: 74ch; font-size: 15.5px; line-height: 1.65; color: var(--ink-2) }
.kg-editor-content > * + * { margin-top: 18px }
.kg-editor-content h1,
.kg-editor-content h2,
.kg-editor-content h3,
.kg-editor-content h4,
.kg-editor-content h5,
.kg-editor-content h6 { color: var(--ink); margin-top: 34px }
.kg-editor-content h2 { font-size: clamp(23px, 2.4vw, 29px); letter-spacing: -.028em }
.kg-editor-content h3 { font-size: 17.5px; letter-spacing: -.02em }
.kg-editor-content p { color: var(--ink-2) }
.kg-editor-content a { color: var(--k-cyan-deep); font-weight: 600 }
.kg-editor-content a:hover { text-decoration: underline }
.kg-editor-content ul,
.kg-editor-content ol { padding-left: 22px; display: block }
.kg-editor-content ul { list-style: disc }
.kg-editor-content ol { list-style: decimal }
.kg-editor-content li { margin-bottom: 8px; color: var(--ink-2) }
.kg-editor-content blockquote {
  margin: 0; padding: 14px 18px; border-left: 3px solid var(--line-2);
  background: var(--bg-soft-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.kg-editor-content blockquote p { font-size: 15px }
.kg-editor-content code,
.kg-editor-content kbd { font-family: var(--ff-mono); font-size: .92em }
.kg-editor-content pre {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px; overflow-x: auto; font-family: var(--ff-mono); font-size: 13px;
}
.kg-editor-content img,
.kg-editor-content figure img { border-radius: var(--r); border: 1px solid var(--line) }
.kg-editor-content figcaption { font-size: 12.5px; color: var(--ink-3); margin-top: 8px }
.kg-editor-content hr { height: 1px; background: var(--line); border: 0; margin: 28px 0 }
.kg-editor-content table { width: 100%; font-size: 13.5px; border-collapse: collapse }
.kg-editor-content th,
.kg-editor-content td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line) }
.kg-editor-content th { font-size: 10.5px; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); background: var(--bg-soft-2) }

/* WordPress alignment and caption classes */
.kg-editor-content .alignleft { float: left; margin: 0 20px 16px 0 }
.kg-editor-content .alignright { float: right; margin: 0 0 16px 20px }
.kg-editor-content .aligncenter { display: block; margin-left: auto; margin-right: auto }
.kg-editor-content .alignwide { max-width: none }
.kg-editor-content .alignfull { max-width: none }
.kg-editor-content .wp-caption-text { font-size: 12.5px; color: var(--ink-3) }
.kg-editor-content .screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kg-editor-content::after { content: ""; display: table; clear: both }

/* ---- a form plugin's shortcode inside the KG form card ------------------ */
#kg-wp-form { }
#kg-wp-form input[type=text],
#kg-wp-form input[type=email],
#kg-wp-form input[type=tel],
#kg-wp-form input[type=url],
#kg-wp-form select,
#kg-wp-form textarea {
  font-family: var(--ff); font-size: 14px; color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  width: 100%; min-height: 44px;
  transition: border-color .16s, box-shadow .16s;
}
#kg-wp-form textarea { min-height: 104px; resize: vertical }
#kg-wp-form input:focus,
#kg-wp-form select:focus,
#kg-wp-form textarea:focus {
  outline: none; border-color: var(--k-cyan); box-shadow: 0 0 0 3px rgba(1,195,255,.14);
}
#kg-wp-form label {
  display: block; font-size: 10.5px; font-weight: 650; letter-spacing: .08em;
  color: var(--ink-2); margin-bottom: 6px; text-transform: uppercase;
}
#kg-wp-form button[type=submit],
#kg-wp-form input[type=submit] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px; border-radius: 11px;
  font-family: var(--ff); font-size: 14.5px; font-weight: 600;
  background: var(--ink); color: #fff; border: 1px solid transparent; cursor: pointer;
  transition: transform .16s, box-shadow .16s;
}
#kg-wp-form button[type=submit]:hover,
#kg-wp-form input[type=submit]:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(20,26,38,.2) }

/* ---- the optional WordPress footer menu --------------------------------- */
.ftr-wpmenu { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line) }
.ftr-wpmenu-list { display: flex; flex-wrap: wrap; gap: 8px 20px }
.ftr-wpmenu-list li { margin: 0 }
.ftr-wpmenu-list a { display: inline-block; padding: 4px 0; font-size: 13px; color: var(--ink-2) }
.ftr-wpmenu-list a:hover { color: var(--ink) }

/* ---- pagination on the archive fallback -------------------------------- */
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 36px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: 9px;
  font-size: 13px; font-weight: 550; color: var(--ink-2); background: var(--white);
}
.nav-links .page-numbers:hover { color: var(--ink); box-shadow: var(--shadow-sm) }
.nav-links .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink) }

/* ---- the admin bar ------------------------------------------------------ */
/* The sticky-header offset itself is printed inline by the theme so it can read
   is_admin_bar_showing(). This only keeps the bar's own font from inheriting
   the design system. */
#wpadminbar { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif }

/* ---- right-to-left ------------------------------------------------------ */
/* The design system parks the skip link at `left:-9999px`. On a left-to-right
   page that is invisible and unreachable, but WordPress emits `dir="rtl"` for
   an RTL locale, and there the inline scroll origin flips: a -9999px left edge
   becomes 9999px of scrollable overflow, giving the whole site a horizontal
   scrollbar. Mirror the offset rather than change it. Scoped to RTL, so
   left-to-right rendering is byte-for-byte what the static site renders. */
[dir="rtl"] .skip { left: auto; right: -9999px }
[dir="rtl"] .skip:focus,
[dir="rtl"] .skip:focus-visible { left: auto; right: 0 }

/* ---- WordPress print behaviour ----------------------------------------- */
@media print {
  #wpadminbar, .ftr-wpmenu, #kg-fallback { display: none }
}