/* ==========================================================================
   Trym.Support – Design Tokens & Core Styles
   Prinsipper: Intensjonell, behersket, tilgjengelig og ekstremt rask.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variabler & Tema (CSS Custom Properties)
   -------------------------------------------------------------------------- */
:root {
  /* Fargesystem – Dark Mode (Standard) */
  --color-bg: #0d0f14;
  --color-surface: #141720;
  --color-surface-hover: #1b202c;
  --color-surface-active: #222837;
  --color-surface-featured: #151d2c;
  --color-surface-featured-hover: #192438;
  
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-hover: rgba(255, 255, 255, 0.18);
  --color-border-featured: rgba(59, 130, 246, 0.38);
  --color-border-featured-hover: rgba(59, 130, 246, 0.6);

  --color-text-primary: #f8fafc;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;

  --color-accent: #3b82f6;
  --color-accent-subtle: rgba(59, 130, 246, 0.12);
  --color-accent-border: rgba(59, 130, 246, 0.28);
  --color-badge-text: #60a5fa;

  --color-status-online: #10b981;
  --color-status-online-bg: rgba(16, 185, 129, 0.12);

  --color-focus-ring: #3b82f6;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.35);

  /* Dimensjoner & Spacing */
  --max-content-width: 580px;
  --radius-card: 10px;
  --radius-sm: 6px;
  --radius-badge: 4px;
  --radius-full: 9999px;

  /* Typografi */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Overganger */
  --transition-timing: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 140ms var(--transition-timing);
  --transition-normal: 200ms var(--transition-timing);

  color-scheme: dark;
}

/* Light Theme Overrides */
html[data-theme="light"],
[data-theme="light"] {
  --color-bg: #f8f9fa;
  --color-surface: #ffffff;
  --color-surface-hover: #f1f3f5;
  --color-surface-active: #e9ecef;
  --color-surface-featured: #f0f7ff;
  --color-surface-featured-hover: #e3efff;

  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-hover: rgba(0, 0, 0, 0.16);
  --color-border-featured: rgba(37, 99, 235, 0.3);
  --color-border-featured-hover: rgba(37, 99, 235, 0.5);

  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #64748b;

  --color-accent: #2563eb;
  --color-accent-subtle: rgba(37, 99, 235, 0.08);
  --color-accent-border: rgba(37, 99, 235, 0.2);
  --color-badge-text: #1d4ed8;

  --color-status-online: #059669;
  --color-status-online-bg: rgba(5, 150, 105, 0.1);

  --color-focus-ring: #2563eb;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Reset & Grunnleggende oppsett
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-stack);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  padding: 2.5rem 1.25rem 3rem;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* --------------------------------------------------------------------------
   3. Tilgjengelighet & Fokus
   -------------------------------------------------------------------------- */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.skip-to-content {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--color-accent);
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.875rem;
  z-index: 1000;
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-to-content:focus {
  top: 1rem;
}

/* Tilgjengelighet: Skjermleser-kun synlig tekst */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Hjelpeklasser for skjuling */
.hidden,
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   4. Layout & Beholder
   -------------------------------------------------------------------------- */
.site-wrapper {
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Header & Verktøylinje */
.site-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1.5rem;
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  min-height: 36px;
  min-width: 36px;
}

.theme-toggle-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
  border-color: var(--color-border-hover);
}

.theme-icon-sun,
.theme-icon-moon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-icon-sun svg,
.theme-icon-moon svg {
  display: block;
}

/* Vis sol-ikon i mørkt tema (for å bytte til lyst), måne i lyst tema */
html:not([data-theme="light"]) .theme-icon-moon { display: none; }
html:not([data-theme="light"]) .theme-icon-sun { display: block; }
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-icon-moon { display: block; }

/* --------------------------------------------------------------------------
   5. Profil & Identitetsseksjon
   -------------------------------------------------------------------------- */
.profile-section {
  text-align: center;
  margin-bottom: 2.25rem;
}

.profile-avatar-container {
  display: inline-flex;
  position: relative;
  margin-bottom: 1rem;
}

.profile-avatar {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  display: block;
  box-shadow: var(--shadow-card);
}

.profile-title-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.profile-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  color: var(--color-badge-text);
}

.verified-badge svg {
  display: block;
}

.profile-tagline {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

.profile-description {
  font-size: 0.84375rem;
  color: var(--color-text-muted);
  max-width: 440px;
  margin: 0 auto 1.15rem;
  line-height: 1.45;
}

/* Statusindikator */
.status-indicator-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-status-online);
  display: inline-block;
  position: relative;
}

.status-dot::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--color-status-online);
  opacity: 0.35;
  animation: pulse 2.5s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50% { transform: scale(1.6); opacity: 0; }
}

/* --------------------------------------------------------------------------
   6. Linktree / Ressurs-seksjoner
   -------------------------------------------------------------------------- */
.content-sections {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.resource-section {
  display: flex;
  flex-direction: column;
}

.section-header {
  margin-bottom: 0.75rem;
  padding: 0 0.25rem;
}

.section-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.2;
}

.section-caption {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-top: 0.2rem;
}

.resource-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  list-style: none;
}

/* --------------------------------------------------------------------------
   7. Link-Kort Komponent (Hjerte i UX-en)
   -------------------------------------------------------------------------- */
.resource-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 0.875rem 1rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: 
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  min-height: 64px;
}

.resource-card:hover {
  background-color: var(--color-surface-hover);
  border-color: var(--color-border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}

.resource-card:active {
  background-color: var(--color-surface-active);
  transform: translateY(0);
}

/* Primær / Fremhevet ressurs (f.eks. Windows Hurtighjelp) */
.resource-card.is-featured {
  background-color: var(--color-surface-featured);
  border-color: var(--color-border-featured);
}

.resource-card.is-featured:hover {
  background-color: var(--color-surface-featured-hover);
  border-color: var(--color-border-featured-hover);
}

/* Ikon i kort */
.card-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary);
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.card-icon-wrapper svg {
  display: block;
  flex-shrink: 0;
}

.resource-card:hover .card-icon-wrapper {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-border-hover);
  color: #ffffff;
}

html[data-theme="light"] .card-icon-wrapper {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text-primary);
}

html[data-theme="light"] .resource-card:hover .card-icon-wrapper {
  background: rgba(0, 0, 0, 0.08);
}

.resource-card.is-featured .card-icon-wrapper {
  background: var(--color-accent-subtle);
  color: var(--color-badge-text);
  border-color: var(--color-accent-border);
}

.resource-card.is-featured:hover .card-icon-wrapper {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border-color: var(--color-border-featured-hover);
}

html[data-theme="light"] .resource-card.is-featured:hover .card-icon-wrapper {
  background: rgba(37, 99, 235, 0.15);
  color: var(--color-accent);
}

/* Tekstinnhold i kort */
.card-content {
  flex: 1;
  min-width: 0; /* Hindrer overflow ved lang tekst */
}

.card-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}

.card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
  word-break: break-word;
}

.card-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-badge);
  background: var(--color-accent-subtle);
  color: var(--color-badge-text);
  border: 1px solid var(--color-accent-border);
}

.card-description {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.35;
  word-break: break-word;
}

/* Handlingsikon (ekstern pil eller handling) */
.card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.card-action svg {
  display: block;
  flex-shrink: 0;
}

.resource-card:hover .card-action {
  color: var(--color-text-primary);
  transform: translate(2px, -2px);
}

.resource-card.is-featured .card-action {
  color: var(--color-badge-text);
}

.resource-card.is-featured:hover .card-action {
  color: #93c5fd;
}

/* --------------------------------------------------------------------------
   8. Kontaktskjema (Netlify Forms)
   -------------------------------------------------------------------------- */
.contact-form-container {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.25rem 1.5rem;
  box-shadow: var(--shadow-card);
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.required-star {
  color: #ef4444;
  font-weight: bold;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  transition: 
    border-color var(--transition-fast), 
    background-color var(--transition-fast), 
    box-shadow var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.8;
}

html[data-theme="light"] .form-input,
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-textarea {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--color-border-hover);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

/* Interaksjonsbasert validering */
.form-input:user-invalid,
.form-textarea:user-invalid {
  border-color: #ef4444;
  background-color: rgba(239, 68, 68, 0.05);
}

.form-input:user-valid,
.form-textarea:user-valid {
  border-color: var(--color-status-online);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}

/* Tilpasset Select Dropdown */
.select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-select option {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

.select-arrow {
  position: absolute;
  right: 0.85rem;
  pointer-events: none;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  transition: color var(--transition-fast);
}

.select-wrapper:hover .select-arrow {
  color: var(--color-text-primary);
}

/* Send-knapp */
.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--color-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.8rem 1.4rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: 
    background-color var(--transition-fast), 
    transform var(--transition-fast), 
    opacity var(--transition-fast),
    box-shadow var(--transition-fast);
  margin-top: 0.25rem;
}

.contact-submit-btn:hover {
  background-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

html[data-theme="light"] .contact-submit-btn:hover {
  background-color: #1d4ed8;
  box-shadow: 0 4px 10px rgba(29, 78, 216, 0.25);
}

.contact-submit-btn:active {
  transform: translateY(0);
}

.contact-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.contact-submit-btn .btn-icon {
  transition: transform var(--transition-fast);
}

.contact-submit-btn:hover .btn-icon {
  transform: translate(2px, -2px);
}

/* Status-melding */
.form-status {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.45;
  margin-top: 0.25rem;
  text-align: left;
}

.form-status.is-success {
  background-color: var(--color-status-online-bg);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: var(--color-status-online);
}

.form-status.is-error {
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #ef4444;
}

/* Konfidensialitetsnotis (GDPR / Personvern) */
.form-privacy-notice {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-top: 0.2rem;
  text-align: left;
}

.form-privacy-notice svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   9. Footer & Tilleggsinformasjon
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
}

.footer-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}

.footer-disclaimer {
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   10. Responsivitet & Mobile-first tilpasninger
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  body {
    padding: 1.5rem 1rem 2.5rem;
  }

  .profile-avatar {
    width: 68px;
    height: 68px;
    border-radius: 16px;
  }

  .profile-title {
    font-size: 1.35rem;
  }

  .resource-card {
    padding: 0.8rem 0.875rem;
    gap: 0.75rem;
  }

  .card-icon-wrapper {
    width: 36px;
    height: 36px;
  }

  .card-title {
    font-size: 0.875rem;
  }

  .card-description {
    font-size: 0.78125rem;
  }
}

/* Støtte for Safe Area Insets (iPhone notch / dynamic island) */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
    padding-bottom: max(3rem, env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------------------
   11. Prefers-reduced-motion (A11y)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}