/*
 * Existing css moved from header.php
 */
:root {
  --persimmon: #283883;
  --logo-item-width: 150px;
  --logo-scroller-offset: 80px;
  --logo-scroller-width: 3380px; /* default fallback */
  --logo-scroller-start: 3380px;
  --logo-scroller-end: -150px;
  --logo-scroller-duration: 50s;
}

@-webkit-keyframes infiniteLogoScroll {
  0% {
    transform: translateX(var(--logo-scroller-start));
  }
  100% {
    transform: translateX(var(--logo-scroller-end));
  }
}

@keyframes infiniteLogoScroll {
  0% {
    transform: translateX(var(--logo-scroller-start));
  }
  100% {
    transform: translateX(var(--logo-scroller-end));
  }
}

.logo-scroller {
  position: relative;
  overflow: hidden;
  width: var(--logo-scroller-width);
  margin: 0 auto;
}

.logo-scroller__row {
  display: flex;
  margin: 24px 0;
  height: 100px;
}

.logo-scroller__item {
  box-sizing: border-box;
  position: absolute;
  padding: 0 5px;
  animation-name: infiniteLogoScroll;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-duration: var(--logo-scroller-duration);
}

.is-paused .logo-scroller__item {
  animation-play-state: paused;
}

.logo-scroller__logo {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--logo-item-width);
  height: 100px;
  padding: 15px;
}

h3.accordion__heading.mid-level.research .accordion__trigger:before {
  background-image: url(../../dist/img/svg/icons/ic-aboutgluten.svg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 71.622 83.963'%3E%3Cpath fill='%23283883' d='M39.462 7.156c0 5.443-.423 10.527.12 15.506.535 4.912 3.4 9.033 7.133 12.18 3.646 3.076 9.245 2.05 12.214-1.847 3.505-4.6 6.052-9.5 5.433-15.627-.332-3.283-.06-6.628-.06-10.212-2.278 0-4.278-.05-6.275.015-1.865.06-2.76-.729-2.666-2.62a7.7 7.7 0 0 1 .087-2.532c.346-.775 1.183-1.832 1.86-1.872a82 82 0 0 1 9.54-.016 4.816 4.816 0 0 1 4.537 4.583c.16 7.59.782 15.23-.983 22.727a27.78 27.78 0 0 1-11.377 16.766c-2.801 1.967-3.6 4.455-3.69 7.52-.14 4.727.106 9.504-.497 14.17a21.01 21.01 0 0 1-19.46 17.939c-5.31.337-10.576.17-15.362-2.631-7.417-4.342-11-10.893-11.102-19.414-.04-3.26-.097-6.525.027-9.781a3 3 0 0 0-2.019-3.326A12.24 12.24 0 0 1 .69 33.554a12.48 12.48 0 0 1 24.298 4.47 11.98 11.98 0 0 1-7.222 10.836 2.385 2.385 0 0 0-1.681 2.561c.097 3.802-.023 7.61.06 11.412a13.87 13.87 0 0 0 12.22 13.66 31.7 31.7 0 0 0 8.333-.12A13.57 13.57 0 0 0 47.85 64.492a85 85 0 0 0 .08-12.785 11.7 11.7 0 0 0-2.24-5.234c-1.89-2.836-4.135-5.432-6.137-8.197a36.73 36.73 0 0 1-7.448-23.726c.127-2.867-.024-5.746.033-8.617.076-3.78 2.21-5.845 6.002-5.88 2.484-.023 4.97.05 7.453-.022 1.864-.053 2.773.713 2.694 2.602-.026.62-.034 1.244.001 1.863.105 1.853-.7 2.736-2.607 2.675-2-.064-4.004-.014-6.218-.014zM12.437 30.857a6.712 6.712 0 1 0 6.732 6.593 6.737 6.737 0 0 0-6.732-6.593'/%3E%3C/svg%3E");
}

h3.accordion__heading.mid-level.about-gluten .accordion__trigger::before {
  background-image: url(../../dist/img/svg/icons/icon-microscope2.svg);
}

h3.accordion__heading.mid-level.life-without-gluten .accordion__trigger::before {
  background-image: url(../../dist/img/svg/icons/icon-testtube.svg);
}

h3.accordion__heading.mid-level.about-us .accordion__trigger::before {
  background-image: url(../../dist/img/svg/icons/ic-aboutus.svg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 145.33 202.54'%3E%3Cpath fill='%23283883' d='M78.86 64.13v138.4s66.47-22.15 66.47-58.3V0S78.86 15.74 78.86 64.13m58.59 80.11c0 20.78-30.66 38.3-50.71 46.84v-42.51c11.95-4.86 34.57-15.5 47.95-30.66.97-1.1 1.92-2.23 2.76-3.39v29.71Zm0-50.97c0 23.43-39 41.84-50.71 46.85v-25.04c0-33.1 37.67-48.71 50.71-53.41zm0-82.58V53.3c-10.88 3.65-30.63 11.85-44.19 26.54-2.39 2.6-4.6 5.39-6.52 8.41V64.13c0-35.38 43.55-50.86 50.71-53.44M0 0v144.24c0 36.15 66.47 58.3 66.47 58.3V64.13C66.47 15.74 0 0 0 0m58.59 191.08c-20.05-8.54-50.71-26.06-50.71-46.84v-29.71c.84 1.16 1.79 2.29 2.76 3.39 13.37 15.16 35.99 25.8 47.95 30.66v42.51Zm0-50.97c-11.7-5-50.71-23.41-50.71-46.85V61.65c13.03 4.71 50.71 20.31 50.71 53.41v25.04Zm0-51.86c-1.92-3.02-4.12-5.81-6.52-8.41C38.51 65.15 18.76 56.96 7.88 53.3V10.69c7.16 2.58 50.71 18.06 50.71 53.44z'%3E%3C/path%3E%3C/svg%3E");
}

/*
| Aleo headings, unqualified by column width.
|
| styles.min.css carries this same rule as #inner-content.large-9 h1-h6,
| which meant headings changed font depending on which sidebar a page
| showed: large-9 (text sidebar) got Aleo, large-8 (image sidebar),
| large-10 (single-personal_story) and large-12 (no sidebar) did not.
|
| The compiled file cannot be rebuilt, so the .large-9 rule stays there
| and is left alone. It is more specific than this one and still wins on
| large-9 pages, but both declare the same values, so nothing changes for
| them. This rule is what reaches every other width.
*/
#inner-content h1,
#inner-content h2,
#inner-content h3,
#inner-content h4,
#inner-content h5,
#inner-content h6 {
  color: #283883;
  font-family: Aleo,"serif" !important;
  font-variant-ligatures: none;
}

.gfield {
  font-family: Aleo, serif;
  color: #2d377a;
}

.gfield_description {
  font-family: Figtree, sans-serif !important;
  color: #303030;
}

.ginput_container {
  font-family: Figtree, sans-serif !important;
}

.gfield .btn_container {
  font-family: Figtree, sans-serif;
}

body.page-template-template-symptoms-assessment-tool #main .gravity-form #gform_1 ul.gform_fields li.gfield:not(.circular) .gfield_checkbox > li label, body.page-template-template-symptoms-assessment-tool #main .gravity-form #gform_1 ul.gform_fields li.gfield:not(.circular) .gfield_radio > li label {
  color: #2d377a
}

.blue-4 {
  color: #2d377a !important;
}

.form-begin h1 {
  font-family: Aleo, serif !important;
}

.form-begin .lead-paragraph {
  color: #303030;
}

.menu li.icure-registry:nth-child(2) a {
  background: #2d377a;
  font-size: 1rem !important;
  padding: 0 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

a .sli-icon {
  font-family: 'sli-icomoon', serif !important;
}

.next-posts-link a::before, .prev-posts-link a::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ctitle%3Earrow-circle-right-mini%3C/title%3E%3Cg data-name='Livello 2'%3E%3Cg fill='%23283883' data-name='icons'%3E%3Cg fill='%23283883' data-name='arrow-circle-right-mini'%3E%3Cpath fill='%23283883' d='M10 20A10 10 0 1 0 0 10a10 10 0 0 0 10 10zm0-18a8 8 0 1 1-8 8 8.01 8.01 0 0 1 8-8z'/%3E%3Cpath fill='%23283883' d='M5 12h5v3l6-5-6-5v3H5v4z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.next-posts-link a:focus, .next-posts-link a:hover, .prev-posts-link a:focus, .prev-posts-link a:hover {
  color: #3AA5D5;
}

.second-menu li.search {
  margin-inline: 1rem;
}

.second-menu .dropdown-pane.search {
  top: 137px !important;
  z-index: 1 !important;
}

@media screen and (min-width: 640px) {
  .second-menu .dropdown-pane.search {
    top: 153px !important;
  }
}


/*
 * Scroll Offset for Fixed Header
 * Breakpoints: medium_to_large=768px, large=1024px, xlarge=1200px, xxlarge=1440px
 */

@media screen and (min-width: 768px) {
  #content [id] {
    scroll-margin-top: 6.1rem;
  }

  .is-icure-child #content [id],
  .page-template-template-icureceliac-patient-registry #content [id],
  .is-cdf-conference-child #content [id],
  .is-impact-fund-child #content [id] {
    scroll-margin-top: 8.25rem;
  }
}

@media screen and (min-width: 1024px) {
  #content [id] {
    scroll-margin-top: 5.5rem;
  }

  .is-icure-child #content [id],
  .page-template-template-icureceliac-patient-registry #content [id],
  .is-cdf-conference-child #content [id],
  .is-impact-fund-child #content [id] {
    scroll-margin-top: 7.75rem;
  }
}

@media screen and (min-width: 1200px) {
  #content [id] {
    scroll-margin-top: 8.25rem;
  }

  .is-icure-child #content [id],
  .page-template-template-icureceliac-patient-registry #content [id],
  .is-cdf-conference-child #content [id],
  .is-impact-fund-child #content [id] {
    scroll-margin-top: 10.5rem;
  }
}

@media screen and (min-width: 1440px) {
  #content [id] {
    scroll-margin-top: 8.5rem;
  }

  .is-icure-child #content [id],
  .page-template-template-icureceliac-patient-registry #content [id],
  .is-cdf-conference-child #content [id],
  .is-impact-fund-child #content [id] {
    scroll-margin-top: 10.95rem;
  }
}

.ch-yt-placeholder {
  border: 1px solid #ccc;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-bottom: 100px;
}

.ch-yt-placeholder-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(40, 56, 131);
  position: absolute;
  bottom: -100px;
  height: 100px;
  color: #fff;
  width: 100%;
  text-align: center;
  margin-bottom: 2rem;
}

.ch-yt-placeholder-dialog a {
  color: #fff;
  text-decoration: underline;
}

.ch-yt-placeholder-dialog a:hover {
  color: rgb(58, 165, 213);
}

.ch-yt-placeholder-dialog p {
  margin-bottom: 0;
}

/* Footer certificate badges — uniform boxes, contain-fit */
footer.footer .certificate {
	flex-wrap: wrap;
	gap: 10px 14px;
	justify-content: flex-end;
}

footer.footer .certificate li {
	flex: 0 0 calc(33.333% - 10px);
	height: 46px;
	width: auto;
}

footer.footer .certificate li a {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	padding: 0;
}

footer.footer .certificate img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/*
|==========================================================================
| Page Builder — Hero
|==========================================================================
| Breakpoints follow the theme's tachyons scale: -ns 40em, -l 64em.
*/

.page-builder-hero {
	position: relative;
	background-repeat: no-repeat;
}

.page-builder-hero--short {
	min-height: 260px;
}

.page-builder-hero--medium {
	min-height: 380px;
}

.page-builder-hero--tall {
	min-height: 480px;
}

@media screen and (min-width: 40em) {
	.page-builder-hero--short {
		min-height: 320px;
	}

	.page-builder-hero--medium {
		min-height: 460px;
	}

	.page-builder-hero--tall {
		min-height: 620px;
	}
}

@media screen and (min-width: 64em) {
	.page-builder-hero--short {
		min-height: 380px;
	}

	.page-builder-hero--medium {
		min-height: 560px;
	}

	.page-builder-hero--tall {
		min-height: 720px;
	}
}

/* Background layers sit behind the copy so a mobile crop can be swapped
   in without duplicating the heading into the DOM twice. */
.page-builder-hero__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}

/* Scrim, so light type stays legible over busy photography. */
.page-builder-hero--overlay::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.38) 55%, rgba(0, 0, 0, 0.18) 100%);
	pointer-events: none;
}

.page-builder-hero__inner {
	position: relative;
	z-index: 2;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

/*
| Light text is set on the inner wrapper, but #inner-content.large-9 h1-h6
| colours headings #283883 directly, and a rule that hits the element wins
| over anything the parent passes down — so the headline stayed blue on a
| dark image. Dark text needs no counterpart: #283883 is what that rule
| already gives it.
*/
.page-builder-hero__inner.white .page-builder-hero__heading {
	color: #fefefe !important;
}

.page-builder-hero__heading {
	font-size: 1.85rem;
}

@media screen and (min-width: 40em) {
	.page-builder-hero__heading {
		font-size: 2.6rem;
	}
}

@media screen and (min-width: 64em) {
	.page-builder-hero__heading {
		font-size: 3.25rem;
	}
}

/*
| measure-wide caps the subheading at 34em, so aligning the text alone
| would leave the block itself hard against the left. Auto margins move
| the block to match the alignment the editor chose.
*/
.page-builder-hero__inner.tc .page-builder-hero__subheading {
	margin-left: auto;
	margin-right: auto;
}

.page-builder-hero__inner.tr .page-builder-hero__subheading {
	margin-left: auto;
}

.page-builder-hero__subheading p:last-child {
	margin-bottom: 0;
}

/*
|==========================================================================
| Page Builder — Feature Columns
|==========================================================================
| Column count is a modifier rather than a per-breakpoint utility string,
| so the same markup serves the 2, 3 and 4 column cases.
*/

.feature-columns__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem 2.25rem;
}

@media screen and (min-width: 40em) {
	.feature-columns__grid--2,
	.feature-columns__grid--3,
	.feature-columns__grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (min-width: 64em) {
	.feature-columns__grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.feature-columns__grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
| Top is the grid's own stretch behaviour made explicit, so all three
| settings read the same way; content sits at the top either way.
*/
.feature-columns__grid--top {
	align-items: start;
}

.feature-columns__grid--middle {
	align-items: center;
}

.feature-columns__grid--bottom {
	align-items: end;
}

/*
| Equal heights is the grid's own stretch: every column is pulled out to
| the tallest, so background panels match instead of ending with the copy.
*/
.feature-columns__grid--stretch {
	align-items: stretch;
}

/*
| Square sizes each column from its own width rather than from the row, so
| the items keep their box and the grid must not stretch them into it.
| aspect-ratio is a preferred size, not a cap: a column whose copy runs
| past the square still grows rather than clipping the text.
|
| Only from 40em, where the grid actually has columns. Below that a single
| stacked column is the full width of the page, and squaring it would make
| a block as tall as the screen is wide.
*/
@media screen and (min-width: 40em) {
	.feature-columns__grid--square {
		align-items: start;
	}

	.feature-columns__grid--square .feature-columns__item {
		aspect-ratio: 1 / 1;
	}
}

/*
| Either sized mode makes every column a flex column, so Vertical
| Alignment still means something: the box has its height already, and
| justify-content decides where the content sits inside it.
*/
.feature-columns__grid--stretch .feature-columns__item,
.feature-columns__grid--square .feature-columns__item {
	display: flex;
	flex-direction: column;
}

.feature-columns__grid--content-middle .feature-columns__item {
	justify-content: center;
}

.feature-columns__grid--content-bottom .feature-columns__item {
	justify-content: flex-end;
}

/*
| In either sized mode an image column has a height to fill, so the image
| covers it and anything past the edge is clipped. The chain runs through
| <picture> as well: ri() wraps every image in one, and an inline picture
| would collapse the height before it reached the img.
|
| Flex rather than height: 100% so the image still fills the column when a
| heading or anything else is ever added above it. The column is already a
| flex column from the rules above.
*/
.feature-columns__grid--stretch .feature-columns__item--image,
.feature-columns__grid--square .feature-columns__item--image {
	overflow: hidden;
}

.feature-columns__grid--stretch .feature-columns__item--image .feature-columns__image,
.feature-columns__grid--square .feature-columns__item--image .feature-columns__image {
	flex: 1 1 auto;
	min-height: 0;
}

.feature-columns__grid--stretch .feature-columns__item--image picture,
.feature-columns__grid--square .feature-columns__item--image picture {
	display: block;
	height: 100%;
}

.feature-columns__grid--stretch .feature-columns__item--image img,
.feature-columns__grid--square .feature-columns__item--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
| A column image fills its column, unlike an icon, so an image column
| reads as one of the columns rather than as a graphic sitting in one.
*/
.feature-columns__image img {
	display: block;
	width: 100%;
	height: auto;
}

/*
| A Font Awesome glyph rather than an image, so it is inline text and the
| column's Text Alignment moves it with no help from CSS. The size is set
| here rather than with fa-2x so it can grow with the breakpoint.
*/
.feature-columns__icon .fa {
	font-size: 2.25rem;
	line-height: 1;
	color: #283883;
}

@media screen and (min-width: 64em) {
	.feature-columns__icon .fa {
		font-size: 2.75rem;
	}
}

.feature-columns__item--bg-blue .feature-columns__icon .fa {
	color: #fefefe;
}

/*
| Background is a per-column panel: the padding comes with it, so a column
| without one stays flush with the grid and needs no compensating margin.
*/
.feature-columns__item--bg {
	padding: 1.5rem;
}

@media screen and (min-width: 64em) {
	.feature-columns__item--bg {
		padding: 2rem;
	}
}

/*
| The same tint the metadata panels use site-wide, so a grey column reads
| as the theme's existing panel rather than a new shade of its own.
*/
.feature-columns__item--bg-grey {
	background-color: rgba(0, 0, 0, 0.05);
}

.feature-columns__item--bg-light {
	background-color: #eaf5fa;
}

.feature-columns__item--bg-blue {
	background-color: #283883;
	color: #fefefe;
}

/*
| #inner-content.large-9 h1-h6 colours every heading #283883, and an ID
| beats any class selector, so on a blue panel the heading would be blue
| on blue. The theme already answers this the same way for
| .section-with-content-blue: override it outright.
*/
.feature-columns__item--bg-blue .feature-columns__heading {
	color: #fefefe !important;
}

.feature-columns__body p:last-child {
	margin-bottom: 0;
}

/*
|==========================================================================
| Impact Fund
|==========================================================================
*/

.is-impact-fund-child #main > .row,
.is-impact-fund-child .if-strip > .row {
	max-width: none;
}

/*
|==========================================================================
| Impact Fund — Team
|==========================================================================
*/

.impact-fund-team__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem 2rem;
}

@media screen and (min-width: 40em) {
	.impact-fund-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (min-width: 64em) {
	.impact-fund-team__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
| Four across once there is room for it. Held back to 80em because the
| team page runs in a 75%-wide column — at 64em four cards would put the
| 3:4 photos under about 170px, too small for the name and role beneath.
*/
@media screen and (min-width: 80em) {
	.impact-fund-team__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2.5rem 1.5rem;
	}
}

/* ri() emits a <picture>, so size the image inside the ratio box. */
.impact-fund-member__photo .aspect-ratio--object picture,
.impact-fund-member__photo .aspect-ratio--object img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.impact-fund-member__role {
	white-space: normal;
}

/* The organisation sits under the role, quieter than it. */
.impact-fund-member__org {
	white-space: normal;
	color: #4a4a4a;
}

.impact-fund-member__bio .accordion__heading {
	cursor: pointer;
}

/*
|==========================================================================
| Impact Fund — footer strip
|==========================================================================
| Small band above the main footer: logo left, call to action right.
*/

.if-strip {
	background: #fff;
}

.if-strip__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

@media screen and (min-width: 40em) {
	.if-strip__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
	}
}

.if-strip__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 68px;
}

@media screen and (min-width: 64em) {
	.if-strip__logo img {
		max-height: 84px;
	}
}

.if-strip__heading {
	font-size: 2rem;
}

@media screen and (min-width: 40em) {
	.if-strip__cta {
		text-align: right;
	}
}

.if-strip__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media screen and (min-width: 40em) {
	.if-strip__actions {
		justify-content: flex-end;
	}
}

.if-strip__button {
	display: inline-block;
	padding: 0.7rem 1.35rem;
	border: 2px solid #283883;
	border-radius: 2px;
	transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
}

.if-strip__button--primary {
	background-color: #283883;
	color: #fff;
}

.if-strip__button--primary:hover,
.if-strip__button--primary:focus {
	background-color: #0082b5;
	border-color: #0082b5;
	color: #fff;
}

.if-strip__button--secondary {
	background-color: transparent;
	color: #283883;
}

.if-strip__button--secondary:hover,
.if-strip__button--secondary:focus {
	background-color: #283883;
	color: #fff;
}

/*
|==========================================================================
| Impact Fund — content offset for the sub-menu
|==========================================================================
| The Impact Fund sub-menu makes the fixed header taller, exactly as the
| iCureCeliac and Conference sub-menus do, so #content needs their larger
| padding rather than the base values or the top of the page sits under
| the header. Values mirror the shared rule in _main-theme.scss.
|
| The sub-menu itself is only rendered from 768px up (db-mtl), which is
| why there is nothing to correct below that.
*/

@media screen and (min-width: 768px) {
	.is-impact-fund-child #content {
		padding-top: 8.25rem;
	}
}

@media screen and (min-width: 1024px) {
	.is-impact-fund-child #content {
		padding-top: 7.75rem;
	}
}

@media screen and (min-width: 1200px) {
	.is-impact-fund-child #content {
		padding-top: 10.5rem;
	}
}

@media screen and (min-width: 1440px) {
	.is-impact-fund-child #content {
		padding-top: 10.95rem;
	}
}

/*
|==========================================================================
| Impact Fund — sub-menu styling, to match iCureCeliac and CDF Conference
|==========================================================================
| Values taken from the served dist/css/styles.min.css, where these rules
| list .is-icure-child and .is-cdf-conference-child but not Impact Fund.
|
| Note: dist/css/styles.css carries different colours for the off-canvas
| panel (#002635 / #183F50). styles.min.css is the file header.php loads,
| so its values are the ones on screen and the ones used here.
*/

.off-canvas.impact-fund {
	background: #235c8f;
}

.off-canvas.impact-fund .is-accordion-submenu {
	background: #283883;
}

.off-canvas.impact-fund a {
	color: #fff;
	font-weight: 900;
}

.is-impact-fund-child .menu.medium-horizontal {
	z-index: 1;
}

.is-impact-fund-child .menu.medium-horizontal > li {
	border-right: 1px solid #fefefe;
}

.is-impact-fund-child .menu.medium-horizontal > li a {
	transition: all 400ms ease !important;
}

.is-impact-fund-child .menu.medium-horizontal > li:last-child {
	border-right: 0;
}

@media screen and (min-width: 75em) {
	.is-impact-fund-child .bottom-bar {
		border-bottom: 2px solid #fefefe;
	}
}

/*
|==========================================================================
| Hide Page Title
|==========================================================================
| The Page Header group's Hide Page Title toggle puts .hide-page-title on
| the body, so the twelve templates that render the <h1> need no changes.
|
| Clipped rather than display:none, so the heading is still read by screen
| readers and still indexed — the same treatment the theme already gives
| the title in template-team-gluten-free.php. The wrapper keeps no space
| of its own once the heading is out of flow.
*/

.hide-page-title .page-header h1 {
	position: fixed !important;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.hide-page-title .page-header {
	margin-top: 0;
	margin-bottom: 0;
}