/* =============================================================================
   03-layout.css — page shell and helpers
   The container, the float column system, the section divider rules, and the
   handful of one-property utility classes. No component styling lives here.
   ============================================================================= */

/* Visible to screen readers, invisible on screen. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Old-school float clearfix, still needed by the float columns below. */
.clear::after {
	content: "";
	display: block;
	clear: both;
}

/* --- The container --------------------------------------------------------
   Every section wraps its content in .container. It has no max-width of its
   own: templates add .width_1200 to cap it. z-index: 99 keeps it above the
   decorative banner strips, which are absolutely positioned.
   -------------------------------------------------------------------------- */
.container {
	position: relative;
	z-index: 99;
	margin: 0 auto;
	padding: 0 1.875rem;
}

.width_1200 {
	max-width: 1200px;
}

/* --- Float columns --------------------------------------------------------
   Predates the theme's grid/flex layouts. New sections should use grid; these
   stay because most templates still depend on them.
   -------------------------------------------------------------------------- */
.container .column {
	display: inline-block;
	width: 100%;
}

/* Float on its own — also used by the header burger (.menu.right). */
.left  { float: left; }
.right { float: right; }

/* Inside a .column the two floats become a 50/50 pair. Templates override the
   width per section, e.g. #mainbanner sets 70/30. */
.container .column .left {
	width: 50%;
	padding-right: 1.5625rem;
}

.container .column .right {
	width: 50%;
	padding-left: 1.5625rem;
}

/* A single full-width column inside the same .column shell. */
.column.cols1 {
	width: 100%;
}

/* --- Colour helpers ------------------------------------------------------- */
.purple_txt { color: var(--js-purple); }
.blue_txt   { color: var(--js-blue); }
.orange_txt { color: var(--js-orange); }
.yellow_txt { color: var(--js-yellow); }
.yellow_ink_txt { color: var(--js-yellow-ink); }
/* --js-yellow-ink */

.colbk3 { color: var(--js-purple); }
.colbk2 { color: var(--js-blue); }
.colbk1 { color: var(--js-orange); }
.colbk4 { color: var(--js-yellow); }

/* --- Section dividers -----------------------------------------------------
   Add .section_border_top and/or .section_border_bottom to a <section> holding
   a .container. They use different pseudo-elements, so one section can have
   both. The line is drawn on the container rather than the section so it lines
   up with the content instead of running the full window width.

   Spacing and colour are overridden per section, on the SECTION itself:
       --section_border_space_above
       --section_border_space_below
   The section's own padding is untouched, so adding a divider never moves
   anything.
   -------------------------------------------------------------------------- */
.section_border_top > .container::before,
.section_border_bottom > .container::after {
	content: "";
	display: block;
	height: 1px;
	background-color: var(--js-grey-tint);
}

.section_border_top > .container::before {
	margin: var(--section_border_space_above, 0) 0 var(--section_border_space_below, 1.25rem);
}

.section_border_bottom > .container::after {
	margin: var(--section_border_space_above, 1.25rem) 0 var(--section_border_space_below, 0);
}

/* ============================================================================= */

@media (max-width: 1000px) {
	/* Both float columns go full width. The !important is inherited from the
	   original rule: several templates set these widths on the element itself,
	   and dropping it would change more than a tidy-up should. */
	.container .column .left,
	.container .column .right {
		width: 100% !important;
		padding: 0 !important;
	}

	.column.cols1 {
		padding-bottom: 2.8125rem;
	}
}

@media (max-width: 750px) {
	.container {
		padding: 0 1rem;
	}
}

@media (max-width: 500px) {
	.container {
		padding: 0 0.75rem;
	}
}