/**
 * OPENWORLD NOTE — Article v5 Editorial Layout
 * Monocle/Kinfolk aesthetic · Korean readability first
 *
 * SCOPE: body.single-post only
 * Does NOT affect home, category, archive, or any other page type.
 * Depends on: style.css (CSS custom properties, header, footer)
 *
 * Overrides gutenberg-blocks.css for single post pages.
 * Load AFTER gutenberg-blocks.css to take precedence.
 *
 * taste-skill: DESIGN_VARIANCE=2, MOTION_INTENSITY=2, VISUAL_DENSITY=2
 * Created: 2026-04-03
 */


/* ===================================================================
   1. SINGLE-POST TOKEN OVERRIDES
   Background stays #FFFFFF (per requirement).
   Only article-specific tokens adjusted.
   =================================================================== */

body.single-post {
  --ow-content-w:    680px;
  --ow-wide-w:       820px;
  --ow-border:       #E2E0DB;
  --ow-border-strong: #C8C5BE;
  --ow-category-food:   #B85C38;
  --ow-category-travel: #3D7A68;
  --ow-category-life:   #6B5B95;
  --ow-category-info:   #4A6FA5;
}


/* ===================================================================
   2. ARTICLE HEADER
   Category badge, serif title, deck, byline
   =================================================================== */

body.single-post .entry-header {
  max-width: var(--ow-content-w, 680px);
  margin: 0 auto;
  padding: 36px 24px 28px;
}
@media (min-width: 768px) {
  body.single-post .entry-header {
    padding: 48px 0 32px;
  }
}
@media (min-width: 1025px) {
  body.single-post .entry-header {
    padding: 56px 0 36px;
  }
}

/* Category badge */
body.single-post .entry-header .cat-links a,
body.single-post .entry-header .entry-meta .cat-links a {
  font-family: var(--expat-font-body);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--ow-category-food, #B85C38);
  padding: 4px 10px;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 16px;
}

/* Title */
body.single-post .entry-header .entry-title {
  font-family: var(--expat-font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--expat-color-text);
  letter-spacing: -0.01em;
  word-break: keep-all;
  margin: 0 0 16px;
}
@media (min-width: 768px) {
  body.single-post .entry-header .entry-title {
    font-size: 2.125rem;
    line-height: 1.32;
  }
}
@media (min-width: 1025px) {
  body.single-post .entry-header .entry-title {
    font-size: 2.375rem;
  }
}

/* Byline / meta */
body.single-post .entry-header .entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--expat-font-body);
  font-size: 0.75rem;
  color: #8E8E8E;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ow-border, #E2E0DB);
}


/* ===================================================================
   3. ENTRY-CONTENT — Paragraph
   =================================================================== */

body.single-post .entry-content .wp-block-paragraph,
body.single-post .entry-content p {
  font-family: var(--expat-font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.88;
  color: var(--expat-color-text);
  margin-top: 0;
  margin-bottom: 22px;
  word-break: keep-all;
  max-width: var(--ow-content-w, 680px);
  margin-left: auto;
  margin-right: auto;
}

body.single-post .entry-content p strong {
  font-weight: 600;
  color: var(--expat-color-text);
}

body.single-post .entry-content p a {
  color: var(--expat-color-text);
  text-decoration: underline;
  text-decoration-color: var(--expat-color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s, color 0.3s;
}

body.single-post .entry-content p a:hover {
  color: var(--expat-color-accent);
  text-decoration-thickness: 2px;
}

@media (min-width: 768px) {
  body.single-post .entry-content .wp-block-paragraph,
  body.single-post .entry-content p {
    font-size: var(--expat-fs-body, 1.0625rem);
    line-height: 1.9;
    margin-bottom: 26px;
  }
}

/* Drop cap — first paragraph */
body.single-post .entry-content > .wp-block-paragraph:first-of-type::first-letter,
body.single-post .entry-content > p:first-of-type::first-letter {
  font-family: var(--expat-font-display);
  float: left;
  font-size: 3.5em;
  line-height: 0.8;
  padding-right: 10px;
  padding-top: 6px;
  color: var(--expat-color-text);
  font-weight: 400;
}


/* ===================================================================
   4. ENTRY-CONTENT — Heading h4
   Left accent bar, serif
   =================================================================== */

body.single-post .entry-content .wp-block-heading,
body.single-post .entry-content h4 {
  font-family: var(--expat-font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--expat-color-text);
  margin-top: 52px;
  margin-bottom: 16px;
  max-width: var(--ow-content-w, 680px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  border-left: 3px solid var(--ow-category-food, #B85C38);
  letter-spacing: -0.01em;
  word-break: keep-all;
}

body.single-post .entry-content .wp-block-heading + .wp-block-heading,
body.single-post .entry-content h4 + h4 {
  margin-top: 12px;
}

@media (min-width: 768px) {
  body.single-post .entry-content .wp-block-heading,
  body.single-post .entry-content h4 {
    font-size: 1.25rem;
    margin-top: 60px;
  }
}


/* ===================================================================
   5. ENTRY-CONTENT — Separator
   Centered short rule
   =================================================================== */

body.single-post .entry-content .wp-block-separator,
body.single-post .entry-content hr {
  border: none;
  width: 48px;
  height: 1px;
  background: var(--ow-border-strong, #C8C5BE);
  margin: 44px auto;
  max-width: none;
  border-top: none;
}

body.single-post .entry-content .wp-block-separator.has-alpha-channel-opacity {
  opacity: 1;
}

@media (min-width: 768px) {
  body.single-post .entry-content .wp-block-separator,
  body.single-post .entry-content hr {
    width: 56px;
    margin: 52px auto;
  }
}


/* ===================================================================
   6. ENTRY-CONTENT — Blockquote (pull-quote)
   Top/bottom border, centered serif italic
   =================================================================== */

body.single-post .entry-content .wp-block-quote,
body.single-post .entry-content blockquote {
  background: transparent;
  border: none;
  border-top: 1px solid var(--ow-border, #E2E0DB);
  border-bottom: 1px solid var(--ow-border, #E2E0DB);
  border-left: none;
  padding: 24px 0;
  margin: 32px auto;
  max-width: var(--ow-content-w, 680px);
}

body.single-post .entry-content .wp-block-quote p,
body.single-post .entry-content blockquote p {
  font-family: var(--expat-font-heading);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--expat-color-text);
  text-align: center;
  margin: 0;
  max-width: none;
}

@media (min-width: 768px) {
  body.single-post .entry-content .wp-block-quote,
  body.single-post .entry-content blockquote {
    padding: 28px 0;
    margin: 40px auto;
  }
  body.single-post .entry-content .wp-block-quote p,
  body.single-post .entry-content blockquote p {
    font-size: 1.125rem;
  }
}


/* ===================================================================
   7. ENTRY-CONTENT — Place Card
   White card, left accent on hover
   =================================================================== */

body.single-post .entry-content .wp-block-group.place-card {
  background: #FFFFFF;
  border: 1px solid var(--ow-border, #E2E0DB);
  border-left: 3px solid transparent;
  border-radius: 0;
  padding: 18px 20px;
  margin-top: 16px;
  margin-bottom: 28px;
  max-width: var(--ow-content-w, 680px);
  margin-left: auto;
  margin-right: auto;
  transition: border-left-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

body.single-post .entry-content .wp-block-group.place-card:hover {
  border-left-color: var(--expat-color-accent);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

body.single-post .entry-content .wp-block-group.place-card .wp-block-paragraph,
body.single-post .entry-content .wp-block-group.place-card p {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--expat-color-text-secondary);
  margin: 0;
  max-width: none;
}

body.single-post .entry-content .wp-block-group.place-card .wp-block-paragraph a,
body.single-post .entry-content .wp-block-group.place-card p a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--expat-color-text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--expat-color-text);
  padding-bottom: 1px;
  min-height: 44px;
  transition: color 0.3s, border-color 0.3s;
}

body.single-post .entry-content .wp-block-group.place-card .wp-block-paragraph a:hover,
body.single-post .entry-content .wp-block-group.place-card p a:hover {
  color: var(--expat-color-link-hover);
  border-bottom-color: var(--expat-color-link-hover);
}

/* Rating inside place-card */
body.single-post .entry-content .wp-block-group.place-card .wp-block-quote,
body.single-post .entry-content .wp-block-group.place-card blockquote {
  background: transparent;
  border: none;
  border-top: none;
  border-bottom: none;
  padding: 8px 0 0;
  margin: 0;
}

body.single-post .entry-content .wp-block-group.place-card .wp-block-quote p,
body.single-post .entry-content .wp-block-group.place-card blockquote p {
  font-family: var(--expat-font-body);
  font-size: 0.8125rem;
  font-style: normal;
  color: #8E8E8E;
  text-align: left;
  line-height: 1.6;
}

/* Practical info row */
body.single-post .entry-content .wp-block-group.place-card .wp-block-quote + .wp-block-paragraph,
body.single-post .entry-content .wp-block-group.place-card .wp-block-paragraph + .wp-block-quote + .wp-block-paragraph,
body.single-post .entry-content .wp-block-group.place-card blockquote + p {
  padding-top: 10px;
  border-top: 1px solid var(--expat-color-separator);
  margin-top: 10px;
}

@media (min-width: 768px) {
  body.single-post .entry-content .wp-block-group.place-card {
    padding: 22px 24px;
    margin-bottom: 36px;
  }
  body.single-post .entry-content .wp-block-group.place-card .wp-block-paragraph,
  body.single-post .entry-content .wp-block-group.place-card p {
    font-size: var(--expat-fs-small, 0.875rem);
  }
  body.single-post .entry-content .wp-block-group.place-card .wp-block-quote p,
  body.single-post .entry-content .wp-block-group.place-card blockquote p {
    font-size: var(--expat-fs-small, 0.875rem);
  }
}


/* ===================================================================
   8. ENTRY-CONTENT — Image
   Wide breakout, mobile full-bleed
   =================================================================== */

body.single-post .entry-content .wp-block-image {
  max-width: var(--ow-wide-w, 820px);
  margin: 28px auto;
}

body.single-post .entry-content .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: 0;
  display: block;
}

body.single-post .entry-content .wp-block-image figcaption {
  font-family: var(--expat-font-body);
  font-size: 0.6875rem;
  color: #ABABAB;
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}

/* Mobile full-bleed */
@media (max-width: 767px) {
  body.single-post .entry-content .wp-block-image {
    width: calc(100% + 32px);
    max-width: none;
    margin-left: -16px;
    margin-right: -16px;
  }
}

@media (min-width: 768px) {
  body.single-post .entry-content .wp-block-image {
    margin: 36px auto;
  }
  body.single-post .entry-content .wp-block-image img {
    border-radius: 0;
  }
  body.single-post .entry-content .wp-block-image figcaption {
    font-size: var(--expat-fs-caption, 0.75rem);
  }
}


/* ===================================================================
   9. ENTRY-CONTENT — Internal Links
   Strong top border, uppercase label
   =================================================================== */

body.single-post .entry-content .wp-block-group.internal-links {
  border-top: 2px solid var(--expat-color-text);
  border-bottom: none;
  border-left: none;
  border-right: none;
  background: transparent;
  padding: 28px 0 0;
  margin: 56px auto 0;
  max-width: var(--ow-content-w, 680px);
}

body.single-post .entry-content .wp-block-group.internal-links h4 {
  font-family: var(--expat-font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--expat-color-text);
  margin: 0 0 16px;
  border-left: none;
  padding-left: 0;
}

body.single-post .entry-content .wp-block-group.internal-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.single-post .entry-content .wp-block-group.internal-links li {
  padding: 12px 0;
  border-bottom: 1px solid var(--ow-border, #E2E0DB);
}

body.single-post .entry-content .wp-block-group.internal-links li:last-child {
  border-bottom: none;
}

body.single-post .entry-content .wp-block-group.internal-links a {
  color: var(--expat-color-text-secondary);
  font-family: var(--expat-font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  transition: color 0.3s;
  text-decoration: none;
}

body.single-post .entry-content .wp-block-group.internal-links a:hover {
  color: var(--expat-color-accent);
}

@media (min-width: 768px) {
  body.single-post .entry-content .wp-block-group.internal-links {
    padding-top: 32px;
    margin-top: 72px;
  }
}


/* ===================================================================
   10. ENTRY-CONTENT — Lists
   =================================================================== */

body.single-post .entry-content .wp-block-list {
  font-family: var(--expat-font-body);
  font-size: 1rem;
  line-height: 1.88;
  color: var(--expat-color-text);
  max-width: var(--ow-content-w, 680px);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 22px;
  padding-left: 24px;
}

@media (min-width: 768px) {
  body.single-post .entry-content .wp-block-list {
    font-size: var(--expat-fs-body, 1.0625rem);
    line-height: 1.9;
  }
}


/* ===================================================================
   11. ENTRY-CONTENT — Table
   Clean editorial grid, uppercase header
   =================================================================== */

body.single-post .entry-content .wp-block-table {
  max-width: var(--ow-content-w, 680px);
  margin: 28px auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.single-post .entry-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--expat-font-body);
  font-size: 0.8125rem;
}

body.single-post .entry-content .wp-block-table th,
body.single-post .entry-content .wp-block-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ow-border, #E2E0DB);
}

body.single-post .entry-content .wp-block-table th {
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8E8E8E;
  border-bottom: 2px solid var(--expat-color-text);
}

body.single-post .entry-content .wp-block-table td {
  color: var(--expat-color-text-secondary);
}

body.single-post .entry-content .wp-block-table tbody tr:last-child td {
  border-bottom: none;
}

@media (min-width: 768px) {
  body.single-post .entry-content .wp-block-table table {
    font-size: var(--expat-fs-small, 0.875rem);
  }
}

@media (max-width: 767px) {
  body.single-post .entry-content .wp-block-table {
    max-width: 100%;
  }
  body.single-post .entry-content .wp-block-table table {
    min-width: 440px;
  }
}


/* ===================================================================
   12. ENTRY-CONTENT — Image Placeholder (draft mode)
   =================================================================== */

body.single-post .entry-content .wp-block-group.image-placeholder {
  background: #F7F7F5;
  border: 2px dashed var(--expat-color-separator);
  border-radius: 0;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  margin: 24px auto;
  max-width: var(--ow-wide-w, 820px);
}

body.single-post .entry-content .wp-block-group.image-placeholder strong {
  font-family: var(--expat-font-body);
  font-size: 0.8125rem;
  color: #ABABAB;
  font-weight: 600;
}

body.single-post .entry-content .wp-block-group.image-placeholder small {
  font-family: var(--expat-font-body);
  font-size: var(--expat-fs-caption, 0.75rem);
  color: #ABABAB;
}


/* ===================================================================
   13. READING PROGRESS BAR (single-post only)
   =================================================================== */

body.single-post .ow-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--expat-color-accent);
  z-index: 200;
  transition: width 0.12s linear;
  will-change: width;
}


/* ===================================================================
   14. SCROLL REVEAL (MOTION_INTENSITY=2)
   Subtle fade-in-up for article elements
   =================================================================== */

body.single-post .ow-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

body.single-post .ow-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}