/**
 * Kontakta oss — help portal (distilled)
 *
 * Distill principles applied:
 *  - Remove redundant copy (hero lede, card descs that restate titles)
 *  - Show the answer (phone/email visible, not hidden)
 *  - One primary action per card
 *  - Simulated site header (71/90px) — content budget calculated accordingly
 *
 * Tokens align with svea-base.css. Ellycare primary is #4C4CF6,
 * coral #FF8989 reserved as accent (italic emphasis, crisis).
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* Svea (default) */
  --svea-color-primary-rgb:       131, 62, 169;
  --svea-color-primary:           #833EA9;
  --svea-color-primary-dark:      #6B2D8B;
  --svea-color-primary-10:        #F1E9F4;
  --svea-color-primary-25:        #DBC9E4;
  --svea-color-primary-50:        #B794CB;

  --svea-color-accent:            #FF8989;
  --svea-color-accent-dark:       #E86B6B;
  --svea-color-accent-10:         #FFF1F1;

  --svea-color-text:              #1a1a1a;
  --svea-color-text-secondary:    #4a4a4a;
  --svea-color-text-muted:        #757575;
  --svea-color-bg:                #ffffff;
  --svea-color-surface:           #F8F6F2;
  --svea-color-surface-2:         #EFEDE6;
  --svea-color-border:            #E7E3DB;
  --svea-color-border-strong:     #D9D4CA;

  --status-open:                  #2F8556;
  --status-open-bg:               #E6F2EC;

  /* Type */
  --font-family:                  'Hind', system-ui, -apple-system, sans-serif;

  --h1-size:                      clamp(1.875rem, 4vw + 0.5rem, 2.5rem);
  --h2-size:                      clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem);
  --body:                         1rem;
  --small:                        0.875rem;
  --tiny:                         0.75rem;

  --w-normal:                     400;
  --w-medium:                     500;
  --w-semi:                       600;

  --r-sm:                         6px;
  --r-md:                         12px;
  --r-lg:                         18px;
  --r-xl:                         22px;
  --r-pill:                       9999px;

  --ease:                         cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:                       0.15s;
  --t-med:                        0.22s;

  /* Layout: simulated site header height */
  --header-h:                     71px;
}

@media (min-width: 640px) {
  :root { --header-h: 90px; }
}

/* Ellycare */
.theme-ellycare {
  --svea-color-primary-rgb:       76, 76, 246;
  --svea-color-primary:           #4C4CF6;
  --svea-color-primary-dark:      #3A3AD4;
  --svea-color-primary-10:        #EAEAFD;
  --svea-color-primary-25:        #CCCCFA;
  --svea-color-primary-50:        #9B9BF5;
  --svea-color-accent:            #FF8989;
  --svea-color-accent-dark:       #E86B6B;
  --svea-color-accent-10:         #FFF1F1;
  --svea-color-text:              #0B0B0B;
  --svea-color-text-secondary:    #383838;
  --svea-color-text-muted:        #6F6F6F;
}

.theme-studentpsykologerna {
  --svea-color-primary-rgb:       134, 167, 136;
  --svea-color-primary:           #86A788;
  --svea-color-primary-dark:      #5D865F;
  --svea-color-primary-10:        #F3F6F3;
  --svea-color-primary-25:        #E1E9E1;
  --svea-color-primary-50:        #C3D3C4;
  --svea-color-accent:            #D97D5E;
}

/* ==========================================================================
   2. Reset + base — scoped to .svea-contact-page so we don't fight the WP theme
   ========================================================================== */
.svea-contact-page,
.svea-contact-page *,
.svea-contact-page *::before,
.svea-contact-page *::after { box-sizing: border-box; }

.svea-contact-page {
  font-family: var(--font-family);
  font-size: var(--body);
  line-height: 1.55;
  color: var(--svea-color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 1280px;
  margin: 0 auto;
  /* Horizontal padding handled by the WP theme's .site-content / .inside-content. */
  padding: 1.25rem 0 3rem;
}

@media (min-width: 640px) {
  .svea-contact-page { padding-top: 2rem; }
}

.svea-contact-page h1,
.svea-contact-page h2,
.svea-contact-page h3,
.svea-contact-page h4 {
  font-family: var(--font-family);
  font-weight: var(--w-normal);
  color: var(--svea-color-text);
  margin: 0;
}

.svea-contact-page h1 { font-size: var(--h1-size); line-height: 1.05; letter-spacing: -0.015em; }
.svea-contact-page h2 { font-size: var(--h2-size); line-height: 1.2; letter-spacing: -0.005em; }

.svea-contact-page p { margin: 0; }

.svea-contact-page a {
  color: var(--svea-color-primary);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.svea-contact-page a:hover { color: var(--svea-color-primary-dark); }

/* :where() keeps these resets at specificity 0 so class rules (.btn, .chip,
   .contact-line, .modal-choice etc.) always win the cascade. */
:where(.svea-contact-page, .svea-contact-modal) button {
  font: inherit; color: inherit; background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
:where(.svea-contact-page, .svea-contact-modal) ul,
:where(.svea-contact-page, .svea-contact-modal) ol { list-style: none; margin: 0; padding: 0; }
:where(.svea-contact-page, .svea-contact-modal) input,
:where(.svea-contact-page, .svea-contact-modal) textarea,
:where(.svea-contact-page, .svea-contact-modal) select { font-family: inherit; font-size: inherit; color: inherit; }
:where(.svea-contact-page, .svea-contact-modal) a:where(:not([class])) {
  color: var(--svea-color-primary); text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.svea-contact-page :focus-visible,
.svea-contact-modal :focus-visible { outline: 2px solid var(--svea-color-primary); outline-offset: 2px; border-radius: var(--r-sm); }

/* (Sticky site header + dev toggle removed — production uses the WP theme header.) */

/* ==========================================================================
   5. Hero
   ========================================================================== */
/* Breadcrumb (always left, never centered) */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1.5rem;
  font-size: var(--small);
  color: var(--svea-color-text-muted);
}

@media (min-width: 720px) {
  .breadcrumb { margin-bottom: 2rem; }
}

.breadcrumb a {
  color: var(--svea-color-text-muted);
  transition: color var(--t-fast) var(--ease);
}

.breadcrumb a:hover { color: var(--svea-color-text); }

.breadcrumb__sep { opacity: 0.5; }

.breadcrumb [aria-current="page"] { color: var(--svea-color-text); }

/* The current-page label is an <h1> for SEO/semantics, but visually it's
   just a breadcrumb segment — strip all the heading defaults so it reads
   inline with the rest of the trail. */
.breadcrumb__current {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
  display: inline;
}

/* Visually hidden — for screen readers only (h1 page anchor) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   6. Quick grid
   ========================================================================== */
.quick-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 1.75rem;
}

@media (min-width: 720px) {
  .quick-grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 14px;
  }

  /* When the postal strip is present, slot it under the patient card so it
     fills the space below — admin spans both rows on the right. Cards
     take their natural heights vertically (align-items: start) but still
     stretch horizontally to fill their grid cells. Falls back to the
     simple 1fr 1fr column layout when the postal section is hidden.

     Third row is an empty "buffer" cell in the left column with 1fr
     sizing: when admin is taller than patient + gap + postal, the extra
     height goes to row 3 instead of stretching rows 1+2 — keeps the
     postal section visually hugged up against the patient card. */
  .quick-grid:has(.postal-section) {
    grid-template-areas:
      "patient admin"
      "postal  admin"
      ".       admin";
    grid-template-rows: auto auto 1fr;
    align-items: start;
  }
  .quick-grid:has(.postal-section) .qcard--patient  { grid-area: patient; }
  .quick-grid:has(.postal-section) .qcard--admin    { grid-area: admin; }
  .quick-grid:has(.postal-section) .postal-section  { grid-area: postal; }
}

.qcard {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--svea-color-bg);
  border: 1px solid var(--svea-color-border);
  border-radius: var(--r-xl);
}

/* Befintlig patient — primary action, gets subtle brand-tint background */
.qcard--patient {
  background: var(--svea-color-primary-10);
  border-color: transparent;
}

@media (min-width: 640px) { .qcard { padding: 24px; } }

/* All component rules below are ancestor-scoped under .svea-contact-page.
   Specificity 0,2,0 beats both our own h2/p reset (0,1,1) AND the WP theme's
   .entry-content h2 / .entry-content p rules (also 0,1,1). */

.svea-contact-page .qcard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.svea-contact-page .qcard__title {
  margin-bottom: 8px;
  font-size: 1.25rem;
  line-height: 1.2;
}

/* When the title shares a row with the status pill, the row's own
   margin-bottom handles the spacing — kill the title's margin in that case. */
.svea-contact-page .qcard__row .qcard__title { margin-bottom: 0; }

.svea-contact-page .qcard__desc {
  margin-bottom: 18px;
  color: var(--svea-color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.svea-contact-page .qcard__softlink {
  margin-top: 6px;
  align-self: flex-start;
  padding: 4px 0;
  font-size: var(--small);
  font-weight: var(--w-medium);
  color: var(--svea-color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.svea-contact-page .qcard__softlink:hover { color: var(--svea-color-primary-dark); }

/* Mini-section label inside a qcard — groups related contact-lines.
   Quiet uppercase to read as wayfinding, not as a heading that competes
   with the card's own h2 title. */
.svea-contact-page .qcard__section-label {
  margin: 16px 0 6px;
  font-size: var(--tiny);
  font-weight: var(--w-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--svea-color-text-muted);
}

.svea-contact-page .qcard__section-label:first-of-type {
  margin-top: 4px;
}

/* Contact line (phone / email) */
.contact-line {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 14px;
  background: var(--svea-color-surface);
  border: 0;                    /* override WP theme's <button> border */
  border-radius: var(--r-md);
  color: var(--svea-color-text);
  text-align: left;
  font: inherit;                /* button inherits page typography */
  cursor: pointer;
  text-decoration: none;        /* anchor variants stay un-underlined */
  transition: background var(--t-fast) var(--ease), transform 0.1s;
}

.contact-line:hover {
  background: var(--svea-color-primary-10);
  color: var(--svea-color-text);
}

.contact-line:active { transform: scale(0.995); }

.contact-line__icon {
  flex-shrink: 0;
  color: var(--svea-color-primary);
}

.contact-line__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.contact-line__primary {
  font-size: 1rem;
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
  color: var(--svea-color-text);
}

.contact-line__sub {
  margin-top: 2px;
  font-size: var(--small);
  color: var(--svea-color-text-muted);
}

/* Status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--status-open-bg);
  color: var(--status-open);
  font-size: var(--tiny);
  font-weight: var(--w-semi);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.status-pill[data-state="closed"] {
  background: var(--svea-color-surface-2);
  color: var(--svea-color-text-muted);
}

.status-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s ease-in-out infinite;
}

.status-pill[data-state="closed"] .status-pill__dot { animation: none; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* ==========================================================================
   7. Ny hos oss — compact tinted banner, placed last before crisis
   Positioned after FAQ/depts because most visitors are existing patients.
   Same primary-tinted bg as Befintlig — both are "primary action" entry points.
   ========================================================================== */
.new-patient {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  margin-bottom: 1.5rem;
  background: var(--svea-color-primary-10);
  border-radius: var(--r-lg);
}

@media (min-width: 640px) {
  .new-patient {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 14px 22px;
    gap: 18px;
  }
}

.new-patient__text { flex: 1; min-width: 0; }

.new-patient__title {
  font-size: 1rem;
  font-weight: var(--w-medium);
  line-height: 1.25;
  margin-bottom: 1px;
  color: var(--svea-color-text);
}

.new-patient__lede {
  color: var(--svea-color-text-secondary);
  font-size: var(--small);
  line-height: 1.4;
}

/* Banner CTA: black text on white default → invert to white on black on hover.
   Ancestor-scoped to beat WP theme's `.entry-content a` rules. */
.svea-contact-page .new-patient__cta {
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--svea-color-bg);
  border-color: var(--svea-color-bg);
  color: var(--svea-color-text);
  min-height: 40px;
  padding: 9px 18px;
  font-size: var(--small);
}

.svea-contact-page .new-patient__cta:hover {
  background: var(--svea-color-text);
  border-color: var(--svea-color-text);
  color: #fff;
}

@media (max-width: 639px) {
  .new-patient__cta { width: 100%; }
}

/* ==========================================================================
   8. Btn
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  min-height: 44px;
  font-family: var(--font-family);
  font-size: 0.9375rem;
  font-weight: var(--w-medium);
  line-height: 1.2;
  color: var(--svea-color-text);
  background: var(--svea-color-bg);
  border: 1.5px solid var(--svea-color-border);
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.svea-contact-page .btn:hover {
  border-color: var(--svea-color-text);
  background: var(--svea-color-text);
  color: var(--svea-color-bg);
}

/* Ancestor-scoped so WP theme's `.entry-content a` color can't override. */
.svea-contact-page .btn--primary {
  background: var(--svea-color-primary);
  border-color: var(--svea-color-primary);
  color: #fff;
}

.svea-contact-page .btn--primary:hover {
  background: var(--svea-color-primary-dark);
  border-color: var(--svea-color-primary-dark);
  color: #fff;
}

.btn--full {
  width: 100%;
}

.btn svg { transition: transform var(--t-fast) var(--ease); }
.btn:hover svg { transform: translateX(2px); }

/* ==========================================================================
   FAQ banner — anchors to full FAQ at the bottom
   Mirrors .new-patient visual pattern (tinted bg, ghost CTA) since both
   are quiet entry points to a deeper section.
   ========================================================================== */
.faq-banner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  margin-bottom: 1.5rem;
  background: var(--svea-color-primary-10);
  border-radius: var(--r-lg);
}

@media (min-width: 640px) {
  .faq-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 14px 22px;
    gap: 18px;
  }
}

.faq-banner__text { flex: 1; min-width: 0; }

.faq-banner__title {
  font-size: 1rem;
  font-weight: var(--w-medium);
  line-height: 1.25;
  margin-bottom: 1px;
  color: var(--svea-color-text);
}

.faq-banner__lede {
  color: var(--svea-color-text-secondary);
  font-size: var(--small);
  line-height: 1.4;
}

/* FAQ banner CTA — ancestor-scoped to beat WP theme's `.entry-content a` color */
.svea-contact-page .faq-banner__cta {
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--svea-color-bg);
  border-color: var(--svea-color-bg);
  color: var(--svea-color-primary);
  min-height: 40px;
  padding: 9px 18px;
  font-size: var(--small);
}

.svea-contact-page .faq-banner__cta:hover {
  background: var(--svea-color-primary);
  border-color: var(--svea-color-primary);
  color: #fff;
}

@media (max-width: 639px) {
  .faq-banner__cta { width: 100%; }
}

/* Contact-line variant: button-flavoured (e.g. "Skriv till oss")
   Looks identical to anchor contact-lines so the rows feel uniform. */
.contact-line--button {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}


/* ==========================================================================
   9. FAQ
   ========================================================================== */
.faq {
  margin-bottom: 2rem;
}

.faq__head { margin-bottom: 14px; }
.faq__title { font-size: 1.375rem; line-height: 1.2; }
.faq__lede { margin-top: 4px; color: var(--svea-color-text-secondary); font-size: var(--small); }

.faq-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--svea-color-bg);
  border: 1px solid var(--svea-color-border);
  border-radius: var(--r-pill);
  transition: border-color var(--t-fast) var(--ease);
}

.faq-search:focus-within { border-color: var(--svea-color-primary); }

.faq-search__icon { color: var(--svea-color-text-muted); flex-shrink: 0; pointer-events: none; }

.faq-search input {
  flex: 1;
  padding: 12px 10px;
  background: none;
  border: none;
  outline: none;
  font-size: 0.9375rem;
  min-width: 0;
}

.faq-search input::-webkit-search-cancel-button { display: none; }

.faq-search__clear {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--svea-color-text-muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}

.faq-search__clear:hover { color: var(--svea-color-text); background: var(--svea-color-surface-2); }

.faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 16px;
}

.chip {
  padding: 6px 14px;
  font-family: inherit;
  font-size: var(--small);
  font-weight: var(--w-medium);
  line-height: 1.4;
  color: var(--svea-color-text-secondary);
  background: var(--svea-color-bg);
  border: 1px solid var(--svea-color-border);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.chip:hover {
  border-color: var(--svea-color-border-strong);
  color: var(--svea-color-text);
}

.chip.is-active {
  background: var(--svea-color-text);
  color: var(--svea-color-bg);
  border-color: var(--svea-color-text);
}

/* Explicit list-style + ancestor scope to beat WP theme's `.entry-content ul`. */
.svea-contact-page .faq-list {
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.svea-contact-page .faq-list .faq-item {
  list-style: none;
}

.svea-contact-page .faq-list .faq-item::marker {
  content: '';
}

.faq-item { border-top: 1px solid var(--svea-color-border); }
.faq-item:last-child { border-bottom: 1px solid var(--svea-color-border); }
.faq-item[hidden] { display: none; }

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  font-size: 1rem;
  font-weight: var(--w-medium);
  line-height: 1.4;
  color: var(--svea-color-text);
  list-style: none;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--svea-color-primary); }

.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform var(--t-med) var(--ease);
}

.faq-item details[open] summary::after { transform: rotate(180deg); }

.faq-item__body {
  padding: 0 0 18px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--svea-color-text-secondary);
}

.faq-item__body p + p { margin-top: 8px; }

.faq-empty {
  padding: 20px 0;
  color: var(--svea-color-text-muted);
  font-size: var(--small);
  text-align: center;
}

.linklike {
  color: var(--svea-color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: var(--w-medium);
  cursor: pointer;
}

.linklike:hover { color: var(--svea-color-primary-dark); }

.faq-item mark {
  background: var(--svea-color-primary-10);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

/* ==========================================================================
   10. Fler kontaktvägar — bordered card grid with icons
   ========================================================================== */
.depts-section { margin-bottom: 2rem; }

.depts__title {
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--svea-color-text);
  margin-bottom: 1rem;
}

.depts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 640px) {
  .depts-grid { grid-template-columns: 1fr 1fr; }
}

.depts-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--svea-color-bg);
  border: 1px solid var(--svea-color-border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast) var(--ease);
}

.depts-card:hover { border-color: var(--svea-color-primary-25); }

.depts-card--wide { grid-column: 1 / -1; }

.depts-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.depts-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: var(--svea-color-primary-10);
  color: var(--svea-color-primary);
  border-radius: var(--r-sm);
}

.depts-card__title {
  font-size: 1rem;
  line-height: 1.3;
  color: var(--svea-color-text);
  margin: 0;
}

.depts-card__line {
  font-size: 0.9375rem;
  line-height: 1.4;
}

.depts-card__line a {
  color: var(--svea-color-text);
  font-weight: var(--w-medium);
  text-decoration: underline;
  text-decoration-color: var(--svea-color-primary-25);
  text-underline-offset: 3px;
}

.depts-card__line a:hover { color: var(--svea-color-primary); text-decoration-color: var(--svea-color-primary); }

.depts-card__sub {
  margin-top: 2px;
  font-size: var(--small);
  color: var(--svea-color-text-muted);
  line-height: 1.5;
}

.depts-card__sub a {
  color: var(--svea-color-text-muted);
  text-decoration: underline;
}

.depts-card__sub a:hover { color: var(--svea-color-primary); }

/* ==========================================================================
   11. Crisis + footer
   ========================================================================== */
.crisis {
  padding: 8px 14px;
  background: var(--svea-color-accent-10);
  border-left: 3px solid var(--svea-color-accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: calc(var(--small) - 1px);
  color: var(--svea-color-text-secondary);
  margin-bottom: 1.5rem;
}

.crisis strong { color: var(--svea-color-accent-dark); font-weight: var(--w-semi); margin-right: 4px; }
.crisis a { color: var(--svea-color-accent-dark); text-decoration: underline; text-underline-offset: 2px; font-weight: var(--w-semi); }
.crisis a:hover { color: var(--svea-color-accent); }

.footer {
  padding-top: 12px;
  text-align: center;
  font-size: var(--small);
  color: var(--svea-color-text-muted);
}

/* ==========================================================================
   12. Modal
   ========================================================================== */
.svea-contact-modal {
  position: fixed;
  inset: 0;
  /* Must sit above the sticky site header (.svea-header-v2, z-index 9992) and
     its mega-menu shell (9991). Matches the shared overlay tier used by the
     Modal + BookStudent features (999999) so a future header bump can't paint
     over this modal again. */
  z-index: 999999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.svea-contact-modal[hidden] { display: none; }

@media (min-width: 640px) { .svea-contact-modal { align-items: center; } }

.svea-contact-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  animation: fade-in 0.2s var(--ease);
}

.svea-contact-modal__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  padding: clamp(1.25rem, 5vw, 2rem);
  background: var(--svea-color-bg);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  animation: slide-up 0.3s var(--ease);
}

@media (min-width: 640px) {
  .svea-contact-modal__panel {
    border-radius: var(--r-xl);
    animation: scale-in 0.22s var(--ease);
  }
}

.svea-contact-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--svea-color-text-muted);
  background: none;       /* override WP theme's button bg */
  border: none;           /* override WP theme's button border */
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}

.svea-contact-modal__close:hover { color: var(--svea-color-text); background: var(--svea-color-surface); }

.svea-contact-modal__title { margin-bottom: 1rem; padding-right: 2rem; }

.svea-contact-modal__body iframe {
  width: 100%;
  min-height: 500px;
  border: 0;
  border-radius: var(--r-md);
}

.svea-contact-modal__body p { color: var(--svea-color-text-secondary); }

/* Modal: chooser cards (used in 'write' kind) */
.modal-lede {
  margin-bottom: 0.875rem;
  font-size: 0.9375rem;
  color: var(--svea-color-text-secondary);
}

.modal-choices {
  display: grid;
  gap: 10px;
  margin-bottom: 1rem;
}

.modal-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  background: var(--svea-color-bg);
  border: 1px solid var(--svea-color-border);
  border-radius: var(--r-lg);
  text-align: left;
  text-decoration: none;
  color: var(--svea-color-text);
  cursor: pointer;
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    transform 0.1s ease;
}

.modal-choice:hover,
.modal-choice:focus-visible {
  border-color: var(--svea-color-primary);
  background: var(--svea-color-primary-10);
  color: var(--svea-color-text);
}

.modal-choice:active { transform: scale(0.995); }

.modal-choice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--svea-color-primary-10);
  color: var(--svea-color-primary);
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease);
}

.modal-choice:hover .modal-choice__icon {
  background: var(--svea-color-bg);
}

.modal-choice__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.modal-choice__title {
  font-size: 1rem;
  font-weight: var(--w-medium);
  line-height: 1.3;
  color: var(--svea-color-text);
}

.modal-choice__desc {
  margin-top: 2px;
  font-size: var(--small);
  color: var(--svea-color-text-secondary);
  line-height: 1.5;
}

/* Optional phone line shown under address in the locations modal */
.modal-choice__meta {
  display: block;
  margin-top: 4px;
  font-size: var(--small);
  font-weight: var(--w-medium);
  color: var(--svea-color-text);
  font-variant-numeric: tabular-nums;
}

/* Yellow alert box — used inside the first chooser card to caution
   against sending sensitive info via email. Yellow = caution per
   standard semantics; doesn't conflict with brand blue + coral. */
.modal-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  background: #FEF8E0;
  border: 1px solid #F4DC91;
  border-left: 3px solid #C68A0E;
  border-radius: var(--r-sm);
  font-size: var(--tiny);
  line-height: 1.45;
  color: #5E4A05;
}

.modal-alert__icon {
  flex-shrink: 0;
  color: #C68A0E;
}

/* Green confirmation — used inside the second chooser card to reassure
   that sensitive info is safe to send (stored per patientlagen).
   Reuses the green from the "Öppet nu" status pill for cohesion. */
.modal-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--status-open-bg);
  border: 1px solid #B5DBC7;
  border-left: 3px solid var(--status-open);
  border-radius: var(--r-sm);
  font-size: var(--tiny);
  line-height: 1.45;
  color: #1F5C3D;
}

.modal-confirm__icon {
  flex-shrink: 0;
  color: var(--status-open);
}

.modal-note {
  font-size: var(--small);
  color: var(--svea-color-text-muted);
  font-style: italic;
  line-height: 1.5;
}

/* Postal address info card — informational, non-interactive. Sits between
   the qcards and the FAQ banner. Visually quieter than qcards (surface
   background, no hover) so it reads as info, not action.

   Mobile: icon left, body stacked, address wrapped to its own row.
   Desktop: icon | body | address as three columns — keeps it compact. */
.postal-section {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon body"
    ".    address";
  column-gap: 16px;
  row-gap: 8px;
  align-items: start;
  padding: 16px 18px;
  margin-bottom: 1.5rem;
  background: var(--svea-color-bg);
  border: 1px solid var(--svea-color-border);
  border-radius: var(--r-lg);
}

.postal-section__icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--svea-color-surface);
  color: var(--svea-color-primary);
  border-radius: var(--r-md);
}

.postal-section__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.postal-section__title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--w-medium);
  color: var(--svea-color-text);
  line-height: 1.3;
}

.postal-section__lede {
  margin: 0;
  font-size: var(--small);
  color: var(--svea-color-text-secondary);
  line-height: 1.5;
}

.postal-section__address {
  grid-area: address;
  margin: 0;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--svea-color-text);
  font-variant-numeric: tabular-nums;
}

.postal-section__address-line {
  display: block;
}

/* Compact-rest is the desktop one-row variant — hidden on mobile. */
.postal-section__address-line--rest-compact { display: none; }

@media (min-width: 720px) {
  /* Inside the quick-grid the postal section is already half-width, so we
     keep the same 2-col internal layout as mobile (icon | body, address
     wraps to its own row below body). The compact address row is still
     used so a 3-line address renders as 2 rows here. */
  .postal-section__address {
    margin: 4px 0 0;
  }

  /* Swap which "rest" rows render — desktop collapses lines 2..N onto one row. */
  .postal-section__address-line--rest-compact  { display: block; }
  .postal-section__address-line--rest-expanded { display: none; }
}

/* Region grouping inside the locations modal — section header + indented
   cards joined by a left rail. Rows without a region just list flat (no
   header, no rail) — the rail + indent are the cues for "belongs to". */
.modal-region {
  margin-bottom: 1.25rem;
}

.modal-region:last-child {
  margin-bottom: 0;
}

.modal-region__title {
  margin: 0 0 0.5rem;
  padding-left: 1.5rem;
  font-size: 0.8125rem;
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--svea-color-text-muted);
}

.modal-region .modal-choices {
  margin: 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--svea-color-border);
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   END-OF-FILE OVERRIDES
   These bump every component rule's specificity to 0,2,0 so they beat
   the WP theme's `.entry-content h2 / .entry-content p` rules (0,1,1).
   ========================================================================== */
.svea-contact-page .breadcrumb { margin-bottom: 1.5rem; }
@media (min-width: 720px) {
  .svea-contact-page .breadcrumb { margin-bottom: 2rem; }
}
.svea-contact-page .breadcrumb a { color: var(--svea-color-text-muted); }
.svea-contact-page .breadcrumb a:hover { color: var(--svea-color-text); }

.svea-contact-page .quick-grid { margin-bottom: 1.75rem; }

.svea-contact-page .faq-banner__title { margin: 0 0 4px; }
.svea-contact-page .faq-banner__lede { margin: 0; }

.svea-contact-page .depts-section { margin-bottom: 2rem; }
.svea-contact-page .depts__title { margin: 0 0 1rem; }
.svea-contact-page .depts-card__head { margin: 0 0 6px; }
.svea-contact-page .depts-card__title { margin: 0; }
.svea-contact-page .depts-card__line { margin: 0; }
.svea-contact-page .depts-card__sub { margin: 2px 0 0; }

.svea-contact-page .new-patient__title { margin: 0; }
.svea-contact-page .new-patient__lede { margin: 0; }

.svea-contact-page .faq { margin-bottom: 2rem; }
.svea-contact-page .faq__head { margin-bottom: 14px; }
.svea-contact-page .faq__title { margin: 0; }
.svea-contact-page .faq__lede { margin-top: 4px; }
.svea-contact-page .faq-empty { margin: 0; padding: 20px 0; }

.svea-contact-page .faq-item summary { padding: 16px 0; margin: 0; }
.svea-contact-page .faq-item__body { padding: 0 0 18px; margin: 0; }
.svea-contact-page .faq-item__body p { margin: 0; }
.svea-contact-page .faq-item__body p + p { margin-top: 8px; }

.svea-contact-page .crisis { margin-bottom: 1.5rem; padding: 8px 14px; }

.svea-contact-page .contact-line__primary { margin: 0; }
.svea-contact-page .contact-line__sub { margin-top: 2px; }

.svea-contact-page .postal-section { margin-bottom: 1.5rem; }
.svea-contact-page .postal-section__title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--w-medium);
  line-height: 1.3;
}
.svea-contact-page .postal-section__lede { margin: 0; }
.svea-contact-page .postal-section__address { margin: 0; }

/* Breadcrumb h1 — neutralize theme `.entry-content h1` (0,1,1) which
   would otherwise force its own font-size / margin / display. */
.svea-contact-page .breadcrumb__current {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
  display: inline;
}

/* TODO: ugly fix — the active WP theme adds 60px vertical padding on
   .site-content which fights this template's spacing. Until we move this
   into the theme proper, zero it out here. Safe because contact.css is
   only enqueued on pages using the contact template (see Assets.php).

   Under GeneratePress's full-width-content layout the theme uses a
   `padding: 0` shorthand on .site-content / .inside-article, which also
   strips horizontal padding — the page would go edge-to-edge on mobile.
   Match the theme's selector specificity so we can zero verticals AND
   restore a horizontal gutter. */
.site-content { padding-top: 0 !important; padding-bottom: 0 !important; }

.full-width-content.one-container .site-content,
.full-width-content.separate-containers .inside-article {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Modal region heading — modal lives outside .svea-contact-page so it can
   inherit theme `.entry-content h3` margins. Force our own margins back. */
.svea-contact-modal .modal-region__title { margin: 0 0 0.5rem; padding: 0 0 0 1.5rem; }
.svea-contact-modal .modal-region { margin-bottom: 1.25rem; }
.svea-contact-modal .modal-region:last-child { margin-bottom: 0; }

/* Brand override — Kindly Care WP theme forces a near-white color on
   buttons, which makes the "×" invisible on the modal close button until
   hover. Scope the visible color to the kindly body class so other brands
   are untouched. */
.theme-kindlycare .svea-contact-modal__close {
  color: #25154C;
}
.theme-kindlycare .svea-contact-modal__close:hover,
.theme-kindlycare .svea-contact-modal__close:focus,
.theme-kindlycare .svea-contact-modal__close:focus-visible {
  color: #25154C;
  background: var(--svea-color-surface);
}
.svea-contact-modal .modal-region .modal-choices { margin: 0; padding-left: 1.5rem; border-left: 2px solid var(--svea-color-border); }