/*
Theme Name: KartellX Egyedi
Theme URI: https://kartellx.hu/
Author: HTM-SOFT Kft.
Description: Elementor nélküli, egyoldalas KartellX WordPress téma kapcsolatfelvételi űrlappal.
Version: 1.0.0
Text Domain: kartellx
*/

:root {
  --kx-blue: #0d819f;
  --kx-dark: #003f50;
  --kx-pale: #f1f7f9;
  --kx-muted: #6cb0c2;
  --kx-white: #fff;
  --kx-shadow: 0 5px 18px rgba(0,0,0,.09);
  --kx-width: 1100px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--kx-blue);
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }

.kx-container { width: min(100% - 40px, var(--kx-width)); margin-inline: auto; }
.kx-header {
  position: sticky; top: 0; z-index: 50;
  height: 120px; background: #fff; box-shadow: var(--kx-shadow);
}
.kx-header-inner { height: 100%; display:flex; align-items:center; justify-content:space-between; }
.kx-logo img { width: 285px; max-height: 105px; object-fit: contain; }
.kx-nav { display:flex; gap: 46px; align-items:center; font-weight: 700; }
.kx-nav a { padding: 10px 0; transition: opacity .2s; }
.kx-nav a:hover { opacity:.7; }
.kx-menu-button { display:none; border:0; background:none; color:var(--kx-blue); font-size:38px; line-height:1; cursor:pointer; }
.kx-menu-close { display:none; }

.kx-hero { min-height: 360px; display:grid; place-items:center; text-align:center; background:#fff; }
.kx-hero-logo { width: 300px; margin-inline:auto; }
.kx-tagline { margin-top:26px; font-weight:700; letter-spacing:.02em; }

.kx-section { padding: 72px 0; }
.kx-section-pale { background: var(--kx-pale); }
.kx-title { margin:0 0 42px; color:var(--kx-blue); font-size:42px; line-height:1.1; text-transform:uppercase; }
.kx-title::after { content:""; display:block; width:205px; height:4px; margin-top:22px; background:var(--kx-blue); }
.kx-about-grid { display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:60px; align-items:center; }
.kx-about-copy { text-align:justify; font-size:21px; }
.kx-about-photo { border-radius:4px; box-shadow:var(--kx-shadow); overflow:hidden; }
.kx-about-photo img { width:100%; aspect-ratio: 4/5; object-fit:cover; object-position:center 18%; }

.kx-service-copy { max-width:950px; margin:0 auto; text-align:justify; font-size:21px; }
.kx-service-copy strong { font-weight:700; }

.kx-features { padding-top: 0; }
.kx-features-title { text-align:center; font-size:26px; text-transform:uppercase; margin:0 0 32px; }
.kx-feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.kx-feature-card {
  min-height:130px; border-radius:70px; background:var(--kx-pale);
  padding:22px 36px; display:flex; align-items:center; gap:28px;
}
.kx-feature-card img { width:74px; height:74px; object-fit:contain; flex:0 0 auto; }
.kx-feature-card p { margin:0; line-height:1.35; }
.kx-feature-card strong { font-weight:700; }
.kx-feature-card-wide { grid-column:1 / -1; }

.kx-contact { background:var(--kx-blue); color:#fff; text-align:center; padding:64px 0 50px; }
.kx-contact .kx-title { color:#fff; text-align:center; margin-bottom:22px; }
.kx-contact .kx-title::after { background:#fff; margin:22px auto 0; width:215px; }
.kx-contact-lead { max-width:650px; margin:0 auto 34px; font-weight:700; }
.kx-form { max-width:680px; margin:0 auto; display:grid; gap:18px; }
.kx-form input, .kx-form textarea {
  width:100%; border:0; border-radius:5px; background:var(--kx-muted); color:#fff;
  padding:17px 20px; outline:2px solid transparent;
}
.kx-form textarea { min-height:145px; resize:vertical; }
.kx-form input::placeholder, .kx-form textarea::placeholder { color:rgba(255,255,255,.72); font-weight:700; text-transform:uppercase; }
.kx-form input:focus, .kx-form textarea:focus { outline-color:#fff; }
.kx-submit { justify-self:center; min-width:150px; border:0; border-radius:40px; padding:16px 34px; background:#fff; color:var(--kx-blue); font-weight:700; text-transform:uppercase; cursor:pointer; }
.kx-submit:hover { filter:brightness(.96); }
.kx-form-status { max-width:680px; margin:0 auto 24px; padding:12px 16px; border-radius:4px; background:rgba(255,255,255,.16); }
.kx-honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }

.kx-footer { background:var(--kx-dark); color:#fff; text-align:center; padding:32px 20px; font-size:16px; }

@media (max-width: 900px) {
  .kx-header { height:88px; }
  .kx-logo img { width:190px; max-height:78px; }
  .kx-menu-button { display:block; }
  .kx-nav {
    position:fixed; top:0; right:0; bottom:0; width:min(76vw, 300px);
    padding:72px 20px 25px; background:#2385a0; color:#fff;
    display:flex; flex-direction:column; align-items:flex-start; gap:14px;
    transform:translateX(105%); transition:transform .25s ease; box-shadow:-8px 0 25px rgba(0,0,0,.25);
  }
  .kx-nav.is-open { transform:translateX(0); }
  .kx-nav a { width:100%; padding:8px 0; font-size:20px; }
  .kx-menu-close { display:block; position:absolute; top:15px; right:17px; border:0; background:none; color:#fff; font-size:42px; cursor:pointer; }
  .kx-overlay { position:fixed; inset:0; background:rgba(0,0,0,.78); opacity:0; pointer-events:none; transition:opacity .25s; z-index:40; }
  .kx-overlay.is-open { opacity:1; pointer-events:auto; }
  .kx-hero { min-height:330px; }
  .kx-about-grid { grid-template-columns:1fr; }
  .kx-about-photo { max-width:360px; margin-inline:auto; }
  .kx-feature-grid { grid-template-columns:1fr; }
  .kx-feature-card-wide { grid-column:auto; }
}

@media (max-width: 600px) {
  body { font-size:17px; }
  .kx-container { width:min(100% - 20px, var(--kx-width)); }
  .kx-section { padding:58px 0; }
  .kx-title { font-size:40px; margin-bottom:32px; }
  .kx-title::after { width:202px; }
  .kx-about-copy, .kx-service-copy { font-size:20px; line-height:1.52; text-align:justify; }
  .kx-hero-logo { width:220px; }
  .kx-tagline { font-size:16px; }
  .kx-features-title { font-size:21px; }
  .kx-feature-card { border-radius:42px; padding:20px 22px; gap:18px; min-height:112px; }
  .kx-feature-card img { width:62px; height:62px; }
  .kx-contact { padding-top:34px; }
  .kx-contact .kx-title { font-size:30px; }
  .kx-form { gap:19px; }
}

/* Önálló weboldal-specifikus finomhangolás */
.kx-logo img { object-position: left center; }
.kx-success { background: rgba(255,255,255,.28); }

/* Kapcsolati státuszüzenet automatikus eltűnése */
.kx-form-status {
  opacity: 1;
  transform: translateY(0);
  max-height: 120px;
  overflow: hidden;
  transition:
    opacity .45s ease,
    transform .45s ease,
    max-height .45s ease,
    margin .45s ease,
    padding .45s ease;
}

.kx-form-status.kx-error {
  background: rgba(96, 18, 18, .42);
  border: 1px solid rgba(255, 255, 255, .45);
}

.kx-form-status.is-hiding {
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}