/* web/css/contact.css */
/* Scoped styling: affects only the contact page via .contact-wrap */

.contact-wrap {
  /* === QUICK TYPOGRAPHY CONTROLS (ändra här) === */
  --cw-font-base: 16px;     /* grundstorlek för text på contact-sidan */
  --cw-font-small: 13px;    /* för "small" texter */
  --cw-font-label: 14px;    /* labels ovanför inputs */
  --cw-font-h6: 16px;       /* rubriker som använder .h6 i vyn */
  --cw-font-lead: 14px;     /* introtext under sidnamn */

  /* === STYLE TOKENS === */
  --cw-radius: 18px;
  --cw-radius-sm: 12px;
  --cw-shadow: 0 14px 38px rgba(15, 23, 42, 0.10);
  --cw-shadow-dark: 0 18px 44px rgba(0, 0, 0, 0.35);
  --cw-border: rgba(15, 23, 42, 0.08);
  --cw-muted: rgba(15, 23, 42, 0.65);
  --cw-muted-2: rgba(15, 23, 42, 0.50);
  --cw-focus: rgba(13, 110, 253, 0.15); /* bootstrap primary-ish */
}

/* Apply base font sizing to contact page only */
.contact-wrap { font-size: var(--cw-font-base); }
.contact-wrap .small { font-size: var(--cw-font-small) !important; }
.contact-wrap .form-label { font-size: var(--cw-font-label); }
.contact-wrap .h6 { font-size: var(--cw-font-h6) !important; }

/* Den "intro" texten under sidnamn (p.text-muted i header) */
.contact-wrap > .text-center p.text-muted { font-size: var(--cw-font-lead); }

.contact-wrap .section-title { letter-spacing: 0.2px; }

/* Card styling */
.contact-wrap .card {
  border-radius: var(--cw-radius);
  box-shadow: var(--cw-shadow);
  border: 1px solid var(--cw-border);
}

.contact-wrap .card.border-0 {
  border: 1px solid var(--cw-border) !important; /* keep subtle border even if border-0 is used */
}

.contact-wrap .card-header,
.contact-wrap .card-footer { background: transparent; }

/* Two-column layout helpers */
.contact-wrap .contact-card {
  border-radius: var(--cw-radius);
  overflow: hidden;
}

.contact-wrap .contact-aside {
  background: rgba(15, 23, 42, 0.03);
}

/* Success check */
.contact-wrap .contact-check {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(25, 135, 84, 0.12);
  color: rgb(25, 135, 84);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}

/* Bullet list */
.contact-wrap .contact-bullets .bullet {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(13, 110, 253, 0.25);
  margin-right: 10px;
  transform: translateY(1px);
}

/* Typography */
.contact-wrap .text-muted { color: var(--cw-muted) !important; }
.contact-wrap .small.text-muted { color: var(--cw-muted-2) !important; }

/* Inputs (matcha höjder så två kolumner linjerar snyggt) */
.contact-wrap .form-control:not(textarea),
.contact-wrap .form-select {
  border-radius: var(--cw-radius-sm);
  border: 1px solid rgba(15, 23, 42, 0.14);
  min-height: 44px;
  padding: 0.6rem 0.9rem;
}

.contact-wrap textarea.form-control {
  border-radius: var(--cw-radius-sm);
  border: 1px solid rgba(15, 23, 42, 0.14);
  padding: 0.6rem 0.9rem;
}

.contact-wrap .form-control::placeholder,
.contact-wrap textarea::placeholder {
  color: rgba(15, 23, 42, 0.45);
}

.contact-wrap .form-control:focus,
.contact-wrap .form-select:focus,
.contact-wrap textarea:focus {
  border-color: rgba(13, 110, 253, 0.45);
  box-shadow: 0 0 0 0.2rem var(--cw-focus);
}

.contact-wrap .form-label { font-weight: 600; }
.contact-wrap .form-text { color: var(--cw-muted); }
.contact-wrap .invalid-feedback { font-size: 0.875rem; }

/* ✅ Håll labels på en rad på desktop (för bättre linjering invoice/subject) */
@media (min-width: 768px) {
  .contact-wrap .form-label { white-space: nowrap; }
}

/* Buttons */
.contact-wrap .btn { border-radius: var(--cw-radius-sm); }
.contact-wrap .btn-primary { box-shadow: 0 8px 18px rgba(13, 110, 253, 0.18); }
.contact-wrap .btn-primary:hover { box-shadow: 0 10px 22px rgba(13, 110, 253, 0.22); }

/* Alerts */
.contact-wrap .alert { border-radius: var(--cw-radius); }

/* Code block polish */
.contact-wrap code {
  border-radius: 10px;
  padding: 0.15rem 0.35rem;
}

/* Captcha image polish */
.contact-wrap .captcha img,
.contact-wrap img[src*="captcha"] {
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
}

/* ---- Dark mode support (Bootstrap 5.3 data-bs-theme + body.dark) ---- */
:root[data-bs-theme="dark"] .contact-wrap,
body.dark .contact-wrap {
  --cw-border: rgba(255, 255, 255, 0.10);
  --cw-muted: rgba(255, 255, 255, 0.70);
  --cw-muted-2: rgba(255, 255, 255, 0.55);
}

:root[data-bs-theme="dark"] .contact-wrap .card,
body.dark .contact-wrap .card {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--cw-border);
  box-shadow: var(--cw-shadow-dark);
}

:root[data-bs-theme="dark"] .contact-wrap .contact-aside,
body.dark .contact-wrap .contact-aside {
  background: rgba(255, 255, 255, 0.04);
}

:root[data-bs-theme="dark"] .contact-wrap .form-control:not(textarea),
:root[data-bs-theme="dark"] .contact-wrap .form-select,
body.dark .contact-wrap .form-control:not(textarea),
body.dark .contact-wrap .form-select {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
}

:root[data-bs-theme="dark"] .contact-wrap textarea.form-control,
body.dark .contact-wrap textarea.form-control {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
}

:root[data-bs-theme="dark"] .contact-wrap .form-control::placeholder,
:root[data-bs-theme="dark"] .contact-wrap textarea::placeholder,
body.dark .contact-wrap .form-control::placeholder,
body.dark .contact-wrap textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

:root[data-bs-theme="dark"] .contact-wrap .contact-bullets .bullet,
body.dark .contact-wrap .contact-bullets .bullet {
  background: rgba(13, 110, 253, 0.35);
}