/*****************************************************************************
/***                    AutoIterative landing CSS file                     ***

Table of contents:

  1. Variables: things that we define and reuse everywhere
  2. Defaults: styles that should be applied by default to any HTML
  3. Basic elements: styles that apply to HTML elements
  4. Typography: monofonts and comic sanses here
  5. Layout: headers, footers, all that jazz
  6. Elements: buttons, links, and blinks

 ****************************************************************************/

/*****************************************************************************
 ***        1. Variables: things that we define and reuse everywhere       ***
 ****************************************************************************/
:root {

	/* Corporate colors we use in the logo, from darker to lighter */
	--clr-ais-blue-0: rgb(2 149 218); /* #0295da;	/* rgb(2, 149, 218) */
	--clr-ais-blue-1: #36abe1;	/* rgb(54, 171, 225) */
	--clr-ais-blue-2: #6abeea;	/* rgb(106, 190, 234) */
	--clr-ais-blue-3: #8ecfef;	/* rgb(142, 207, 239) */
	--clr-ais-green-0: #67ca39;	/* rgb(103, 202, 57) */
	--clr-ais-green-1: #7fd35a;	/* rgb(127, 211, 90) */
	--clr-ais-green-2: #9cdc7e;	/* rgb(156, 220, 126) */

	/* OLD */
	--blue-3-alpha: rgba(142 207 239 / 0.1);
	--default-border-radius: 0.2rem;
	--bootstrap-green: rgb(40 167 69);
	--bootstrap-green-alpha: rgba(40 167 69 / 0.1);
	--bootstrap-font-color: #212529;

	/* snatched from bootstrap too (TODO: calc() and derivative from the above */
	--alert-danger-background-color: #f8d7da;
	--alert-danger-border-color: #f5c6cb;
	--alert-danger-color: #721c24;
	--alert-info-background-color: #d1ecf1;
	--alert-info-border-color: #bee5eb;
	--alert-info-color: #0c5460;
	--alert-success-background-color: #d4edda;
	--alert-success-border-color: #c3e6cb;
	--alert-success-color: #155724;

	/* Reading parameters
	 * 	0.6 is to be considered ch/rem ratio.
	 *
	 * 	In reality, its 0.556xxx but lets make it a tad wider.
	 * 	In rems for easier calculations */
	--max-reading-width: 36rem;	/* aka about 60ch; */
	--max-blockquote-width: 30rem;	/* aka about 50ch; */
}




/*****************************************************************************
 ***   2. Defaults: styles that should be applied by default to any HTML   ***
 ****************************************************************************/
*, *::before, *::after { box-sizing: border-box; }


/*****************************************************************************
 ***         3. Basic elements: styles that apply to HTML elements         ***
 ****************************************************************************/

::-moz-selection { background: var(--clr-ais-blue-0); color: #efefef; }
::selection { background: var(--clr-ais-blue-0); color: #efefef; }

a { color: var(--clr-ais-blue-0); }

a:hover,
a:focus {
	color: var(--clr-ais-blue-2);
}

h1, h2, h3, h4, h5, h6 {
	text-align: center;
	line-height: 1;
	padding: 0;
	margin: 0;
}

img {
	max-width: 100%;
}

body {
	display: grid;
	grid: auto 1fr auto / 1fr;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

/* hr {} */

section p {
	margin: 1.5rem 1rem 0;
}

details {
	border: 1px solid var(--clr-ais-blue-3);
	border-radius: var(--default-border-radius);
	padding: 0.5rem;
	margin: 1.5rem 1rem 0;
}

details summary {
	color: var(--clr-ais-blue-0);
	font-weight: 600;
	cursor: pointer;
}

details p {
	padding: 0;
	margin: 0;
	margin-top: 1rem;
}


/*****************************************************************************
 ***            4. Typography: monofonts and comic sanses here             ***
 ****************************************************************************/
html {
	color: #333;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1rem;						/* 16 px by default */
	font-size: clamp(1rem, calc(0.85rem + 0.8vw), 1.25rem);	/* scale from 16px@300px to 20px@800px, linearly */
	line-height: 1.5;
	min-height: 100vh;
	scroll-behavior: smooth;
	width: 100%;
	height: 100%;
}

span.strong {
	font-weight: 700;
}

/*****************************************************************************
 ***              5. Layout: headers, footers, all that jazz               ***
 ****************************************************************************/



/* header lement start */
header#header {
	grid-column: 1 / -1;
	border-bottom: 1px solid var(--clr-ais-blue-3);
	display: flex;
	flex-direction: column;
	padding: 1rem;
	background: linear-gradient(180deg, white 4em, var(--blue-3-alpha));
}

/* header logo element start */
div[data-name="header-logo"] {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: row;
}

/* actual logo as a pseudo element of the first child */
div[data-name="header-logo"]:first-child::before {

	/* HAS to be absolute, because otherwise testcafe breaks several turtles up the stack in a completely different project. fuck. */
	background-image: url("https://autoiterative.com/img/logo.svg");
	background-size: 100% 100%;
	content: "";
	height: clamp(2rem, 2vw, 3rem);
	width: clamp(2rem, 2vw, 3rem);
	margin-right: 0.5rem;
}

/* company name inside the logo element: can be a or span */
div[data-name="header-logo"] > a,
div[data-name="header-logo"] > span {
	text-decoration: none;
	white-space: nowrap;
	font-weight: 700;
	padding-top: 0.2rem;
	color: var(--clr-ais-blue-2);
}
div[data-name="header-logo"] > span { cursor: default; }

/* the hamburger element start */
input#header-nav-toggle {
	display: none;
}

label[for="header-nav-toggle"] {
	display: flex;
	align-items: center;
	margin-left: auto;
	height: clamp(2rem, 2vw, 3rem);
}

label[for="header-nav-toggle"] span,
label[for="header-nav-toggle"] span::before,
label[for="header-nav-toggle"] span::after {
	display: block;
	height: 0.15rem;
	width: 1.5rem;
	background: var(--clr-ais-blue-2);
	position: relative;
	border-radius: 0.1rem;
}

label[for="header-nav-toggle"] span::before,
label[for="header-nav-toggle"] span::after { content: ""; position: absolute; }

label[for="header-nav-toggle"] span::before { top: 0.5rem; }
label[for="header-nav-toggle"] span::after { bottom: 0.5rem; }



/* header nav element start, hidden by default */
nav[data-name="header-nav"] {
	display: flex;
	height: 0;
	overflow: hidden;
	flex-direction: column;
	line-height: 2.5;
	transition: height 250ms ease-in-out; /* super simple transition for now just to have _something_ */
}

/* header nav element when:
 *   - hamburger is clicked
 *   - or the focus is within header-nav
 * */
input#header-nav-toggle:checked ~ nav[data-name="header-nav"],
nav[data-name="header-nav"]:focus-within {
	height: auto;
	margin-top: 1rem;
	transition: height 50ms ease-in-out;
}

div[data-name="nav-dropdown-container"] {
	display: flex;
	flex-direction: column;
	line-height: 2;
}

div[data-name="nav-dropdown-container"] [data-name^="nav-compare-with-"] {
	margin-left: 2rem;
}


/* main element start */

/* main {} */

/* main sections start */
main section {
	margin-top: 2rem;
	grid-column: 1 / -1;
}

/* hero section start */
main section.hero {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1rem;
	padding-top: 2rem;
	background: linear-gradient(0deg, var(--blue-3-alpha), #fff);
}

/* hero section order of elements */
main section.hero h1 { order: -2; }
main section.hero [data-name="tldr"] { order: -1; margin: 2rem auto; }

/* section right after hero one should stick to it */
main section.hero + section {
	padding-top: 0;
	margin-top: 0;
}

main section.hero p { margin: 2rem auto 0; }

main section h2,
main section h3 {
	color: white;
	padding: 1rem;
	text-align: left;
	line-height: 1.2;
	background: linear-gradient(90deg, var(--clr-ais-blue-1), var(--clr-ais-blue-0));
	font-variant: small-caps;
}

img[data-name="the-jif"] {
	margin: 2rem auto;
	box-shadow: 0 0.5rem 0.5rem -0.5rem #999;
	background: white;
}

main section.hero [data-name="tldr"] > a.button { margin: 2rem auto 0; display: block; width: -webkit-max-content; width: -moz-max-content; width: max-content; }

/* "yes." or "no." paragraphs */
main section.measure > h3 + p {
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--clr-ais-blue-0);
}

/* second paragraphs with one sentence explanation */
main section.measure > h3 + p + p {
	font-size: 1.1rem;
	color: black;
}

/* first paragraph in the how to improve section */
main section.improve p:nth-of-type(1) {
	font-size: 1.25rem;
	color: var(--clr-ais-blue-0);
}

main section.cta {
	display: flex;
	flex-direction: column;
}

main section.cta a.button {
	margin: 2rem auto 0;
}

main section.read {
	font-size: 0.875rem;
	color: #333;
}

main section.read h4 {
	color: white;
	padding: 1rem;
	text-align: left;
	line-height: 1.2;
	background: linear-gradient(90deg, var(--clr-ais-blue-2), var(--clr-ais-blue-3));
	font-variant: small-caps;
}

/* footer element start */
footer#footer {
	grid-column: 1 / -1;
	border-top: 1px solid var(--clr-ais-blue-3);
	color: #666;
	display: flex;
	flex-flow: row wrap;
	font-size: 0.8rem;
	justify-content: center;
	margin-top: 2rem;
	padding: 1rem;
}

/* footer: simple separators between elements */
footer#footer > div:not(:last-child)::after {
	content: "|";
	margin: 0 0.5rem;
}

/* TODO: footer icons? */

/* but except social links, those should be grouped together tighter */
footer#footer > div[data-name^="footer-social"]:not(:last-child)::after {
	content: " ";
	margin: 0 0.5rem 0 0;
}



/*****************************************************************************
 ***               6. Elements: buttons, links, and blinks                 ***
 ****************************************************************************/

/* buttons start: for now, minimal set that's needed for landing page */
.button {
	-moz-appearance: button;
	-webkit-appearance: none;
	appearance: button;
	align-items: center;
	border-radius: var(--default-border-radius);
	border: 0.0625em solid transparent;		/* should be in "em" not "rem" to be consistent with the font size */
	box-shadow: none;
	cursor: pointer;
	display: inline-block;
	display: -webkit-inline-box;
	-webkit-box-pack: center;
	-webkit-box-align: baseline;
	filter: unset;
	font-size: 1rem;
	line-height: 1;
	outline: none;
	padding: 0.6em 1em 0.4em 1.2em;		/* should be in "em" not "rem" to be consistent with the font size */
	text-align: center;
	text-decoration: unset;
	transition: all 0.15s ease-in-out;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	white-space: nowrap;
	width: unset;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	margin: 0 auto;
}

.button-primary { color: #fff; background-color: var(--clr-ais-green-0); border-color: var(--clr-ais-green-0); }

.button-primary:hover, .button-primary:active, .button-primary:focus { color: var(--clr-ais-green-0); border: 1px solid var(--clr-ais-green-0); background-color: white; }

.button-primary-outline { color: var(--clr-ais-green-0); background-color: white; border: 1px solid var(--clr-ais-green-0); }

.button-primary-outline:hover, .button-primary-outline:active, .button-primary-outline:focus { color: #fff; background-color: var(--clr-ais-green-0); }


/* comparison section start */

/* section.comparison {} */

.ub::before, .ls::before, .rw::before, .gp::before {
	content: attr(class);
	color: var(--clr-ais-blue-0);
	text-transform: uppercase;
}

li.ub::before, li.ls::before, li.rw::before, li.gp::before {
	position: absolute;
	left: -2rem;
}

section.comparison ul {
	padding: 0;
	margin: 0;
	padding-left: 3rem;
}

section.comparison ul li {
	list-style: none;
	position: relative;
}

/* comparison table div.
 *
 * Not an actual _table_ because it doesn't fit on low resolutions,
 * no idea how to make it work for now */

div.comparison-table {
	display: grid;
	font-size: 0.875rem;
	grid-template-columns: 1fr repeat(4, 3rem);
	margin: 0.5rem;
}

div.comparison-table div {
	align-items: center;
	border: 0.5px solid #eee;
	display: flex;
	justify-content: center;
	vertical-align: middle;
}

div.comparison-table div[title] {
	position: relative;
}

div.comparison-table div[title]:focus::after {
	content: attr(title);
	position: absolute;
	padding: 3rem;
	border: 1px solid red;
}

div.comparison-table div:nth-of-type(5n) {
	justify-content: flex-start;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

div.comparison-table div:nth-of-type(1) {
	grid-column-start: 2;
}

/* candidate testimonials section
 *
 *    1. candidate-testimonials section
 *    2. ct__wrapper: candidate testimonials wrapper
 *    3. ct__cards: div with individual cards container
 *    4. ct__card: individual card
 * */

section.ct {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* wrapper container for all the cards, because we show them all on large resolutions */
div.ct__wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* individual card style */
div.ct__card {
	align-items: center;
	border: 1px solid #666;
	border-left: 3px solid var(--clr-ais-green-0);
	border-radius: var(--default-border-radius);
	box-shadow: 0 0.5rem 0.5rem -0.5rem #999;
	display: none;	/* by default, hide them */
	flex-direction: column;
	justify-content: center;
	margin: 1rem;
	padding: 1rem;
}

/* default style of paragraph within a card */
div.ct__card p {
	margin: 0;
	padding: 0;
	font-style: italic;
}

/* author */
div.ct__card p + p {
	text-transform: capitalize;
	font-variant: small-caps;
	font-size: 0.875rem;
	color: #666;
	align-self: flex-end;
	margin-top: 1rem;
}

div.ct__card p + p::before {
	content: "\2014";
	margin-right: 0.1rem;
}

/* by default, only show first card */
div.ct__card:nth-of-type(1) {
	display: flex;
}

/* input selector to show all the cards */
input#ct__moar {
	display: none;
}

label[for="ct__moar"] {
	display: block;
}

label[for="ct__moar"]::before {
	content: "see more";
	cursor: pointer;
	color: var(--clr-ais-blue-0);
	text-decoration: underline;
}

input#ct__moar:checked ~ div.ct__card { display: flex; }
input#ct__moar:checked ~ label[for="ct__moar"]::before { content: "hide"; }






/*
 * How? section with a fancy subway-like style graphic
 * */

div.howmap {
	display: flex;
	flex-direction: column;
	margin: 2rem auto;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	max-width: calc(100vw - 4rem);
}

div.howmap div {
	font-size: 1.25rem;
	padding: 0.5rem 0 0.5rem 2rem;
	position: relative;
}

div.howmap div:nth-of-type(1) { color: var(--clr-ais-blue-0); }
div.howmap div:nth-of-type(2) { color: var(--clr-ais-blue-1); }
div.howmap div:nth-of-type(3) { color: var(--clr-ais-green-1); }
div.howmap div:nth-of-type(4) { color: var(--clr-ais-green-0); }

div.howmap div::before {
	content: "\25CE";
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 0.4rem;	/* TODO: proper centering, but good enough for now */
	background: white;	/* to cover parts of the :after lines */
}

div.howmap div:first-child::before {
	content: "\25C9";
}

div.howmap div:not(:last-child)::after {
	content: "";
	position: absolute;
	border-left: 0.1rem solid currentcolor;
	height: 100%;
	top: 0.5rem;
	left: 0.7ch;	/* again, good enough (tm) for now */
	z-index: -1;
	opacity: 0.5;
}



/* Pricing page start */

div.pricing-plan {
	display: flex;
	flex-direction: column;
	border-radius: var(--default-border-radius);
	border: 1px solid var(--clr-ais-blue-3);
	margin: 2rem auto;
}

div.pricing-plan__h {
	margin: 0.5rem;
	color: var(--clr-ais-blue-0);
	font-weight: 700;
	border-bottom: 1px solid var(--clr-ais-blue-3);
	text-align: center;
}

div.pricing-plan__b {
	padding: 0.5rem;
}

div.pricing-plan__b > div {
	margin-top: 1rem;
}

div.pricing-plan__b > div::before {
	content: "\2705";
	color: var(--clr-ais-green-0);
	padding-right: 0.5rem;
}

div.pricing-plan__f {
	text-align: center;
	margin-top: 3rem;
	padding: 0.5rem;
}

/* Privacy policy page start */


/* Blog page start */
main > h1 {
	margin: 2rem auto;
}

article[data-name="blog-article"] {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--clr-ais-blue-3);
	border-radius: var(--default-border-radius);
	margin: 0.5rem;
	padding: 0.5rem;
}

article + article[data-name="blog-article"] {
	margin-top: 2rem;
}

article[data-name="blog-article"] h2 {
	order: -2;
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--clr-ais-blue-0);
}

article[data-name="blog-article"] span[data-name="blog-summary"] {
	order: -1;
	margin: 1rem auto;
}

article[data-name="blog-article"] time,
article[data-name="blog-article"] span.ttr {
	color: #666;
	font-size: 0.875rem;
}

/* Individual blog post start (muchos hacks here) */
main > time {
	padding: 0.5rem;
	text-align: left;
}

main > p {
	padding: 0.5rem;
}

main blockquote {
	box-shadow: 0 0.5rem 0.5rem -0.5rem #999;
	border-radius: var(--default-border-radius);
	border: 1px solid #666;
	border-left: 3px solid var(--clr-ais-green-0);
	padding: 1rem;
	margin: 0.5rem;
	font-style: italic;
}

main blockquote > div {
	margin-top: 1rem;
	font-style: normal;
	font-size: 0.875rem;
}

main blockquote > pre {
	font-family: monospace;
	font-size: 0.875rem;
}


/* Tablet and up styles (for now, hacks with !important as we need tests first anyways) */
@media (min-width: 38rem) {
	p,ul,ol,blockquote,section,article,hr,div[data-name="tldr"],details,img { margin-left: auto !important; margin-right: auto !important; max-width: var(--max-reading-width) !important; }
	section.hero { max-width: unset !important; }
	h1,h2,h3,h4,h5,h6 { width: 100%; }
	main section h2, main section h3 { color: var(--clr-ais-blue-0); background: unset; border-top: 1px solid var(--clr-ais-blue-0); border-left: 1rem solid var(--clr-ais-blue-0); }
	main section.read h4 { color: var(--clr-ais-blue-2); background: unset; border-top: 1px solid var(--clr-ais-blue-2); border-left: 1rem solid var(--clr-ais-blue-2); }
	main section.hero { background: unset !important; }
	blockquote { max-width: var(--max-blockquote-width) !important; }
	time { display: block; text-align: center !important; }
	details summary { color: #333; font-weight: normal; }
	[data-name="the-jif"] { max-width: min(100vmin, 512px) !important; }
	.ub::before, .ls::before, .rw::before, .gp::before { content: ""; }
	section.comparison ul { padding: unset; margin: unset; }
	div.comparison-table { grid-template-columns: 1fr repeat(4, auto); }
	div.comparison-table div[title]::before { content: attr(title); text-transform: capitalize; padding: 0.5rem; }
}