/*
 * Theme Name: Momentum Theme
 * Theme URI: ../wp-content/themes/Divi-child/
 * Description: Child Theme for Divi theme used on Momentum's website
 * Author: Momentum
 * Author URI: https://peoplesmomentum.com
 * Template: Divi
 * Version: 1.1.0
 */

/* Variables (lifted from our design system, renamed for clarity) */
:root {
  /* "red" */
  --momentum-red: #e20613;
  /* "grey-900" */
  --primary-text-grey: #212529;
  /* "grey-600" */
  --secondary-text-grey: #6c757d;
}

/* Miscellaneous fixes */

/* Fix sizing on images in text modules? Not sure we have any of these at this point, but just in case... */
.et_pb_text p > img {
  width: 100%;
  margin: 0px;
}

/* Change styling on links in headers? Again, not sure we actually have these anymore, */
h2 a {
  color: var(--momentum-red);
  text-decoration: none;
  font-weight: 200;
}

h2 a:hover {
  color: #cccccc;
  text-decoration: none;
  font-weight: 200;
}

/* Hide post metadata */
/* TODO: We should really find a way to remove it from the page source entirely so our names aren't in there, */
.et_post_meta_wrapper { display: none; }

/* Colour block buttons. Initially for Keep Up Momentum, but generic enough for use elsewhere. */
.colour-block-button {
  width: 100%;
  color: var(--momentum-red);
  border-color: var(--momentum-red);
}

.colour-block-button:after { display: none; }

.colour-block-button:hover, .colour-block-button:focus {
  color: white !important;
  background-color: var(--momentum-red) !important;
  padding: .3em 1em !important;
}
.colour-block-button:hover:after, .colour-block-button:focus:after { display: none; }

/* Fix for red links on red toggle box backgrounds */
.et_pb_toggle_10.et_pb_toggle.et_pb_toggle_open a {
  color: white;
  text-decoration: underline;
}

/* Main menu fixes */
#top-menu .menu-item-has-children > a:first-child::after { top: unset; }

.et_mobile_menu .menu-item-has-children > a { background-color: unset; }

.et_mobile_menu .menu-item-has-children:not(.desktop-overflow-menu) > .sub-menu { padding-left: 10px !important; }

/* Don't highlight the current page in the top menu */
#top-menu li.current-menu-item > a:not(:hover) { text-decoration-line: none; }

/* Fix weird spacing at bottom of articles */
.single .post {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Stop bootstrap adding extra padding and background colours to nav links... */
ul.nav li a { padding-top: 0; }

ul.nav li:last-child a { padding-right: 0; }

ul.nav li a:hover, ul.nav li a:focus { background: none; }

/* Make the header sticky */
/* NOTE: Don't enable the "fixed header" in Divi if you're using this or it'll start acting weird! */
#main-header { position: sticky; }

/* Get rid of horizontal padding so the header lines up better with page content */
#main-header .et_menu_container { padding: 0; }

/* Generic category styles */

/* Force full-width layout */
body.category #main-content .container {
  max-width: 750px;
  padding: 54px 0;
}

body.category #main-content .container:before { display: none; }

/* Fix content width */
body.category #content-area {
  width: 100%;
  max-width: 720px;
  margin: auto;
}

body.category #left-area {
  width: 100%;
  padding: 0;
}

/* Make entries look nice...? */
body.category .entry-title a {
  text-decoration: underline;
  color: var(--primary-text-grey);
}

body.category #left-area .post-meta, body.category .post-content {
  padding-bottom: 0;
  font-size: 18px;
  color: var(--secondary-text-grey);
}

body.category .post-content-inner { color: var(--primary-text-grey); }

body.category .post-content a.more-link { color: var(--momentum-red); }

body.category .post-content a.more-link:hover { text-decoration: underline; }

body.category .et_pb_post {
  border-bottom: 6px solid var(--momentum-red);
  margin-bottom: 54px;
}

/* Pagination controls */
body.category .pagination {
  display: block;
  margin: 0;
}

body.category .pagination a {
  font-weight: 700;
  color: var(--momentum-red);
}

/* Newsletter category styles */

/* Mimic the old Divi version of the newsletter page headers */
body.category .header-row {
  display: flex;
  width: 80%;
  max-width: 1080px;
  margin: auto;
  position: relative;
  justify-content: space-between;
  align-items: center;
  padding: 21px 0;
}

body.category .header-col {
  width: 47.25%;
}

body.category .header-col h1, body.category .header-col h2 {
  text-align: center;
  color: white;
}

body.category .header-col img {
  display: block;
  margin-bottom: 5.82%;
}

@media (max-width: 980px) {
  body.category .header-row {
    flex-direction: column;
  }

  body.category .header-col {
    width: 100%;
  }

  body.category .header-col, body.category .header-col img {
    margin-bottom: 30px;
  }

  body.category .header-col:last-child {
    margin-bottom: 0;
  }
}

/* History category styles*/

/* Mimic how the 5+ nested divs Divi uses for a header end up looking */
.history-header {
  padding: 60px 0;
  background: url('https://peoplesmomentum.com/wp-content/uploads/2019/12/BW_photos_webheader.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
}

.history-header > h1 { 
  font-family: 'Neue Haas Grotesk Display Pro 96', Helvetica, Arial, Lucida, sans-serif;
  font-size: min(80px, 10vw);
  font-weight: 800;
  text-align: center;
  color: white;
  text-transform: uppercase;
}

.history-row {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1000px;
  margin: auto;
}

.history-row:first-of-type {
  margin-top: 54px;
}

.history-row:last-child {
  margin-bottom: 54px;
}

.history-row img {
  height: 100%;
  object-fit: contain;
  width: 100%;
  max-height: 350px;
}

.history-row > .history-blurb {
  padding: 40px;
  display: grid;
  justify-content: center;
  align-content: center;
  grid-row: 2;
}

.history-row > .empty-thumb {
  display: none;
}

.history-blurb ol {
  list-style-type: decimal;
  padding-left: 2em;
}

.history-blurb .post-meta {
  padding-bottom: 1em !important;
}

@media screen and (min-width:980px) {
  .history-row {
    grid-template-columns: 1fr 1fr;
  }

  .history-row img {
    max-height: 550px;
  }

  .history-row >.empty-thumb {
    display: block;
  }

  .history-row >.history-blurb {
    grid-row: unset;
  }
}

@media (max-width: 767px) {
  /* NOTE: This isn't an exact match for Divi styling, but close enough for now */
  .history-header h1 {
    margin: 20px 0;
  }
}

/* Styling for other headers because Divi doesn't support min() (yet) */
.responsive-header h1 { font-size: min(80px, 10vw); }

/* Signup form styles */
#signup_form {
  background: white;
  padding: 10px;
  border-radius: 5px;
  margin: 0;
}

#signup_form input:not([type=checkbox]), #signup_form select, #signup_form label, #signup_form button {
  display: block;
  width: 100%;
}

#signup_form label, #signup_form input[type=submit], #signup_form input[type=button], #signup_form button {
  font-family: "Neue Haas Grotesk Display 65", sans-serif;
  font-weight: normal;
}

#signup_form input, #signup_form select, #signup_form button {
  border: 2px solid rgba(129, 119, 123, 0.8);
  border-radius: 4px;
  margin: 0;
}

#signup_form > label:first-child, #signup_form iframe + label, #signup_form .nameRow {
  margin-top: -.3em;
}

#signup_form input:not([type=checkbox]):not([type=submit]) {
  padding-left: .3em;
}

#signup_form input[type=checkbox] {
  width: 24px;
  margin-right: .4em;
}

#signup_form select {
  height: 2.15em;
}

#signup_form input[type=submit], #signup_form button {
  background-color: white;
  color: var(--momentum-red);
  transition: all .3s;
  border: 1px solid #e20613;
  border-radius: 6px;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 1em 0;
}

#signup_form input[type=submit]:last-child {
  margin: .6em 0 0 0;
}

#signup_form button:last-child {
  margin-bottom: 0;
}

#signup_form input[type=submit]:disabled {
  opacity: 0.5;
}

#signup_form input[type=submit]:hover, #signup_form button:hover {
  background-color: var(--momentum-red);
  color: white;
}

#signup_form .thanks {
  padding: 0;
  margin-top: -.1em;
  margin-bottom: .3em;
  line-height: 1.4em;
}

#signup_form .disclaimer {
  margin-top: .6em;
  font-size: 14px;
  line-height: 1.4em;
}

#signup_form .nameRow {
  display: flex;
  column-gap: 10px;
  flex-wrap: wrap;
}

#signup_form .nameRow label {
  flex-grow: 1;
  min-width: 200px;
  width: 0;
}

#signup_form label.required:after {
  content: " *";
  color: var(--momentum-red);
}

#signup_form #post_form_message {
  text-align: center;
}

#signup_form #post_form_message h4 {
  padding: 10px 0;
}

#signup_form > div:not(#post_form_message) > label:first-child {
  margin-top: -.3em;
}

/*---- Custom CSS is below ----*/

/*-----Global Styles------*/

/*@media screen and (max-width:980px) {
.et_pb_section {
padding: 10px;
}
}*/

#main-footer {display: none;}

.indent {margin-left: 40px;}

a { color: var(--momentum-red); }

/* Add space on the left to compensate for the huge arrow icons, */
body ul li {
  font-weight: 300;
  margin-left: 20px;
}

/* Use a thicker font for nav lists (and undo the margin above...) */
nav ul li, footer ul li {
  font-weight: 700;
  margin-left: 0;
}

/* Arrow bullets for lists */
/* These were marked as "organiser styles", but have been used across the whole site for years */
body ul {
  list-style-type: disc !important;
  list-style-image: url('https://peoplesmomentum.com/wp-content/uploads/2020/09/Arrow-2.png');
}

/* Fix for red bullets on red backgrounds */
body .white-bullets ul {
  list-style-image: url('https://peoplesmomentum.com/wp-content/uploads/2022/04/Arrow-2-White.png');
}

/*Gives ease between input boxes on mailing list form and allows better stacking in mobile view*/
input.text, input.title, input[type=text], select, textarea {
  margin: 6px;
}

/*Ensures post header and footer have no padding left and right*/

.single.et_pb_pagebuilder_layout.et_full_width_page #main-content .container {
  width: 100%;
  max-width: 100%;
  padding: 0;
}
.page-id-8168  #main-header { display: none; }

/*----Top Nav Bar ----*/

/* Fix the logo container having a single whitespace character before the logo for some reason :/ */
.logo_container { font-size: 0; }

/* Fix the logo container being so wide it makes the page scroll horizontally, */
.et_header_style_left .logo_container { width: unset; }

/* Fix the previous fix breaking logo scaling on tablet/mobile... */
@media (max-width: 980px) { .et_header_style_left #logo { max-width: 50vw; } }

/* Underline nav links on hover */
#top-menu a:hover, #top-menu a:active { text-decoration: underline; }

/* Stop Divi also adding too much space to nav links... */
#top-menu li { padding: 0px; }

/* Prevent opacity changes on hover in the top menu */
#top-menu-nav > ul > li > a:hover { opacity: 1; }

/*--------Other Menues-------*/
/* TODO: Are we even using these anywhere? */

.fullwidth-menu li {
  display: inline-block;
  padding-right: 0px;
font-size: 14px;}

.et_pb_fullwidth_menu .fullwidth-menu-nav, .et_pb_fullwidth_menu .fullwidth-menu-nav>ul {
  float: none;
  text-align: center;
}

/*-------------- Hamburger menu settings --------------------*/

/* Make hamburger icon white */
span.mobile_menu_bar::before { color: white !important; }

/* Make mobile menu look less janky */
.et_mobile_menu {
  border-top: 0;
  padding: 0 10% 15px;
  box-shadow: unset;
}

.et_mobile_menu li {
  margin-left: 0;
  list-style-type: none;
  list-style-image: none;
}

.et_mobile_menu li a {
  font-size: 16px;
  font-weight: 700;
  border-bottom: 0;
  padding: 10px 0;
}

/* Underline nav links on click */
.et_mobile_menu li a:active { text-decoration: underline; }

/* Change which parent element has position: relative so the menu is sized and positioned correctly */
.et_menu_container { position: unset; }

#main_header { position: relative; }

/*-------- Footer -------*/

.bottom-nav {
  padding: 15px 0;
  text-align: center;
}

#footlink a:link {color: #ffffff; text-decoration: none;}
#footlink a:visited {color: #ffffff; text-decoration: none;}
#footlink a:hover {color: #ffffff; text-decoration: underline;}

/* ---- Typography -----*/

.w {color: #ffffff; }


.rw { color: #ffffff; 
  padding:50px 180px 90px 90px;

}

.tac {text-align:center; padding: 0 15%;}

p a:link, p a:visited, li a:link, li a:visited {
  color: var(--momentum-red);
  text-decoration: none;
}

p a:hover, li a:hover {
  color: #292929;
  text-decoration: underline;
}

/*----Mobile views-----*/

/*---Slider Text----*/
@media screen and (min-width: 768px) {
  .et_pb_slide_description
  .et_pb_slide_title{ font-size: 85%;
  }
}

@media screen and (min-width: 458px) {
  .et_pb_slide_description
  .et_pb_slide_title{ font-size: 60%;
  }
}

/*----- overlay text on FP Video --------*/
h1.et_pb_slide_title a:hover, a:focus {color: #ffffff;
}

/*----End Mobile View----*/

/*------ Button Styles ------*/

.button1 {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 0;
  background-color: var(--momentum-red);
  color: #ffffff;
  width: 190px;
  height: 46px;
  text-align: center;
  padding-top: 12px;
  border-radius: 4px
}

.button1 a:link   {color: #ffffff;
}
.button1 a:visited   {color: #ffffff; text-decoration: none;
}
.button1 a:hover   {color: #ffffff; text-decoration: underline;
}
.button1:hover   {color: #ffffff; text-decoration: underline;
}

.button2 {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 0;
  background-color: var(--momentum-red);
  color: #ffffff;
  width: 318px;
  height: 46px;
  text-align: center;
  padding-top: 12px;
  border-radius: 4px
}

.button2 a:link   {color: #ffffff;
}
.button2 a:visited   {color: #ffffff; text-decoration: none;
}
.button2 a:hover   {color: #ffffff; text-decoration: underline;
}

.button2:hover {color: #ffffff; text-decoration: underline;}

.button3 {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 0;
  background-color: var(--momentum-red);
  color: #ffffff;
  width: 120px;
  height: 36px;
  text-align: center;
  padding-top: 2px !important;
  border-radius: 4px
}

.button3 a:link   {color: #ffffff;
}
.button3 a:visited   {color: #ffffff; text-decoration: none;
}
.button3 a:hover   {color: #ffffff; text-decoration: underline;
}
.button3:hover {color: #ffffff; text-decoration: underline;}

.buttonw {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 0;
  background-color: #ffffff;
  color: #000000;
  width: 250px;
  height: 46px;
  text-align: center;
  padding-top: 11px;
  border-radius: 4px;
}

a.buttonw:link   {color: #000000; text-decoration: none;
}
a.buttonw:visited   {color: #000000; text-decoration: none;
}
a.buttonw:hover   {color: #000000 !important; text-decoration: underline;
}

.upcoming-events-campaigns-button {
  position: absolute;
  top: 50px;
  left: 20px;
  padding-top: 2px !important;
}

.upcoming-events-campaigns-img {
  height: 280px;
  margin-bottom: 0px;
}

.upcoming-events-campaigns-text {
  background: white;
  padding: 25px;
  min-height: 180px;
}

.resources-reveal-button:hover {
  text-decoration: underline !important;
}

a:focus {
  text-decoration: none;
}

.resources-row-module {
  border-top: 1px solid #d1d1d1;
}

#view-leaflets-section {
  border-bottom: 1px solid #d1d1d1;
}

.view-resources-section {
  padding: 0px !important;
}

.campaign-row {
  background-color: #f7f7f7;
  padding: 0px !important;
}

.campaign-text {
  margin: 10px 10px 0px 0px;
}

.event-row {
  background-color: #f7f7f7;
  padding: 0px !important;
}

.event-text {
  margin: 10px 10px 0px 0px;
}

#sign-up-form > input[name="fname"] {
  width: 312px;
  height: 46px;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  padding-left: 10px;
  color: #777777;
}

#sign-up-form > input[name="email"] {
  width: 312px;
  height: 46px;
  border-radius: 4px 0 0 4px;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  padding-left: 10px;
  color: #777777;
}

#sign-up-form > input[name="submit"] {
  height: 46px;
  border-radius: 0 4px 4px 0;
  border: 0px;
  position: relative;
  top: 2px;
  left: -11px;
}


/*--------Next Section---------*/


/*--- Styles for sub-menus ---*/

nav.subm { padding: .65em; }

nav.subm > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 0;
  line-height: 1;
}

nav.subm ul li { display: inline; }

nav.subm select { display: none; }

nav.subm a { color: var(--momentum-red); }

nav.subm .active { color: var(--primary-text-grey); }

/* TODO: Ohhhh so THAT'S what the selects were for.... bring em back?
 * (Honestly I'm more inclined towards doing a summary/details popout,) */
/* @media (max-width: 960px) {
nav.subm ul { display: none; }
nav.subm select { display: inline-block; }
} */

option.active { color: var(--momentum-red); }


/*--- Style for sub-menu select on mobile ---*/

.momentum-submenu-select {
  text-align-last: center;
  color: var(--momentum-red);
}

.momentum-submenu-select .active {
  text-align: center;
  color: var(--momentum-red);
}

/* Styles for breadcrumbs */
#breadcrumbs {
  width: 1080px;
  max-width: 80%;
  font-weight: 700;
  margin: auto;
  display: flex;
  align-items: center;
  padding: .6em 0;
  line-height: 1;
  color: var(--primary-text-grey);
}

#breadcrumbs a { color: var(--momentum-red); }

#breadcrumbs a:hover { text-decoration: underline; }

#breadcrumbs span span { padding: 0 .2em; }

#breadcrumbs span span:first-child { padding-left: 0; }

#breadcrumbs span span:last-child { padding-right: 0; }

/* Hide all breadcrumbs but the direct parent on mobile */
@media screen and (max-width: 767px) {
  #breadcrumbs > span {
    visibility: hidden;
    font-size: 0;
  }

  #breadcrumbs > span > span:nth-last-child(2) {
    visibility: visible;
    font-size: 18px;
    padding: 0;
  }

  #breadcrumbs > span > span:nth-last-child(2):before {
    content: '➜';
    display: inline-block;
    transform: rotate(180deg);
  }

  #breadcrumbs > span > span:nth-last-child(2) a:before {
    content: ' Back to ';
    padding-left: .2em;
  }
}

/* Classes for making images maintain the dimensions they're given */
.object-fit-cover span, .object-fit-contain span {
	width: inherit !important;
}

.object-fit-cover span img {
	object-fit: cover !important;
	width: inherit !important;
	border: 5px solid white;
}

.object-fit-contain span img {
	object-fit: contain !important;
	width: inherit !important;
	border: 5px solid white;
}

/* Constitution styling */
/* Divi's on-module custom CSS is extremely restrictive in terms of what selectors it allows, so we have to
 * do this styling in here... */

/* Fix marker positioning */
.constitution ol, .constitution ul {
  list-style-position: outside;
  padding-left: revert;
}

/* Make indents on nested lists consistent */
.constitution li ol, .constitution li ul { padding-left: 35px; }

/* Disable the arrows on this page for now because they make things look messy */
.constitution ul { list-style-image: unset; }

.constitution ul li { margin-left: 0; }

/* Make outermost list markers blend in with headers */
.constitution *:not(li) > ol > li::marker {
  font-weight: bold;
  font-size: 29px;
  font-family: "Neue Haas Grotesk Display 65", Helvetica, Arial, Lucida, sans-serif;
  line-height: 1em;
}

.constitution ol li h3 {
  display: inline-block;
  vertical-align: top;
}

/* Make sure only the outermost list has space under each item */
.constitution *:not(li) > ol > li { padding-bottom: 1em; }

.constitution li ol, .constitution li ul { padding-bottom: 0; }

/* But not at the bottom, */
.constitution *:not(li) > ol { padding-bottom: 0; }

.constitution *:not(li) > ol > li:last-child { padding-bottom: 0; }

/* Even out spacing around subheaders in Rule 7 */
.constitution h4 { padding-top: 10px; }

/* Use X.Y numbering for items in nested lists */
.constitution li > ol:not([type=i]) > li::marker { content: counters(list-item, '.') '. '; }

/* Make lists with roman numerals appear correctly */
@counter-style bracketed-lower-roman {
  system: extends lower-roman;
  prefix: '(';
  suffix: ') ';
}

.constitution ol[type=i] { list-style-type: bracketed-lower-roman; }

/* Our History page */

.our-history-section {
  padding: 0px !important;
}

.our-history-section > .et_pb_row {
  width: 100%;
  max-width: none;
  margin: none;
}

/*.our-history-row .et_pb_text_inner {
padding: 0px 80px;
}

.our-history-row .et_pb_image {
height: 450px;
}*/

.our-history-row-mobile {
  padding: 0px 0px 30px 0px;
}

.our-history-row-mobile .et_pb_text_inner {
  padding: 20px 20px;
}

.our-history-row-mobile .et_pb_image {
  height: 250px;
}

@media screen and (min-width:320px) {
  .our-history-row {
    padding: 0px 0px 30px 0px !important;
  }

  .our-history-row .et_pb_text_inner {
    padding: 20px 20px;
  }

  .our-history-row .et_pb_image {
    height: 250px;
  }
}

@media screen and (min-width:640px) {
  .our-history-row {
    padding: 0px 0px 30px 0px !important;
  }

  .our-history-row .et_pb_text_inner {
    padding: 20px 20px;
  }

  .our-history-row .et_pb_image {
    height: 350px;
  }
}

@media screen and (min-width:800px) {
  .our-history-row {
    padding: 0px !important;
  }

  .our-history-row > .et_pb_column {
    margin: 0px;
    width: 50%;
    position: relative;
    top: 225px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
  }

  .our-history-row .et_pb_text_inner {
    padding: 0px 80px;
  }

  .our-history-row .et_pb_image {
    height: 450px;
  }
}

/* 404 page styles */
/* Fix the container size and spacing */
.error404 #main-content .container {
  padding: 0 !important;
  margin: 54px auto;
  width: 100%;
}

/* Hide the weird line on the right */
.error404 #main-content .container::before {
  display: none;
}

/* Mimic content width styling of other pages */
.error404 #content-area #left-area {
  width: 100%;
  padding: 0;
}

.error404 #content-area #left-area article {
  width: 80%;
  max-width: 750px;
  margin: 0 auto;
}

.error404 #content-area #left-area article .entry {
  width: 100%;
  max-width: 720px;
  margin: auto;
}

/*---- End-----*/