/* Blazor WebAssembly styles - same as ASP.NET Razor Pages version */

:root {
    /* Palette from coolors: https://coolors.co/454851-73956f-7bae7f-95d7ae-fceff9 */

    /* Cyber Pro – Refined */
    /* Base */
    --color-900: #060807;
    --color-800: #0B0F0D;
    --color-700: #121715;
    /* Primary (green accent) */
    --color-600: #00A86B;
    --color-500: #00C97A;
    --color-400: #33D69A;
    /* Text (FIXED) */
    --color-300: #CFE7DE; /* secondary text (stadig lidt grøn) */
    --color-200: #EAF4F0; /* primary text (mere neutral) */
    --color-50: #FFFFFF;
    /* Semantic */
    --bg: var(--color-900);
    --bg-soft: var(--color-700);
    --accent: var(--color-600);
    --accent-hover: var(--color-500);

    --text-primary: var(--color-200); /* brug denne til body */
    --text-secondary: var(--color-300);
    --text-inverse: #0B0F0D;
    --muted: #6B7F76;
    --border: rgba(0, 168, 107, 0.22);
    --gap: 1rem;
}

.accent {
    color: var(--accent);
    text-shadow: 0 0 6px rgba(0, 255, 156, 0.35);
}

.border {
    border: 1px solid rgba(0, 255, 156, 0.15);
}

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

.card {
    background: var(--bg-soft);
    border: 1px solid rgba(0, 255, 156, 0.1);
    border-radius: 8px;
}

html, body {
    margin: 0;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: transparent;/*var(--bg);*/
    color: var(--text-primary);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    line-height: 1.5;
}

#app {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 4. Indholdet (Selve listen) */
.submenu {
    list-style: none;
    padding: 1rem;
    margin: 0;
    opacity: 0;
    transition: opacity 0.01s ease 0.01s;
}

.submenu:hover .submenu {
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
    pointer-events: auto;
}

/*Hvis sub-menu class er tilsteder, skal submeny fremvises*/
/*.has-submenu:hover .submenu {
    opacity: 1;
    transform: scaleY(1);
    pointer-events: auto;
}*/
.has-submenu:hover .submenu-wrapper {
    width: auto; /* match pseudo-linjen horisontalt */
    height: auto; /* samme højde som streg */
}

/* Hover: vis submenu inde i boksen */
    /* Hover: vis submenu inde i boksen */
.has-submenu:hover .submenu-wrapper .submenu {
    opacity: 1;
}


/*
.submenu {
    position: relative;
}*/


/* 2. Selve boksen (Wrapperen) */
.submenu-wrapper {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
    /*width: max-content;*/ /* eller 200px hvis du vil låse den */
    width: auto;
    min-width: 200px; /* sikrer minimum bredde */
    max-width: 400px; /* forhindrer at den bliver for bred */

    background: var(--bg-soft);
    border-radius: 8px;
    border: 2px solid transparent;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.5s ease;
}

/* Submenu inde i boksen */
    .submenu-wrapper .submenu {
        padding: 0.5rem;
        opacity: 0;
        transition: opacity 0.3s ease;
        white-space: nowrap; /* forhindrer at submenuen brydes i flere linjer */
    }

/* Hover: udvid pseudo linje horisontalt */
.has-submenu:hover .submenu-wrapper::before {
    transform: translateX(-50%) scaleX(1); /* vokser ud til begge sider fra midten */
}

.top-menu {
    overflow: visible;
}

.has-submenu {
    position: relative; /* submenu positioneres i forhold til dette element */
}

/* Hover: lodret linje vokser til submenu-højde */
.has-submenu:hover::before {
    height: 150px; /* højde af submenu */
}

/* Hover: horisontal linje vokser til submenu-bredden */
.has-submenu:hover::after {
    width: 100%; /* fylder hele submenuens bredde */
    left: 0;
    transform: none;
}

.submenu:hover::after {
    height: 100px; /* ned først */
    width: 200px; /* så bred */
}

/* 5. HOVER - Gør det hele synligt */
.has-submenu:hover .submenu-wrapper {
    transform: translateX(-50%) scaleY(1);
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(0,255,156,0.4);
}

main {
    flex: 1 0 auto;
    margin-top: 70px;
    width: 100%; /* fylder hele vinduet */
    padding: 2rem 0; /* top/bund padding */
    background-color: transparent; /* stadig baggrund */
    position: relative;
    box-sizing: border-box;
}

.main-content {
    width: 100%; /* fylder alt til små skærme */
    max-width: 900px; /* begrænser læsbarhed på stor skærm */
    margin-inline: auto; /* centrer horisontalt */
    padding-inline: 1.5rem; /* lidt luft i sider */
    box-sizing: border-box;
    text-align: left; /* tekst kan være venstrestillet inde i container */
}

.main-content article {
    max-width: 900px; /* holder læsbarhed */
    text-align: left; /* tekst venstrejusteret */
}

/*At det grønne kun omgiver bjælken progress ikke hele siden*/
.top-menu {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 0.6rem 1.2rem;
    background: transparent;
    border: none;
}

/*Grønt rundt command menuen*/
.top-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--accent);
    clip-path: polygon( 12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px );
    box-shadow: 0 0 8px rgba(0, 255, 156, 0.4), inset 0 0 6px rgba(0, 255, 156, 0.2);
    pointer-events: none;
    z-index: -1;
}









.background-aside {
    /*flex: 0 0 220px;*/
    width: 220px;
    padding: 2rem;
    background-color: transparent; var(--color-600);
    text-align: center;
    color: var(--text-primary);
    animation: 1s ease-out 0s 1 slideInFromLeft;
    position: relative;
    left: 0;
    top: 0;
}

footer {
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.1);
    background: var(--bg-soft);
    animation: 1s ease-out 0s 1 slideUpFromBottom;
}

header { 
    background: var(--color-600);
    animation: 1s ease-out 0s 1 slideDownFromTop;
}

.btn-cta, a.cta {
    display: inline-block;
    background: var(--accent);
    color: var(--text-light);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    text-decoration: none;
}
.btn-cta:hover, a.cta:hover { filter: brightness(0.95); }

ul.horizontal li a:hover, ul.horizontal li a:focus {
    background: rgba(0,0,0,0.26);
    border-radius: 8px;
    color: var(--color-50);
    transform: scale(1.1);
}

ul.horizontal li a:focus-visible {
    outline: 2px solid rgba(122,174,127,0.35);
    outline-offset: 2px;
    color: var(--color-50);
}

/*Fremtoning af menu elementer*/
ul.horizontal { list-style: none; margin: 1.0rem; padding: 0; display: flex; gap: 1rem; align-items: center; flex-wrap: nowrap; }
ul.horizontal li a {
    display: inline-block;
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    /*Hvor hurtigt top menupunkter skal fremtones*/
    transition: background 200ms ease, color 200ms ease;
    border-radius: 4px;
}

ul.horizontal.center { justify-content: center; }
ul.horizontal.right { justify-content: flex-end; }

@supports not (display: flex) {
    ul.horizontal { display: block; }
    ul.horizontal li { display: inline-block; margin-right: 1rem; }
}

nav ul { list-style: none; margin: 0; padding: 0; }

/* small container helper used by layout */
/*.container { max-width: 900px; margin: 0 auto; padding: 0 1rem; }*/

h1 { margin-top: 0.5rem; }

section {
    padding: 1rem 0;
}

.top-menu ul.horizontal {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
}

.top-menu ul.horizontal li a {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
}

.top-menu ul.horizontal li a:hover {
    background: rgba(0, 255, 156, 0.35);
    transform: scale(1.05);
}

.center
{
    justify-content: center;
    align-content: center;
}


.image-row {
    display: flex;
    gap: 16px; /* afstand mellem billederne */
    align-items: center; /* centrerer dem vertikalt */
}

.image-row img {
    width: 200px; /* valgfrit */
    height: auto; /* bevar proportioner */
    border-radius: 8px; /* valgfrit */
}



/*.background-aside-picture {
  border-radius: 8%;
}*/

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideUpFromBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slideDownFromTop {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@media (max-width: 1340px) {
    .layout {
        grid-template-columns: 1fr; /* kun main */
        gap: 0;
    }
   .background-aside { display: none; }

  /*  .main {
        width: 100%;  fjern ekstra top-margin når menu ikke er fixed 
        padding: 1rem;  lidt luft omkring tekst 
    }*/

    .main-content {
        width: 100%;
        max-width: none;
        margin-inline: auto;
        padding-inline: 1.5rem;
        box-sizing: border-box;
        text-align: left;
        position: fixed;
        width: 100% !important;
        max-width: none !important;
    }
}



body {
    background: transparent;
}

#app {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* minimum højde = viewport */
}

/*Glowing, particel rain*/
/* Base grid */
#background {
    position: fixed;
    inset: 0;
    background-color: #060807;
    background-image: linear-gradient(rgba(0,168,107,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,168,107,0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: none; /*moveGrid 6s linear infinite;*/
    z-index: -2;  /*bagved alt */
    overflow: hidden;
}


/* Grid animation */
@keyframes moveGrid {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 80px 40px, 40px 80px;
    }
}

/* Glowing overlay */
#background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0,255,156,0.25) 0%, transparent 70%);
    z-index: -1;
}

/* Optional subtle scanlines */
#background::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0,255,156,0.12) 1px, transparent 1px);
    background-size: 100% 4px;
    z-index: -1;
}

/* Standard: horisontal menu */
.top-menu ul.horizontal {
    display: flex;
    gap: 1rem;
    justify-content: center;
    /*flex-wrap: wrap;*/ /* giver lidt fleksibilitet */
}

/* Når skærmen er smal */
@media (max-width: 940px) {
    .top-menu {
        position: relative; /* ikke fixed, så det bliver i flow */
        top: 0;
        left: 0;
        transform: none;
        width: 100%; /* fylder hele toppen */
        margin: 0;
    }

    .top-menu ul.horizontal {
        flex-direction: column; /* gør den vertikal */
        align-items: center; /* centrerer vertikalt */
        gap: 0.5rem; /* mindre afstand for small screens */
    }

    main {
        margin-top: 0; /* fjern ekstra top-margin når menu ikke er fixed */
        padding: 1rem; /* lidt luft omkring tekst */
    }

    .top-menu ul.horizontal li a {
        padding: 0.5rem 1rem; /* mindre padding så det ikke fylder for meget */
    }

    .main-content {
        max-width: none; /* fylder hele bredden */
        padding: 1rem 2rem; /* lidt luft fra kanten */
        width: 100%;
        margin: 0;
    }

    .background-aside {
        display: none;
    }
}



.layout {
    display: grid;
    grid-template-columns: 0px 1fr; /* aside er 220px + main content */
    gap: 2rem;
    margin-top: 70px;
}


/*aside photo start */
.background-aside-picture {
    display: block;
    margin: 0 auto 1rem auto;
    max-width: 100%;
    height: auto;
    border-radius: 8%;
    filter: grayscale(100%) contrast(1.0) brightness(0.8);
    position: relative;
    overflow: hidden;
}

/*Fjerner focus*/
.background-aside-picture:focus {
    outline: none; /* fjerner markering ved fokus */
}

/* Flimrende overlay */
.background-aside-picture::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient( 0deg, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 2px, transparent 2px, transparent 4px );
    mix-blend-mode: screen;
    animation: intenseFlicker 0.05s infinite;
    border-radius: 8%;
}

/* Vandrette glitch-striber med lidt mere bevægelse */
.background-aside-picture::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(0,255,156,0.1) 1px, transparent 1px);
    background-size: 100% 6px;
    animation: horizontalGlitch 0.2s infinite linear;
    border-radius: 8%;
}

/* Kraftigere flimren */
@keyframes intenseFlicker {
    0%, 20%, 40%, 60%, 80%, 100% {
        opacity: 0.05;
    }

    10%, 30%, 50%, 70%, 90% {
        opacity: 0.9;
    }
}

/* Glitch bevægelse */
@keyframes horizontalGlitch {
    0%, 100% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-3px);
    }

    50% {
        transform: translateY(2px);
    }

    75% {
        transform: translateY(-1px);
    }
}

/*aside photo end*/

@keyframes moveGrid {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 40px 40px, 40px 40px;
    }
}