/*
 * HakuStudio
 * Filmpress.sk redesign & custom implementation.
 *
 * Contact page polish for the legacy JA Titan/Joomla contact view.
 */

body.fp-contact-page .fp-contact-layout {
  display: grid !important;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.35fr) !important;
  gap: clamp(36px, 5vw, 82px) !important;
  align-items: start !important;
  width: min(100%, 1240px) !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
}

body.fp-contact-page .fp-contact-info,
body.fp-contact-page .fp-contact-form-panel {
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
}

body.fp-contact-page .fp-contact-info {
  padding: clamp(28px, 3.2vw, 40px) !important;
  border: 1px solid var(--fp-color-border, #24313c) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .025) !important;
}

body.fp-contact-page .fp-contact-info > h1:first-child,
body.fp-contact-page .fp-contact-info > h2:first-child,
body.fp-contact-page .fp-contact-info > h3:first-child {
  margin: 0 0 28px !important;
  font-size: clamp(1.65rem, 2.3vw, 2.15rem) !important;
  line-height: 1.15 !important;
}

body.fp-contact-page .fp-contact-details {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.fp-contact-page .fp-contact-details h1,
body.fp-contact-page .fp-contact-details h2,
body.fp-contact-page .fp-contact-details h3,
body.fp-contact-page .fp-contact-details h4 {
  margin: 0 0 22px !important;
  color: var(--fp-color-text, #fff) !important;
  font-size: clamp(1.35rem, 1.8vw, 1.7rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em;
}

body.fp-contact-page .fp-contact-info h1,
body.fp-contact-page .fp-contact-info h2,
body.fp-contact-page .fp-contact-info h3,
body.fp-contact-page .fp-contact-form-panel h1,
body.fp-contact-page .fp-contact-form-panel h2,
body.fp-contact-page .fp-contact-form-panel h3 {
  color: var(--fp-color-text, #fff) !important;
  letter-spacing: -.02em;
}

body.fp-contact-page .fp-contact-info p,
body.fp-contact-page .fp-contact-info li,
body.fp-contact-page .fp-contact-info dd,
body.fp-contact-page .fp-contact-info address {
  color: var(--fp-color-text, #fff) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
}

body.fp-contact-page .fp-contact-info a {
  color: inherit !important;
  text-decoration: none;
}

body.fp-contact-page .fp-contact-info a:hover,
body.fp-contact-page .fp-contact-info a:focus-visible {
  color: var(--fp-color-accent, #f5b400) !important;
}

body.fp-contact-page .fp-contact-form-panel {
  padding: clamp(28px, 3.4vw, 42px) !important;
  border: 1px solid var(--fp-color-border, #24313c) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .035) !important;
}

/* After the details column is moved to the left card, the original JA Titan
 * inner Bootstrap row can still keep the form at 50%. Flatten that leftover
 * structure so the contact form uses the complete right card. */
body.fp-contact-page .fp-contact-form-panel .row {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

body.fp-contact-page .fp-contact-form-panel [class*="col-"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.fp-contact-page .fp-contact-form-panel form {
  width: 100% !important;
  max-width: none !important;
}

body.fp-contact-page .fp-contact-form-panel h1,
body.fp-contact-page .fp-contact-form-panel h2,
body.fp-contact-page .fp-contact-form-panel h3 {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

body.fp-contact-page .fp-contact-form-panel label,
body.fp-contact-page .fp-contact-form-panel legend {
  display: block;
  margin-bottom: 8px !important;
  color: var(--fp-color-text, #fff) !important;
  font-weight: 700 !important;
}

body.fp-contact-page .fp-contact-form-panel .control-group,
body.fp-contact-page .fp-contact-form-panel .mb-3,
body.fp-contact-page .fp-contact-form-panel .form-group {
  margin-bottom: 20px !important;
}

/* Use Filmpress theme tokens instead of hard-coding dark controls. This keeps
 * the form readable in both dark and light mode, including legacy Joomla
 * inputs that omit the type attribute. */
body.fp-contact-page .fp-contact-form-panel input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
body.fp-contact-page .fp-contact-form-panel textarea,
body.fp-contact-page .fp-contact-form-panel select,
body.fp-contact-page .fp-contact-form-panel .form-control {
  width: 100% !important;
  min-height: 52px !important;
  padding: 13px 15px !important;
  border: 1px solid var(--fp-color-border-strong, #34434f) !important;
  border-radius: 10px !important;
  background: var(--fp-color-surface-elevated, #151d24) !important;
  background-color: var(--fp-color-surface-elevated, #151d24) !important;
  color: var(--fp-color-text, #fff) !important;
  -webkit-text-fill-color: var(--fp-color-text, #fff) !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.fp-contact-page .fp-contact-form-panel textarea {
  min-height: 240px !important;
  resize: vertical;
}

body.fp-contact-page .fp-contact-form-panel input::placeholder,
body.fp-contact-page .fp-contact-form-panel textarea::placeholder {
  color: var(--fp-color-text-subtle, #83909b) !important;
  opacity: 1;
}

body.fp-contact-page .fp-contact-form-panel input:focus,
body.fp-contact-page .fp-contact-form-panel textarea:focus,
body.fp-contact-page .fp-contact-form-panel select:focus,
body.fp-contact-page .fp-contact-form-panel .form-control:focus {
  border-color: var(--fp-color-accent, #f5b400) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-color-accent, #f5b400) 16%, transparent) !important;
}

body.fp-contact-page .fp-contact-form-panel button[type="submit"],
body.fp-contact-page .fp-contact-form-panel input[type="submit"],
body.fp-contact-page .fp-contact-form-panel .btn-primary {
  min-height: 48px !important;
  padding: 11px 22px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--fp-color-accent, #f5b400) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

body.fp-contact-page .fp-contact-form-panel button[type="submit"]:hover,
body.fp-contact-page .fp-contact-form-panel button[type="submit"]:focus-visible,
body.fp-contact-page .fp-contact-form-panel input[type="submit"]:hover,
body.fp-contact-page .fp-contact-form-panel .btn-primary:hover,
body.fp-contact-page .fp-contact-form-panel .btn-primary:focus-visible {
  background: var(--fp-color-accent-hover, #ef382c) !important;
  filter: none;
  transform: translateY(-1px);
}

body.fp-contact-page .fp-contact-form-panel .form-text,
body.fp-contact-page .fp-contact-form-panel .contact-form-info,
body.fp-contact-page .fp-contact-form-panel p {
  color: var(--fp-color-text-muted, #aeb9c2) !important;
  line-height: 1.55 !important;
}

/* Light theme: keep the pale-blue Filmpress shell, but use clean white cards
 * and fields with dark-blue text instead of carrying over dark form controls. */
html.light-active body.fp-contact-page .fp-contact-info,
html.light-active body.fp-contact-page .fp-contact-form-panel,
html[data-theme="light"] body.fp-contact-page .fp-contact-info,
html[data-theme="light"] body.fp-contact-page .fp-contact-form-panel,
body.light-active.fp-contact-page .fp-contact-info,
body.light-active.fp-contact-page .fp-contact-form-panel,
body[data-theme="light"].fp-contact-page .fp-contact-info,
body[data-theme="light"].fp-contact-page .fp-contact-form-panel {
  border-color: var(--fp-color-border, #8db7d2) !important;
  background: var(--fp-color-surface-elevated, #f3f9fd) !important;
  color: var(--fp-color-text, #102b4a) !important;
}

html.light-active body.fp-contact-page .fp-contact-form-panel input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html.light-active body.fp-contact-page .fp-contact-form-panel textarea,
html.light-active body.fp-contact-page .fp-contact-form-panel select,
html.light-active body.fp-contact-page .fp-contact-form-panel .form-control,
html[data-theme="light"] body.fp-contact-page .fp-contact-form-panel input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] body.fp-contact-page .fp-contact-form-panel textarea,
html[data-theme="light"] body.fp-contact-page .fp-contact-form-panel select,
html[data-theme="light"] body.fp-contact-page .fp-contact-form-panel .form-control,
body.light-active.fp-contact-page .fp-contact-form-panel input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
body.light-active.fp-contact-page .fp-contact-form-panel textarea,
body.light-active.fp-contact-page .fp-contact-form-panel select,
body.light-active.fp-contact-page .fp-contact-form-panel .form-control,
body[data-theme="light"].fp-contact-page .fp-contact-form-panel input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
body[data-theme="light"].fp-contact-page .fp-contact-form-panel textarea,
body[data-theme="light"].fp-contact-page .fp-contact-form-panel select,
body[data-theme="light"].fp-contact-page .fp-contact-form-panel .form-control {
  border-color: var(--fp-color-border-strong, #5d92b6) !important;
  background: #fff !important;
  background-color: #fff !important;
  color: var(--fp-color-text, #102b4a) !important;
  -webkit-text-fill-color: var(--fp-color-text, #102b4a) !important;
}

html.light-active body.fp-contact-page .fp-contact-form-panel label,
html.light-active body.fp-contact-page .fp-contact-form-panel legend,
html.light-active body.fp-contact-page .fp-contact-form-panel h1,
html.light-active body.fp-contact-page .fp-contact-form-panel h2,
html.light-active body.fp-contact-page .fp-contact-form-panel h3,
html[data-theme="light"] body.fp-contact-page .fp-contact-form-panel label,
html[data-theme="light"] body.fp-contact-page .fp-contact-form-panel legend,
html[data-theme="light"] body.fp-contact-page .fp-contact-form-panel h1,
html[data-theme="light"] body.fp-contact-page .fp-contact-form-panel h2,
html[data-theme="light"] body.fp-contact-page .fp-contact-form-panel h3,
body.light-active.fp-contact-page .fp-contact-form-panel label,
body.light-active.fp-contact-page .fp-contact-form-panel legend,
body.light-active.fp-contact-page .fp-contact-form-panel h1,
body.light-active.fp-contact-page .fp-contact-form-panel h2,
body.light-active.fp-contact-page .fp-contact-form-panel h3,
body[data-theme="light"].fp-contact-page .fp-contact-form-panel label,
body[data-theme="light"].fp-contact-page .fp-contact-form-panel legend,
body[data-theme="light"].fp-contact-page .fp-contact-form-panel h1,
body[data-theme="light"].fp-contact-page .fp-contact-form-panel h2,
body[data-theme="light"].fp-contact-page .fp-contact-form-panel h3 {
  color: var(--fp-color-text, #102b4a) !important;
}

@media (max-width: 991px) {
  body.fp-contact-page .fp-contact-layout {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
}

@media (max-width: 575px) {
  body.fp-contact-page .fp-contact-info,
  body.fp-contact-page .fp-contact-form-panel {
    padding: 20px !important;
    border-radius: 14px !important;
  }
}