/* -------------------- Article and Summary Div Styles -------------------- */


/* v.156 - Article and Summary text coming from DB ----- Custom CSS for rich text areas of content coming from the Grace Admin */

.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote,
.summary-body p,
.summary-body ul,
.summary-body ol,
.summary-body blockquote {
	margin-bottom: 1rem;
	max-width: 65ch;
	flex-direction: column;
	justify-content: flex-start;
	flex-wrap: nowrap;
	align-items: flex-start;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	/* grid-column-gap: var(--_responsive---gaps--gap-sm);
	grid-row-gap: var(--_responsive---gaps--gap-sm); */
	font-weight: 400;
}

.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote {
	font-family: linotype-sabon, serif;
	font-size: 1.25rem;
	line-height: 1.4;
	/* font-family: var(--_text-style---fonts--serif);
	font-size: var(--_responsive---font-size--special--article-font-size);
	line-height: var(--_responsive---font-size--special--article-line-height); */
}
/* Tablet: 991px and below */
@media screen and (max-width: 991px) {
	.article-body p,
	.article-body ul,
	.article-body ol,
	.article-body blockquote {
		font-size: 1.2rem;
		line-height: 1.4;
	}
}

/* Mobile Landscape: 767px and below */
@media screen and (max-width: 767px) {
	.article-body p,
	.article-body ul,
	.article-body ol,
	.article-body blockquote {
		font-size: 1.05rem;
		line-height: 1.35;
	}
}

.article-body ul,
.article-body ol,
.summary-body ul,
.summary-body ol {
	line-height: 1.4em;
	margin-bottom: 1.3rem;
}

.article-body li,
.summary-body li {
	margin-bottom: .75rem;
}

.article-body hr,
.summary-body hr {
	margin: 3rem 0;
}

.article-body strong,
.summary-body strong {
	font-weight: 700;
}

.article-body a,
.summary-body a {
	/*display: inline-block;
	height: 1.2rem;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #b2aba0;
	line-height: 1.2;
	text-decoration: none;*/
  text-decoration: underline;
  text-underline-offset: 0;
  text-decoration-color: #d9d5cf;
  text-decoration-thickness: 1px;
  text-underline-position: under;
}

.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5,
.summary-body h1, .summary-body h2, .summary-body h3, .summary-body h4, .summary-body h5 {
	margin-top: 0;
	margin-bottom: 1rem;
}
.article-body h2,
.summary-body h2 {
	font-family: neue-haas-unica, sans-serif;
	font-size: 1.7rem;
	line-height: 1.3;
}

.article-body h3, .article-body h4, .article-body h5,
.summary-body h3, .summary-body h4, .summary-body h5 {
	/* this is the same as heading-six */
	font-family: neue-haas-unica, sans-serif;
	font-size: 1.2rem;
	line-height: 1.4;
}

/* Brings back the old content buttons: .btn.btn-primary.btn-xs */
.article-body .link-btn,
.summary-body .link-btn,
.article-body .btn,
.summary-body .btn {
  display: inline-block;
  width: auto;
  padding: 6px 20px 7px 20px;
  align-items: center;
  border-radius: 20px;
  background-color: #bca141;
  color: white;
  text-decoration: none;
}

.article-body .link-btn:hover,
.summary-body .link-btn:hover,
.article-body .btn:hover,
.summary-body .btn:hover {
  background-color: #1a1817;
  color: white;
}









/* -------------------- Misc. Styles -------------------- */


/* -- Custom animated link style that wasn't possible in WF natively --  */

/* Container for the link */
.link-brand {
	position: relative;
	display: inline-block;
	color: var(--color--text);
	text-decoration: none;
	padding: 5px 12px 7px;
	z-index: 1;
	overflow: hidden;
	border-left: none;
	/* Undoes initial side border */
}
/* Create the line and background with ::before */
.link-brand::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	/* Initial left border width */
	height: 100%;
	background-color: var(--color--link-effects);
	/* Background color */
	z-index: -1;
	transition: width 0.3s ease;
	/* Animation duration and easing */
}
.link-brand:hover {
	color: white;
}
/* On hover, expand the background */
.link-brand:hover::before {
	width: 100%;
	/* Expand to full width */
}



.list-dashes li {
	position: relative;
	/* Enable positioning for the pseudo-element */
	padding-left: 1em;
	/* Add space for the dash */
}

.list-dashes li::before {
	content: "–";
	/* En Dash */
	position: absolute;
	left: 0;
	/* Align the dash to the start */
	top: 2px;
	/* Align with the first line of text */
	width: 1em;
	/* Same space as padding-left */
	display: inline-block;
}


/* Removes underlines from existing content that don't need one  */
.listing-item__details a {
	text-decoration:none;
}


/* Fixes the issue where there's no corner in this scenario for Mobile(L) and under */
@media screen and (max-width: 767px) {
	.hero__split-item .img--fill {
		border-radius: 5px;
	}
}




/* -------------------- Nav Styles -------------------- */


/* IS THIS STILL IN USE? --- changes main Nav Bar buttons to active on keyboard focus */
/* .nav__main-toggle-link:focus-within .nav__main-toggle-wrapper .nav__main-toggle-underline {
	transform: scale(1) !important;
	background-color: red;
} */



  /*
  JS Delay 300ms or .3s
  1. Menu opens 0s
  2. Overlay delay .05s
  3. Overlay opens .5s
  4. Overlay closes .2s
  5. Menu delay .05s
  6. Menu closes .2s
  */
  
  /* ---- Desktop (default) styles ---- */
  .nav__main-menu {
	opacity: 1;
  }
  /* Menus CLOSED */
  .nav__mega-menu {
	opacity: 0;
	/* Transition and Delay on Close */
	transition: opacity .2s ease;
	transition-delay: .05s;
	/* Fix for old browsers overrides webflow inset */
	top: 139;
	right: 0;
  }
  /* Menus OPEN */
  .nav__mega-menu.is-open {
	opacity: 1;
	/* Transition and Delay on Open */
	transition: opacity 0s ease;
	transition-delay: 0s;
  }
  /* Overlay CLOSED */
  .nav__site-overlay {
	opacity: 0;
	visibility: hidden;
	z-index: 30;
	/* Transition and Delay on Close */
	transition: opacity .2s ease, visibility .2s ease;
	transition-delay: 0s, 0s;
  }
  
  
  /* Overlay OPEN */
  .nav__site-overlay.is-open {
	opacity: 1;
	visibility: visible;
	/* Transition and Delay on Open */
	transition: opacity .5s ease, visibility .5s ease;
	transition-delay: .05s, .05s;
  }
  /* ---- Menu Underline Animation ---- */
  .nav__main-toggle-underline {
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s ease-in-out;
	/* Fixes for older browsers overriding Webflow inset */
	bottom: 0;
  }
  .nav__main-toggle-underline.underline-active {
	transform: scaleX(1);
  }
  
  /* fixes for old browser for default desktop */
  .nav__main .nav__logo-full {
	  top: 30px;
  }
  
  
  /* ---- From Webflow for the sub menu addition - Desktop only ---- */
  @media screen and (min-width: 992px) {
	/* ---- Mini Nav Closed ---- */
	.nav__main.is-mini,
	.nav__main.is-mini .nav__top-menu {
	  height: 58px;
	}
	.nav__main.is-mini .nav__logo-full {
	  opacity: 0;
	  visibility: hidden;
	  pointer-events: none;
	  top: 21px;
	}
	.nav__main.is-mini .nav__logo-mini {
	  opacity: 100%;
	  visibility: visible;
	  pointer-events: auto;
	}


	/* ---- Mini Nav Open ---- */
	.nav__main.is-mini.is-open {
	  height: 140px;
	}
	.nav__main.is-mini.is-open .nav__top-menu {
	  height: 58px;
	}
	.nav__main.is-mini.is-open .nav__main-menu-list {
	  /* The original was 70px, this compensates for the shorter height of 58px on nav__top-menu-block */
	  height: 82px;
	}
	.nav__main.is-mini.is-open .nav__logo-full {
	  opacity: 100%;
	  visibility: visible;
	  pointer-events: auto;
	  /* this aligns it with the nav elements on right. The default is 30px which is based on a 70px height of the top-menu container. */
	  top: 21px;
	}
	.nav__main.is-mini.is-open .nav__logo-mini {
	  opacity: 0;
	  visibility: hidden;
	  pointer-events: none;
	}

	/* ---- Conditional position of Sub Menu position ---- */
	.nav__sub .nav__mega-menu {
	  top: 82px;
	}
  }
  /* Tablet-specific overrides */
  @media screen and (max-width: 991px) {
	.nav__main-menu,
	.nav__mega-menu {
	  /* Fix for old browsers and overrides webflow inset */
	  top: 0;
	  right: 0; /* Fixes something? Nope actually makes it worse */
	  height: 100vh;
	  height: 100svh;
	  overflow-x: hidden;
	  /* Start off-screen to the right */
	  transform: translateX(100%);
	  opacity: 0;
	  /* Transition and Delay on Close */
	  transition: transform .2s ease-in-out, opacity .2s ease-in;
	  /* The .2s keeps it from fading till After transition  */
	  transition-delay: 0s, .2s;
	}
	.nav__main-menu.is-open,
	.nav__mega-menu.is-open {
	  /* End position: in view */
	  transform: translateX(0);
	  opacity: 100%;
	  /* Transition and Delay on Open */
	  transition: transform .2s ease-in-out, opacity .2s ease-in;
	  transition-delay: .1s, 0s;
	}
  }
  
  /* Temporarily hides the main menu -- though the HTML should be deleted */
  .nav__main.is-mini .nav__main-menu,
  .nav__main.is-mini .nav__top-toggle.is-main,
  .nav__main.is-mini.is-open .nav__main-menu,
  .nav__main.is-mini.is-open .nav__top-toggle.is-main {
	display: none;
  }
  
  /* Testing the bounce in the icon just on mobile */
  /* svg {
	box-sizing: border-box;
  } */
  
  /* .nav__top-menu {
	padding: 0;
	margin: 0;
  }
  .nav__top-menu-list {
	position: relative;
  }
  .nav__top-toggle.is-account {
	position: absolute;
	top: 0;
	right: 0;
  } */
  
  
  /* Moves the top toggle buttons under menus. Here's the original z-index in CSS:
		Element z-index		Desktop		Mobile
		nav__top-toggle		31			31 (change this to 80)
		nav__mega-menu		30			60
		nav__main-menu		-			50 
		nav__ministry-logo	-			61
		nav__logo-			81			81 (this puts it on very top)
		nav__menu-close		-			81
		nav__back-btn		-			81
  */
  
  /* .nav__top-toggle {
	  z-index: 80;
  }
  .nav__menu-close {
	  display: none;
  } */