/*
	Static layout fallback for the content/sidebar two-column grid.

	The "skel" framework (skel.min.js) links css/skel.css + css/style.css only
	inside <noscript>; with JS it loads per-breakpoint stylesheets and is meant
	to gate them by viewport. In Chromium-based browsers (e.g. Microsoft Edge)
	that gating does not take, so skel's MOBILE "collapse" rule from the
	"narrower" breakpoint leaks onto the desktop:

	    .row:not(.no-collapse)...:not(.no-collapse-3) > * {
	        float: none !important; width: 100% !important; }

	Because it is !important, every .row child (incl. #content and #sidebar)
	is forced to full width and the columns overlap/stack. Firefox gates the
	breakpoint correctly, so it only collapses on small screens.

	Below we re-assert the two-column layout for wide viewports with !important.
	The selector carries two IDs, so it outranks skel's all-class collapse
	selector even when both declarations are !important. Widths mirror
	css/skel.css (.8u / .4u), so this never conflicts with the working JS path.
	On small screens (<= 840px) we intentionally do NOT override, letting skel's
	collapse stack the columns as intended.
*/

*, *::before, *::after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Contain the floated columns and push the Important Dates block below them,
   even when skel's runtime clearfix (.row:after) is absent. */
#main .row::after {
	content: '';
	display: block;
	clear: both;
}

#main .row > .wrapper {
	clear: both;
}

/* Wide viewports ONLY (>= 841px): restore the two-column layout that skel's
   leaked mobile-collapse rule breaks, and fix the in-content overflow problems
   that restoring the columns exposes. Everything in this block is intentionally
   gated to desktop -- at <= 840px skel's collapse to a single stacked column is
   the CORRECT behaviour and must not be overridden, so the mobile layout keeps
   skel's native widths and the partials' inline styles untouched. */
@media screen and (min-width: 841px) {

	/* Re-assert the two columns, overriding skel's leaked collapse
	   (hence !important + two-ID specificity). */
	#main .row > #content.skel-cell-important {
		float: left !important;
		width: 66.6666666667% !important;
	}

	#main .row > #sidebar {
		float: left !important;
		width: 33.3333333333% !important;
	}

	/* The "Important Dates" partial (and a few other in-content blocks) wrap
	   their body in <section class="container">. In skel, ".container" is the
	   TOP-LEVEL centred page wrapper and is given a FIXED pixel width per desktop
	   breakpoint (960 / 1200 / 1400px). Nested here inside #content (the "8u",
	   ~66.6% column) that fixed width is WIDER than the column, so the block --
	   and the dates table inside it -- overflows to the right, across the floated
	   announcements #sidebar. (On mobile #content is full width, so the container
	   fits and there is nothing to fix -- another reason this is desktop-only.)
	   Constrain any .container nested inside #content to its parent's width. */
	#main #content .container {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* The dates table's inline "width:60%; margin:20px auto" makes it 60% of its
	   wrapper. On the homepage the table lives inside #content (so it follows the
	   body text directly) -- there 60% of the already-narrow ~66.6% column reads
	   as ~40% of the page and looks too small. Inside #content, let the table
	   fill the column (i.e. 66.6% of the page). Other pages keep it at body level
	   where the inline 60% centring still applies; mobile keeps the inline 60%. */
	#main #content .row.flush > table {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Inside some workshop pages' #content sits a leftover wrapper,
	   <div class="row gtr-150"><div class="col-8 col-12-small">, whose classes
	   are defined in no stylesheet and which inherits skel's negative gutter
	   margins. Depending on which breakpoint skel happens to apply (inconsistent
	   across Chromium versions), col-8 can grow wider than #content and overflow
	   into the announcements sidebar. It is a single-column wrapper with no layout
	   purpose, so force it (and its children) to a plain full-width block that
	   cannot overflow. Scoped to .gtr-150 specifically so it does NOT stretch the
	   dates table's own <div class="row flush">. */
	#main #content .row.gtr-150 {
		margin: 0 !important;
		width: 100% !important;
	}

	#main #content .row.gtr-150 > * {
		float: none !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Long raw-URL links should wrap at ANY character so they fill the column,
   instead of only breaking after symbols (/, ?, =, .) and leaving ragged short
   lines. word-break: break-all is required for this; overflow-wrap: anywhere
   still prefers the symbol break points. This class is applied (by the script
   in head.html.j2) only to links whose visible text is itself a URL, so
   readable-text links are never split mid-word. */
a.break-anywhere {
	word-break: break-all;
	overflow-wrap: anywhere;
}