/* ---------------------------------------------------------------------------
 * AWTW Core — the rules the theme used to own.
 *
 * Bulma and themes/advocates/style.css both disappear at theme switch, and
 * every rule in here is load-bearing. Values are the theme's own; the two
 * offsets marked DERIVED differ because the theme's header is position:fixed
 * and out of flow while Elementor's is in flow. See BILLBOARD-SPEC.md.
 *
 * Paths are relative to this file, so the watermark resolves wherever the
 * plugin is installed.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------- page billboard */

.awtw-hero-slider {
	position: relative;
	width: 100%;
	height: 85vh;          /* theme: .hero-slider { height: 85vh } */
	z-index: 0;
	margin-top: -115px;    /* DERIVED: header height, replacing the theme's
	                          absolute top:0 + main-content margin-top:85vh */
	overflow: hidden;
}

.awtw-hero-slider .slide {
	display: flex;
	background-position: 50% top;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
}

.awtw-hero-slider .logo-overlay {
	position: absolute;
	top: 105px;
	height: calc(85vh - 110px);
	width: auto;
}

.awtw-hero-slider .slide-content {
	position: relative;
	margin: auto;          /* centres the block; the text inside is right-aligned */
	padding: 92px 3rem;
	z-index: 10;
	text-align: right;
}

.awtw-hero-slider .slide-content a { text-decoration: none; }
.awtw-hero-slider .slide-content .title { color: #fff; }

.awtw-hero-slider .slide-content .title.is-1 {
	font-family: "alternate-gothic-no-3-d", sans-serif;
	font-size: 7rem;
	line-height: 6rem;
	margin-bottom: 0;
	text-transform: uppercase;
}

.awtw-hero-slider .slide-content .title.is-4 {
	font-family: "fira-sans", sans-serif;
	font-weight: bold;
	font-size: 1.5rem;
}

/* ------------------------------------------------------ simple banner page */

.awtw-simple-banner {
	background-color: #fff;
	padding-top: 10px;     /* DERIVED: theme has 125px = 115 header + 10 gap.
	                          Elementor's header is in flow, so only the gap. */
}

.awtw-simple-banner .awtw-banner-inner {
	max-width: 1152px;
	margin: 0 auto;
}

.awtw-simple-banner img { display: block; width: 100%; }

/* --------------------------------------------- home hero (Pro Slides widget)
 *
 * The Slides widget has NO height control - verified against its own schema on
 * this install, all 278 controls. `slides_height` does not exist, so the
 * generator's setting was silently ignored and the hero rendered at Elementor's
 * default instead of the theme's 85vh. Height is therefore set here.
 *
 * The watermark has to sit BETWEEN the photo and the text, which is how the
 * theme layers it (img.logo-overlay inside div.slide, with .slide-content at
 * z-index 10 above it). A pseudo-element on the container cannot get between
 * two of the widget's own children, so it goes on the slide: ::after above
 * .swiper-slide-bg, with .swiper-slide-inner lifted above that.
 * ------------------------------------------------------------------------- */

/* Every layer gets 85vh explicitly rather than a percentage of its parent.
 *
 * The chain does not resolve otherwise: Elementor gives .swiper-slide-bg
 * `min-height:100%` in normal flow (not absolute), so it depends on its
 * ancestors having a resolved height, and Swiper writes inline styles onto the
 * wrapper at runtime. Percentages through that produced a slide 85vh tall with
 * the photo filling only the top third.
 *
 * !important because this file is enqueued without a declared dependency on
 * widget-slides.min.css, so load order - and therefore which equal-specificity
 * rule wins - is not guaranteed. */
.awtw-hero-slides .elementor-slides-wrapper,
.awtw-hero-slides .swiper-wrapper,
.awtw-hero-slides .swiper-slide,
.awtw-hero-slides .swiper-slide-bg {
	height: 85vh !important;
}

.awtw-hero-slides .swiper-slide {
	position: relative;
}

.awtw-hero-slides .swiper-slide::after {
	content: "";
	position: absolute;
	top: 105px;
	left: 0;
	height: calc(85vh - 110px);
	width: calc(85vh - 110px);
	background: url(ghosted-circle-logo.png) no-repeat left center;
	background-size: contain;
	z-index: 1;
	pointer-events: none;
}

.awtw-hero-slides .swiper-slide-inner {
	position: relative;
	z-index: 2;
}

/* The theme right-aligns slide copy (.slide-content.has-text-right). The
 * Slides widget exposes alignment only per-slide behind its custom_style
 * switcher, so it is set here for every slide instead. */
.awtw-hero-slides .elementor-slide-heading,
.awtw-hero-slides .elementor-slide-description {
	text-align: right;
}

/* --------------------------------------------------- active nav item
 *
 * Live gives the current page's nav item a grey #7E8279 background box. The
 * generator was setting `background_color_menu_item_active` on the Nav Menu
 * widget, which did nothing, so the active item rendered with no background.
 * Elementor marks the current item with .elementor-item-active, so it is set
 * here instead - deterministic, and one less undocumented control to trust.
 * ------------------------------------------------------------------------- */

.awtw-nav .elementor-item.elementor-item-active,
.awtw-nav .elementor-item.elementor-item-current-menu-item {
	background-color: #7E8279;
}

/* ------------------------------------------- what Bulma used to do for us
 *
 * The ACF shortcodes emit the theme's own class names - strong.title.is-4 for a
 * field label, ul.filing-list for repeater rows, .reveal-trigger for an
 * accordion bar - because that kept the theme's CSS applying to them while the
 * theme was still active. Bulma and style.css left with the theme, so these
 * rules have to live here now.
 *
 * 04-TEMPLATE-INVENTORY.md flagged exactly this: "anything still relying on
 * .content, .columns or .column.is-* has to be re-measured before that switch".
 * Values are from HOME-SPEC.md's measured single-case spec.
 * ------------------------------------------------------------------------- */

strong.title.is-4 {
	display: inline-block;
	font-family: "alternate-gothic-no-2-d", sans-serif;
	font-size: 21px;
	line-height: 23.625px;
	font-weight: 300;
	text-transform: uppercase;
	color: #000;
}

.title.is-3 {
	font-family: "alternate-gothic-no-2-d", sans-serif;
	font-size: 28px;
	line-height: 31.5px;
	font-weight: 400;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 21px;
}

.case-thumbnail { margin-bottom: 14px; }

.case-thumbnail img {
	display: block;
	width: 272px;
	height: auto;
}

.filing-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.filing-list a { color: #93B25D; }

/* The accordion bar. Background measured off live at #DDDDDD. */
.reveal-trigger {
	display: block;
	background-color: #DDDDDD;
	padding: 5.6px 14px 2.1px;
	cursor: pointer;
	border: 0;
	font-family: "alternate-gothic-no-2-d", sans-serif;
	font-size: 21px;
	line-height: 31.5px;
	text-transform: uppercase;
	color: #000;
}

.reveal-box { padding: 7px; }

/* ------------------------------------------------------ listings and cards
 *
 * The listing shortcodes emit live's own Bulma card markup - .card,
 * .card-image, .card-content, .card-footer, .card-footer-item - so these rules
 * replace what Bulma was doing before the theme switch. Same situation as
 * .title.is-4. Values follow live's rendering; the grid is three across at the
 * 1152px measure, which is what 10 cards per page lays out as.
 * ------------------------------------------------------------------------- */

/* The theme's own masonry rules, verbatim from style.css. One column, two at
 * 800px, three at 960px, with a 2% gutter - Masonry reads the two sizer divs
 * for those widths, so the percentages are the layout, not a suggestion. */
.masonry-grid { margin-bottom: 21px; }

.masonry-grid:after { content: ""; display: block; clear: both; }

.grid-sizer,
.grid-item { width: 100%; }

.grid-item { margin-bottom: 1rem; float: left; }

/* The grey placeholder is why a card with no featured image still shows a
 * block rather than collapsing - 4 of the 10 cards on live's first blog page
 * have no image. */
.grid-item .card-image {
	position: relative;
	background-color: #eee;
	min-height: 45px;
}

.grid-item .card-image img { width: 100%; display: block; height: auto; }

/* The date badge on post cards, pinned top-right inside the image area. */
.case-status {
	background-color: #fff;
	padding: .25rem .75rem;
	position: absolute;
	top: .5rem;
	right: .5rem;
}

.masonry-grid .card {
	background-color: #fff;
	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
}

.masonry-grid .card-content { padding: 14px; }

.masonry-grid .card-content .title.is-3 {
	font-size: 23.1px;      /* Bulma 1.5em against the 15.4px base */
	line-height: 25.99px;
	margin-bottom: 10.5px;
}

.masonry-grid .card-content .title.is-3 a { color: #000; }

.masonry-grid .card-footer {
	display: flex;
	border-top: 1px solid #EDEDED;
}

.masonry-grid .card-footer-item {
	display: flex;
	flex-grow: 1;
	justify-content: center;
	padding: 10.5px;
	color: #93B25D;
}

@media screen and (min-width: 800px) {
	.grid-sizer,
	.grid-item { width: 48%; }
}

@media screen and (min-width: 960px) {
	.grid-sizer,
	.grid-item { width: 31.3333%; }
}

.gutter-sizer { width: 2%; }

/* ------------------------------------------------- Bulma's column system
 *
 * Five of the theme's templates lay out with .columns / .column.is-N - staff,
 * board, partners, archives, contact and our-story. Bulma left with the theme,
 * so the grid has to come from here. Gutter is the theme's 0.75rem, which is
 * 10.5px against the 14px root - the same figure the single-case sidebar was
 * measured at.
 * ------------------------------------------------------------------------- */

.columns {
	display: flex;
	margin-left: -10.5px;
	margin-right: -10.5px;
	margin-top: -10.5px;
}

.columns:last-child { margin-bottom: -10.5px; }
.columns.is-multiline { flex-wrap: wrap; }

.column {
	display: block;
	flex-basis: 0;
	flex-grow: 1;
	flex-shrink: 1;
	padding: 10.5px;
}

.column.is-paddingless { padding: 0; }

.column.is-3  { flex: none; width: 25%; }
.column.is-4  { flex: none; width: 33.3333%; }
.column.is-8  { flex: none; width: 66.6667%; }
.column.is-9  { flex: none; width: 75%; }
.column.is-12 { flex: none; width: 100%; }
.column.is-narrow { flex: none; width: auto; }

@media screen and (max-width: 768px) {
	.columns { display: block; }
	.column.is-3,
	.column.is-4,
	.column.is-8,
	.column.is-9 { width: 100%; }
}

/* ------------------------------------------------- staff / board portraits
 *
 * .feature-box--staff is a square photo with a translucent band pinned to the
 * bottom carrying the name and job title. The photo is a background image at
 * grid-thumbnail (500x500 hard crop), rendered 272x272 on live.
 * ------------------------------------------------------------------------- */

.feature-box--staff {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 272px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #eee;
}

.feature-box__title--staff {
	background-color: rgba(255, 255, 255, 0.75);
	padding: 10.5px 14px;
}

.feature-box__title--staff .title.is-2 {
	font-family: "alternate-gothic-no-2-d", sans-serif;
	font-size: 26.95px;
	line-height: 30.32px;
	font-weight: 400;
	text-transform: uppercase;
	color: #000;
	margin: 0;
}

.awtw-advocates a { text-decoration: none; color: #000; }

/* --------------------------------------------------------------- partners */

.partner-grid .grid-sizer,
.partner-grid .grid-item { width: 100%; }

@media screen and (min-width: 800px) {
	.partner-grid .grid-sizer,
	.partner-grid .grid-item { width: 48%; }
}

@media screen and (min-width: 960px) {
	.partner-grid .grid-sizer,
	.partner-grid .grid-item { width: 22%; }
}

.partner-logo { background-color: transparent; }
.partner-logo img { width: 100%; height: auto; display: block; }

.partner-grid .card-content { text-align: center; }

.partner-grid .card-content .title.is-4 {
	font-family: "alternate-gothic-no-2-d", sans-serif;
	font-size: 19.25px;
	line-height: 21.66px;
	text-transform: uppercase;
	color: #000;
}

/* --------------------------------------------------------------- archives */

.archives .card { background-color: #fff; }
.archives .card a { text-decoration: none; color: #000; }
.archives .card-image img { display: block; width: 100%; height: auto; }

.archives .title.is-4 {
	font-family: "alternate-gothic-no-2-d", sans-serif;
	font-size: 19.25px;
	line-height: 21.66px;
	text-transform: uppercase;
	padding: .5rem;
	margin: 0;
}

.has-text-centered { text-align: center; }

/* ---------------------------------------------------- our-story sidebar */

.our-friends-sidebar .card {
	background-color: #F5F5F5;
	margin-bottom: 14px;
}

.our-friends-sidebar .card-content { padding: 14px; }

/* ------------------------------------------------------------- case filter */

.awtw-case-filter .columns {
	display: flex;
	gap: 10.5px;
	margin-bottom: 21px;
	align-items: flex-start;
}

.awtw-case-filter .column { flex: 1 1 0; position: relative; }
.awtw-case-filter .column.is-narrow { flex: 0 0 auto; }

.awtw-case-filter .filter-element {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 5.6px 10.5px;
	border: 1px solid #DBDBDB;
	background-color: #fff;
	font-family: "fira-sans", sans-serif;
	font-size: 15.4px;
	line-height: 23.1px;
	color: #363636;
	cursor: pointer;
}

.awtw-case-filter .filter-submit {
	cursor: pointer;
	background-color: #8EA663;
	border-color: #8EA663;
	color: #fff;
	justify-content: center;
}

.awtw-case-filter .filter-submit:hover { background-color: #A4BF73; }

.awtw-case-filter .filter-dropdown,
.awtw-case-filter .filter-dropdown > li { list-style: none; margin: 0; padding: 0; }

.awtw-case-filter .case-filter-list {
	display: none;
	position: absolute;
	z-index: 30;
	left: 0;
	right: 0;
	max-height: 280px;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: #fff;
	border: 1px solid #DBDBDB;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.awtw-case-filter .filter-dropdown.is-open .case-filter-list { display: block; }

.awtw-case-filter .case-filter-list li {
	padding: 5.6px 10.5px;
	cursor: pointer;
	min-height: 34px;
}

.awtw-case-filter .case-filter-list li:hover { background-color: #F5F5F5; }

@media screen and (max-width: 900px) {
	.awtw-simple-banner { padding-top: 10px; }
	.awtw-case-filter .columns { flex-wrap: wrap; }
	.awtw-case-filter .column { flex: 1 1 100%; }
}

@media screen and (max-width: 480px) {
	.awtw-hero-slider .slide-content .title.is-1 {
		font-size: 5rem;
		line-height: 4rem;
	}
}