/* ==========================================================================
   Gemial Digital v2 - shared components
   --------------------------------------------------------------------------
   THE COMPONENTS THE SHELL USES, AND THEREFORE THE ONES A LEGACY PAGE NEEDS.

   From M5 header.php and footer.php render on every page on the site. Their
   markup uses .gd-btn (the header CTA and the panel button), .gd-container
   (the footer width constraint) and .gd-list-plain (the footer link
   columns). Every one of those was defined only in base.css, under
   :where(body.gd2-page), and base.css loads on redesigned pages only -- so
   on a legacy page not one of them matched. The CTA would have rendered as a
   bare link and the footer with no width constraint and bulleted lists.

   Not unstyled, either: Blocksy's CSS is still loaded on those pages, so
   they would have rendered Blocksy-styled. That is trap 7.3 generalised
   past .menu.

   WHY A THIRD FILE RATHER THAN EITHER OBVIOUS FIX.

     - Widening the selector inside base.css does nothing, because base.css
       is not there to be widened. This was approved before that was
       noticed.
     - Copying the rules into shell.css creates a second .gd-btn, and
       CLAUDE.md section 8 names the second copy as the leading cause of
       defects in this project.

   So the definitions MOVED here, whole families at a time, and the scope
   widened to name the shell as well as a v2 page. One definition, two
   scopes, 4KB on a legacy page instead of base.css's 16.5KB.

   :where() still contributes zero specificity, so every rule scores exactly
   what its own selector scores -- components at (0,1,0). Section 7.2.
   ========================================================================== */
:where(body.gd2-page, .gdh, .gdf, .gd-panel) .gd-container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

:where(body.gd2-page, .gdh, .gdf, .gd-panel) .gd-container--narrow {
	max-width: calc(880px + var(--gutter) * 2);
}

:where(body.gd2-page, .gdh, .gdf, .gd-panel) .gd-container--wide {
	max-width: calc(1480px + var(--gutter) * 2);
}

:where(body.gd2-page, .gdh, .gdf, .gd-panel) .gd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	font-family: var(--f-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 1.0625rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	cursor: pointer;
	text-align: center;
	transition:
		background var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}

:where(body.gd2-page, .gdh, .gdf, .gd-panel) .gd-btn--lime {
	background: var(--lime);
	color: var(--on-accent);
}

:where(body.gd2-page, .gdh, .gdf, .gd-panel) .gd-btn--lime:hover {
	background: var(--lime-bright);
}

:where(body.gd2-page, .gdh, .gdf, .gd-panel) .gd-btn--ghost {
	border-color: var(--border-int);
	color: var(--text-hi);
}

:where(body.gd2-page, .gdh, .gdf, .gd-panel) .gd-btn--ghost:hover {
	border-color: var(--accent-ink);
	color: var(--accent-ink);
}

:where(body.gd2-page, .gdh, .gdf, .gd-panel) .gd-btn--link {
	padding: 0;
	color: var(--accent-ink);
	border: 0;
}

:where(body.gd2-page, .gdh, .gdf, .gd-panel) .gd-btn--sm {
	padding: .75rem 1.125rem;
	font-size: 12.5px;
}

:where(body.gd2-page, .gdh, .gdf, .gd-panel) .gd-btn--lg {
	padding: 1.25rem 2.25rem;
	font-size: 15px;
}

:where(body.gd2-page, .gdh, .gdf, .gd-panel) .gd-btn--block {
	display: flex;
	width: 100%;
}

:where(body.gd2-page, .gdh, .gdf, .gd-panel) .gd-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-block-start: 2.25rem;
}

:where(body.gd2-page, .gdh, .gdf, .gd-panel) .gd-list-plain {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * PRINT. This rule was lifted out of base.css @media print by the move and
 * landed here unwrapped, so display:none !important applied on screen and
 * every button on the v2 homepage vanished -- 250px of lost page height that
 * bodies.mjs could not see, because the markup was byte-identical. Found by
 * body-diff.mjs on its first real run.
 */
@media print {
	:where(body.gd2-page, .gdh, .gdf, .gd-panel) .gd-btn {
		display: none !important;
	}
}