/* Avis-skabelonen. Kun CSS-variabler — hver avis sætter dem i /gfx/{alias}/brand.css. */
:root {
    --av-bg: #ffffff;
    --av-ink: #1b1f24;
    --av-accent: #1a5fb4;
    --av-signal: #c01c28;
    --av-line: #e5e5e5;
    --av-surface: #f6f6f6;
    --av-font-head: Georgia, "Times New Roman", serif;
    --av-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
    --av-radius: 10px;
}

/* ============================================================================
   Avis-rammen (AvisLayout) og forside-mønstrene (AvisForside). Porteret fra Delr's voresmidtfyn.css.

   Alt nedenfor er scopet under .av (layoutets rod), så stilarket aldrig rammer andre sites eller
   layouts på samme host. Ingen faste farver eller fonte: kun --av-*-variablerne; afledte nuancer
   blandes med color-mix. Fonte, der ikke er systemfonte, erklærer avisen selv i brand.css.
   ============================================================================ */

.av {
  background: var(--av-bg);
  color: var(--av-ink);
  font-family: var(--av-font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.av h1, .av h2, .av h3, .av h4, .av .av-title {
  font-family: var(--av-font-head);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.15;
  color: var(--av-ink);
}

.av a { color: var(--av-accent); }
.av a:hover { color: color-mix(in srgb, var(--av-accent) 80%, var(--av-ink)); }

.av :focus-visible { outline: 3px solid var(--av-accent); outline-offset: 2px; }
/* FocusOnNavigate flytter fokus til h1 (tabindex=-1) ved navigation — til skærmlæsere, ingen ring. */
.av h1:focus-visible, .av [tabindex="-1"]:focus-visible { outline: none; }

.av .av-container { max-width: 76rem; margin: 0 auto; padding: 0 1rem; }

.av .av-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1100;
  background: var(--av-ink); color: var(--av-bg); padding: .6rem 1rem; font-weight: 700;
}
.av .av-skip:focus { left: 0; color: var(--av-bg); }

/* ---- Knap ------------------------------------------------------------------ */

.av .av-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: .55rem 1.15rem;
  border-radius: calc(var(--av-radius) * .6); border: 0;
  background: var(--av-accent); color: var(--av-bg);
  font-family: var(--av-font-body); font-weight: 700; font-size: .95rem;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s;
}
.av .av-btn:hover { background: color-mix(in srgb, var(--av-accent) 80%, var(--av-ink)); color: var(--av-bg); }
.av .av-btn--ghost { background: transparent; color: var(--av-accent); box-shadow: inset 0 0 0 2px var(--av-accent); }
.av .av-btn--ghost:hover { background: var(--av-accent); color: var(--av-bg); }

/* ---- Toplinje -------------------------------------------------------------- */

.av .av-topbar { background: var(--av-ink); color: color-mix(in srgb, var(--av-bg) 88%, transparent); font-size: .85rem; }
.av .av-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.25rem; }
.av .av-topbar__wx { white-space: nowrap; }
@media (max-width: 36rem) { .av .av-topbar__wx { display: none; } }
.av .av-topbar__utils { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; }
.av .av-topbar a, .av .av-topbar__login {
  color: var(--av-bg); text-decoration: none; font-weight: 500; font-size: .85rem;
  background: none; border: 0; padding: .35rem 0; cursor: pointer;
}
.av .av-topbar a:hover, .av .av-topbar__login:hover { color: var(--av-bg); text-decoration: underline; }

/* ---- Header og masthead ---------------------------------------------------- */

.av .av-header { background: var(--av-bg); border-bottom: 1px solid var(--av-line); }

.av .av-masthead { text-align: center; padding: 1.25rem 1rem .75rem; border-bottom: 3px double var(--av-line); }
.av .av-masthead__logo { display: inline-block; line-height: 0; }
.av .av-masthead__logo img { height: 56px; width: auto; max-width: 90vw; }
.av .av-masthead__tagline { font-family: var(--av-font-head); font-style: italic; margin: .35rem 0 0; }
.av .av-masthead__date { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: color-mix(in srgb, var(--av-ink) 65%, transparent); margin: .25rem 0 0; }

.av .av-navrow { display: flex; align-items: center; gap: 1rem; }
.av .av-nav { flex: 1 1 auto; min-width: 0; }
.av .av-nav__items { display: flex; gap: .15rem; margin: 0; padding: 0; list-style: none; }

.av .av-nav__items a, .av .av-dd > summary {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 3rem; padding: .5rem .75rem;
  color: var(--av-ink); font-weight: 700; font-size: .98rem;
  text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent;
}
.av .av-nav__items a:hover, .av .av-dd > summary:hover { color: var(--av-accent); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--av-accent) 40%, transparent); }
/* Aktivt punkt: understreget i accentfarven — samme placering som hover, men fuld styrke. */
.av .av-nav__items .is-active > a,
.av .av-nav__items .is-active > .av-dd > summary { color: var(--av-accent); box-shadow: inset 0 -3px 0 var(--av-accent); }

.av .av-navrow .av-btn { flex: none; min-height: 2.4rem; padding: .4rem 1rem; font-size: .9rem; }

/* Søgefeltet står yderst til højre i menurækken. */
.av .av-search { display: flex; flex: 0 1 16rem; min-width: 0; }
.av .av-search input {
  flex: 1 1 auto; min-width: 0; min-height: 2.4rem;
  padding: .4rem .8rem; border: 1.5px solid var(--av-line); border-right: 0;
  border-radius: calc(var(--av-radius) * .6) 0 0 calc(var(--av-radius) * .6); background: var(--av-surface);
  font: inherit; font-size: .9rem; color: var(--av-ink);
}
.av .av-search input:focus { outline: none; border-color: var(--av-accent); background: var(--av-bg); }
.av .av-search button {
  flex: none; width: 2.6rem; border: 0; border-radius: 0 calc(var(--av-radius) * .6) calc(var(--av-radius) * .6) 0;
  background: var(--av-accent); color: var(--av-bg); font-size: .95rem;
}
.av .av-search button:hover { background: color-mix(in srgb, var(--av-accent) 80%, var(--av-ink)); }

/* Dropdown: <details>/<summary>, så den virker uden JS og for bots. */
.av .av-dd { position: relative; }
.av .av-dd > summary { cursor: pointer; list-style: none; }
.av .av-dd > summary::-webkit-details-marker { display: none; }
.av .av-dd > summary::after {
  content: ""; width: .4em; height: .4em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
}
.av .av-dd[open] > summary::after { transform: translateY(.1em) rotate(-135deg); }
.av .av-dd__list {
  position: absolute; top: 100%; left: 0; z-index: 1030;
  min-width: 13rem; margin: 0; padding: .35rem; list-style: none;
  background: var(--av-bg); border: 1px solid var(--av-line); border-radius: calc(var(--av-radius) * .6);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--av-ink) 14%, transparent);
}
.av .av-dd__list a { display: block; min-height: 0; padding: .5rem .7rem; font-weight: 500; box-shadow: none; }
.av .av-dd__list a:hover { background: var(--av-surface); box-shadow: none; }

@media (max-width: 52rem) {
  .av .av-masthead { padding: .9rem 0 .6rem; }
  .av .av-masthead__logo img { height: 40px; }
  .av .av-navrow { flex-wrap: wrap; gap: 0; }
  .av .av-nav { flex: 1 1 100%; overflow-x: auto; margin: 0 -1rem; padding: 0 1rem; }
  .av .av-nav__items a, .av .av-dd > summary { min-height: 2.75rem; padding: .45rem .6rem; }
  .av .av-navrow .av-btn { display: none; } /* knappen står i forsidens tip-boks på små skærme */
  .av .av-search { flex: 1 1 100%; padding: .5rem 0 .75rem; }
  /* Menuen scroller vandret og ville klippe en svævende dropdown: fold den ud på stedet. */
  .av .av-dd__list { position: static; box-shadow: none; }
}

/* ---- Main ------------------------------------------------------------------ */

/* height:auto + overflow:visible overskriver Blazor.Bootstraps globale main{height:100vh;overflow-x:hidden}.
   min-height holder footeren nede mens hydreringen udskifter <main>-undertræet (som ryslinge.css). */
.av .av-main { padding: 2rem 0 3.5rem; min-height: 100vh; height: auto; overflow: visible; }
.av .av-main:focus { outline: none; }

/* ---- Footer ---------------------------------------------------------------- */

.av .av-footer {
  margin-top: 2rem; padding: 2.5rem 0 1.25rem;
  background: var(--av-ink); color: color-mix(in srgb, var(--av-bg) 86%, transparent);
}

.av .av-footer__grid {
  /* auto-fit kan ikke kombineres med en fr-kolonne, så "om"-kolonnen fylder i stedet to spor. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2rem; margin-bottom: 2rem;
}
.av .av-footer__about { grid-column: span 2; }
.av .av-footer__logo { height: 40px; width: auto; max-width: 100%; display: block; margin-bottom: .9rem; }
.av .av-footer__about p { max-width: 34ch; margin: 0; font-size: .95rem; line-height: 1.6; }
.av .av-footer__head {
  font-family: var(--av-font-body); font-size: .95rem; font-weight: 800; letter-spacing: 0;
  color: var(--av-bg); margin: 0 0 .7rem;
}
.av .av-footer ul { margin: 0; padding: 0; list-style: none; }
.av .av-footer li { margin-bottom: .4rem; }
.av .av-footer a { color: color-mix(in srgb, var(--av-bg) 86%, transparent); text-decoration: none; font-size: .95rem; }
.av .av-footer a:hover { color: var(--av-bg); text-decoration: underline; }

/* Kolofonen (#72): diskret række over bundlinjen — samme lille, dæmpede tekst som bundlinjen. */
.av .av-footer__colophon {
  padding: 1.1rem 0; border-top: 1px solid color-mix(in srgb, var(--av-bg) 18%, transparent);
  font-size: .85rem; line-height: 1.6; color: color-mix(in srgb, var(--av-bg) 70%, transparent);
}
.av .av-footer .av-footer__colophon a { font-size: .85rem; }
.av .av-footer__colophon + .av-footer__bottom { padding-top: 1.1rem; }

.av .av-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--av-bg) 18%, transparent);
  font-size: .85rem; color: color-mix(in srgb, var(--av-bg) 70%, transparent);
}
.av .av-footer__nabolo { line-height: 0; }
.av .av-footer__nabolo img { height: 28px; width: auto; }

@media (max-width: 52rem) {
  .av .av-footer__grid { grid-template-columns: 1fr 1fr; }
  .av .av-footer__about { grid-column: 1 / -1; }
}

/* ============================================================================
   Forsiden
   ============================================================================ */

.av .av-front { display: grid; gap: 3rem; }

/* Metalinje: sektion i accentfarven + tid i grå. Mellemrum, ingen prik-separator. */
.av .av-meta { display: flex; flex-wrap: wrap; gap: .2rem .7rem; font-size: .82rem; color: color-mix(in srgb, var(--av-ink) 70%, var(--av-bg)); }
.av .av-meta__section { color: var(--av-accent); font-weight: 700; }

.av .av-h2 { font-size: 1.5rem; margin: 0; }

.av .av-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.av .av-sechead a { font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.av .av-sechead a:hover { text-decoration: underline; }

/* Tophistorie + "Også i dag" ------------------------------------------------- */

.av .av-lead { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }

.av .av-lead__link { display: block; color: inherit; text-decoration: none; }
.av .av-lead__img { aspect-ratio: 3 / 2; overflow: hidden; border-radius: calc(var(--av-radius) * .4); background: var(--av-surface); margin-bottom: 1rem; }
.av .av-lead__img img, .av .av-lead__img picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.av .av-lead__title {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); font-weight: 700; line-height: 1.04;
  letter-spacing: -.015em; margin: .45rem 0 .7rem; max-width: 20ch; text-wrap: balance;
}
.av .av-lead__link:hover .av-lead__title { color: var(--av-accent); }
.av .av-lead__summary { font-size: 1.15rem; line-height: 1.5; color: color-mix(in srgb, var(--av-ink) 70%, var(--av-bg)); margin: 0; max-width: 60ch; }

.av .av-lead__side { border-top: 4px solid var(--av-ink); padding-top: .9rem; }
.av .av-headlines { list-style: none; margin: .4rem 0 0; padding: 0; }
.av .av-headlines li + li { border-top: 1px solid var(--av-line); }
.av .av-headlines a { display: grid; gap: .3rem; padding: .95rem 0; color: inherit; text-decoration: none; }
.av .av-headlines__title { font-family: var(--av-font-head); font-weight: 600; font-size: 1.28rem; line-height: 1.2; text-wrap: pretty; }
.av .av-headlines a:hover .av-headlines__title { color: var(--av-accent); }

/* Kalender-striben --------------------------------------------------------- */

.av .av-cal { background: var(--av-surface); border-radius: calc(var(--av-radius) * .6); padding: 1.4rem 1.4rem 1.2rem; }
.av .av-cal__list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none;
}
.av .av-cal__item { display: flex; gap: .9rem; align-items: flex-start; padding: .55rem 0; color: inherit; text-decoration: none; }
.av .av-cal__date {
  flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem;
  border-radius: calc(var(--av-radius) * .4); background: var(--av-signal); color: var(--av-bg); line-height: 1;
}
.av .av-cal__date .d { font-family: var(--av-font-head); font-weight: 700; font-size: 1.45rem; }
.av .av-cal__date .m { font-size: .72rem; font-weight: 700; margin-top: -.6rem; }
.av .av-cal__body { display: grid; gap: .15rem; min-width: 0; }
.av .av-cal__title { font-weight: 700; line-height: 1.25; }
.av .av-cal__item:hover .av-cal__title { color: var(--av-accent); text-decoration: underline; }
.av .av-cal__when { font-size: .85rem; color: color-mix(in srgb, var(--av-ink) 70%, var(--av-bg)); }
.av .av-cal__when::first-letter { text-transform: uppercase; }

/* Seneste nyt --------------------------------------------------------------- */

.av .av-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.av .av-teaser a { display: grid; gap: .45rem; color: inherit; text-decoration: none; }
.av .av-teaser__img { aspect-ratio: 3 / 2; overflow: hidden; border-radius: calc(var(--av-radius) * .4); background: var(--av-surface); }
.av .av-teaser__img img, .av .av-teaser__img picture { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Uden billede: en stille flade i avisens accentfarve. */
.av .av-teaser__noimg {
  display: block; width: 100%; height: 100%;
  background:
    radial-gradient(120% 60% at 30% 105%, color-mix(in srgb, var(--av-accent) 30%, var(--av-surface)) 49.5%, transparent 50%),
    var(--av-surface);
}
.av .av-teaser__title { font-size: 1.15rem; font-weight: 600; line-height: 1.22; margin: 0; text-wrap: pretty; }
.av .av-teaser a:hover .av-teaser__title { color: var(--av-accent); }

/* Tip-boks ------------------------------------------------------------------- */

.av .av-tip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
  padding: 1.6rem 1.6rem; border-radius: calc(var(--av-radius) * .6); background: var(--av-surface);
}
.av .av-tip p { margin: .4rem 0 0; max-width: 58ch; color: color-mix(in srgb, var(--av-ink) 70%, var(--av-bg)); }
.av .av-tip__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Tom forside ------------------------------------------------------------------ */

.av .av-empty { max-width: 40rem; padding: 3rem 0; }
.av .av-empty h1 { font-size: 2.4rem; margin: 0 0 .75rem; }
.av .av-empty p { color: color-mix(in srgb, var(--av-ink) 70%, var(--av-bg)); margin-bottom: 1.25rem; }

@media (max-width: 62rem) {
  .av .av-lead { grid-template-columns: 1fr; gap: 1.75rem; }
  .av .av-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 36rem) {
  .av .av-front { gap: 2.25rem; }
  .av .av-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .av .av-cal { padding: 1.1rem 1rem; }
}

/* Hovedspalte + Navne ---------------------------------------------------------- */
.av .av-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.av .av-names ul { list-style: none; margin: 0; padding: 0; }
.av .av-names li a { color: inherit; text-decoration: none; font-family: var(--av-font-head); font-weight: 600; line-height: 1.25; }
.av .av-names li a:hover { color: var(--av-accent); }
.av .av-names { background: var(--av-surface); border-radius: calc(var(--av-radius) * .6); padding: 1.2rem; display: grid; gap: .8rem; align-content: start; }
.av .av-names li + li { border-top: 1px solid var(--av-line); padding-top: .6rem; margin-top: .6rem; }
/* Uden "Flere nyheder" står sidespalten alene i fuld bredde. */
.av .av-split--single { grid-template-columns: minmax(0, 1fr); }
.av .av-aside { display: grid; gap: 1.5rem; align-content: start; }
/* Mest læste (Recommendations.MostRead) indlejret: overskriften som forsidens øvrige. */
.av .av-mostread h2 { font-size: 1.5rem; margin: 0 0 .6rem; }
.av .av-mostread:empty { display: none; }

/* Guide-indgange ---------------------------------------------------------------- */
.av .av-guide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.av .av-guide__card { display: grid; align-content: end; gap: .2rem; min-height: 7rem; padding: 1rem; border-radius: calc(var(--av-radius) * .6); color: var(--av-bg); text-decoration: none; }
.av .av-guide__card b { font-family: var(--av-font-head); font-size: 1.3rem; }
.av .av-guide__card span { font-size: .85rem; opacity: .9; }
.av .av-guide__card:hover { color: var(--av-bg); }
.av .av-guide__card:hover b { text-decoration: underline; }
/* Fire flader afledt af brandfarverne (VoresMidtfyns --skov/--soe/--eng/--muld). */
.av .av-guide__card--accent { background: var(--av-accent); }
.av .av-guide__card--deep { background: color-mix(in srgb, var(--av-accent) 60%, var(--av-ink)); }
.av .av-guide__card--signal { background: var(--av-signal); }
.av .av-guide__card--ink { background: var(--av-ink); }

/* Annoncerækker */
.av .av-adrow { display: grid; justify-items: center; }
.av .av-adrow:empty { display: none; }

/* Placeret efter basisreglerne, så de vinder */
@media (max-width: 62rem) {
  .av .av-split { grid-template-columns: 1fr; }
  .av .av-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}