/* =========================================
   IMPORTS
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
   
   /* ===================
   1. COLOR VARIABLES (Easy to change custom colors)
   =================== */
:root {
    --primary-color: #145C35; /* Main theme color (used for buttons, stepper, etc.) */
    --primary-color-dark: #145C35; /* Button hover, dark accents */
    --spinner-color: #145C35; /* Spinner and icon color */
    --background-color: #F9FCF2; /* Page background color */
    --text-color: #2D2D2D;
    --heading-color: #145C35;
    --link-color: #145C35;
    --link-hover-color: #145C35;
    --button-background: var(--primary-color);
    --button-text: #FFFFFF;
    --button-hover: var(--primary-color-dark);
    --text-primary: var(--text-color);
    --text-secondary: #555555;
    --error-background: #f44336; /* Consistent error background for all themes */
    --error-text: #fff; /* Consistent error text color */
    --error-border: #d32f2f; /* Consistent error border color */

    /* ── Diagram / chart colors (FRID brand palette) ── */
    --diagram-color-1: #145C35;  /* FRID Grønn (primær) */
    --diagram-color-2: #ED7842;  /* FRID Rød / oransje */
    --diagram-color-3: #81742D;  /* FRID Bronse */
    --diagram-color-4: #BFA40E;  /* FRID Gull */
    --diagram-color-5: #FFA8F9;  /* FRID Rosa */
    --diagram-color-6: #B6B6B8;  /* FRID Grå */
}
   
   /* =========================================
      BASE STYLES
      ========================================= */
   body {
     margin: 0;
     padding: 0;
     font-family: 'Inter', 'Arial', sans-serif;
     height: 100%;
     line-height: 1.4;
     background-color: var(--background-color);
     color: var(--text-color);
   }
   
   * {
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     image-rendering: -webkit-optimize-contrast;
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
     padding: 0;
     margin: 0;
   }

   /* Global focus styles for keyboard accessibility (WCAG 2.4.7) */
   *:focus-visible {
     outline: 2px solid var(--primary-color, #145C35);
     outline-offset: 2px;
   }
   
   /* Remove default focus for mouse users, keep for keyboard */
   *:focus:not(:focus-visible) {
     outline: none;
   }
   
   input,
   select,
   textarea,
   button {
     font-family: inherit;
     font-size: inherit;
   }
   
   a {
     color: var(--accent-color-green);
     text-decoration: none;
   }
   
   a:hover {
     color: var(--dark-grey-color-1);
   }
   
   /* =========================================
      LAYOUT
      ========================================= */
   .top-banner {
    visibility: hidden;
   }

   .topbar {
     width: 100%;
     padding: 20px 0;
     color: var(--primary-color);
     border-top: 8px solid var(--primary-color);
     border-bottom: 4px solid var(--primary-color);
   }
   
   .toptop {
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 16px 10px 30px;
   }
   
   .topbarOptions {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 1em;
     padding-right: 20px;
   }
   
   /* Responsive visibility utilities */
   .mobile-only {
     display: none;
   }
   
   .desktop-only {
     display: flex;
   }
   
   .logo {
     width: 230px;
   }
   
   .appTitle {
     color: black;
     text-decoration: none;
   }
   
   .content {
     padding: 20px 20px 10px 20px;
     margin: auto;
     max-width: 1440px;
   }
   
   .centerstuff {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
     align-items: stretch;
     width: 100%;
     margin: 0 auto;
   }
   
   @media only screen and (max-width: 768px) {
     .centerstuff {
       flex-direction: column;
       align-items: center;
       width: 100%;
       max-width: 100%;
       box-sizing: border-box;
       padding: 0 8px;
       margin: 0;
     }
     .content {
       width: 100%;
       max-width: 100%;
       box-sizing: border-box;
       padding: 0 8px;
       margin: 0;
     }
     /* Card Adjustments */
     .card {
        border-radius: 1rem;
        margin: 0.5rem auto;
        padding: 16px;
        width: 100%;
        max-width: 400px;
        min-width: 0;
        box-sizing: border-box;
        height: unset;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }

     .topbar {
        padding: 10px 0;
    }
    .toptop {
        padding: 20px 40px 20px 40px;
    }
   }
   
   @media only screen and (max-width: 375px) {
     .centerstuff,
     .content {
       padding: 0;
     }
   }
   
   .section {
     margin: 12px 0;
   }
   
   /* =========================================
      COMPONENTS
      ========================================= */
   
   /* Buttons */
   button {
     padding: 8px;
     cursor: pointer;
     background-color: var(--accent-color-green);
     border: 2px solid var(--dark-grey-color-2);
     border-radius: 12px;
     align-items: center;
     justify-content: center;
   }
   
   button:hover {
     background-color: var(--dark-grey-color-3);
   }
   
   button.big {
     padding: 16px;
     font-size: 1.1em;
     background-color: var(--accent-color-green);
     border: 2px solid var(--dark-grey-color-2);
     border-radius: 12px;
     transition: background-color 0.3s;
     color: var(--primary-color-white);
     cursor: pointer;
     align-items: center;
     justify-content: center;
   }
   
   button.big:hover {
     background-color: var(--dark-grey-color-3);
   }
   
   button.link {
     display: inline-flex;
     align-items: center;
     gap: 0.25rem;
     padding: 0;
     background-color: inherit;
     border: none;
     text-decoration: none;
     color: var(--accent-color-green);
     cursor: pointer;
   }
   
   button.link:hover {
    text-decoration: underline;
     color: var(--accent-color-purple);
   }
   
   button.link span,
   button span {
     font-size: 18px;
     padding: 0 5px;
     vertical-align: middle !important;
   }
   
   /* Mock Buttons */
   .mock-button {
     background: var(--spinner-color, var(--primary-color, var(--button-background)));
     color: var(--button-text, #fff);
     border: none;
     padding: 1rem 2rem;
     border-radius: 4px;
     cursor: pointer;
     font-size: 1rem;
     margin: 1rem 0 0.5rem 0;
     transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
     display: inline-block;
     font-family: inherit;
     font-weight: 600;
     text-align: center;
     box-shadow: 0 2px 8px 0 rgba(12,59,33,0.08);
   }
   
   .mock-button:focus {
     outline: 2px solid var(--accent-color-green, #0C3B21);
     outline-offset: 2px;
   }
   
   .mock-button:hover {
     background: var(--spinner-color, var(--primary-color-dark, var(--button-hover)));
     color: var(--button-text, #fff);
     box-shadow: 0 4px 16px 0 rgba(12,59,33,0.12);
   }
   
 
   /* Mock Containers */
   .mock-container {
     text-align: center;
     padding: 2rem;
     max-width: 600px;
     margin: 0 auto;
   }
   
   .mock-icon {
     width: 64px;
     height: 64px;
     margin-bottom: 1rem;
   }
   
   .mock-info {
     color: var(--text-secondary);
     font-size: 0.9rem;
     margin-top: 1rem;
   }
   
   /* Loading States */
   .loading {
     display: flex;
     align-items: center;
     gap: 16px;
     width: 100%;
     justify-content: center;
     text-align: center;
     margin: 2.5rem 0 2.5rem 0;
     padding: 1.5rem 0;
     color: var(--primary-color, var(--accent-color-green));
     background: linear-gradient(90deg, var(--light-grey-color-4) 0%, var(--light-grey-color-2) 100%);
     border-radius: 8px;
     box-shadow: 0 2px 8px 0 rgba(12,59,33,0.04);
   }
   
   .loadingMessage {
     margin-top: 1rem;
     color: var(--primary-color, var(--accent-color-green));
     font-style: italic;
   }
   
   .loadingSpinner {
     display: flex;
     justify-content: center;
     align-items: center;
     color: var(--primary-color, var(--accent-color-green));
   }
   
   /* Error States */
   .error {
     text-align: center;
     background-color: var(--error-background, #f44336); 
     padding: 16px;
     border-radius: 8px;
     max-width: 400px;
     margin: 16px auto;
     color: var(--error-text, #fff); /* fallback to white */
     border: 2px solid var(--error-border, var(--primary-color));
     box-shadow: 0 2px 8px 0 rgba(237,120,66,0.12);
   }
   
   .error-section {
     display: flex;
     flex-direction: column !important;
     align-items: center !important;
     width: 100%;
   }
   
   /* Info/Success States (optional, for future use) */
   .info, .success {
     text-align: center;
     background: linear-gradient(90deg, var(--accent-color-citron) 60%, var(--accent-color-green) 100%);
     padding: 16px;
     border-radius: 8px;
     max-width: 400px;
     margin: 16px auto;
     color: var(--primary-color-black);
     border: 2px solid var(--accent-color-green);
     box-shadow: 0 2px 8px 0 rgba(12,59,33,0.10);
   }
   
   /* =========================================
      DIALOGS
      ========================================= */
   dialog {
     min-height: 230px;
     margin: auto;
     border: none;
     padding: 32px;
   }
   
   dialog::backdrop {
     background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7));
     animation: fade-in 1s;
   }
   
   .modalContent {
     padding: 2rem;
     background-color: var(--primary-color-white);
     border-radius: 12px;
   }
   
   .modalTitle {
     color: var(--primary-color-black);
     margin-bottom: 1rem;
   }
   
   .back-link {
     display: flex;
     gap: 5px;
     align-items: center;
     margin-top: 1rem;
   }
   
   /* =========================================
      ANIMATIONS
      ========================================= */
   @keyframes fade-in {
     from {
       opacity: 0;
     }
     to {
       opacity: 1;
     }
   }
   
   /* =========================================
      MEDIA QUERIES
      ========================================= */
   @media only screen and (max-width: 768px) {
     /* Layout Adjustments */
     .top-banner {
        display: none;
     }

     .topbar {
       padding: 10px 0;
       border-top: 0px solid var(--primary-color);
       border-bottom: 2px solid var(--text-secondary);
       box-shadow: 0 4px 8px -2px rgba(0,0,0,0.15);
     }
   
     .toptop {
       padding: 20px 40px 20px 40px;
     }
   
     .appTitle {
       display: block;
       font-size: 1.2em;
     }
   
     .logo {
       width: 180px;
       padding-left: 0;
     }
   
     .content {
       width: 100%;
       max-width: 100%;
       box-sizing: border-box;
       padding: 0 8px;
       margin: 0;
     }
   
     .card {
        border-radius: 1rem;
        margin: 0.5rem auto;
        padding: 16px;
        width: 100%;
        max-width: 400px; /* Match Akershus */
        min-width: 0;
        box-sizing: border-box;
        height: unset; /* Allow card to shrink vertically */
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
   
     /* Dialog Adjustments */
     dialog {
       padding: 16px;
     }
   
     /* Additional Mobile Styles */
     .section {
       margin: 12px 0;
     }
   }

   @media (max-width: 600px) {

    .topbar {
     border-top: 0px solid var(--accent-color-green);
     /* border-bottom: 4px solid var(--accent-color-green); */
   }

    .desktop-only { display: none !important; }
    .mobile-only { display: flex !important; }
    .topbarOptions { flex-direction: row-reverse; }

    .mobile-menu {
      flex-direction: row !important;
      align-items: center !important;
      justify-content: flex-start;
      gap: 1em;
      padding: 1em;
      min-width: 0;
      display: flex;
    }

    .mobile-menu .link {
      background: transparent !important;
      color: var(--primary-color) !important;
      border: none;
      height: 44px;
      min-width: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      font-size: 1rem;
      border-radius: 8px;
      margin: 0;
      box-sizing: border-box;
    }

    .mobile-menu .link:hover {
      background: var(--primary-color);
      color: #fff !important;
    }

    .mobile-menu .language-dropdown {
      margin-left: 12px;
      display: flex;
      align-items: center;
    }

    .hamburger {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: none !important;
      border: none;
      cursor: pointer;
      margin-left: 1em;
      padding: 0;
    }
    .hamburger span {
      display: block;
      width: 28px;
      height: 4px;
      margin: 4px auto;
      background: #333;
      border-radius: 2px;
      transition: 0.3s;
    }
    .hamburger:focus {
      outline: 2px solid var(--primary-color, #145C35);
      outline-offset: 2px;
      border-radius: 4px;
    }
    .hamburger:active {
      background: none !important;
    }
  }

   /* Cards */
   .card {
    all: unset;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    border-radius: 1rem;
    margin: 1rem;
    width: 310px;
    height: 310px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    cursor: pointer;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    background: #eeeeee;
    transform: translateY(-4px);
}

.card .container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    text-align: center;
    margin-top: 0;
}

.card h2, .card h3 {
    font-size: 1.2em;
    margin: 10px 0;
    text-align: center;
}

.card p {
    font-size: 1em;
    text-align: center;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

/* Smaller cards on devices with small viewport height (like iPhone SE) */
@media only screen and (max-height: 800px) {
  .card {
    height: auto;
    min-height: 200px;
    padding: 12px;
    margin: 0.75rem;
  }
  
  .card h2, .card h3 {
    font-size: 1.1em;
    margin: 8px 0;
  }
  
  .card p {
    font-size: 0.9em;
    margin-top: 0.25rem;
  }
  
  .centerstuff {
    gap: 0.5rem;
  }
  
  .content {
    padding: 10px 20px 5px 20px;
  }
}

/* Timeline Stepper - horizontal, circles, no lines */
.step.completed .circle {
  background: var(--primary-color, #0C3B21);
  color: #fff;
  border-color: var(--primary-color, #0C3B21);
}
.step.active .circle {
  color: var(--primary-color, #0C3B21);
  border-color: var(--primary-color, #0C3B21);
}
.step.completed .label,
.step.active .label {
  color: var(--primary-color, #0C3B21);
}
.step.completed + .line {
  background: var(--primary-color, #0C3B21);
}

.back-home-btn {
  display: inline-block;
  background: var(--primary-color, #0176ac);
  color: #fff;
  font-size: 1.15rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  text-decoration: none;
  margin: 0.5rem 0;
  transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.back-home-btn:hover, .back-home-btn:focus {
  background: var(--primary-color-dark, #015a87);
  color: #fff;
}

@media only screen and (max-width: 400px) {
  .card {
    max-width: 100%;
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* Reduce motion for users who prefer it (WCAG 2.3.3) */
@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;
  }
}