/* ==========================================================================
   Guide
   ========================================================================== */

/**	Try to order declarations and separate
 *	groups with an empty line if needed.
 *	Prefer concentric order - from outside to inside
 *
 *	variables
 *	external layout
 *		position (top, left, z-index, flex/grid self positioning)
 *		box model (display, float, margin, width, height)
 *	borders
 *	internal layout 
 *		content
 *		padding
 *		layout (flex/grid internal rules, columns)
 *		alignment
 *		overflow, wrap
 *	typography (font-*, text-*, line-height, letter-spacing, quotes, ...)
 *	decorations (colors, shadows, cursor)
 *	specials/misc (animations, transforms)
 */

/* ==========================================================================
   Resets
   ========================================================================== */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Globals
   ========================================================================== */
:root {
	/* Sizes
   	   ====================================================================== */
	--spacing-xs: .2rem;
	--spacing-sm: .5rem;
	--spacing-base: 1rem;
	--spacing-lg: 1.8rem;
	--spacing-xl: 3.5rem;
	--spacing-2xl: 6rem;
	--spacing-3xl: 9rem;

	--border-light: .05rem;
	--border-base: .1rem;
	--border-thick: .18rem;

	--border-radius: .18rem;

	--text-sm: 1rem;
	--text-base: 1.15rem;
	--text-lg: 1.3rem;
	--text-xl: 1.5rem;
	--text-2xl: 2.8rem;
	--text-3xl: 4rem;

	/* using em so it is proportional to font size */
	--letter-spacing: .075em;


	/* Typography
   	   ====================================================================== */
	--main-font: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, sans-serif; /* vai Fira Sans ? */
	--alt-font: Raleway, Helvetica, sans-serif; /* vai Montserrat? */
	
	--text-light: 300; /* available for --main-font, including italics */
	--text-normal: 400; /* available for --main-font and --alt-font */
	--text-strong: 500; /* available for --alt-font */
	--text-bold: 600; /* available for --alt-font */
	
	
	/* Colors
   	 * ======================================================================
	 *
	 *	Minimum contrast (AA) is 4.5.
	 *	Can be down to 3 for font-size >=18pt and >=14pt if bold.
	 *	Needs contrast 7 (AAA) for long texts.
	 *	18pt ~= 24px = 1.5rem ~= .text-xl
	 *	14pt ~= 18.5px = 1.2 rem ~= .text-lg
	 */
	
	/*name     code         purpose            contrast			*/
	/*                                   on white   on --black	*/
	--black:   #101318;  /* text         18.61      1		  */
	--gray:    #00a3b3;  /* main         3.05       6.11      */
	--orange:  #ff6b00;  /* accent       2.86       6.52      */
	--blue:    #0094ff;  /* accent       3.14       5.92      */
	--green:   #5fed5a;  /* interaction  1.53       12.18     */
	--dark:    #00bc82;  /* interaction  2.47       7.55      */

	/* Code colour scheme taken from Mike Golus */
	/* https://codepen.io/mikegolus/pen/OwrPgB */
	--bgColor: #101318;
	--alkaliMetalColor: #ecbe59;
	--alkalineEarthMetalColor: #dee955;
	--lanthanoidColor: #ec77a3;
	--actinoidColor: #c686cc;
	--transitionMetalColor: #fd8572;
	--postTransitionMetalColor: #4cddf3;
	--metalloidColor: #3aefb6;
	--otherNonmetalColor: #52ee61;
	--nobleGasColor: #759fff;
	--unknownColor: #cccccc;

	
	/* Easings from https://gist.github.com/bendc/ac03faac0bf2aee25b49e5fd260a727d */
	--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
	--ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
	--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
	--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
	--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
	--ease-in-circ: cubic-bezier(.6, .04, .98, .335);

	--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
	--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
	--ease-out-quart: cubic-bezier(.165, .84, .44, 1);
	--ease-out-quint: cubic-bezier(.23, 1, .32, 1);
	--ease-out-expo: cubic-bezier(.19, 1, .22, 1);
	--ease-out-circ: cubic-bezier(.075, .82, .165, 1);

	--ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
	--ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
	--ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
	--ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
	--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
	--ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);

	/* Our default easing */
	--ease: var(--ease-in-out-cubic);
}

/* ==========================================================================
   Body
   ========================================================================== */
body {
	max-width: 70rem;
	margin-left: auto;
	margin-right: auto;

	display: grid;
	grid-template-columns: 
		[viewport-start] 
			minmax(var(--spacing-base), 1fr)
			[container-start]
				minmax(0, 50rem)
			[container-end]
			minmax(var(--spacing-base), 1fr) 
		[viewport-end];

	font-family: var(--main-font);
	font-weight: var(--text-normal);
	line-height: 1.4;
	
	color: var(--black);
}

/**	Any rule from within component will override this
 *	because they scope style using classes by default
 *	and that's more specific than this selector.
 */
body > * {
	grid-column: container;
}

/* For now so the page doesn't hit the bottom */
body > :last-child {
	margin-bottom: var(--spacing-base);
}

/* ==========================================================================
   Content
   ========================================================================== */
h1,h2,h3,h4,h5,h6 {
	margin: 0;
	
	font-family: var(--alt-font);
	font-weight: var(--text-bold);
	font-size: var(--text-xl);
	line-height: 1.2;
	letter-spacing: var(--letter-spacing);
	
	color: var(--gray);
}

h1 {
	padding-top: var(--spacing-lg);
	padding-bottom: var(--spacing-lg);
	
	text-align: center;
	
	font-size: var(--text-2xl);
	font-weight: var(--text-strong);
	text-transform: uppercase;
	
	color: var(--orange);
}

h2 {
	font-size: var(--text-xl);
}

p {
    padding-top: var(--spacing-sm);
	text-align: justify;
	
    font-size: var(--text-base);
	font-weight: var(--text-light);
}

h1 + p {
	display: block;
	margin-bottom: var(--spacing-lg);
	
	border-top: var(--border-light) solid var(--gray);
	border-bottom: var(--border-light) solid var(--gray);
	
	padding-top: var(--spacing-base);
	padding-bottom: var(--spacing-base);
	padding-left: var(--spacing-3xl);
	padding-right: var(--spacing-3xl);
}

p + h2 {
	margin-top: var(--spacing-lg);
}

a {
	/* https://practicaltypography.com/underlining.html */
	text-decoration: none;
	color: inherit;
}

p a {
	font-variant-caps: small-caps;
	letter-spacing: var(--letter-spacing);
	color: var(--orange);
	font-family: var(--alt-font);
	font-weight: var(--text-normal);
}

p a:hover, p a:focus, p a:active {
	color: var(--dark);
}

/* ==========================================================================
   Sections
   ========================================================================== */
section {
	margin-top: var(--spacing-xl);
	margin-bottom: var(--spacing-2xl);
	
	display: grid;
    row-gap: var(--spacing-sm);
	column-gap: var(--spacing-lg);
    grid-template-columns: 4fr 6fr;
    grid-template-areas:
        'figure title'
        'figure text'
        'button text';
}

section:nth-of-type(even) {
    grid-template-columns: 6fr 4fr;
    grid-template-areas:
        'title figure'
        'text figure'
        'text button';
}

.section__figure {
	grid-area: figure;
}

.section__figure img {
	width: 100%;
}

.section__figcaption {
	text-align: center;
	
	color: var(--orange);
	background: var(--black);
	opacity: 0.8;
}

.section__button {
	grid-area: button;
}

.section__text {
	grid-area: text;
	
	overflow: auto;
}

.section__heading {
	font-size: var(--text-lg);
	grid-area: title;
}