/*
Theme Name: Ordkraft Kommunikation
Theme URI: https://ordkraft.dk
Author: Ordkraft Kommunikation
Description: Bloktema til Ordkraft Kommunikation – taler, tekster og kommunikationsrådgivning. Alle tekster redigeres direkte i WordPress' blok-editor.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ordkraft
*/

/* ---------- Grundlæggende ---------- */
:root {
	--ok-radius: 20px;
	--ok-section: clamp(64px, 9vw, 112px);
}

body { -webkit-font-smoothing: antialiased; }

.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-post-content > .alignfull,
.wp-block-post-content > .alignfull + * { margin-block-start: 0; }

a { text-underline-offset: 0.18em; }

/* ---------- Sektioner ---------- */
.ok-section { padding-block: var(--ok-section); }
.ok-section.ok-hero { padding-block: clamp(56px, 8vw, 96px) clamp(56px, 7vw, 88px); }
.ok-section-head { margin-block-end: 48px !important; }
.ok-section-head > * { margin: 0; }

.is-style-ok-mork {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
.is-style-ok-mork p:not(.ok-eyebrow):not(.ok-tal),
.is-style-ok-mork li { color: #C9CDD3; }
.is-style-ok-mork a:not(.wp-element-button),
.is-style-ok-mork h1, .is-style-ok-mork h2, .is-style-ok-mork h3, .is-style-ok-mork h4 { color: var(--wp--preset--color--white); }
.is-style-ok-mork .ok-eyebrow,
.is-style-ok-mork .ok-tal { color: var(--wp--preset--color--accent-light) !important; }

.is-style-ok-accent {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}
.is-style-ok-accent a:not(.wp-element-button),
.is-style-ok-accent h1, .is-style-ok-accent h2, .is-style-ok-accent h3 { color: var(--wp--preset--color--white); }
.is-style-ok-accent p { color: #E6E9FF; }
.is-style-ok-accent .is-style-ok-kort p,
.is-style-ok-accent .is-style-ok-kort { color: var(--wp--preset--color--ink); }

.is-style-ok-tonet { background: var(--wp--preset--color--tint); }

.ok-border-top { border-top: 1px solid var(--wp--preset--color--line); }
.ok-border-y { border-block: 1px solid var(--wp--preset--color--line); }

/* ---------- Typografi-hjælpere ---------- */
.ok-eyebrow {
	font-size: 14px !important;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.ok-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--wp--preset--color--muted); max-width: 620px; }
.is-style-ok-mork .ok-lead, .is-style-ok-accent .ok-lead { color: inherit; }
.ok-muted { color: var(--wp--preset--color--muted); }
.ok-small { font-size: 15px; }
.ok-breadcrumb { font-size: 14px; color: var(--wp--preset--color--grey); }
.ok-breadcrumb a { color: var(--wp--preset--color--grey); }

.ok-tal {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 44px;
	line-height: 1.1;
	color: var(--wp--preset--color--accent);
	margin-bottom: 4px !important;
}
.ok-stat {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 36px;
	line-height: 1.1;
	margin-top: 0 !important;
}
.ok-stat-label { font-size: 14px; color: var(--wp--preset--color--grey); margin-bottom: 0 !important; }
.ok-pris {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(34px, 3.5vw, 44px);
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.ok-nummer {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 15px;
	color: var(--wp--preset--color--accent);
}

/* ---------- Kort ---------- */
.ok-kort,
.is-style-ok-kort {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ok-radius);
	padding: clamp(24px, 3vw, 36px);
	color: var(--wp--preset--color--ink);
}
.ok-kort > :first-child, .is-style-ok-kort > :first-child { margin-top: 0; }
.ok-kort.ok-fremhaevet { border: 2px solid var(--wp--preset--color--accent); }
.ok-kort ul { font-size: 15px; color: var(--wp--preset--color--muted); padding-left: 18px; }
.ok-kort p { color: var(--wp--preset--color--muted); }
.ok-kort h3 { color: var(--wp--preset--color--ink); }
.ok-kort .ok-pris, .ok-kort .ok-nummer { color: inherit; }
.ok-kort .ok-nummer { color: var(--wp--preset--color--accent); }
.is-style-ok-accent .ok-kort a:not(.wp-element-button),
.is-style-ok-mork .ok-kort a:not(.wp-element-button) { color: var(--wp--preset--color--accent); }
.is-style-ok-mork .ok-kort h4, .is-style-ok-accent .ok-kort h4 { color: var(--wp--preset--color--ink); }
.wp-block-column.ok-kort { display: flex; flex-direction: column; }
.wp-block-column.ok-kort > .wp-block-buttons:last-child,
.wp-block-column.ok-kort > p:last-child { margin-top: auto; padding-top: 12px; }

.ok-badge {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white) !important;
	font-size: 13px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 999px;
	width: fit-content;
}

.ok-trin { border-top: 3px solid currentColor; padding-top: 20px; }
.ok-trin > * { margin-top: 0; }
.ok-trin h3 { font-family: var(--wp--preset--font-family--body); font-size: 20px; font-weight: 600; letter-spacing: 0; margin-bottom: 8px; }
.ok-trin p:not(.ok-tal) { font-size: 16px; }

.ok-linje { border-top: 1px solid currentColor; padding-top: 20px; }

.ok-billede {
	background: #D5D9EE;
	border-radius: var(--ok-radius);
	min-height: 220px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: #4A5163;
	font-size: 14px;
}
.ok-billede.ok-portraet { aspect-ratio: 4 / 5; background: var(--wp--preset--color--line); color: var(--wp--preset--color--grey); }
.ok-billede.ok-stort { min-height: clamp(260px, 36vw, 520px); }

/* Kundelogoer */
.ok-kunder { gap: 16px 48px !important; }
.ok-kunder p { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 20px; color: #8A8F97; }
.ok-kunder p.ok-small { font-family: var(--wp--preset--font-family--body); font-weight: 400; font-size: 14px; color: var(--wp--preset--color--grey); }

/* Citater */
.wp-block-quote.is-style-ok-stor { border: 0; padding: 0; margin: 0; max-width: 900px; }
.wp-block-quote.is-style-ok-stor p {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: inherit;
}
.wp-block-quote.is-style-ok-stor cite { display: block; margin-top: 20px; font-size: 15px; font-style: normal; color: var(--wp--preset--color--muted); }
.is-style-ok-mork .wp-block-quote.is-style-ok-stor cite { color: #C9CDD3; }
.ok-citatboks { border-radius: 24px; padding: clamp(32px, 6vw, 72px) !important; }

/* Knapper */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid currentColor;
	padding: 14px 27px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); }
.wp-block-button.is-style-ok-accent > .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--white); }
.wp-block-button.is-style-ok-accent > .wp-block-button__link:hover { background: var(--wp--preset--color--ink); }
.wp-block-button.is-style-ok-lys > .wp-block-button__link { background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); }
.wp-block-button.is-style-ok-lys > .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); }
.ok-kort .wp-block-buttons, .ok-kort .wp-block-button, .ok-kort .wp-block-button__link { width: 100%; text-align: center; }
.is-style-ok-mork .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--white); }

/* Pil-links */
.ok-pil a { font-weight: 600; color: var(--wp--preset--color--ink); text-decoration: none; }
.ok-pil a:hover { color: var(--wp--preset--color--accent); }
.is-style-ok-mork .ok-pil a { color: var(--wp--preset--color--white); text-decoration: underline; }

/* FAQ */
.wp-block-details { border-top: 1px solid #C9CBC4; padding-block: 20px; margin: 0 !important; }
.wp-block-details:last-of-type { border-bottom: 1px solid #C9CBC4; }
.wp-block-details summary { font-weight: 600; font-size: 19px; cursor: pointer; }
.wp-block-details > p { color: var(--wp--preset--color--muted); margin-top: 12px; }

/* Faktaboks på cases */
.ok-fakta { border-top: 1px solid var(--wp--preset--color--line); padding-top: 24px; gap: 24px 64px !important; }
.ok-fakta p { margin: 0; }
.ok-fakta .ok-stat-label + p { font-weight: 600; }

/* ---------- Sidehoved ---------- */
.ok-header { border-bottom: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper); padding-block: 18px; }
.ok-logo { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; line-height: 1; }
.ok-logo a { color: var(--wp--preset--color--ink); text-decoration: none; }
.ok-logo mark { background: none; color: var(--wp--preset--color--accent); }
.ok-logo-sub { margin: 2px 0 0 !important; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--grey); }
.ok-logo-wrap { gap: 0 !important; }
.ok-nav a { color: var(--wp--preset--color--ink); text-decoration: none; }
.ok-nav a:hover, .ok-nav .current-menu-item > a { color: var(--wp--preset--color--accent); }
.ok-header .wp-block-button__link { padding: 11px 20px; font-size: 15px; }

/* ---------- Sidefod ---------- */
.ok-footer { background: var(--wp--preset--color--ink); color: #C9CDD3; font-size: 15px; padding-block: 48px; }
.ok-footer a { color: #C9CDD3; }
.ok-footer a:hover { color: var(--wp--preset--color--white); }
.ok-footer .ok-footer-navn { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 22px; color: var(--wp--preset--color--white); margin: 0; }
.ok-footer p { margin: 0; }

/* ---------- Indlæg og cases i lister ---------- */
.ok-case-kort { padding: 0 !important; overflow: hidden; height: 100%; }
.ok-case-kort .wp-block-post-featured-image { margin: 0; }
.ok-case-kort .wp-block-post-featured-image img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.ok-case-kort > :not(.wp-block-post-featured-image) { padding-inline: 28px; }
.ok-case-kort > :last-child { padding-bottom: 28px; }
.ok-case-kort > .wp-block-post-title:first-child { padding-top: 28px; }
.ok-case-kort .wp-block-post-title { font-size: 24px; margin-top: 20px; }
.ok-case-kort .wp-block-post-title a { text-decoration: none; }
.ok-case-kort .wp-block-post-excerpt { font-size: 16px; color: var(--wp--preset--color--muted); }
.ok-case-kort .wp-block-post-excerpt__more-text { display: none; }

.ok-indlaeg .wp-block-post-title { font-size: 24px; line-height: 1.2; margin-top: 8px; }
.ok-indlaeg .wp-block-post-title a { text-decoration: none; }
.ok-indlaeg .wp-block-post-date { font-size: 14px; color: var(--wp--preset--color--grey); }

.wp-block-query-pagination { margin-top: 48px; }

/* ---------- Artikler ---------- */
.ok-artikel .wp-block-post-content > * { max-width: 760px; }
.ok-artikel h2 { font-size: clamp(28px, 3vw, 36px); margin-top: 2em; }

/* ---------- Kontaktformular ---------- */
.ok-form { display: flex; flex-direction: column; gap: 16px; }
.ok-form .ok-row { display: flex; flex-wrap: wrap; gap: 16px; }
.ok-form .ok-row > label { flex: 1 1 180px; }
.ok-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--wp--preset--color--ink); }
.ok-form input, .ok-form select, .ok-form textarea {
	font: inherit; font-weight: 400; font-size: 16px;
	padding: 12px 14px; border: 1px solid #C9CBC4; border-radius: 10px;
	min-height: 46px; box-sizing: border-box; background: #fff; color: var(--wp--preset--color--ink); width: 100%;
}
.ok-form textarea { resize: vertical; min-height: 120px; }
.ok-form input:focus, .ok-form select:focus, .ok-form textarea:focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; }
.ok-form button {
	font: inherit; font-weight: 600; background: var(--wp--preset--color--ink); color: #fff;
	border: 0; border-radius: 999px; padding: 15px 28px; min-height: 48px; cursor: pointer; align-self: flex-start;
}
.ok-form button:hover { background: var(--wp--preset--color--accent); }
.ok-form .ok-hp { position: absolute !important; left: -9999px !important; }
.ok-form-besked { padding: 16px 20px; border-radius: 12px; font-weight: 500; }
.ok-form-besked.ok-succes { background: #E6F4EC; color: #1F5C43; }
.ok-form-besked.ok-fejl { background: #FBE9E7; color: #8C1D18; }
.ok-form .ok-samtykke { font-size: 13px; font-weight: 400; color: var(--wp--preset--color--grey); }

/* ---------- Diverse layout ---------- */
.ok-hero h1 { max-width: 1000px; margin-block: 0 40px; }
.ok-hero .ok-breadcrumb { margin-block-end: 20px; }
.ok-gap-stor { gap: clamp(32px, 5vw, 64px) !important; }
.ok-hvid { background: var(--wp--preset--color--white); }
.ok-kunder-sektion { padding-block: 28px; }
.ok-stats { gap: 32px !important; margin-block: 8px 24px !important; }
.ok-stats > .wp-block-group { gap: 0 !important; }
.ok-cta h2 { max-width: 680px; margin: 0; }
.ok-resultat { border-top: 3px solid var(--wp--preset--color--accent); padding-top: 12px; }
.ok-resultat > * { margin: 0; }
.ok-case-afsnit { margin-block: clamp(48px, 6vw, 72px) 0 !important; gap: 24px 64px !important; }
.ok-case-afsnit h2 { font-size: 36px; }
.ok-case-hero { padding-bottom: 48px !important; }
.ok-case-hero h1 { font-size: clamp(40px, 6vw, 80px); }
.ok-case-hero .wp-block-post-featured-image img { border-radius: 24px; max-height: 560px; object-fit: cover; width: 100%; }
.ok-case-indhold { padding-bottom: var(--ok-section); }
.ok-case-indhold > .ok-citatboks { margin-block-start: clamp(64px, 8vw, 112px) !important; }
.ok-artikel .wp-block-post-featured-image img { border-radius: var(--ok-radius); }
.wp-block-post-template.is-layout-grid { gap: 20px; }
.ok-indlaeg .wp-block-post-excerpt { font-size: 16px; color: var(--wp--preset--color--muted); }

/* ---------- Mobil ---------- */
@media (max-width: 781px) {
	.wp-block-post-template.is-layout-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 781px) {
	.ok-section-head { margin-block-end: 32px !important; }
	.ok-header .wp-block-button__link { padding: 9px 16px; font-size: 14px; }
}