/* ============================================================
   jao-content-fixes.css
   Upload this file to your active theme folder, next to your
   functions.php (or child theme folder if you're using one).
   Loaded automatically by the functions.php snippet, AFTER
   GeneratePress's own CSS, so these rules win without needing
   !important everywhere.
   ============================================================ */

/* ---------------------------------------------------------------
   PART 1 — FIX SINGLE POST / PAGE SPACING
   GeneratePress's defaults are intentionally minimal, which is
   why your posts feel like they have no margin/padding. This
   section gives entry content real breathing room and proper
   typographic rhythm without touching your theme files directly.
--------------------------------------------------------------- */

.entry-content {
  font-size: 1.08rem;
  line-height: 1.85;
  color: #3d3933;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.entry-content p {
  margin: 0 0 1.6em 0;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: 2.2em;
  margin-bottom: 0.8em;
  line-height: 1.3;
  font-weight: 700;
}

.entry-content h2 { font-size: 1.6rem; }
.entry-content h3 { font-size: 1.3rem; }

.entry-content ul,
.entry-content ol {
  margin: 0 0 1.6em 1.4em;
  padding: 0;
}

.entry-content li {
  margin-bottom: 0.5em;
}

.entry-content img {
  border-radius: 14px;
  margin: 1.8em 0;
  max-width: 100%;
  height: auto;
}

.entry-content blockquote {
  margin: 1.8em 0;
  padding: 1.1rem 1.5rem;
  border-left: 4px solid #d73b10;
  background: #fdf0ec;
  border-radius: 10px;
  font-style: italic;
  color: #5a554e;
}

.entry-content a {
  color: #d73b10;
  text-decoration: underline;
  text-decoration-color: rgba(215, 59, 16, 0.35);
  text-underline-offset: 2px;
}

.entry-content a:hover {
  text-decoration-color: #d73b10;
}

/* Featured image at the top of a single post */
.single .post-image,
.single .featured-image,
.entry-header + img,
article .post-image img {
  border-radius: 18px;
  margin-bottom: 1.8rem;
}

/* Title + meta spacing */
.entry-title {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height: 1.25;
  margin: 0.6em 0 0.4em 0;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.entry-meta {
  max-width: 760px;
  margin: 0 auto 1.6rem auto;
  font-size: 0.85rem;
  color: #9c9489;
  letter-spacing: 0.02em;
}

/* Category tag links at the bottom of a post */
.entry-content + .entry-meta,
.entry-footer,
.entry-categories {
  max-width: 760px;
  margin: 2.4rem auto 0 auto;
  padding-top: 1.4rem;
  border-top: 1px solid #e2ddd6;
}

/* Give the whole content area on single posts some side breathing
   room on smaller screens where GeneratePress's container can run
   edge-to-edge */
.single .site-main,
.page .site-main {
  padding: 2.5rem 5% 4rem;
}

@media (max-width: 600px) {
  .entry-content { font-size: 1rem; line-height: 1.75; }
  .single .site-main,
  .page .site-main { padding: 1.6rem 6% 3rem; }
}


/* ---------------------------------------------------------------
   PART 2 — MAGAZINE-STYLE BLOG GRID
   Used by template-blog.php. Scoped to .jao-blog-wrap so it
   never bleeds into other pages.
--------------------------------------------------------------- */

.jao-blog-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 3rem 5% 5rem;
}

.jao-blog-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.jao-blog-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d73b10;
  margin-bottom: 0.8rem;
}

.jao-blog-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 900;
  letter-spacing: -1px;
  color: #1a1714;
  margin: 0 0 0.8rem 0;
}

.jao-blog-sub {
  font-size: 1rem;
  color: #5a554e;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.7;
}

.jao-bp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.jao-bp-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #e2ddd6;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s;
}

.jao-bp-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(215, 59, 16, 0.14);
}

.jao-bp-thumb-link {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f0ede8;
}

.jao-bp-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.jao-bp-card:hover .jao-bp-thumb {
  transform: scale(1.06);
}

.jao-bp-thumb-fallback {
  background: linear-gradient(135deg, #fdf0ec, #f4c4b5);
}

.jao-bp-cat-badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background: rgba(26, 23, 20, 0.78);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

.jao-bp-body {
  padding: 1.5rem 1.5rem 1.7rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.jao-bp-meta {
  font-size: 0.74rem;
  color: #9c9489;
  letter-spacing: 0.03em;
  margin-bottom: 0.6rem;
}

.jao-bp-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.7rem 0;
  color: #1a1714;
}

.jao-bp-title a {
  color: inherit;
  text-decoration: none;
}

.jao-bp-title a:hover {
  color: #d73b10;
}

.jao-bp-excerpt {
  font-size: 0.88rem;
  color: #5a554e;
  line-height: 1.65;
  margin: 0 0 1.1rem 0;
  flex: 1;
}

.jao-bp-readmore {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d73b10;
  text-decoration: none;
  align-self: flex-start;
}

.jao-bp-readmore:hover {
  text-decoration: underline;
}

/* First card in the whole grid gets a bigger "featured" treatment */
.jao-bp-grid .jao-bp-card:first-child {
  grid-column: span 2;
}
.jao-bp-grid .jao-bp-card:first-child .jao-bp-thumb-link {
  aspect-ratio: 16 / 8;
}
.jao-bp-grid .jao-bp-card:first-child .jao-bp-title {
  font-size: 1.5rem;
}

.jao-blog-loadmore-wrap {
  text-align: center;
  margin-top: 3.5rem;
}

.jao-blog-loadmore {
  background: #d73b10;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 1rem 2.6rem;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(215, 59, 16, 0.35);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.jao-blog-loadmore:hover {
  background: #a82c0a;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(215, 59, 16, 0.45);
}

.jao-blog-loadmore:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.jao-blog-loadmore.is-loading {
  position: relative;
  color: transparent;
}

.jao-blog-loadmore.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: jaoSpin 0.7s linear infinite;
}

@keyframes jaoSpin {
  to { transform: rotate(360deg); }
}

.jao-blog-end-msg {
  text-align: center;
  margin-top: 2.5rem;
  font-size: 0.85rem;
  color: #9c9489;
}

/* New cards fade in as they're appended */
.jao-bp-card.jao-bp-fade-in {
  animation: jaoCardFadeIn 0.5s ease forwards;
}

@keyframes jaoCardFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .jao-bp-grid { grid-template-columns: repeat(2, 1fr); }
  .jao-bp-grid .jao-bp-card:first-child { grid-column: span 2; }
}

@media (max-width: 640px) {
  .jao-bp-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .jao-bp-grid .jao-bp-card:first-child { grid-column: span 1; }
  .jao-bp-grid .jao-bp-card:first-child .jao-bp-thumb-link { aspect-ratio: 16/10; }
  .jao-bp-grid .jao-bp-card:first-child .jao-bp-title { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .jao-bp-card, .jao-bp-thumb, .jao-blog-loadmore { transition: none; }
  .jao-bp-card.jao-bp-fade-in { animation: none; opacity: 1; }
}