/* SODJA v10: scoped responsive navigation and consistent public-page spacing. */

:root:not(.hc) {
  --primary:#0969b4;
  --primary-foreground:#fff;
  --success:#087f5b;
  --success-foreground:#fff;
  --navy:#071b30;
  --surface:#f5f8fc;
}

.container-page {
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding-inline:clamp(16px,3vw,40px);
}

.sodja-header {
  background:var(--background);
}

.sodja-header > .container-page {
  height:auto;
  min-height:80px;
  gap:20px;
}

.sodja-header > .container-page > a {
  min-width:0;
  flex:1;
}

.sodja-header > .container-page > a span {
  white-space:normal;
  overflow-wrap:anywhere;
}

.sodja-header a,
.sodja-header button {
  line-height:1.5;
}

/* Mobile / tablet */
.sodja-header > .container-page > nav {
  display:none;
}

.sodja-header > .container-page > div:nth-child(3) {
  display:none;
}

.sodja-header > .container-page > div:last-child {
  display:flex;
  flex-shrink:0;
}

/* Desktop: two-row header */
@media(min-width:1200px) {
  .sodja-header > .container-page {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    align-items:center;
    padding-top:16px;
    padding-bottom:12px;
    gap:12px 28px;
  }

  .sodja-header > .container-page > a {
    grid-column:1;
    grid-row:1;
    max-width:440px;
  }

  .sodja-header > .container-page > div:nth-child(3) {
    display:flex;
    grid-column:2;
    grid-row:1;
    gap:10px;
  }

  .sodja-header > .container-page > nav {
    display:block;
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    border-top:1px solid var(--border);
    padding-top:12px;
  }

  .sodja-header > .container-page > nav > ul {
    display:flex;
    flex-wrap:wrap;
    gap:8px 12px;
  }

  .sodja-header > .container-page > nav > ul > li {
    flex-shrink:0;
  }

  .sodja-header > .container-page > nav a {
    display:block;
    padding:9px 14px;
  }

  .sodja-header > .container-page > div:last-child {
    display:none;
  }
}

@media(max-width:479px) {
  .sodja-header > .container-page > a {
    gap:8px;
  }

  .sodja-header > .container-page > a > span > span:last-child {
    font-size:10px;
  }

  .sodja-header > .container-page {
    gap:8px;
    padding-block:12px;
  }
}

#main-content > .container-page {
  padding-top:clamp(28px,4vw,56px);
  padding-bottom:clamp(32px,4vw,56px);
}

#main-content section {
  scroll-margin-top:150px;
}

#main-content form {
  line-height:1.6;
}

#main-content form input:not([type=checkbox]):not([type=file]),
#main-content form select {
  min-height:44px;
}

footer p:empty {
  display:none;
}

.sodja-reader {
  padding:12px 0;
  font-size:13px;
  border-top:1px solid var(--border);
}

.sodja-reader h3 {
  font-weight:700;
  margin-bottom:8px;
}

.sodja-reader select {
  display:block;
  width:100%;
  margin:6px 0 10px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--background);
  color:var(--foreground);
}

.sodja-reader p {
  margin-top:8px;
  line-height:1.5;
}

.sodja-reader-actions {
  display:flex;
  gap:6px;
}

.sodja-reader-actions button {
  flex:1;
  border:1px solid var(--border);
  border-radius:6px;
  padding:8px 4px;
  background:var(--background);
  color:var(--foreground);
}

.sodja-reader-actions button:disabled {
  opacity:.45;
}

.sodja-reader-actions button:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:2px;
}

.sodja-gender-bars {
  display:flex;
  height:190px;
  align-items:flex-end;
  justify-content:center;
  gap:32px;
  margin-top:20px;
}

.sodja-gender-bar {
  display:flex;
  flex:1;
  max-width:110px;
  align-items:center;
  flex-direction:column;
  gap:8px;
  font-size:13px;
}

.sodja-gender-bar > div {
  width:100%;
  border-radius:6px 6px 0 0;
}