/*
 * WNHAC Community Calendar, page styles.
 *
 * Loaded on three occasions and on no others: a single community record and the
 * community calendars landing page, both by inc/assets.php, and any page the
 * staff grid shortcode actually printed a grid on, by the shortcode itself in
 * inc/staff-card.php. That third case is what the first two cannot cover, since
 * the shortcode takes the community as an attribute and can be placed anywhere.
 *
 * Every selector in this file is a class this plugin prints itself, or a class
 * scoped inside one, or an element scoped inside one. There is no bare element
 * selector anywhere below, no attribute selector, and no theme class is styled,
 * because the theme and Elementor own everything on these pages that this
 * plugin did not print. Nothing in this file reaches markup another plugin
 * printed.
 *
 * The design values sit in custom properties at the top of each block rather
 * than being spread through the rules, so a size, a colour or a spacing is
 * changed in one place. They are design and they belong here. Anything an
 * editor would want to change is a field on the record instead, and there is
 * no content in this file.
 */

/*
 * The staff grid, printed as a list by wnhac_cc_staff_grid().
 *
 * The column count is not fixed. A track is as wide as the card width below and
 * the row fits as many as it can, so the same grid serves a roster of three and
 * a roster of twelve without a breakpoint written for each. min() caps the
 * track at the full width of the container, which is what stops a single column
 * from overflowing a phone narrower than one card.
 *
 * auto-fill rather than auto-fit is deliberate. auto-fit collapses the empty
 * tracks, so a community with one staff member would have that one card
 * stretched across the whole row. auto-fill leaves the empty tracks in place
 * and the card keeps the size every other card on the site has.
 *
 * The list reset is written against this class rather than against a bare list
 * selector, so it cannot reach the theme's menus, which are lists as well and
 * sit on the same page.
 *
 * The card width and the gap are declared for the manager block as well, from
 * this one declaration, because its contact lines take the width of a card and
 * stand from the portrait by the gap that stands one card from the next.
 *
 * The card is wider than the portrait it carries, so a long job title has room
 * to wrap under a circle that stays at the mockup's size.
 */
.wnhac-staff-grid,
.wnhac-community-manager {
	--wnhac-staff-card-width: 10rem;
	--wnhac-staff-grid-gap: 2rem;
}

.wnhac-staff-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( var( --wnhac-staff-card-width ), 100% ), 1fr ) );
	gap: var( --wnhac-staff-grid-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * One card.
 *
 * The card carries its own design values rather than inheriting them from the
 * grid, because wnhac_cc_staff_card() can be called on its own and a card
 * rendered outside the grid has to look the same as one inside it.
 *
 * The portrait values are declared for the manager block in the same
 * declaration, because the manager block prints the same portrait through
 * wnhac_cc_staff_photo_html(). One declaration is what keeps the two circles,
 * the two rings and the two empty frames the same, rather than two copies that
 * happen to agree today.
 */
.wnhac-staff-card,
.wnhac-community-manager {
	--wnhac-staff-photo-ratio: 1;
	/* Circular portrait with a thin ring, as the client's draft mockup draws it. The ring colour was
	   sampled from that mockup, and the size is the circle measured on it. */
	--wnhac-staff-photo-size: 8rem;
	--wnhac-staff-photo-radius: 50%;
	--wnhac-staff-photo-ring: #24433d;
	--wnhac-staff-photo-ring-width: 1px;
	--wnhac-staff-photo-empty: rgba( 0, 0, 0, 0.08 );
	--wnhac-staff-photo-focus: center top;
	--wnhac-staff-photo-gap: 0.75rem;
}

.wnhac-staff-card {
	--wnhac-staff-title-size: 0.75rem;
	--wnhac-staff-title-fade: 0.7;
	--wnhac-staff-name-size: 1.0625rem;
	--wnhac-staff-name-gap: 0.25rem;

	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	text-align: center;
}

/*
 * The photo frame, which has to hold its size while it is empty.
 *
 * The photo is loaded lazily, so for the first paint the image inside this
 * element has nothing to show yet, and on a record with no photo id and no
 * static image there is never an image inside it at all. A box sized by its
 * contents would therefore be zero high, and every card below it would jump
 * the moment the photos arrived.
 *
 * The height comes from a padding instead, so the box is a fixed shape before
 * anything is inside it. A percentage padding is measured against the card, not
 * against the box, so the width and the padding are both written as the same
 * min() of the portrait size and the card, and the padding is that width times
 * --wnhac-staff-photo-ratio: 1 is a square and 1.25 is a portrait. The box is
 * the portrait size wherever the card is wider, and the card's width wherever a
 * narrow column squeezes it, and it keeps its shape either way.
 *
 * aspect-ratio would say the same thing in one word, but it would need a second
 * code path for the browsers that do not carry it, and a second code path is
 * one nobody here can watch working. This is one path, it is the path every
 * browser takes, and it is the path that was reasoned about.
 *
 * The tint is an alpha over whatever sits behind it rather than a colour of its
 * own, so the moment before anything is painted belongs to the section the
 * frame is dropped into and no palette is imposed on a theme this plugin does
 * not own.
 *
 * Over the tint sits the neutral silhouette, a square head-and-shoulders
 * drawing whose figure sits inside the inscribed circle, so the circular crop
 * cuts only the lower curve of the shoulders. It is the frame's own background
 * rather than an image in the markup, which is what lets it answer two cases
 * with one rule: the record with no photo id and no static image, whose frame
 * is printed empty, and the photo that turns out not to exist, whose image the
 * error handler in wnhac_cc_staff_photo_html() removes, leaving the frame just
 * as empty.
 */
.wnhac-staff-card__photo {
	position: relative;
	width: min( var( --wnhac-staff-photo-size ), 100% );
	height: 0;
	padding-top: calc( min( var( --wnhac-staff-photo-size ), 100% ) * var( --wnhac-staff-photo-ratio ) );
	margin: 0 auto var( --wnhac-staff-photo-gap );
	overflow: hidden;
	border-radius: var( --wnhac-staff-photo-radius );
	background-color: var( --wnhac-staff-photo-empty );
	background-image: url( staff-photo-silhouette.png );
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	box-shadow: 0 0 0 var( --wnhac-staff-photo-ring-width ) var( --wnhac-staff-photo-ring );
}

/*
 * A frame that holds an image does not paint the silhouette under it.
 *
 * A static image an editor attaches can be a transparent PNG, and the drawing
 * would show through it. A browser that does not know :has() drops this rule
 * and keeps the silhouette under every image, where it only ever shows through
 * a transparent one.
 */
.wnhac-staff-card__photo:has( > img ) {
	background-image: none;
}

/*
 * The image inside the frame fills it.
 *
 * Because the height above is padding, the content box of the frame is zero
 * high, so the image has to come out of the flow to be seen. The crop is pinned
 * to the top of the frame because these are portraits and the head is at the
 * top of one.
 */
.wnhac-staff-card__photo > img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: var( --wnhac-staff-photo-focus );
}

/*
 * The job title, which the card prints above the name.
 *
 * The order is the order the mockup captions read, position and then name, and
 * it is the order the template prints, so nothing here reorders anything. The
 * title is set as the smaller of the two lines and faded against whatever
 * colour the theme is using, rather than given a colour of its own, so it stays
 * legible on a light section and on a dark one.
 */
.wnhac-staff-card__title {
	margin: 0;
	font-size: var( --wnhac-staff-title-size );
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: var( --wnhac-staff-title-fade );
}

/*
 * The first name, which is the only name a regular card may carry.
 */
.wnhac-staff-card__name {
	margin: var( --wnhac-staff-name-gap ) 0 0;
	font-size: var( --wnhac-staff-name-size );
	font-weight: 700;
	line-height: 1.3;
}


/*
 * The top row: the team on the left, the community name on the right.
 *
 * Both lines are Elementor heading widgets carrying nothing but a dynamic tag,
 * so their look is decided here rather than in Elementor's own typography
 * controls. That is deliberate. A size stored in the template is a value spread
 * across a database row that nobody reading this package can see, and it would
 * have to be set again on every template that ever prints these two lines.
 *
 * The team reads as a label over the name rather than as a heading of its own,
 * which is how the mockup draws it. It takes its colour from whatever the
 * section is set in and is faded against it, so no palette is imposed on a
 * theme this plugin does not own.
 *
 * Both rules are written against the element Elementor prints inside the
 * widget, because the class the template carries is on the widget wrapper and
 * the text is a child of it.
 */
.wnhac-community-team {
	--wnhac-team-size: 0.8125rem;
	--wnhac-team-fade: 0.7;
}

.wnhac-community-team .elementor-heading-title {
	margin: 0;
	font-size: var( --wnhac-team-size );
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: var( --wnhac-team-fade );
}

.wnhac-community-name .elementor-heading-title {
	margin: 0;
}

/*
 * The vertical rhythm between the sections of a community page and of the
 * landing page.
 *
 * Not a value chosen for these pages. It is the rhythm the site's own content
 * pages already use, measured on About WNHAC > Our Team, where one titled block
 * follows another down the page the way the blocks of a community page do. On
 * that page 120px separate the bottom of one block's content from the top of
 * the next block's heading, block after block, and 20px separate a block's
 * heading from its content. Community > Programs and Health Services were
 * measured as well and carry no repeated rhythm of their own: their gaps are
 * set one section at a time.
 *
 * The 120px on Our Team is built from Elementor's own column padding, 10px at
 * the bottom of one section and 10px at the top of the next, plus a spacer
 * section between them, which is an 80px spacer inside that section's own two
 * 10px paddings. The sections on these pages have the same column padding
 * already, so what is added here is the spacer section's share alone: 100px.
 * The distance between two blocks is then 120px on both, by the same
 * arithmetic.
 *
 * The gap is written between two neighbouring sections rather than on every
 * section. A section a record has nothing for is not printed at all, so the
 * sections either side of it become neighbours and are set one gap apart, not
 * two. The breadcrumb row does not carry this class. On the content pages it
 * sits directly on the section below it, and it does so here too.
 *
 * The last section keeps the same gap below it, so the last block on the page
 * stands from the footer by the distance it stands from the block above it,
 * rather than resting against the footer's band.
 *
 * Pixels rather than rems, because the rhythm this repeats is set in pixels
 * throughout: the column padding, the spacer and the heading gap are all pixel
 * values on the page it was measured on.
 */
.wnhac-community-section {
	--wnhac-community-section-gap: 100px;
}

.wnhac-community-section + .wnhac-community-section {
	margin-top: var( --wnhac-community-section-gap );
}

.wnhac-community-section:last-child {
	margin-bottom: var( --wnhac-community-section-gap );
}

/*
 * The heading over a block: Provider Bios over the staff grid, and Contact over
 * the manager block.
 *
 * Both are printed with this one class, so they are one style. The size, the
 * face and the colour are the theme's own second level heading, and only the
 * margins are set here. The theme gives a heading 40px above it, which would
 * add to the section gap above and break the rhythm, so the top margin is taken
 * away. The margin below is the measured gap between a heading and its content
 * on Our Team.
 */
.wnhac-community-heading {
	--wnhac-community-heading-gap: 20px;

	margin: 0 0 var( --wnhac-community-heading-gap );
}

/*
 * The manager block, a contact card: the portrait beside the contact lines.
 *
 * The portrait is the staff card's own frame, styled by the portrait rules
 * further up this file, set at the width of one staff card, and standing from
 * the lines by the gap that stands one card from the next. None of those values
 * is declared again here: they are read from the declarations the grid and the
 * card use.
 *
 * The row wraps. The lines ask for at least the width of one card beside the
 * portrait, and where the column is too narrow to give them that, on a phone,
 * they move under the portrait instead of being squeezed into a sliver beside
 * it. No breakpoint is written for that, so the same rule holds at whatever
 * width the theme's column turns out to be.
 *
 * The lines are centred against the portrait, because a short block of text
 * pinned to the top of a circle reads as a caption that slipped.
 *
 * Every line in the block is optional and any of them can be the only one, so
 * the spacing is set between lines rather than around them, and no line carries
 * a margin that would show when the line above it is absent.
 *
 * The lines are deliberately close together: this is one contact, read as a
 * block, not four paragraphs. The job title is set the same way the job title
 * on a staff card is, so the two blocks on the page read as the same kind of
 * thing.
 */
.wnhac-community-manager {
	--wnhac-manager-line-gap: 0.15rem;
	--wnhac-manager-title-size: 0.75rem;
	--wnhac-manager-title-fade: 0.7;
	--wnhac-manager-name-size: 1.0625rem;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wnhac-staff-grid-gap );
}

/*
 * The portrait keeps its width and does not shrink. max-width stops it
 * overflowing a column narrower than one card, the same job min() does for a
 * track in the grid. The gap a card leaves under its portrait is taken away,
 * because nothing sits under this one.
 */
.wnhac-community-manager__portrait {
	--wnhac-staff-photo-gap: 0;

	flex: 0 0 var( --wnhac-staff-photo-size );
	max-width: 100%;
}

.wnhac-community-manager__details {
	flex: 1 1 var( --wnhac-staff-card-width );
	min-width: 0;
}

.wnhac-community-manager p {
	margin: 0 0 var( --wnhac-manager-line-gap );
	line-height: 1.4;
}

.wnhac-community-manager p:last-child {
	margin-bottom: 0;
}

.wnhac-community-manager__job-title {
	font-size: var( --wnhac-manager-title-size );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: var( --wnhac-manager-title-fade );
}

.wnhac-community-manager__name {
	font-size: var( --wnhac-manager-name-size );
	font-weight: 700;
}

/*
 * The supporting notes.
 *
 * The field is a rich text field, so what arrives here is whatever an editor
 * wrote. Nothing inside it is styled: the theme owns paragraphs, lists and
 * links, and a plugin that restyled them would be deciding how this site's
 * prose looks. The block itself gets no look of its own either, and it is here
 * only so the notes have a name in the markup for a later rule to reach.
 */
.wnhac-community-notes > :first-child {
	margin-top: 0;
}

.wnhac-community-notes > :last-child {
	margin-bottom: 0;
}

/*
 * The line an empty block shows in the editor and nowhere else.
 *
 * A widget that renders nothing cannot be selected or moved in the Elementor
 * editor, so a block with nothing to say while the template is being edited
 * says so instead. A visitor never sees this, because the widget prints nothing
 * at all outside the editor.
 */
.wnhac-community-placeholder {
	--wnhac-placeholder-fade: 0.6;

	margin: 0;
	opacity: var( --wnhac-placeholder-fade );
	font-style: italic;
}

/*
 * The community index: the name filter and the cards under it.
 *
 * Printed by templates/community-index.php, which is the whole of the landing
 * page and can also be dropped onto any page as a shortcode, so this block
 * stands on its own and borrows nothing from the rules above it.
 *
 * Two elements in it are shown and hidden through the hidden attribute rather
 * than through a class: the filter, which is hidden until the script is
 * listening, and each card, which the filter hides as somebody types. Neither
 * is given a display of its own anywhere below, and that is a rule rather than
 * an omission. The browser's own stylesheet hides a hidden element by setting
 * display to none, and a rule here setting display on the same element would
 * win against it, so the filter would be visible before anything could act on
 * it and a filtered-out card would stay on the page. Every display in this
 * block therefore sits on the list or on the link inside a card, and never on
 * the two elements that are toggled.
 */
.wnhac-community-index {
	--wnhac-index-filter-gap: 1.5rem;
	--wnhac-index-label-size: 0.75rem;
	--wnhac-index-label-fade: 0.7;
	--wnhac-index-label-gap: 0.35rem;
	--wnhac-index-field-width: 22rem;
	--wnhac-index-field-padding: 0.5rem 0.75rem;
	--wnhac-index-field-radius: 4px;
	--wnhac-index-field-border: rgba( 0, 0, 0, 0.25 );
	--wnhac-index-card-width: 15rem;
	--wnhac-index-grid-gap: 1.25rem;
	--wnhac-index-card-padding: 1rem 1.125rem;
	--wnhac-index-card-radius: 4px;
	--wnhac-index-card-border: rgba( 0, 0, 0, 0.12 );
	--wnhac-index-card-hover: rgba( 0, 0, 0, 0.04 );
	--wnhac-index-name-size: 1.0625rem;
	--wnhac-index-empty-gap: 1.25rem;
	--wnhac-index-empty-fade: 0.7;
}

.wnhac-community-index__filter {
	margin-bottom: var( --wnhac-index-filter-gap );
}

/*
 * The label reads as the small caption over the field, the way the job title
 * over a staff card does, so the two blocks on this site read as the same kind
 * of thing. It takes its colour from whatever the section is set in and is
 * faded against it, so no palette is imposed on a theme this plugin does not
 * own.
 */
.wnhac-community-index__label {
	display: block;
	margin-bottom: var( --wnhac-index-label-gap );
	font-size: var( --wnhac-index-label-size );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: var( --wnhac-index-label-fade );
}

/*
 * The field is capped rather than stretched. A search box the width of the
 * content column reads as a form, and this is one short name.
 *
 * The border is an alpha over whatever sits behind it, for the same reason the
 * empty photo frame above is: the control belongs to the section it was dropped
 * into. The outline on focus is deliberately not touched, because the browser's
 * own focus ring is the one a keyboard visitor already recognises and the one
 * that follows their high-contrast settings.
 */
.wnhac-community-index__search {
	display: block;
	width: 100%;
	max-width: var( --wnhac-index-field-width );
	padding: var( --wnhac-index-field-padding );
	border: 1px solid var( --wnhac-index-field-border );
	border-radius: var( --wnhac-index-field-radius );
	background-color: transparent;
	color: inherit;
	font: inherit;
}

/*
 * The grid of cards.
 *
 * Sized the same way the staff grid is and for the same reasons: a track is as
 * wide as one card, the row fits as many as it can, min() stops a single column
 * overflowing a phone, and auto-fill rather than auto-fit keeps a card the size
 * every other card is when the filter has narrowed the list to one.
 *
 * That last point is what makes the choice load-bearing here rather than
 * merely consistent. Typing a name is the normal way this list ends up with one
 * card in it, and auto-fit would stretch that one card across the whole row
 * every time somebody used the filter.
 *
 * The list reset is written against this class rather than against a bare list
 * selector, so it cannot reach the theme's menus, which are lists as well and
 * sit on the same page.
 */
.wnhac-community-index__list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( var( --wnhac-index-card-width ), 100% ), 1fr ) );
	gap: var( --wnhac-index-grid-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The whole card is the link.
 *
 * One target rather than a card with a link somewhere inside it, so a keyboard
 * visitor tabs through thirteen stops rather than thirteen stops and thirteen
 * decorations, and so the target a finger has to hit is the card and not the
 * words on it.
 *
 * The display sits here rather than on the card, because the card is the
 * element the filter hides.
 */
.wnhac-community-index__link {
	display: flex;
	align-items: center;
	height: 100%;
	padding: var( --wnhac-index-card-padding );
	border: 1px solid var( --wnhac-index-card-border );
	border-radius: var( --wnhac-index-card-radius );
	color: inherit;
	text-decoration: none;
}

.wnhac-community-index__link:hover,
.wnhac-community-index__link:focus {
	background-color: var( --wnhac-index-card-hover );
}

.wnhac-community-index__name {
	font-size: var( --wnhac-index-name-size );
	font-weight: 700;
	line-height: 1.3;
}

/*
 * The line shown when nothing matched. It is in the page from the start and
 * hidden, so the script carries no text of its own.
 */
.wnhac-community-index__empty {
	margin: var( --wnhac-index-empty-gap ) 0 0;
	opacity: var( --wnhac-index-empty-fade );
	font-style: italic;
}

/*
 * The monthly calendar: the two states the calendar plugin does not paint at
 * all, and the affordance on a day cell.
 *
 * Nothing in this file sets the calendar's accent colour any more, and that is
 * deliberate. The accent is a setting of the calendar plugin's own, held in the
 * mec_options record under styling.color, and the plugin renders it into a
 * custom property called --mec-color-skin, plus four faded variants, in a block
 * of inline CSS it prints in the document head. It also tags its own wrapper
 * with a class that switches its stylesheet from the factory literal onto that
 * property, so one setting repaints every view the plugin has.
 *
 * A stylesheet in this package answering the same colour would be overriding a
 * setting with a file, and it could only ever reach the views this package
 * enqueues it on. The single event page is not one of them, and that is the
 * page a visitor lands on after clicking a day in the calendar, so the file
 * could never have finished the job the setting finishes.
 *
 * Because that colour now lives in the database rather than in these files, it
 * does not travel with the package. The production runbook carries the value
 * and how to set it.
 *
 * What is left here is the part the setting cannot answer: two keyboard states
 * the calendar plugin never draws, and the pointer on a day cell. The keyboard
 * states read the calendar plugin's own accent property rather than a copy of
 * it, so a later change to the setting carries them along instead of leaving
 * them behind.
 *
 * Every rule below is written inside .wnhac-community-calendar, the wrapper
 * wnhac_cc_community_calendar_html() prints around the shortcode output. That
 * wrapper is on every calendar this package renders and on no other, so none of
 * these rules is a statement about calendars anywhere else on the site.
 *
 * Nothing here is marked important and nothing needs to be. Each selector is
 * one of the calendar plugin's own with this wrapper's class put in front of
 * it, so each carries one class more than anything it has to beat.
 */

/*
 * The colour that reads on top of the accent. It is the same white the calendar
 * plugin already puts on its own filled cell, named here so the two rules that
 * need it are reading one decision rather than carrying a literal each.
 */
.wnhac-community-calendar {
	--wnhac-calendar-on-accent: #fff;
}

/*
 * The pointer on a day cell.
 *
 * The calendar plugin puts the pointer on the link inside a day that carries an
 * event, and that link does not cover the border the cell draws around itself,
 * so the edge of a day still reads as inert. This puts the affordance on the
 * cell, so the whole of what answers a click looks like it will.
 *
 * Every day cell in the month carries it, not only a day that already holds an
 * event. The grid is one control to a reader, and a cell that changes its
 * appearance under the pointer while refusing the cursor reads as broken. The
 * calendar plugin draws that line differently in one of its other layouts, and
 * this package does not follow it there.
 *
 * The weekday header row is a different class entirely and is never reached by
 * anything here, which is correct, because it is a label and not a control.
 */
.wnhac-community-calendar .mec-calendar .mec-calendar-row dt.mec-calendar-day {
	cursor: pointer;
}

/*
 * A day with something on it, while the keyboard is on it.
 *
 * A day carrying an event wraps its number in a link, so it can be reached with
 * a keyboard as well as with a pointer. The calendar plugin floods such a cell
 * with its accent under the pointer and says nothing about the keyboard, so
 * somebody tabbing through the month is shown nothing. This says for the
 * keyboard what the calendar already says for the pointer.
 *
 * The value read here is the calendar plugin's own accent property, the one its
 * colour setting feeds, so this state follows that setting rather than
 * restating it. The two rules after this one finish the state, because a filled
 * cell also has to move its number and its dot, exactly as the calendar's own
 * hover rules do.
 *
 * The classic layout is excluded in the calendar plugin's own words, because
 * that layout does not flood the cell at all. It sets a near white ground and
 * puts the accent in the text instead, so filling it here would be inventing a
 * look rather than matching one. This site renders the modern layout, so the
 * exclusion changes nothing today and is here for the day somebody changes that
 * setting.
 */
.wnhac-community-calendar .mec-calendar:not( .mec-event-calendar-classic ) .mec-calendar-row dt.mec-has-event:focus-within {
	background: var( --mec-color-skin );
}

/*
 * The number inside that day, while the keyboard is on it.
 *
 * The calendar turns this white when the pointer is over the cell and leaves it
 * dark when the keyboard is, which on a cell that has just been flooded with
 * the accent would leave the number near invisible.
 */
.wnhac-community-calendar .mec-calendar .mec-calendar-row dt.mec-has-event:focus-within a {
	color: var( --wnhac-calendar-on-accent );
}

/*
 * The dot under that same day, while the keyboard is on it.
 *
 * The dot is the accent on a light cell and has to invert once the cell itself
 * becomes the accent, or it disappears into its own background. The calendar
 * inverts it on hover and not on focus, so this finishes the pair.
 */
.wnhac-community-calendar .mec-calendar .mec-calendar-row dt.mec-has-event:focus-within:after {
	background-color: var( --wnhac-calendar-on-accent );
}