/*	TEMPORARY STYLES FOR MARGIN AND PADDING
	OF H1-H6 HEADERS (FOR TESTING ONLY) */


/*	When ready, remove selectors that are no longer needed (namely, h1-h6) from the declaration in
	the main style sheet that starts on line 291. This code block gives all levels of headings the
	same top and bottom margins as a regular paragraph, which is a bad idea.
	
	Also, remember to remove lines 307-314, which give a margin-bottom of 0 to h1-h6 headings that
	are "last-child" elements. Once those lines are removed, the :last-child variants below can be
	removed (e.g., just use "h1" instead of "h1, h1:last-child"). */
h1, h1:last-child {
	margin-bottom: 24px;
}	
	
h2, h2:last-child {
	margin-bottom: 18px;
}

h3, h3:last-child {
	margin-bottom: 12px;
}

h4, h4:last-child {
	margin-bottom: 10px;
}

h5, h5:last-child {
	margin-bottom: 8px;
}

h6, h6:last-child {
	margin-bottom: 8px;
}

/*	We won't need the declaration below once we remove the lines mentioned above from the main
	style sheet. (Twenty-four pixels has already been set as the "normal" bottom margin for p, ol,
	and ul elements.) */
:is(p, ol, ul):last-child {
	margin-bottom: 24px;
}

/*	Keep the height of banner images the same as with the previous iteration of the style sheet.
	(An h1 heading that's embedded in a banner image doesn't need a 24px bottom margin. With the
	old style sheet, the bottom margin was suppressed by virtue of an h1 in that context being a
	last-child element.) */
.title-block__content h1.page-title {
	margin-bottom: 0;
}

/*	The next two styles may not be needed when we make our changes directly to the main style
	sheet. They're needed on the testing pages because of the "last-child" margin override we're
	appling above, in line 39. */
.header-nav ul {
	margin-bottom: 0;
}

ul.header-utility__list {
	margin-bottom: 0;
}

/*	Give a 1.3em top margin to any heading that immediately follows a paragraph or list.
	Case 1: when the paragraph and the heading are in the same content block.
*/
:is(p, ul, ol) + :is(h2, h3, h4, h5, h6) {
	margin-top: 1.3em;
}

/*	Inside divs that have the class "card," suppress the bottom margin of any element that
	(1) normally has a 24px bottom margin and (2) is directly followed by a heading. Margin
	collapse will not occur in this context because "card" divs have a display property of
	"flex."
	
	Example page:
	https://www.adea.org/CAAPID/Virtual-Fair
*/
.card :is(p, ul, ol):has(+ :is(h2, h3, h4, h5, h6)) {
	margin-bottom: 0;
}


/*	Case 2: when the paragraph and the heading are in separate content blocks. */
div:has(> .sfContentBlock:last-child > :is(p, ul, ol):last-child) +
div > .sfContentBlock:first-child > :is(h2, h3, h4, h5, h6):first-child {
	margin-top: 1.3em;
}

/*	Case 3: when the heading is at the beginning of an "aside" element in mobile layout. */
@media (max-width: 959px) {
	
	div:has(> div:last-child > .sfContentBlock:last-child > :is(p, ul, ol):last-child) +
	div.interior-layout__aside > div:first-child > .sfContentBlock:first-child > :is(h2, h3, h4, h5, h6):first-child {
		margin-top: 1.3em;
	}

}

/*	Give a 32px top margin to any heading that immediately follows another heading.
	Case 1: when the two headings are both in the same content block.
*/
:is(h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) {
	margin-top: 32px;
}

/*	Case 2: When the two headings are in separate content blocks. */
div:has(> .sfContentBlock:last-child > :is(h2, h3, h4, h5, h6):last-child) +
div > .sfContentBlock:first-child > :is(h2, h3, h4, h5, h6):first-child {
	margin-top: 32px;
}

/*	Give a 24px top margin to any accordion item that has a heading immediately above it.
	(Accordion items have a bottom margin of 48px, so it looks weird to give them a top margin
	of only 12px.) */
div:has(> .sfContentBlock:last-child > :is(h2, h3, h4, h5, h6):last-child) + div.accordion {
	margin-top: 24px;
}

/*	Give a 60px bottom margin to any accordion item that has a heading immediately below it. (This
	is an increase over the standard 48px bottom margin for accordions.) This creates a larger,
	more appropriate space between groups of accordion items that are each introduced by a
	heading.
	
	Example page:
	https://www.adea.org/home/ADEAevents/event-faq/international-travel-faq
*/
div.accordion:has(+ div > .sfContentBlock > :is(h2, h3, h4, h5 ,h6):first-child) {
	margin-bottom: 60px;
}

/*	Give a 24px top margin to any group of horizontal tabs that has a heading immediately above
	it. */
div:has(> .sfContentBlock:last-child > :is(h2, h3, h4, h5, h6):last-child) + div.tabs {
	margin-top: 24px;
}

/*	Suppress the top margin of any paragraph that immediately follows a heading. (With headings
	that are h4 and smaller, we want the space between the heading and the paragraph to be less
	than 12px, which is the standard top margin for a paragraph.)
	
	Case 1: when the heading and the paragraph are in the same content block.
*/
:is(h2, h3, h4, h5, h6) + p {
	margin-top: 0;
}

/*	Case 2: when the heading and the paragraph are in separate content blocks. */
div:has(> .sfContentBlock:last-child > :is(h2, h3, h4, h5, h6):last-child) +
div > .sfContentBlock:first-child > p:first-child {
	margin-top: 0;
}

/*	Add the following line of code to Josh Johnson's styles for the .Date-separator class in the
	main style sheet. (This class adds a 3px bottom border to the heading. That works fine with
	the existing style sheet, but with the changes we're making, the margin below the bottom
	border would look too small without this adjustment.) */
.Date-separator {
	margin-bottom: 24px;
}

/*	Give extra top margin to any button that immediately follows a heading. */
:is(h2, h3, h4, h5, h6) + .button,
:is(h2, h3, h4, h5, h6) + p:has(> .button:first-child),
:is(h2, h3, h4, h5, h6) + p:has(> a:first-child > .button) {
	margin-top: 24px;
}

/*	Give a 48px top margin to any heading that directly follows an embedded YouTube video. */
.responsive-video + div > .sfContentBlock:first-child > :is(h2, h3, h4, h5, h6):first-child {
	margin-top: 48px;
}

/*	Give a 48px top margin to any heading that directly follows a div with a light-blue background
	color. */
.content-box + :is(h2, h3, h4, h5, h6) {
	margin-top: 48px;
}

/*	Give a 24px top margin to any table that directly follows a heading. */
:is(h2, h3, h4, h5, h6) + table {
	margin-top: 24px;
}

/*	Avoid creating extra space with the empty paragraph that the Events template inserts near the
	bottom of each event's row.
	
	Example page:
	https://www.adea.org/Events/Past-Events
*/
.events-feature-container .space-t-100 p {
	margin-bottom: 0;
}

/*	Avoid extra space at the bottom of a "key date" card.

	Example page:
	https://www.adea.org/2027/
*/
.events-key-dates__date-card td > p:last-child {
	margin-bottom: 0;
}

/*	The remaining styles handle spacing around the bottoms of "grid units."

	Divs with the class "grid__unit" automatically get a 24px bottom margin on mobile and a 48px
	bottom margin on desktop. Adding more empty space to that can look awkward. (Margins don't
	collapse in this situation.) */

/*	In mobile layouts, shrink the bottom margin of elements that come at the end of a grid unit... */
.grid__unit > div:last-child > div.sfContentBlock:last-child > :is(p, ul, ol, h2, h3, h4, h5, h6):last-child {
	margin-bottom: 12px;
}

/* ... and shrink the top margin of elements that come right below a grid unit. */	
.grid + div > .sfContentBlock:first-child > *:first-child {
	margin-top: 12px;
}	

/*	In desktop layouts, suppress those same margins altogether. */
@media (min-width: 768px) {
	
	.grid__unit > div:last-child > div.sfContentBlock:last-child > :is(p, ul, ol, h2, h3, h4, h5, h6):last-child {
		margin-bottom: 0;
	}

	.grid + div > .sfContentBlock:first-child > *:first-child {
		margin-top: 0;
	}

}