/*
Theme Name: Fbold Forside
Theme URI: https://fbold.dk
Author: fbold.dk
Description: Forside til fbold.dk med platformens fodboldprojekter: VFF Pigeakademi, Player IQ og Extranet. Blok-tema med SEO-grundlag (titel, meta description, Open Graph og strukturerede data).
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fbold-forside
*/

/* ---------- Grundlag ---------- */
body { margin: 0; -webkit-font-smoothing: antialiased; }
.wp-site-blocks { padding: 0; min-height: 100vh; display: flex; flex-direction: column; }
.fbold-main { flex: 1 0 auto; background: #f4f4f1; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.fbold-main > * + * { margin-block-start: 0; }

.fbold-eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #2c463c;
}

/* ---------- Header ---------- */
.fbold-header {
	box-sizing: border-box;
	min-height: 76px;
	padding: 0 80px;
	background: #f4f4f1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.fbold-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.fbold-logo:hover { color: var(--wp--preset--color--green); }
.fbold-logo__icon { color: var(--wp--preset--color--green); flex-shrink: 0; }

.fbold-nav { font-size: 14px; font-weight: 600; }
.fbold-nav .wp-block-navigation__container { gap: 36px; }
.fbold-nav a,
.fbold-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); text-decoration: none; }
.fbold-nav a:hover { color: var(--wp--preset--color--green); }
.fbold-nav .wp-block-navigation__submenu-container {
	border: 1px solid #e0e3dd !important;
	border-radius: 6px;
	padding: 6px 0;
	box-shadow: 0 10px 30px rgba(16, 35, 27, 0.12);
}
.fbold-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 8px 16px; }

/* ---------- Hero med projekter ---------- */
.fbold-hero {
	padding: 48px 80px 56px;
	background: #f1f2ee url("assets/images/hero-bg.jpg") center bottom / cover no-repeat;
}
.fbold-hero__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	gap: 40px;
	align-items: flex-start;
}
.fbold-hero__intro {
	flex: 0 0 420px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-top: 6px;
}
.fbold-hero__title {
	margin: 0;
	font-size: 46px;
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.025em;
}
.fbold-hero__lead {
	margin: 0;
	max-width: 340px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.fbold-cards {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	align-items: stretch;
}
.fbold-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--wp--preset--color--paper);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(16, 35, 27, 0.14);
	scroll-margin-top: 24px;
}
.fbold-card__img { margin: 0; }
.fbold-card__img img {
	display: block;
	width: 100%;
	height: 134px;
	object-fit: cover;
}
.fbold-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 20px 22px;
}
.fbold-card__icon { display: block; color: var(--wp--preset--color--green); }
.fbold-card__title {
	margin: 4px 0 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}
.fbold-card__text {
	flex: 1 1 auto;
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}
.fbold-card__buttons {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	margin: 0;
	padding-top: 6px;
}
.fbold-card__buttons .wp-block-button { flex: 1 1 0; margin: 0; }
.fbold-card__buttons .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0 6px;
	white-space: nowrap;
	border: 1.5px solid var(--wp--preset--color--green);
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}
.fbold-card__buttons .wp-block-button:not(.is-style-outline):not(.fbold-soon):not(.is-style-soon) .wp-block-button__link:not(.has-background):hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}
.fbold-card__buttons .is-style-outline .wp-block-button__link:not(.has-background) {
	background: #ffffff;
}
.fbold-card__buttons .is-style-outline .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--ink);
}
.fbold-card__buttons .is-style-outline .wp-block-button__link:not(.has-background):hover { background: #e7ece6; }
/* "Kommer snart" – standardudseende. Farver valgt i editoren vinder altid. */
.fbold-card__buttons :is(.fbold-soon, .is-style-soon) .wp-block-button__link:not(.has-background) {
	background: var(--wp--preset--color--soft);
	border-color: var(--wp--preset--color--soft);
}
.fbold-card__buttons :is(.fbold-soon, .is-style-soon) .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--muted);
}
.fbold-card__buttons :is(.fbold-soon, .is-style-soon) .wp-block-button__link:not([href]) {
	cursor: default;
}

/* ---------- Om ---------- */
.fbold-om {
	padding: 72px 80px;
	background: #f4f4f1;
	border-top: 1px solid #e0e3dd;
	scroll-margin-top: 0;
}
.fbold-om__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px;
}
.fbold-om__head { display: flex; flex-direction: column; gap: 12px; }
.fbold-om__title {
	margin: 0;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.02em;
}
.fbold-om__text { display: flex; flex-direction: column; gap: 16px; }
.fbold-om__text p {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

/* ---------- Footer ---------- */
.fbold-footer {
	padding: 44px 80px;
	background: var(--wp--preset--color--ink);
	color: #e6ede8;
}
.fbold-footer__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 32px;
}
.fbold-footer__brand { display: flex; flex-direction: column; gap: 6px; }
.fbold-footer__name { margin: 0; font-size: 20px; font-weight: 800; color: #ffffff; }
.fbold-footer__meta { margin: 0; font-size: 14px; color: #b6c4bb; }
.fbold-footer__links {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	font-size: 14px;
	font-weight: 600;
	color: #b6c4bb;
}
.fbold-footer__links a { color: #ffffff; text-decoration: none; }
.fbold-footer__links a:hover { text-decoration: underline; }

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
	.fbold-hero__inner { flex-direction: column; gap: 32px; }
	.fbold-hero__intro { flex: none; max-width: 560px; }
	.fbold-hero__lead { max-width: 460px; }
	.fbold-cards { width: 100%; }
}

/* ---------- Mobil ---------- */
@media (max-width: 781px) {
	.fbold-header { min-height: 64px; padding: 0 20px; }
	.fbold-logo { font-size: 21px; gap: 8px; }
	.fbold-logo__icon { width: 26px; height: 26px; }

	.fbold-hero {
		padding: 36px 20px 40px;
		background-size: auto 380px;
		background-position: 12% 0;
	}
	.fbold-hero__intro { gap: 14px; padding-top: 0; }
	.fbold-eyebrow { font-size: 11px; }
	.fbold-hero__title { font-size: 36px; }
	.fbold-hero__lead { font-size: 16px; }
	.fbold-hero__inner { gap: 110px; }
	.fbold-cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.fbold-card__img img { height: 170px; }
	.fbold-card__title { font-size: 19px; }
	.fbold-card__text { font-size: 15px; }
	.fbold-card__buttons .wp-block-button__link { min-height: 46px; font-size: 14px; }

	.fbold-om { padding: 48px 20px; }
	.fbold-om__inner { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.fbold-om__title { font-size: 26px; }

	.fbold-footer { padding: 40px 20px; }
	.fbold-footer__inner { flex-direction: column; gap: 24px; }
	.fbold-footer__links { flex-direction: column; gap: 12px; font-size: 15px; }
}


/* Knapper med egen baggrundsfarve fra editoren: rammen følger farven */
.fbold-card__buttons .wp-block-button__link.has-background { border-color: transparent; }