/* ================================================================
   Single post page CSS
   Injected into <head> via wp_head in single.php.
================================================================ */

/* ── Page layout ─────────────────────────────────── */
body.single .ac-single {
  padding-bottom: var(--space-12) !important;
}

body.single .ac-single__page {
  max-width: 780px !important;
  margin-inline: auto !important;
  padding-inline: var(--gutter) !important;
  padding-top: var(--space-2) !important;
  float: none !important;
  width: 100% !important;
}

/* ── Breadcrumb ───────────────────────────────────── */
body.single .ac-single__page .ac-breadcrumb {
  background: transparent !important;
  border: none !important;
  padding-inline: 0 !important;
  padding-block: var(--space-4) var(--space-2) !important;
}

body.single .ac-single__page .ac-breadcrumb__inner {
  padding: 0 !important;
}

/* ── Post header ──────────────────────────────────── */
body.single .ac-single__header {
  padding-bottom: var(--space-6) !important;
  border-bottom: 1px solid var(--color-border) !important;
  margin-bottom: var(--space-6) !important;
}

body.single .ac-single__title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  font-weight: 800 !important;
  color: var(--color-ink) !important;
  line-height: 1.15 !important;
  margin-bottom: var(--space-4) !important;
}

body.single .ac-single__meta {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-muted) !important;
  flex-wrap: wrap !important;
}

body.single .ac-single__meta-author a {
  color: var(--color-red) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

body.single .ac-single__meta-sep {
  color: var(--color-border) !important;
}

/* ── Featured image ───────────────────────────────── */
body.single .ac-single__featured-image {
  margin-bottom: var(--space-8) !important;
  display: block !important;
}

body.single .ac-single__featured-image img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: var(--radius-lg) !important;
  height: auto !important;
  max-width: 100% !important;
}

/* ── WPRM Jump to Recipe ──────────────────────────── */
.wprm-jump-to-recipe-shortcode,
.wprm-jump-to-recipe-shortcode:visited,
.wprm-jump-to-recipe-container a,
a.wprm-jump-to-recipe {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  color: var(--color-white) !important;
  background: var(--color-red) !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  padding: var(--space-2) var(--space-5) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  margin-bottom: var(--space-6) !important;
}

.wprm-jump-to-recipe-shortcode:hover {
  background: var(--color-red-dark) !important;
  color: var(--color-white) !important;
}

/* ── Body typography ──────────────────────────────── */
body.single .post-entry {
  font-family: var(--font-body) !important;
  font-size: var(--text-md) !important;
  line-height: var(--leading-relaxed) !important;
  color: var(--color-body) !important;
}

body.single .post-entry p {
  margin-bottom: var(--space-5) !important;
  font-size: var(--text-md) !important;
  line-height: var(--leading-relaxed) !important;
}

body.single .post-entry h2 {
  font-family: var(--font-display) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  margin-top: var(--space-10) !important;
  margin-bottom: var(--space-4) !important;
}

body.single .post-entry h3 {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  margin-top: var(--space-8) !important;
  margin-bottom: var(--space-3) !important;
}

body.single .post-entry ul {
  padding-left: var(--space-6) !important;
  margin-bottom: var(--space-5) !important;
}

body.single .post-entry ul li {
  list-style: square !important;
  font-size: var(--text-md) !important;
  line-height: var(--leading-relaxed) !important;
  margin-bottom: var(--space-2) !important;
}

body.single .post-entry ol {
  padding-left: var(--space-6) !important;
  margin-bottom: var(--space-5) !important;
}

body.single .post-entry ol li {
  list-style: decimal !important;
  font-size: var(--text-md) !important;
  line-height: var(--leading-relaxed) !important;
  margin-bottom: var(--space-3) !important;
}

body.single .post-entry img {
  width: 100% !important;
  height: auto !important;
  border-radius: var(--radius-md) !important;
  margin-block: var(--space-6) !important;
  display: block !important;
}

body.single .post-entry a {
  color: var(--color-red) !important;
  text-decoration: none !important;
}

body.single .post-entry blockquote {
  border-left: 4px solid var(--color-red) !important;
  margin-inline: 0 !important;
  padding: var(--space-4) var(--space-6) !important;
  background: var(--color-bg-alt) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  font-style: italic !important;
  color: var(--color-muted) !important;
  margin-bottom: var(--space-5) !important;
}

/* ── Old recipe styling ───────────────────────────── */
body.single .ac-single__old-wrap {
  background: var(--color-white) !important;
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-8) !important;
  margin-block: var(--space-4) var(--space-10) !important;
  box-shadow: var(--shadow-md) !important;
}

.old-recipe-content p:has(> strong:first-child:last-child),
.old-recipe-content p:has(> b:first-child:last-child) {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  margin-top: var(--space-8) !important;
  margin-bottom: var(--space-3) !important;
  padding-bottom: var(--space-2) !important;
  border-bottom: 2px solid var(--color-border) !important;
}

.old-recipe-content ol {
  padding-left: 0 !important;
  counter-reset: old-step !important;
  list-style: none !important;
}

.old-recipe-content ol li {
  counter-increment: old-step !important;
  position: relative !important;
  padding: var(--space-3) var(--space-3) var(--space-3) 3rem !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.old-recipe-content ol li::before {
  content: counter(old-step) !important;
  position: absolute !important;
  left: 0 !important;
  top: var(--space-3) !important;
  width: 26px !important;
  height: 26px !important;
  background: var(--color-red) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Newsletter ───────────────────────────────────── */
body.single .ac-single__newsletter {
  background: var(--color-red-light) !important;
  border: 1px solid rgba(200,49,42,.15) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-8) var(--space-10) !important;
  margin-block: var(--space-10) !important;
  text-align: center !important;
  clear: both !important;
}

body.single .ac-single__newsletter h3 {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  margin-bottom: var(--space-2) !important;
}

body.single .ac-single__newsletter > p {
  font-family: var(--font-ui) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-muted) !important;
  margin-bottom: var(--space-5) !important;
}

/* FluentForm inside newsletter - center the form elements */
body.single .ac-single__newsletter .ff-el-group {
  margin-bottom: var(--space-3) !important;
  text-align: left !important;
  max-width: 420px !important;
  margin-inline: auto !important;
}

body.single .ac-single__newsletter .ff-el-input--label label {
  font-family: var(--font-ui) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--color-ink) !important;
}

body.single .ac-single__newsletter .ff-el-form-control {
  width: 100% !important;
  padding: var(--space-3) var(--space-4) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--text-sm) !important;
  background: var(--color-white) !important;
  color: var(--color-ink) !important;
}

body.single .ac-single__newsletter .ff-el-form-control:focus {
  border-color: var(--color-red) !important;
  outline: none !important;
}

body.single .ac-single__newsletter .ff_submit_btn_container {
  text-align: center !important;
}

body.single .ac-single__newsletter .ff_submit_btn_container .ff-btn,
body.single .ac-single__newsletter .ff_submit_btn_container button {
  padding: var(--space-3) var(--space-8) !important;
  background: var(--color-red) !important;
  color: #fff !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  font-size: var(--text-sm) !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  cursor: pointer !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

body.single .ac-single__newsletter .ff_submit_btn_container .ff-btn:hover,
body.single .ac-single__newsletter .ff_submit_btn_container button:hover {
  background: var(--color-red-dark) !important;
}

/* ── Author bio ───────────────────────────────────── */
body.single .ac-single__author-bio {
  display: flex !important;
  gap: var(--space-5) !important;
  align-items: flex-start !important;
  padding: var(--space-6) !important;
  background: var(--color-bg-alt) !important;
  border-radius: var(--radius-lg) !important;
  margin-block: var(--space-8) !important;
  border: 1px solid var(--color-border) !important;
}

body.single .ac-single__author-bio .ac-single__author-avatar {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #c8312a !important;
  color: #ffffff !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.625rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Hide gravatar img if WordPress injects one */
body.single .ac-single__author-bio .ac-single__author-avatar img {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

body.single .ac-single__author-name {
  font-family: var(--font-display) !important;
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  margin-bottom: var(--space-2) !important;
}

body.single .ac-single__author-desc {
  font-size: var(--text-sm) !important;
  color: var(--color-muted) !important;
  line-height: var(--leading-relaxed) !important;
  margin-bottom: 0 !important;
}

/* ── Related section ──────────────────────────────── */
.ac-related {
  background: var(--color-bg-alt) !important;
  border-top: 1px solid var(--color-border) !important;
  padding-block: var(--space-12) !important;
  margin-top: var(--space-10) !important;
  clear: both !important;
}

.ac-related__inner {
  max-width: 1100px !important;
  margin-inline: auto !important;
  padding-inline: var(--gutter) !important;
}

.ac-related__title {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  text-align: center !important;
  margin-bottom: var(--space-8) !important;
}

.ac-related__grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: var(--space-6) !important;
}

.ac-related__grid > .ac-related-card {
  flex: 1 1 calc((100% - 2 * var(--space-6)) / 3) !important;
  max-width: 460px !important;
}

.ac-related-card {
  display: block !important;
  text-decoration: none !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  background: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
}

.ac-related-card__img-wrap {
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background: var(--color-bg-alt) !important;
  /* Explicit height fallback for browsers/contexts where aspect-ratio
     doesn't establish height on its own (fixes empty placeholder on desktop) */
  min-height: 180px !important;
  position: relative !important;
}

.ac-related-card__img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.ac-related-card__title {
  font-family: var(--font-display) !important;
  font-size: var(--text-base) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  padding: var(--space-4) !important;
  line-height: var(--leading-snug) !important;
  text-align: center !important;
}

/* ── Video / iframe responsive wrapper ───────────── */
body.single .post-entry iframe,
body.single .post-entry embed,
body.single .post-entry object {
  max-width: 100% !important;
  width: 100% !important;
}

/* Responsive video wrapper - WPRM outputs video in .wprm-recipe-video-container */
body.single .wprm-recipe-video-container,
body.single .wprm-recipe-video,
body.single .video-container {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 56.25% !important; /* 16:9 */
  height: 0 !important;
  overflow: hidden !important;
  margin-block: 1.5rem !important;
}

body.single .wprm-recipe-video-container iframe,
body.single .wprm-recipe-video iframe,
body.single .video-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 640px) {
  body.single .ac-single__old-wrap  { padding: var(--space-5) !important; }
  body.single .ac-single__newsletter { padding: var(--space-5) !important; }
  body.single .ac-single__author-bio { flex-direction: column !important; }
  .ac-related__grid > .ac-related-card { flex-basis: calc((100% - 1 * var(--space-6)) / 2) !important; }
}

@media (max-width: 400px) {
  .ac-related__grid > .ac-related-card { flex-basis: 100% !important; max-width: 100% !important; }
}


/* ── Comments wrapper — match narrow single-post column ── */
body.single #comments {
  padding: 0 !important;
  max-width: 780px !important;
  margin-inline: auto !important;
  padding-inline: var(--gutter) !important;
}
