/* Our own tweaks to the Divi styles exported from WordPress. Loaded after each page's Divi CSS. */

:root {
	--dogl-purple: #575083; /* the logo, big headings, links and buttons */
	--dogl-ink: #35314f;    /* small headings, e.g. the titles on cards */
	--dogl-text: #56536b;   /* body text: AA contrast on all our section backgrounds, which #666 isn't */
}

/* Type. Divi's defaults gave every heading module its own line height (1em to 1.3em), weight
   and grey, and body text a loose 1.7em in #666. These settle them on one set of values. */
body {
	color: var(--dogl-text);
	line-height: 1.6;
}
p {
	text-wrap: pretty;
}
h1, h2, h3, h4 {
	text-wrap: balance;
}

/* Big headings: set tight like the logo, so a heading that wraps still reads as one line. */
body .et_pb_heading .et_pb_heading_container :is(h1, h2),
body .et_pb_text h1 {
	line-height: 1.12;
	letter-spacing: -0.015em;
}
body .et_pb_text h2 {
	line-height: 1.25;
}

/* Small headings (card and feature titles) were weight 500 in #333, barely heavier than the
   text under them. */
body #page-container .et_pb_blurb .et_pb_module_header {
	color: var(--dogl-ink);
	font-weight: 700;
	line-height: 1.3;
}

/* The hero text on the landing pages was in Nunito Sans, a near-twin of the Nunito used
   everywhere else, with 1.8em between lines. */
:is(.page-id-301, .page-id-406, .page-id-817, .page-id-1496, .page-id-2063, .page-id-2151, .page-id-2178) .et_pb_section_0 .et_pb_text_0,
.page-id-1877 .et_pb_section_0 .et_pb_text_1 {
	font-family: 'Nunito', Helvetica, Arial, Lucida, sans-serif;
	line-height: 1.5;
}

body #page-container .et_pb_button {
	font-weight: 700;
}

.et_pb_menu .et-menu-nav li a {
	color: var(--dogl-text);
}
/* Match the dropdown's top border to the site's purple on desktop and mobile. */
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul,
.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu {
	border-color: var(--dogl-purple);
}
/* Divi faded menu links to 70% opacity on hover, which made the dropdown links (on their light
   grey hover background) hard to read. Turn them purple instead. */
.et_pb_menu :is(.et-menu-nav, .et_mobile_menu) li > a:hover {
	opacity: 1;
}
.et_pb_menu :is(.et-menu-nav, .et_mobile_menu) li:not(.et_pb_button) > a:hover {
	color: var(--dogl-purple);
}
body .et_pb_menu .mobile_nav .mobile_menu_bar::before {
	color: var(--dogl-purple);
}

/* Maths articles: 16px text ran to over 100 characters a line in the article column. */
.single-post .et-l--post .et_pb_text {
	font-size: 17px;
	line-height: 1.65;
}
/* ...and on phones and tablets it ran to the edges of the screen, while the title above it has
   the usual margins. (The !important beats Divi's selector, which has two ids in it.) */
@media only screen and (max-width: 980px) {
	.single-post .et_pb_row_1_tb_body.et_pb_row {
		width: 80% !important;
	}
}
/* ...and the article started 80px lower than the "Calculus Posts" sidebar beside it. */
.single-post .et-l--post .et_pb_section_0,
.single-post .et-l--post .et_pb_section_0 > .et_pb_row:first-child {
	padding-top: 0;
}

/* Plain pages (privacy, terms, accessibility, support): the headings were Divi's default #333 at
   weight 500, and the legal text ran to 150 characters a line. */
#left-area .page :is(h1, h2, h3),
#sidebar h2 {
	color: var(--dogl-purple);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
#left-area .page > h1 {
	font-size: 40px;
	font-weight: 800;
}
.dogl-list-formatting {
	max-width: 40rem;
}

/* Rows of feature cards had ragged edges, each card as tall as its text. (Not the review cards:
   their stars are a background placed at a percentage of the card's height.) */
@media only screen and (min-width: 981px) {
	.et_pb_row:has(> .et_pb_column > .et_pb_blurb:only-child) {
		display: flex;
		align-items: stretch;
	}
}

/* App store badges: they sat centred in two wide columns, so the first was indented from the
   text above it and the gap between them was wide. Line them up on the text's left edge. */
#download.et_pb_row_inner {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
#download.et_pb_row_inner > .et_pb_column {
	width: auto;
	margin: 0;
}
#download .et_pb_button_module_wrapper {
	text-align: left;
}
#download .et_pb_button {
	box-shadow: none;
}

/* SAT, GRE, MathMeter and Teachers: the hero's button was centred under left-aligned text. */
:is(.page-id-406, .page-id-1877, .page-id-2063, .page-id-2151) .et_pb_section_0 .et_pb_button_0_wrapper {
	text-align: left;
}

/* Divi sets the big page headings (e.g. "Dogl Calculus: learn by doing!") to 60px at every
   width, which fills most of a phone screen. */
@media only screen and (max-width: 980px) {
	.et_pb_heading_0 .et_pb_heading_container h1 {
		font-size: 48px;
	}
}
@media only screen and (max-width: 767px) {
	.et_pb_heading_0 .et_pb_heading_container h1 {
		font-size: 36px;
	}
	/* Same for the section headings (42-50px). */
	body:not(.single-post) .et_pb_heading .et_pb_heading_container h2 {
		font-size: 30px;
	}
	/* Home: the "Dogl Precalculus Available Now!" banner is right-aligned next to its button on
	   wider screens; on a phone the button goes underneath. */
	.page-id-301 .et_pb_heading_1 .et_pb_heading_container h2 {
		text-align: center;
	}
}

/* Precalculus: the "Get the app!" button sat centred in a narrow column (it used to have a
   "Teacher Access" button beside it), indented from the text and far below the line above it. */
.page-id-817 .et_pb_row_inner_3 {
	padding-top: 0;
}
.page-id-817 .et_pb_button_3_wrapper {
	text-align: left;
}

/* Precalculus: the wave at the bottom of the "Teacher's Eye" section was transparent, to match
   the teacher sign-up section that used to follow it. Draw it in white, like on the other pages. */
.page-id-817 .et_pb_section_4.section_has_divider.et_pb_bottom_divider .et_pb_bottom_inside_divider {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI2MHB4IiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTEyODAgMy40QzEwNTAuNTkgMTggMTAxOS40IDg0Ljg5IDczNC40MiA4NC44OWMtMzIwIDAtMzIwLTg0LjMtNjQwLTg0LjNDNTkuNC41OSAyOC4yIDEuNiAwIDMuNFYxNDBoMTI4MHoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNMCAyNC4zMWM0My40Ni01LjY5IDk0LjU2LTkuMjUgMTU4LjQyLTkuMjUgMzIwIDAgMzIwIDg5LjI0IDY0MCA4OS4yNCAyNTYuMTMgMCAzMDcuMjgtNTcuMTYgNDgxLjU4LTgwVjE0MEgweiIgZmlsbC1vcGFjaXR5PSIuNSIvPjxwYXRoIGQ9Ik0xMjgwIDUxLjc2Yy0yMDEgMTIuNDktMjQyLjQzIDUzLjQtNTEzLjU4IDUzLjQtMzIwIDAtMzIwLTU3LTY0MC01Ny00OC44NS4wMS05MC4yMSAxLjM1LTEyNi40MiAzLjZWMTQwaDEyODB6Ii8+PC9nPjwvc3ZnPg==);
}

/* Home and Precalculus: less space between the hero text and the app store badges. */
#download {
	padding-top: 10px;
}

/* MathMeter: the purple band with jagged edges used to hold a "Teaching Calculus? Try Dogl
   Classroom!" banner. It's kept as a visual break, so it needs some height of its own. */
.page-id-1877 .et_pb_section_2.et_pb_section {
	padding-top: 40px;
	padding-bottom: 30px;
}

/* The "Get the app!" menu button gets white text in the desktop menu only; in the mobile
   dropdown it fell back to Divi's grey menu link colour, which is hard to read on purple. */
.et_pb_menu .et_mobile_menu .et_pb_button a {
	color: #fff;
}