/*
 * Green & Growin' education schedule.
 *
 * One table per day. On a computer it is a grid: time down the side, one
 * column per room. At 980px and below the same table is shown as a list
 * grouped by time, so nothing scrolls sideways on a phone.
 *
 * Specialty Classes are a plain list at every width: time on the left,
 * the class on the right.
 *
 * Selectors are deliberately specific so the theme's own table and heading
 * styles do not leak in.
 */

.gg-schedule,
.gg-key,
.gg-ceus {
	--gg-accent: #67ae3d;      /* the site's green */
	--gg-accent-dark: #3c7a1e; /* dark enough for white text on top */
	--gg-ink: #2b2b2b;
	--gg-muted: #5f5f5f;
	--gg-rule: #d9ddd5;
	--gg-band: #f3f7ef;
	/* Height of the site's pinned header plus some air. The jump-to-day links
	   stop this far above a day's heading. */
	--gg-header-offset: 144px;
}

.gg-schedule {
	color: var(--gg-ink);
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
}

.gg-schedule *,
.gg-key * {
	box-sizing: border-box;
}

.gg-schedule .gg-sr,
.gg-ceus .gg-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ days */

.gg-schedule .gg-days {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0 0 28px;
}

.gg-schedule .gg-days a.gg-days__link {
	padding: 7px 14px;
	border: 1px solid var(--gg-accent-dark);
	border-radius: 3px;
	color: var(--gg-accent-dark);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.gg-schedule .gg-days a.gg-days__link:hover,
.gg-schedule .gg-days a.gg-days__link:focus {
	background: var(--gg-accent-dark);
	color: #fff;
}

.gg-schedule .gg-day__anchor {
	display: block;
	position: relative;
	top: calc(-1 * var(--gg-header-offset));
	height: 0;
	visibility: hidden;
}

.gg-schedule .gg-day {
	margin: 0 0 48px;
}

.gg-schedule .gg-day__title {
	margin: 0 0 14px;
	padding: 0 0 10px;
	border-bottom: 3px solid var(--gg-accent);
	color: var(--gg-ink);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
}

/* ------------------------------------------------------------------ grid */

.gg-schedule table.gg-grid {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

.gg-schedule .gg-grid th,
.gg-schedule .gg-grid td {
	padding: 12px;
	border: 1px solid var(--gg-rule);
	color: var(--gg-ink);
	font-weight: 400;
	text-align: left;
	vertical-align: top;
	/* A very long word breaks rather than pushing out of its column. */
	overflow-wrap: break-word;
}

.gg-schedule .gg-grid .gg-col--time {
	width: 136px;
}

.gg-schedule .gg-nowrap {
	white-space: nowrap;
}

/* Track and room above each column. */
.gg-schedule .gg-grid .gg-colhead {
	background: var(--gg-accent-dark);
	border-color: var(--gg-accent-dark);
	color: #fff;
	vertical-align: bottom;
}

.gg-schedule .gg-colhead__track {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.25;
	text-transform: uppercase;
}

.gg-schedule .gg-colhead__room {
	display: block;
	margin-top: 2px;
	font-size: 14px;
}

/* The day, in the corner of each heading row: on paper only. */
.gg-schedule .gg-colhead__day {
	display: none;
}

.gg-schedule .gg-grid .gg-time {
	background: var(--gg-band);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.gg-schedule .gg-grid .gg-cell--empty {
	background: #fafafa;
}

/* ----------------------------------------------- Specialty Classes list */

.gg-schedule .gg-day--list {
	margin-bottom: 36px;
}

.gg-schedule .gg-day--list:last-child {
	margin-bottom: 0;
}

.gg-schedule .gg-day--list .gg-day__title {
	font-size: 21px;
	border-bottom-width: 2px;
}

.gg-schedule ul.gg-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gg-schedule .gg-list .gg-list__item {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 4px 20px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--gg-rule);
	list-style: none;
}

.gg-schedule .gg-list .gg-list__item:first-child {
	padding-top: 2px;
}

.gg-schedule .gg-list__time {
	color: var(--gg-accent-dark);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

/* No column headings here, so each class shows its room. */
.gg-schedule .gg-list .gg-session__where {
	display: block;
}

.gg-schedule .gg-list .gg-session__title {
	font-size: 16px;
}

/* -------------------------------------------------------------- sessions */

.gg-schedule .gg-session + .gg-session {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--gg-rule);
}

.gg-schedule .gg-session__title {
	margin: 0;
	padding: 0;
	color: var(--gg-ink);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

/* Shown when a session runs longer or shorter than the rest of its row. */
.gg-schedule .gg-session__time {
	margin-top: 3px;
	color: var(--gg-accent-dark);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.gg-schedule .gg-session__who {
	margin-top: 4px;
	color: var(--gg-muted);
	font-size: 14px;
	line-height: 1.35;
}

.gg-schedule .gg-session__org {
	font-style: italic;
}

/* Track and room on each session: the column heading already says it on a
   computer, so this shows only in the phone list and on full-width rows. */
.gg-schedule .gg-session__where {
	display: none;
	margin-bottom: 4px;
	color: var(--gg-accent-dark);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

.gg-schedule .gg-session__room {
	font-weight: 400;
}

.gg-schedule .gg-cell--wide .gg-session__where {
	display: block;
}

/* Breaks and keynotes run the full width. */
.gg-schedule .gg-grid .gg-row--wide .gg-cell {
	background: var(--gg-band);
}

.gg-schedule .gg-row--break .gg-session__title {
	color: var(--gg-muted);
	font-size: 16px;
}

.gg-schedule .gg-grid .gg-row--keynote .gg-cell {
	padding: 18px;
	border-left: 5px solid var(--gg-accent);
}

.gg-schedule .gg-session--keynote::after {
	content: "";
	display: table;
	clear: both;
}

.gg-schedule .gg-session__label {
	margin-bottom: 2px;
	color: var(--gg-accent-dark);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gg-schedule .gg-session--keynote .gg-session__title {
	font-size: 19px;
}

.gg-schedule .gg-session__description {
	max-width: 70ch;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.5;
}

.gg-schedule .gg-session__description p {
	margin: 0;
	padding: 0 0 8px;
}

.gg-schedule .gg-session__description p:last-child {
	padding-bottom: 0;
}

.gg-schedule img.gg-session__photo {
	float: right;
	width: 120px;
	height: 120px;
	margin: 0 0 8px 18px;
	border-radius: 50%;
	object-fit: cover;
}

/* ------------------------------------------------------------ CEU shapes */

.gg-ceus {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 8px 0 0;
	padding: 0;
	line-height: 1;
}

/* "Approved:" and "Applied for:", each followed by its shapes, the way the
   magazine prints them. The shapes flow on from the label like words, so a
   narrow grid cell wraps them under it rather than leaving the label alone. */
.gg-ceus .gg-ceus__line {
	display: block;
	line-height: 22px;
}

.gg-ceus .gg-ceus__label {
	margin-right: 6px;
	color: var(--gg-muted, #5f5f5f);
	font-size: 12px;
	font-style: italic;
	white-space: nowrap;
	vertical-align: middle;
}

.gg-ceus .gg-ceus__list {
	display: inline;
}

.gg-ceus .gg-ceu {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-right: 10px;
	white-space: nowrap;
	vertical-align: middle;
}

.gg-ceu__shape {
	display: block;
	flex: none;
}

/* The licence code beside each shape. Five of the shapes are circles that
   differ only in colour, so the letters are what tells them apart for anyone
   who cannot rely on colour, and on phones, where there is no hover. */
.gg-ceus .gg-ceu__code {
	color: var(--gg-muted, #5f5f5f);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------- CEU key */

.gg-key {
	margin: 0;
	padding: 18px 20px;
	border: 1px solid var(--gg-rule);
	border-top: 3px solid var(--gg-accent);
	color: var(--gg-ink);
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}

.gg-key .gg-key__title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
}

.gg-key .gg-key__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 8px 24px;
}

.gg-key .gg-key__item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.gg-key .gg-key__item svg {
	margin-top: 1px;
}

/* ------------------------------------------------------- phone and tablet */

/* "screen": paper always gets the grid, however narrow the sheet. */
@media screen and (max-width: 980px) {
	.gg-schedule {
		--gg-header-offset: 104px;
	}

	.gg-schedule table.gg-grid,
	.gg-schedule .gg-grid tbody,
	.gg-schedule .gg-grid tr,
	.gg-schedule .gg-grid th,
	.gg-schedule .gg-grid td {
		display: block;
		width: auto;
	}

	.gg-schedule .gg-day__title {
		font-size: 22px;
	}

	.gg-schedule .gg-day--list .gg-day__title {
		font-size: 19px;
	}

	.gg-schedule .gg-list .gg-list__item {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The column headings go; each session carries its own track and room. */
	.gg-schedule .gg-grid .gg-row--tracks,
	.gg-schedule .gg-grid .gg-cell--empty {
		display: none;
	}

	.gg-schedule .gg-session__where {
		display: block;
	}

	.gg-schedule .gg-grid .gg-row {
		margin: 0 0 18px;
		border: 1px solid var(--gg-rule);
	}

	.gg-schedule .gg-grid colgroup {
		display: none;
	}

	.gg-schedule .gg-grid .gg-time {
		width: auto;
		padding: 8px 14px;
		border: 0;
		background: var(--gg-accent-dark);
		color: #fff;
		font-size: 15px;
	}

	.gg-schedule .gg-grid .gg-cell {
		padding: 14px;
		border: 0;
		border-top: 1px solid var(--gg-rule);
	}

	.gg-schedule .gg-grid .gg-row--keynote .gg-cell {
		padding: 14px;
		border-left: 5px solid var(--gg-accent);
	}

	.gg-schedule .gg-session__title {
		font-size: 16px;
	}

	.gg-schedule img.gg-session__photo {
		width: 84px;
		height: 84px;
		margin-left: 12px;
	}

	.gg-key .gg-key__list {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ print */

/*
 * Printing a page that holds a schedule (or saving it as a PDF) gives the
 * schedule and nothing else: no site header or footer, and on a page made
 * with the Divi builder only the rows that hold a schedule, the CEU key, or
 * carry the class "gg-print". Anything with the class "gg-no-print" is left
 * out. Sheets are turned sideways; each day's grid starts on a new sheet,
 * and so does its afternoon, so every sheet has its own column headings.
 *
 * Everything that hides or resets part of the page begins with
 * "body:has(.gg-day)": it applies only where a schedule has actually been
 * drawn. A page whose schedule is switched off or empty, or that holds only
 * the CEU key, prints as it always did.
 */
@media print {
	@page {
		size: landscape;
		margin: 0.4in;
	}

	body:has(.gg-day) #top-header,
	body:has(.gg-day) #main-header,
	body:has(.gg-day) #main-footer,
	body:has(.gg-day) .et_pb_scroll_top,
	body:has(.gg-day) .gg-no-print {
		display: none !important;
	}

	html:has(.gg-day),
	body:has(.gg-day),
	body:has(.gg-day) #page-container,
	body:has(.gg-day) #et-main-area,
	body:has(.gg-day) #main-content {
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		box-shadow: none !important;
	}

	body:has(.gg-day) .et_pb_section:not(:has(.gg-schedule, .gg-print)),
	body:has(.gg-day) .et_pb_row:not(:has(.gg-schedule, .gg-print)):not(.gg-print) {
		display: none !important;
	}

	body:has(.gg-day) .et_pb_section:has(.gg-schedule, .gg-print) {
		padding: 0 !important;
	}

	body:has(.gg-day) .et_pb_row:has(.gg-schedule, .gg-print),
	body:has(.gg-day) .et_pb_row.gg-print {
		width: 100% !important;
		max-width: none !important;
		padding: 0 0 12px !important;
	}

	.gg-schedule {
		font-size: 11px;
	}

	.gg-schedule .gg-days {
		display: none;
	}

	.gg-schedule .gg-day {
		margin-bottom: 18px;
		break-inside: auto;
	}

	/* The grid starts on a new sheet, along with any heading the page gives
	   it; so does each further day, and each afternoon. */
	.et_pb_row:has(.gg-grid),
	.gg-schedule .gg-day + .gg-day:not(.gg-day--list),
	.gg-schedule .gg-grid .gg-row--tracks:not(:first-child) {
		break-before: page;
	}

	.gg-schedule .gg-day__title {
		margin-bottom: 8px;
		padding-bottom: 6px;
		font-size: 18px;
		break-after: avoid;
	}

	.gg-schedule .gg-grid th,
	.gg-schedule .gg-grid td {
		padding: 6px 7px;
	}

	.gg-schedule .gg-grid .gg-col--time {
		width: 96px;
	}

	.gg-schedule .gg-grid .gg-time,
	.gg-schedule .gg-session__who,
	.gg-schedule .gg-colhead__room,
	.gg-schedule .gg-list__time {
		font-size: 10.5px;
	}

	.gg-schedule .gg-session__title,
	.gg-schedule .gg-list .gg-session__title {
		font-size: 11.5px;
	}

	.gg-schedule .gg-session--keynote .gg-session__title {
		font-size: 14px;
	}

	.gg-schedule .gg-colhead__track,
	.gg-schedule .gg-session__where,
	.gg-ceus .gg-ceus__label,
	.gg-ceus .gg-ceu__code {
		font-size: 9.5px;
	}

	.gg-schedule .gg-grid .gg-row--keynote .gg-cell {
		padding: 8px 10px;
	}

	.gg-schedule .gg-list .gg-list__item {
		padding: 7px 0;
	}

	.gg-ceus {
		gap: 0;
		margin-top: 4px;
	}

	.gg-ceus .gg-ceus__line {
		line-height: 16px;
	}

	.gg-schedule .gg-grid tr,
	.gg-schedule .gg-list .gg-list__item,
	.gg-key {
		break-inside: avoid;
	}

	.gg-key {
		padding: 10px 12px;
		font-size: 10.5px;
	}

	.gg-key .gg-key__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 5px 16px;
	}

	.gg-schedule .gg-grid .gg-colhead,
	.gg-schedule .gg-grid .gg-time {
		background: none;
		color: #000;
		border-color: #999;
	}

	.gg-schedule .gg-colhead__track,
	.gg-schedule .gg-colhead__room {
		color: #000;
	}

	.gg-schedule .gg-colhead__day {
		display: block;
		font-size: 10.5px;
		font-weight: 700;
		line-height: 1.3;
	}
}