/* Blog posts, /YYYY/MM/DD/slug/ (one shared layout for all nine).
   Live: BeTheme single post (title, featured photo, builder rows); Cerveza El Dorado
   is an Elementor post with an accessibility-plugin summary box. */

/* ---------- Post header: older/newer arrows, title, featured photo ---------- */
.page-post .post-header { padding-top: 30px; padding-bottom: 40px; }
.page-post .post-nav { position: relative; height: 40px; margin-bottom: 25px; }
.page-post .post-nav__link {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #0a0a0a;
  opacity: .6;
  transition: opacity .3s ease-in-out;
}
.page-post .post-nav__link:hover,
.page-post .post-nav__link:focus-visible { opacity: 1; color: #0a0a0a; }
.page-post .post-nav__link--prev { left: -8px; }
.page-post .post-nav__link--next { right: -8px; }
.page-post .post-nav__link svg { width: 25px; height: 25px; fill: currentColor; }

/* live: .post-header .title_wrapper h1 is 35px (27px on phones) */
.page-post .post-title {
  margin: 0 0 60px;
  font-size: calc(var(--fs-h1) * .73);
  line-height: 1.15;
}
.page-post .post-photo { text-align: center; line-height: 0; }
.page-post .post-photo img { display: inline-block; }

/* ---------- Body rows ---------- */
.page-post .post-body { padding-top: 0; padding-bottom: 20px; }

/* BeTheme "two-third" column between "one-sixth" spacers: the text column.
   BeTheme columns are fractions of the container plus 24px, less a 24px gutter. */
.page-post .post-text,
.page-post .post-intro {
  margin: 0 auto 20px;
}
@media (min-width: 768px) {
  .page-post .post-text { width: calc((100% + 24px) * 2 / 3 - 24px); }
  .page-post .post-intro {
    width: calc((100% + 24px) * .65 - 24px);
    margin-left: calc((100% + 24px) / 6);
  }
}

/* "one-fourth" photo beside a "two-fifth" heading */
.page-post .post-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .page-post .post-intro { grid-template-columns: minmax(0, 281fr) minmax(0, 464fr); align-items: start; }
}
.page-post .post-intro__photo { line-height: 0; }
.page-post .post-intro__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}

/* Full width rows (photos and their captions) */
.page-post .post-wide { margin: 0 0 20px; }
.page-post .post-wide img { display: inline-block; vertical-align: top; }
.page-post .post-wide img.aligncenter { display: block; }
.page-post .post-full { margin: 0 0 20px; }
.page-post .post-full img { display: block; }

/* Photos inside the text keep the live WordPress alignment */
.page-post .post-text img.alignright { margin: .2em 0 15px 15px; }

/* Section heads that are h4 on live (BeTheme h4 is Rubik 500). First Brew Day keeps a real h4. */
.page-post .post-body h4,
.page-post .post-subhead {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 500;
}

/* Black dropcap (live: .dropcap.size-2, 50px box, 35px letter, black with white text).
   Drawn with ::first-letter so the first word stays whole for screen readers; that box
   cannot take a width, so each letter gets the side padding that makes it about 50px. */
.page-post p.dropcap::first-letter {
  float: left;
  margin: 0 .29em .14em 0;
  padding: 0 .3em;
  border-radius: 5px;
  background: #000;
  color: #fff;
  font-size: 1.75em;
  line-height: 1.43;
}
.page-post p.dropcap--i::first-letter { padding: 0 .58em; }
.page-post p.dropcap--w::first-letter { padding: 0 .24em; }
.page-post p.dropcap--h::first-letter { padding: 0 .37em; }
.page-post p.dropcap--t::first-letter { padding: 0 .42em; }
/* High contrast mode turns the page black: a white edge keeps the dropcap box visible */
html.a11y-contrast .page-post p.dropcap::first-letter { border: 1px solid #fff; }

/* ---------- Our First Brew Day: one-third photo beside two-third text ---------- */
.page-post .post-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 50px 0 40px;
}
@media (min-width: 768px) {
  .page-post .post-split { grid-template-columns: minmax(0, 383fr) minmax(0, 789fr); row-gap: 56px; align-items: start; }
}
.page-post .post-split__photo { line-height: 0; }
.page-post .post-split__photo img { width: 100%; }
.page-post .post-wide.centered h3 { margin-bottom: 40px; }

/* ---------- Cerveza El Dorado: summary box, then an 800px Elementor column ---------- */
.page-post .post-summary {
  --band-bg: #f2f2f2; /* live rgba(0,0,0,.05) on white */
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
}
.page-post .post-summary p:last-child { margin-bottom: 0; }
.page-post .post-body--elementor { padding-bottom: 30px; }
.page-post .post-column {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 10px;
  color: #000;
  font-family: var(--f-menu);
}
.page-post .post-column__head { margin-bottom: 35px; }
/* Below 960px the column fills the page: line it up with the title and summary above it */
@media (max-width: 959px) {
  .page-post .post-column { padding: 0 var(--gutter); }
}

/* ---------- Author box (live BeTheme author box; its Gravatar is not in the archive) ---------- */
.page-post .post-footer { padding-bottom: 40px; }
.page-post .post-footer .container { padding-top: 40px; position: relative; }
.page-post .post-footer .container::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--c-rule);
}
.page-post .author-box { padding: 20px; background: rgba(0, 0, 0, .02); }
.page-post .author-box__name {
  margin: 0;
  color: #00032a;
  font-size: 1.1em;
  font-weight: 500;
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  .page-post .post-header { padding-top: 24px; padding-bottom: 30px; }
  .page-post .post-nav { margin-bottom: 10px; }
  .page-post .post-title { margin-bottom: 20px; }
  .page-post .post-nav__link--prev { left: -10px; }
  .page-post .post-nav__link--next { right: -10px; }
  .page-post .post-intro__photo { text-align: center; }
  .page-post .post-split { margin-top: 30px; }
  .page-post .post-text img.alignright { float: none; display: block; margin: 0 auto 15px; }
}

/* Share row: the live posts show Share with Facebook, Twitter, LinkedIn
   and Pinterest above the author box. Plain links, no share scripts. */
.page-post .share-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  border-top: 1px solid rgba(0, 0, 0, .08); padding: 15px 0; margin-top: 10px;
}
.page-post .share-row__label { font-weight: 700; color: #161922; }
.page-post .share-row__links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.page-post .share-row__links a { color: #595959; text-decoration: underline; }
.page-post .share-row__links a:hover,
.page-post .share-row__links a:focus-visible { color: #0a0a0a; }