/* Design guide: Familjen Grotesk font with Medium for most text; Regular for long text blocks. */

/* Base font classes */
.mf-font { font-family: 'Familjen Grotesk', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.mf-text { font-weight: 500; }
.mf-text-long { font-weight: 400; }

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
  /* Prevent layout shift caused by scrollbar appearing/disappearing between pages */
  scrollbar-gutter: stable;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin: 0;
}

/* HTML Editor (WYSIWYG rich text editor) */
.html-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}

.html-editor-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: #374151;
  transition: background-color 0.1s, border-color 0.1s;
}

.html-editor-toolbar button:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
}

.html-editor-toolbar button.active {
  background: #d1fae5;
  border-color: #31484e;
  color: #31484e;
}

.html-editor-toolbar .separator {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: #d1d5db;
}

.html-editor-content {
  min-height: 320px;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 0 0 6px 6px;
  background: white;
  outline: none;
  line-height: 1.6;
  font-size: 14px;
  color: #1d1e22;
}

.html-editor-content:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px #31484e;
}

.html-editor-content ul {
  list-style: disc;
  padding-left: 1.5em;
  margin: 0.25em 0;
}

.html-editor-content ol {
  list-style: decimal;
  padding-left: 1.5em;
  margin: 0.25em 0;
}

.html-editor-content a {
  color: #31484e;
  text-decoration: underline;
}

.html-editor-content p {
  margin: 0 0 0.75em 0;
}

.html-editor-content p:last-child {
  margin-bottom: 0;
}

/* Media image picker dialog (reusable folder-browsing picker) */
/* Choosing a picture is a job that needs to see many pictures at once, so the picker takes the
   whole area beside the menu — the same shape as the section editor (handoff.md §5.1) — rather
   than the 900px box it used to be. Positioned rather than sized: Tailwind's preflight resets
   margin on every element, which overrides the UA's `margin: auto` for a modal dialog and left it
   pinned to the top-left corner instead of centred. */
.media-picker-dialog {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  border: none;
  border-radius: 0;
  /* Head, toolbar, body and footer each with its own padding and rule; only the body scrolls, so
     the footer's Fortsæt stays in reach. */
  padding: 0;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

@media (min-width: 1024px) {
  /* Leave the sidebar uncovered: 16rem is the shell's sidebar track in _Layout.cshtml. */
  .media-picker-dialog {
    left: 16rem;
  }
}

.media-picker-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* The focus-point step (step 2 of the image field, _MediaImageField.cshtml).
   Same trap as the picker above: Tailwind's preflight resets the margin on every element, which
   overrides the UA's `margin: auto` for a modal dialog and pinned this one to the top-left corner
   of the screen. Unlike the picker this one is a box rather than a full-bleed pane, so it is
   centred rather than positioned — and capped, so a short screen does not push the footer's
   "Brug billedet" out of reach. */
.media-field-focus {
  margin: auto;
  max-height: calc(100vh - 3rem);
}

/* Head and footer stay put, the picture and its formats scroll between them.
   Only when open — an author `display` beats the UA's `dialog:not([open]) { display: none }`, so an
   unqualified rule here would leave the dialog on screen after it had closed. */
.media-field-focus[open] {
  display: flex;
  flex-direction: column;
}

.media-field-focus-body {
  min-height: 0;
  overflow-y: auto;
}

/* HTML editor link insert/edit dialog */
.html-editor-link-dialog {
  width: min(440px, 92vw);
  border: none;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.html-editor-link-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.media-picker-dialog .mip-body {
  min-height: 240px;
}

/* The dialog is a column: head and toolbar at the top, actions at the bottom, and the folder tree
   and the pictures filling everything between them.
   Only when open — an author `display` beats the UA's `dialog:not([open]) { display: none }`, so
   an unqualified rule here left the picker on screen after it had closed. */
.media-picker-dialog[open] {
  display: flex;
  flex-direction: column;
}

.media-picker-dialog .mip-split {
  min-height: 0;
  flex: 1;
}

.html-editor-content h2 {
  margin: 0 0 0.75em 0;
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.3;
  color: #1d1e22;
}

.html-editor-content h2:last-child {
  margin-bottom: 0;
}

/* Bold vs. strong: the brand font only ships 400/500, so weight alone cannot
   distinguish them. <b> stays plain bold; <strong> is emphasised with the brand
   colour so it reads "more highlighted" — mirroring the public site. */
.html-editor-content b {
  font-weight: 700;
}

.html-editor-content strong {
  font-weight: 700;
  color: #31484e;
}

.html-editor-content h3 {
  margin: 0 0 0.75em 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

.html-editor-content h3:last-child {
  margin-bottom: 0;
}

/* The shared list's columns. A row is a stacked flex line on a phone and a grid from md up, where
   the fixed-width status, date and action columns actually fit (see _ListTable.cshtml). The card
   itself never scrolls sideways — that would clip the row menus. */
@media (min-width: 768px) {
  [data-list-header],
  [data-list-row] {
    grid-template-columns: var(--list-grid);
  }
}

/* Stacked on a phone: the name takes the line, and everything after it sits under it. */
@media (max-width: 767px) {
  [data-list-row] > * {
    flex: 0 0 auto;
  }

  [data-list-row] > [data-list-name] {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* A FAQ question is rich text, so it arrives wrapped in a <p>. Inside a row it should read as one
   line, not as a paragraph with margins of its own. */
.faq-question p {
  margin: 0;
  display: inline;
}

/* The sidebar scrolls itself when the menu is taller than the window. Left alone it gets the
   browser's light scrollbar, which sits as a pale stripe down the dark green — so it is given the
   sidebar's own colours: the track disappears into the background and the thumb is one step
   lighter, visible only while there is something to scroll. */
[data-sidebar] {
  scrollbar-width: thin;
  scrollbar-color: #3c6f7e #273940; /* mf-darkgreen-500 thumb on mf-darkgreen-700 track */
}

[data-sidebar]::-webkit-scrollbar {
  width: 8px;
}

[data-sidebar]::-webkit-scrollbar-track {
  background: #273940;
}

[data-sidebar]::-webkit-scrollbar-thumb {
  background: #3c6f7e;
  border-radius: 4px;
}

[data-sidebar]::-webkit-scrollbar-thumb:hover {
  background: #638d98;
}

/* The list look, in one place. _ListTable is the list every screen should use, but three screens
   have rows you type in rather than records with row actions — redirects, a FAQ's questions, an
   image's crops — and they had the band and row styling copied out of it word for word. The
   structure differs there (their own columns, their own cells); only the look is shared, so only
   the look lives here.

   Written as plain declarations, not @apply: site.css is served straight to the browser and is
   never processed by Tailwind, so @apply here would silently do nothing. The colours come from the
   @theme block in _Layout, which Tailwind emits as real custom properties on :root. */
.mf-column-band {
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-mf-coolgrey-300);
  background: var(--color-mf-iceblue-50);
  padding: 0.625rem 1rem;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-mf-blackish-500);
}

.mf-row {
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-mf-blackish-50);
  padding: 0.75rem 1rem;
}

.mf-row:last-child {
  border-bottom: 0;
}

/* One field look, for the inputs and selects that _TextInput does not cover — a select, a number
   with its own width, a field inside a row. The same class string stood written out 64 times
   across 30 screens, so changing the focus ring or the border meant finding all of them.
   Width stays a utility on the element: a field is w-full or w-24 depending on what it holds. */
.mf-field {
  border-radius: 0.375rem;
  border: 1px solid var(--color-mf-coolgrey-400);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-mf-blackish-900);
  background: #fff;
}

.mf-field:focus {
  border-color: var(--color-mf-darkgreen-500);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-mf-iceblue-300);
}