/*
 * The site's original Divi typography, from the et_divi customizer settings
 * that are still in wp_options:
 *   body_font          Noto Sans
 *   body_font_size     16   (already carried into the Elementor widgets)
 *   body_font_weight   300
 *   line height        1.7em, Divi's default
 *   body colour        #666, Divi's default
 *   heading colour     #333, Divi's default
 *
 * Sizes are not set here on purpose - the migration did carry those across,
 * and they already match the live site. Only what differs is restored, so the
 * blast radius stays small.
 *
 * Anything an Elementor widget sets for itself still wins: these are plain
 * element selectors, which every widget-level rule out-specifies.
 */

body,
button,
input,
optgroup,
select,
textarea,
h1, h2, h3, h4, h5, h6 {
	font-family: 'Noto Sans', Helvetica, Arial, Lucida, sans-serif;
}

body {
	font-weight: 300;
	line-height: 1.7em;
	color: #666;
}

/* Headings would otherwise inherit the #666 set just above; Divi drew them in
   #333. Widgets that set their own colour are unaffected. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	color: #333;
}

/* et_divi[heading_font_weight] is 600. Elementor's heading widgets fall back to
   500 when the migration did not carry a weight across, which is most of them:
   190 headings across the site render a step lighter than Divi drew them. Any
   widget that does set its own weight still wins. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-weight: 600;
}

/* Divi's blurb titles were an 18px span. The migration turned them into
   Elementor heading widgets set to h4, carrying the weight across but not the
   size, so they fall back to the browser's 24px h4 and wrap onto extra lines -
   36 of them across the site, and the reason /social-media-marketing/ and
   /paid-advertising/ run longer than live. Only headings the migration left
   without a size of their own are affected; a widget that sets one still wins,
   which is how the 22px case study headings stay 22px. */
.elementor-widget-heading h4.elementor-heading-title {
	font-size: 18px;
}

/* Hello Elementor's reset paints every link #c36, a pink that shows up wherever
   Elementor has not set a colour of its own - the office phone and email links
   on the contact page, for one. Divi's default was #2ea3f2, and it did not
   change the colour on hover. */
a {
	color: #2ea3f2;
}

a:hover,
a:active {
	color: #2ea3f2;
}

/* The header menu is an Elementor widget with no font of its own, so it picks
   up everything set above - including the 1.7em line height, which Divi used
   for body copy and not for its menu. That alone grows the header from 74px to
   118px, so the menu gets its own line height back. Weight 600 is what Divi
   drew the menu at. Its font size is left alone: the widget sets 15px alongside
   the rest of the header design, and that wins over anything declared here.
   Divi's menu was 14px, so if the header is ever rebuilt to match, set it in
   Elementor > Header template rather than in this file. */
.hfe-nav-menu a,
.elementor-nav-menu a {
	font-weight: 600;
	line-height: normal;
}

/* Divi's heading scale: et_divi[body_header_size] is 32, and the customizer
   derives the rest (et-divi-customizer-global.min.css): h1 32px, h2 27px,
   h3 23px, h4 19px, h5 16px, h6 15px. Hello Elementor's reset draws them at
   40/32/28/24/20/16px instead, and every heading without a size of its own
   fell back to that - section titles such as "Let's Grow Your Brand" came out
   at 32px where Divi drew 27px, which wraps them onto a second line on phones
   and tablets. Widgets that set a size still win, and the 18px rule for
   migrated blurb titles above is more specific than the h4 here. */
h1 { font-size: 32px; }
h2 { font-size: 27px; }
h3 { font-size: 23px; }
h4 { font-size: 19px; }
h5 { font-size: 16px; }
h6 { font-size: 15px; }

/* Hello Elementor's reset gives every button white-space: nowrap, which Divi
   does not. A label longer than its button then runs out of the box instead of
   wrapping - the hero form button on the social media agency page overflowed by
   17px on a phone, where live wraps it onto two lines. */
button,
[type="button"],
[type="submit"],
[type="reset"] {
	white-space: normal;
}