/* ==========================================================================
   NP INVESTOR — DESIGNSYSTEM (Fase 1)
   Moderne finans-look: lyst indhold + moerke finans-baand.
   Alt bygger paa disse tokens. Aendr en variabel her -> aendrer hele sitet.
   ========================================================================== */

:root {
	/* --- Brand / navy (moerke baand: header, ticker, footer) --- */
	--np-navy-900: #06111f;   /* dybeste "ink"-baand */
	--np-navy-800: #0a1a30;   /* ticker / mega-menu paneler */
	--np-navy-700: #0f2643;   /* header-baggrund */
	--np-navy-600: #163a63;   /* hover / borders paa moerk */

	/* --- Tekst paa lys baggrund --- */
	--np-ink:        #0f1b2d;  /* overskrifter / broedtekst */
	--np-slate-600:  #4b5a70;  /* dæmpet tekst */
	--np-slate-400:  #8291a6;  /* meta / labels */

	/* --- Flader --- */
	--np-bg:       #ffffff;
	--np-bg-soft:  #f5f7fa;   /* sektioner / kort */
	--np-bg-alt:   #eaeff5;   /* zebra / hover */
	--np-line:     #e3e9f1;   /* borders */

	/* --- Kursretning (finans-standard) --- */
	--np-up:        #12a150;  /* op / gevinst */
	--np-up-ink:    #0e8a44;  /* op, tekst paa lys */
	--np-up-soft:   #e6f6ec;  /* op, badge-baggrund */
	--np-down:      #e5484d;  /* ned / tab */
	--np-down-ink:  #d13b40;
	--np-down-soft: #fdeceb;
	--np-flat:      #8291a6;  /* uaendret */

	/* --- Interaktiv accent (= brand-groen) --- */
	--np-accent:      #12a150;
	--np-accent-600:  #0e8a44;
	--np-accent-ink:  #ffffff;

	/* --- Typografi --- */
	--np-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--np-font-display: "Space Grotesk", var(--np-font-sans);
	--np-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* --- Radius / skygger / layout --- */
	--np-radius-sm: 8px;
	--np-radius:    12px;
	--np-radius-lg: 18px;
	--np-shadow-sm: 0 1px 2px rgba(15, 27, 45, .06), 0 1px 3px rgba(15, 27, 45, .08);
	--np-shadow-md: 0 6px 18px rgba(15, 27, 45, .08);
	--np-shadow-lg: 0 18px 40px rgba(15, 27, 45, .14);
	--np-container: 1240px;
	--np-header-h:  74px;
}

/* ==========================================================================
   BASIS-TYPOGRAFI
   ========================================================================== */
body,
.ast-container {
	font-family: var(--np-font-sans);
	color: var(--np-ink);
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "cv05", "ss01";
}

body {
	background: var(--np-bg);
	line-height: 1.65;
	letter-spacing: -0.003em;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .ast-single-post .entry-title {
	font-family: var(--np-font-display);
	color: var(--np-ink);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.18;
}

/* Tal skal altid flugte (tabular) — vigtigt for kurser/tabeller. */
.np-num,
.np-up, .np-down, .np-flat,
table td, table th {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

a {
	color: var(--np-accent);
	text-decoration: none;
	transition: color .15s ease;
}
a:hover { color: var(--np-accent-600); }

/* ==========================================================================
   FINANS-HJAELPEKLASSER (bruges i ticker, movers, tabeller mv.)
   ========================================================================== */
.np-up   { color: var(--np-up-ink);   font-family: var(--np-font-mono); font-weight: 600; }
.np-down { color: var(--np-down-ink); font-family: var(--np-font-mono); font-weight: 600; }
.np-flat { color: var(--np-flat);     font-family: var(--np-font-mono); font-weight: 600; }

.np-badge {
	display: inline-flex; align-items: center; gap: .28em;
	padding: .12em .5em; border-radius: 999px;
	font-family: var(--np-font-mono); font-size: .82em; font-weight: 600;
	line-height: 1.5;
}
.np-badge--up   { color: var(--np-up-ink);   background: var(--np-up-soft); }
.np-badge--down { color: var(--np-down-ink); background: var(--np-down-soft); }

.np-container { max-width: var(--np-container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

/* ==========================================================================
   KNAPPER
   ========================================================================== */
.wp-block-button__link,
.ast-button, button.ast-button, .button, input[type="submit"],
.np-btn {
	background: var(--np-accent);
	color: var(--np-accent-ink);
	border: 0; border-radius: var(--np-radius-sm);
	font-family: var(--np-font-sans); font-weight: 600;
	padding: .7em 1.35em;
	transition: background .15s ease, transform .15s ease;
}
.wp-block-button__link:hover,
.ast-button:hover, .button:hover, input[type="submit"]:hover,
.np-btn:hover { background: var(--np-accent-600); color: #fff; transform: translateY(-1px); }

.np-btn--ghost {
	background: transparent; color: var(--np-accent);
	box-shadow: inset 0 0 0 1.5px var(--np-line);
}
.np-btn--ghost:hover { background: var(--np-bg-soft); color: var(--np-accent-600); }

/* ==========================================================================
   HEADER — moerkt finans-baand
   ========================================================================== */
/* Hele header-omraadet bliver ét moerkt navy-baand — ogsaa logo-raekken
   (Astra Layout 2 lægger logoet i en separat raekke over menuen). */
.site-header,
#masthead,
.ast-main-header-wrap,
.main-header-bar-wrap,
.main-header-bar,
.site-primary-header-wrap,
.ast-primary-header-bar,
.ast-above-header-wrap,
.ast-above-header,
.ast-below-header-wrap,
.ast-below-header,
.site-header .site-branding,
.ast-header-break-point .site-branding {
	background-color: var(--np-navy-700) !important;
}
.site-header .ast-primary-header-bar,
.ast-primary-header-bar.main-header-bar {
	border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
	box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
/* Fjern evt. hvide baggrunde paa indre logo-containere */
.site-header .ast-site-identity,
.site-header .site-title,
.site-header .ast-logo-title-inline,
.site-header .site-header-section { background: transparent !important; }

/* Menu-links lyse, groen hover-accent */
.main-header-menu .menu-link,
.main-header-menu > .menu-item > .menu-link,
.ast-nav-menu .menu-link {
	color: rgba(255,255,255,.86) !important;
	font-family: var(--np-font-sans);
	font-weight: 500;
	letter-spacing: -0.01em;
}
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.ast-nav-menu .menu-item:hover > .menu-link {
	color: #fff !important;
}
/* Underlinje-accent paa aktivt/hover top-niveau */
.main-header-menu > .menu-item > .menu-link { position: relative; }
.main-header-menu > .menu-item > .menu-link::after {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px;
	background: var(--np-up); border-radius: 2px;
	transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.main-header-menu > .menu-item:hover > .menu-link::after,
.main-header-menu > .current-menu-item > .menu-link::after { transform: scaleX(1); }

/* Standard Astra-undermenuer paa moerk header */
.main-header-menu .sub-menu {
	background: var(--np-navy-800) !important;
	border: 1px solid rgba(255,255,255,.08) !important;
	border-radius: var(--np-radius-sm);
	box-shadow: var(--np-shadow-lg);
	padding-block: 6px;
}
.main-header-menu .sub-menu .menu-link { color: rgba(255,255,255,.78) !important; }
.main-header-menu .sub-menu .menu-item:hover > .menu-link { color: #fff !important; background: rgba(255,255,255,.06); }

/* Header-CTA: "Live Aktiekurser" — hoejrestillet groen knap m. live-indikator */
.main-header-menu .np-header-cta,
.ast-nav-menu .np-header-cta,
.main-header-menu.ast-nav-menu > .np-header-cta {
	margin-left: auto;
	display: flex;
	align-items: center;
}
.np-cta-btn,
.main-header-menu .np-header-cta > .np-cta-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--np-up); color: #fff !important;
	font-family: var(--np-font-sans); font-weight: 600; font-size: 14px;
	padding: 9px 16px; border-radius: var(--np-radius-sm); line-height: 1;
	transition: background .15s ease, transform .15s ease;
}
.np-cta-btn:hover { background: var(--np-accent-600); color: #fff !important; transform: translateY(-1px); }
.np-cta-btn::after { display: none !important; } /* undgaa top-menu underlinjen */
.np-cta-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; }
.np-cta-dot::after {
	content: ""; position: absolute; inset: -4px; border-radius: 50%;
	background: rgba(255,255,255,.55); animation: np-pulse 1.8s ease-out infinite;
}
@keyframes np-pulse { 0% { transform: scale(.55); opacity: .85; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .np-cta-dot::after { animation: none; } }

/* Mobil-menu toggle lys */
.ast-mobile-menu-buttons .menu-toggle,
.ast-header-navigation-wrap .ast-button-wrap .menu-toggle {
	color: #fff !important; background: transparent !important;
}

/* ==========================================================================
   LOGO
   ========================================================================== */
.np-logo {
	display: inline-flex; align-items: center; gap: 11px;
	color: #ffffff;                 /* paa moerk header */
	line-height: 1;
}
.np-logo:hover { color: #ffffff; }
.np-logo__mark { width: 38px; height: 38px; flex: none; display: block; }
.np-logo__tile { fill: none; stroke: currentColor; stroke-opacity: .55; }
.np-logo__line, .np-logo__arrow { stroke: var(--np-up); }
.np-logo__dot { fill: var(--np-up); }
.np-logo__word {
	font-family: var(--np-font-display);
	font-size: 25px; font-weight: 700; letter-spacing: -0.03em;
	color: currentColor; white-space: nowrap;
}
.np-logo__word b { font-weight: 700; }
.np-logo__word span { font-weight: 500; color: rgba(255,255,255,.72); }

/* Sikr at Astras evt. site-title ikke ogsaa vises ved siden af vores logo */
.site-header .site-logo-img,
.ast-site-identity .site-title,
.ast-site-identity .site-description { display: none; }
.ast-site-identity { padding: 0; }

/* ==========================================================================
   GENERELLE INDHOLDS-FORBEDRINGER (let touch i fase 1)
   ========================================================================== */
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
article.ast-separate-container .ast-article-inner {
	border-radius: var(--np-radius);
}

/* Links i broedtekst faar en diskret underlinje for laesbarhed */
.entry-content a:not(.wp-block-button__link):not(.np-btn) {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--np-accent) 40%, transparent);
	text-underline-offset: 2px;
}

/* ==========================================================================
   PAATVUNGET BRAND-TYPOGRAFI
   Astra saetter fonts via dynamisk inline-CSS med hoej specificitet — vi
   tvinger vores fonts igennem, saa sitet matcher designet.
   ========================================================================== */
body, button, input, select, textarea, .ast-container,
p, li, .entry-content, .ast-loop-post {
	font-family: var(--np-font-sans) !important;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .entry-title a,
.ast-loop-post .entry-title, .ast-loop-post .entry-title a,
.widget-title, .ast-single-related-posts-title, .np-logo__word {
	font-family: var(--np-font-display) !important;
}
/* Menu-links skal vaere Inter (UI), ikke overskrift-fonten */
.main-header-menu .menu-link, .main-header-menu a,
.ast-nav-menu .menu-link, .ast-nav-menu a,
.ast-header-navigation-wrap a, .np-cta-btn,
.sub-menu .menu-link, .sub-menu a {
	font-family: var(--np-font-sans) !important;
}
.np-num, .np-up, .np-down, .np-flat,
.np-ticker, .np-ticker *,
code, kbd, pre, samp {
	font-family: var(--np-font-mono) !important;
}

/* ==========================================================================
   SINGLE-ROW HEADER — logo til venstre, menu til hoejre
   Overstyrer Astra "Layout 2" (logo centreret oeverst) til én raekke.
   ========================================================================== */
.site-header .ast-main-header-bar-alignment,
.site-header .main-header-container {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
}
.site-header .site-branding {
	margin: 0 32px 0 0 !important;
	text-align: left !important;
	flex: 0 0 auto;
	width: auto !important;
	max-width: none !important;
}
.site-header .main-header-bar-navigation {
	flex: 1 1 auto !important;
	width: auto !important;
}

/* ==========================================================================
   LIVE TICKER-BAAND (under headeren)
   ========================================================================== */
.np-ticker {
	background: var(--np-navy-900);
	border-top: 1px solid rgba(255,255,255,.06);
	border-bottom: 1px solid rgba(255,255,255,.06);
	overflow: hidden;
	display: none;                 /* vises foerst naar data er hentet (is-ready) */
}
.np-ticker.is-ready { display: block; }
.np-ticker__track {
	display: inline-flex;
	white-space: nowrap;
	will-change: transform;
	animation: np-ticker-scroll 90s linear infinite;
}
.np-ticker:hover .np-ticker__track { animation-play-state: paused; }
.np-ticker__item {
	display: inline-flex; align-items: baseline; gap: 9px;
	padding: 9px 22px;
	border-right: 1px solid rgba(255,255,255,.06);
	font-size: 13px; line-height: 1;
}
.np-ticker__name  { color: rgba(255,255,255,.66); font-weight: 500; }
.np-ticker__price { color: #fff; font-weight: 600; }
.np-ticker__chg--up   { color: #3ddc84; font-weight: 600; }  /* lys groen paa moerk bg */
.np-ticker__chg--down { color: #ff6b6b; font-weight: 600; }  /* lys roed paa moerk bg */
@keyframes np-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .np-ticker__track { animation: none; } }

/* ==========================================================================
   NYHEDS-KORT (deles af forside + "Andre laeser ogsaa")
   ========================================================================== */
.np-card {
	background: var(--np-bg);
	border: 1px solid var(--np-line);
	border-radius: 12px; overflow: hidden;
	display: flex; flex-direction: column;
	transition: box-shadow .18s ease, transform .18s ease;
}
.np-card:hover { box-shadow: var(--np-shadow-md); transform: translateY(-2px); }
.np-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--np-bg-alt); }
.np-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-card__img--placeholder { background: var(--np-bg-alt); }
.np-card__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.np-card__cat {
	align-self: flex-start; font-family: var(--np-font-sans);
	font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: var(--np-up-ink);
}
.np-card__cat:hover { color: var(--np-accent-600); }
.np-card__title { margin: 0; font-size: 18px; line-height: 1.25; }
.np-card__title a { color: var(--np-ink); }
.np-card__title a:hover { color: var(--np-accent); }
.np-card__excerpt { margin: 0; color: var(--np-slate-600); font-size: 14px; line-height: 1.55; }
.np-card__meta { margin-top: auto; color: var(--np-slate-400); font-size: 12.5px; }
.np-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }

/* ==========================================================================
   LOGO TIL VENSTRE (Astra Header Builder)
   Builder rendrer primary-raekken som CSS-grid med logoet i midter-sektionen.
   Vi tvinger raekken til flex, saa logoet lander til venstre og evt. menu/knap
   i samme raekke skubbes til hoejre.
   ========================================================================== */
.ast-primary-header-bar .ast-builder-grid-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	gap: 28px;
}
.ast-primary-header-bar .site-header-primary-section-left { flex: 0 0 auto; }
.ast-primary-header-bar .site-header-primary-section-center {
	justify-content: flex-start !important;
	flex: 0 0 auto;
	text-align: left !important;
}
.ast-primary-header-bar .site-header-primary-section-right { margin-left: auto !important; }
.ast-primary-header-bar .site-header-section { justify-content: flex-start !important; }

/* ==========================================================================
   DISCLAIMER-BOKS (foer indhold paa indlaeg + sider)
   ========================================================================== */
.np-disclaimer {
	margin: 0 0 26px;
	padding: 11px 16px;
	border: 1px solid var(--np-line);
	border-left: 3px solid var(--np-slate-400);
	border-radius: 8px;
	background: var(--np-bg-soft);
	font-family: var(--np-font-sans);
	font-size: 12.5px; line-height: 1.55; color: var(--np-slate-600);
}
.np-disclaimer strong { color: var(--np-ink); }
.np-disclaimer__text {
	margin: 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.np-disclaimer.is-open .np-disclaimer__text { -webkit-line-clamp: unset; overflow: visible; }
.np-disclaimer__toggle {
	margin-top: 5px; padding: 0; background: none; border: 0; cursor: pointer;
	font-family: var(--np-font-sans); font-size: 12.5px; font-weight: 600; color: var(--np-accent);
}
.np-disclaimer__toggle:hover { text-decoration: underline; }

/* "Online nu"-indikator (forfattere skriver 24/7 som AI) */
.np-online-dot {
	display: inline-block; width: 10px; height: 10px; border-radius: 50%;
	background: var(--np-up); box-shadow: 0 0 0 2px #fff;
}
.np-online-badge {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--np-font-sans); font-size: 13px; font-weight: 600; color: var(--np-up-ink);
}
.np-online-badge .np-online-dot { position: relative; box-shadow: none; }
.np-online-badge .np-online-dot::after {
	content: ""; position: absolute; inset: -4px; border-radius: 50%;
	background: rgba(18,161,80,.4); animation: np-pulse 1.8s ease-out infinite;
}