/* Five theme: brand tokens, logo, header, footer, hero. */

:root,
.brand-discount5 {
	--five-accent: #FF4A1C;
	--five-accent-ink: #15131A;
	--five-highlight: #FFE45C;
	--five-deep: #C8290B;
	--five-soft: #FFF3C2;
	--five-hero-bg: #FFE45C;
	--five-hero-text: #15131A;
}

.brand-favorit5 {
	--five-accent: #0E5A47;
	--five-accent-ink: #FFFFFF;
	--five-highlight: #F2B01E;
	--five-deep: #0E5A47;
	--five-soft: #CFEBDD;
	--five-hero-bg: #0E5A47;
	--five-hero-text: #FFFFFF;
}

/* theme.json presets point at the brand tokens; redeclare them on body so they resolve per brand. */
body {
	--wp--preset--color--accent: var(--five-accent);
	--wp--preset--color--accent-ink: var(--five-accent-ink);
	--wp--preset--color--highlight: var(--five-highlight);
	--wp--preset--color--deep: var(--five-deep);
	--wp--preset--color--soft: var(--five-soft);
}

:root {
	--five-ink: #15131A;
	--five-ink-2: #221F28;
	--five-paper: #FAF6EF;
	--five-paper-2: #F0E9DD;
	--five-line: #DDD3C3;
	--five-muted: #5C5650;
	--five-font-display: "Bricolage Grotesque", system-ui, sans-serif;
	--five-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

body { -webkit-font-smoothing: antialiased; }
:where(a) { text-underline-offset: 0.15em; }
:where(img) { max-width: 100%; height: auto; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Logo: wordmark + "5" in a price tag (discount5) or a medal (favorit5) */
.five-logo { --_hole: var(--five-paper); display: inline-flex; align-items: center; gap: 0.12em; font-family: var(--five-font-display); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--five-ink); white-space: nowrap; }
.five-logo--s { font-size: 26px; }
.five-logo--m { font-size: 34px; }
.five-logo--l { font-size: 56px; }
.five-logo--light { color: var(--five-paper); --_hole: var(--five-ink); }
.five-logo__five { position: relative; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; }
.five-logo--discount5 .five-logo__five {
	font-size: 0.9em;
	width: 1.75em;
	height: 1.22em;
	padding-left: 0.34em;
	box-sizing: border-box;
	color: var(--five-ink);
	background: radial-gradient(circle at 0.3em 50%, var(--_hole) 0.1em, #FF4A1C 0.11em);
	clip-path: polygon(0.38em 0, 100% 0, 100% 100%, 0.38em 100%, 0 50%);
}
.five-logo--favorit5 .five-logo__five {
	font-size: 0.68em;
	width: 1.68em;
	height: 1.68em;
	margin-left: 0.1em;
	border-radius: 50%;
	color: #FFFFFF;
	background: #0E5A47;
	box-shadow: inset 0 0 0 0.12em #0E5A47, inset 0 0 0 0.18em #F2B01E;
}
.five-logo--favorit5 .five-logo__five::after {
	content: "";
	position: absolute;
	top: -0.14em;
	right: -0.2em;
	width: 0.6em;
	height: 0.6em;
	background: #F2B01E;
	clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Header */
.five-header { position: sticky; top: 0; z-index: 50; background: var(--five-paper); border-bottom: 1px solid var(--five-line); }
.admin-bar .five-header { top: var(--wp-admin--admin-bar--height, 32px); }
.five-header__inner { max-width: 1240px; margin-inline: auto; padding: 0.5rem 1rem; gap: 1rem; min-height: 64px; box-sizing: border-box; }
.five-header__logo { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.five-header .wp-block-navigation { font-weight: 600; font-size: 0.95rem; gap: 0.25rem 1.25rem; }
.five-header .wp-block-navigation a { color: var(--five-ink); text-decoration: none; }
.five-header .wp-block-navigation a:hover { text-decoration: underline; }
.five-header .wp-block-navigation__responsive-container-open,
.five-header .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.five-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--five-paper); padding: 1.5rem; }
.five-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { font-size: 1.35rem; gap: 1rem; }
.five-header .wp-block-search__input { min-height: 44px; border-radius: 999px; border-color: var(--five-line); padding-inline: 1rem; }
.five-header .wp-block-search__button { min-width: 44px; min-height: 44px; border-radius: 999px; background: var(--five-ink); color: var(--five-paper); }
@media (max-width: 781px) {
	.five-header .five-search { display: none; }
}

/* Main */
.five-main { padding-block: 0 var(--wp--preset--spacing--60); }
.five-page { padding-top: var(--wp--preset--spacing--50); }
.five-kicker { font-family: var(--five-font-mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }

/* Hero */
.five-hero { background: var(--five-hero-bg); color: var(--five-hero-text); padding-block: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 1rem; }
.five-hero > * { margin-block: 0; }
.five-hero > * + * { margin-top: 0.9rem; }
.five-hero__title { font-size: clamp(2.6rem, 8vw, 5.5rem); line-height: 0.95; letter-spacing: -0.045em; color: inherit; }
/* The constrained layout centres narrower children; pin the lead to the left edge of the 1240px column instead. */
.five-hero > .five-hero__lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 40ch; margin-left: max(0px, calc((100% - 1240px) / 2)) !important; margin-right: auto !important; }
.five-hero .five-filters { margin-top: 1.5rem; }
.brand-favorit5 .five-hero .five-kicker { color: #CFEBDD; }
.brand-favorit5 .five-hero .five-filter { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }

/* Singular */
.five-single .wp-block-post-title { margin-top: 0.5rem; }
.five-single .wp-block-post-featured-image img { border-radius: 20px; }
.five-single .wp-block-post-content > * + * { margin-top: 1.1em; }
.five-single .wp-block-post-content h2 { margin-top: 2em; }

/* Footer */
.five-footer { background: var(--five-ink); color: #C9C1B7; }
.five-footer__inner { max-width: 1240px; margin-inline: auto; padding: clamp(2rem, 5vw, 3.5rem) 1rem; box-sizing: border-box; display: grid; gap: 1.5rem; }
.five-footer__tagline { margin: 0.5rem 0 0; color: var(--five-paper); font-family: var(--five-font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }
.five-footer__disclosure { margin: 0; max-width: 70ch; font-size: 0.9rem; line-height: 1.6; }
.five-footer__links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.five-footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--five-paper); font-weight: 600; text-decoration: none; }
.five-footer__links a:hover { text-decoration: underline; }
.five-footer__legal { margin: 0; font-family: var(--five-font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* Article meta: author and date */
.five-single__meta { gap: 0.35rem 0.9rem; align-items: baseline; margin-block: 0.25rem 1rem; font-size: 0.92rem; color: var(--five-muted); }
.five-single__meta .wp-block-post-author-name::before { content: "By "; }
.five-single__meta .wp-block-post-author-name a { color: var(--five-ink); font-weight: 600; text-decoration: none; }
.five-single__meta .wp-block-post-author-name a:hover { text-decoration: underline; }
.five-single__meta .wp-block-post-date { margin: 0; }

/* Article tables: readable, and scroll sideways on phones instead of spilling out */
.five-single .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: 1.75rem; }
.five-single .wp-block-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.95rem; }
.five-single .wp-block-table th,
.five-single .wp-block-table td { padding: 0.65rem 0.8rem; border: 0; border-bottom: 1px solid var(--five-line); text-align: left; vertical-align: top; }
.five-single .wp-block-table thead th { font-family: var(--five-font-display); font-weight: 800; border-bottom: 2px solid var(--five-ink); }
.five-single .wp-block-table tbody tr:nth-child(even) { background: var(--five-paper-2); }

/* Posts page intro, and tag names (stored lowercase) shown with a capital first letter */
.five-archive-intro { max-width: 62ch; margin: -0.25rem 0 1.75rem; color: var(--five-muted); font-size: 1.05rem; }
.tag .wp-block-query-title::first-letter { text-transform: uppercase; }