/*
 * Hark WP Events — front-end stylesheet.
 *
 * Structural CSS first (layout for the month grid and dropdown), plus a
 * polish layer for the search bar and nav row. Colors mostly inherit from
 * the theme; we only introduce subtle neutrals + a single accent variable.
 */

.hwpe {
    --hwpe-accent: currentColor;
    --hwpe-border: rgba(0, 0, 0, 0.12);
    --hwpe-soft-bg: rgba(0, 0, 0, 0.02);
    --hwpe-hover-bg: rgba(0, 0, 0, 0.05);
    --hwpe-radius: 8px;
    --hwpe-radius-sm: 5px;
    box-sizing: border-box;
}
.hwpe *,
.hwpe *::before,
.hwpe *::after { box-sizing: inherit; }

/* ------------------------------------------------------------------ */
/* Toolbar (slim search bar)                                          */
/* ------------------------------------------------------------------ */
.hwpe-toolbar {
    display: flex;
    align-items: center;
    margin: 1rem 0 0.75rem;
}
.hwpe-search {
    display: flex;
    flex: 1 1 auto;
    gap: 0.5rem;
    align-items: center;
}
.hwpe-search-field {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--hwpe-border);
    border-radius: var(--hwpe-radius);
    padding: 0 0.6rem;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    height: 38px;
}
.hwpe-search-field:focus-within {
    border-color: var(--hwpe-accent);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}
.hwpe-search-icon {
    opacity: 0.55;
    font-size: 0.95em;
    margin-right: 0.4rem;
    line-height: 1;
}
.hwpe-search-field input[type="search"] {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    outline: none;
    height: 36px;
    font: inherit;
    padding: 0;
    margin: 0;
    min-width: 0;
    box-shadow: none;
}
.hwpe-search-field input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* ------------------------------------------------------------------ */
/* Navigation row (arrows + title on left, view toggle floated right) */
/* ------------------------------------------------------------------ */
.hwpe-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hwpe-border);
}
.hwpe-navbar-left {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.hwpe-nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--hwpe-radius-sm);
    text-decoration: none !important;
    color: inherit;
    font-size: 1.4em;
    line-height: 1;
    transition: background-color 0.15s ease;
}
.hwpe-nav-arrow:hover,
.hwpe-nav-arrow:focus,
.hwpe-nav-arrow:active,
.hwpe-nav-arrow:visited {
    background: var(--hwpe-hover-bg);
    text-decoration: none !important;
}
.hwpe-pill {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--hwpe-border);
    border-radius: 999px;
    text-decoration: none !important;
    color: inherit;
    font-size: 0.9em;
    line-height: 1.3;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.hwpe-pill:hover,
.hwpe-pill:focus,
.hwpe-pill:active,
.hwpe-pill:visited {
    background: var(--hwpe-hover-bg);
    text-decoration: none !important;
}
.hwpe-nav-title {
    font-size: 1.15em;
    font-weight: 600;
    /* Title sits between the prev/next arrows in month view; the parent
       .hwpe-navbar-left has gap: 0.5rem which handles spacing. */
    margin: 0 0.25rem;
}

/* View toggle (tab-style with active underline) */
.hwpe-view-toggle {
    display: inline-flex;
    margin-left: auto;
    gap: 1.5rem;
    align-items: center;
}
.hwpe-view-link {
    position: relative;
    display: inline-block;
    padding: 0.25rem 0;
    text-decoration: none !important;
    color: inherit;
    opacity: 0.65;
    font-weight: 500;
    transition: opacity 0.15s ease;
}
.hwpe-view-link:hover,
.hwpe-view-link:focus,
.hwpe-view-link:active,
.hwpe-view-link:visited {
    opacity: 1;
    text-decoration: none !important;
}
.hwpe-view-link.is-active {
    opacity: 1;
    font-weight: 700;
}
.hwpe-view-link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                            */
/* ------------------------------------------------------------------ */
.hwpe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    height: 38px;
    border: 1px solid var(--hwpe-border);
    border-radius: var(--hwpe-radius);
    background: transparent;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hwpe-btn:hover,
.hwpe-btn:focus { background: var(--hwpe-hover-bg); }
.hwpe-btn-primary {
    background: #1f2a8a;
    border-color: #1f2a8a;
    color: #fff;
}
.hwpe-btn-primary:hover,
.hwpe-btn-primary:focus {
    background: #182168;
    border-color: #182168;
    color: #fff;
}
.hwpe-btn-outline {
    background: transparent;
    color: #1f2a8a;
    border-color: #1f2a8a;
}
.hwpe-btn-outline:hover,
.hwpe-btn-outline:focus {
    background: rgba(31, 42, 138, 0.06);
}

/* ------------------------------------------------------------------ */
/* List view                                                          */
/* ------------------------------------------------------------------ */
.hwpe-list { display: block; }
.hwpe-month-heading {
    margin: 1.5em 0 0.5em;
    font-size: 0.95em;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
    opacity: 0.7;
    border-bottom: 1px solid var(--hwpe-border);
    padding-bottom: 0.4em;
}
.hwpe-list-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--hwpe-border);
}
.hwpe-date-badge {
    text-align: center;
    line-height: 1;
}
.hwpe-date-badge .hwpe-dow {
    display: block;
    font-size: 0.8em;
    letter-spacing: 0.06em;
    font-weight: 600;
    opacity: 0.6;
}
.hwpe-date-badge .hwpe-day {
    display: block;
    font-size: 2.1em;
    font-weight: 700;
    margin-top: 0.2em;
}
/* The date/time line is a <p>; themes commonly bottom-pad every <p>
   (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.7;
}
.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 <p> / <h3> elements
   (commonly 1.5em), which otherwise opens a wide gap below the date line. */
.hwpe-list-compact .hwpe-list-item {
    padding: 1rem 0;
    align-items: center;
}
.hwpe-list-compact .hwpe-when {
    margin: 0 0 0.1em !important;
    padding: 0 !important;
}
.hwpe-list-compact .hwpe-event-title {
    margin: 0 !important;
    padding: 0 !important;
}
.hwpe-list-compact .hwpe-venue-line {
    margin: 0 !important;
    padding: 0 !important;
}
.hwpe-list-compact .hwpe-list-body {
    /* Body is centered against the badge via the grid's align-items: center,
       but stacking its own children with no extra spacing keeps the
       date/time line snug against the title. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hwpe-event-title a { color: inherit; text-decoration: none; }
.hwpe-event-title a:hover { text-decoration: underline; }
.hwpe-venue-line { margin: 0 0 0.5em; }
.hwpe-venue-line .hwpe-venue-address { margin-left: 0.5em; opacity: 0.75; }
.hwpe-excerpt { margin: 0; opacity: 0.85; }

/* ------------------------------------------------------------------ */
/* Month grid                                                         */
/* ------------------------------------------------------------------ */
.hwpe-month-grid {
    display: block;
    margin: 0.5rem 0 1rem;
    border: 1px solid var(--hwpe-border);
    border-radius: var(--hwpe-radius);
    overflow: hidden;
    background: #fff;
}
.hwpe-month-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.hwpe-month-row + .hwpe-month-row { border-top: 1px solid var(--hwpe-border); }
.hwpe-month-head-cell,
.hwpe-month-cell {
    padding: 0.55rem 0.6rem;
    min-height: 7rem;
    box-sizing: border-box;
}
.hwpe-month-cell + .hwpe-month-cell,
.hwpe-month-head-cell + .hwpe-month-head-cell {
    border-left: 1px solid var(--hwpe-border);
}
.hwpe-month-head-cell {
    min-height: 0;
    text-transform: uppercase;
    font-size: 0.7em;
    letter-spacing: 0.08em;
    font-weight: 700;
    opacity: 0.55;
    background: var(--hwpe-soft-bg);
}
.hwpe-month-cell.is-other-month { background: var(--hwpe-soft-bg); }
.hwpe-month-cell.is-other-month .hwpe-month-cell-date { opacity: 0.35; }
.hwpe-month-cell.is-today .hwpe-month-cell-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7em;
    height: 1.7em;
    background: #1f2a8a;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
}
.hwpe-month-cell-date { font-size: 1em; font-weight: 600; margin-bottom: 0.4rem; }
.hwpe-month-cell-events { display: flex; flex-direction: column; gap: 0.25rem; }
.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;
}
.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; }
.hwpe-month-event-time { display: block; opacity: 0.65; font-size: 0.9em; }
.hwpe-month-event-title { font-weight: 600; }

/* ------------------------------------------------------------------ */
/* 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);
    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.55;
    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
   <hr> 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 <p>. */
.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 .featured-media-under-header,
body.single-hwpe_event .row.featured-media-under-header,
body.single-hwpe_event .featured-media-above-title,
body.single-hwpe_event .featured-media-below-title,
body.single-hwpe_event .featured-media-after-title,
body.single-hwpe_event .featured-media,
body.single-hwpe_event [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 .post-thumbnail,
body.single-hwpe_event .entry-thumbnail,
body.single-hwpe_event .single-featured-image,
body.single-hwpe_event .wp-block-post-featured-image,
body.single-hwpe_event .has-post-thumbnail .post-thumbnail {
    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;
    }
}

/* ------------------------------------------------------------------ */
/* 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-month-cell { min-height: 5rem; padding: 0.35rem; }
    .hwpe-month-cell-date { font-size: 0.9em; }
    .hwpe-single-meta { grid-template-columns: 1fr; }
}