/* --------------------------------------------
	main.css : this is the main style file of the theme.
	
	Project 	: LazyGuy
	Author 		: pixelwars 
	Url			: pixelwars.org
	Edit		: JeppeKM
	---
	
	CONTEXT:
	1. BASE (@base)
	2. TYPOGRAPHY (@typo)
	3. HELPERS (@helpers)
	4. LAYOUT (@layout)
	5. ELEMENTS (@elements)
	5. MEDIA QUERIES (@media)	
 -------------------------------------------- */

/* --------------------------------------------
	
	OPDATERING TIL MODERNE TECH-BAUHAUS FARVER
	Ændret: Alle referencer til de gamle primærfarver er skiftet.
	
	GAMMEL FARVE | NY FARVE | NAVN
	------------------------------------------------------------------
	#0100ff (Blå) | #0047AB | Deep Cobalt (Ny Blå)
	#ff322e (Rød) | #df1d1e | Vibrant Red (Ny Rød)
	#00b388 (Grøn) | #8CC63F | Modern Lime Green (Ny Grøn)
	
 -------------------------------------------- */

	/*  --------------------------------------------
		1. BASE (@base) - base html elements
	    -------------------------------------------- */ 
		html,
		body {
			width: 100%; height: 100%; padding: 0; margin: 0; box-sizing: border-box;
			}
		* {
			box-sizing: border-box;
			}
		body {
			font-family: 'Karla', sans-serif; color: #222; background-color: #fff; font-size: 14px; line-height: 1.7; display: flex; align-items: center;
			}
		img {
			max-width: 100%; height: auto;
			}
		::selection {
			text-shadow: none; color: #000; background: #FFF9CD;
			}
		::-moz-selection {
			text-shadow: none; color: #000; background: #FFF9CD;
			}
		/* Loader */
		html {
			overflow: hidden;
			}
		
		html.loaded {
			overflow: auto;
			}
		html:after {
			content: ""; position: fixed; z-index: 1000; top: 0; left: 0; right: 0; bottom: 0; background: white; background-image: url(/images/preloader.gif); background-position: center center; background-repeat: no-repeat; background-size: 48px 48px;
			}
			
		html.loaded:after {
			display: none;
			}
		body { /*//sikrer at siden vises, nu ovenstående preloader er udkommenteret. Ellers skal den stå til "0"*/
			transition: all .3s cubic-bezier(0.77, 0, 0.175, 1); opacity: 1; 
			}
		html.loaded body {
			opacity: 1;
			}

	/*  --------------------------------------------
	2. TYPOGRAPHY (@typo) - typographic styles
    -------------------------------------------- */
		/* LIGHT TEXT */
		.is-text-light {
			color: #fff;
			}
		.is-text-light a {
			color: #fff;
			}
			
		/*  --------------------------------------------
			3. HELPERS (@helpers) - shorthand helper styles
		    -------------------------------------------- */ 
		.rounded {
			border-radius: 50%;
			}
		.soft-rounded {
			border-radius: 8px;
			}
		.is-text-align-center {
			text-align: center;
			}
		.is-text-align-right {
			text-align: right;
			}
		.uppercase {
			text-transform: uppercase;
			}
		.bold {
			font-weight: bold;
			}

		/* SMALL TYPO */
		.is-small-typo h1 {
			font-size: 24px; line-height: 1.3;
			}
		.is-small-typo {
			font-size: 14px;
			}

		/* MEDIUM TYPO */
		.is-medium-typo h1 {
			font-size: 36px; line-height: 1.2;
			}
		.is-medium-typo {
			font-size: 15px;
			}
						
			
		/*  --------------------------------------------
			4. LAYOUT (@layout) - layout styles
		    -------------------------------------------- */ 

		/* CONTENT */

		.content {
			padding: 3em 0;
			}
			
		/* PROFILE IMAGE */
		.profile-image {
			max-height: 92px;
			}
		.profile-image.is-outside {
			margin-top: -50%; margin-bottom: 0;
			}

		/* LOGO */
		.logo {
			margin-bottom: 24px;
			}
			
		/* FRAMED */
		.is-framed:after {
			content: "" ; position: fixed; z-index: 200; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border: 15px solid #111;
			}

/*  --------------------------------------------
	5. ELEMENTS (@elements) - common used elements
-------------------------------------------- */ 	

	/* SOCIAL LINKS - BEVARES KUN BASE REGLER. ALLE IKONFARVER ER SLETTET */
	.social-link {
		display: inline-block; 
		margin: 8px 2px 8px 0; 
		text-decoration: none; 
		user-select: none;
		}
	.social-link:active {
		transform: scale(0.8);
		}
		
		/*
	.social-link:before {
		display: inline-block; padding: 0; text-align: center; font-size: 14px; font-family: "fontello"; width: 32px; line-height: 32px; color: #555; border: 1px solid #eee; border-radius: 50%; text-decoration: none; transition: all 0.3s;
		}
	html a.social-link:hover:before {
		color: #fff; background: #444; border-color: transparent;
		}
		*/
	/* ... ALLE UBrugte IKON FARVEDE REGLER ER SLETTET HERFRA ... (og ALLE UNØDVENDIGE STØRRELSER OG VARIANTER) ... */

	/* LINK HOVER EFFECTS - SLETTET ALLE UBrugte FARVER, BEVARET KUN BLÅ/RØD/GRØN/LYS */

	/* light links */
	.link-1.light:after { background: #fff; }
	.link-1.light:hover { color: #111; }
	.link-1.blue:after { background: #0047AB; }
	.link-1.green:after { background: #8CC63F; }
	.link-1.red:after { background: #df1d1e; }

	/* ... (RESTEN AF LINK 2 BASE REGLER BEHOLDES) ... */
	.link-2.light:before, .link-2.light:after { background: #fff; color: #111; }
	.link-2.blue:before, .link-2.blue:after { background: #0047AB; }
	.link-2.green:before, .link-2.green:after { background: #8CC63F; }
	.link-2.red:before, .link-2.red:after { background: #df1d1e; }

	/* BUTTONS - SLETTET ALLE UBrugte FARVER, BEVARET KUN BLÅ/RØD/GRØN/LYS */
.button {
    /* Form og ramme */
    border: 1px solid #222;      /* Tyndere ramme for mindre kognitiv støj */
    border-radius: 30px;         /* Bløde kanter (pille-form) */
    
    /* Størrelse (Slanket betydeligt) */
    padding: 8px 8px;           /* Reduceret fra 16px 32px */
    font-size: 14px;             /* Reduceret fra 16px for at undgå mobil-knæk */
    line-height: 1;
    margin: 5px 10px 5px 0;      /* Mere kompakt margin */
    
    /* Layout og interaktion */
    display: inline-flex;        /* Sikrer at ikon og tekst følges ad */
    align-items: center;
    justify-content: center;
	white-space: nowrap; /* AFGØRENDE: Forhindrer at teksten knækker inde i knappen */
    font-family: inherit;
    color: #222;
    text-decoration: none;
    background: none;
    cursor: pointer;
    outline: none;
    position: relative;
    transition: all 0.3s;
    overflow: hidden;
}
		.button:only-child {
			margin-right: 0px;
			}
		.button.small {
			font-size: 13px; padding: 8px 20px;
			}
		.button.rounded {
			border-radius: 50px;
			}
		.button.soft-rounded {
			border-radius: 5px;
			}
		.button.rounded-soft {
			border-radius: 4px;
			}
		.button:after {
			width: 0%; height: 100%; top: 0; left: 0; background: #222; content: ''; position: absolute; z-index: -1; transition: all 0.3s;
			}
		.button:hover,
		.button:active {
			color: #fff !important;
			}
		.button:active {
			transition: all 0.1s; transform: scale(0.9); outline: 0;
			}
		.button:hover:after,
		.button:active:after {
			width: 100%;
			}
	
	/* ... (RESTEN AF BUTTON BASE REGLER BEHOLDES) ... */
	.button.light { border-color: #fff; }
	.button.light:after { background: #fff; }
	.button.light:hover, .button.light:active { color: #111 !important; }
	.button.blue { border-color: #004080; color: #004080; }
	.button.blue:after { background: #004080; }
	.button.green { border-color: #8CC63F; color: #8CC63F; }
	.button.green:after { background: #8CC63F; }
	.button.red { border-color: #df1d1e; color: #df1d1e; }
	.button.red:after { background: #df1d1e; }
	/* ... (RESTEN AF BUTTON FARVER ER SLETTET) ... */

	/* HIGHLIGHT TEXT - SLETTET ALLE UBrugte FARVER, BEVARET KUN BLÅ/RØD/GRØN/LYS */
	.highlight { 
		/* NØDVENDIGT: Sikrer at padding og bredde fungerer */
		display: inline-block; 
		
		/* NYT: Sætter standard 20px padding for bredere baggrund */
		padding: 2px 20px 4px 20px;
		
		/* Nødvendigt for at farvefaden virker */
		transition: background-color 0.3s ease-in-out; 
		color: #fff !important; /* Standard tekstfarve */
		background: #111; /* Standard sort/mørk baggrund (som fallback) */
	}
	.highlight.light { 
		background: #fff; 
		color: #111; 
	}
	.highlight.blue { 
		background: #0047AB; 
	}
	.highlight.green { 
		background: #8CC63F; 
	}
	.highlight.red { 
		background: #df1d1e; 
	}
	/* ... (RESTEN AF HIGHLIGHT FARVER ER SLETTET) ... */


	/* COLORED TEXT - SLETTET ALLE UBrugte FARVER, BEVARET KUN BLÅ/RØD/GRØN */
	.text.blue { color: #0047AB; }
	.text.green { color: #8CC63F; }
	.text.red { color: #df1d1e; }
	/* ... (RESTEN AF COLORED TEXT ER SLETTET) ... */


	/* TYPED TEXT (BEVARES) */
	#typed-strings { display: none; }
	@-webkit-keyframes blink{ /* ... base rules ... */ }
	@keyframes blink{ /* ... base rules ... */ }


		/*  --------------------------------------------
			6. MEDIA QUERIES (@media) - base html elements
		    -------------------------------------------- */
		/* TABLETS */
		@media screen and (min-width: 768px) {
			
			body {
				font-size: 19px;
				}
				
			.profile-image {
				max-height: 128px;
				}	
			.profile-image.small {
				max-height: 92px;
				}
			.profile-image.big {
				max-height: 192px;
				}
		}

		/* DESKTOPS */
		@media screen and (min-width: 1200px) {
			

			/* BUTTONS */
			.button.huge {
				font-size: 20px; padding: 22px 40px;
				}	
		}

		/* DESKTOPS HIGH RES */
		@media screen and (min-width: 1600px) {
			

			.content {
				padding: 6em 0;
			}
		}

				/* Responsiv tilpasning til mobil */
		@media (max-width: 600px) {
			.ordbog-cta-card {
				flex-direction: column;
				align-items: flex-start;
				gap: 15px;
			}
		}

		@media (max-width: 1024px) { #backToTop { display: none !important; } }

/* --- ORDBOG SEKTION --- */

	/* Kategorioverskrift (f.eks. Grundbegreber) */
	.glossary-section h2 {
		margin-top: 60px;
		margin-bottom: 30px;
		border-bottom: 2px solid #333;
		padding-bottom: 10px;
		font-size: 1.6em;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	/* Container for hvert begreb */
	.ordbog-entry {
		scroll-margin-top: 100px; /* Justér dette tal efter højden på din topbar */
		margin-bottom: 60px;
		text-align: left;
	}

	/* Begrebet (H3) - Sort label style */
	.ordbog-entry h3 {
		display: inline-block;
		background: #333;
		color: #fff;
		padding: 4px 12px;
		border-radius: 4px;
		font-size: 1.1em;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin: 0 0 15px 0;
		font-weight: 700;
	}

	/* Definitionen (P) */
	.ordbog-entry p {
		margin: 0 0 15px 0;
		line-height: 1.6;
		color: #1a1a1a;
	}

	/* Fælles styling for vinkel-overskrifter (H4) */
	.ordbog-entry h4 {
		font-size: 0.9em;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 1px;
		display: block;
		margin: 0 0 8px 0;
	}

	/* Individ-vinklen boks */
	.individ-vinkel-box {
		border-left: 3px solid #3498db;
		padding-left: 20px;
		margin-top: 20px;
		margin-bottom: 15px;
	}
	.individ-vinkel-box h4 { color: #3498db; }

	/* Leder-vinklen boks */
	.leder-vinkel-box {
		border-left: 3px solid #333;
		padding-left: 20px;
		margin-top: 15px;
		margin-bottom: 25px;
	}
	.leder-vinkel-box h4 { color: #333; }

	/* --- ORDBOG CTA BOKS (Til Hubs) --- */

		.ordbog-cta-card {
			background-color: #f9f9f9 !important; /* Tvinger baggrunden frem */
			border-left: none; 
			padding: 10px;
			margin: 10px 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 20px;

			border: 1px solid #a0a0a0; 
   			border-radius: 4px;
		}

		.ordbog-cta-content h4 {
			margin: 0 0 10px 0;
			font-size: 1.1em;
			color: #333;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}

		.ordbog-cta-content p {
			margin: 0;
			font-size: 0.95em;
			line-height: 1.5;
			color: #444;
		}

		.ordbog-cta-button {
			background-color: #1a1a1a !important;
			color: #ffffff !important;
			padding: 12px 24px;
			text-decoration: none !important;
			border-radius: 4px;
			font-weight: 700;
			text-transform: uppercase;
			white-space: nowrap;
		}

		.ordbog-cta-button:hover {
			background-color: #555;
		}


		
		/* Containeren for  ORDBOG navigationen */
			.ordbog-navigation {
				display: grid;
				/* Tvinger to lige store kolonner på skærme over 768px */
				grid-template-columns: repeat(3, 1fr);
				gap: 40px;
				background-color: #f7f6f4; 
				padding: 30px;
				border-radius: 8px;
				margin: 30px 0 50px 0;
				border: 1px solid #eaeaea;
			}

			.nav-column h4 {
				color: #173569; 
				margin-top: 0;
				border-bottom: 1px solid #ddd;
				padding-bottom: 10px;
				font-size: 1.1rem;
				text-transform: none; /* Sikrer det ikke bliver prætentiøst med Caps */
			}

			.nav-column ul {
				list-style: none;
				padding: 0;
				margin: 15px 0 0 0;
			}

			.nav-column ul li {
				margin-bottom: 10px;
			}

			.nav-column ul li a {
				text-decoration: none;
				color: #444;
				font-size: 0.95rem;
				display: block; /* Gør hele linjen klikbar */
			}

			.nav-column ul li a:hover {
				color: #173569;
				text-decoration: underline;
			}

			/* FIX FOR TOPBAR */
			.ordbog-entry {
				scroll-margin-top: 120px; 
			}

			/* RESPONSIV: Gå til én kolonne på mobilen */
			@media (max-width: 768px) {
				.ordbog-navigation {
					grid-template-columns: 1fr;
					gap: 20px;
					padding: 20px;
				}
			}

			/* ORDBOG - hover - Linket i artiklen */
			.glossary-term {
				text-decoration: none;
				border-bottom: 1px dotted #0047AB; /* Deep Cobalt */
				color: inherit;
				position: relative;
				cursor: help;
			}

			/* Definition-boksen (Tooltip) */
			.glossary-tooltip {
				display: none; /* Skjult som standard */
				position: absolute;
				bottom: 130%;
				left: 50%;
				transform: translateX(-50%);
				background-color: #002D62; /* Din Dark Navy */
				color: #fff;
				padding: 12px 16px;
				border-radius: 4px;
				font-size: 14px;
				line-height: 1.5;
				width: 280px;
				z-index: 9999;
				box-shadow: 0 4px 15px rgba(0,0,0,0.3);
				pointer-events: none; /* Så den ikke skygger for klik */
			}

			/* Vis ved hover på PC */
			@media (min-width: 1025px) {
				.glossary-term:hover .glossary-tooltip {
					display: block;
				}
			}

			/* Vis når aktiv (til mobil-logik) */
			.glossary-tooltip.is-active {
				display: block;
			}
		/* PIL UP - brugt i ordbogen initielt */
		#backToTop {
			display: none; /* Korrekt: Knappen starter som skjult */
			position: fixed;
			bottom: 25px;
			right: 25px;
			z-index: 1000;
			border: none;
			outline: none;
			background-color: #333;
			color: white;
			cursor: pointer;
			padding: 0;
			border-radius: 50%;
			width: 50px;
			height: 50px;
			box-shadow: 0 4px 10px rgba(0,0,0,0.1);
			transition: opacity 0.3s, background-color 0.3s;
			
			/* Centrerings-logik (bruges når JS aktiverer knappen) */
			align-items: center;
			text-align: center;
			justify-content: center;
			line-height: 50px;
			font-size: 24px;
		}

		#backToTop:hover {
			background-color: #555;
		}

		/* Animationen der får pilen til at pege/hoppe opad */
		@keyframes bounceUp {
			0%, 100% { transform: translateY(0); }
			50% { transform: translateY(-8px); }
		}

		#backToTop .arrow {
			display: inline-block;
			transition: transform 0.2s ease;
		}

		/* Aktiver animationen ved mouse-over */
		#backToTop:hover .arrow {
			animation: bounceUp 0.6s infinite ease-in-out;
		}

		/* 1. SIKRING: Skjul knappen på alle skærme under 1024px (Mobil/Tablet) */
		@media (max-width: 1024px) { 
			#backToTop { display: none !important; } 
		}