/* Public Notices — front end.
 *
 * Everything is a CSS variable with a conservative fallback, so a Cornerstone
 * theme can restyle this from one :root block rather than overriding rules one
 * at a time, and the Style tab can restyle it by writing the same properties
 * inline after this file. Nothing here is set inline per element, so both
 * routes win on specificity without !important.
 *
 * Link colour is `inherit` by default rather than a chosen colour: on a site
 * whose theme links are red, a notices block that quietly went teal would look
 * like a bug. Set it on the Style tab when the theme's own colour is wrong.
 */

.docket {
	--docket-text: var(--soren-charcoal, #262626);
	--docket-muted: #5e6971;
	/* Teal ink, not the teal fill: this colours the keyboard focus outline,
	   which needs 3:1 against white (ink is 5.47:1; the fill is 2.56:1). */
	--docket-accent: #2c7565;
	--docket-border: rgba(38, 38, 38, .14);
	--docket-link: inherit;
	--docket-link-hover: inherit;
	--docket-title-link: inherit;
	--docket-title-link-hover: inherit;
	--docket-bg: transparent;
	--docket-notice-bg: transparent;

	--docket-title-font: inherit;
	--docket-title-size: 1.05rem;
	--docket-title-weight: 600;
	--docket-body-font: inherit;
	--docket-meta-size: .9rem;
	--docket-attachment-size: .9rem;
	--docket-source-size: .85rem;

	--docket-gap: 1.25rem;
	--docket-notice-gap: 0;
	--docket-notice-padding: var(--docket-gap) 0;
	--docket-radius: 0;
	--docket-divider: 1px;
	--docket-card-min: 20rem;

	--docket-attachment-direction: column;
	--docket-attachment-gap: .35rem;
	--docket-attachment-top: .6rem;
	--docket-attachment-indent: 0;

	--docket-next-bg: #f5f5f4;
	--docket-next-label: #2c7565;
	--docket-next-tile-bg: #e3ece9;
	--docket-next-tile-text: var(--docket-text);
	--docket-next-button-bg: #2c7565;
	--docket-next-button-text: #ffffff;
	--docket-next-outline: var(--docket-text);
	--docket-next-radius: 12px;

	color: var(--docket-text);
	background: var(--docket-bg);
	font-family: var(--docket-body-font);
}

/* A flex column rather than a plain block, so there is somewhere for a gap
   between notices to live. It defaults to zero, which leaves a plain list
   reading exactly as it did when the rhythm was padding alone — but the moment
   notices have a background or a border they are cards, and cards that touch
   read as one block with lines through it. */
.docket-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--docket-notice-gap);
}

.docket-notice {
	margin: 0;
	padding: var(--docket-notice-padding);
	background: var(--docket-notice-bg);
	border-radius: var(--docket-radius);
	border-bottom: var(--docket-divider) solid var(--docket-border);
}

/* The last notice keeps its padding but loses the rule, so a list never ends
   on a hairline with nothing under it. */
.docket-notice:last-child {
	border-bottom: 0;
}

.docket-notice-title {
	margin: 0 0 .35rem;
	font-family: var(--docket-title-font);
	font-size: var(--docket-title-size);
	font-weight: var(--docket-title-weight);
	line-height: 1.35;
}

.docket-notice-meta {
	margin: 0;
	color: var(--docket-muted);
	font-size: var(--docket-meta-size);
}

.docket-notice-body::before {
	content: " · ";
}

/* Stacked by default. An agenda, minutes and a recording side by side read as
   one run-on line of filenames; one per line, each is a distinct thing to
   click. The Style tab can switch this to a row. */
.docket-attachments {
	list-style: none;
	margin: var(--docket-attachment-top) 0 0 var(--docket-attachment-indent);
	padding: 0;
	display: flex;
	flex-direction: var(--docket-attachment-direction);
	flex-wrap: wrap;
	/* Row layout needs more horizontal separation than stacked needs
	   vertical, so the column gap is widened from the one setting. */
	gap: var(--docket-attachment-gap);
	column-gap: calc(var(--docket-attachment-gap) * 2.5);
	font-size: var(--docket-attachment-size);
}

.docket-source,
.docket-empty {
	margin: var(--docket-gap) 0 0;
	color: var(--docket-muted);
	font-size: var(--docket-source-size);
}

/* Attachment and source links. */
.docket a {
	color: var(--docket-link);
}

.docket a:hover {
	color: var(--docket-link-hover);
}

/* The meeting title is a link too, but it is not the same kind of thing as a
   row of file links underneath it — one is the notice, the others are what is
   attached to it. Styling them together makes a card read as a list of five
   equal links. Defaults to `inherit`, so a title takes the Text Color and is
   left alone when the attachment links are given a colour. */
.docket-notice-title a {
	color: var(--docket-title-link);
}

.docket-notice-title a:hover {
	color: var(--docket-title-link-hover);
}

/* ── Grid ──────────────────────────────────────────────────── */

/* Cards across, wrapping. auto-fill against a minimum card width rather than a
   fixed column count — the same thing Almanac's grid does — so the number of
   columns follows the space available and a narrow screen needs no breakpoint
   of its own. A fixed count is still available per shortcode via columns="".

   The dividing hairline goes: between cards it would be a line in mid-air. The
   card outline replaces it, and the padding that was carrying the list's
   rhythm moves inside the card where it belongs. Each of these is a plain
   custom property, so the Style tab still overrides any of them. */
.docket--grid {
	--docket-notice-gap: 1.25rem;
	--docket-divider: 0;
	--docket-notice-padding: 1.25rem;
	--docket-radius: 8px;
}

.docket--grid .docket-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--docket-card-min), 1fr));
	align-items: stretch;
}

/* An explicit count, from columns="" on the shortcode. minmax(0, 1fr) rather
   than 1fr so a long attachment label can't push a column wider than its
   share. */
.docket--grid.docket--columns .docket-list {
	grid-template-columns: repeat(var(--docket-columns), minmax(0, 1fr));
}

/* Below the width two of them would need, a fixed count stops being a layout
   and starts being a column of slivers. */
@media screen and (max-width: 48rem) {
	.docket--grid.docket--columns .docket-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

.docket--grid .docket-notice {
	/* Beats .docket-notice:last-child, so the final card keeps its outline. */
	border: 1px solid var(--docket-border);
}

/* Compact drops the attachment row's breathing space and tightens the
   rhythm, for a sidebar or a homepage block rather than a full page. */
.docket--compact {
	--docket-gap: .75rem;
	--docket-title-size: .95rem;
}

/* Focus has to stay visible: these are links to meeting minutes on a
   government site, and keyboard users are a large share of that audience. */
.docket a:focus-visible {
	outline: 2px solid var(--docket-accent);
	outline-offset: 2px;
}

/* ── Next meeting ──────────────────────────────────────────── */

/* One upcoming meeting as a card, for a page hero or a homepage block:
   layout="next". Built from the same custom properties as everything else, so
   the title and body fonts follow the Typography settings and its own colours
   live in the Style tab's Next Meeting group. */
.docket-next {
	background: var(--docket-next-bg);
	border-radius: var(--docket-next-radius);
	padding: 1.5rem;
	box-sizing: border-box;
}

.docket-next-label {
	margin: 0 0 1rem;
	color: var(--docket-next-label);
	font-family: var(--docket-title-font);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .25em;
	text-transform: uppercase;
}

.docket-next-main {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.docket-next-tile {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 5.25rem;
	min-height: 5.75rem;
	border-radius: calc(var(--docket-next-radius) * .8);
	background: var(--docket-next-tile-bg);
	color: var(--docket-next-tile-text);
	font-family: var(--docket-title-font);
	line-height: 1.1;
	text-transform: uppercase;
}

.docket-next-month {
	font-size: .875rem;
	font-weight: 800;
	letter-spacing: .12em;
}

.docket-next-day {
	font-size: 2.5rem;
	font-weight: 900;
	line-height: 1;
}

.docket-next-weekday {
	font-size: .8rem;
	font-weight: 700;
}

.docket-next-info {
	min-width: 0;
}

.docket-next-title {
	margin: 0 0 .35rem;
	font-family: var(--docket-title-font);
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.2;
}

.docket-next-when,
.docket-next-place {
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
}

.docket-next-empty {
	margin: 0;
	font-size: .95rem;
}

.docket-next-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	margin-top: 1.1rem;
}

/* Two real buttons in look, links in markup: one opens a PDF, the other an
   .ics file. 44px tall at the default size, the usual touch target. */
.docket .docket-next-button {
	flex: 1 1 auto;
	box-sizing: border-box;
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .625rem 1rem;
	border: 2px solid var(--docket-next-button-bg);
	border-radius: calc(var(--docket-next-radius) * .67);
	background: var(--docket-next-button-bg);
	color: var(--docket-next-button-text);
	font-family: var(--docket-title-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.docket .docket-next-button--primary:hover {
	background: var(--docket-next-button-bg);
	color: var(--docket-next-button-text);
	filter: brightness(.88);
}

.docket .docket-next-button--secondary {
	border-color: var(--docket-next-outline);
	background: transparent;
	color: var(--docket-next-outline);
}

/* The outline button takes a faint wash of its own colour on hover. Not a
   full fill: the text would need a contrasting colour, and the card
   background can't be it — set to transparent over a photo, it vanishes. */
.docket .docket-next-button--secondary:hover {
	background: color-mix(in srgb, var(--docket-next-outline) 12%, transparent);
	color: var(--docket-next-outline);
}

/* Screen-reader-only text: the full date behind the decorative tile. */
.docket-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}