/* ==========================================================================
   Charlton Live Theme V2 - Remembrance
   (6 November to Remembrance Sunday, and to 11 November at the earliest)
   Loaded after seasons.css, only while this is the season.

   The quietest season. A poppy on the logo, the way clubs wear one on the
   shirt; a line of remembrance at the top of the page; poppies along the dark
   banners and a wreath on the home page. Nothing moves, the palette does not
   change, and there is no fixture badge. It follows straight on from Bonfire
   Night, so the fireworks are gone before it starts.
   ========================================================================== */

/* ==========================================================================
   The poppy on the logo
   ========================================================================== */

/* Pinned over the lower right of the logo, like a lapel poppy, rather than on
   top of it - so it does not raise the header the way the hat and the pumpkin
   do (--cl-topper-room: 0). It sits on a dark disc with a light rim (in the
   SVG): bare, a red poppy disappeared into the red of the logo. Positioning
   is shared, in seasons.css. */
body.cl-remembrance {
	--cl-topper-w: 26px;
	--cl-topper-h: 26px;
	--cl-topper-left: 34px;
	--cl-topper-top: 30px;
	--cl-topper-room: 0px;
}

body.cl-remembrance.cl-topper-header .cl-brand::before,
body.cl-remembrance.cl-topper-footer .cl-footer__lockup::before {
	background-image: url("../img/poppy.svg");
}

/* ==========================================================================
   "Lest we forget"
   ========================================================================== */

/* A slim band above the header, printed through wp_body_open by
   cl_v2_body_open(). The header's ink with a hairline under it, so it reads
   as part of the header rather than a notice stuck on top. Eyebrow type, in
   --cl-dark-body on ink - a pair the contrast check already holds to AA. */
.cl-remembrance-band {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 8px var(--cl-gutter, 16px);
	background: var(--cl-ink);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.cl-remembrance-band__poppy {
	flex: none;
	width: 18px;
	height: 18px;
}

.cl-remembrance-band__text {
	margin: 0;
	font-family: var(--cl-font-cond);
	font-weight: 600;
	font-size: var(--cl-eyebrow, 12px);
	letter-spacing: var(--cl-track-eyebrow, .14em);
	text-transform: uppercase;
	color: var(--cl-dark-body);
	text-align: center;
	line-height: 1.5;
}

/* ==========================================================================
   Poppies along the dark banners
   ========================================================================== */

/* Along the bottom edge of every dark banner - the Christmas drifts' and the
   Halloween graveyard's slot. ::after, because ::before is the parent's
   watermark. */
body.cl-remembrance.cl-r-field .cl-lead::after,
body.cl-remembrance.cl-r-field .cl-hero--ink::after,
body.cl-remembrance.cl-r-field .cl-app-hero::after,
body.cl-remembrance.cl-r-field .cl-about-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 40px;
	background: url("../img/poppy-field.svg") repeat-x left bottom / 320px 40px;
	pointer-events: none;
}

/* ==========================================================================
   The wreath
   ========================================================================== */

/* In the corner of the home page's banner, where the Christmas tree stands,
   on its own or over the poppies. Size and side from the Customizer. */
body.cl-remembrance.cl-r-wreath .cl-lead::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: var(--cl-corner-h, 120px);
	background: url("../img/wreath.svg") no-repeat right 3% bottom 0 / auto var(--cl-corner-h, 120px);
	pointer-events: none;
}

/* With the poppies too. The ::after then has to reach the banner's edge for
   the field, so the wreath is lifted inside it instead. */
body.cl-remembrance.cl-r-wreath.cl-r-field .cl-lead::after {
	bottom: -1px;
	height: calc(var(--cl-corner-h, 120px) + 6px);
	background:
		url("../img/wreath.svg") no-repeat right 3% bottom 6px / auto var(--cl-corner-h, 120px),
		url("../img/poppy-field.svg") repeat-x left bottom / 320px 40px;
}

body.cl-remembrance.cl-r-corner-left.cl-r-wreath .cl-lead::after { background-position: left 3% bottom 0; }
body.cl-remembrance.cl-r-corner-left.cl-r-wreath.cl-r-field .cl-lead::after { background-position: left 3% bottom 6px, left bottom; }

/* Below about 1440px the episode art reaches the banner's corner, so the
   wreath shrinks into the strip under the art, as the vampire does. Both
   rules are listed: the combined one outranks the single one. */
@media (max-width: 1439px) {
	body.cl-remembrance.cl-r-wreath .cl-lead::after { height: min(var(--cl-corner-h, 120px), 54px); background-size: auto min(var(--cl-corner-h, 120px), 54px); }
	body.cl-remembrance.cl-r-wreath.cl-r-field .cl-lead::after {
		height: calc(min(var(--cl-corner-h, 120px), 54px) + 6px);
		background-size: auto min(var(--cl-corner-h, 120px), 54px), 320px 40px;
	}
}
@media (max-width: 700px) {
	body.cl-remembrance.cl-r-wreath .cl-lead::after { height: min(var(--cl-corner-h, 120px), 46px); background-size: auto min(var(--cl-corner-h, 120px), 46px); }
	body.cl-remembrance.cl-r-wreath.cl-r-field .cl-lead::after {
		height: calc(min(var(--cl-corner-h, 120px), 46px) + 6px);
		background-size: auto min(var(--cl-corner-h, 120px), 46px), 320px 40px;
	}
}