/* Essentially Amsterdam — theme stylesheet.
   Values derived from indebuurt.nl/amsterdam's production CSS.
   Change --ea-accent once to rebrand. */

:root{
  --ea-accent:#248641; --ea-accent-hover:#1B6A33; --ea-green:#007A00;
  --ea-text:#000; --ea-text-dark:#292929; --ea-meta:#B4B4B4; --ea-meta-alt:#666;
  --ea-divider:#EFE8E1; --ea-border:#E5E5E5; --ea-bg:#F6F6F6; --ea-card:#FFF; --ea-card-alt:#F5F5F5;
  --ea-font:"Figtree",Arial,"Helvetica Neue",Helvetica,sans-serif;
  --ea-container:1024px; --ea-sidebar:310px; --ea-gap:10px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--ea-bg); color:var(--ea-text);
  font-family:var(--ea-font); font-size:16px; font-weight:400; line-height:24px; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--ea-accent); text-decoration:none; }
a:hover{ color:var(--ea-accent-hover); }
h1,h2,h3,h4,h5,h6{ font-family:var(--ea-font); font-weight:700; margin:0 0 .4em; color:var(--ea-text-dark); }

.ea-container{ max-width:var(--ea-container); margin:0 auto; padding:0 10px; }
.ea-skip{ position:absolute; left:-9999px; }

/* ---------- HEADER ---------- */
.ea-header{ position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--ea-border); }
.ea-header__top{ display:flex; align-items:center; justify-content:space-between;
  max-width:var(--ea-container); margin:0 auto; padding:10px 16px; }
.ea-logo,.ea-logo a{ font-family:var(--ea-font); font-weight:700; font-size:24px; color:var(--ea-accent); }
.ea-logo img{ max-height:64px; width:auto; }
.ea-search{ background:none; border:0; cursor:pointer; color:var(--ea-text-dark);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  flex:0 0 44px; border-radius:8px; }
.ea-search:hover{ background:#f2f4f7; }
.ea-search svg{ width:22px; height:22px; fill:currentColor; display:block; }
@media (max-width: 782px){
  .ea-header__top{ flex-wrap:nowrap; gap:8px; align-items:center; }
  .ea-logo img, .ea-logo svg{ max-width:150px; height:auto; }
  .ea-searchform{ flex:1 1 auto; min-width:0; }
  .ea-search__input{ width:100%; max-width:none; min-width:0; flex:1 1 auto; padding:8px 12px; font-size:16px; }
  .ea-search{ display:none; }
}
.ea-searchform{ display:flex; align-items:center; gap:6px; }
.ea-search__input{ width:200px; max-width:44vw; padding:7px 12px; border:1px solid var(--ea-border);
  border-radius:4px; font-size:14px; line-height:1.4; color:var(--ea-text-dark); background:#fff; }
.ea-search__input::placeholder{ color:#9aa0a6; }
.ea-search__input:focus{ outline:none; border-color:var(--ea-accent); box-shadow:0 0 0 2px rgba(0,0,0,0.05); }

.ea-nav{ border-top:1px solid var(--ea-border); }
.ea-nav__list{ display:flex; flex-wrap:wrap; align-items:center; height:50px; margin:0 auto;
  padding:0 15px; max-width:var(--ea-container); list-style:none; }
.ea-nav__list a{ display:inline-block; padding:6px 13px; color:var(--ea-text-dark);
  font-weight:700; font-size:16px; line-height:28px; }
.ea-nav__list a:hover{ background:var(--ea-accent); color:#fff; border-radius:6px; }
.ea-nav__list .current-menu-item > a,
.ea-nav__list .current-menu-parent > a,
.ea-nav__list .current-menu-ancestor > a,
.ea-nav__list .current-cat > a{ background:var(--ea-accent); color:#fff; border-radius:6px; }

/* Dropdown submenus (e.g. "Amsterdam Life" parent) */
.ea-nav__list li{ position:relative; }
.ea-nav__list .menu-item-has-children > a::after{
  content:"\25BE"; font-size:11px; margin-left:5px; vertical-align:middle; }
.ea-nav__list .sub-menu{
  position:absolute; top:100%; left:0; z-index:110;
  min-width:230px; margin:0; padding:6px 0; list-style:none;
  background:#fff; border:1px solid var(--ea-border);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease, visibility .12s; }
.ea-nav__list li:hover > .sub-menu,
.ea-nav__list li:focus-within > .sub-menu{
  opacity:1; visibility:visible; transform:translateY(0); }
.ea-nav__list .sub-menu a{
  display:block; padding:6px 16px; line-height:20px;
  font-size:14px; text-transform:none; white-space:nowrap; }

.ea-catstrip{ background:var(--ea-accent); }
.ea-catstrip__list{ display:flex; flex-wrap:wrap; margin:0 auto; padding:0 15px;
  max-width:var(--ea-container); list-style:none; }
.ea-catstrip__list a{ display:inline-block; padding:8px 10px; color:#fff;
  font-weight:700; font-size:16px; line-height:1; text-transform:uppercase; }
.ea-catstrip__list a:hover{ color:#fff; opacity:.85; }

/* Hamburger toggle — phones only. Hidden on desktop, which keeps the hover nav. */
.ea-navtoggle{ display:none; }

@media (max-width:599px){
  /* 2026-07-27: the old horizontal overflow-x scroll strip is GONE. It fitted the menu on a
     phone but hid most of it off-screen with no affordance, and it clipped any dropdown —
     which is why submenus previously had to be dragged out as position:fixed panels.
     Now: a hamburger opens a full-width vertical list, submenus expand inline. */
  .ea-navtoggle{ display:flex; align-items:center; gap:9px; width:100%;
    margin:0; padding:11px 15px; border:0; border-top:1px solid rgba(255,255,255,.25);
    background:var(--ea-accent); color:#fff; font:inherit; font-weight:700; font-size:15px;
    text-transform:uppercase; letter-spacing:.04em; cursor:pointer; }
  .ea-navtoggle__bars{ display:inline-block; width:20px; height:14px; position:relative; flex:0 0 auto; }
  .ea-navtoggle__bars span{ position:absolute; left:0; width:100%; height:2px; background:#fff;
    border-radius:2px; transition:transform .18s ease, opacity .18s ease; }
  .ea-navtoggle__bars span:nth-child(1){ top:0; }
  .ea-navtoggle__bars span:nth-child(2){ top:6px; }
  .ea-navtoggle__bars span:nth-child(3){ top:12px; }
  /* Bars morph into an X while the menu is open. */
  .ea-navtoggle[aria-expanded="true"] .ea-navtoggle__bars span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .ea-navtoggle[aria-expanded="true"] .ea-navtoggle__bars span:nth-child(2){ opacity:0; }
  .ea-navtoggle[aria-expanded="true"] .ea-navtoggle__bars span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  .ea-nav__list{ display:none; height:auto; overflow:visible; flex-direction:column;
    flex-wrap:nowrap; width:100%; max-height:75vh; overflow-y:auto; }
  .ea-nav--open .ea-nav__list{ display:flex; }
  .ea-nav__list li{ flex:0 0 auto; width:100%; position:relative; }
  .ea-nav__list > li > a{ display:block; width:100%; padding:13px 15px; white-space:normal;
    border-top:1px solid rgba(255,255,255,.18); }

  /* Caret marks which rows expand, and flips when open. */
  .ea-nav__list .menu-item-has-children > a::after{
    content:""; position:absolute; right:18px; top:19px; width:8px; height:8px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg); transition:transform .18s ease; }
  .ea-nav__list .menu-item-has-children.ea-open > a::after{ transform:rotate(-135deg); top:23px; }

  /* Submenu: an inline accordion, NOT a floating panel. No fixed positioning, no clipping,
     no --ea-subtop measurement — the whole class of bug the scroll strip created. */
  .ea-nav__list .sub-menu{
    display:none; position:static; opacity:1; visibility:visible; transform:none;
    width:100%; min-width:0; border:0; border-radius:0; box-shadow:none;
    background:rgba(0,0,0,.18); }
  .ea-nav__list .menu-item-has-children.ea-open > .sub-menu{ display:block; }
  .ea-nav__list .sub-menu a{ white-space:normal; padding:12px 15px 12px 30px;
    font-size:15px; line-height:1.35; border-top:1px solid rgba(255,255,255,.12); }
}

/* ---------- LAYOUT ---------- */
.ea-main{ padding:15px 0 30px; }
.ea-cols{ display:flex; flex-direction:row; gap:0; max-width:var(--ea-container); margin:0 auto; padding:0 10px; }
.ea-col--main{ width:calc(100% - var(--ea-sidebar)); padding:0 10px 0 5px; min-width:0; }
.ea-col--side{ width:var(--ea-sidebar); min-width:var(--ea-sidebar); max-width:var(--ea-sidebar); padding:0 10px 10px 0; }
@media (max-width:767px){
  .ea-cols{ flex-direction:column; }
  .ea-col--main,.ea-col--side{ width:100%; max-width:100%; min-width:0; padding:0; }
}

/* ---------- SECTION-TITLE BAR ---------- */
.ea-section{ margin-bottom:20px; }
.ea-section__title{ display:inline-block; margin:0 0 10px; padding:7px 10px 4px;
  background:var(--ea-accent); color:#fff; font-weight:700; font-size:20px; line-height:1; text-transform:uppercase; }
.ea-section__title a{ color:#fff; }
@media (max-width:429px){ .ea-section__title{ font-size:16px; } }

/* ---------- GRID ---------- */
.ea-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--ea-gap); align-items:start; }
.ea-grid--3{ grid-template-columns:repeat(3,1fr); }
.ea-grid .is-hero{ grid-column:span 2; grid-row:span 2; }
.ea-grid .is-wide{ grid-column:span 2; }
/* Lead grid: 1 big (2-col) + 1 right on top row, 3 across underneath */
.ea-grid--lead{ grid-template-columns:repeat(3,1fr); align-items:start; }
.ea-grid--lead .is-hero{ grid-column:span 2; grid-row:span 1; }
@media (max-width:767px){ .ea-grid,.ea-grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:429px){
  .ea-grid,.ea-grid--3{ grid-template-columns:1fr; }
  .ea-grid .is-hero,.ea-grid .is-wide{ grid-column:span 1; grid-row:span 1; }
}

/* ---------- HOMEPAGE MASTHEAD (the one H1, added 2026-08-02) ----------
   The homepage had no h1 at all. This is a restrained one: site name at roughly the news
   block's lead-headline weight, tagline under it in the muted meta colour, separated from
   the content below by the same divider the rest of the page uses. */
.ea-homemast{ padding:14px 4px 12px; border-bottom:1px solid var(--ea-divider); margin:0 0 14px; }
.ea-homemast__title{ font-size:2rem; line-height:1.15; font-weight:700; margin:0 0 4px;
  color:var(--ea-text-dark); letter-spacing:-.01em; }
.ea-homemast__tag{ margin:0; font-size:15px; line-height:1.45; color:var(--ea-meta-alt); }
@media (max-width:640px){
  .ea-homemast{ padding:10px 4px 10px; margin:0 0 10px; }
  .ea-homemast__title{ font-size:1.5rem; }
  .ea-homemast__tag{ font-size:14px; }
}

/* ---------- MASONRY (homepage feed + archive) ---------- */
/* Grid with fine rows; masonry.js sets each card's row-span from its measured height so
   varied-size cards pack with no gaps. Big/wide cards span 2 columns. */
.ea-masonry{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:8px;
  gap:var(--ea-gap); grid-auto-flow:row dense; }
.ea-masonry .ea-card{ grid-row-end:span 34; align-self:start; }   /* fallback; masonry.js refines from measured height */
.ea-masonry .is-big,.ea-masonry .is-wide{ grid-column:span 2; }
/* Feature cards get a defined shape; the photo then fills the whole card (below). */
.ea-masonry .is-big{ aspect-ratio:3/2; }
.ea-masonry .is-wide{ aspect-ratio:2/1; }
.ea-masonry .is-tall{ aspect-ratio:3/4; }
/* Overlay/feature cards: the photo covers the ENTIRE card at any size, headline over it. */
.ea-card--overlay{ position:relative; overflow:hidden; }
.ea-card--overlay .ea-card__imglink{ position:absolute; inset:0; height:100%; }
.ea-card--overlay .ea-card__img{ width:100%; height:100%; object-fit:cover; aspect-ratio:auto; }
@media (max-width:767px){ .ea-masonry{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:429px){
  .ea-masonry{ grid-template-columns:1fr; }
  .ea-masonry .is-big,.ea-masonry .is-wide{ grid-column:span 1; }
}

/* ---------- CARD ---------- */
.ea-card{ position:relative; background:var(--ea-card); display:flex; flex-direction:column; }
.ea-card__imglink{ display:block; position:relative; }
.ea-card__img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--ea-border); }
.ea-card__label{ position:absolute; bottom:10px; left:10px; z-index:2; }
.ea-card--overlay .ea-card__label{ bottom:auto; top:10px; }
.ea-card__body{ padding:8px 10px 12px; }
.ea-card__title{ margin:0 0 6px; font-weight:700; font-size:18px; line-height:1.15; }
.ea-card__title a{ color:var(--ea-text-dark); }
.ea-card__title a:hover{ color:var(--ea-accent); }
.ea-card__excerpt{ margin:0 0 6px; font-size:14px; line-height:1.3; color:var(--ea-text-dark); }
.ea-card__meta{ font-size:12px; line-height:1; color:var(--ea-meta); }
.is-hero .ea-card__title{ font-size:30px; line-height:34px; }
.is-wide .ea-card__title{ font-size:21px; line-height:25px; }
/* indebuurt-style cards: image + headline only. Body text stays only on each section's lead (is-wide) card; grid cards drop the date too. */
.ea-card__excerpt{ display:none; }
.is-wide .ea-card__excerpt{ display:block; }
.ea-card__meta{ display:none; }

/* headline-over-image variant for hero */
.ea-card--overlay .ea-card__body{ position:absolute; left:0; right:0; bottom:0; padding:20px 10px 10px;
  background:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.8) 100%); }
.ea-card--overlay .ea-card__title a,.ea-card--overlay .ea-card__meta{ color:#fff; }
@media (max-width:429px){
  .ea-card__title{ font-size:16px; }
  .is-hero .ea-card__title{ font-size:22px; line-height:1.1; }
}

/* ---------- LABEL ---------- */
/* Red tag pill: hugs its text, all-caps, always fully inside the box. */
.ea-label{ display:inline-block; max-width:calc(100% - 20px); background:var(--ea-accent);
  color:#fff; font-weight:700; font-size:11px; line-height:1; letter-spacing:.3px;
  text-transform:uppercase; padding:5px 8px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; vertical-align:top; }
.ea-label span{ padding:0; color:#fff; }
.ea-label--green{ background:var(--ea-green); }

/* ---------- SIDEBAR / WIDGETS ---------- */
.ea-widget{ margin-bottom:20px; background:#fff; }
.ea-widget .ea-section__title{ width:100%; }
.ea-widget ul{ list-style:none; margin:0; padding:0; }
.ea-widget li{ border-top:1px solid var(--ea-divider); padding:10px 0; }
.ea-widget li:first-child{ border-top:0; }
.ea-widget a{ color:var(--ea-text-dark); font-weight:700; font-size:16px; line-height:1.2; }
.ea-widget a:hover{ color:var(--ea-accent); }
.ea-widget .ea-wmeta{ display:block; margin-top:4px; font-size:12px; font-weight:400; color:var(--ea-meta); }
.ea-widget--numbered ol{ list-style:none; margin:0; padding:0; }
.ea-widget--numbered li{ padding:10px 0; }

/* list-item card (used in Popular / related) */
.ea-listcard{ display:flex; gap:10px; align-items:flex-start; }
.ea-listcard__thumb{ width:115px; height:86px; flex:none; object-fit:cover; background:var(--ea-border); }
.ea-listcard__t{ font-weight:700; font-size:16px; line-height:1.1; color:var(--ea-text-dark); }
.ea-listcard__t:hover{ color:var(--ea-accent); }

/* ---------- ARCHIVE ---------- */
.ea-pagination{ margin:20px 0; display:flex; gap:6px; flex-wrap:wrap; }
.ea-pagination a,.ea-pagination span{ display:inline-block; padding:6px 12px; background:#fff;
  border:1px solid var(--ea-border); color:var(--ea-text-dark); font-weight:700; }
.ea-pagination .current{ background:var(--ea-accent); color:#fff; border-color:var(--ea-accent); }

/* ---------- SINGLE ARTICLE ---------- */
.ea-article{ max-width:746px; margin:0 auto; background:#fff; padding:20px; }
.ea-article__label{ margin-bottom:10px; }
.ea-article__title{ font-weight:700; font-size:40px; line-height:44px; color:var(--ea-text-dark); margin:0 0 15px; }
.ea-article__meta{ color:#000; font-size:16px; margin-bottom:20px; }
.ea-article__meta b{ color:var(--ea-text-dark); }
.ea-article__figure{ margin:0 0 20px; }
.ea-article__figure figcaption{ position:relative; padding:5px 0 5px 35px; color:var(--ea-meta);
  font-size:14px; line-height:20px; }
.ea-article__figure figcaption:before{ content:""; position:absolute; left:15px; top:6px; width:0; height:0;
  border-right:5px solid transparent; border-bottom:10px solid var(--ea-accent); border-left:5px solid transparent; }
.ea-article__body{ font-size:18px; line-height:27px; color:var(--ea-text); }
.ea-article__body p{ margin:0 0 25px; }
.ea-article__body h2{ font-size:24px; line-height:1.2; margin:30px 0 10px; }
.ea-article__body h3{ font-size:18px; line-height:26px; margin:24px 0 8px; }
.ea-article__body a{ color:var(--ea-accent); text-decoration:underline; }
.ea-article__body blockquote{ margin:20px 0; padding:0 0 0 40px; position:relative; }
.ea-article__body blockquote:before{ content:"\201C"; position:absolute; left:0; top:-10px;
  color:var(--ea-accent); font-weight:700; font-size:64px; line-height:1; }
.ea-article__body blockquote p{ color:var(--ea-text-dark); font-weight:700; font-size:28px; line-height:1.2; margin:0; }
.ea-article__body img{ margin:10px 0; }

/* ---------- NEWSLETTER ---------- */
.ea-newsletter{ max-width:746px; margin:0 auto 20px; padding:20px; border-bottom:1px solid var(--ea-divider); background:#fff; }
.ea-newsletter h3{ font-size:28px; margin-bottom:10px; }
.ea-newsletter form{ display:flex; gap:10px; flex-wrap:wrap; }
.ea-newsletter input[type=email]{ flex:1 1 220px; height:40px; padding:0 10px; border:1px solid var(--ea-meta); }
.ea-newsletter button{ height:40px; padding:0 18px; border:0; background:var(--ea-accent); color:#fff;
  font-weight:700; text-transform:uppercase; cursor:pointer; }

/* ---------- FOOTER ---------- */
.ea-footer{ background:var(--ea-bg); margin-top:30px; }
/* Plain red divider bar (2026-07-10, user: drop the quotemark+site-name text, slim to 50px) */
.ea-footer__bar{ min-height:50px; background:var(--ea-accent); }
/* 4-column footer (2026-07-10, modeled on the user's reference: brand+tagline | contact | KVK | map) */
.ea-footer__grid{ display:grid; grid-template-columns:1.6fr 1.2fr 0.9fr 1.1fr; gap:40px; padding:44px 10px 36px; }
.ea-footer__logo{ font-size:24px; font-weight:800; color:var(--ea-accent); letter-spacing:0.2px; margin-bottom:12px; }
.ea-footer__tagline{ color:var(--ea-text-dark); font-size:15px; line-height:1.6; max-width:34em; margin:0; }
.ea-footer__col h4{ font-size:18px; font-weight:700; color:var(--ea-text-dark); margin:0 0 14px; }
.ea-footer__contact{ list-style:none; margin:0; padding:0; }
.ea-footer__contact li{ display:flex; align-items:flex-start; gap:10px; padding:6px 0; color:var(--ea-text-dark); font-size:15px; line-height:1.5; }
.ea-footer__contact svg{ width:18px; height:18px; flex:0 0 18px; margin-top:2px; fill:var(--ea-accent); }
.ea-footer__company{ color:var(--ea-text-dark); font-size:15px; margin-bottom:10px; }
.ea-footer__kvklabel{ font-weight:700; color:var(--ea-text-dark); font-size:15px; margin-bottom:8px; }
.ea-footer__kvk{ display:inline-block; background:#f2f2f2; padding:8px 14px; font-size:15px; color:var(--ea-text-dark); }
.ea-footer__map iframe{ width:100%; height:150px; border:0; display:block; }
.ea-footer__maplink{ display:inline-block; margin-top:10px; color:var(--ea-accent); font-weight:700; font-size:14px; text-decoration:underline; }
.ea-footer__maplink:hover{ color:var(--ea-text-dark); }
.ea-footer__legal{ border-top:1px solid var(--ea-border); padding:16px 10px; color:var(--ea-meta-alt); font-size:12px; }
@media (max-width:905px){ .ea-footer__grid{ grid-template-columns:1fr 1fr; gap:28px; padding:32px 10px; } }
@media (max-width:600px){ .ea-footer__grid{ grid-template-columns:1fr; } .ea-footer__col h4{ font-size:16px; } }

/* ============================================================
   DIRECTORY PLUGIN INTEGRATION — "CSV Directory Listings" (cdl-*)
   The plugin renders its own templates (wrapped in this theme's
   header/footer) and injects its own inline CSS with hardcoded
   blue/orange/gold accents. These rules recolour it to the brand
   and flatten radii/shadows to match the news layout. !important
   is required because the plugin's styles are inlined in wp_head.
   ============================================================ */

/* Card address line (2026-07-10, user rule: no address -> don't show one). The plugin's card
   template used to print <p class="cdl-card-address"> unconditionally, even when _full_address was
   empty, so these two rules swept up the blank gap after the fact. FIXED AT THE ROOT 2026-08-22:
   the rebuilt card template guards the address with an if(), the same way the listing page always
   did, and the wrapping link is gone entirely. The :empty rule is kept as a belt for cached HTML
   still holding the old markup; the :has() rule went with the element it targeted. */
.cdl-card-address:empty{ display:none; }

/* Load More button (2026-07-10): the plugin leaves it in the default system button font and its own
   blue. Match the site — inherit Figtree and use the brand accent. */
#cdl-load-more{ font-family:inherit !important; background-color:var(--ea-accent) !important; }
#cdl-load-more:hover{ background-color:#c0001c !important; }

/* fonts already inherit Figtree from body */

/* hero */
.cdl-hero-section{ background-color:var(--ea-accent) !important; }
#cdl-search-button{ background-color:#292929 !important; border-radius:0 !important; }
.cdl-filters-hero{ border-radius:0 !important; box-shadow:none !important; }
.cdl-filters-hero #cdl-search-filter{ border-radius:0 !important; }

/* archive controls */
.cdl-listings-section-title{ color:var(--ea-text-dark) !important; }
#cdl-sort-filter{ border-radius:0 !important; }
/* ROUNDED, 2026-08-22 (owner brief). Square corners were a deliberate house style borrowed from the
   news layout; on the directory he wants the softer card look of the reference site, and the map
   sits inside that family. */
#cdl-archive-map,#cdl-single-map{ border-radius:12px !important; }

/* cards → brand-coloured, rounded (2026-08-22) */
/* CONTAINER WIDTHS LIVE IN ONE PLACE ONLY - at the foot of this file, next to the comment that
   explains them. The pair of rules that used to sit here (820px archive / 746px single) was
   overridden by that later pair anyway, which is exactly the two-implementations defect that keeps
   costing us: fixing one changed nothing because the other one won. Deleted 2026-08-22. */
.cdl-featured-image{ margin-left:auto !important; margin-right:auto !important; }
.cdl-featured-image img{ width:100% !important; max-height:480px !important; object-fit:cover !important; }
.cdl-card{ border:1px solid var(--ea-border) !important; border-radius:14px !important; box-shadow:none !important; }
/* The card photo is no longer a fixed-height banner across the top - it is the left-hand column of
   a horizontal row and has to fill that row's height. Its own radius is set in the plugin. */
.cdl-card-title a{ color:var(--ea-text-dark) !important; font-family:var(--ea-font) !important; }
.cdl-card-title a:hover{ color:var(--ea-accent) !important; }
/* "View Details" is a LINK now, not a red slab (owner brief 2026-08-22: a quiet link on the left of
   the footer row). Same words, no background. */
.cdl-card-button{ background:none !important; color:var(--ea-accent) !important; }
.cdl-card-button:hover{ background:none !important; transform:none !important; color:var(--ea-accent-hover) !important; }
/* The global a:hover (dark red) was inheriting onto plugin buttons -> red-on-red invisible text.
   Scope the white hover to BUTTONS ONLY — applying it to all .cdl-card links made the card TITLE turn
   white-on-white. Title links keep the accent hover (visible on white). */
.cdl-single-website-button:hover{ color:#fff !important; }
/* The Claim and Call/Email/Website controls are excluded too (2026-08-22): they are buttons with
   their own hover colours, and this blanket rule was repainting the white label on the blue Claim
   button brand-red on hover - the same red-on-red invisibility the comment above describes, one
   control along. Buttons keep their own hover; plain links keep the accent. */
.cdl-card-title a:hover,
.cdl-card a:not(.cdl-card-button):not(.ea-claimcta):not(.ea-act):hover{ color:var(--ea-accent) !important; }
/* Directory category SEO intro: text clipped to ~2 lines with a white fade; the Read more/Hide button
   sits STATICALLY below the clipped body so it can never overlap the text. Full text stays in the DOM. */
.ea-dirintro{ margin:0 0 18px; font-size:15px; line-height:1.55; color:#3a3a3a; }
.ea-dirintro__body{ position:relative; }
.ea-dirintro p{ margin:0 0 10px; }
.ea-dirintro a{ color:var(--ea-accent); text-decoration:underline; }
.ea-dirintro.is-collapsed .ea-dirintro__body{ max-height:3.2em; overflow:hidden; }
.ea-dirintro.is-collapsed .ea-dirintro__body::after{ content:''; position:absolute; left:0; right:0; bottom:0;
  height:1.6em; background:linear-gradient(rgba(255,255,255,0), #fff); pointer-events:none; }
.ea-dirintro__toggle{ display:block; margin-top:4px; background:none; border:none; padding:0;
  color:var(--ea-accent); font:inherit; font-weight:600; cursor:pointer; }
/* Primary-nav dropdown (About -> About / Privacy). The nav was flat until 2026-07-14; WP renders
   children as ul.sub-menu — show on hover/focus. */
.ea-nav__list li{ position:relative; }
.ea-nav__list .sub-menu{ display:none; position:absolute; top:100%; left:0; z-index:60; min-width:230px;
  background:#fff; border:1px solid #E5E5E5; box-shadow:0 6px 18px rgba(0,0,0,.08); padding:6px 0; margin:0; list-style:none; }
.ea-nav__list li:hover > .sub-menu, .ea-nav__list li:focus-within > .sub-menu{ display:block; }
.ea-nav__list .sub-menu li{ display:block; }
.ea-nav__list .sub-menu a{ display:block; padding:9px 16px; white-space:nowrap; color:#292929; }
.ea-nav__list .sub-menu a:hover{ background:var(--ea-accent); color:#fff; border-radius:0; }
.cdl-card-badge{ color:var(--ea-accent) !important; }
/* A FEATURED CARD IS A WHITE CARD (owner brief 2026-08-22). The 3px red outline on #FFF2EE was
   doing exactly what the oversized buttons used to do: shouting over the content. Every card now
   reads the same - white, one soft grey hairline, the existing 14px radius - and the two things
   that carry colour are the Readers' Choice seal (untouched) and the "View Details" link. This is
   the ONLY place the featured card's colours are set; the plugin's own .is-featured rule was
   stripped of its border/background the same day so there is no second implementation to fight. */
.cdl-card.is-featured{ border:1px solid var(--ea-border) !important; background-color:var(--ea-card) !important; }
/* Subtle lift on hover, identical for every card. The base .cdl-card rule above sets
   box-shadow:none !important, so the hover needs !important and the extra specificity to win. */
.cdl-card{ transition:box-shadow .2s ease; }
.cdl-card:hover{ box-shadow:0 4px 14px rgba(0,0,0,.08) !important; }
.cdl-card.is-featured:hover{ transform:none !important; box-shadow:0 4px 14px rgba(0,0,0,.08) !important; }

/* load more */
#cdl-load-more{ background-color:var(--ea-accent) !important; border-radius:0 !important; }
#cdl-load-more:hover{ background-color:var(--ea-accent-hover) !important; }

/* single listing */
.cdl-breadcrumb a{ color:var(--ea-accent) !important; }
.cdl-single-badge{ color:var(--ea-accent) !important; background-color:#FFF2EE !important; border:2px solid var(--ea-accent) !important; border-radius:8px !important; }
.cdl-featured-image{ border-radius:14px !important; }
/* .cdl-contact-info was the bordered Address/Website/Email/Phone/Hours box. The listing page no
   longer renders it (owner brief 2026-08-22: "a plain bordered box... everything the same weight");
   the same facts are clean label/value rows in the left column and a contact card on the right.
   Rule deleted with the element rather than left behind to style nothing. */
.cdl-contactcard{ border:1px solid var(--ea-border) !important; }

/* sidebar Most read / Most shared thumbnails */
.ea-widget--numbered .ea-swrap{ display:flex; gap:12px; align-items:flex-start; }
.ea-widget--numbered .ea-swrap:hover .ea-stitle{ color:var(--ea-accent); }
.ea-sthumb{ width:116px; height:65px; flex:none; object-fit:cover; background:var(--ea-border); }
.ea-stitle{ font-weight:700; font-size:15px; line-height:1.15; color:var(--ea-text-dark); }

/* ---------- WHAT'S ON (full-width page-whats-on.php) ---------- */
.ea-whatson{ padding-top:14px; padding-bottom:24px; }
.ea-whatson__body{ margin:0; }
.ea-whatson a,.ea-whatson .eawo-card,.ea-whatson .eawo-title{ text-decoration:none; }

/* Hide The Events Calendar "Subscribe to calendar" / Add-to-calendar (iCal/Google/Outlook) export button
   on single event pages and the events archive. (Newsletter signup will replace it later.) */
.tribe-events-c-subscribe-dropdown,
.tribe-events-c-subscribe-dropdown__container,
.tribe-events-c-subscribe-dropdown__wrapper,
.tribe-events-header__subscribe-wrapper{ display:none !important; }

/* Single event page: hide TEC's redundant "Details" meta box (date/time/category/tags/website already
   shown) and the prev/next event pagination. The site header nav + "« All Events" (back to What's On)
   remain for navigation. */
.single-tribe_events .tribe-events-meta-group,
.single-tribe_events .tribe-events-nav-pagination{ display:none !important; }

/* Single event page: also remove TEC's "« All Events" back link (a category nav bar is injected instead). */
.single-tribe_events .tribe-events-back{ display:none !important; }
/* Injected What's On category nav on single event pages. */
.eawo-eventnav{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; }
.eawo-eventnav.eawo-eventsubs{ margin:0 0 22px; }
.eawo-eventnav a{ white-space:nowrap; font-size:14px; font-weight:600; padding:8px 15px; border-radius:6px; text-decoration:none; border:1.5px solid var(--c,#111); color:var(--c,#111); background:#fff; transition:background .12s,color .12s; }
.eawo-eventnav.eawo-eventsubs a{ font-size:13px; padding:6px 12px; }
.eawo-eventnav a:hover{ background:var(--c,#111); color:var(--fg,#fff); }
.eawo-eventnav a.active{ background:var(--c,#111); color:var(--fg,#fff); }

/* Force Figtree on the single event page (TEC ships its own Helvetica/Arial stack that
   otherwise overrides the theme body font). */
.single-tribe_events, .single-tribe_events .tribe-common, .single-tribe_events .tribe-common *,
.single-tribe_events .tribe-events-single, .single-tribe_events .tribe-events-single *,
.single-tribe_events h1, .single-tribe_events h2, .single-tribe_events h3,
.single-tribe_events p, .single-tribe_events a, .single-tribe_events span, .single-tribe_events li{
  font-family:"Figtree",Arial,"Helvetica Neue",Helvetica,sans-serif !important;
}

/* What's On card: allow multiple subcategory tag chips to sit in a wrapping row. */
.eawo-tags{ display:flex; flex-wrap:wrap; gap:6px; }

/* What's On filter chips (top row): FILLED by default (colored bg, contrast text), and INVERSE
   (white bg, colored text) on hover + when active. Scoped via .ea-whatson so it beats the page's
   inline .eawo-chip rule. User request 2026-07-09. */
.ea-whatson .eawo-chip{ background:var(--c,#111); color:var(--fg,#fff); }
.ea-whatson .eawo-chip:hover,
.ea-whatson .eawo-chip.active{ background:#fff; color:var(--c,#111); }

/* ---------- DIRECTORY (2026-07-10): full-width hub + category pages ---------- */
.ea-dir{ padding:14px 10px 30px; }
.ea-dir__title{ font-size:30px; margin:6px 0 14px; }
/* DIRECTORY NAV - ONE NATIVE PULL-DOWN (owner 2026-08-22: "It still has all those little buttons
   instead of a normal pull-down menu."). The ten controls that used to sit here are gone; the
   directory nav is a single <select> with nine <optgroup>s, styled below as .ea-dirselect.
   It borrows its look from .eawo-when, the What's On "Any time" select (search this file for
   .eawo-when): same 18px, same pill, same 1px #E5E5E5 border. One dropdown style on the site.

   READ BEFORE DELETING THE .ea-dirnav BLOCK THAT FOLLOWS: those rules are NOT dead. The What's On
   nav (inc/ea-events.php) renders <nav class="ea-dirnav ea-evnav"> and takes ALL of its styling
   from them - the row, the All button, the <details> summaries, the menus, the mobile breakpoint.
   They were cloned from here on 2026-08-06 and never given their own copy, on purpose. The only
   rules that were directory-only were the two scoped to the plugin's containers (.cdl-filters-hero
   and .cdl-single-container), and those now point at .ea-dirselect. */
.ea-dirselect{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 14px; }
.ea-dirselect__form{ display:flex; gap:8px; align-items:center; margin:0; flex:0 1 auto; min-width:0; }
/* The label is for screen readers; the closed control already names the current category onscreen. */
.ea-dirselect__label{ 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; }
.ea-dirselect__control{ flex:0 1 auto; max-width:100%; min-width:0; font-family:inherit; font-size:18px;
  line-height:1.3; padding:9px 14px; border:1px solid #E5E5E5; border-radius:999px; background:#fff;
  color:#111; cursor:pointer; }
/* The Go button is the no-JS path. Quiet at rest so it does not read as a second navigation. */
.ea-dirselect__go{ font-family:inherit; font-size:18px; line-height:1.3; padding:9px 18px;
  border:1px solid #E5E5E5; border-radius:999px; background:#fff; color:#111; cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease; }
.ea-dirselect__go:hover{ background:#111; border-color:#111; color:#fff; }
@media (prefers-reduced-motion:reduce){ .ea-dirselect__go{ transition:none; } }
@media (max-width:680px){
  .ea-dirselect__form{ flex:1 1 100%; }
  .ea-dirselect__control{ flex:1 1 auto; }
}

/* ALL CATEGORIES, at the foot of the hub only (2026-08-22). <option> is not a link, so the 86
   crawlable category links live here now. Deliberately quiet: an index, not a feature. */
.ea-dirindex{ margin:34px 0 10px; padding-top:24px; border-top:1px solid var(--ea-border,#e2e2e2); }
.ea-dirindex__title{ font-size:20px; line-height:1.25; margin:0 0 16px; color:#111; }
.ea-dirindex__groups{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px 28px; }
@media (max-width:899px){ .ea-dirindex__groups{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:599px){ .ea-dirindex__groups{ grid-template-columns:1fr; } }
.ea-dirindex__group h3{ font-size:16px; line-height:1.3; margin:0 0 7px; color:#111; }
.ea-dirindex__group ul{ list-style:none; margin:0; padding:0; }
.ea-dirindex__group li{ margin:0 0 4px; }
.ea-dirindex__group a{ font-size:15px; line-height:1.45; color:#555; text-decoration:none; }
.ea-dirindex__group a:hover{ color:var(--ea-red,#248641); text-decoration:underline; }

/* SHARED WITH THE WHAT'S ON NAV FROM HERE DOWN - see the note above before removing anything. */
.ea-dirnav{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 14px; position:relative; }
/* A BLACK OUTLINE MEANS SELECTED, SO NOTHING UNSELECTED MAY WEAR ONE (owner, 2026-08-21, from a
   phone screenshot: "The buttons for cinema, family and kids, and nightlife all have a black
   outline, suggesting that they have been selected when they have not been selected. They are
   always like that.").
   The cause was one class doing two jobs. Categories WITH sub-genres render as <details> and rest
   at the grey border below, turning black only via .is-active - so black reads as selected, and it
   is. Categories with NO sub-genres (Cinema, Nightlife) are plain links and were given
   .ea-dirnav__all, the reset button's class, which was hard-coded to a #111 border. Three controls
   therefore sat permanently in the visual state that means "you have chosen this", including the
   All button itself, which is the one thing that is true only when nothing is chosen.
   Now every resting control in this row carries the SAME grey border, and #111 is reserved for
   .is-active in both halves of the nav. This block is shared with the business directory nav on
   purpose ("two navs that look and behave identically is the point"), so the directory's All
   button is corrected by the same three lines rather than by a second copy of them. */
.ea-dirnav__all{ font-size:14px; font-weight:600; padding:8px 15px; border-radius:6px;
  border:1.5px solid var(--ea-border,#d8d8d8); background:#fff; color:#111; text-decoration:none; }
.ea-dirnav__all.is-active{ background:#111; border-color:#111; color:#fff; }
.ea-dirnav__menu{ position:relative; }
.ea-dirnav__menu>summary{ list-style:none; cursor:pointer; white-space:nowrap; font-size:14px; font-weight:600;
  padding:8px 30px 8px 15px; border-radius:6px; border:1.5px solid var(--ea-border,#d8d8d8); background:#fff; color:#111;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease; }
.ea-dirnav__menu>summary::-webkit-details-marker{ display:none; }
.ea-dirnav__menu>summary::after{ content:""; position:absolute; right:12px; top:50%; width:6px; height:6px;
  border-right:2px solid #666; border-bottom:2px solid #666; transform:translateY(-70%) rotate(45deg);
  transition:transform .18s ease,border-color .16s ease; }
/* Hover/open: invert to brand red, lift slightly (owner 2026-08-05). The arrow inverts with it,
   otherwise a grey chevron sits on red. */
.ea-dirnav__menu>summary:hover,.ea-dirnav__menu[open]>summary{
  background:var(--ea-red,#248641); border-color:var(--ea-red,#248641); color:#fff;
  transform:translateY(-1px); box-shadow:0 3px 10px rgba(227,27,35,.25); }
.ea-dirnav__menu>summary:hover::after,.ea-dirnav__menu[open]>summary::after{ border-color:#fff; }
.ea-dirnav__menu.is-active>summary{ border-color:#111; }
.ea-dirnav__menu[open]>summary::after{ transform:translateY(-30%) rotate(-135deg); }
.ea-dirnav__all{ transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease; }
.ea-dirnav__all:hover{ background:var(--ea-red,#248641); border-color:var(--ea-red,#248641); color:#fff;
  transform:translateY(-1px); box-shadow:0 3px 10px rgba(227,27,35,.25); }
@media (prefers-reduced-motion:reduce){
  .ea-dirnav__menu>summary,.ea-dirnav__all,.ea-dirnav__menu>summary::after{ transition:none; }
  .ea-dirnav__menu>summary:hover,.ea-dirnav__menu[open]>summary,.ea-dirnav__all:hover{ transform:none; }
}
.ea-dirnav__menu>ul{ position:absolute; z-index:40; top:calc(100% + 4px); left:0; min-width:220px; max-height:60vh;
  overflow-y:auto; margin:0; padding:6px 0; list-style:none; background:#fff; border:1px solid var(--ea-border,#d8d8d8);
  border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.ea-dirnav__menu>ul a{ display:block; padding:9px 16px; font-size:14px; color:#111; text-decoration:none; white-space:nowrap; }
.ea-dirnav__menu>ul a:hover{ background:#f4f4f4; }
.ea-dirnav__menu>ul a.is-active{ font-weight:700; background:#f4f4f4; }
@media (max-width:680px){
  .ea-dirnav{ gap:6px; }
  .ea-dirnav__menu{ flex:1 1 calc(50% - 6px); }
  .ea-dirnav__menu>summary{ width:100%; font-size:13px; padding:9px 26px 9px 12px; }
  .ea-dirnav__menu>ul{ min-width:100%; }
}
/* Plain 3-across grid (2 tablet, 1 phone) — deliberately no masonry */
.ea-dirgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:16px; }
@media (max-width:899px){ .ea-dirgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:599px){ .ea-dirgrid{ grid-template-columns:1fr; } }
.ea-dircard{ background:#fff; border:1px solid var(--ea-border); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
.ea-dircard__img{ width:100%; height:170px; object-fit:cover; display:block; background:var(--ea-border); }
.ea-dircard__img--empty{ display:block; height:170px; }
.ea-dircard__body{ padding:12px 14px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.ea-dircard__title{ font-size:17px; line-height:1.25; margin:0; }
.ea-dircard__title a{ color:var(--ea-text-dark); text-decoration:none; }
.ea-dircard__title a:hover{ color:var(--ea-accent); }
.ea-dircard__excerpt{ font-size:14px; line-height:1.45; color:#444; margin:0; }
.ea-dircard__btn{ margin-top:auto; align-self:flex-start; font-size:13px; font-weight:700; padding:8px 14px; border-radius:6px; background:var(--ea-accent); color:#fff; text-decoration:none; }
.ea-dircard__btn:hover{ opacity:.88; color:#fff; }
/* Directory card: Google rating (green, links to the real Google reviews page) + address line */
.ea-dircard__ratingline a{ text-decoration:none; }
.ea-dircard__rating{ color:#00A651; font-weight:700; font-size:14px; letter-spacing:1px; }
.ea-dircard__reviews{ color:#666; font-size:13px; font-weight:600; }
.ea-dircard__addr{ color:#555; font-size:13px; line-height:1.4; }

/* ---- Directory look polish (2026-07-12) ---- */
/* Hero title overlap fix: body sets a FIXED line-height:24px which the big plugin hero title
   inherits, so its wrapped lines sit 24px apart and overlap. Restore a proportional line-height
   (and trim the size a touch so it wraps less). */
/* Category hero: the full-width red bar and the oversized title serve no purpose (the nav shows the
   category), so strip them — un-bleed the section, drop the red background and title, and keep only a
   COMPACT right-aligned search box (the plugin's live #cdl-search-filter, left functional). */
.cdl-hero-section{ background:none !important; width:auto !important; left:auto !important; right:auto !important; margin:0 auto !important; padding:12px 10px 0 !important; max-width:var(--ea-container); box-sizing:border-box; }
.cdl-hero-title, .cdl-hero-subtitle{ display:none !important; }
.cdl-hero-content{ max-width:none !important; }
.cdl-filters-hero{ max-width:340px; margin:0 0 0 auto !important; }
/* 18px FLOOR, no exemption for inputs (owner order 08-19, and the same fix the What's On When
   dropdown got). These were 14px and 13px - the box a reader types a business name into, and it
   was the smallest text on the directory. The row is given the height to carry it rather than the
   text being shrunk to fit the row. */
.cdl-filters-hero #cdl-search-filter{ padding:9px 12px !important; font-size:18px !important; }
#cdl-search-button{ padding:0 14px !important; }
#cdl-sort-filter{ font-size:18px !important; }
/* Search relocated (JS) into the nav row, to the right of the category pull-down. It grows to fill
   the remaining width; on narrow screens it wraps to its own full-width line at the end of the row.
   2026-08-22: re-pointed from .ea-dirnav to .ea-dirselect with the nav itself. These four rules are
   the only .ea-dirnav ones that were ever directory-only - everything else in that block is the
   What's On nav's styling too. */
.ea-dirselect .cdl-filters-hero{ flex:1 1 200px; min-width:170px; max-width:none !important; margin:0 !important; border:1px solid var(--ea-border); }
.ea-dirselect .cdl-filters-hero #cdl-search-filter{ padding:0 12px !important; font-size:18px !important; height:40px; }
.ea-dirselect .cdl-filters-hero #cdl-search-button{ padding:0 13px !important; }
@media (max-width:680px){ .ea-dirselect .cdl-filters-hero{ flex-basis:100%; min-width:0; order:99; margin-top:6px !important; } }
/* The plugin's featured-listing highlight is LIVE again (owner 2026-08-03): it now carries the
   "Essentially Amsterdam Pick 2026" badge — a seal on the card image, brand-red border, tinted
   fill and a hover lift, all styled in the plugin itself. The 2026-07 rules that hid the badge
   and flattened .is-featured back to a plain card were deleted here; do not reinstate them
   without checking with him, because they silently kill the whole badge programme. */
/* (The chip-nav sizing rules that lived here were removed 2026-08-05 with the chips themselves —
   the dropdown nav is styled once, above, and needs no per-breakpoint chip tuning.) */

/* ---------- SINGLE EVENT PAGE — TEXT ONLY (owner order 2026-08-12) ----------
   NO IMAGE ON AN EVENT CARD. The 42/58 hero that put a photograph beside the words is gone, and
   so is the grey gradient box that stood in when there was no photograph. Information carries the
   page instead: an uppercase red kicker (date, time, venue), a large title, the description, and
   a facts panel (When / Where / Price / Type). One panel, max 820px, brand-red rule down the left
   edge, quiet off-white surface, generous padding.
   TYPE SCALE IS THE BLOG'S (owner 2026-08-06: "the font sizes should be whatever font sizes you
   use for the blog posts"): body 16px/24px. The title is bigger here than in the two-column days
   because it no longer shares the row with a picture.
   Markup: tribe-events/single-event.php (our own TEC template, not an override of TEC's stack).
   NO GREY TEXT ANYWHERE — standing owner rule. Ink is #292929, the accent is brand red. */
.ea-ev{ max-width:820px; margin:0 auto; padding:0 0 48px; color:#292929; }
/* 18px IS THE FLOOR (owner order, restated 2026-08-19 and applied across this card 08-20). Nothing
   on an event page is allowed below it, labels and kickers included - those were exactly the lines
   he could not read. Where something needs to be quieter it gets a lighter weight or more space,
   never a smaller size. */
.ea-ev-crumb{ font-size:18px; font-weight:600; letter-spacing:.02em; margin:8px 0 20px; }
.ea-ev-crumb a{ color:#292929; text-decoration:none; }
.ea-ev-crumb a:hover{ color:var(--ea-red,#248641); }

/* WARM IVORY PAPER (owner order 2026-08-20, replacing the 08-16 gradient glow). The panel was a
   near-white #FAF9F7 carrying three pale radial glows, and it read on screen as plain white. The
   base is now #FCFAEC: a lightly tinted paper, clearly warmer than white, still 18:1 against the
   #292929 ink so nothing loses contrast. It is ivory, not yellow.
   The tonal variation survives but is rebuilt in the same warm family instead of blush and cream:
   one slightly deeper ivory pooling at the top right (behind the genre motif, which gives the
   drawing something to sit in) and one lighter wash at the lower left. Both are within a couple of
   steps of the base, so the panel reads as one sheet of paper with a fold of light across it.
   Border is a warm grey rather than a neutral one, and the shadow is a soft double lift so the card
   sits off the page without looking glossy. This is THE single-event hero panel; .eawo-card above
   is a different template (the /whats-on/ grid card). */
.ea-ev-hero{
  background:
    radial-gradient(ellipse 85% 65% at 100% 0%, rgba(246,238,209,.75), transparent 64%),
    radial-gradient(ellipse 75% 60% at 0% 100%, rgba(255,254,248,.85), transparent 62%),
    #FCFAEC;
  border:1px solid #E6E0CE;
  border-left:5px solid var(--ea-red,#248641); border-radius:16px;
  box-shadow:0 1px 2px rgba(66,54,28,.05), 0 8px 22px -8px rgba(66,54,28,.10);
  padding:34px 40px 36px; margin:0 0 40px;
  /* Both of these belong to the genre motif below: the panel is the positioning
     context, and it is what CROPS the drawing against its top right corner. */
  position:relative; overflow:hidden; }

/* THE GENRE MOTIF IS DEAD (owner order 2026-08-20: "ensure that they are gone once and for good").
   The line-drawing watermark iterated all morning ("meaningless arc of a circle") and was killed
   at 11:05; a stale-mirror scp then clobbered that kill the same afternoon and the drawings came
   back, which is why the fix now lives in TWO places: the <svg> emission is DELETED from
   tribe-events/single-event.php (the drawing was render-time only, never stored on posts), and
   this rule stays as belt and braces so any cached page still carrying the old markup draws
   nothing. Do not reintroduce the motif styling here. */
.ea-ev-motif{ display:none !important; }
/* Everything the reader reads sits above where the drawing used to be (kept for stacking sanity). */
.ea-ev-hero > *:not(.ea-ev-motif){ position:relative; z-index:1; }

/* The kicker is the only uppercase line on the page: small, wide-tracked, red. It says WHEN and
   WHERE before the title says WHAT, which is the order a reader scanning listings wants. */
.ea-ev-when{ font-size:18px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  line-height:1.45; color:var(--ea-red,#248641); margin:0 0 14px; }
/* A past event says so. Amber rather than red: this is information, not an error, and the page is
   still perfectly good reading. 18px like everything else the owner reads. */
.ea-ev-past{ background:#fff6e0; border:1px solid #e6c766; border-radius:6px;
             padding:12px 15px; margin:0 0 18px; font-size:18px; line-height:1.45; color:#111; }
.ea-ev-past a{ color:#0b52a1; font-weight:700; }

.ea-ev-title{ font-size:44px; line-height:1.08; font-weight:700; color:#292929; margin:0 0 18px; }
/* The hero summary is usually the ONLY prose on an event page, so it carries the page the way a
   blog post's opening paragraph does inside a column of many. At the blog's 16px it read as an
   orphan line under a 40px title (owner 2026-08-06, "much, much smaller"). 18/28 is the lead
   paragraph size; the body below, when there is one, stays at the blog's 16/24. */
.ea-ev-sum{ font-size:18px; line-height:28px; color:#292929; margin:0 0 26px; }
/* Facts panel: the substance that used to sit in the photograph's half of the hero. Auto-fit so
   an event carrying one fact does not leave three empty columns. */
.ea-ev-facts{ list-style:none !important; margin:0 0 28px; padding:24px 0 0;
  border-top:1px solid #E6E0CE;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:22px 30px; }
.ea-ev-facts li{ margin:0; padding:0; list-style:none !important; }
.ea-ev-facts li::marker{ content:""; }
/* The label was 11px. It is 18px now and stays subordinate to its value by WEIGHT and tracking
   rather than by size, which is the only lever the 18px floor leaves. Full-strength ink, never
   faded to grey: that is a separate standing rule and it wins over the wish for a quiet label. */
.ea-ev-facts__k{ display:block; font-size:18px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:#292929; margin:0 0 4px; }
.ea-ev-facts__v{ display:block; font-size:18px; line-height:26px; font-weight:700; color:#292929; }
.ea-ev-cta{ margin:0; }
.ea-ev-cta a{ display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:0 28px;
  background:var(--ea-red,#248641); color:#fff !important; text-decoration:none !important;
  font-size:18px; font-weight:700; border-radius:10px;
  transition:transform .15s ease, box-shadow .15s ease; }
.ea-ev-cta a:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(227,27,35,.32); }
@media (prefers-reduced-motion:reduce){ .ea-ev-cta a:hover{ transform:none; } }

/* ADD TO CALENDAR (2026-08-22). Second action on the row, so it is outlined rather than filled -
   "Details" stays the one red button on the page. Same 52px target and same 18px text: this is the
   quieter of two actions, and quieter is a lighter weight and an outline, never smaller type. */
.ea-ev-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.ea-ev-cta a.ea-ev-cta__cal{ background:transparent; color:var(--ea-ink,#292929) !important;
  border:2px solid var(--ea-ink,#292929); font-weight:600; padding:0 24px; }
.ea-ev-cta a.ea-ev-cta__cal:hover{ background:var(--ea-ink,#292929); color:#fff !important;
  box-shadow:0 6px 18px rgba(41,41,41,.22); }

/* .ea-ev-media / .ea-ev-media__none were removed with the picture itself (2026-08-12). Any stale
   markup a cached page still carries is hidden rather than left to draw an empty grey box. */
.ea-ev-media, .ea-ev-media__none{ display:none !important; }

.ea-ev-body{ max-width:746px; font-size:18px; line-height:28px; color:#292929; }
.ea-ev-body p{ margin:0 0 20px; }
.ea-ev-body h2{ font-size:26px; line-height:32px; margin:30px 0 12px; color:#292929; }

/* TEC furniture our template does not use, in case a plugin update prints it anyway. */
.tribe-events-back, .tribe-events-nav-pagination, #tribe-events-footer{ display:none !important; }

@media (max-width:860px){
  .ea-ev-hero{ padding:26px 22px 28px; margin-bottom:30px; border-radius:14px; }
  .ea-ev-title{ font-size:32px; line-height:1.12; }
  .ea-ev-facts{ grid-template-columns:1fr; gap:16px; padding-top:20px; margin-bottom:24px; }
}

/* "More at <venue>" / "More <genre>" rails. The owner's complaint, verbatim: "very, very tiny,
   unreadable fonts... some of the font is gray... they are colorless." So: 16px titles, a red
   uppercase date line, real cards with a coloured edge on hover, nothing under 13px, no grey. */
.ea-evmore{ max-width:1180px; margin:44px auto 0; padding-top:28px;
  border-top:1px solid var(--ea-border,#e2e2e2); }
.ea-evmore h2{ font-size:24px; font-weight:700; color:#292929; margin:0 0 18px; }
.ea-evmore ul{ list-style:none; margin:0 0 30px; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.ea-evmore li{ margin:0; }
/* Same paper as the hero panel above it (2026-08-20). A white rail card under an ivory hero made
   the hero look like a mistake rather than a choice; one surface colour, one warm border, and the
   page reads as a single system. 18px floor applies here too. */
.ea-evmore a{ display:block; height:100%; padding:16px 18px; background:#FCFAEC;
  border:1px solid #E6E0CE; border-left:4px solid var(--ea-red,#248641);
  border-radius:12px; text-decoration:none; color:#292929; font-size:18px; font-weight:600;
  line-height:1.4; transition:box-shadow .15s ease, transform .15s ease; }
.ea-evmore a:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(66,54,28,.12); }
.ea-evmore .ea-evmore__when{ display:block; font-size:18px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ea-red,#248641); margin-top:8px; }
@media (prefers-reduced-motion:reduce){ .ea-evmore a:hover{ transform:none; } }

/* What's On nav. It carries .ea-dirnav too, so it inherits the directory's dropdown styling in full
   — one set of menu rules for both navs, on purpose. Only the spacing around it differs. */
.ea-evnav{ margin:0 0 26px; }
/* The coloured chip row is replaced by the dropdowns above (owner 2026-08-06: "lose all the candy
   colors"). Hidden rather than removed from the JS so the grid's internal state stays untouched. */
#eawo-chips{ display:none !important; }

/* ---------- WHAT'S ON: THE WEEK GRID (owner order 2026-09-05) ----------
   HIS COMPLAINT, IN HIS WORDS: "still ugly floating cards". What was wrong, specifically, and what
   each rule below does about it:
     - the cards floated. Every one ended where its own text ended (align-items:start), so a row
       was a ragged line of different-height blocks with holes under the short ones. Cards now
       STRETCH to a common height per row and the genre pill is pushed to the foot with margin-top:
       auto, so the bottoms line up and the grid reads as a grid.
     - the week did not read as a week. The day heading was one 20px line. It is now a real
       heading: the weekday large, the date beside it, a rule under it, and real air above.
     - there were no pictures. There are now, but ONLY where the picture is genuinely of that
       event - see imageUrl() in eawo-loader.js. The 08-12 removal was about WRONG pictures
       (a generic stand-in on the majority of cards, which is how a photograph of something else
       reached a reader), and no stand-in comes back here: no placeholder, no grey gradient.
     - the category colour was invisible. The loader's inline pill colours were overridden to a
       neutral pill, so the palette at the top of eawo-loader.js showed nowhere on a card. The
       colour is now the card's LEFT EDGE and a dot beside the genre label - an accent, which is
       what he asked for, not a floating tag.
   Markup: assets/js/eawo-loader.js card() and dayHeading() — styles and markup change together,
   at the source. Prefixed with #eawo-grid: the /whats-on/ page embeds its own card styles in a
   content <style> block which outranks this sheet on equal specificity, and the id prefix wins
   without a specificity war. NO EXTERNAL FONT OR SHEET IS INTRODUCED - the page loads none. */

/* MOBILE FIRST. One column is the default and needs no media query; wider screens opt in. The
   minmax floor is 300px so a card never gets too narrow to hold a venue name on one line. */
#eawo-grid, .eawo-grid{ display:grid !important;
  grid-template-columns:1fr !important;
  gap:20px !important; align-items:stretch !important; }
@media (min-width:640px){ #eawo-grid, .eawo-grid{
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important; gap:24px !important; } }

/* THE DAY HEADING. It spans the whole grid, and the space above it is deliberately large: that
   gap is what separates one day from the next. :first-child loses the leading gap so the first
   day does not start halfway down the screen. */
#eawo-grid .eawo-day{ grid-column:1/-1; width:100%;
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px;
  margin:44px 0 4px; padding:0 0 10px; border-bottom:2px solid #111; }
#eawo-grid .eawo-day:first-child{ margin-top:6px; }
#eawo-grid .eawo-day-name{ font-size:30px; line-height:1.1; font-weight:800; color:#111;
  letter-spacing:-.01em; }
#eawo-grid .eawo-day-date{ font-size:20px; line-height:1.2; font-weight:600; color:#3A3A3A; }
@media (max-width:639px){ #eawo-grid .eawo-day{ margin:34px 0 2px; }
  #eawo-grid .eawo-day-name{ font-size:26px; } #eawo-grid .eawo-day-date{ font-size:18px; } }

/* IVORY PAPER (owner order 2026-08-20) is kept: same flat #FCFAEC surface, same warm border, same
   12px radius and soft double shadow as the single event pages. One surface language across
   /whats-on/ and the event pages. What changed is the left accent, which was always brand red and
   is now the event's own category colour (--cc, handed over by the loader from the same palette
   the chips use), and the height, which is now shared across a row. */
#eawo-grid .eawo-card{
  background:#FCFAEC !important;
  border:1px solid #E6E0CE !important;
  border-left:5px solid var(--cc,var(--ea-red,#248641)) !important;
  border-radius:12px !important; overflow:hidden;
  box-shadow:0 1px 2px rgba(66,54,28,.05), 0 8px 22px -8px rgba(66,54,28,.10) !important;
  display:flex !important; flex-direction:column !important; height:100% !important;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
#eawo-grid .eawo-card:hover{ transform:translateY(-2px) !important;
  box-shadow:0 10px 24px rgba(66,54,28,.14) !important; }
@media (prefers-reduced-motion:reduce){ #eawo-grid .eawo-card:hover{ transform:none !important; } }

/* THE PICTURE. A fixed 16:9 band so every card that has one contributes the same height, and the
   row still lines up when its neighbours have none. object-fit:cover, because a squashed
   photograph is worse than a cropped one. */
#eawo-grid .eawo-media{ width:100%; aspect-ratio:16/9; overflow:hidden; background:#EFEADA;
  border-bottom:1px solid #E6E0CE; }
#eawo-grid .eawo-media img{ width:100%; height:100%; object-fit:cover; display:block; }
@supports not (aspect-ratio:16/9){ #eawo-grid .eawo-media{ height:180px; } }

/* flex:1 makes the body take the slack so cards in a row finish level. */
#eawo-grid .eawo-cbody{ padding:20px 22px 20px; display:flex; flex-direction:column; gap:0;
  position:relative; flex:1 1 auto; }

/* THE TIME LEADS. Under a day heading the card no longer repeats the weekday, so what sits at the
   top of the card is the hour - the thing somebody scanning a day is looking for. Brand red,
   semibold, never uppercased: it can carry a sentence on an all-day event and shouting that read
   badly. .eawo-note is the all-day wording and is NEVER grey (standing owner rule). */
#eawo-grid .eawo-date{ order:0; font-size:18px; font-weight:700; text-transform:none;
  letter-spacing:.01em; line-height:1.45; color:var(--ea-red,#248641); margin:0 0 8px; }
#eawo-grid .eawo-time{ font-size:20px; font-weight:800; letter-spacing:0; }
#eawo-grid .eawo-note{ font-weight:500; color:#292929; font-size:17px; }   /* never grey */
#eawo-grid .eawo-title{ font-size:22px; font-weight:700; line-height:1.28; color:#111; margin:0 0 8px; }
/* The venue is a fact a reader decides on, not a caption. Dark, 18px, and never grey. */
#eawo-grid .eawo-venue{ font-size:18px; line-height:1.4; color:#292929 !important; font-weight:500; }

/* THE GENRE LABEL closes the card, under a hairline rule. It is NOT pushed to the very bottom with
   margin-top:auto: cards in a row now share a height, and pinning the label to the floor of the
   tallest one opened a visible gulf between the venue and the rule under a short card - the same
   "floating" look, moved from the outside of the card to the inside. It sits with its content and
   the leftover paper simply stays blank. The category colour appears as a small dot in front of
   the label: the accent, not a block of colour floating over the card. */
#eawo-grid .eawo-tags{ position:static; display:flex; flex-wrap:wrap; gap:8px;
  margin:16px 0 0 !important; padding-top:14px; border-top:1px solid #EBE4D2; }
#eawo-grid .eawo-tag{ background:#F4F1E6 !important; color:#292929 !important; font-size:16px;
  font-weight:700; letter-spacing:0; text-transform:none; padding:6px 14px 6px 12px;
  border-radius:999px; display:inline-flex; align-items:center; gap:8px; line-height:1.3; }
#eawo-grid .eawo-tag::before{ content:""; width:9px; height:9px; border-radius:50%;
  background:var(--cc,var(--ea-red,#248641)); flex:0 0 auto; }
#eawo-grid .eawo-cbody > .eawo-tag{ position:static; align-self:flex-start; margin:16px 0 0; }

/* 44px TAP TARGET on the one thing inside the card that is its own control. The pill sits inside
   the card's <a>, so it must be comfortably hittable with a thumb without hitting the card.
   inline-BLOCK, not inline-flex: a flex container drops the leading whitespace of its text
   children, and the pill's label is "Add" + " to calendar" in two spans - it rendered "Addto
   calendar" on the phone. Height comes from padding instead. */
#eawo-grid .eawo-cal{ display:inline-block; padding:9px 4px; font-size:18px; line-height:1.45; }
/* The status line under the controls was 15px #666 in the page's own inline style block. */
.eawo .eawo-status{ font-size:18px !important; color:#292929 !important; }
/* "Show more" is a real button, not a link pretending to be one. */
.eawo .eawo-more button{ font-size:18px !important; min-height:48px !important;
  padding:12px 32px !important; }

/* ---------- SINGLE EVENT PAGE, CALMED (same owner spec) ----------
   Title down from the theme's ~60px; the facts strip becomes ONE quiet line — no WHEN/WHERE/TYPE
   labels, no box, no bullets; description quieter than the title; compact button. */
.single-tribe_events h1{ font-size:clamp(32px, 4.5vw, 46px); line-height:1.15; }
.single-tribe_events .ea-evfacts{ background:transparent; border:0; padding:0; margin:0 0 18px;
  display:flex; flex-wrap:wrap; gap:6px 0; grid-template-columns:none; }
/* Legacy furniture: our template strips it, but a cached or plugin-rendered page can still print
   it, and the 18px floor has no exceptions. Ink, never #333/#999 grey. */
.single-tribe_events .ea-evfacts li{ font-size:18px; color:#292929; list-style:none !important; }
.single-tribe_events .ea-evfacts li::marker{ content:""; }
.single-tribe_events .ea-evfacts li + li::before{ content:"·"; margin:0 10px; color:#292929; }
.single-tribe_events .ea-evfacts strong{ display:none; }   /* the labels ARE the noise */
.ea-evfacts{ list-style:none !important; }
.ea-evfacts li::marker{ content:""; }
.single-tribe_events .tribe-events-single-event-description p{ font-size:18px; line-height:1.55; }
.ea-evsource a{ font-size:18px; padding:12px 22px; }
/* SINGLE EVENT PAGE, one type scale (owner 2026-08-05: "jumbled... all different text sizes").
   The facts strip is the only place the date/time lives — TEC's own small schedule line above the
   image duplicated it and is hidden. The image spans the text column instead of floating small. */
.single-tribe_events .tribe-events-schedule,
.single-tribe_events .tribe-events-cal-links{ display:none; }
/* TEXT ONLY (2026-08-12): if a plugin update ever prints TEC's own event image again, it does not
   render. Our template no longer outputs one and the owner's order is no image on an event card. */
.single-tribe_events .tribe-events-event-image,
.tribe-events-single .tribe-events-event-image{ display:none !important; }
.single-tribe_events .tribe-events-single-event-description p,
.single-tribe_events .tribe-events-single-event-description li{ font-size:18px; line-height:1.6; }
.single-tribe_events h1{ margin-bottom:18px; }

/* AWARD TEXT LINE REMOVED (owner 2026-08-05): "Essentially Amsterdam Reader's Choice 2026" printed
   as a red bar under the title on cards AND single listings, saying exactly what the seal on the
   image already says, and eating a lot of vertical space. The SEAL stays — it is the badge.
   Done here rather than in the plugin on purpose: the plugin is not in git and is edited over SSH,
   so a rule in the theme is reversible in one line and survives a plugin restore. */
.cdl-card-badge,.cdl-single-badge{ display:none !important; }

/* Per-category SEO guide, rendered under the listings (owner 2026-08-05). Deliberately quiet:
   it is for the reader who scrolled past every listing, and for search engines — not a wall that
   competes with the cards above it. */
.ea-dirguide{ max-width:820px; margin:34px auto 10px; padding-top:26px; border-top:1px solid var(--ea-border,#e2e2e2); }
/* Type matches the long-article body exactly (owner 2026-08-05) — same 18px/27px, same heading
   sizes. A reference section set smaller than the site's own articles reads as an afterthought. */
.ea-dirguide{ font-size:18px; line-height:27px; color:var(--ea-text); }
.ea-dirguide h2{ font-size:24px; line-height:1.2; margin:30px 0 10px; }
.ea-dirguide h2:first-child{ margin-top:0; }
.ea-dirguide h3{ font-size:18px; line-height:26px; margin:24px 0 8px; }
.ea-dirguide p{ font-size:18px; line-height:27px; margin:0 0 25px; color:var(--ea-text); }
.ea-dirguide ul,.ea-dirguide ol{ font-size:18px; line-height:27px; margin:0 0 25px 22px; }
.ea-dirguide li{ margin-bottom:8px; }
.ea-dirguide a{ color:var(--ea-red,#248641); }

/* THE SEAL WAS BEING CLIPPED (owner 2026-08-05, seen on the cinema listings): .cdl-featured-image
   is overflow:hidden with a rounded corner, and the fixed 150px seal overflowed the box whenever
   the photo rendered short (object-fit:contain letterboxes it). Sizing the seal RELATIVE to its
   container means it can never exceed the box, at any image shape or screen width. */
.cdl-featured-image .ea-pick-seal--single{
  width:clamp(84px,22%,150px) !important; height:auto !important; aspect-ratio:1/1;
  max-width:calc(100% - 28px) !important; max-height:calc(100% - 28px) !important; }
.cdl-card .ea-pick-seal{
  width:clamp(72px,34%,108px) !important; height:auto !important; aspect-ratio:1/1;
  max-width:calc(100% - 20px) !important; max-height:calc(100% - 20px) !important; }
/* Map Hide/Show toggle button (JS-injected before #cdl-archive-map). */
.ea-maptoggle{ display:inline-flex; align-items:center; gap:7px; margin:0 0 14px; padding:8px 15px; font:600 13px/1 var(--ea-font); border:1.5px solid #111; background:#111; color:#fff; border-radius:6px; cursor:pointer; }
.ea-maptoggle:hover{ background:#fff; color:#111; }
.ea-maptoggle__ico{ font-size:11px; }
body.ea-map-off #cdl-archive-map{ display:none !important; }
/* Directory nav injected onto single listing pages sits flush under the plugin hero. */
.cdl-single-container .ea-dirselect{ margin:0 0 18px; }
/* Match the plugin's ARCHIVE container to the SITE content width (--ea-container = 1024px) - it
   ships at 1200px and category pages read too wide vs the header/footer. The full-width red hero
   (.cdl-hero-section, 100vw) is intentionally left alone. .cdl-single-container no longer follows
   site width - see the rule below. */
.cdl-archive-container{ max-width:var(--ea-container) !important; }
/* SINGLE LISTING WIDTH IS THE PLUGIN'S OWN, NOT THE SITE'S (2026-08-24 mockup redesign). This used
   to pin .cdl-single-container to --ea-container (1024px) so the 08-22 two-column info/contact
   layout had room. The 08-24 redesign widened the plugin's own .cdl-single-container rule to
   1360px for a wider hero image, a real sidebar column and a flatter map - this override was
   silently capping it back to 1024px the whole time, and it went unnoticed because every visual
   check that session ran at a narrow browser-automation viewport (under the 900px mobile
   breakpoint), never at real desktop width. Matching the plugin's value here rather than deleting
   the rule, so a future --ea-container change does not silently narrow this page again. */
.cdl-single-container{ max-width:1360px !important; margin-left:auto !important; margin-right:auto !important; }
/* ONE LISTING PER ROW (owner order 2026-08-22): "I want one item per row, full width, because most
   readers are on mobile." The 3/2/1 responsive grid this replaces was the thing he was looking at
   when he said it - on a phone it was already one column, and on a laptop it gave each business a
   thumbnail and four words. There is no breakpoint here on purpose: one column at every width, and
   the CARD does the responding (photo left on a desktop, photo on top on a phone). */
.cdl-grid{ grid-template-columns:1fr !important; gap:18px !important; }

/* (The rules that sized TEC's single-event featured image were deleted 2026-08-12 with the image
   itself. The element is hidden above; there is nothing left to size.) */

/* What's On: the category-chip bar (.eawo-bar) had a solid white background + bottom border + vertical
   padding, which read as two white bands above and below the chips. Let the chips sit directly on the
   page background like the sub-tag chips do. (Page-inline rule, so override with !important.) */
.eawo-bar{ background:transparent !important; border:none !important; padding:0 !important; margin:0 0 10px !important; }
/* The When dropdown is the third control in the filter row; its 15px lives in the page content's
   inline <style> (.eawo-when), which outranks this sheet on a tie - so !important, same as
   .eawo-bar above. 18px floor (owner order 08-19), no exemption for inputs. */
.eawo-when{ font-size:18px !important; }
/* WordPress wpautop wraps the What's On markup in stray <p>/<br> tags (visible as orphaned </p> around
   #eawo-chips). Their default paragraph margins were the ~1cm of dead space above and below the category
   chips — NOT .eawo-bar. Neutralize the injected paragraphs and line breaks. */
.eawo p{ margin:0 !important; padding:0 !important; }
.eawo p:empty{ display:none !important; }
.eawo br{ display:none !important; }
/* Event card: "Add to calendar" now sits inline on the date line (was wasting a whole extra line).
   white-space:nowrap keeps the pill together; on narrow multi-column cards the container query drops
   the " to calendar" words so just "📅 Add" fits beside the date. */
.eawo-cbody{ container-type:inline-size; }
.eawo-cal{ color:var(--ea-red,#248641); font-weight:600; cursor:pointer; white-space:nowrap; }
@container (max-width:305px){ .eawo-cal-more{ display:none; } }

/* ---------- "Today's edition" CTA at the foot of guide articles (2026-07-27) ---------- */
.ea-edcta{ margin:30px 0 10px; padding:18px 20px; border:1.5px solid #111; border-radius:8px;
  background:var(--ea-card-alt,#F5F5F5); }
.ea-edcta__kicker{ display:inline-block; margin:0 0 8px; padding:4px 9px; background:var(--ea-accent);
  color:#fff; font-weight:700; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; border-radius:4px; }
.ea-edcta__lead{ margin:0 0 10px; font-size:17px; line-height:1.5; color:var(--ea-text-dark,#292929); }
.ea-edcta__hook{ margin:0 0 10px; font-size:17px; line-height:1.5; color:var(--ea-text,#000); }
.ea-edcta__links{ margin:0; font-size:17px; font-weight:700; }
.ea-edcta__links a{ color:var(--ea-accent); text-decoration:underline; }
/* Owner 2026-07-30: this date was grey and hard to read. Black, like the text around it. */
.ea-edcta__date{ font-weight:400; color:#000; }
.ea-edcta__sep{ color:var(--ea-meta,#B4B4B4); margin:0 6px; }
@media (max-width:599px){ .ea-edcta{ padding:15px 16px; } .ea-edcta__lead,.ea-edcta__links{ font-size:16px; } }

/* ---------- Footer social icons (2026-07-27) ---------- */
.ea-footer__social{ display:flex; gap:10px; margin:14px 0 0; padding:0; list-style:none; }
.ea-footer__social a{ display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  border:1.5px solid currentColor; border-radius:50%; color:inherit; opacity:.85; transition:opacity .15s ease, background-color .15s ease; }
.ea-footer__social a:hover{ opacity:1; background:rgba(255,255,255,.12); }
.ea-footer__social svg{ width:18px; height:18px; fill:currentColor; display:block; }

.ea-footer__review{ margin:12px 0 0; font-size:14px; }
.ea-footer__review a{ color:inherit; text-decoration:underline; opacity:.85; }
.ea-footer__review a:hover{ opacity:1; }

/* Search results: label each result by kind (2026-08-01). Search spans news,
   events, directory listings, newsletter editions and guides — an unlabelled
   grid makes a news story look missing when it is only further down. */
.ea-search__meta{font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;font-size:14px;color:#000;margin:0 0 18px}
.ea-search__result{position:relative}
.ea-search__kind{position:absolute;top:8px;left:8px;z-index:2;display:inline-block;
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:3px;background:#000;color:#fff}