/*
 * Bereavement section.
 *
 * Deliberately small. The hero, the sub-menu bar, the grid, the type and the links are all Enfold's
 * and the child theme's, so almost nothing needs styling here. What is left is the bits the theme
 * has no equivalent for: the search row, the eyebrow over each card title, and the details list that
 * carries the meeting time and place. Colours are the site's own: #393b67 indigo, #235b4e green.
 *
 * If something in this section looks wrong, check whether the theme already styles it before adding
 * a rule here. Rules added here are rules that will drift away from the rest of the site.
 */

/* ---------------------------------------------------------------- search */

/*
 * /careers' "Find care now" composition, not just its border-radius: a white card holding the field
 * and a solid button. The card is the surface, so the input needs no border or fill of its own, and
 * the button is the theme's filled indigo rather than the outlined one meant for a dark background.
 *
 * Heights are set, not floored. The previous version used min-height, Enfold's own .avia-button
 * padding pushed the button past it, and nothing in the row made the two agree. Both are 48px and
 * the row centres them.
 *
 * The placeholder colour is set here on purpose. Left alone it was the browser's grey on the
 * theme's grey field and measured nothing like readable.
 */
#top .vc-ber-search {
	max-width: 700px;
	margin: 16px auto 0;
	padding: 8px;
	background: #fff;
	border-radius: 50px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .12);
	box-sizing: border-box;
}

#top .vc-ber-search-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

#top .vc-ber-search input[type="search"] {
	height: 48px;
	min-height: 0;
	margin: 0;
	padding: 0 22px;
	font-size: 16px;
	color: #24303a;
	background: transparent;
	border: 0;
	border-radius: 50px;
	box-shadow: none;
	box-sizing: border-box;
}

#top .vc-ber-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
}

#top .vc-ber-search input[type="search"]::placeholder {
	color: #5b6874;
	opacity: 1;
}

#top .vc-ber-search button.avia-button {
	flex: 0 0 auto;
	height: 48px;
	min-height: 0;
	margin: 0;
	padding: 0 32px;
	/*
	 * A <button> inherits neither family nor size, so left alone this rendered in Arial while every
	 * other button on the site is proxima-nova. Same defect as the Gravity Forms submit.
	 */
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: #393b67;
	border: 0;
	border-radius: 50px;
}

#top .vc-ber-search button.avia-button:hover {
	background: #2c2e52;
}

@media only screen and (max-width: 599px) {
	#top .vc-ber-search {
		padding: 12px;
		border-radius: 25px;
	}

	#top .vc-ber-search-row {
		flex-direction: column;
		align-items: stretch;
	}

	#top .vc-ber-search button.avia-button {
		width: 100%;
	}
}

/* ---------------------------------------------------------------- hub intro */

/*
 * Two halves: standing copy that never changes, and the seasonal page that does. The seasonal half
 * gets the same grey-and-green panel as the details list on a single page, so the thing that moves
 * with the calendar is the thing that looks set apart.
 */
#top .vc-ber-standing p:last-child,
#top .vc-ber-seasonal p:last-child {
	margin-bottom: 0;
}

/*
 * The seasonal block. Its featured image is the background, with an indigo wash over it so the type
 * holds at any crop, which is why the image is set as a background rather than an <img>: the panel
 * is a fixed shape and the photo fills it, however the photographer framed it.
 * No border, no radius, no shadow. The picture is the device.
 */
#top .vc-ber-seasonal {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 340px;
	padding: 32px 34px;
	/*
	 * The wash and the photo are one background stack rather than a pseudo-element over the top.
	 * A ::before needs a positioning context and a paint order to sit above the image, and inside
	 * Enfold's column it reliably lost both. Two layers on one element cannot.
	 *
	 * Dense enough across the whole panel that the type does not depend on where it happens to sit.
	 * The figures are measured, not guessed: the brightest pixel in the photo is (254,255,224), and
	 * at .62 the top of the wash put white text at 4.39:1, under the 4.5 AA needs. At .70 it is
	 * 5.3:1 and the bottom is 10:1. Swapping the photo for a brighter one means re-checking this.
	 */
	background-color: #393b67;
	background-image: linear-gradient(to bottom, rgba(36, 38, 70, .70) 0%, rgba(36, 38, 70, .90) 100%), var(--vc-ber-shot, none);
	background-position: center;
	background-size: cover;
	border-radius: 25px;
	box-sizing: border-box;
}

#top .vc-ber-seasonal,
#top .vc-ber-seasonal p,
#top .vc-ber-seasonal a {
	color: #fff;
}

#top #wrap_all .all_colors h2.vc-ber-seasonal-title {
	margin: 0 0 10px;
	font-size: 30px;
	line-height: 1.2;
	text-transform: none;
	color: #fff;
}

#top .vc-ber-seasonal-title a,
#top .vc-ber-seasonal-title a:hover {
	color: #fff;
}

#top .vc-ber-seasonal-more {
	margin: 14px 0 0;
	font-weight: 600;
}

/* ---------------------------------------------------------------- the panel */

/*
 * Each section is a rounded panel on a full-width band, and both of them alternate down the page:
 * indigo band with a grey panel, then a grey band with a white panel, and round again. The panel is
 * always the lighter of the two, so it always reads as a shape lifted off its band, and the type
 * inside it is always dark on light.
 * Jason, 11/10: "the text should always be dark on white, but play with the two bg colors."
 *
 * The grey panel was on both at first and measured 1.08 against the white band, which is to say the
 * rounded shape was not there at all on every other section.
 */
#top .vc-ber-panel {
	padding: 60px 50px;
	background: #f6f6f6;
	border-radius: 24px;
}

/*
 * A single page sits in the same panel, with a frame. The hub's panels need no border because they
 * sit on a coloured band; this one is on plain white, so the 1px #cccccc edge the cards use is what
 * gives it a shape at all.
 */
#top .vc-ber-panel-framed {
	border: 1px solid #ccc;
}

#top .vc-ber-band-tint {
	background-color: #f6f6f6;
}

#top .vc-ber-band-tint .vc-ber-panel {
	background: #fff;
}

/*
 * On the indigo bands the theme's alternate_color rules turn every heading, paragraph and link
 * white for a dark background. Nothing inside the panel is on that background, so they all stand
 * down here, back to the colours the site uses on a light section.
 */
#top .alternate_color .vc-ber-panel,
#top .alternate_color .vc-ber-panel p,
#top .alternate_color .vc-ber-panel span,
#top .alternate_color .vc-ber-panel li,
#top .alternate_color .vc-ber-panel time {
	color: #333;
}

/*
 * Section headings are indigo, which is what the Newsroom sets its four to: In The News and Blog are
 * #393b67 on their light bands, Press Releases and Community go white on the dark ones. That is the
 * page this hub follows, so it is the page to take the heading colour from.
 *
 * Not black, which was Jason's mock-up rather than the site. Not green either: that was three of
 * /careers' seven headings, the other four being #222222 and #4a4a4a, so there is no convention
 * there to follow. Green on this site is the small accent, the stat numbers and the When / Where
 * labels on a single page, not a section heading.
 *
 * The card titles are the same indigo, as the Newsroom's are. The 32px against 18px carries the
 * hierarchy, so the colour does not have to.
 */
/*
 * Buttons inside a panel are always on a light surface, whatever the band behind the panel is doing,
 * so the theme's alternate_color repaint has to stand down the same way the type does. Left alone it
 * set the label to rgba(156,175,137,.125) -- a near-transparent sage on indigo, 4.46:1 -- on every
 * section that sat on a dark band, which was four of the seven. Jason, 11/11: "Black on blue isn't
 * going to fly on 1/2 the panels."
 */
#top .alternate_color .vc-ber-panel .avia-button,
#top .alternate_color .vc-ber-panel .avia-button .avia_iconbox_title,
#top .alternate_color .vc-ber-panel .avia-button.avia-color-theme-color,
#top .alternate_color .vc-ber-panel .avia-button.avia-color-theme-color .avia_iconbox_title {
	color: #fff;
	background-color: #393b67;
	border-color: #393b67;
}

#top #wrap_all .all_colors .vc-ber-panel h2,
#top .alternate_color .vc-ber-panel h2 {
	color: #393b67;
}

#top #wrap_all .all_colors .vc-ber-panel h3.slide-entry-title a,
#top .alternate_color .vc-ber-panel .slide-entry-title a,
#top .alternate_color .vc-ber-panel .read-more-link a {
	color: #393b67;
}

/* ---------------------------------------------------------------- the grid */

/*
 * Three across, every section, every time. Jason, 11/10: "Always be 3."
 *
 * Enfold floats these columns, which left rows running into each other, so the wrap is a real grid.
 * Grid also makes the three cards in a row the same height, and the card below flexes so the read
 * more link sits on the bottom edge of all three rather than wherever the copy happens to stop.
 */
#top .vc-ber-grid .slide-entry-wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 30px;
	row-gap: 30px;
}

/*
 * The card is /careers' own, from .opportunities .flex_column: 12px radius and a hairline #cccccc
 * edge. What it stands on decides the fill. On the grey panel the card is flat white and the step
 * between the two is the whole effect, so a gradient only muddies it. On the white panel there is no
 * step to make, so the card takes the site's white-to-#f6f6f6 gradient and separates itself.
 * Jason, 11/10: "let's keep white on gray just white. No gradient." / "white on white can keep the
 * gradient."
 *
 * No shadow. The glow this had before, 0 0 10px #e2e2e2, was mine and nothing on this site has one.
 * Where /careers does use a shadow it is a drop, 0 4px 20px rgba(0,0,0,.08), offset downward, and
 * its stat cards carry none at all until you hover them. Jason, 11/10: "Lose the glow."
 */
#top .vc-ber-grid .slide-entry {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	margin: 0;
	padding: 30px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 12px;
	box-shadow: none;
}

/* White on white, so the card needs the gradient to be a card at all. */
#top .vc-ber-band-tint .vc-ber-panel .slide-entry {
	background: linear-gradient(0deg, #f6f6f6 0%, #fff 100%);
}

#top .vc-ber-grid .slide-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

#top .vc-ber-grid .slide-entry-excerpt {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

#top .vc-ber-grid .read-more-link {
	margin-top: auto;
	padding-top: 16px;
}

/* Enfold's spacer between title and excerpt leaves a hole once the cards are this plain. */
#top .vc-ber-grid .av-vertical-delimiter {
	display: none;
}

#top #wrap_all .all_colors .vc-ber-grid h3.slide-entry-title {
	margin: 0 0 10px;
}

#top .vc-ber-grid .slide-meta {
	margin: 0 0 10px;
	color: #555;
}

#top .vc-ber-grid .slide-image {
	display: block;
	margin: 0 0 20px;
}

#top .vc-ber-grid .slide-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

#top .vc-ber .vc-ber-where {
	display: block;
}

@media only screen and (max-width: 989px) {
	#top .vc-ber-panel {
		padding: 40px 30px;
	}
}

@media only screen and (max-width: 767px) {
	#top .vc-ber-panel {
		padding: 30px 20px;
		border-radius: 16px;
	}

	#top .vc-ber-grid .slide-entry-wrap {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------- single */

/*
 * Inside the panel the article needs no width of its own, and the title wants air above it rather
 * than sitting hard against the frame.
 */
#top .vc-ber-single .vc-ber-panel-framed .entry-content-wrapper {
	padding: 0;
}

/*
 * Left, like the body under it. Enfold centres the post title in a full-width layout, so the page
 * opened with a centred title and a centred "in Resources" over left-aligned copy, which reads as
 * two different pages stacked. Jason, 11/11: "what is this doing? left align."
 */
#top #wrap_all .all_colors .vc-ber-single h1.post-title {
	margin: 0 0 14px;
	text-align: left;
}

#top .vc-ber-single .entry-content-header,
#top .vc-ber-single .entry-content-header .post-meta-infos,
#top .vc-ber-single .entry-content-header .blog-categories {
	display: block;
	margin: 0 0 18px;
	text-align: left;
}

#top .vc-ber-single .big-preview img {
	border-radius: 12px;
}

#top .vc-ber-single .post_delimiter {
	display: none;
}


/*
 * Meeting details. Deliberately not a panel: no box, no tinted background, no left rule. It is a
 * list under the title, set in the site's own label treatment, with one hairline to separate it
 * from the body. The site boxes nothing, so neither does this.
 */
#top .vc-ber-details {
	margin: 0 0 32px;
	padding: 0 0 24px;
	border-bottom: 1px solid #e0e0e0;
}

#top .vc-ber-details dl {
	margin: 0;
}

#top .vc-ber-details dt {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #235b4e;
}

#top .vc-ber-details dd {
	margin: 0 0 16px;
}

#top .vc-ber-details dd:last-child {
	margin-bottom: 0;
}

#top .vc-ber-details dd p {
	margin: 0;
}

#top .vc-ber-contact-name {
	display: block;
	font-weight: 700;
}

#top .vc-ber-print,
#top .vc-ber-back {
	margin: 0 0 10px;
}

/* ---------------------------------------------------------------- breadcrumbs */

/*
 * "You are here:" is six words of chrome before the trail even starts, and on a phone it pushes the
 * page's own name onto a second line that runs under the band below it.
 * Jason, 11/11: "breadcrumbs suck responsive. Drop 'You are here:' from under 768px."
 */
@media only screen and (max-width: 767px) {
	#top .breadcrumb .breadcrumb-title {
		display: none;
	}
}

/* ---------------------------------------------------------------- shared */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}