/* Footer — desktop shell alignment, plus the accordion presentation below 600px.

   The accordion is entirely inside @media (max-width:600px), so the approved
   desktop footer composition is untouched by construction: above the breakpoint
   not one accordion declaration applies, and the JS puts every node back where
   it found it.

   ONE desktop rule joins it, at the end of this file, and it changes width only
   — never composition. See "shell alignment" below for why it is here rather
   than in a sheet of its own.

   600px is measured, not assumed. On staging the footer runs 308px tall as four
   columns down to 1024, 514px as two-by-two at 900-768, and 1039px fully stacked
   at 600 and below. Blocksy already reflows on its own; only the stacked tier
   needed help. */

@media (max-width:600px){

	/* The heading widget is replaced by the <summary>, not deleted, so it can be
	   restored on the way back up. */
	.tsp-ftm-on .tsp-ftm__hidden{display:none}

	/* Social row, under the wordmark. The URLs are read from the FOLLOW widget at
	   runtime, so these icons and the accordion can never disagree. Anything still
	   pointing at "#" is skipped rather than shipped as a circle that goes
	   nowhere. */
	.tsp-ftm-on .tsp-ftm__social{
		display:flex;
		flex-wrap:wrap;
		gap:10px;
		margin:14px 0 0;
	}
	.tsp-ftm-on .tsp-ftm__soc{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		/* 44px is the touch target; the glyph inside stays small. */
		width:44px;
		height:44px;
		border-radius:50%;
		border:1px solid rgba(255,255,255,.22);
		color:rgba(255,255,255,.86);
		text-decoration:none;
		transition:background-color .15s,border-color .15s,color .15s;
	}
	.tsp-ftm-on .tsp-ftm__soc svg{width:18px;height:18px;fill:currentColor;display:block}
	.tsp-ftm-on .tsp-ftm__soc:hover{
		background:var(--tsp-red,#C8102E);
		border-color:var(--tsp-red,#C8102E);
		color:#fff;
	}
	.tsp-ftm-on .tsp-ftm__soc:focus-visible{
		outline:2px solid #fff;
		outline-offset:2px;
	}

	@media (prefers-reduced-motion:reduce){
		.tsp-ftm-on .tsp-ftm__soc{transition:none}
	}

	.tsp-ftm-on .tsp-ftm__acc{
		border-top:1px solid rgba(255,255,255,.12);
		margin:0;
	}
	.tsp-ftm-on .tsp-ftm__acc:last-of-type{border-bottom:1px solid rgba(255,255,255,.12)}

	.tsp-ftm-on .tsp-ftm__sum{
		display:flex;
		align-items:center;
		justify-content:space-between;
		/* 48px keeps the whole row a comfortable touch target. */
		min-height:48px;
		padding:12px 2px;
		cursor:pointer;
		list-style:none;
		font-family:var(--tsp-font-ui,system-ui,sans-serif);
		font-size:12.5px;
		font-weight:700;
		letter-spacing:.12em;
		text-transform:uppercase;
		color:#fff;
	}
	/* Safari still paints the default triangle without this. */
	.tsp-ftm-on .tsp-ftm__sum::-webkit-details-marker{display:none}
	.tsp-ftm-on .tsp-ftm__sum::marker{content:''}

	/* Chevron, drawn in CSS so there is no icon dependency. Rotates on open, and
	   holds still for anyone who asked for reduced motion. */
	.tsp-ftm-on .tsp-ftm__sum::after{
		content:'';
		width:9px;
		height:9px;
		margin-left:12px;
		flex:none;
		border-right:2px solid rgba(255,255,255,.62);
		border-bottom:2px solid rgba(255,255,255,.62);
		transform:rotate(45deg) translate(-2px,-2px);
		transition:transform .18s ease;
	}
	.tsp-ftm-on .tsp-ftm__acc[open] > .tsp-ftm__sum::after{
		transform:rotate(-135deg) translate(-3px,-3px);
	}
	.tsp-ftm-on .tsp-ftm__sum:focus-visible{
		outline:2px solid var(--tsp-red,#C8102E);
		outline-offset:-2px;
	}

	.tsp-ftm-on .tsp-ftm__acc > ul{
		list-style:none;
		margin:0;
		padding:0 0 10px;
	}
	.tsp-ftm-on .tsp-ftm__acc > ul > li{margin:0}
	.tsp-ftm-on .tsp-ftm__acc > ul > li > a{
		display:block;
		padding:9px 2px;
		font-size:14.5px;
		line-height:1.35;
		color:rgba(255,255,255,.82);
		text-decoration:none;
	}
	.tsp-ftm-on .tsp-ftm__acc > ul > li > a:hover,
	.tsp-ftm-on .tsp-ftm__acc > ul > li > a:focus-visible{color:#fff}

	/* An unresolved account should not ship as a tappable row that goes nowhere.
	   Matched on href="#" rather than on a network name, so this needs no edit
	   when a real URL is supplied — the row simply reappears. The icon row above
	   already skips the same links, so mobile stays consistent. Today this hides
	   WhatsApp only; desktop is untouched because the whole file is inside
	   @media (max-width:600px). */
	.tsp-ftm-on .tsp-ftm__acc > ul > li:has(> a[href="#"]){display:none}

	/* The theme stacks these columns with a 50px grid gap, which was fine for
	   four expanded lists and is 150px of dead space once they are 50px rows.
	   Measured: row 1 was 549px for ~393px of content. */
	/* Feed the theme its OWN variable rather than fight it. Blocksy sets the gap
	   on ".ct-footer [data-row] > div" with var(--columns-gap, 50px), which is
	   (0,2,1) and outranks a plain ".tsp-ftm-on .ct-container" — so that rule was
	   matching and still losing. Setting the variable wins with no specificity
	   war and no !important. */
	.tsp-ftm-on{--columns-gap:0px}
	.ct-footer.tsp-ftm-on [data-row] > div{gap:0}
	.tsp-ftm-on .ct-container > div{margin-block:0}
	.tsp-ftm-on .ct-widget{margin-block:0}
	/* the brand block keeps its own breathing room above the first hairline */
	.tsp-ftm-on .ct-container > div:first-child{margin-bottom:18px}

	/* The legal anchors have moved into MORE, which leaves their separators
	   behind as an orphaned "· ·". They sit in their own paragraph, so hiding
	   that paragraph is enough — and because the rule is scoped to .tsp-ftm-on it
	   reverses itself the moment the accordion is torn down. */
	.tsp-ftm-on .ct-footer-legal{display:none}

	/* Bottom bar: what remains is the copyright and the language switch.
	   Keep it on one compact line. */
	.tsp-ftm-on > div:last-child{padding-block:14px}
	.tsp-ftm-on > div:last-child .ct-container{
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		justify-content:space-between;
		gap:6px 14px;
		font-size:12.5px;
	}

	@media (prefers-reduced-motion:reduce){
		.tsp-ftm-on .tsp-ftm__sum::after{transition:none}
	}
}


/* ============================================================
   Shell alignment (desktop) — v1.10.596.

   The footer was the last reader-facing surface still sitting on the
   THEME's container rather than the platform's shell. Measured on
   staging at 1440: the header/content shell is left 120px, width 1200px;
   Blocksy's `.ct-container` inside the footer is left 140px, width
   1160px. So every footer column sat 20px inboard of the content above
   it, and the band was 40px narrower. Below 1200 the two agree (both are
   effectively full width), which is why this only shows from ~1366 up —
   and why it survived earlier passes that looked at 1024 and 1200.

   Fixed by giving the footer's container the SAME token the rest of the
   platform uses, not by inventing a number: `--tsp-wrap` resolves to
   `--tsp-shell` (1200px), the identical value the masthead and every
   archive already read. If the shell is ever retuned, the footer follows
   it automatically.

   Scoped to the footer, and to width only. No transform, no negative
   margin, no change to the columns, the logo, the link groups or the
   legal row — this moves the box the approved footer already lives in,
   nothing inside it.

   Kept in this file rather than a new one because this sheet is already
   enqueued unconditionally on every front-end view; a second request for
   a single rule would cost more than it explains.
   ============================================================ */

@media (min-width:601px){
	.site-footer .ct-container,
	footer.site-footer .ct-container,
	[data-footer] .ct-container{
		max-width:var(--tsp-wrap, var(--tsp-shell, 1200px));
		width:100%;
		margin-left:auto;
		margin-right:auto;
	}
}