/**
 * contact.css
 * Styles for the "Kapcsolat" (Contact) section and the scroll-progress button.
 *
 * The contact section is a two-column layout: heading/intro on the left,
 * company details on the right. The contact form used to occupy the right
 * column (Web3Forms, disabled — see index.html/main.js); the details block
 * now sits there instead as a plain sibling column.
 *
 * Reuses --mhm-* tokens from main.css, --card-bg from services.css,
 * and shared utilities (.eyebrow, .section-line) from about.css.
 */

/* ─── Section shell ──────────────────────────────────────────────────────── */
.contact {
  position: relative;
  padding: 7rem 0;
  background: var(--bg-primary);
  scroll-margin-top: 90px; /* Offset for the fixed navigation bar when jumping to #contact. */
  overflow: hidden;
  transition: background 0.5s;
}

/* Dot-grid background texture — consistent with the other sections. */
.contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* ─── Two-column inner layout ────────────────────────────────────────────── */
/* Left column: heading and intro text. Right column: company contact
   details. Both are plain text now that the form is gone, so the columns
   are even rather than the old 0.9fr/1.1fr split that favoured the
   (wider) form column. */
.contact-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* ─── Heading and contact details ────────────────────────────────────────── */
.contact-title {
  font-style: italic;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.18;
  color: var(--text-primary);
  margin-top: 1.25rem;
  transition: color 0.5s;
}
.contact-title .accent { color: var(--mhm-red); }

.contact-intro {
  margin-top: 1.25rem;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-secondary);
  transition: color 0.5s;
}

/* Grid of labelled detail blocks (company name, address, phone, email,
   privacy notice). Sits in its own grid column now, so it no longer
   needs the top margin it had when stacked under the intro paragraph. */
.contact-details {
  display: grid;
  gap: 1.4rem;
}

/* Small uppercase label above each detail value. */
.contact-block-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.contact-block-value {
  font-size: 0.98rem;
  color: var(--text-primary);
  transition: color 0.5s;
}
.contact-block-value a { color: var(--mhm-blue); text-decoration: none; transition: color 0.3s; }
.contact-block-value a:hover { color: var(--mhm-red); }

/* ─── Contact form (currently disabled — see index.html / main.js) ──────── */
.contact-form { display: grid; gap: 1.1rem; }

/* Individual field wrapper — stacks label above input vertically. */
.field { display: flex; flex-direction: column; gap: 0.4rem; }

.field label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.field label .req { color: var(--mhm-red); } /* Required field asterisk. */

/* Shared styles for all interactive form controls. */
.field input,
.field select,
.field textarea {
  font-family: var(--font-main);
  font-size: 0.95rem;
  padding: 0.8rem 0.9rem;
  color: var(--text-primary);
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.25s, background 0.5s, color 0.5s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-secondary); opacity: 0.6; }

/* Highlight the border of the focused control. */
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--mhm-blue); }

/* ─── GDPR consent checkbox ──────────────────────────────────────────────── */
/* Inline checkbox with a link to the privacy notice PDF. */
.contact-consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.contact-consent input { margin-top: 0.2rem; accent-color: var(--mhm-blue); width: 16px; height: 16px; flex-shrink: 0; }
.contact-consent a { color: var(--mhm-blue); text-decoration: none; }
.contact-consent a:hover { color: var(--mhm-red); }

/* ─── Submit button ──────────────────────────────────────────────────────── */
.contact-submit {
  margin-top: 0.4rem;
  padding: 1rem 1.5rem;
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--mhm-blue);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}
.contact-submit:hover { background: var(--mhm-red); transform: translateY(-2px); }

/* ─── Responsive overrides ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .contact { padding: 4.5rem 0; }
  .contact-inner { grid-template-columns: 1fr; gap: 2.5rem; padding-inline: 1.5rem; }
}

/* ─── Scroll-progress / back-to-top button ───────────────────────────────── */
/*
 * A fixed circular button in the bottom-right corner.
 * An SVG arc drawn around its edge fills as the user scrolls down the page,
 * providing a visual progress indicator. Clicking it scrolls back to the top.
 * The button is hidden until the user scrolls past 60 px (managed in main.js).
 */
.progress-wrap {
  position: fixed;
  right: 1.75rem;
  bottom: 1.75rem;
  width: 46px;
  height: 46px;
  cursor: pointer;
  border-radius: 50%;
  background: var(--bg-stats);
  box-shadow: 0 2px 14px rgba(0,75,147,0.18);
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

/* Visible state — toggled by adding .active-progress in main.js. */
.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Up-arrow glyph centred inside the button. */
.progress-wrap::after {
  content: '↑';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--mhm-blue);
  transition: color 0.3s;
}
.progress-wrap:hover::after { color: var(--mhm-red); }

/* SVG ring drawn over the button — stroke-dashoffset is animated in main.js. */
.progress-circle {
  position: absolute;
  inset: 0;
  width: 46px;
  height: 46px;
  display: block;
}
.progress-circle path {
  fill: none;
  stroke: var(--mhm-red);
  stroke-width: 4;
  transition: stroke-dashoffset 0.1s linear;
}

/* ─── Thank-you overlay ──────────────────────────────────────────────────── */
/*
 * Full-screen overlay shown after a successful form submission.
 * Fades in via the .overlay-visible class added by main.js.
 * Clicking the background or the close button removes it from the DOM.
 */
#thankYouOverlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 22, 40, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Triggered by main.js on the next animation frame after insertion. */
#thankYouOverlay.overlay-visible { opacity: 1; }

/* White card centred in the overlay. */
.overlay-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  max-width: 420px;
  width: 90%;
  text-align: center;
  transform: translateY(20px);
  transition: transform 0.35s ease;
}
#thankYouOverlay.overlay-visible .overlay-card { transform: translateY(0); }

/* Large green checkmark icon. */
.overlay-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e6f4ea;
  color: #2e7d32;
  font-size: 1.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.overlay-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.overlay-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 1.75rem;
}

/* Close button — matches the submit button style. */
.overlay-close {
  padding: 0.75rem 2rem;
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: var(--mhm-blue);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s;
}
.overlay-close:hover { background: var(--mhm-red); }

/* ─── Inline form error message ──────────────────────────────────────────── */
/* Displayed below the submit button when the Web3Forms request fails. */
.form-error {
  font-size: 0.85rem;
  color: var(--mhm-red);
  margin-top: 0.5rem;
  text-align: center;
}

/* Reduce top/bottom padding on short-viewport screens (e.g. 1536×703 laptops)
   so section titles land comfortably below the nav after a nav-link click. */
@media (max-height: 750px) {
  .contact { padding-top: 4rem; padding-bottom: 4rem; }
}