/* Heading and text colour classes used in posts */
.h7o { color: #d1520e; }
.h7r { color: #B40404; }
.h7b { color: #111111; }

.hhn-red { color: #990033 !important; }

/* Utility: remove borders (also removes the photo frame below) */
.noborder { border: none 0px !important; }

/* Pulls a heading up by 50px where used */
h1.m50 { margin-top: -50px; }

/* Table styling for #ussap */
#ussap { padding: 2px; border: 1px #EEEEEE solid !important; }
#ussap tr { border-bottom: 1px #CCCCCC solid !important; }
#ussap td { padding: 10px !important; }

/* Café Tour link colour */
.cafecss a:link { color: #4e8576 !important; }
.cafecss a:hover { text-decoration: underline; }


/* ---------- Content blocks ---------- */

/* Expand/collapse lists (replaces the old [expand] shortcode) */
.dejiki-expand { margin: 0.5em 0 1em; }
.dejiki-expand > summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--global-palette1, #1e73be);
}
.dejiki-expand > summary:hover { text-decoration: underline; }
.dejiki-expand[open] > summary { margin-bottom: 0.75em; }


/* ---------- Matching the Canvas look in Kadence ---------- */

/* Spacing above and below headings inside articles and pages */
.entry-content h2,
.entry-content h3 {
  margin-top: 0.8em;
  margin-bottom: 0.4em;
}

/* Thin frame around photos in articles and pages, and featured images.
   Not framed: images with an inline border style (e.g. the content block
   banners, written with border:none), the .noborder class, and emoji. */
.entry-content img:not([style*="border"], .noborder, .emoji),
.post-thumbnail img {
  padding: 4px;
  border: 1px solid #e3e3e3;
  background: #fff;
  box-sizing: border-box;
}

/* Paragraph spacing closer to Canvas (Kadence default is about 2rem) */
.entry-content p {
  margin-bottom: 1em;
}

/* Photos: one even gap of one line below each photo, whether photos sit
   on consecutive lines or in separate paragraphs in the classic editor.
   The gap comes from the image itself, so the paragraph wrapping it adds none.
   Photos narrower than the column (e.g. width="80%") stay centred.
   Same exclusions as the frame, plus left/right-aligned images.
   To keep a small inline image (icon, badge) in the line of text, give it class="noborder". */
.entry-content img:not([style*="border"], .noborder, .emoji, .alignleft, .alignright) {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
}
.entry-content p:has(img:not([style*="border"], .noborder, .emoji, .alignleft, .alignright)) {
  margin-bottom: 0;
}
.entry-content img:not([style*="border"], .noborder, .emoji, .alignleft, .alignright) + br,
.entry-content a:has(> img:not([style*="border"], .noborder, .emoji, .alignleft, .alignright)) + br {
  display: none;
}
.entry-content .wp-caption {
  margin-bottom: 1em;
}

/* Links: subtle underline inside paragraphs, none in navigation lists.
   Skip this section if you set link style in the Customizer instead. */
.entry-content a {
  text-decoration: none;
}
.entry-content p a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.entry-content p a:hover {
  text-decoration-color: currentColor;
}

/* Links inside headings keep the link blue instead of taking the heading's
   colour (e.g. red .h7r headings), as on Canvas */
.entry-content :is(h1, h2, h3, h4, h5, h6) a {
  color: var(--global-palette1);
}

/* Content blocks used as indexes (centred lists and expand lists) stay clean,
   with underline on hover only */
.entry-content center a,
.entry-content details a {
  text-decoration: none;
}
.entry-content center a:hover,
.entry-content details a:hover {
  text-decoration: underline;
}

/* Previous/Next post links below articles: always link blue, underline on hover */
.post-navigation .nav-links a {
  color: var(--global-palette1);
  text-decoration: none;
}
.post-navigation .nav-links a:hover {
  text-decoration: underline;
}

/* Tables (e.g. ticket price tables): Canvas-style padding, light lines,
   grey header row and alternating row shading */
.entry-content table {
  border-collapse: collapse;
  border: 1px solid #e3e3e3;
  max-width: 100%;
}
.entry-content th,
.entry-content td {
  padding: 14px 18px;
  vertical-align: middle;
  border: 0;
  border-bottom: 1px solid #ececec;
  border-right: 1px solid #ececec;
}
.entry-content th {
  background: #efefef;
}
.entry-content th:first-child {
  text-align: left;
}
.entry-content tbody tr:nth-child(even) {
  background: #fafafa;
}
/* Keep price and other short columns from squeezing */
.entry-content th:not(:first-child),
.entry-content td:not(:first-child) {
  min-width: 110px;
}
/* No underline on links inside tables (e.g. prices), underline on hover */
.entry-content table a {
  text-decoration: none;
}
.entry-content table a:hover {
  text-decoration: underline;
}

/* Horizontal rules: thin light grey line with tighter spacing.
   Widths set in the post HTML (e.g. width=60%) are kept. */
.entry-content hr {
  height: 0;
  border: 0;
  border-top: 1px solid #dddddd;
  background: none;
  margin: 1.2em auto;
}