/* Aalborg Terapi — shared styles */

:root {
  --bg: #E8E2D9;
  --green: #1F3D36;
  --brown: #3A2E24;
  --line: #A8A4A0;
  --tint: #DED7CB;
  --cognac: #7A4E2C;
  --section-brown: #3A2E24;
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  font-family: Inter, sans-serif;
  color: var(--brown);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--brown); }
h1, h2, h3, h4, p, a { overflow-wrap: break-word; }
[id] { scroll-margin-top: 120px; }
img { max-width: 100%; }
::selection { background: var(--green); color: var(--bg); }

/* Mobile / narrow variants toggled per-section (icon grid vs. text list) */
[data-wide-only] { display: block; }
[data-narrow-only] { display: none; }
@media (max-width: 720px) {
  /* !important needed: these elements also carry an inline display:block/grid */
  [data-wide-only] { display: none !important; }
  [data-narrow-only] { display: grid !important; }
}

/* Header / hamburger menu (home page) */
[data-burger] { display: none; }
@media (max-width: 860px) {
  [data-hero-col] { align-items: flex-start !important; }
  [data-hero-col] > div, [data-hero-row] > div { max-width: 100% !important; }
  [data-burger] { display: flex !important; }
  [data-nav] {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch !important;
    flex-wrap: nowrap; gap: 4px !important;
    padding: 14px clamp(24px,5vw,80px) 22px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px -28px rgba(58,46,36,0.5);
  }
  [data-nav] { display: none !important; }
  [data-nav][data-open="true"] { display: flex !important; }
  [data-nav] a { padding: 14px 4px; font-size: 17px !important; border-bottom: 1px solid var(--line); }
  [data-nav] a:last-child { margin-top: 12px; text-align: center; border-bottom: none; padding: 15px 26px !important; }
}
@media (max-width: 640px) {
  [data-brand-mark] { width: 60px !important; height: 60px !important; }
  [data-brand-mark] img { width: 48px !important; height: 48px !important; }
  [data-brand-name] { font-size: 19px !important; }
}
@media (max-width: 400px) {
  [data-brand-mark] { width: 50px !important; height: 50px !important; }
  [data-brand-mark] img { width: 40px !important; height: 40px !important; }
  [data-brand-name] { font-size: 17px !important; }
  [data-nav] a { font-size: 14px !important; }
  [data-hero-badge] p { white-space: normal !important; }
}

/* Hover utility classes (equivalents of the design tool's per-element hover styles) */
.hover-fill-green:hover { background: var(--green); color: var(--bg); }
.hover-fill-brown:hover { background: var(--brown); }
.hover-fill-tint:hover { background: var(--tint); }
.hover-fill-bg-green:hover { background: var(--bg); color: var(--green); }
.hover-fill-bg-brown:hover { background: var(--bg); color: var(--brown); }
.hover-underline:hover { text-decoration: underline; }

/* "Sådan er et forløb hos mig" — process step connector line + arrow */
#forloeb .proc-step { position: relative; }
#forloeb .proc-step::before {
  content: ''; position: absolute; top: calc(clamp(54px,7vw,78px) / 2);
  height: 1px; background: rgba(192,154,107,0.4); z-index: 0;
}
#forloeb .proc-step::after {
  content: '›'; position: absolute; top: calc(clamp(54px,7vw,78px) / 2); right: -20px;
  transform: translateY(-50%); font-size: 17px; line-height: 1; color: #C09A6B; z-index: 2;
}
#forloeb .proc-step--first::before { left: 50%; right: -16px; }
#forloeb .proc-step--mid::before { left: -16px; right: -16px; }
#forloeb .proc-step--last::before { left: -16px; right: 50%; }
#forloeb .proc-step--last::after { content: none; }