/* Kantan Nenkin — contact page: info card + form card. Tokens mirror kn-header-footer.css */

.kn-contact{
  --color-ink:#15181b;
  --color-ink-2:#4c5459;
  --color-paper:#ffffff;
  --color-paper-2:#f5f3f0;
  --color-accent:#d93d27;
  --color-accent-2:#b32f1c;
  --color-line:#ded9d3;
  --color-dark:#101d35;
  --color-on-dark:#ffffff;
  --color-on-dark-2:#a9b1b6;
  --color-on-dark-line:#33383c;

  --font-sans:"IBM Plex Sans","Noto Sans JP","Helvetica Neue",sans-serif;
  --font-mono:"IBM Plex Mono","Courier New",monospace;

  --fs-h2:34px;
  --fs-h3:19px;
  --fs-body:16px;
  --fs-sm:14px;
  --fs-xs:12px;
  --ls-eyebrow:0.14em;
  --lh-body:1.6;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --radius:2px;
  --bw-1:1px;
  --w-shell:1200px;
  --pad-section-x:40px;
}
.kn-contact *{box-sizing:border-box;}

.kn-contact{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:var(--sp-6);
  width:100%;
  max-width:calc(var(--w-shell) + var(--pad-section-x) * 2);
  margin-left:auto;
  margin-right:auto;
  padding:0 var(--pad-section-x);
  font-family:var(--font-sans);
}

/* ---- left: dark info card ---- */
.kn-contact .kn-info{
  flex:1 1 400px;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:var(--color-dark);
  border-radius:var(--radius);
  padding:var(--sp-7) var(--sp-6);
}
.kn-contact .kn-info-title{
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.15;
  color:var(--color-on-dark);
  margin:0;
}
.kn-contact .kn-info-sub{
  font-size:var(--fs-sm);
  color:var(--color-on-dark-2);
  margin:var(--sp-2) 0 var(--sp-6);
}
.kn-contact .kn-info-list{display:flex;flex-direction:column;gap:var(--sp-5);}
.kn-contact .kn-info-row{display:flex;align-items:flex-start;gap:var(--sp-4);}
.kn-contact .kn-info-icon{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;
  border-radius:50%;
  background:rgba(255,255,255,0.07);
  color:var(--color-accent);
}
.kn-contact .kn-info-icon svg{width:19px;height:19px;fill:currentColor;display:block;}
.kn-contact .kn-info-label{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--color-on-dark-2);
  margin-bottom:var(--sp-1);
}
.kn-contact .kn-info-value{
  display:block;
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
  color:var(--color-on-dark);
}
.kn-contact a.kn-info-value{text-decoration:none;}
.kn-contact a.kn-info-value:hover{text-decoration:underline;}
.kn-contact .kn-map{
  margin-top:var(--sp-6);
  border-radius:var(--radius);
  overflow:hidden;
  line-height:0;
}
.kn-contact .kn-map iframe{width:100%;height:260px;border:0;display:block;}

/* ---- right: form card ---- */
.kn-contact .kn-form{
  flex:1 1 440px;
  min-width:0;
  background:var(--color-paper);
  border:var(--bw-1) solid var(--color-line);
  border-radius:var(--radius);
  padding:var(--sp-7) var(--sp-6);
}
.kn-contact .kn-form-title{
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.15;
  color:var(--color-ink);
  margin:0;
}
.kn-contact .kn-form-sub{
  font-size:var(--fs-sm);
  color:var(--color-ink-2);
  margin:var(--sp-2) 0 var(--sp-6);
}

/* WPForms reset + restyle, scoped to this card */
.kn-contact .wpforms-container{
  margin:0;
  /* modern render mode drives these from custom properties, so set them here
     rather than fighting its specificity rule by rule */
  --wpforms-button-background-color:var(--color-accent);
  --wpforms-button-text-color:var(--color-on-dark);
  --wpforms-button-border-radius:var(--radius);
  --wpforms-field-border-radius:var(--radius);
  --wpforms-field-border-color:var(--color-line);
  --wpforms-field-text-color:var(--color-ink);
  --wpforms-label-color:var(--color-ink);
  --wpforms-label-sublabel-color:var(--color-ink-2);
  --wpforms-label-error-color:var(--color-accent-2);
}

/* WPForms size classes cap inputs at 60% width; we want full-width fields */
.kn-contact .wpforms-form .wpforms-field-small,
.kn-contact .wpforms-form .wpforms-field-medium,
.kn-contact .wpforms-form .wpforms-field-large{max-width:100%;width:100%;}

/* Anti-spam honeypots: one ships inline styles, the other renders bare in this
   mode and shows up as an empty box. Both are marked tabindex=-1. */
.kn-contact .wpforms-form .wpforms-field:has(input[tabindex="-1"]){
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  padding:0 !important;
  z-index:-1000 !important;
}
.kn-contact .wpforms-form .wpforms-field [aria-hidden="true"]{display:none !important;}
.kn-contact .wpforms-form .wpforms-field{padding:0 0 var(--sp-4) 0;}
.kn-contact .wpforms-form .wpforms-field-label{
  font-family:var(--font-sans);
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--color-ink);
  margin-bottom:var(--sp-2);
}
.kn-contact .wpforms-form .wpforms-required-label{color:var(--color-accent);}
.kn-contact .wpforms-form input[type=text],
.kn-contact .wpforms-form input[type=email],
.kn-contact .wpforms-form input[type=tel],
.kn-contact .wpforms-form input[type=number],
.kn-contact .wpforms-form select,
.kn-contact .wpforms-form textarea{
  width:100%;
  max-width:100%;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  color:var(--color-ink);
  background:var(--color-paper);
  border:var(--bw-1) solid var(--color-line);
  border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-4);
  height:auto;
  box-shadow:none;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.kn-contact .wpforms-form textarea{min-height:120px;resize:vertical;}
.kn-contact .wpforms-form input:focus,
.kn-contact .wpforms-form select:focus,
.kn-contact .wpforms-form textarea:focus{
  outline:none;
  border-color:var(--color-accent);
  box-shadow:0 0 0 2px rgba(217,61,39,0.16);
}
.kn-contact .wpforms-form ::placeholder{color:#9aa1a6;opacity:1;}
.kn-contact .wpforms-form .wpforms-field-description{
  font-size:var(--fs-xs);color:var(--color-ink-2);margin-top:var(--sp-1);
}
.kn-contact .wpforms-form .wpforms-submit-container{padding-top:var(--sp-2);}
.kn-contact .wpforms-form button[type=submit]{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:600;
  color:var(--color-on-dark);
  background:var(--color-accent);
  border:var(--bw-1) solid var(--color-accent);
  border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-6);
  cursor:pointer;
  box-shadow:none;
  transition:background .16s ease,border-color .16s ease;
}
.kn-contact .wpforms-form button[type=submit]:hover{
  background:var(--color-accent-2);
  border-color:var(--color-accent-2);
}
.kn-contact .wpforms-form .wpforms-error{
  font-size:var(--fs-xs);
  color:var(--color-accent-2);
}
.kn-contact .wpforms-form input.wpforms-error,
.kn-contact .wpforms-form select.wpforms-error,
.kn-contact .wpforms-form textarea.wpforms-error{border-color:var(--color-accent-2);}

/* two fields side by side on wider cards */
@media (min-width:560px){
  .kn-contact .wpforms-form .wpforms-field-select[data-field-id="6"],
  .kn-contact .wpforms-form .wpforms-field-select[data-field-id="7"]{
    display:inline-block;
    width:calc(50% - 8px);
    vertical-align:top;
  }
  .kn-contact .wpforms-form .wpforms-field-select[data-field-id="6"]{margin-right:16px;}
}

@media (max-width:900px){
  .kn-contact{gap:var(--sp-5);}
  .kn-contact .kn-info,.kn-contact .kn-form{flex:1 1 100%;}
}
@media (max-width:640px){
  .kn-contact{padding:0 20px;--fs-h2:27px;}
  .kn-contact .kn-info,.kn-contact .kn-form{padding:var(--sp-6) var(--sp-5);}
  .kn-contact .kn-map iframe{height:220px;}
}