/* Anne-Kirstine — Strongly Typed (Warm & Editorial) — minimal, safe, high-specificity */
/* Load AFTER assets/css/main.css */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500&family=Raleway:wght@600;700&family=JetBrains+Mono:wght@300;400&display=swap');

/* --- Base colors & fonts (do NOT touch structure lines/box-shadows) --- */
html body{
  background:#FFF9F5 !important;
  color:#2B2A27 !important;
  font-family:"Lato",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  line-height:1.6;
}

/* Headings: only change font family/weight, keep size/uppercase/shadow from theme */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6{
  font-family:"Raleway", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight:700 !important;
  color:#2B2A27;
}

/* Hero title color (keep original text-shadow & transform) */
html body #header h1{ color:#9C6644 !important; }

/* Links */
html body a{ color:#9C6644 !important; }
html body a:hover{ color:#3B2418 !important; }

/* Nav round "pills" and active label color */
html body #nav > ul > li > a:before{ background:#E7BFB0 !important; color:#2B2A27 !important; }
html body #nav > ul > li.active > a:before,
html body #nav > ul > li:hover > a:before{ background:#9C6644 !important; color:#fff !important; }
html body #nav > ul > li.active > a > span,
html body #nav > ul > li:hover  > a > span{ color:#9C6644 !important; }

/* Buttons (keep theme spacing/uppercase) */
html body .button,
html body input[type="button"],
html body input[type="submit"],
html body input[type="reset"],
html body button{
  background:#9C6644 !important;
  color:#fff !important;
  border-color:#3B2418 !important;
}
html body .button:hover,
html body input[type="button"]:hover,
html body input[type="submit"]:hover,
html body input[type="reset"]:hover,
html body button:hover{
  filter:brightness(.97);
}
/* Ghost/alt */
html body .button.alt{
  background:transparent !important;
  color:#9C6644 !important;
  border:1px solid #9C6644 !important;
}
html body .button.alt:hover{ background:rgba(156,102,68,.08) !important; }

/* Small UI details */
html body ul.icons > li:before{ background:#9C6644 !important; color:#fff !important; }

/* Forms (subtle warm field background, preserve borders/shadows) */
html body form input[type="text"],
html body form input[type="email"],
html body form input[type="password"],
html body form select,
html body form textarea{
  background:#F4ECE6;
}
html body form input[type="text"]:focus,
html body form input[type="email"]:focus,
html body form input[type="password"]:focus,
html body form select:focus,
html body form textarea:focus{
  background:#fff;
  outline:2px solid #E7BFB0;
}

/* Code/labels */
html body code, html body kbd, html body pre, html body .tag{
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Utility for manual centering when needed */
.align-center, .center { text-align:center !important; }

/* Centrer knap + ekstra luft til teksten i footeren */
#footer .contact-cta { text-align: center; }
#footer .contact-cta .button { display: inline-block; margin: 0 auto; }
#footer .contact-cta .cta-hint { margin-top: 0.9rem; } /* “en ekstra linje” luft */


/* Footer CTA: centrér knap + tekst og giv pæn linjelængde */
#footer .contact-cta { text-align: center; }

#footer .contact-cta .button {
  display: inline-block;
  margin: 0 auto;
  min-width: 220px;            /* valgfrit */
}

#footer .contact-cta .cta-hint{
  text-align: center;          /* tving center, hvis temaet sætter venstre */
  max-width: 36ch;             /* pæn kort linje under knappen */
  margin: 1.1rem auto 0;       /* “en ekstra linje” luft og centrer blokken */
}

/* valgfrit: gør mail-linket tydeligt men sobert */
#footer .contact-cta .cta-hint a{
  text-decoration: underline;
}

/* Bogreolen tabel */
.book-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.book-table thead th {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  border-bottom: 2px solid rgba(0,0,0,0.1);
  padding: 0.75rem 0.75rem;
}
.book-table td {
  vertical-align: top;
  padding: 0.75rem 0.75rem;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.book-table a { text-decoration: underline; }

.where-list {
  margin: 0;
  padding-left: 1.25rem;
}
.where-list li { margin: 0.15rem 0; }

/* Hjerterating (Font Awesome bruges af temaet i forvejen) */
.rating .fa-heart {
  margin-right: 0.15rem;
  font-size: 1.05rem;
  line-height: 1;
}
.rating .filled { color: var(--ak-accent, #9c6644); } /* skift evt. til din brandfarve */
.rating .empty  { color: rgba(0,0,0,0.2); }

/* Mobilvenlig stack for smalle skærme */
@media (max-width: 720px) {
  .book-table thead { display: none; }
  .book-table, .book-table tbody, .book-table tr, .book-table td { display: block; width: 100%; }
  .book-table tr { margin: 0 0 1rem; padding: 0.75rem; border: 1px solid rgba(0,0,0,0.06); border-radius: 0.5rem; }
  .book-table td { border: 0; padding: 0.25rem 0; }
  .book-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    margin-bottom: 0.15rem;
    opacity: 0.7;
  }
}

/* ====== Brand-farver (tilpas frit) ====== */
:root {
  --ak-accent: #9C6644;        /* varm brun (primær – hjerter, links) */
  --ak-accent-dark: #6B3E26;   /* mørkere brun (titelbjælke i thead) */
  --ak-contrast: #ffffff;      /* tekst på mørk baggrund */
  --ak-surface: #F8F5F2;       /* lys flade under tabel */
  --ak-border: rgba(0,0,0,0.08);
  --ak-muted: rgba(0,0,0,0.2);
}

/* Valgfri: diskret accent på seksjoner */
.accent-title {
  position: relative;
  display: inline-block;
}
.accent-title::after {
  content: "";
  display: block;
  height: 3px;
  width: 60%;
  background: var(--ak-accent);
  margin-top: 6px;
  border-radius: 3px;
}

/* ====== Tabel-ramme og flade ====== */
.table-wrapper {
  background: var(--ak-surface);
  border: 1px solid var(--ak-border);
  border-radius: 12px;
  overflow: hidden; /* så thead-bjælken og kanter ser skarpe ud */
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

/* ====== Tabel ====== */
.book-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

/* Titelbjælke (thead) */
.book-table thead th {
  background: var(--ak-accent-dark);
  color: var(--ak-contrast);
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 0.85rem 0.9rem;
  border-bottom: none;
  white-space: nowrap;
}
.book-table thead th + th {
  border-left: 1px solid rgba(255,255,255,0.14); /* små skillelinjer */
}

/* Celler */
.book-table td {
  vertical-align: top;
  padding: 0.75rem 0.9rem;
  border-top: 1px solid var(--ak-border);
}

/* Striped rows + hover */
.book-table tbody tr:nth-child(odd) {
  background: rgba(156, 102, 68, 0.06); /* svag tone af --ak-accent */
}
.book-table tbody tr:hover {
  background: rgba(156, 102, 68, 0.1);
}

/* Links */
.book-table a { text-decoration: underline; }
.book-table a:hover { text-decoration: none; }

/* Hvor kan den findes / pris – liste */
.where-list { margin: 0; padding-left: 1.25rem; }
.where-list li { margin: 0.15rem 0; }

/* Hjerterating */
.rating .fa-heart {
  margin-right: 0.15rem;
  font-size: 1.05rem;
  line-height: 1;
}
.rating .filled { color: var(--ak-accent); }
.rating .empty  { color: var(--ak-muted); }

/* Mobilvisning: kort-layout med labels */
@media (max-width: 720px) {
  .book-table thead { display: none; }
  .book-table, .book-table tbody, .book-table tr, .book-table td {
    display: block; width: 100%;
  }
  .book-table tr {
    margin: 0 0 1rem;
    padding: 0.75rem;
    border: 1px solid var(--ak-border);
    border-radius: 0.75rem;
    background: #fff;
  }
  .book-table td { border: 0; padding: 0.35rem 0; }
  .book-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    opacity: 0.7;
    margin-bottom: 0.15rem;
  }
}

/* Midlertidig mobil-sikring til tabellen – kan beholdes eller fjernes senere */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* bedre scroll på iOS */
}
.book-table {
  min-width: 760px; /* tving vandret scroll på små skærme, så indholdet ikke klumper */
}
/* ===== GRADE-badges med høj kontrast ===== */
:root {
  /* lys baggrund + tekstfarver */
  --grade-high-bg:    #DBF7E3;  /* blød grøn */
  --grade-high-bd:    #5BBF79;
  --grade-high-fg:    #0B5A2E;

  --grade-mod-bg:     #E6EEFF;  /* blød blå */
  --grade-mod-bd:     #6C8EE6;
  --grade-mod-fg:     #1B3D8C;

  --grade-low-bg:     #FFF1D6;  /* blød amber */
  --grade-low-bd:     #E6B25C;
  --grade-low-fg:     #6B3E00;

  --grade-vlow-bg:    #FFE1E1;  /* blød rød */
  --grade-vlow-bd:    #E67A7A;
  --grade-vlow-fg:    #6B1010;
}

.grade {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .25rem .65rem;
  border-radius: .6rem;
  font-weight: 700;
  font-size: .86rem;
  line-height: 1.2;
  letter-spacing: .01em;
  border: 1px solid transparent;
}

/* lille status-prik foran teksten for hurtig skimming */
.grade::before {
  content: "";
  width: .55rem; height: .55rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: .9;
}

.grade-high {
  background: var(--grade-high-bg);
  border-color: var(--grade-high-bd);
  color: var(--grade-high-fg);
}
.grade-moderate {
  background: var(--grade-mod-bg);
  border-color: var(--grade-mod-bd);
  color: var(--grade-mod-fg);
}
.grade-low {
  background: var(--grade-low-bg);
  border-color: var(--grade-low-bd);
  color: var(--grade-low-fg);
}
.grade-verylow {
  background: var(--grade-vlow-bg);
  border-color: var(--grade-vlow-bd);
  color: var(--grade-vlow-fg);
}

/* Dark-mode varianter – stadig tydelig tekst */
@media (prefers-color-scheme: dark) {
  :root {
    --grade-high-bg:  #0F2D1C;
    --grade-high-bd:  #1E6D44;
    --grade-high-fg:  #B2F1C8;

    --grade-mod-bg:   #0E1B39;
    --grade-mod-bd:   #294EA8;
    --grade-mod-fg:   #CFE0FF;

    --grade-low-bg:   #3A2A0E;
    --grade-low-bd:   #7C5411;
    --grade-low-fg:   #FFE7B8;

    --grade-vlow-bg:  #3A0F12;
    --grade-vlow-bd:  #8E232C;
    --grade-vlow-fg:  #FFC9C9;
  }
}
/* År-filtret i én linje – ingen wrap */
.table-controls .year-range {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}

/* ens bredder på felter, så de står pænt */
.table-controls .year-range input[type="number"] {
  width: 7ch;   /* fast, men lille */
  min-width: 5.5rem; /* hvis du vil have dem lidt større på mobil, fjern denne */
}

/* lille streg mellem felter */
.table-controls .year-range .dash {
  display: inline-block;
  margin: 0 .25rem;
}
/* ===== Artikler – tabelkomponent (flyttet hertil fra inline CSS) ===== */

/* layout for filterlinjen */
#artikler .table-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .75rem;
  margin: 1rem 0 1.25rem;
  align-items: end;
}
#artikler .table-controls label { display: grid; gap: .25rem; font-size: .95rem; }

/* sørg for at inputs ligner dine tema-formfelter, selvom de ikke ligger i <form> */
#artikler .table-controls input[type="search"],
#artikler .table-controls input[type="number"],
#artikler .table-controls select {
  padding: .5rem .6rem;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: .5rem;
  background: #F4ECE6;                 /* matcher dine formularfelter */
}
#artikler .table-controls input[type="search"]:focus,
#artikler .table-controls input[type="number"]:focus,
#artikler .table-controls select:focus {
  background: #fff;
  outline: 2px solid #E7BFB0;          /* samme fokusfarve som i temaet */
}

/* wrapper med kant og radius */
#artikler .table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ak-border);
  border-radius: .75rem;
  background: #fff;
}

/* selve tabellen */
#artikler table { width: 100%; border-collapse: collapse; font-size: .95rem; }

/* sticky titelbjælke (“bjælken for oven”) i dine brandfarver */
#artikler thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left;
  padding: .75rem .6rem;
  background: var(--ak-accent-dark);
  color: var(--ak-contrast);
  letter-spacing: .03em;
  border-bottom: none;
  white-space: nowrap;
}
#artikler thead th + th {
  border-left: 1px solid rgba(255,255,255,0.14);
}

/* celler og rækker */
#artikler tbody td { padding: .7rem .6rem; vertical-align: top; border-bottom: 1px solid var(--ak-border); }

/* små metode-chips */
#artikler .chip {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  font-size: .85rem;
  line-height: 1.6;
  background: #fff;
}

/* detaljer-knap + detaljerække */
#artikler .details-btn {
  padding: .35rem .7rem;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  border-radius: .5rem;
  cursor: pointer;
}
#artikler .details-row td { background: #FCFAF8; }   /* let varm tone */
#artikler .details {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  padding: .5rem .25rem;
}
#artikler .details-col { font-size: .92rem; line-height: 1.4; }

/* note under tabellen */
#artikler .table-footnote { font-size: .9rem; margin-top: .75rem; color: #666; }

/* (du har allerede år-range-reglerne længere oppe i filen) */

/* ===== Forside: prisboks ===== */
.price-box {
  text-align: center;
  line-height: 1.2em;
  margin-top: 1.5em;
}
.price-box-label {
  margin-bottom: 1em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.price-item {
  margin-bottom: 1.2em;
}
.price-item-title {
  display: block;
  font-weight: bold;
}
.price-item small {
  display: block;
  margin-bottom: 0.2em;
}
.price-item-link {
  color: var(--ak-accent);
  text-decoration: underline;
  font-weight: bold;
}
.actions-center {
  justify-content: center;
}

/* ===== Mindre tomt luft i toppen (header/features fra skabelonen er meget rummelige) ===== */
/* #nav er positioneret absolut 3em fra toppen af #header, så der skal være plads til
   nav-rækken (ca. 6-7em), før titlen (h1) starter, ellers overlapper de. */
html body #header > .container {
  padding: 8.5em 0 2.5em 0 !important;
}
html body #features {
  padding: 2.5em 0 4em 0 !important;
}
@media (max-width: 980px) {
  html body #header > .container {
    padding: 9.5em 0 2em 0 !important;
  }
}
@media (max-width: 736px) {
  /* Under 736px viser temaet en hamburger-menu (titleBar) i stedet for #nav, så her kan vi gå længere ned */
  html body #header > .container {
    padding: 3em 0 2em 0 !important;
  }
}

/* ===== Forside: hero-foto ===== */
#hero-photo {
  background: #fff;
  padding: 3em 0;
}
.hero-photo-row {
  display: flex;
  align-items: center;
  gap: 3em;
}
.hero-photo-img {
  width: 280px;
  height: 280px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  flex-shrink: 0;
}
.hero-photo-text {
  text-align: left;
}
.hero-photo-text h2 {
  margin-bottom: 0.5em;
}
@media (max-width: 736px) {
  .hero-photo-row {
    flex-direction: column;
    text-align: center;
    gap: 1.5em;
  }
  .hero-photo-text {
    text-align: center;
  }
  .hero-photo-img {
    width: 200px;
    height: 200px;
  }
}

/* ===== Etik-side: hold det udfyldende billede på rolig størrelse i stedet for fuld bredde ===== */
.image.featured.compact {
  max-width: 320px;
  margin: 0 auto 2em auto !important;
}
.image.featured.compact img {
  max-height: 320px;
  object-fit: cover;
}