/* ================================================================
   Apply to Keytos — page styles (.kap-*)
   Everything else under static/css/ is vendored verbatim from the
   KeytosLandingPage design system; see README.md. This file loads last
   and holds only what the shared contact-form component does not cover.
   ================================================================ */

/* The card lives in the hero, so it takes .khero's padding and gradient and
   needs no section of its own. Its width is the component default
   (--content-max, 1280) — .kctc-card-ctr sets that itself, so there is no
   override here. */

/* Brand blue rather than hero.css's text-primary. The h1 is the only
   heading on the page, so it takes the colour section headings carry
   elsewhere on the site. */
.kap-hero .khero-title { color: var(--color-text-brand); }

/* ---- Resume upload -------------------------------------------
   The shared component has no file field, so this is built to match
   .kctc-dropdown-btn exactly — same 1.5px border, radius, 12/16 padding
   and focus ring — so the four fields read as one set. The real <input
   type="file"> stays in the DOM for forms and assistive tech and is
   visually hidden rather than display:none, which would take it out of
   the tab order. */
.kap-file { position: relative; width: 100%; }

.kap-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.kap-file-btn {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  background: var(--color-surface-card);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kap-file-btn:hover { border-color: var(--color-btn-secondary-border-default); }

/* Focus follows the hidden input, since that is what actually takes focus. */
.kap-file-input:focus-visible + .kap-file-btn {
  border-color: var(--color-info-default);
  box-shadow: 0 0 0 3px rgba(0, 112, 163, 0.2);
}

/* Placeholder grey until a file is chosen, then primary — the same
   two-state treatment .kctc-dropdown-label uses. */
.kap-file-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  color: var(--color-text-disabled);
}
.kap-file-name.is-selected { color: var(--color-text-primary); }

/* "Browse" affordance on the right, so the row does not read as a text
   input that happens to be unresponsive. */
.kap-file-action {
  flex: 0 0 auto;
  font-family: var(--font-family-secondary);
  font-weight: 500;
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  color: var(--color-text-brand);
}

.kctc-field--error .kap-file-btn { border-color: var(--color-error-default); }

/* ---- Status message ------------------------------------------
   Replaces the alert() calls the old form used for success and failure. */
.kap-status {
  margin: 0;
  display: none;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-md);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
}
.kap-status.is-visible { display: block; }
.kap-status--ok {
  background: var(--color-info-background);
  color: var(--color-info-default);
}
.kap-status--error {
  background: var(--color-error-background);
  color: var(--color-error-default);
}

/* The shared component steps its field text down when the CARD is narrow, not
   when the viewport is — .kctc-input, .kctc-dropdown-label and .kctc-error-msg
   all go b2 -> b3 inside this query. The resume row has to follow or it ends up
   the only field still at b2. "Browse" drops a step further still, so it stays
   subordinate to the filename. */
@container kctc-card (max-width: 499px) {
  .kap-file-name {
    font-size: var(--font-size-b3);
    line-height: var(--line-height-b3);
  }
  .kap-file-action {
    font-size: var(--font-size-b4);
    line-height: var(--line-height-b4);
  }
}

/* contact.css lays the info panel out with `justify-content: space-between`,
   which assumes two children (headings at the top, something pinned at the
   bottom). This page has only the headings block, so pin it to the top: the
   copy then starts level with the first field label and the spare height falls
   below it, instead of the block floating mid-card. */
.kctc-card .kctc-info {
  justify-content: flex-start;
}