@charset "UTF-8";
/* ==========================================================================
   gamdom.style - homepage shell, layout, typography and CTA
   --------------------------------------------------------------------------
   Built to the reference at gamdom-style.vercel.app, approved 2026-09-12.

   What that reference actually does, measured rather than guessed:

     shadows          NONE. 141 rounded elements, zero box-shadow.
     main content     panel, 16px radius, 1px hairline, 32px padding
     sidebar widgets  cards, 12px radius, 1px hairline, 20px padding, 24px gap
     h2               36px bold, NO fill, 5px green bar, section hairline above
                      (64px margin-top, 40px padding-top)
     h3               24px bold with a 10px navy dot
     CTA              12px radius, 14px 32px padding, no shadow
     radius scale     16 panels / 12 components / 8 thumbnails

   NO NEW COLOUR IS INTRODUCED. Every value below already exists on this site:
     --gs-accent  = #62d847, the exact green SWELL already applies to the CTA
                    through its `green_` class (--the-btn-color). Declared once
                    here so the h2 accent and the button cannot drift apart.
     h2 text      = var(--color_text), the body text colour. The heading loses
                    its navy fill, so white-on-navy becomes text-on-page.
     borders      = var(--color_border), already used site-wide.

   The panels set NO background. The reference's card is white/0.8 on a
   rgb(252,252,252) page - a 1-value difference, invisible. What makes it read
   as a card is the 1px border, so that is all this uses. It also means no
   background colour is declared anywhere in this file.

   Loaded site-wide from functions.php since 2026-09-13 (was page 152 only),
   so the header, footer, headings, lists and sidebar rules here now apply
   to every page. Counts in the notes below describe the homepage, where
   each rule was first measured.
   ========================================================================== */

:root {
	--gs-accent: #62d847;   /* = --the-btn-color, SWELL's `green_` CTA colour */
	--gs-radius-panel: 16px;
	--gs-radius-component: 12px;
	--gs-radius-thumb: 8px;
}

/* --------------------------------------------------------------------------
   1. THE HEADER
   Already sticky before this change: SWELL ships .l-fixHeader at
   position:fixed, top:0, 64px, and it is present at every scroll position -
   the 94px .l-header simply scrolls away underneath it. So the header did not
   need to be made sticky; it needed to stop being 94px.

   94px = .l-header__bar (22px) + .l-header__inner (72px). The bar is left
   alone: it carries the RSS link, and removing it would remove a link.
   Compacting the inner brings the header to 80px against the reference's 64.
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {
	.l-header__inner {
		height: 58px;
	}

	.l-header__logo {
		padding: 9px 0;
	}

	.c-gnav > li > a {
		height: 58px;
	}
}

/* --------------------------------------------------------------------------
   2. THE CONTENT PANEL
   The single biggest structural difference from the reference: its article
   sits in a bordered, rounded panel instead of directly on the page.

   Desktop only. On a phone the border and padding would eat width the text
   needs.
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {
	.l-mainContent {
		border: 1px solid var(--color_border);
		border-radius: var(--gs-radius-panel);
		padding: 32px;
	}

	/* SWELL gives .post_content `0 16px`, which would sit inside the panel's
	   own 32px and inset the text by 48px. */
	.l-mainContent .post_content {
		padding-left: 0;
		padding-right: 0;
	}
}

/* --------------------------------------------------------------------------
   3. WIDTH - two deliberate tiers
   Prose reads at a comfortable measure; headings, media and tables keep the
   full column, so the difference looks intended rather than ragged.
   -------------------------------------------------------------------------- */

/* SWELL sets content font-size with an ID selector, so a plain class loses. */
#main_content .post_content,
#lp-content .post_content {
	font-size: 17px;
	line-height: 1.9;
	font-feature-settings: "palt" 1;
}

.post_content > p,
.post_content > ul,
.post_content > ol,
.post_content > blockquote {
	max-width: 700px;
}

.post_content > p {
	margin-bottom: 28px;
}

/* The opening paragraph carries the page; give it a little more presence. */
.post_content > p:first-of-type {
	font-size: 1.06em;
	line-height: 1.95;
}

/* --------------------------------------------------------------------------
   4. HEADINGS
   The reference's h2 is not a filled bar. It is large plain text with a thin
   green bar beside it, and the SECTION carries the separation: a hairline
   above, 64px of space before it and 40px after it.

   The hairline moves from an absolutely positioned ::before onto the h2's own
   border-top. That frees ::before for the accent bar and removes a positioned
   pseudo-element from the page.

   text-indent + padding-left gives a hanging indent, so a heading that wraps
   to two lines aligns its second line with the first rather than under the
   accent. Done this way rather than with flexbox because a flex h2 would turn
   every inline <strong> or <a> inside a heading into its own flex item.
   -------------------------------------------------------------------------- */
/* SECTION TITLE BLOCK - redesigned 2026-09-13.
   Before: a hairline ABOVE the heading with 40px of empty padding between it
   and the text, and a 5px bar only .55em tall. The line read as a divider
   belonging to the previous section, and the bar read as a stray mark -
   nothing tied them to the heading they were meant to introduce.

   Now the rule sits directly UNDER the heading, so heading and rule read as
   one title block: a thin navy line across the column with a short green
   lead segment starting beneath the bar. Separation between sections comes
   from space above instead (72px), and the gap below is small (28px) so the
   title binds to its own content.

   Both lines are background layers, not borders or pseudo-elements - ::before
   is already the bar, and SWELL's own h2 styles have fought pseudo-element
   position before (see the ::before note below). Colours are the existing
   --gs-accent green and --color_main navy; nothing new. */
.post_content h2 {
	color: var(--color_text);
	font-size: 2.1em;           /* 35.7px against the 17px content size */
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .01em;
	margin: 72px 0 28px;        /* SWELL pulls h2 out by -16px on each side */
	padding: 0 0 16px 17px;
	text-indent: -17px;         /* 5px bar + 12px gap */
	border: 0;
	border-radius: 0;
	background:
		linear-gradient(var(--gs-accent), var(--gs-accent)) left bottom / 64px 3px no-repeat,
		linear-gradient(var(--color_main), var(--color_main)) left bottom / 100% 1px no-repeat;
	scroll-margin-top: 96px;    /* clears the 64px fixed header */
	font-feature-settings: "palt" 1;
}

/* SWELL's own h2 style (customizer inline CSS) already draws a ::before:
   `position: absolute; top: -4px; left: 0` with 2px top and bottom borders.
   The rule below replaced its size and colour but, until 2026-09-13, never
   its position - so the bar stayed pinned above the first line instead of
   sitting beside the text. Position, offsets and borders are reset here
   explicitly. */
.post_content h2::before {
	content: "";
	position: static;
	top: auto;
	left: auto;
	display: inline-block;
	width: 5px;
	height: .8em;               /* close to the height of the glyphs beside it - was .55em, too small to read as intentional */
	margin-right: 12px;
	border: 0;
	background: var(--gs-accent);
	border-radius: 2px;
	vertical-align: -.06em;     /* `middle` centres on the Latin x-height, which sits low against Japanese glyphs */
	text-indent: 0;
}

.post_content h2:first-child {
	margin-top: 0;
}

/* h3 is different in kind from h2, not merely smaller. There are 29 of them
   doing real structural work on this page. The navy dot replaces the rule
   that used to sit on its left edge. */
.post_content h3 {
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.5;
	margin-top: 48px;
	margin-bottom: 16px;
	padding-left: 22px;         /* 10px dot + 12px gap */
	text-indent: -22px;
	border-left: 0;
	max-width: 700px;
	scroll-margin-top: 96px;
}

/* Same fix as the h2 bar: SWELL's main.css pins h3::before with
   `position: absolute; bottom: 0; left: 0` (its underline), which left this
   dot sitting below the heading text. Reset explicitly so it sits inline,
   beside the first line. */
.post_content h3::before {
	content: "";
	position: static;
	bottom: auto;
	left: auto;
	z-index: auto;
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 12px;
	background: var(--color_main);
	border-radius: 50%;
	vertical-align: middle;
	text-indent: 0;
}

.post_content h4 {
	font-size: 1.08em;
	line-height: 1.55;
	margin-top: 32px;
	margin-bottom: 8px;
	max-width: 700px;
}

.post_content h2 + h3,
.post_content h3 + h4 {
	margin-top: 16px;
}

/* --------------------------------------------------------------------------
   4B. BULLET LISTS
   Audited 2026-09-13: 14 lists on this page, and no two kinds shared the
   same metrics -

     plain lists       indent 25.5px on the ul, 4px apart, line-height 1.5
     dashed lists      indent 25.5px, 12.75px apart
     accordion lists   indent 18.7px on the li, 10px apart, line-height 1.7
     SWELL icon lists  indent 29.75px (4.25 on the ul + 25.5 on the li)

   and every plain list used the browser's own `disc` marker, which sits on
   the text baseline, not the line's centre, and whose size and gap to the
   text cannot be set. That is the "bullet sits low / too far from the text".

   One system now: text indent 1.5em on the li (never the ul, so it survives
   multi-column accordion lists), 8px between items, line-height 1.7, and a
   6px dot centred on the FIRST line - `.5lh` - so a wrapped item keeps its
   dot beside line one rather than drifting to the middle of the block.

   Excluded on purpose:
     - SWELL's own icon lists (is-style-*): their markers are absolutely
       positioned icon-font glyphs and have broken on padding overrides
       before. Only their indent, gap and line height are aligned here -
       the icon itself is never touched.
     - the 24-level card grid (7. in home-components.css), matched by the
       same "exactly 24 items" test it uses.

   The dot is --color_main, the same navy as the h3 marker. No content,
   markup or list order changes.
   -------------------------------------------------------------------------- */
.post_content ul.wp-block-list:not([class*="is-style-"]:not(.is-style-default)):not(:has(> li:nth-child(24)):not(:has(> li:nth-child(25)))),
.post_content ul.is-style-good_list,
.post_content ul.is-style-bad_list,
.post_content ul.is-style-check_list {
	padding-left: 0;
}

.post_content ul.wp-block-list:not([class*="is-style-"]:not(.is-style-default)):not(:has(> li:nth-child(24)):not(:has(> li:nth-child(25)))) {
	list-style: none;
}

.post_content ul.wp-block-list:not([class*="is-style-"]:not(.is-style-default)):not(:has(> li:nth-child(24)):not(:has(> li:nth-child(25)))) > li,
.post_content ul.is-style-good_list > li,
.post_content ul.is-style-bad_list > li,
.post_content ul.is-style-check_list > li {
	padding-left: 1.5em;
	margin: 0 0 var(--gs-li-gap, 8px);
	line-height: 1.7;
}

.post_content ul.wp-block-list:not([class*="is-style-"]:not(.is-style-default)):not(:has(> li:nth-child(24)):not(:has(> li:nth-child(25)))) > li:last-child,
.post_content ul.is-style-good_list > li:last-child,
.post_content ul.is-style-bad_list > li:last-child,
.post_content ul.is-style-check_list > li:last-child {
	margin-bottom: 0;
}

/* SWELL already sets `.post_content li { position: relative }`, which is
   what this dot anchors to. */
.post_content ul.wp-block-list:not([class*="is-style-"]:not(.is-style-default)):not(:has(> li:nth-child(24)):not(:has(> li:nth-child(25)))) > li::before {
	content: "";
	position: absolute;
	left: .5em;
	top: calc(.85em - 3px);     /* same result, for browsers without `lh` */
	top: calc(.5lh - 3px);      /* centre of the first line */
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color_main);
}

/* Dashed-separator lists: the same 10px above and below every dashed line,
   instead of SWELL's .75em each way stacked on the item gap. */
.post_content ul.-list-under-dashed {
	--gs-li-gap: 10px;
}

.post_content ul.-list-under-dashed > li {
	padding-bottom: 10px;
}

/* --------------------------------------------------------------------------
   5. THE CTA
   The one element on an affiliate page with revenue attached. The reference
   sizes it to its label - 14px 32px, 12px radius, no shadow, no minimum
   width - rather than stretching it across the column.
   -------------------------------------------------------------------------- */
.swell-block-button {
	margin-block: 48px !important;   /* SWELL ships `0 0 32px` - no top margin */
}

.post_content .swell-block-button .swell-block-button__link {
	min-width: 0;
	padding: 14px 32px;
	border-radius: var(--gs-radius-component);
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: .04em;
	box-shadow: none;                /* SWELL ships --swl-btn_shadow */
	transition: transform .18s ease;
}

.post_content .swell-block-button .swell-block-button__link:hover {
	transform: translateY(-2px);
}

/* The reference gives its CTA a trailing arrow. Decorative only - a
   generated character, not real text, so nothing is added to the button's
   actual label or its link. */
.post_content .swell-block-button .swell-block-button__link::after {
	content: "\2192";
	margin-left: .5em;
}

/* --------------------------------------------------------------------------
   6. THE SIDEBAR
   Each widget becomes a bordered card, as in the reference: 12px radius,
   1px hairline, 20px padding, 24px apart.
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {
	/* The sidebar is <aside id="sidebar">, and SWELL styles the widgets through
	   that ID, so a class selector loses. Matching its specificity rather than
	   reaching for !important - the same trap as #main_content .post_content. */
	#sidebar .c-widget {
		border: 1px solid var(--color_border);
		border-radius: var(--gs-radius-component);
		padding: 20px;
		margin-bottom: 24px;
	}

	/* SWELL sets the top margin through an adjacent-sibling rule, which
	   outranks #sidebar .c-widget, so it has to be matched in kind. */
	#sidebar .c-widget + .c-widget {
		margin-top: 0;
	}

	#sidebar .c-widget:last-child {
		margin-bottom: 0;
	}

	.l-sidebar .c-widget__title {
		font-size: 1em;
		font-weight: 700;
		letter-spacing: .02em;
		padding: 0 0 12px;
		border-bottom: 1px solid var(--color_border);
		margin-bottom: 16px;
	}

	/* The reference marks each category row with a trailing chevron. #block-6
	   is specifically the Category widget (confirmed by its own category
	   links), scoped by ID so this never reaches a categories list anywhere
	   else. Decorative only - a generated character, not a new link. */
	#block-6 .wp-block-categories-list .cat-item > a {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#block-6 .wp-block-categories-list .cat-item > a::after {
		content: "\203A";
		margin-left: 8px;
		opacity: .5;
	}
}

/* --------------------------------------------------------------------------
   7. ACCORDIONS  (.is-style-main)
   The one on the homepage holds 41 providers in a single column: a 768px-wide
   wall of bullets that nobody reads to the end of. Three columns fit the width
   the page already has and cut ~340px of scrolling.

   What SWELL already does here, so this does not repeat it: the title is
   filled with --color_main, the body carries `border: 1px solid var(--color_main)`
   with no top edge. A second border in --color_border would simply draw a
   grey line outside the navy one.

   The body's own padding was assumed to be SWELL's 1em left alone on the
   vertical sides (see the old comment this replaces) - measured instead of
   assumed, it is not: opened and settled, this specific variant computes to
   0px top and bottom while the horizontal sides sit at 20px. That is the
   uneven spacing flagged on 2026-09-13 - content running to the top and
   bottom edges while sitting 20px clear of the left and right. Rather than
   keep chasing which of SWELL's own rules is winning that fight, all four
   sides are now stated here directly, so the box no longer depends on it.

   Multi-column is safe on THIS list: plain `disc` markers, `::before` static.
   SWELL's styled lists elsewhere position their markers absolutely and must
   never get a padding override - that trap has already cost this project
   three bugs.
   -------------------------------------------------------------------------- */

/* Round the whole item and clip to it, so the filled title and the bordered
   body share one silhouette instead of two squared boxes. */
.swell-block-accordion.is-style-main .swell-block-accordion__item {
	border-radius: var(--gs-radius-component);
	overflow: hidden;
}

.swell-block-accordion.is-style-main .swell-block-accordion__title {
	padding: 15px 20px;
	letter-spacing: .02em;
}

/* Equal on all four sides. SWELL's own `:not(.is-opened)` rule still forces
   the vertical sides to 0 with !important while collapsed - untouched here,
   and correct: a collapsed row should have no padding to animate open from. */
.swell-block-accordion.is-style-main .swell-block-accordion__body {
	/* Set to the VISIBLE space, not the box: the 1.7 line height adds ~6px of
	   empty leading above and below each row, and the bullet dot sits .5em
	   (8.5px) inside its li. Measured against the rendered text: 17px
	   top/bottom and 11px left each read as 20px, matching the 20px right
	   edge where the longest item's text ends flush. 11px on the left also
	   puts the dots in line with the title text above (title padding 20px). */
	padding: 17px 20px 17px 11px;
	/* SWELL draws this body's navy border, but the item's 12px radius clips it,
	   and a clipped square border loses its bottom corners - the "incomplete
	   border". Rounding the body's own bottom corners makes the border follow
	   the curve instead of being cut by it. */
	border-radius: 0 0 var(--gs-radius-component) var(--gs-radius-component);
}

/* A little more air between the two closed shapes than SWELL's own .5em,
   matched to the rhythm the FAQ items already use (home-components.css). */
.swell-block-accordion__item + .swell-block-accordion__item {
	margin-top: 16px;
}

/* --------------------------------------------------------------------------
   The provider list
   Indent lives on the li, not the ul: with `list-style-position: outside` a
   marker hangs off its own line box, so per-item padding gives every column
   its own marker space. Padding on the ul would indent the first column only
   and leave columns 2 and 3 dropping their discs into the gutter.
   -------------------------------------------------------------------------- */
/* Fallback for any item count not matched below: three equal columns. */
.swell-block-accordion__body > ul {
	columns: 3;
	column-gap: 24px;
	padding-left: 0;
	margin-block: 0;
}

/* The two lists on this page (22 and 41 items), redone 2026-09-13.
   Equal-width multi-column tracks left 20px of space on the left and 89px
   on the right, because each track is a third of the box no matter how
   short its items are - the "uneven columns". A column-flow grid sizes each
   column to its own longest item and spreads the spare width evenly between
   them, so the outer edges match and both gaps match. Reading order is
   unchanged: still down each column, then across, in document order.

   Column-flow grid needs an explicit row count (items / 3, rounded up), so
   it is keyed to each list's size; a list whose count changes falls back to
   the plain columns above rather than breaking. */
.swell-block-accordion__body > ul:is(:has(> li:nth-child(22)):not(:has(> li:nth-child(25))), :has(> li:nth-child(40)):not(:has(> li:nth-child(43)))) {
	--gs-li-gap: 0px;          /* spacing comes from row-gap, not li margins */
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	justify-content: space-between;
	column-gap: 24px;          /* minimum; space-between distributes the rest */
	row-gap: 8px;
}

.swell-block-accordion__body > ul:has(> li:nth-child(22)):not(:has(> li:nth-child(25))) {
	grid-template-rows: repeat(8, auto);
}

.swell-block-accordion__body > ul:has(> li:nth-child(40)):not(:has(> li:nth-child(43))) {
	grid-template-rows: repeat(14, auto);
}

/* Indent, gap, line height and the bullet itself come from 4B. BULLET LISTS,
   shared with every other list on the page - only the column behaviour is
   specific to the accordion. */
.swell-block-accordion__body > ul > li {
	break-inside: avoid;      /* never split an item across a column boundary */
}

/* --------------------------------------------------------------------------
   8. MOBILE
   One column, so the measure is released and the scale steps down. The panel
   and the sidebar cards are desktop-only; on a phone their borders would just
   take width from the text. The CTA goes full width - it is the primary
   action on a small screen.
   -------------------------------------------------------------------------- */
@media (max-width: 959px) {

	#main_content .post_content,
	#lp-content .post_content {
		font-size: 16px;
		line-height: 1.85;
	}

	.post_content > p,
	.post_content > ul,
	.post_content > ol,
	.post_content > blockquote,
	.post_content h3,
	.post_content h4 {
		max-width: none;
	}

	.post_content > p {
		margin-bottom: 22px;
	}

	.post_content h2 {
		font-size: 1.6em;
		margin-top: 52px;
		margin-bottom: 20px;
		padding-bottom: 12px;
		background-size: 48px 3px, 100% 1px;
	}

	.post_content h3 {
		font-size: 1.2em;
		margin-top: 32px;
	}

	.swell-block-button {
		margin-block: 32px !important;
	}

	.post_content .swell-block-button .swell-block-button__link {
		width: 100%;
		padding: 16px 20px;
	}

	.swell-block-accordion.is-style-main .swell-block-accordion__title {
		padding: 14px 16px;
	}

	/* Same visible-space logic as desktop, at 16px type: ~6px of leading top
	   and bottom, dot 8px inside its li - 13px top/bottom and 7px left each
	   read as 16px, and the dots line up with the title text (title padding
	   is 16px here). */
	.swell-block-accordion.is-style-main .swell-block-accordion__body {
		padding: 13px 16px 13px 7px;
	}

	/* One column below desktop - three would be cramped. Both the fallback
	   columns and the grid version revert to a plain stacked list. */
	.swell-block-accordion__body > ul {
		columns: 1;
	}

	.swell-block-accordion__body > ul:is(:has(> li:nth-child(22)):not(:has(> li:nth-child(25))), :has(> li:nth-child(40)):not(:has(> li:nth-child(43)))) {
		--gs-li-gap: 8px;
		display: block;
	}
}

/* --------------------------------------------------------------------------
   9. FOOTER
   Found bare in the 2026-09-13 audit: the default near-white background,
   5 small grey links and a one-line copyright - no visual weight at all,
   the last thing on the page reading as unfinished next to everything
   above it.

   #000 is not a new colour - it is .l-header's own computed background,
   read directly rather than assumed, so the page is bookended in the same
   black rather than a second dark tone invented for the footer alone.
   --color_header_text is SWELL's own variable for text on that black -
   already used by the header nav today, reused here for the same reason.
   -------------------------------------------------------------------------- */
.l-footer {
	background: #000;
	padding-block: 48px 32px;
}

.l-footer__nav {
	justify-content: center;
	gap: 8px 28px;
	margin-bottom: 20px;
}

.l-footer__nav a {
	color: var(--color_header_text);
	opacity: .75;
	transition: opacity .18s ease;
}

.l-footer__nav a:hover {
	opacity: 1;
}

.l-footer .copyright {
	color: var(--color_header_text);
	opacity: .45;
	font-size: .85em;
}

@media (prefers-reduced-motion: reduce) {
	.post_content .swell-block-button .swell-block-button__link {
		transition: none;
	}

	.post_content .swell-block-button .swell-block-button__link:hover {
		transform: none;
	}

	.l-footer__nav a {
		transition: none;
	}
}