/*
 * KAPOCS Kapcsolat page (page-kapcsolat.php, /kapcsolat/), on the front
 * page's design system, with the Contact Form 7 "KAPOCS kapcsolat" form. The
 * form's own template uses .kapocs-cf7__grid / __field / __field--full /
 * __consent / __submit / __required; the fields are styled through the
 * standard CF7 classes too, so the form looks right with any template.
 */

/* ------------------------------------------------------------------ */
/* Hero                                                                 */
/* ------------------------------------------------------------------ */

.kcon-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 5vw, 80px) 0 clamp(36px, 4vw, 56px);
  background: linear-gradient(180deg, #fff 0%, #f1f8f8 100%);
}

.kcon-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 55%;
  height: 120%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 170, 166, .12), rgba(40, 170, 166, 0));
  pointer-events: none;
}

.kcon-hero__inner {
  position: relative;
  max-width: 900px;
}

.ksf .kcon-hero__title {
  margin: 14px 0 0;
  color: var(--ks-ink);
  font: 800 clamp(40px, 5vw, 72px)/1.04 var(--ks-display);
  letter-spacing: -.05em;
}

.ksf .kcon-hero__title span {
  display: block;
  color: var(--ks-teal);
  font-size: .62em;
  letter-spacing: -.035em;
  line-height: 1.15;
}

.kcon-hero__lead {
  max-width: 640px;
  margin: 22px 0 0;
  color: var(--ks-copy);
  font-size: 17.5px;
  line-height: 1.65;
}

/* ------------------------------------------------------------------ */
/* Reach us + shortcuts | the form                                      */
/* ------------------------------------------------------------------ */

.kcon-main {
  padding: 0 0 clamp(64px, 7vw, 104px);
  background: #f1f8f8;
}

.kcon-main__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.kcon-reach {
  display: grid;
  gap: 10px;
}

.kcon-reach__item,
.kcon-path {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ks-ink) !important;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s var(--ksf-ease-out);
}

.kcon-reach__item {
  padding: 18px 20px;
  border: 1px solid var(--ks-line);
  border-radius: 18px;
  background: #fff;
}

.kcon-reach__item--mail {
  padding-block: 22px;
  border-color: rgba(23, 142, 139, .3);
  box-shadow: 0 18px 40px -24px rgba(23, 142, 139, .6);
}

.kcon-reach__ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #fff;
  background: var(--ks-teal);
}

.kcon-reach__item:not(.kcon-reach__item--mail) .kcon-reach__ico {
  color: var(--ks-teal-dark);
  background: var(--ks-mint);
}

.kcon-reach__ico svg {
  width: 20px;
  height: 20px;
}

.kcon-reach__copy,
.kcon-path__copy {
  display: grid;
  flex: 1;
  gap: 3px;
  min-width: 0;
}

.kcon-reach__copy small {
  color: var(--ks-soft);
  font: 700 11.5px/1 var(--ksf-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kcon-reach__copy strong {
  color: var(--ks-ink);
  font: 700 clamp(19px, 1.9vw, 24px)/1.2 var(--ks-display);
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.kcon-reach__arrow,
.kcon-path__arrow {
  flex: none;
  color: var(--ks-teal);
  font-size: 18px;
  transition: transform .25s var(--ksf-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .kcon-reach__item:hover,
  .kcon-path:hover {
    border-color: rgba(23, 142, 139, .4);
    box-shadow: 0 16px 32px -20px rgba(13, 43, 56, .3);
  }

  .kcon-reach__item:hover .kcon-reach__arrow,
  .kcon-path:hover .kcon-path__arrow {
    transform: translateX(4px);
  }
}

.kcon-paths {
  margin-top: 28px;
}

.ksf .kcon-paths__title {
  margin: 0 0 12px 4px;
  color: var(--ks-teal-dark);
  font: 700 12px/1.3 var(--ksf-body);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kcon-paths__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kcon-paths__list li {
  margin: 0;
}

.kcon-path {
  padding: 14px 16px;
  border: 1px solid var(--ks-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .7);
}

.ksf .kcon-path__ico {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.ksf .kcon-path__ico svg {
  width: 18px;
  height: 18px;
}

.kcon-path__copy strong {
  font-size: 15px;
}

.kcon-path__copy small {
  color: var(--ks-copy);
  font-size: 13.5px;
  line-height: 1.45;
}

/* The form card. */
.kcon-form {
  padding: clamp(26px, 3.4vw, 44px);
  border: 1px solid var(--ks-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--ksf-sh-product);
  scroll-margin-top: calc(var(--ksf-header) + 16px);
}

.kcon-form__topic {
  display: inline-flex;
  margin: 0 0 14px;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--ks-teal-dark);
  background: var(--ks-mint);
  font: 700 11.5px/1 var(--ksf-body);
  letter-spacing: .14em;
}

.kcon-form__topic[hidden] {
  display: none;
}

.ksf .kcon-form__title {
  margin: 0;
  color: var(--ks-ink);
  font: 700 clamp(24px, 2.4vw, 30px)/1.2 var(--ks-display);
  letter-spacing: -.025em;
}

.kcon-form__lead {
  margin: 8px 0 0;
  color: var(--ks-copy);
  font-size: 15.5px;
  line-height: 1.6;
}

.kcon-form__mount {
  margin-top: 24px;
}

.kcon-form__privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--ks-line);
  color: var(--ks-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

.kcon-form__shield {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--ks-teal-dark);
  background: var(--ks-mint);
}

.kcon-form__shield svg {
  width: 15px;
  height: 15px;
}

.kcon-form__privacy a,
.kcon-fallback a {
  color: var(--ks-teal-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kcon-fallback {
  padding: 20px 22px;
  border: 1px dashed rgba(23, 142, 139, .4);
  border-radius: 16px;
  background: var(--ks-mist);
}

.ksf .kcon-fallback h3 {
  margin: 0;
  color: var(--ks-ink);
  font: 700 18px/1.3 var(--ks-display);
}

.kcon-fallback p {
  margin: 8px 0 0;
  color: var(--ks-copy);
  font-size: 15px;
  line-height: 1.6;
}

.kcon-admin {
  margin: 12px 0 0;
  color: #a16207;
  font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* Contact Form 7                                                       */
/* ------------------------------------------------------------------ */

.kcon-form .wpcf7 form > p,
.kcon-form .kapocs-cf7__grid > *,
.kcon-form .kapocs-cf7__field > p {
  margin: 0;
}

.kcon-form .kapocs-cf7__intro {
  display: none;
}

.kcon-form .kapocs-cf7__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.kcon-form .kapocs-cf7__field--full,
.kcon-form .kapocs-cf7__consent,
.kcon-form .kapocs-cf7__submit {
  grid-column: 1 / -1;
}

.kcon-form .kapocs-cf7__field br {
  display: none;
}

.kcon-form .wpcf7 label,
.kcon-form .kapocs-cf7__field {
  display: block;
  color: var(--ks-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.kcon-form .kapocs-cf7__field label small {
  color: var(--ks-soft);
  font-size: 12.5px;
  font-weight: 500;
}

.kcon-form .kapocs-cf7__required {
  color: #b35439;
}

.kcon-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 7px;
}

.kcon-form .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.kcon-form .wpcf7 select,
.kcon-form .wpcf7 textarea {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(13, 43, 56, .16);
  border-radius: 12px;
  color: var(--ks-ink);
  background: var(--ks-mist);
  box-shadow: none;
  font: 400 15.5px/1.4 var(--ksf-body);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.kcon-form .wpcf7 select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23106f6c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.kcon-form .wpcf7 textarea {
  min-height: 140px;
  padding: 12px 14px;
  resize: vertical;
}

.kcon-form .wpcf7 input::placeholder,
.kcon-form .wpcf7 textarea::placeholder {
  color: #8da0a7;
  opacity: 1;
}

.kcon-form .wpcf7 input:not([type="submit"]):focus,
.kcon-form .wpcf7 select:focus,
.kcon-form .wpcf7 textarea:focus {
  border-color: var(--ks-teal);
  outline: 0;
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(23, 142, 139, .14);
}

.kcon-form .wpcf7-acceptance,
.kcon-form .wpcf7-list-item {
  display: block;
  margin: 0;
}

.kcon-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ks-copy);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
}

.kcon-form .wpcf7-acceptance input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--ks-teal);
  cursor: pointer;
}

.kcon-form .wpcf7-list-item-label a {
  color: var(--ks-teal-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kcon-form .kapocs-cf7__submit,
.kcon-form .kapocs-cf7__submit p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.kcon-form .kapocs-cf7__submit .kapocs-cf7__required {
  color: var(--ks-soft);
  font-size: 13px;
  font-weight: 500;
}

.kcon-form .wpcf7 input[type="submit"] {
  min-height: 50px;
  margin: 0;
  padding: 0 26px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--ks-teal), var(--ks-teal-dark));
  box-shadow: 0 14px 30px -14px rgba(23, 142, 139, .75);
  font: 700 15.5px/1 var(--ks-display);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.kcon-form .wpcf7 input[type="submit"]:hover {
  box-shadow: 0 18px 36px -14px rgba(23, 142, 139, .85);
  transform: translateY(-1px);
}

.kcon-form .wpcf7 input[type="submit"]:focus-visible {
  outline: 3px solid rgba(23, 142, 139, .4);
  outline-offset: 3px;
}

.kcon-form .wpcf7-not-valid {
  border-color: #c97862 !important;
  background-color: #fffafa !important;
}

.kcon-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #a24632;
  font-size: 13px;
  font-weight: 600;
}

.kcon-form .wpcf7 form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid #d7aa87;
  border-radius: 12px;
  color: #784722;
  background: #fff8f1;
  font-size: 14px;
  line-height: 1.5;
}

.kcon-form .wpcf7 form.sent .wpcf7-response-output {
  border-color: #aad8d1;
  color: #176c68;
  background: #eaf8f5;
}

.kcon-form .wpcf7-spinner {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Narrower screens                                                     */
/* ------------------------------------------------------------------ */

/* One column: e-mail and phone, then the form, then the shortcuts. */
@media (max-width: 960px) {
  .kcon-main__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .kcon-side {
    display: contents;
  }

  .kcon-reach {
    order: 1;
  }

  .kcon-form {
    order: 2;
  }

  .kcon-paths {
    order: 3;
    margin-top: 4px;
  }
}

@media (max-width: 620px) {
  .kcon-form .kapocs-cf7__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .kcon-form .wpcf7 input[type="submit"] {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kcon-reach__item,
  .kcon-path,
  .kcon-reach__arrow,
  .kcon-path__arrow {
    transition: none;
  }
}

/* CF7 shows the response line only after a submit. */
.kcon-form .wpcf7 form.init .wpcf7-response-output,
.kcon-form .wpcf7 form.resetting .wpcf7-response-output,
.kcon-form .wpcf7 form.submitting .wpcf7-response-output,
.kcon-form .wpcf7 form .wpcf7-response-output:empty {
  display: none;
}