/* ==========================================================================
   REFLECTEDGROUND.COM — CLEAN CONSOLIDATED CSS
   Theme: Hello (Elementor Free) + WordPress blocks (Query Loop)
   Goals:
   - Inter font everywhere
   - Body text = 16px (1rem)
   - Rationalised H1–H6 sizing (includes Elementor Heading widget)
   - Remove conflicting duplicates; keep your layouts + cards + single-post sidebar
   ========================================================================== */


/* ==========================================================================
   1) GLOBAL TYPOGRAPHY + RHYTHM (Inter, 16px base)
   ========================================================================== */

html { font-size: 16px; } /* 1rem = 16px */

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #111;
}

/* Reading width: keep content readable without squashing full-width layouts */
.single-post .entry-content,
.page .entry-content {
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/* Paragraph rhythm */
.entry-content p,
.elementor-widget-theme-post-content p {
  margin: 0 0 1.1em;
}

/* Unified heading scale (rem-based) */
:root{
  --h1: 2.0rem; /* 32px */
  --h2: 1.625rem; /* 26px */
  --h3: 1.25rem;/* 20px */
  --h4: 1.25rem; /* 20px */
  --h5: 1.0rem;/* 16px */
  --h6: 1.00rem; /* 16px */
}

/* Apply heading styling to Gutenberg headings AND Elementor Heading widgets */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.elementor-widget-heading .elementor-heading-title {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.2;
  margin: 1.6em 0 0.6em;
}

/* Individual heading sizes */
.entry-content h1,
.elementor-widget-heading h1.elementor-heading-title { font-size: var(--h1); line-height: 1.1; }

.entry-content h2,
.elementor-widget-heading h2.elementor-heading-title { font-size: var(--h2); }

.entry-content h3,
.elementor-widget-heading h3.elementor-heading-title { font-size: var(--h3); line-height: 1.25; }

.entry-content h4,
.elementor-widget-heading h4.elementor-heading-title { font-size: var(--h4); line-height: 1.3; }

.entry-content h5,
.elementor-widget-heading h5.elementor-heading-title { font-size: var(--h5); line-height: 1.35; }

.entry-content h6,
.elementor-widget-heading h6.elementor-heading-title { font-size: var(--h6); line-height: 1.4; }

/* Slightly lighter lower headings */
.entry-content h4, .entry-content h5, .entry-content h6,
.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-heading h5.elementor-heading-title,
.elementor-widget-heading h6.elementor-heading-title {
  font-weight: 500;
}

/* Images */
.entry-content img,
.elementor-widget-theme-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Random polish */
img { color: transparent; }

/* Email + Instagram links inside paragraphs */
p a[href^="mailto:"],
p a[href*="instagram.com"] {
  color: #014A99 !important;
}
p a[href^="mailto:"]:visited,
p a[href^="mailto:"]:hover,
p a[href^="mailto:"]:focus,
p a[href*="instagram.com"]:visited,
p a[href*="instagram.com"]:hover,
p a[href*="instagram.com"]:focus {
  color: #014A99 !important;
}


/* ==========================================================================
   2) QUERY LOOP (Blog/Archive cards) — grid + cards + images + links
   Targets:
   .wp-block-query .wp-block-post-template (UL)
   .wp-block-post-template > li (each card)
   ========================================================================== */

/* Force Query Loop to display as a 3-column grid */
.wp-block-query .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 20px !important;
  row-gap: 20px !important;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Responsive: 2 cols tablet, 1 col mobile */
@media (max-width: 900px) {
  .wp-block-query .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  .wp-block-query .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

/* Featured images consistent crop */
.wp-block-query .wp-block-post-featured-image img {
  width: 100%;
  height: 160px;          /* adjust if you want taller cards */
  object-fit: cover;
  display: block;
}

/* Card styling */
.wp-block-query .wp-block-post-template > li {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 16px;
  background: #F2EFE8;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  height: 100%;
  box-sizing: border-box;
  text-align: left !important;

  display: flex;
  flex-direction: column;
}

.wp-block-query .wp-block-post-template > li:hover {
  border-color: #bbb;
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
}

/* Remove underline from Query Loop post titles */
.wp-block-query .wp-block-post-title a {
  text-decoration: none !important;
}
.wp-block-query .wp-block-post-title a:hover {
  text-decoration: underline;
}

/* Read more button styling */
.wp-block-read-more {
  display: inline-block;
  padding: 10px 14px;
  text-decoration: none;
  border-radius: 6px;
}

/* Optional flex helpers if you’ve added these classes in the block editor */
.post-card-body { flex: 1; }

.post-card-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  text-align: left !important;
  width: 100%;
}

.post-card-footer .wp-block-post-date,
.post-card-footer .wp-block-read-more {
  align-self: flex-start !important;
  text-align: left !important;
}

.post-card-footer .wp-block-read-more,
.post-card-footer .wp-block-read-more a {
  justify-content: flex-start !important;
}


/* ==========================================================================
   3) QUERY LOOP PAGINATION
   ========================================================================== */

.wp-block-query-pagination .page-numbers {
  color: #505050;
  text-decoration: none;
}
.wp-block-query-pagination .page-numbers.current {
  color: #000;
  font-weight: 600;
}
.wp-block-query-pagination .page-numbers:hover {
  color: #000;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  color: #505050;
  text-decoration: none;
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
  color: #000;
}


/* ==========================================================================
   4) BLOG PAGE (page-id-8808) — center listing + hide page H1
   ========================================================================== */

body.page-id-8808 .entry-title {
  display: none !important;
}

body.page-id-8808 .site-main {
  max-width: 800px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Remove offsets on query loop list */
body.page-id-8808 .wp-block-query,
body.page-id-8808 .wp-block-post-template {
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ==========================================================================
   5) HIDE PAGE TITLES (specific pages)
   ========================================================================== */

.page-id-9183 .entry-title { display: none !important; }
.page-id-9246 .entry-title { display: none !important; }
.page-id-8488 .entry-title { display: none !important; }


/* ==========================================================================
   6) ESSAYS PAGES — Narrow wrapper + force 1-column loop
   Use classes on the page container:
   - .essays-narrow (wrapper width)
   - .essays-loop (force 1 column)
   ========================================================================== */

.essays-narrow,
.essays-loop {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* If WP uses flex container layout in query loop */
.essays-narrow .wp-block-post-template.is-flex-container {
  flex-direction: column !important;
}
.essays-narrow .wp-block-post-template.is-flex-container > li {
  width: 100% !important;
  flex-basis: 100% !important;
  max-width: 100% !important;
}

/* Force Query Loop ONE column even if grid CSS exists */
.essays-loop .wp-block-post-template {
  display: block !important;
}
.essays-loop .wp-block-post-template > li {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
  margin-bottom: 40px;
}
.essays-loop .wp-block-post-template > li:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   7) SINGLE POST — content + sidebar layout (desktop), stacked (mobile)
   Notes:
   - Keep title readable, but let global heading scale handle in-content headings.
   - Sidebar targets common containers (#secondary / .widget-area).
   ========================================================================== */

/* Overall wrapper */
body.single-post .site-main {
  max-width: 700px; /* room for content + sidebar */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Two-column layout */
body.single-post .site-main .content-area {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(260px, 1fr);
  gap: 48px;
  align-items: start;
}

/* Constrain post header/content column */
body.single-post .entry-header,
body.single-post article.post,
body.single-post .entry-content,
body.single-post .elementor-widget-theme-post-content {
  max-width: 700px;
  box-sizing: border-box;
}

/* Ensure header/meta visible */
body.single-post .entry-header,
body.single-post .entry-title,
body.single-post .entry-meta,
body.single-post .posted-on,
body.single-post .byline,
body.single-post time.entry-date {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

/* Post title styling (separate from in-content H1s) */
body.single-post .entry-title {
  font-size: 2rem;     /* 32px */
  font-weight: 600;
  line-height: 1.15;
  margin: 18px 0 10px;
}

/* Meta styling */
body.single-post .entry-meta {
  font-size: 1rem;
  font-weight: 400;
  margin: 0 0 22px;
  opacity: 0.85;
}
body.single-post .entry-meta a {
  text-decoration: none;
}
body.single-post .entry-meta a:hover {
  text-decoration: underline;
}

/* Sidebar container */
body.single-post #secondary,
body.single-post .widget-area {
  width: 100%;
}

/* Sidebar widgets */
body.single-post #secondary .widget,
body.single-post .widget-area .widget {
  padding: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 18px;
  box-sizing: border-box;
}

/* Sidebar widget titles */
body.single-post #secondary .widget-title,
body.single-post .widget-area .widget-title {
  font-size: 1rem;
  margin: 0 0 10px;
  font-weight: 650;
}

/* Optional: sticky sidebar on desktop */
@media (min-width: 901px) {
  body.single-post #secondary,
  body.single-post .widget-area {
    position: sticky;
    top: 24px;
    align-self: start;
  }
}

/* Responsive: stack sidebar under content */
@media (max-width: 900px) {
  body.single-post .site-main {
    max-width: 700px;
  }
  body.single-post .site-main .content-area {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body.single-post .entry-header,
  body.single-post article.post,
  body.single-post .entry-content,
  body.single-post .elementor-widget-theme-post-content {
    max-width: 100%;
  }
}


/* ==========================================================================
   8) MISC: hide related posts blocks/plugins
   ========================================================================== */

.related-posts,
.related-posts-grid,
.jp-relatedposts,
.yarpp-related {
  display: none !important;
}
/* Reduce default heading top spacing */
.elementor-widget-heading .elementor-heading-title {
  margin-top: 0;
}
/* Essays page: force featured image to center */
.page-id-9246 .post-thumbnail,
.page-id-9246 .featured-image,
.page-id-9246 .wp-post-image {
  text-align: center;
}

.page-id-9246 .post-thumbnail img,
.page-id-9246 img.wp-post-image {
  display: block !important;
  width: 70% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* If the parent is flex/grid, this finishes the job */
.page-id-9246 .post-thumbnail,
.page-id-9246 .featured-image {
  display: flex;
  justify-content: center;
}
.page-id-9246 figure.post-thumbnail,
.page-id-9246 figure.wp-block-post-featured-image,
.page-id-9246 .wp-block-post-featured-image {
  display: flex;
  justify-content: center;
}
/* Page ID 9246 (Essays): featured image 70% wide, centered, cropped to 3:2 */
.page-id-9246 .post-thumbnail,
.page-id-9246 figure.wp-block-post-featured-image,
.page-id-9246 .wp-block-post-featured-image,
.page-id-9246 .featured-image {
  display: flex !important;
  justify-content: center !important;
}

/* Target the featured image itself */
.page-id-9246 .post-thumbnail img,
.page-id-9246 figure.wp-block-post-featured-image img,
.page-id-9246 .wp-block-post-featured-image img,
.page-id-9246 img.wp-post-image {
  display: block !important;
  width: 85% !important;
  aspect-ratio: 3 / 2 !important;   /* force 3:2 */
  height: auto !important;
  object-fit: cover !important;      /* crop to fill */
  object-position: center !important;
  margin: 0 auto !important;
}
/* Force heading colour */
h1, h2, h3, h4, h5, h6 {
  color: #505050 !important;
}
/* Common tag blocks/selectors in themes */
.entry-footer .tags-links,
.tags-links,
.post-tags,
.tag-links,
.wp-block-post-terms.is-style-tags,
.taxonomy-post_tag {
  display: none !important;
}