/* ═══════════════════════════════════════════════════════════════
   kontakt.css — Štýly pre stránku Kontakt
   ───────────────────────────────────────────────────────────────
   Importuje sa len na kontakt.html, spolu s css/style.css
═══════════════════════════════════════════════════════════════ */

/* ── Page Hero — úvodný pás ───────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, #0a3b66 0%, #0b5ed7 100%);
  padding-block: var(--space-lg);
  text-align: center;
}
.page-hero-super {
  font-size:      0.78rem;
  font-weight:    600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.6);
  margin-bottom:  8px;
}
.page-hero h1 {
  color:         #fff;
  margin-bottom: var(--space-sm);
}
.page-hero-sub {
  font-size:   1rem;
  color:       rgba(255,255,255,0.75);
  max-width:   520px;
  margin:      0 auto;
}

/* ── Aktívny nav link (Kontakt) ───────────────────────────── */
.nav-cta.active {
  background: var(--clr-primary-dk) !important;
}

/* ── Contact layout — formulár + info ────────────────────── */
.contact-section { background: var(--bg-page); }

.contact-inner {
  display:               grid;
  grid-template-columns: 1fr 1.6fr;
  gap:                   var(--space-xl);
  align-items:           start;
}

/* Ľavý stĺpec — info */
.contact-copy h2      { text-align: left; }
.contact-copy > p     { color: var(--clr-muted); margin-bottom: var(--space-md); }

.contact-details {
  display:        flex;
  flex-direction: column;
  gap:            14px;
  margin-bottom:  var(--space-md);
}
.contact-details li {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   0.95rem;
  color:       var(--clr-muted);
}
.contact-details a {
  color:           var(--clr-primary);
  text-decoration: none;
}
.contact-details a:hover { text-decoration: underline; }
.contact-icon { font-size: 1.1rem; flex-shrink: 0; }

.contact-side-extra {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* Sociálne siete */
.contact-social        { margin-bottom: var(--space-md); }
.contact-social-label  { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--clr-muted); margin-bottom: 8px; }
.contact-social .social-links a { color: var(--clr-muted); }
.contact-social .social-links a:hover { color: var(--clr-primary); }
.contact-social .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.contact-social .social-links svg {
  display: block;
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  overflow: visible;
  flex: 0 0 20px;
}

/* Mapa */
.contact-map {
  border-radius: var(--radius-md);
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
}

/* ── Pravý stĺpec — formulár ──────────────────────────────── */
.contact-form-wrap {
  background:    var(--bg-card);
  border:        1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-md);
  padding:       var(--space-lg);
}

.contact-form { display: grid; gap: var(--space-sm); }

.contact-form-card {
  display: grid;
  gap: var(--space-sm);
}
.contact-form-heading { margin: 0; }
.contact-form-notice {
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.contact-form-notice--success { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.contact-form-notice--error { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.contact-form .contact-consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.contact-form .contact-consent input {
  width: auto;
  margin-top: 4px;
  appearance: auto;
  flex: 0 0 auto;
}
.contact-form .contact-consent .wa-editor-content > :first-child { margin-top: 0; }
.contact-form .contact-consent .wa-editor-content > :last-child { margin-bottom: 0; }
.wa-contact-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Dvojstĺpcový riadok (Meno + Firma) */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     var(--space-sm);
}

.contact-form label { display: flex; flex-direction: column; gap: 6px; }
.contact-form span  { font-size: 0.875rem; font-weight: 600; color: var(--clr-dark); }

.contact-form input,
.contact-form select,
.contact-form textarea {
  width:         100%;
  padding:       11px 14px;
  border:        1.5px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-family:   inherit;
  font-size:     0.95rem;
  color:         var(--clr-text);
  background:    #fff;
  transition:    border-color var(--transition), box-shadow var(--transition);
  outline:       none;
  appearance:    none;
}
.contact-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 14px center;
  padding-right:       36px;
  cursor:              pointer;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--clr-primary);
  box-shadow:   0 0 0 3px rgba(11,94,215,0.12);
}

/* Spodok formulára — poznámka + tlačidlo */
.form-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-sm);
  flex-wrap:       wrap;
  margin-top:      4px;
}
.form-note {
  font-size: 0.78rem;
  color:     var(--clr-muted);
  margin:    0;
}

/* ── Responzívnosť ────────────────────────────────────────── */
@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .form-row           { grid-template-columns: 1fr; }
  .contact-form-wrap  { padding: var(--space-md); }
  .form-footer        { flex-direction: column; align-items: flex-start; }
}