/*!
 * REACH Toolkit Gate - toolkit-layout.css
 * Role: page layout for the toolkit pages, on top of the reachatrush theme.
 * Loaded only on /toolkit/ and the pages beneath it (see rtg_enqueue_layout_styles).
 * Source of truth: this file (no build step).
 * Cache-bust: automatic via filemtime() in the enqueue. No manual ?ver= bumps.
 * Format: Keep a Changelog + SemVer. Scopes follow Conventional Commits.
 *
 * [0.3.3] - 2026-11-12 - mm-erica - REACH-WEB-001
 *   [added] feat(layout): on the toolkit page, hide the site header logo and add
 *           1rem between the site navigation and the embed.
 *
 * [0.3.2] - 2026-11-12 - mm-erica - REACH-WEB-001
 *   [added] feat(layout): space below the sign-in block on the access page.
 *
 * [0.3.1] - 2026-11-10 - mm-erica - REACH-WEB-001
 *   [changed] feat(layout): cap the embed at 1440px, the experience's design width,
 *           and center it. Uncapped, Scale mode kept enlarging it on wide screens.
 *
 * [0.3.0] - 2026-11-10 - mm-erica - REACH-WEB-001
 *   [added] feat(layout): full-width Ceros embed on the toolkit page, flush with
 *           the site menu and footer, no page title.
 *   [added] feat(layout): hide the site footer sign-up form on toolkit pages.
 *
 * Body classes come from rtg_body_classes():
 *   .rtg-toolkit-page     /toolkit/ only (the Ceros embed)
 *   .rtg-toolkit-section  /toolkit/ and every page beneath it
 */

/* ---------------------------------------------------------------------------
 * Toolkit page: the Ceros experience breaks out of the theme's content column.
 *
 * Why: the theme caps .content at 75rem (1200px). Ceros picks its layout from
 * the embed's own width and only uses the desktop design above 1280px, so
 * inside the theme container every visitor got the tablet layout.
 * All spacing inside the experience belongs to Ceros. We add none.
 *
 * Width: up to 1440px, centered. 1440px is the experience's design width. It is
 * published in Scale mode, so without a cap it grows with the window (124% at
 * 1794px, 178% at 2560px) while the site menu and footer stay the same size.
 * To change the cap, edit --rtg-embed-max-width. Keep it above 1280px or the
 * desktop design never shows.
 * ------------------------------------------------------------------------ */

body.rtg-toolkit-page #main-content.content {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

body.rtg-toolkit-page #main-content .main,
body.rtg-toolkit-page #main-content .main.full-width {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* The theme pads the first block inside .main.full-width. */
body.rtg-toolkit-page #main-content .main > div,
body.rtg-toolkit-page #main-content .main > div:first-of-type {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* The experience has its own heading. Keep the page title for screen readers only. */
body.rtg-toolkit-page #main-content .page-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

body.rtg-toolkit-page {
	--rtg-embed-max-width: 1440px;
}

body.rtg-toolkit-page [data-flex-inline] {
	display: block;
	width: 100%;
	max-width: var(--rtg-embed-max-width);
	margin: 0 auto;
	padding: 0;
}

/* 1rem between the site navigation and the embed. The selector carries #main-content
   so it outranks the rule above that zeroes the theme's spacing on .main > div. */
body.rtg-toolkit-page #main-content .main > [data-flex-inline] {
	margin-top: 1rem;
}

/* ---------------------------------------------------------------------------
 * Toolkit page: no site logo in the header.
 *
 * The experience opens with its own Rush and REACH logo bar, so the site logo
 * directly above it was a duplicate. Hidden with visibility, not display: the
 * header is a flex row (logo, mobile menu button, navigation), and keeping the
 * logo's box means the navigation and the mobile menu button stay where they
 * are at every screen size. visibility: hidden also takes the logo link out of
 * the tab order and away from screen readers.
 * ------------------------------------------------------------------------ */

body.rtg-toolkit-page #site-header .logo {
	visibility: hidden;
}

/* ---------------------------------------------------------------------------
 * All toolkit pages: no site footer sign-up form ("Stay Connected with REACH").
 * It stays on the rest of the site.
 * ------------------------------------------------------------------------ */

body.rtg-toolkit-section .footer-form {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Access page: room between the sign-in block and whatever follows it.
 * Without this the "Forgot Password" link sits against the next heading.
 * .rtg-login wraps the sign-in form; .rtg-signed-in is the signed-in notice.
 * ------------------------------------------------------------------------ */

body.rtg-toolkit-section .rtg-login,
body.rtg-toolkit-section .rtg-signed-in {
	margin-bottom: 4rem;
}