/*
Theme Name:  Styrk Theme
Version:     1.1.0
Author:      Styrk Reklame AS
Description: Standalone FSE theme paired with the Styrk Blocks plugin. Brand palette, typography and page content are swappable per client via theme.json and block content.
Text Domain: styrk-theme
Requires at least: 6.4
Requires PHP: 8.1
*/

/* ── Hide default WP post title on FRONTPAGE only ─────────────────────────── */
body.home .entry-header,
body.home .entry-title,
body.home .wp-block-post-title {
	display: none !important;
	height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}

/*
 * ── Header template part: always absolute, always zero flow-height ──────────
 */
header.wp-block-template-part {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 0 !important;
	overflow: visible !important;
	z-index: 100;
	/* Solid dark bg so WAVE evaluates white nav text against it — visually
	   invisible because the hero section beneath is the same dark color. */
	background-color: var(--wp--preset--color--primary, #00486A);
}

/*
 * ── Zero out the default WP template top-margin ─────────────────────────────
 */
main.wp-block-group {
  margin-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   INNER PAGE HERO — .cb-page-hero
   Hardcoded dark band at the top of every inner page. Pulls the page title
   automatically via wp:post-title. Visually matches the existing hero blocks
   on /tjenester and /kontakt but is template-driven, not editor-driven.
   ══════════════════════════════════════════════════════════════════════════ */

.cb-page-hero {
	position:       relative;
	width:          100%;
	background:     #00486A !important;
	color:          #ffffff !important;
	padding:        200px 24px 96px !important; /* 100px header + 100px breathing + 96px bottom */
	margin:         0 !important;
	max-width:      none !important;
	text-align:     left;
}

.cb-page-hero h1.wp-block-post-title,
.cb-page-hero .cb-page-hero__title {
	color:          #ffffff !important;
	font-size:      56px;
	font-weight:    700;
	line-height:    1.1;
	letter-spacing: -0.025em;
	margin:         0 auto !important;
	max-width:      720px;
}

@media (max-width: 1024px) {
	.cb-page-hero {
		padding: 156px 24px 72px !important; /* 88px header + 68px + 72px bottom */
	}
	.cb-page-hero h1.wp-block-post-title,
	.cb-page-hero .cb-page-hero__title {
		font-size: 44px;
	}
}

@media (max-width: 640px) {
	.cb-page-hero {
		padding: 116px 20px 56px !important; /* 72px header + 44px + 56px bottom */
	}
	.cb-page-hero h1.wp-block-post-title,
	.cb-page-hero .cb-page-hero__title {
		font-size: 32px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   INNER PAGE CONTENT — .cb-page-main
   Below the hero. Full-bleed blocks break out edge-to-edge.
   Prose gets a readable max-width via WP constrained layout.
   ══════════════════════════════════════════════════════════════════════════ */

main.cb-page-main {
	padding: 64px 0 96px !important;
	max-width: none !important;
	margin: 0 !important;
}
/* Remove the global prose padding inside .cb-page-main — the constrained
   layout already centers content. The global rule (.wp-site-blocks ... > p
   padding-left:24px) causes misalignment with the H1. */
main.cb-page-main .wp-block-post-content > p,
main.cb-page-main .wp-block-post-content > h1,
main.cb-page-main .wp-block-post-content > h2,
main.cb-page-main .wp-block-post-content > h3,
main.cb-page-main .wp-block-post-content > h4,
main.cb-page-main .wp-block-post-content > ul,
main.cb-page-main .wp-block-post-content > ol {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* (Removed: a previous template variant rendered .cb-page-hero with a
   hardcoded post-title band, then this rule hid any hero block at the
   start of post-content to avoid duplication. The template now uses
   styrk-blocks/page-auto-hero, which handles the duplicate case in PHP
   by opting out when a hero block is the first item in post-content.
   Keeping a CSS hider here would override the admin's own hero
   configuration on inner pages.) */

/* ── Prose content — paragraphs, lists, headings inside post-content ───── */
main.cb-page-main .wp-block-post-content > p,
main.cb-page-main .wp-block-post-content > ul,
main.cb-page-main .wp-block-post-content > ol {
	margin-top: 0 !important;
	margin-bottom: 32px !important;
}
main.cb-page-main .wp-block-post-content > h2,
main.cb-page-main .wp-block-post-content > h3,
main.cb-page-main .wp-block-post-content > h4 {
	margin-top: 48px !important;
	margin-bottom: 16px !important;
}
/* Lead paragraph — first <p> after a heading or at the very start */
main.cb-page-main .wp-block-post-content > p:first-child {
	font-size: 20px;
	line-height: 1.65;
	color: rgba(0, 72, 106, 0.85);
	margin-bottom: 40px !important;
}

/* ── Full-bleed blocks inside page template — break out of constrained ── */
main.cb-page-main .wp-block-post-content > .alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ── Block-to-block spacing for full-width sections ─────────────────────── */
main.cb-page-main .wp-block-post-content > .alignfull + .alignfull {
	margin-top: 0 !important;
}
main.cb-page-main .wp-block-post-content > p + .alignfull,
main.cb-page-main .wp-block-post-content > ul + .alignfull,
main.cb-page-main .wp-block-post-content > ol + .alignfull,
main.cb-page-main .wp-block-post-content > h2 + .alignfull,
main.cb-page-main .wp-block-post-content > h3 + .alignfull {
	margin-top: 64px !important;
}
main.cb-page-main .wp-block-post-content > .alignfull + p,
main.cb-page-main .wp-block-post-content > .alignfull + h2,
main.cb-page-main .wp-block-post-content > .alignfull + h3 {
	margin-top: 64px !important;
}

/* ── Edge padding for narrow viewports — prevents text hitting screen edge.
   Both the H1 and all prose children get the SAME padding so they align. */
@media (max-width: 780px) {
	main.cb-page-main > h1.wp-block-post-title,
	main.cb-page-main .wp-block-post-content > p,
	main.cb-page-main .wp-block-post-content > ul,
	main.cb-page-main .wp-block-post-content > ol,
	main.cb-page-main .wp-block-post-content > h2,
	main.cb-page-main .wp-block-post-content > h3,
	main.cb-page-main .wp-block-post-content > h4 {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

/* ── Tablet (≤1024px) — header is 88px ─────────────────────────────────── */
@media (max-width: 1024px) {
	main.cb-page-main {
		padding: 136px 0 72px !important; /* 88px header + 48px breathing */
	}
	main.cb-page-main > h1.wp-block-post-title {
		font-size: 36px;
	}
}

/* ── Mobile (≤640px) — header is 72px ──────────────────────────────────── */
@media (max-width: 640px) {
	main.cb-page-main {
		padding: 104px 0 56px !important; /* 72px header + 32px breathing */
	}
	main.cb-page-main > h1.wp-block-post-title {
		font-size: 28px;
		margin-bottom: 12px !important;
	}
	main.cb-page-main > h1.wp-block-post-title::after {
		width: 56px;
		height: 2px;
		margin-top: 16px;
	}
	main.cb-page-main .wp-block-post-content > p {
		margin-bottom: 24px !important;
	}
	main.cb-page-main .wp-block-post-content > p:first-child {
		font-size: 18px;
	}
	main.cb-page-main .wp-block-post-content > p + .alignfull,
	main.cb-page-main .wp-block-post-content > .alignfull + p {
		margin-top: 40px !important;
	}
}

/* ── Breakout safety ────────────────────────────────────────────────────── */
header,
.site-header,
.mobile-nav {
	contain: none !important;
	transform: none !important;
	filter: none !important;
	perspective: none !important;
	will-change: auto !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE HEADER — explicit px at each breakpoint, no rem/clamp
   ══════════════════════════════════════════════════════════════════════════════ */

/* Logo — no inline styles, all sizing via CSS */
.rh-logo {
	display: block;
	height: 80px;
	width: auto;
}

/* Desktop nav — visible above 768px */
@media (min-width: 769px) {
	.rh-mobile-toggle { display: none !important; }
	.rh-desktop-nav   { display: flex !important; }
}

/* Mobile — hide desktop nav, show hamburger */
@media (max-width: 768px) {
	.rh-desktop-nav   { display: none !important; }
	.rh-mobile-toggle { display: flex !important; }

	.rh-logo {
		height: 48px;
	}
	.site-header-react {
		height: 72px !important;
	}
}

/* Tablet tweaks */
@media (min-width: 769px) and (max-width: 1024px) {
	.rh-logo {
		height: 64px;
	}
	.site-header-react {
		height: 88px !important;
	}
}


/* ══════════════════════════════════════════════════════════════════════════════
   FOOTER — all sizes in explicit px
   ══════════════════════════════════════════════════════════════════════════════ */
.site-footer {
	background: var(--wp--preset--color--primary, #00486A);
	color: #ffffff;
	padding: 48px 24px 0;
}
.site-footer__inner {
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin: 0 auto;
	padding-bottom: 32px;
}
/* Force columns to top-align.
 * WordPress generates dynamic inline flex styles on .wp-container-core-columns-is-layout-*
 * that default to align-items:center — !important is required to override them. */
.site-footer__cols.wp-block-columns,
.site-footer .wp-block-columns {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 40px 48px !important;
}
.site-footer__cols .wp-block-column,
.site-footer .wp-block-columns .wp-block-column {
	flex: 1 1 180px !important;
	min-width: 0 !important;
	align-self: flex-start !important;
}
.site-footer p,
.site-footer .wp-block-column {
	color: #ffffff;
	font-size: 18px;
	line-height: 1.6;
}
.site-footer a {
	color: #ffffff;
	text-decoration: underline;
	text-decoration-color: rgba(255,255,255,.4);
	text-underline-offset: 3px;
}
.site-footer a:hover {
	text-decoration-color: #ffffff;
}
.site-footer__col-heading,
.site-footer .wp-block-site-title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ffffff;
	margin-bottom: 12px;
}
.site-footer .wp-block-site-title a {
	text-decoration: none;
	color: #ffffff;
}
.site-footer__bar {
	border-top: 1px solid rgba(255,255,255,.15);
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin: 0 auto;
	padding: 20px 0;
}
.site-footer__bar p {
	font-size: 16px;
	color: rgba(255,255,255,.85);
	margin: 0;
}

/* ── Footer logo ─────────────────────────────────────────────────────────── */
/* WordPress wraps [footer_logo] shortcode in a <p> — strip its margin */
.site-footer__inner > p:has(.site-footer__logo-link),
.site-footer__inner > p:first-child {
	margin: 0 0 24px;
	padding: 0;
}
.site-footer__logo-link {
	display: inline-block;
	text-decoration: none;
	margin-bottom: 24px;
}
.site-footer__logo-img {
	display: block;
	height: 80px;
	width: auto;
	max-width: 280px;
}
/* If only main logo is available (not a white variant), invert it */
.site-footer__logo-img--invert {
	filter: brightness(0) invert(1);
}
/* Legacy wp:site-logo fallback (in case template hasn't updated yet) */
.site-footer .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SOCIAL LINKS — much bigger icons
   ══════════════════════════════════════════════════════════════════════════════ */
.site-footer__social {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: center;
}
.site-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255,255,255,.1);
	color: #ffffff;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}
.site-footer__social-link:hover {
	background: rgba(255,255,255,.25);
	transform: translateY(-2px);
	color: #ffffff;
	text-decoration: none;
}
.site-footer__social-link svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

/* Tablet social icons */
@media (max-width: 768px) {
	.site-footer__social-link {
		width: 48px;
		height: 48px;
	}
	.site-footer__social-link svg {
		width: 24px;
		height: 24px;
	}
	.site-footer {
		padding: 32px 20px 0;
	}
	.site-footer p,
	.site-footer .wp-block-column {
		font-size: 16px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════════
   DEFAULT PARAGRAPH / HEADING BLOCKS — readable width + rhythm
   ══════════════════════════════════════════════════════════════════════════════
   theme.json sets contentSize to 1200px (for alignwide custom blocks) and
   blockGap to 0 (custom blocks own their own spacing). A plain core/paragraph
   block dropped on a page therefore stretches edge-to-edge with no gap.
   Core/paragraph renders as a bare <p> (no .wp-block-paragraph class), so we
   target <p>/<h*> children of the post-content wrapper directly. This only
   hits blocks at the page's top level — paragraphs inside custom blocks
   (which have their own layout) are untouched because they're wrapped deeper.
   ══════════════════════════════════════════════════════════════════════════════ */
/* Restore the original 720px-centred reading column for default prose. */
.wp-site-blocks .wp-block-post-content > p,
.wp-site-blocks .wp-block-post-content > h1,
.wp-site-blocks .wp-block-post-content > h2,
.wp-site-blocks .wp-block-post-content > h3,
.wp-site-blocks .wp-block-post-content > h4,
.wp-site-blocks .wp-block-post-content > h5,
.wp-site-blocks .wp-block-post-content > h6,
.wp-site-blocks .wp-block-post-content > ul,
.wp-site-blocks .wp-block-post-content > ol {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.25em;
	padding-left: 24px;
	padding-right: 24px;
	line-height: 1.7;
}

/* Tjenester sub-pages only: prose blocks left-align with the hero / process
 * left rail (24px page gutter, 720px reading max). Scoped via the
 * `parent-pageid-5` body class WP adds on children of the tjenester
 * page (ID 5) so it can't leak out and break alignfull break-out math
 * on the homepage or other top-level pages. */
.parent-pageid-5 .wp-block-post-content > p,
.parent-pageid-5 .wp-block-post-content > h1,
.parent-pageid-5 .wp-block-post-content > h2,
.parent-pageid-5 .wp-block-post-content > h3,
.parent-pageid-5 .wp-block-post-content > h4,
.parent-pageid-5 .wp-block-post-content > h5,
.parent-pageid-5 .wp-block-post-content > h6,
.parent-pageid-5 .wp-block-post-content > ul,
.parent-pageid-5 .wp-block-post-content > ol {
	max-width: 720px;
	margin-left: max(24px, calc((100% - 1440px) / 2 + 24px));
	margin-right: 24px;
	padding-left: 0;
	padding-right: 0;
}
.wp-site-blocks .wp-block-post-content > p:last-child,
.wp-site-blocks .wp-block-post-content > h1:last-child,
.wp-site-blocks .wp-block-post-content > h2:last-child,
.wp-site-blocks .wp-block-post-content > h3:last-child,
.wp-site-blocks .wp-block-post-content > h4:last-child,
.wp-site-blocks .wp-block-post-content > h5:last-child,
.wp-site-blocks .wp-block-post-content > h6:last-child,
.wp-site-blocks .wp-block-post-content > ul:last-child,
.wp-site-blocks .wp-block-post-content > ol:last-child {
	margin-bottom: 0;
}
/* Honor explicit alignment (wide/full) if the user chose it in the editor */
.wp-site-blocks .wp-block-post-content > p.alignwide,
.wp-site-blocks .wp-block-post-content > h2.alignwide,
.wp-site-blocks .wp-block-post-content > h3.alignwide {
	max-width: var(--wp--style--global--wide-size, 1440px);
}
.wp-site-blocks .wp-block-post-content > p.alignfull,
.wp-site-blocks .wp-block-post-content > h2.alignfull,
.wp-site-blocks .wp-block-post-content > h3.alignfull {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* ── Text selection — always legible on any background ─────────────────────── */
::selection {
	background: var(--wp--preset--color--accent, #F5833C);
	color: #ffffff;
}
::-moz-selection {
	background: var(--wp--preset--color--accent, #F5833C);
	color: #ffffff;
}