/**
 * Full-width canvas styles for the "Full Width Blocks" page template.
 *
 * Scoped to .upcomer-blocks-canvas so the alignment rules only affect pages
 * built with this template. Existing pages rendered through
 * gamurs/template-generic-page are unaffected.
 *
 * Also defines the single source of truth for vertical rhythm between
 * stacked upcomer/* blocks — see "Block rhythm" below.
 */

/* ---- Block rhythm tokens --------------------------------------------- */
/*
 * Strategy: symmetric padding-block on every upcomer block. Adjacent
 * blocks accumulate, so the on-page gap between any two blocks is
 *   2 × var(--upcomer-block-rhythm).
 *
 * Defaults give:
 *   mobile  (≈375px viewport):  24px × 2 = 48px between blocks
 *   desktop (≈1280px viewport): 40px × 2 = 80px between blocks
 *
 * Heroes (statement blocks like page-hero-intro / team-member-grid)
 * opt into the larger token via their own class override.
 *
 * To tighten or loosen the whole site, change the rhythm token here —
 * every upcomer/* block updates in lockstep.
 */

:root {
	--upcomer-block-rhythm:      clamp(1.5rem, 3vw, 2.5rem);
	--upcomer-block-rhythm-hero: clamp(3rem,   7vw, 5.5rem);

	/* Standard reading-column max for non-full-width text-heavy blocks
	   (article-intro-header, disclaimer-notice, text-section, faq-accordion,
	   author-bio-card). Multi-column grids and tables keep the wider canvas
	   width — they read better at the canonical ~1200px. */
	--upcomer-reading-max:       56rem;
}

/* :where() keeps specificity at (0,0,0) so any block-specific rule wins
   without needing !important. Margin reset is included so blocks that
   used margin-block for rhythm converge on the new system cleanly. */
:where(.upcomer-block) {
	padding-block: var(--upcomer-block-rhythm);
	margin-block: 0;
}

/* ---- Canvas alignment ----------------------------------------------- */

.upcomer-blocks-canvas {
	overflow-x: clip;
}

.upcomer-blocks-canvas > .alignfull,
.upcomer-blocks-canvas > * > .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.upcomer-blocks-canvas > .alignwide,
.upcomer-blocks-canvas > * > .alignwide {
	margin-left: calc(50% - min(720px, 50vw));
	margin-right: calc(50% - min(720px, 50vw));
	max-width: min(1440px, 100vw);
	width: min(1440px, 100vw);
}

/* ---- Nav-aligned left edge ------------------------------------------ */
/*
 * The reading column is LEFT-ALIGNED to the gamurs header nav's content edge
 * (where the logo / links start), not centred. We recreate the nav wrapper's
 * own geometry — a centred max-width container with side padding — as the x
 * offset of its inner edges, then start the reading column from there.
 *
 * Tokens mirror gamurs/header-nav exactly so the two stay in lockstep at
 * every breakpoint (source: gamurs build/header-nav/style-index.css):
 *   desktop (>=1249px): max-width 1200, padding 0
 *   laptop  (992-1248): max-width 1200, padding 24
 *   mobile  (<=991px):  no max-width (full bleed), padding 16
 */
.upcomer-blocks-canvas {
	--nav-maxw:  calc(1px * var(--wp--custom--top-nav--primary-container-spacing--desktop--max-width));
	--nav-pad-l: calc(1px * var(--wp--custom--top-nav--primary-container-spacing--desktop--padding-left));
	--nav-pad-r: calc(1px * var(--wp--custom--top-nav--primary-container-spacing--desktop--padding-right));

	/* Inner edges of the nav container at the current viewport width. */
	--nav-edge-left:  calc(max((100vw - var(--nav-maxw)) / 2, 0px) + var(--nav-pad-l));
	--nav-edge-right: calc(max((100vw - var(--nav-maxw)) / 2, 0px) + var(--nav-pad-r));
}

@media (min-width: 992px) and (max-width: 1248px) {
	.upcomer-blocks-canvas {
		--nav-maxw:  calc(1px * var(--wp--custom--top-nav--primary-container-spacing--laptop--max-width));
		--nav-pad-l: calc(1px * var(--wp--custom--top-nav--primary-container-spacing--laptop--padding-left));
		--nav-pad-r: calc(1px * var(--wp--custom--top-nav--primary-container-spacing--laptop--padding-right));
	}
}

@media (max-width: 991px) {
	.upcomer-blocks-canvas {
		--nav-maxw:  100vw; /* nav drops its max-width here — full width, padding only */
		--nav-pad-l: calc(1px * var(--wp--custom--top-nav--primary-container-spacing--mobile--padding-left));
		--nav-pad-r: calc(1px * var(--wp--custom--top-nav--primary-container-spacing--mobile--padding-right));
	}
}

/* ---- Normal-flow content -------------------------------------------- */
/*
 * Pages built with this template can mix custom upcomer/* blocks (which
 * break out full-bleed via the alignfull rules above) with ordinary core
 * content — paragraphs, headings, lists, tables, images entered straight
 * into the editor (e.g. the Norwegian /no/nye-casino/ listing page).
 *
 * Those core blocks render flat under .upcomer-blocks-canvas with no
 * constraining wrapper, so they span the full viewport. We give them the
 * --upcomer-reading-max width but LEFT-ALIGN it to the nav's content edge
 * (via --nav-edge-*) rather than centring it. We invent no typography here —
 * core blocks keep inheriting the theme's heading/body styles and block-gap.
 *
 * Excluded: anything carrying .alignfull / .alignwide (handled above) and
 * the .upcomer-block sections (they manage their own width and rhythm).
 */
.upcomer-blocks-canvas > p,
.upcomer-blocks-canvas > h1,
.upcomer-blocks-canvas > h2,
.upcomer-blocks-canvas > h3,
.upcomer-blocks-canvas > h4,
.upcomer-blocks-canvas > h5,
.upcomer-blocks-canvas > h6,
.upcomer-blocks-canvas > ul,
.upcomer-blocks-canvas > ol,
.upcomer-blocks-canvas > dl,
.upcomer-blocks-canvas > pre,
.upcomer-blocks-canvas > figure,
.upcomer-blocks-canvas > table,
.upcomer-blocks-canvas > hr,
.upcomer-blocks-canvas > blockquote,
.upcomer-blocks-canvas > .wp-block-image,
.upcomer-blocks-canvas > .wp-block-table,
.upcomer-blocks-canvas > .wp-block-quote,
.upcomer-blocks-canvas > .wp-block-list,
.upcomer-blocks-canvas > .wp-block-buttons,
.upcomer-blocks-canvas > .wp-block-embed {
	box-sizing: border-box;
	max-width: var(--upcomer-reading-max);
	margin-left: var(--nav-edge-left);
	margin-right: var(--nav-edge-right);
}

/* Re-exclude aligned core blocks so the full-bleed breakout wins over the
   nav-aligned reading column. These follow the column rule and match at
   equal-or-higher specificity, so they restore the breakout geometry even
   for class-named core blocks (e.g. a full-width .wp-block-image). */
.upcomer-blocks-canvas > .alignfull {
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.upcomer-blocks-canvas > .alignwide {
	max-width: min(1440px, 100vw);
	margin-left: calc(50% - min(720px, 50vw));
	margin-right: calc(50% - min(720px, 50vw));
}

/* The first piece of core content shouldn't sit flush against the nav — give
   it the standard block rhythm as top spacing. Heroes (.upcomer-block) and
   full-bleed core blocks manage their own top spacing and are excluded. */
.upcomer-blocks-canvas > :first-child:is(
	p, h1, h2, h3, h4, h5, h6,
	ul, ol, dl, pre, figure, table, hr, blockquote,
	.wp-block-image, .wp-block-table, .wp-block-quote,
	.wp-block-list, .wp-block-buttons, .wp-block-embed
):not(.alignfull):not(.alignwide) {
	padding-block-start: var(--upcomer-block-rhythm);
}

/* ---- Post-style typography for normal-flow content ------------------ */
/*
 * Makes plain core blocks (paragraphs, headings, lists, tables) on this
 * template read EXACTLY like an article body. A normal post gets this from
 * the gamurs .wp-block-post-content stylesheet, which this template never
 * loads — so we reproduce the same rules here using the very same
 * --wp--custom--copy--* / --wp--custom--table--* design tokens. No new
 * fonts, sizes, or colours are introduced.
 *
 * Source of truth (keep in sync if the tokens ever move):
 *   plugins/gamurs-wordpress-blocks/build/article-content/style-index.css
 *
 * Scoped to DIRECT children of the canvas (`> p`, `> h2`, `> ul li`, …) so
 * it styles only the editor's own core content and never reaches inside the
 * upcomer/* blocks, which manage their own typography.
 */

/* Body copy — paragraphs and list items (body-type is identical at every
   breakpoint, so no media query is needed). */
.upcomer-blocks-canvas > p,
.upcomer-blocks-canvas > ul li,
.upcomer-blocks-canvas > ol li {
	font-family:    var(--wp--custom--copy--body-type--desktop--font-family);
	font-size:      var(--wp--custom--copy--body-type--desktop--font-size);
	font-weight:    var(--wp--custom--copy--body-type--desktop--font-weight);
	letter-spacing: var(--wp--custom--copy--body-type--desktop--letter-spacing);
	line-height:    var(--wp--custom--copy--body-type--desktop--line-height);
}

/* Lists indent from the body text, editorial-style. The reading-column rule
   above collapses the browser's default list inset (it sets padding-inline),
   so restore a clear left indent for the marker + content.

   The .wp-block-list selectors are required, not redundant: the reading-column
   rule above matches a core list via its `> .wp-block-list` selector at
   specificity (0,2,0), which would otherwise out-rank a plain `> ul` (0,1,1)
   here and keep the gutter padding. Matching `> ul.wp-block-list` (0,2,1)
   guarantees this indent wins. Plain `> ul` / `> ol` cover classic (non-block)
   lists. */
.upcomer-blocks-canvas > ul,
.upcomer-blocks-canvas > ol,
.upcomer-blocks-canvas > ul.wp-block-list,
.upcomer-blocks-canvas > ol.wp-block-list {
	padding-inline-start: 2.5rem;
}

/* Titles — same Barlow Condensed scale a post uses. Desktop values are the
   base; the mobile token set takes over below 992px (gamurs' breakpoint).
   padding-block-start carries the post's heading top-spacing; the inline
   gutter is left to the reading-column rule above. */
.upcomer-blocks-canvas > h1,
.upcomer-blocks-canvas > h2,
.upcomer-blocks-canvas > h3,
.upcomer-blocks-canvas > h4,
.upcomer-blocks-canvas > h5,
.upcomer-blocks-canvas > h6 {
	margin-top: 0;
}

.upcomer-blocks-canvas > h1 {
	font-family:    var(--wp--custom--copy--h-1-type--desktop--font-family);
	font-size:      var(--wp--custom--copy--h-1-type--desktop--font-size);
	font-weight:    var(--wp--custom--copy--h-1-type--desktop--font-weight);
	letter-spacing: var(--wp--custom--copy--h-1-type--desktop--letter-spacing);
	line-height:    var(--wp--custom--copy--h-1-type--desktop--line-height);
	padding-block-start: calc(1px * var(--wp--custom--copy--h-1-container-spacing--padding-top));
}
.upcomer-blocks-canvas > h2 {
	font-family:    var(--wp--custom--copy--h-2-type--desktop--font-family);
	font-size:      var(--wp--custom--copy--h-2-type--desktop--font-size);
	font-weight:    var(--wp--custom--copy--h-2-type--desktop--font-weight);
	letter-spacing: var(--wp--custom--copy--h-2-type--desktop--letter-spacing);
	line-height:    var(--wp--custom--copy--h-2-type--desktop--line-height);
	padding-block-start: calc(1px * var(--wp--custom--copy--h-2-container-spacing--padding-top));
}
.upcomer-blocks-canvas > h3 {
	font-family:    var(--wp--custom--copy--h-3-type--desktop--font-family);
	font-size:      var(--wp--custom--copy--h-3-type--desktop--font-size);
	font-weight:    var(--wp--custom--copy--h-3-type--desktop--font-weight);
	letter-spacing: var(--wp--custom--copy--h-3-type--desktop--letter-spacing);
	line-height:    var(--wp--custom--copy--h-3-type--desktop--line-height);
	padding-block-start: calc(1px * var(--wp--custom--copy--h-3-container-spacing--padding-top));
}
.upcomer-blocks-canvas > h4 {
	font-family:    var(--wp--custom--copy--h-4-type--desktop--font-family);
	font-size:      var(--wp--custom--copy--h-4-type--desktop--font-size);
	font-weight:    var(--wp--custom--copy--h-4-type--desktop--font-weight);
	letter-spacing: var(--wp--custom--copy--h-4-type--desktop--letter-spacing);
	line-height:    var(--wp--custom--copy--h-4-type--desktop--line-height);
	padding-block-start: calc(1px * var(--wp--custom--copy--h-4-container-spacing--padding-top));
}
.upcomer-blocks-canvas > h5 {
	font-family:    var(--wp--custom--copy--h-5-type--desktop--font-family);
	font-size:      var(--wp--custom--copy--h-5-type--desktop--font-size);
	font-weight:    var(--wp--custom--copy--h-5-type--desktop--font-weight);
	letter-spacing: var(--wp--custom--copy--h-5-type--desktop--letter-spacing);
	line-height:    var(--wp--custom--copy--h-5-type--desktop--line-height);
	padding-block-start: calc(1px * var(--wp--custom--copy--h-5-container-spacing--padding-top));
}
.upcomer-blocks-canvas > h6 {
	font-family:    var(--wp--custom--copy--h-6-type--desktop--font-family);
	font-size:      var(--wp--custom--copy--h-6-type--desktop--font-size);
	font-weight:    var(--wp--custom--copy--h-6-type--desktop--font-weight);
	letter-spacing: var(--wp--custom--copy--h-6-type--desktop--letter-spacing);
	line-height:    var(--wp--custom--copy--h-6-type--desktop--line-height);
	padding-block-start: calc(1px * var(--wp--custom--copy--h-6-container-spacing--padding-top));
}

@media (max-width: 991px) {
	.upcomer-blocks-canvas > h1 {
		font-family:    var(--wp--custom--copy--h-1-type--mobile--font-family);
		font-size:      var(--wp--custom--copy--h-1-type--mobile--font-size);
		font-weight:    var(--wp--custom--copy--h-1-type--mobile--font-weight);
		letter-spacing: var(--wp--custom--copy--h-1-type--mobile--letter-spacing);
		line-height:    var(--wp--custom--copy--h-1-type--mobile--line-height);
	}
	.upcomer-blocks-canvas > h2 {
		font-family:    var(--wp--custom--copy--h-2-type--mobile--font-family);
		font-size:      var(--wp--custom--copy--h-2-type--mobile--font-size);
		font-weight:    var(--wp--custom--copy--h-2-type--mobile--font-weight);
		letter-spacing: var(--wp--custom--copy--h-2-type--mobile--letter-spacing);
		line-height:    var(--wp--custom--copy--h-2-type--mobile--line-height);
	}
	.upcomer-blocks-canvas > h3 {
		font-family:    var(--wp--custom--copy--h-3-type--mobile--font-family);
		font-size:      var(--wp--custom--copy--h-3-type--mobile--font-size);
		font-weight:    var(--wp--custom--copy--h-3-type--mobile--font-weight);
		letter-spacing: var(--wp--custom--copy--h-3-type--mobile--letter-spacing);
		line-height:    var(--wp--custom--copy--h-3-type--mobile--line-height);
	}
	.upcomer-blocks-canvas > h4 {
		font-family:    var(--wp--custom--copy--h-4-type--mobile--font-family);
		font-size:      var(--wp--custom--copy--h-4-type--mobile--font-size);
		font-weight:    var(--wp--custom--copy--h-4-type--mobile--font-weight);
		letter-spacing: var(--wp--custom--copy--h-4-type--mobile--letter-spacing);
		line-height:    var(--wp--custom--copy--h-4-type--mobile--line-height);
	}
	.upcomer-blocks-canvas > h5 {
		font-family:    var(--wp--custom--copy--h-5-type--mobile--font-family);
		font-size:      var(--wp--custom--copy--h-5-type--mobile--font-size);
		font-weight:    var(--wp--custom--copy--h-5-type--mobile--font-weight);
		letter-spacing: var(--wp--custom--copy--h-5-type--mobile--letter-spacing);
		line-height:    var(--wp--custom--copy--h-5-type--mobile--line-height);
	}
	.upcomer-blocks-canvas > h6 {
		font-family:    var(--wp--custom--copy--h-6-type--mobile--font-family);
		font-size:      var(--wp--custom--copy--h-6-type--mobile--font-size);
		font-weight:    var(--wp--custom--copy--h-6-type--mobile--font-weight);
		letter-spacing: var(--wp--custom--copy--h-6-type--mobile--letter-spacing);
		line-height:    var(--wp--custom--copy--h-6-type--mobile--line-height);
	}
}

/* Tables — bordered header + striped rows, exactly like a post table. Wide
   tables (e.g. the casino summary) scroll horizontally instead of bleeding
   out of the reading column. Covers both the block-editor figure wrapper and
   a bare <table>. */
.upcomer-blocks-canvas > .wp-block-table {
	overflow-x: auto;
}
.upcomer-blocks-canvas > .wp-block-table table,
.upcomer-blocks-canvas > table {
	border-bottom: calc(1px * var(--wp--custom--table--container-stroke--width)) var(--wp--custom--table--container-stroke--style) var(--wp--custom--table--container-stroke--color);
	border-color: var(--wp--custom--table--color-stroke);
	border-spacing: 0;
}
.upcomer-blocks-canvas > .wp-block-table table td,
.upcomer-blocks-canvas > table td {
	border: none;
	padding: calc(1px * var(--wp--custom--table--cell-container-spacing--padding-top)) calc(1px * var(--wp--custom--table--cell-container-spacing--padding-right)) calc(1px * var(--wp--custom--table--cell-container-spacing--padding-bottom)) calc(1px * var(--wp--custom--table--cell-container-spacing--padding-left));
}
.upcomer-blocks-canvas > .wp-block-table table thead,
.upcomer-blocks-canvas > table thead {
	background-color: var(--wp--custom--table--header-color-bg);
	border: none;
}
.upcomer-blocks-canvas > .wp-block-table table thead tr th,
.upcomer-blocks-canvas > table thead tr th {
	background-color: var(--wp--custom--table--header-color-bg);
	border: none;
	color: var(--wp--custom--table--header-color-fg);
	font-family: var(--wp--custom--table--header-type--font-family);
	font-size: var(--wp--custom--table--header-type--font-size);
	font-weight: var(--wp--custom--table--header-type--font-weight);
	letter-spacing: var(--wp--custom--table--header-type--letter-spacing);
	line-height: var(--wp--custom--table--header-type--line-height);
	padding: calc(1px * var(--wp--custom--table--cell-container-spacing--padding-top)) calc(1px * var(--wp--custom--table--cell-container-spacing--padding-right)) calc(1px * var(--wp--custom--table--cell-container-spacing--padding-bottom)) calc(1px * var(--wp--custom--table--cell-container-spacing--padding-left));
	text-transform: var(--wp--custom--table--header-type--text-transform);
}
.upcomer-blocks-canvas > .wp-block-table table thead tr th:not(:last-child),
.upcomer-blocks-canvas > table thead tr th:not(:last-child) {
	border-right: calc(1px * var(--wp--custom--table--header-container-stroke--width)) var(--wp--custom--table--header-container-stroke--style) var(--wp--custom--table--header-container-stroke--color);
}
.upcomer-blocks-canvas > .wp-block-table table tbody tr:nth-child(2n),
.upcomer-blocks-canvas > table tbody tr:nth-child(2n) {
	background-color: var(--wp--custom--table--enabled--even-row-color-bg);
}
.upcomer-blocks-canvas > .wp-block-table table tbody tr:nth-child(odd),
.upcomer-blocks-canvas > table tbody tr:nth-child(odd) {
	background-color: var(--wp--custom--table--enabled--odd-row-color-bg);
}
.upcomer-blocks-canvas > .wp-block-table table tbody td,
.upcomer-blocks-canvas > table tbody td {
	border-right: calc(1px * var(--wp--custom--table--cell-container-stroke--width)) var(--wp--custom--table--cell-container-stroke--style) var(--wp--custom--table--cell-container-stroke--color);
	border-color: var(--wp--custom--table--cell-color-stroke);
	color: var(--wp--custom--table--cell-color-fg);
	font-family: var(--wp--custom--table--cell-type--font-family);
	font-size: var(--wp--custom--table--cell-type--font-size);
	font-weight: var(--wp--custom--table--cell-type--font-weight);
	letter-spacing: var(--wp--custom--table--cell-type--letter-spacing);
	line-height: var(--wp--custom--table--cell-type--line-height);
}
.upcomer-blocks-canvas > .wp-block-table table tbody td:first-child,
.upcomer-blocks-canvas > table tbody td:first-child {
	border-left: calc(1px * var(--wp--custom--table--cell-container-stroke--width)) var(--wp--custom--table--cell-container-stroke--style) var(--wp--custom--table--cell-container-stroke--color);
}
.upcomer-blocks-canvas > .wp-block-table table tbody tr:first-child td,
.upcomer-blocks-canvas > table tbody tr:first-child td {
	border-top: calc(1px * var(--wp--custom--table--cell-container-stroke--width)) var(--wp--custom--table--cell-container-stroke--style) var(--wp--custom--table--cell-container-stroke--color);
}

/* ---- Page breadcrumb — placement ------------------------------------- */
/*
 * Base breadcrumb styling lives in breadcrumb.css (shared with single posts).
 * Here we only place it: as the first child of .upcomer-blocks-canvas, above
 * the first block, left-aligned to the nav content edge with the same
 * --nav-edge-* geometry the normal-flow content uses — so it lines up with the
 * header nav and the editorial-page-header block's (centred 1200) content column.
 */
.upcomer-blocks-canvas > .upcomer-breadcrumb {
	margin-left: var(--nav-edge-left);
	margin-right: var(--nav-edge-right);
	margin-block: clamp(1rem, 2.5vw, 1.5rem) 0;
}