/*
 Theme Name: Blockbase Child
 Template: blockbase
 Version: 1.0.0
*/
/* Put this at the end of style.css, below the header comment */

/* Subtle callouts by format (tweak to taste) */
.single .format-quote .wp-block-quote { border-left: 4px solid currentColor; padding-left: 1rem; }
.single .format-aside .entry-content { opacity: .9; font-style: italic; }
.single .format-gallery .wp-block-gallery { gap: .75rem; }

/* NextGEN gallery: let it fill content width cleanly */
.entry-content .ngg-galleryoverview,
.entry-content .ngg-albumoverview { max-width: var(--wp--style--global--content-size, 720px); margin: 1rem auto; }

/* Ensure image and media inside post content are fluid */
.wp-block-post-content img,
.wp-block-post-content video,
.wp-block-post-content iframe,
.wp-block-post-content .ngg-galleryoverview,
.wp-block-post-content .ngg-albumoverview {
  width: 100%;
  max-width: 100%;
  height: auto;
}
/* base caption look */
p.image-caption {
  font-size: 0.9rem;
  color: rgb(129, 129, 129);
  margin-top: 0.4rem;
  line-height: 1.4;
}

/* tidy spacing when it follows a NextGEN singlepic */
.ngg-singlepic + p.image-caption,
.ngg-gallery-singlepic + p.image-caption {
  margin-top: 0.5rem;
}
.wp-site-blocks > main.wp-block-query { position: relative; }
.wp-site-blocks > main.wp-block-query::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/images/codes_burst2.png') no-repeat right top;
  background-size: 480px auto;
  pointer-events: none;
  z-index: 0;
  transform: translateY(-100px); /* move upward 50 px */
}

.wp-site-blocks > main.wp-block-query > * { position: relative; z-index: 1; }

/* white card style for each post block */
.wp-site-blocks > main.wp-block-query > ul.wp-block-post-template > li.wp-block-post {
  background: #fff;
  padding: 2em;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  margin-bottom: 2em;
}
.wp-site-blocks > main.wp-block-query::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/images/codes_burst2.png') no-repeat right top;
  background-size: 480px auto;
  pointer-events: none;
  z-index: 0;
  transform: translateY(-50px);
}

/* unified burst background — keep this one only */
.wp-site-blocks > main { position: relative; }
.wp-site-blocks > main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/images/codes_burst2.png') no-repeat right top;
  background-size: clamp(200px, 35vw, 480px) auto;
  pointer-events: none;
  z-index: 0;
  transform: translateY(-100px);
}
/* Burst that scales on every mobile browser */
body .wp-site-blocks > main.wp-block-query::before,
body .wp-site-blocks > main::before {
  background: url('/images/codes_burst2.png?v=mobile1') right top / 480px no-repeat !important;
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: translateY(-80px) !important;
}

@media (max-width: 1200px) {
  body .wp-site-blocks > main.wp-block-query::before,
  body .wp-site-blocks > main::before { background-size: 360px auto !important; }
}
@media (max-width: 900px) {
  body .wp-site-blocks > main.wp-block-query::before,
  body .wp-site-blocks > main::before { background-size: 300px auto !important; }
}
@media (max-width: 700px) {
  body .wp-site-blocks > main.wp-block-query::before,
  body .wp-site-blocks > main::before { background-size: 240px auto !important; }
}
@media (max-width: 480px) {
  body .wp-site-blocks > main.wp-block-query::before,
  body .wp-site-blocks > main::before { background-size: 200px auto !important; }
}

/* tighten header-to-main spacing on small screens only */
@media (max-width: 700px) {
  header.wp-block-template-part {
    margin-bottom: .25rem !important;  /* tighten gap */
    padding-bottom: 0 !important;
  }

  .wp-site-blocks > main {
    margin-top: 0 !important;
    padding-top: .25rem !important;
  }
}

/* Ensure the site title link inherits */
.wp-block-site-title,
.wp-block-site-title a {
  font-family: var(--wp--preset--font-family--big-shoulders);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--wp--preset--color--custom-color-1);
  text-decoration: none;
}

/* body { box-shadow: inset 0 0 0 6px magenta !important; } */

/* Mobile body text */
@media (max-width: 782px) {
  body, .wp-site-blocks {
    font-size: 14px !important; /* change to taste */
    line-height: 1.6;
  }

  /* Make common text inherit that size even if presets or inline styles were set */
  .wp-site-blocks p,
  .wp-site-blocks li,
  .wp-site-blocks dd,
  .wp-site-blocks dt,
  .wp-site-blocks figcaption,
  .wp-block-paragraph[style*="font-size"],
  .wp-block-list[style*="font-size"],
  [class*="has-"][class*="-font-size"] {
    font-size: inherit !important;
  }
}

/* Mobile: tighten ONLY the content area, never the header/footer */
@media (max-width: 782px) {
    :root { --nc-mobile-gutter: 0px; } /* change to taste */

  /* zero out main's own side padding so cards can reach the viewport gutter */
  .wp-site-blocks > main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Query Loop list container: remove its side padding/margins */
  .wp-site-blocks > main.wp-block-query > ul.wp-block-post-template {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Card: control viewport gutter and inner padding */
  .wp-site-blocks > main.wp-block-query > ul.wp-block-post-template > li.wp-block-post {
    /* viewport gutter left/right */
    margin: 0 var(--nc-mobile-gutter, 8px) 1.25rem var(--nc-mobile-gutter, 8px) !important;
    /* text-to-edge inside the white card */
    padding: 0.9rem !important;  /* top/bottom unchanged, left/right = 0.5rem */ /* adjust to taste */
    border-radius: 8px;
  }

  /* Single post pages that are not inside a Query Loop */
  .single .wp-site-blocks > main .entry-content {
    margin-left: var(--nc-mobile-gutter, 8px) !important;
    margin-right: var(--nc-mobile-gutter, 8px) !important;
  }

  /* Kill stray inner paddings inside content only */
  .wp-site-blocks > main .wp-block-group,
  .wp-site-blocks > main .wp-block-group__inner-container,
  .wp-site-blocks > main .wp-block-columns,
  .wp-site-blocks > main .wp-block-column,
  .wp-site-blocks > main .wp-block-post-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Media should span the card width cleanly */
  .wp-site-blocks > main .wp-block-image,
  .wp-site-blocks > main .wp-block-image img {
    width: 100% !important;
    height: auto;
  }
}