(often 1.5em) which opens a gap before the event title. Zero it out
with !important across both the regular list and compact mode. The
bottom margin keeps a small breathing space. */
.hwpe-when {
margin: 0 0 0.25em !important;
padding: 0 !important;
font-size: 0.92em;
opacity: 0.8;
}
.hwpe-event-title { margin: 0 0 0.5em; font-size: 1.45em; line-height: 1.25; }
/* Compact mode (used by [hark_events_category]): no excerpt, tighter rows,
minimal gap between the "when" line and the event title.
Vertical centering: the row uses a 2-column grid (badge | body). We set
align-items: center on the grid so both the date badge and the body
(date/time line + title) stack centered against each other in the row.
The `padding: 0 !important` rules on .hwpe-when / .hwpe-event-title
override themes that add bottom padding to all
. `table-layout: fixed` is what guarantees
every week sits on the same seven column boundaries — the previous markup
made each row its own CSS Grid, so nothing tied the rows to each other.
A data table also legitimately needs two-dimensional layout, which is why
it scrolls horizontally on narrow screens instead of collapsing. */
.hwpe-month-scroll {
margin: 0.5rem 0 1rem;
border: 1px solid var(--hwpe-border-strong);
border-radius: var(--hwpe-radius);
overflow-x: auto;
overflow-y: hidden;
background: #fff;
-webkit-overflow-scrolling: touch;
}
table.hwpe-month-grid {
table-layout: fixed;
width: 100%;
/* Floor on legibility for narrow *containers* (a skinny sidebar column on
a wide screen); narrow *screens* get the agenda below instead. In px,
not rem, so a theme that resizes the root can't shrink it. */
min-width: 480px;
border-collapse: collapse;
margin: 0;
background: #fff;
/* Themes routinely style tables; neutralise the common ones. */
border-spacing: 0;
font-size: inherit;
}
table.hwpe-month-grid tbody,
table.hwpe-month-grid thead,
table.hwpe-month-grid tr {
background: none;
border: 0;
}
.hwpe-month-head-cell,
.hwpe-month-cell {
/* One shared token — see --hwpe-cell-pad. If these two ever disagree the
weekday letters stop lining up with the dates underneath them. */
padding: var(--hwpe-cell-pad);
box-sizing: border-box;
min-width: 0;
vertical-align: top;
text-align: left;
border-left: 1px solid var(--hwpe-border-strong);
}
.hwpe-month-head-cell:first-child,
.hwpe-month-cell:first-child { border-left: 0; }
/* Row separators (border-collapse means one line is drawn per edge). */
table.hwpe-month-grid tbody .hwpe-month-cell {
border-top: 1px solid var(--hwpe-border-strong);
}
.hwpe-month-cell {
/* On a table cell `height` behaves as a minimum. */
height: 7rem;
}
.hwpe-month-head-cell {
height: auto;
text-transform: uppercase;
font-size: 0.7em;
letter-spacing: 0.08em;
font-weight: 700;
/* Was 0.55 — that lands near 4.5:1 on pure black text and fails outright
on the mid-grey body colour many themes set. */
opacity: 0.75;
background: var(--hwpe-soft-bg);
}
.hwpe-month-cell.is-other-month { background: var(--hwpe-soft-bg); }
/* Was 0.35 (≈2.4:1). These are real dates, not decoration. */
.hwpe-month-cell.is-other-month .hwpe-month-cell-date { opacity: 0.6; }
/* Reserve the circle's height on every cell, not just today's, so the events
below it start at the same y in all seven columns. */
.hwpe-month-cell-date {
display: flex;
align-items: center;
min-height: 1.7em;
font-size: 1em;
font-weight: 600;
margin-bottom: 0.4rem;
}
/* The spelled-out date. Clipped in grid view (where the bare number is what
you see) and revealed as the day heading in the agenda. Same clip pattern
as .hwpe-visually-hidden but without !important, so the agenda can undo it. */
.hwpe-month-cell-longdate {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Shown only when the agenda is active. */
.hwpe-month-agenda-empty { display: none; }
/* Settings → "Show the list view instead of the month calendar on phones".
Both renderings are in the markup and CSS picks one by viewport width —
sniffing the user agent server-side would be baked into a cached page and
would also miss a narrowed desktop window. display:none takes the unused
one out of the accessibility tree, so nothing is announced twice. */
.hwpe-view-when-narrow { display: none; }
.hwpe-month-cell-date > time { display: inline-block; }
.hwpe-month-cell.is-today .hwpe-month-cell-date > time {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.7em;
height: 1.7em;
background: var(--hwpe-today-bg);
color: #fff;
border-radius: 999px;
font-weight: 700;
}
/* Subtle 2px bottom accent on cell hover (inset shadow avoids layout shift). */
.hwpe-month-cell:hover {
box-shadow: inset 0 -2px 0 0 var(--hwpe-cell-hover-border);
}
.hwpe-month-cell-events { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.hwpe-month-event {
display: block;
font-size: 0.82em;
text-decoration: none !important;
color: inherit;
line-height: 1.3;
padding: 0.15rem 0;
border-radius: 3px;
transition: background-color 0.15s ease;
/* Long single words ("Transmitted") otherwise spill across the cell
border into the next day's column. Hyphenate first so the break reads
as "Broth-ers"; the hard break is only the last resort. */
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: break-word;
word-wrap: break-word;
min-width: 0;
}
.hwpe-month-event:hover,
.hwpe-month-event:focus,
.hwpe-month-event:active,
.hwpe-month-event:visited { background: var(--hwpe-hover-bg); text-decoration: none !important; }
/* Was 0.65 — small text needs 4.5:1 and this sits on whatever colour the
theme sets for body copy, which is rarely pure black. */
.hwpe-month-event-time { display: block; opacity: 0.8; font-size: 0.9em; }
.hwpe-month-event-title { font-weight: 600; }
/* Event with a featured image: render as a small card — image on top,
time + title beneath, with an accent bar down the left edge. */
.hwpe-month-event.has-thumb {
padding: 0;
overflow: hidden;
border: 1px solid var(--hwpe-border);
border-left: 3px solid var(--hwpe-accent);
border-radius: var(--hwpe-radius-sm);
}
.hwpe-month-event-thumb { display: block; }
.hwpe-month-event-img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.hwpe-month-event.has-thumb .hwpe-month-event-body {
display: block;
padding: 0.3rem 0.45rem 0.4rem;
}
/* All-day events render as a filled, rounded pill (single line, ellipsis). */
.hwpe-month-event.is-allday {
background: rgba(0, 0, 0, 0.06);
border-radius: 999px;
padding: 2px 10px;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hwpe-month-event.is-allday:hover,
.hwpe-month-event.is-allday:focus {
background: rgba(0, 0, 0, 0.1);
}
.hwpe-month-event.is-allday .hwpe-month-event-body { display: inline; }
/* Desktop hover popover (built + positioned by JS; the source payload is
hidden in the markup and cloned into a body-level floating element). */
.hwpe-month-event-tipdata { display: none !important; }
.hwpe-month-tip {
position: absolute;
z-index: 99999;
width: 300px;
max-width: 92vw;
background: #fff;
color: #1a1a2e;
border: 1px solid var(--hwpe-border);
border-radius: var(--hwpe-radius);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
font-size: 14px;
line-height: 1.45;
}
.hwpe-month-tip.is-visible { opacity: 1; pointer-events: auto; }
.hwpe-month-tip .hwpe-month-tip-thumb { display: block; }
.hwpe-month-tip .hwpe-month-tip-img { display: block; width: 100%; height: auto; }
.hwpe-month-tip .hwpe-month-tip-meta {
display: block;
padding: 0.6rem 0.85rem 0;
font-size: 0.82em;
opacity: 0.7;
}
.hwpe-month-tip .hwpe-month-tip-title {
display: block;
padding: 0.15rem 0.85rem 0;
font-weight: 700;
font-size: 1.08em;
}
.hwpe-month-tip .hwpe-month-tip-excerpt {
display: block;
padding: 0.4rem 0.85rem 0.85rem;
opacity: 0.85;
}
/* ------------------------------------------------------------------ */
/* Add-to-calendar dropdown */
/* ------------------------------------------------------------------ */
.hwpe-addcal { position: relative; display: inline-block; margin: 1rem 0 1.25rem; }
.hwpe-addcal-toggle > span[aria-hidden] {
margin-left: 0.5em;
display: inline-block;
}
.hwpe-addcal-menu {
list-style: none !important;
margin: 0;
padding: 0.25rem 0;
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 100;
background: #fff;
border: 1px solid var(--hwpe-border-strong);
border-radius: var(--hwpe-radius);
min-width: 16em;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}
.hwpe-addcal-menu[hidden] { display: none; }
.hwpe-addcal-menu li {
margin: 0 !important;
padding-left: 0 !important;
list-style: none !important;
list-style-type: none !important;
background: transparent !important;
}
/* Some themes inject bullets via ::before / ::marker. Nuke them. */
.hwpe-addcal-menu li::before,
.hwpe-addcal-menu li::after { content: none !important; display: none !important; }
.hwpe-addcal-menu li::marker { content: '' !important; color: transparent !important; }
.hwpe-addcal-menu a {
display: block;
padding: 0.55rem 1rem;
text-decoration: none !important;
color: inherit;
}
.hwpe-addcal-menu a:hover,
.hwpe-addcal-menu a:focus,
.hwpe-addcal-menu a:active,
.hwpe-addcal-menu a:visited { background: var(--hwpe-hover-bg); text-decoration: none !important; }
/* ------------------------------------------------------------------ */
/* Single-event Details + Venue */
/* ------------------------------------------------------------------ */
.hwpe-single-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin: 2rem 0;
padding-top: 1.5rem;
border-top: 1px solid var(--hwpe-border);
}
.hwpe-meta-heading {
text-transform: uppercase;
font-size: 0.78em;
letter-spacing: 0.08em;
font-weight: 700;
opacity: 0.75;
margin: 0 0 0.85rem;
}
.hwpe-meta-col dl { margin: 0; }
.hwpe-meta-col dt { font-weight: 700; margin-top: 0.55rem; font-size: 0.95em; }
.hwpe-meta-col dd { margin: 0 0 0.5rem; }
/* Many themes draw a horizontal divider between the title block and the
content area (a border-bottom on .entry-header or #page-header-bg, or an
between them). Hide them on event single pages so the date/venue
header (moved by JS to sit directly under the title) stays flush. */
body.single-hwpe_event .entry-header,
body.single-hwpe_event #page-header-bg,
body.single-hwpe_event .nectar-box-roll,
body.single-hwpe_event header.entry-header,
body.single-hwpe_event .entry-title-wrap {
border-bottom: 0 !important;
box-shadow: none !important;
}
body.single-hwpe_event .entry-header > hr,
body.single-hwpe_event .entry-content > hr:first-child,
body.single-hwpe_event #page-header-bg + hr,
body.single-hwpe_event hr.divider {
display: none !important;
}
/* Some themes wrap the page title in a .heading-title element with its own
bottom padding that opens a gap below the H1. Zero it out on event singles. */
body.single-hwpe_event .heading-title,
html body.single-hwpe_event .heading-title {
padding-bottom: 0 !important;
}
/* Header block under the single-event title: bold date + venue name.
Use !important to override themes that bottom-pad every . */
.hwpe-single-header {
margin: 0 0 1rem !important;
}
.hwpe-single-header .hwpe-single-date {
margin: 0 0 0.1em !important;
padding: 0 !important;
font-size: 1.05em;
}
.hwpe-single-header .hwpe-single-venue {
margin: 0 0 0.5em !important;
padding: 0 !important;
opacity: 0.85;
}
/* Venue block: defeat theme paragraph padding/margin so the name, address
and city/state lines stack tightly. Small bottom margin between lines
keeps them readable. */
.hwpe-meta-venue p {
margin: 0 0 0.15em !important;
padding: 0 !important;
}
.hwpe-meta-venue .hwpe-venue-name {
margin-bottom: 0.35em !important;
}
/* Related Events grid at the bottom of single event pages. */
.hwpe-related {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--hwpe-border);
}
.hwpe-related-heading {
margin: 0 0 1rem !important;
padding: 0 !important;
font-size: 1.6em;
font-weight: 700;
}
.hwpe-related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.hwpe-related-card {
display: block;
padding: 1rem 1.25rem;
background: var(--hwpe-soft-bg);
border: 1px solid var(--hwpe-border);
border-radius: var(--hwpe-radius);
text-decoration: none !important;
color: inherit;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.hwpe-related-card:hover,
.hwpe-related-card:focus,
.hwpe-related-card:active {
background: var(--hwpe-hover-bg);
text-decoration: none !important;
transform: translateY(-1px);
}
.hwpe-related-title {
margin: 0 0 0.4rem !important;
padding: 0 !important;
font-size: 1.05em;
font-weight: 700;
line-height: 1.3;
}
.hwpe-related-when {
margin: 0 !important;
padding: 0 !important;
font-size: 0.9em;
opacity: 0.75;
}
@media (max-width: 720px) {
.hwpe-related-grid { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------------ */
/* Single-event: suppress the theme's post byline (author/date/read */
/* time, comments, etc.). Event pages already display date/time in */
/* the Details block, so the duplicate is noise. */
/* ------------------------------------------------------------------ */
body.single-hwpe_event .entry-meta,
body.single-hwpe_event .entry-header .entry-meta,
body.single-hwpe_event .post-meta,
body.single-hwpe_event .byline,
body.single-hwpe_event .author,
body.single-hwpe_event .author-info,
body.single-hwpe_event .author-name,
body.single-hwpe_event .author-meta,
body.single-hwpe_event .post-author,
body.single-hwpe_event .post-author-name,
body.single-hwpe_event .entry-author,
body.single-hwpe_event .entry-byline,
body.single-hwpe_event .entry-date,
body.single-hwpe_event .post-date,
body.single-hwpe_event .posted-on,
body.single-hwpe_event .posted-by,
body.single-hwpe_event .published,
body.single-hwpe_event .post-published,
body.single-hwpe_event .reading-time,
body.single-hwpe_event .read-time,
body.single-hwpe_event .estimated-read-time,
body.single-hwpe_event .post-readtime,
body.single-hwpe_event .single-post-meta,
body.single-hwpe_event .post-meta-info,
body.single-hwpe_event .meta-info,
body.single-hwpe_event time.entry-date,
body.single-hwpe_event time.published,
body.single-hwpe_event time.updated,
body.single-hwpe_event .updated,
body.single-hwpe_event .avatar,
body.single-hwpe_event img.avatar,
body.single-hwpe_event .wp-block-post-author,
body.single-hwpe_event .wp-block-post-author-name,
body.single-hwpe_event .wp-block-post-author-biography,
body.single-hwpe_event .wp-block-post-author-avatar,
body.single-hwpe_event .wp-block-post-date,
body.single-hwpe_event .wp-block-avatar,
/* Wildcards catch theme-specific variants like .has-byline, .post-meta-data, etc. */
body.single-hwpe_event [class*="byline" i],
body.single-hwpe_event [class*="post-meta" i],
body.single-hwpe_event [class*="author-meta" i],
body.single-hwpe_event [class*="read-time" i],
body.single-hwpe_event [class*="reading-time" i],
body.single-hwpe_event [class*="post-author" i],
body.single-hwpe_event [class*="entry-author" i],
/* Common Elementor patterns */
body.single-hwpe_event .elementor-post-info__item--type-author,
body.single-hwpe_event .elementor-post-info__item--type-date,
body.single-hwpe_event .elementor-post-info__item--type-read-time,
body.single-hwpe_event .elementor-post-info__terms-list--meta-read-time,
body.single-hwpe_event .elementor-post-info {
display: none !important;
}
/* Some themes reserve a tall "featured media" wrapper under the entry
header even when no featured image is set. CAUTION: in some themes the
page title is rendered INSIDE this wrapper, so we can't just hide it.
Strategy:
- Collapse the wrapper's reserved height / padding so it shrinks to
fit just the title naturally.
- Hide only the image-specific elements that would otherwise sit in
that space (these never contain the title). */
body.single-hwpe_event.hwpe-hide-featured .featured-media-under-header,
body.single-hwpe_event.hwpe-hide-featured .row.featured-media-under-header,
body.single-hwpe_event.hwpe-hide-featured .featured-media-above-title,
body.single-hwpe_event.hwpe-hide-featured .featured-media-below-title,
body.single-hwpe_event.hwpe-hide-featured .featured-media-after-title,
body.single-hwpe_event.hwpe-hide-featured .featured-media,
body.single-hwpe_event.hwpe-hide-featured [class*="featured-media" i] {
min-height: 0 !important;
height: auto !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
background-image: none !important;
}
/* The image-only containers don't hold the title, safe to hide entirely. */
body.single-hwpe_event.hwpe-hide-featured .post-thumbnail,
body.single-hwpe_event.hwpe-hide-featured .entry-thumbnail,
body.single-hwpe_event.hwpe-hide-featured .single-featured-image,
body.single-hwpe_event.hwpe-hide-featured .wp-block-post-featured-image,
body.single-hwpe_event.hwpe-hide-featured .has-post-thumbnail .post-thumbnail,
/* The rendered featured ![]()
itself carries these WP classes in most themes. */
body.single-hwpe_event.hwpe-hide-featured img.wp-post-image,
body.single-hwpe_event.hwpe-hide-featured img.attachment-post-thumbnail,
body.single-hwpe_event.hwpe-hide-featured .entry-image,
body.single-hwpe_event.hwpe-hide-featured .post-image {
display: none !important;
}
/* Single-event title sits directly above the description; many themes add
a large margin-bottom on the entry title (1-2em). Force the gap to ~10px
below the title and remove any top margin from the first content child
so it doesn't add a second gap from below. */
body.single-hwpe_event .entry-title,
body.single-hwpe_event h1.entry-title,
body.single-hwpe_event .wp-block-post-title,
body.single-hwpe_event h1.wp-block-post-title,
body.single-hwpe_event .post-title,
body.single-hwpe_event h1.post-title {
margin-bottom: 0 !important;
padding-bottom: 10px !important;
text-shadow: none !important;
}
/* Salient theme (and similar) apply text-shadow !important via selectors
like `body #page-header-bg h1` (specificity 102) and
`html body .row .col.section-title h1` (specificity 33), which beat the
simpler entry-title rule above. Match the SAME selectors with the
.single-hwpe_event body class prefixed so we have higher specificity. */
body.single-hwpe_event #page-header-bg h1,
html body.single-hwpe_event #page-header-bg h1,
body.single-hwpe_event .row .col.section-title h1,
html body.single-hwpe_event .row .col.section-title h1,
body.single-hwpe_event .nectar-box-roll .overlaid-content h1,
html body.single-hwpe_event .nectar-box-roll .overlaid-content h1 {
text-shadow: none !important;
}
body.single-hwpe_event .entry-content > :first-child,
body.single-hwpe_event .post-content > :first-child,
body.single-hwpe_event .wp-block-post-content > :first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Hide theme's "Next Post" / "Previous Post" navigation on event singles.
Many themes render a big featured-image card with "Next Post" text below
the content, sometimes ignoring the_post_navigation filters because they
build their own markup. CSS catches what filters miss. */
body.single-hwpe_event .post-navigation,
body.single-hwpe_event .posts-navigation,
body.single-hwpe_event .navigation.post-navigation,
body.single-hwpe_event .post-nav,
body.single-hwpe_event .post-nav-links,
body.single-hwpe_event .nav-links,
body.single-hwpe_event .nav-previous,
body.single-hwpe_event .nav-next,
body.single-hwpe_event .next-post,
body.single-hwpe_event .prev-post,
body.single-hwpe_event .previous-post,
body.single-hwpe_event .next-post-link,
body.single-hwpe_event .previous-post-link,
body.single-hwpe_event .wp-block-post-navigation-link,
body.single-hwpe_event .wp-block-post-navigation,
body.single-hwpe_event [class*="post-navigation" i],
body.single-hwpe_event [class*="next-post" i],
body.single-hwpe_event [class*="prev-post" i],
body.single-hwpe_event [class*="previous-post" i] {
display: none !important;
}
/* Modern browsers: if a header-level container has an avatar image inside,
it's almost certainly a byline. Nuke it from orbit. */
@supports selector(:has(*)) {
body.single-hwpe_event header :has(> img.avatar),
body.single-hwpe_event header :has(> .avatar),
body.single-hwpe_event .entry-header :has(> img.avatar),
body.single-hwpe_event .entry-header :has(> .avatar),
body.single-hwpe_event .entry-header :has(.wp-block-avatar),
body.single-hwpe_event :is(p, div, span):has(> img.avatar) {
display: none !important;
}
}
/* ------------------------------------------------------------------ */
/* Divi: drop the theme sidebar on single event pages (go full width) */
/* ------------------------------------------------------------------ */
/* Divi wraps single content as #content-area > #left-area + #sidebar.
A custom post type has no per-post "Fullwidth" toggle, so hide the
widget sidebar and let the content reclaim the full container. */
body.single-hwpe_event #sidebar {
display: none !important;
}
body.single-hwpe_event #left-area {
width: 100% !important;
max-width: 100% !important;
padding-right: 0 !important;
padding-left: 0 !important;
float: none !important;
}
body.single-hwpe_event #content-area {
max-width: 100% !important;
}
/* Divi draws the content/sidebar separator as a full-height :before on
.container, positioned ~77% across — independent of #sidebar, so it
survives hiding the sidebar. Remove it on event pages. */
body.single-hwpe_event #main-content .container:before,
body.single-hwpe_event.et_right_sidebar #main-content .container:before,
body.single-hwpe_event.et_left_sidebar #main-content .container:before {
display: none !important;
border: 0 !important;
background: none !important;
content: none !important;
}
/* ------------------------------------------------------------------ */
/* Flatsome: drop the sidebar + divider on single event pages */
/* ------------------------------------------------------------------ */
/* Flatsome renders CPT singles through its blog single template: a
.large-9 content column beside a .large-3 sidebar column. Hide the
whole sidebar column (that also removes its divider edge) and let the
content column span the full row. */
body.single-hwpe_event #secondary,
body.single-hwpe_event .post-sidebar,
body.single-hwpe_event .blog-sidebar,
body.single-hwpe_event .sidebar-column {
display: none !important;
}
body.single-hwpe_event .blog-single .row > .large-9,
body.single-hwpe_event #content .row > .large-9,
body.single-hwpe_event .row.row-large > .large-9,
body.single-hwpe_event .post-content-column {
max-width: 100% !important;
flex-basis: 100% !important;
width: 100% !important;
}
/* Kill any divider drawn as a border on the content column / single wrap. */
body.single-hwpe_event .blog-single,
body.single-hwpe_event .post-content-column,
body.single-hwpe_event .blog-single .large-9 {
border-right: 0 !important;
}
/* ------------------------------------------------------------------ */
/* Mobile tweaks */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
.hwpe-navbar { flex-direction: column; align-items: flex-start; }
.hwpe-view-toggle { margin-left: 0; }
.hwpe-list-item { grid-template-columns: 60px 1fr; gap: 1rem; }
.hwpe-single-meta { grid-template-columns: 1fr; }
/* ---------------------------------------------------------------- */
/* Month view becomes a day agenda */
/* ---------------------------------------------------------------- */
/* Seven columns cannot be made to work at phone width. Squeezed into
~40px each, event titles break mid-word ("Klin-gl-er", "6:0 / 0 / p /
m"), and a horizontal scroller only trades that for hidden days.
Below this breakpoint the same markup restacks into a list of the
days that actually have events.
Switching the table elements to `display: block` also drops their
implicit table roles — which is the correct outcome here, not a
casualty: there is no longer a two-dimensional relationship to
convey, and every day already carries its own spelled-out date. */
.hwpe-month-scroll {
overflow: visible;
border: 0;
border-radius: 0;
background: none;
}
table.hwpe-month-grid,
table.hwpe-month-grid tbody,
table.hwpe-month-grid tr,
table.hwpe-month-grid td {
display: block;
width: auto;
min-width: 0;
}
/* Weekday letters mean nothing once the week isn't a row. */
table.hwpe-month-grid thead { display: none; }
/* An agenda of 42 days, 35 of them empty, is not an agenda. Adjacent
months are grid scaffolding — they belong to their own month's view. */
.hwpe-month-cell:not(.has-events),
.hwpe-month-cell.is-other-month { display: none; }
.hwpe-month-cell,
table.hwpe-month-grid tbody .hwpe-month-cell {
height: auto;
padding: 0.9rem 0;
border: 0;
border-top: 1px solid var(--hwpe-border);
}
table.hwpe-month-grid tbody tr:first-child .hwpe-month-cell:first-of-type {
border-top: 0;
}
/* Hover feedback belongs to a grid of targets, not a list. */
.hwpe-month-cell:hover { box-shadow: none; }
/* Swap the bare day number for the spelled-out date. */
.hwpe-month-cell-daynum { display: none; }
.hwpe-month-cell-longdate {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
clip-path: none;
white-space: normal;
}
.hwpe-month-cell-date {
margin-bottom: 0.45rem;
font-size: 0.95em;
letter-spacing: 0.01em;
}
/* No circle in list mode — the date itself now says "(today)", so the
accent is emphasis rather than the only signal. */
.hwpe-month-cell.is-today .hwpe-month-cell-date > time {
display: inline;
min-width: 0;
height: auto;
background: none;
border-radius: 0;
color: var(--hwpe-today-bg);
font-weight: 700;
}
/* Room to breathe: full-width rows at normal reading size. */
.hwpe-month-cell-events { gap: 0.1rem; }
.hwpe-month-event {
font-size: 1em;
padding: 0.35rem 0;
/* Nothing left to overflow into. */
hyphens: none;
-webkit-hyphens: none;
}
.hwpe-month-event-time {
display: inline;
margin-right: 0.5em;
}
/* Thumbnails sit beside the title instead of becoming a hero image. */
.hwpe-month-event.has-thumb {
display: flex;
align-items: center;
gap: 0.7rem;
border: 0;
border-left: 0;
padding: 0.35rem 0;
overflow: visible;
}
.hwpe-month-event.has-thumb .hwpe-month-event-thumb {
flex: 0 0 72px;
}
.hwpe-month-event.has-thumb .hwpe-month-event-img {
border-radius: var(--hwpe-radius-sm);
}
.hwpe-month-event.has-thumb .hwpe-month-event-body { padding: 0; }
/* All-day pills would stretch the full width; keep them shrink-to-fit. */
.hwpe-month-event.is-allday {
display: inline-block;
max-width: 100%;
}
.hwpe-month-agenda-empty {
display: block;
margin: 0.5rem 0 1rem;
opacity: 0.8;
}
/* ---------------------------------------------------------------- */
/* Settings option: list view instead of the month calendar */
/* ---------------------------------------------------------------- */
.hwpe-view-when-wide { display: none; }
.hwpe-view-when-narrow { display: block; }
/* Only one view is reachable here, so a two-tab toggle is a lie. */
.hwpe-navbar.is-mobile-list-only .hwpe-view-toggle { display: none; }
}
/* ------------------------------------------------------------------ */
/* RSVP form (single event page) */
/* ------------------------------------------------------------------ */
.hwpe-rsvp {
max-width: 560px;
margin: 2rem 0;
padding-top: 1.25rem;
border-top: 1px solid var(--hwpe-border);
}
.hwpe-rsvp-title { margin: 0 0 0.75rem; }
.hwpe-rsvp-remaining {
margin: 0 0 1rem;
font-weight: 600;
opacity: 0.85;
}
.hwpe-rsvp-notice {
margin: 0 0 1rem;
padding: 0.7rem 1rem;
border-radius: var(--hwpe-radius-sm);
border: 1px solid var(--hwpe-border-strong);
}
.hwpe-rsvp-notice.is-success {
background: #f0f9f1;
border-color: #2f7d3b;
color: #1e5128;
}
.hwpe-rsvp-notice.is-error,
.hwpe-rsvp-notice.is-full {
background: #fdf1f1;
border-color: #b32d2e;
color: #8a2424;
}
/* Honeypot: pulled out of the visual/AT flow; bots still see the input. */
.hwpe-rsvp-hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
.hwpe-rsvp-field { margin: 0 0 1rem !important; padding: 0 !important; }
.hwpe-rsvp-field label,
.hwpe-rsvp-radios legend {
display: block;
font-weight: 600;
margin-bottom: 0.3rem;
}
.hwpe-rsvp-req { color: #b32d2e; }
.hwpe-rsvp-field input[type="text"],
.hwpe-rsvp-field input[type="email"],
.hwpe-rsvp-field input[type="tel"] {
display: block;
width: 100%;
box-sizing: border-box;
height: 38px;
padding: 0 0.6rem;
font: inherit;
background: #fff;
/* Same 3:1 border treatment as the search field (1.4.11). */
border: 1px solid var(--hwpe-border-strong);
border-radius: var(--hwpe-radius-sm);
}
fieldset.hwpe-rsvp-radios {
border: 0;
margin: 0 0 1rem;
padding: 0;
min-width: 0;
}
.hwpe-rsvp-radios label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-weight: 400;
margin: 0 1.25rem 0 0;
}
.hwpe-rsvp-radios input[type="radio"] { margin: 0; }
.hwpe-rsvp-actions { margin: 1.25rem 0 0 !important; }
.hwpe-rsvp-submit { min-width: 10rem; }
/* ------------------------------------------------------------------ */
/* Ticket sales form (single event page) */
/* ------------------------------------------------------------------ */
.hwpe-tickets {
max-width: 560px;
margin: 2rem 0;
padding-top: 1.25rem;
border-top: 1px solid var(--hwpe-border);
}
.hwpe-tickets-title { margin: 0 0 0.75rem; }
.hwpe-tickets-price { margin: 0 0 0.35rem; }
.hwpe-tickets-testmode { opacity: 0.7; font-size: 0.9em; }
.hwpe-tickets-remaining {
margin: 0 0 1rem;
font-weight: 600;
opacity: 0.85;
}
.hwpe-tickets-notice {
margin: 0 0 1rem;
padding: 0.7rem 1rem;
border-radius: var(--hwpe-radius-sm);
border: 1px solid var(--hwpe-border-strong);
}
.hwpe-tickets-notice.is-success {
background: #f0f9f1;
border-color: #2f7d3b;
color: #1e5128;
}
.hwpe-tickets-notice.is-success p { margin: 0 0 0.35em; }
.hwpe-tickets-notice.is-success p:last-child { margin-bottom: 0; }
.hwpe-tickets-notice.is-error,
.hwpe-tickets-notice.is-full {
background: #fdf1f1;
border-color: #b32d2e;
color: #8a2424;
}
/* Honeypot: pulled out of the visual/AT flow; bots still see the input. */
.hwpe-tickets-hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
.hwpe-tickets-field { margin: 0 0 1rem !important; padding: 0 !important; }
.hwpe-tickets-field label,
.hwpe-tickets-radios legend {
display: block;
font-weight: 600;
margin-bottom: 0.3rem;
}
.hwpe-tickets-req { color: #b32d2e; }
.hwpe-tickets-field input[type="text"],
.hwpe-tickets-field input[type="email"],
.hwpe-tickets-field input[type="tel"] {
display: block;
width: 100%;
box-sizing: border-box;
height: 38px;
padding: 0 0.6rem;
font: inherit;
background: #fff;
/* Same 3:1 border treatment as the search field (1.4.11). */
border: 1px solid var(--hwpe-border-strong);
border-radius: var(--hwpe-radius-sm);
}
.hwpe-tickets-qty-field input[type="number"] {
display: inline-block;
width: 90px;
box-sizing: border-box;
height: 38px;
padding: 0 0.6rem;
font: inherit;
background: #fff;
border: 1px solid var(--hwpe-border-strong);
border-radius: var(--hwpe-radius-sm);
}
.hwpe-tickets-total {
margin-left: 0.75rem;
font-weight: 600;
}
fieldset.hwpe-tickets-radios {
border: 0;
margin: 0 0 1rem;
padding: 0;
min-width: 0;
}
.hwpe-tickets-radios label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-weight: 400;
margin: 0 1.25rem 0 0;
}
.hwpe-tickets-radios input[type="radio"] { margin: 0; }
.hwpe-tickets-actions { margin: 1.25rem 0 0 !important; }
.hwpe-tickets-submit { min-width: 14rem; }
.hwpe-tickets-secure {
margin: 0.5rem 0 0 !important;
font-size: 0.88em;
opacity: 0.75;
}
/* ------------------------------------------------------------------ */
/* RSVP jump button (single event page, above Add to calendar) */
/* ------------------------------------------------------------------ */
.hwpe-rsvp-jump-wrap { margin: 0 0 0.75rem !important; padding: 0 !important; }
.hwpe-rsvp-jump { min-width: 10rem; }
.hwpe-rsvp-jump,
.hwpe-rsvp-jump:hover,
.hwpe-rsvp-jump:focus,
.hwpe-rsvp-jump:active,
.hwpe-rsvp-jump:visited {
text-decoration: none !important;
color: #fff;
}
/* ------------------------------------------------------------------ */
/* RSVP custom field types (configurable form fields) */
/* ------------------------------------------------------------------ */
.hwpe-rsvp-field select,
.hwpe-rsvp-field textarea {
display: block;
width: 100%;
box-sizing: border-box;
padding: 0.45rem 0.6rem;
font: inherit;
background: #fff;
border: 1px solid var(--hwpe-border-strong);
border-radius: var(--hwpe-radius-sm);
}
.hwpe-rsvp-field select { height: 38px; padding: 0 0.6rem; }
.hwpe-rsvp-field textarea { min-height: 90px; resize: vertical; }
.hwpe-rsvp-check label {
display: inline-flex;
align-items: baseline;
gap: 0.45rem;
font-weight: 400;
}
.hwpe-rsvp-check input[type="checkbox"] { margin: 0; flex: none; }