/* Component-Specific Styles */

@import "./design-tokens.css";

/* ========================================
   AnswerBox - Fremhever raskt svar
   ======================================== */

.answer-box {
  background: var(--color-bg-elevated);
  border-left: var(--border-width-thick) solid var(--color-accent);
  padding: var(--space-4);
  margin: var(--space-5) 0;
  line-height: var(--line-height-base);
  border-radius: var(--radius-small);
}

.answer-box :is(p, ul, ol):first-child {
  margin-top: 0;
}

.answer-box :is(p, ul, ol):last-child {
  margin-bottom: 0;
}

/* ========================================
   Sources - Viser offisielle kilder
   ======================================== */

.sources {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.sources h2 {
  font-size: var(--font-small);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  font-weight: 600;
}

.sources ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.sources li {
  margin: var(--space-2) 0;
}

.sources a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  transition: all var(--transition-fast);
}

.sources a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* External link indicator */
.sources a[href^="http"]::after {
  content: " ↗";
  font-size: 0.875em;
  color: var(--color-text-muted);
}

/* ========================================
   Navigation - Hovedmeny
   ======================================== */

.main-nav ul {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.main-nav a {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  font-family: var(--font-family-sans);
  font-weight: 500;
  transition: all var(--transition-fast);
  border-radius: var(--radius-small);
  min-height: var(--tap-target-min);
  display: flex;
  align-items: center;
}

.main-nav a:hover {
  background: var(--color-bg-elevated);
  color: var(--color-accent);
}

.main-nav a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

/* Active/current page indicator */
.main-nav a[aria-current="page"] {
  background: var(--color-accent);
  color: white;
}

.main-nav a[aria-current="page"]:hover {
  background: var(--color-accent-hover);
  color: white;
}

/* ========================================
   Sidebar - Metadata og lenker
   ======================================== */

.sidebar-section {
  margin-bottom: var(--space-5);
}

.sidebar-section h2 {
  font-size: var(--font-small);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  font-weight: 600;
}

.sidebar-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-section li {
  margin: var(--space-2) 0;
}

.sidebar-section a {
  color: var(--color-text);
  font-size: var(--font-small);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.sidebar-section a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Tags display */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.tag {
  display: inline-block;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-medium);
  font-size: var(--font-small);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.tag:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
  text-decoration: none;
}

/* ========================================
   Warning / Note boxes
   ======================================== */

.warning-box, .note-box {
  padding: var(--space-4);
  margin: var(--space-5) 0;
  border-radius: var(--radius-small);
  border-left: var(--border-width-thick) solid;
}

.warning-box {
  background: #fff9f0;
  border-left-color: #e67700;
}

.note-box {
  background: var(--color-bg-elevated);
  border-left-color: var(--color-accent);
}

.warning-box :first-child,
.note-box :first-child {
  margin-top: 0;
}

.warning-box :last-child,
.note-box :last-child {
  margin-bottom: 0;
}

/* ========================================
   Oppslag list (tema, siste, etc)
   ======================================== */

.oppslag-list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0;
}

.oppslag-list li {
  margin: var(--space-4) 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.oppslag-list li:last-child {
  border-bottom: none;
}

.oppslag-list h3 {
  margin-top: 0;
  margin-bottom: var(--space-2);
  font-size: var(--font-h3);
}

.oppslag-list a {
  text-decoration: none;
  color: var(--color-text);
}

.oppslag-list a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.oppslag-meta {
  font-size: var(--font-small);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* ========================================
   Site header
   ======================================== */

.site-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.site-title {
  font-size: var(--font-h2);
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: 600;
}

.site-title a {
  color: var(--color-text);
  text-decoration: none;
}

.site-title a:hover {
  color: var(--color-accent);
}

.logo-enk {
  letter-spacing: 0.04em;
}

.site-description {
  margin: var(--space-2) 0 0 0;
  font-size: var(--font-small);
  font-family: var(--font-family-sans);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* ========================================
   Breadcrumb - Navigasjonssti
   ======================================== */

.breadcrumb {
  margin-bottom: var(--space-4);
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-small);
  color: var(--color-text-muted);
}

.breadcrumb li + li::before {
  content: "›";
  color: var(--color-border);
  margin-right: var(--space-1);
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
  font-weight: 500;
}

/* ========================================
   Forside – Kategoriseksjoner
   ======================================== */

.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: var(--space-5) 0;
}

@media (min-width: 60rem) {
  .category-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.category-block {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-medium);
  padding: var(--space-4);
  background: var(--color-bg-elevated);
}

.category-block h2 {
  font-size: var(--font-h3);
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.category-block-desc {
  font-size: var(--font-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  margin-top: 0;
}

.category-block ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
}

.category-block li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.category-block li:last-child {
  border-bottom: none;
}

.category-block a {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-small);
  transition: color var(--transition-fast);
}

.category-block a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.category-block-cta {
  display: inline-block;
  font-size: var(--font-small);
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.category-block-cta:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* ========================================
   404 Page specific
   ======================================== */

.not-found {
  text-align: center;
  padding: var(--space-7) var(--space-4);
}

.not-found h1 {
  font-size: var(--font-h1);
  margin-bottom: var(--space-4);
}

.not-found p {
  font-size: var(--font-h3);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}