/* INSIDERPIZZA.COM — Design v4 (Tomato Red) — Varia/Maywood */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&display=swap');

:root {
  --ip-red:    #C0392B;
  --ip-dark:   #8B1A10;
  --ip-cream:  #FFF8F0;
  --ip-warm:   #F5DEB3;
  --ip-text:   #2C1A0E;
  --ip-muted:  #6D5A50;
  --ip-edge:   #E8DDD5;
  --ip-link:   #922B21;
  --ip-head:   'Playfair Display', Georgia, serif;
  --ip-body:   'Inter', -apple-system, sans-serif;
}

body { font-family: var(--ip-body); background: var(--ip-cream); color: var(--ip-text); }
h1,h2,h3,h4 { font-family: var(--ip-head); color: var(--ip-text); }
a { color: var(--ip-link); }
a:hover { color: var(--ip-red); }

/* LOGO FIX — override the 1408x768 intrinsic size */
img.custom-logo,
.custom-logo-link img,
.site-logo img,
#masthead img {
  height: 60px !important;
  width: auto !important;
  max-width: 240px !important;
  object-fit: contain !important;
}

/* Header — Red, NO max-height, NO overflow */
.site-header {
  background-color: var(--ip-red) !important;
  border-bottom: 3px solid var(--ip-dark) !important;
}
.site-header a, .main-navigation a, .site-title a, .site-description {
  color: #fff !important;
  text-decoration: none;
}
.site-header a:hover, .main-navigation a:hover { color: var(--ip-warm) !important; }

/* Site title and description */
.site-title { font-family: var(--ip-head) !important; font-size: 1.4em !important; margin: 0 !important; }
.site-title a { color: #fff !important; }
.site-description { color: rgba(255,255,255,.75) !important; font-size: 13px !important; margin: 0 !important; }

/* Post cards */
article.type-post, .hentry {
  background: #fff;
  border: 1px solid var(--ip-edge);
  border-top: 4px solid var(--ip-red);
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 28px;
}
.entry-title { font-family: var(--ip-head) !important; }
.entry-title a { color: var(--ip-text) !important; text-decoration: none !important; }
.entry-title a:hover { color: var(--ip-red) !important; }
.entry-meta, .posted-on, .byline, .cat-links, .tags-links { font-size: 13px; color: var(--ip-muted); }

/* Recipe cards */
.recipe-card { background: var(--ip-warm); border-left: 4px solid var(--ip-red); border-radius: 6px; padding: 24px; margin: 28px 0; }
.recipe-card .recipe-title { font-family: var(--ip-head); color: var(--ip-red); font-size: 22px; font-weight: 700; margin-bottom: 12px; }

/* Affiliate CTA */
.affiliate-cta { display:grid; grid-template-columns:100px 1fr; gap:16px; border:2px solid var(--ip-edge); border-radius:8px; padding:24px; margin:28px 0; background:#fff; }
.affiliate-cta .btn-amazon { display:block; background:var(--ip-red); color:#fff; font-weight:700; text-align:center; padding:12px; border-radius:4px; text-decoration:none; margin-top:8px; }
.affiliate-cta .btn-amazon:hover { background: var(--ip-dark); }

/* FTC */
.ftc-disclosure { background:#fff3ed; border-left:4px solid var(--ip-red); padding:16px 20px; margin:24px 0; font-size:14px; border-radius:0 4px 4px 0; }

/* Buttons */
.wp-block-button__link, button[type="submit"] { background: var(--ip-red) !important; color: #fff !important; font-weight: 600; }
.wp-block-button__link:hover { background: var(--ip-dark) !important; }

/* Footer */
.site-footer { background: var(--ip-red) !important; color: rgba(255,255,255,.85) !important; padding: 48px 24px; }
.site-footer a { color: rgba(255,255,255,.75) !important; text-decoration: none; }
.site-footer a:hover { color: #fff !important; }

/* Sidebar */
.widget-area { background: #fff; border: 1px solid var(--ip-edge); border-radius: 6px; padding: 24px; }
.widget-title { font-family: var(--ip-head); color: var(--ip-red); border-bottom: 2px solid var(--ip-red); padding-bottom: 8px; margin-bottom: 16px; }

/* Ad zones */
.ad-zone { text-align:center; margin:28px auto; }
.ad-zone-leaderboard { max-width:728px; min-height:90px; }

/* =========================================================
   Header & Navigation — Visibility Fix  (GHOA-131)
   Override white-on-white nav text with dark warm tones.
   ========================================================= */

/* --- Nav container colour tokens ----------------------- */
.wp-block-navigation {
    --wp--custom--color--foreground: #3d2b1a;
    color: #3d2b1a;
}

/* --- Primary nav links --------------------------------- */
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__label,
.wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content {
    color: #3d2b1a !important;
    text-decoration: none !important;
}

.wp-block-navigation a:hover,
.wp-block-navigation a:focus,
.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__label:hover {
    color: #b07542 !important;
    text-decoration: underline !important;
}

/* --- Active / current page ----------------------------- */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
    color: #b07542 !important;
    font-weight: 700 !important;
}

/* --- Submenu (dropdown) -------------------------------- */
.wp-block-navigation .wp-block-navigation__submenu-container {
    background-color: #fff8f0 !important;
    border: 1px solid #e8d5c0 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container a,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
    color: #3d2b1a !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container a:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__label:hover {
    color: #b07542 !important;
    background-color: #fdf0e4 !important;
}

/* --- Submenu chevron icon ------------------------------ */
.wp-block-navigation .wp-block-navigation__submenu-icon svg {
    stroke: #3d2b1a !important;
    fill: #3d2b1a !important;
}

/* --- Mobile hamburger / toggle button ------------------ */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
    color: #3d2b1a !important;
    border-color: #3d2b1a !important;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
    stroke: #3d2b1a !important;
    fill: #3d2b1a !important;
}

/* --- Mobile overlay menu ------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: #fff8f0 !important;
    color: #3d2b1a !important;
}

.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
    color: #3d2b1a !important;
}

/* --- Site header background safety net ----------------- */
header.wp-block-template-part,
.wp-site-blocks > header {
    background-color: #ffffff !important;
}

/* Fix logged-in admin-bar avatar: keep the Gravatar at its native size. */
#wpadminbar img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: unset !important;
  object-position: unset !important;
}


/* =====================================================================
   INSIDER PIZZA - COMPACT POST GRID (proposal 2026-10-17)
   Theme: Maywood (child of Varia), classic PHP theme on WordPress.com.
   Paste at the END of Appearance, Customize, Additional CSS.
   Scope: ONLY post listings - body.home.blog (Your latest posts),
   body.blog (posts page), body.archive (category, tag, date, author).
   Single posts (body.single) and pages (body.page) are never matched,
   because every selector starts with one of those body classes and
   targets #main, which on those templates holds a single article.
   Colours and fonts reuse the live tokens: --ip-red C0392B, --ip-edge,
   --ip-text, --ip-muted, --ip-font-heading Playfair Display,
   --ip-font-body DM Sans.
   ===================================================================== */

/* ---------- 1. The listing container becomes a grid ---------- */
body.blog #main,
body.archive #main {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  max-width: var(--ip-full-width, 1320px);
  margin: 0 auto;
  padding: 20px 24px 8px;
  box-sizing: border-box;
}

/* Archive heading and pagination span the full row */
body.blog #main .page-header,
body.archive #main .page-header,
body.blog #main .navigation,
body.archive #main .navigation,
body.blog #main .no-results,
body.archive #main .no-results {
  grid-column: 1 / -1;
  max-width: none;
  width: 100%;
  margin: 0;
}
body.archive #main .page-header {
  padding: 0;
  text-align: left;
}
body.archive #main .page-header .page-title {
  font-size: 28px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
body.blog #main .navigation.pagination,
body.archive #main .navigation.pagination {
  margin-top: 12px;
  padding-bottom: 8px;
}
body.blog #main .navigation.pagination .nav-links,
body.archive #main .navigation.pagination .nav-links {
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}

/* ---------- 2. Each post becomes a compact card ---------- */
body.blog #main article.type-post,
body.archive #main article.type-post {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: auto;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ip-edge, #E8DDD5);
  border-top: 4px solid var(--ip-red, #C0392B);
  border-radius: 6px;
  transition: box-shadow .15s ease, transform .15s ease;
}
body.blog #main article.type-post:hover,
body.archive #main article.type-post:hover {
  box-shadow: var(--ip-shadow-md, 0 4px 12px rgba(0,0,0,.08));
  transform: translateY(-2px);
}

/* Thumbnail first (it comes after the title in the markup) */
body.blog #main article.type-post .post-thumbnail,
body.archive #main article.type-post .post-thumbnail {
  order: -1;
  margin: 0 !important;
  max-width: none;
  width: 100%;
}
body.blog #main article.type-post .post-thumbnail-inner,
body.archive #main article.type-post .post-thumbnail-inner {
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
body.blog #main article.type-post .post-thumbnail img,
body.archive #main article.type-post .post-thumbnail img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 16 / 9;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Title */
body.blog #main article.type-post .entry-header,
body.archive #main article.type-post .entry-header {
  max-width: none !important;
  width: auto;
  margin: 0 !important;
  padding: 12px 14px 0 !important;
  border: 0 !important;
  text-align: left;
}
body.blog #main article.type-post .entry-title,
body.archive #main article.type-post .entry-title {
  font-size: 17px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-transform: none !important;
}
body.blog #main article.type-post .entry-title a,
body.archive #main article.type-post .entry-title a {
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  color: var(--ip-text, #2C1A0E) !important;
}
body.blog #main article.type-post .entry-title a:hover,
body.archive #main article.type-post .entry-title a:hover {
  color: var(--ip-red, #C0392B) !important;
}
/* Whole card clickable via the title link (keeps one real link, good for a11y) */
body.blog #main article.type-post,
body.archive #main article.type-post { position: relative; }
body.blog #main article.type-post .entry-title a::after,
body.archive #main article.type-post .entry-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* One-line excerpt; Continue reading link hidden (title and image link to the post) */
body.blog #main article.type-post .entry-content,
body.archive #main article.type-post .entry-content {
  max-width: none !important;
  width: auto;
  margin: 0 !important;
  padding: 6px 14px 14px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--ip-muted, #6D5A50);
}
body.blog #main article.type-post .entry-content p,
body.archive #main article.type-post .entry-content p {
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}
/* Anything after the first excerpt paragraph (full-content fallback) is hidden.
   No child or angle-bracket combinators are used anywhere in this file. */
body.blog #main article.type-post .entry-content p:first-child ~ :not(.wordads-tag),
body.archive #main article.type-post .entry-content p:first-child ~ :not(.wordads-tag) {
  display: none !important;
}
body.blog #main article.type-post .entry-content .more-link,
body.archive #main article.type-post .entry-content .more-link {
  display: none !important;
}
/* Meta footer stays hidden (already hidden site-wide by ip-hide-post-meta) */
body.blog #main article.type-post .entry-footer,
body.archive #main article.type-post .entry-footer {
  display: none !important;
}
/* Below-post ad slot: keep it, but out of the card padding flow so an
   empty slot adds no height. See optional-hide-card-ads.css for the choice. */
body.blog #main article.type-post .wordads-tag,
body.archive #main article.type-post .wordads-tag {
  padding-bottom: 0 !important;
  margin: 0 !important;
  position: relative;
  z-index: 2;
}

/* Posts without a featured image: title gets a little more room */
body.blog #main article.type-post:not(.has-post-thumbnail) .entry-header,
body.archive #main article.type-post:not(.has-post-thumbnail) .entry-header {
  padding-top: 16px !important;
}

/* ---------- 3. Breakpoints ---------- */
/* Laptop: 3 across */
@media (max-width: 1279px) {
  body.blog #main,
  body.archive #main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Tablet: 2 across */
@media (max-width: 1023px) {
  body.blog #main,
  body.archive #main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 20px 20px 8px; }
}
/* Phone: compact rows, small thumbnail left, title right, no excerpt */
@media (max-width: 599px) {
  body.blog #main,
  body.archive #main {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 14px 12px 8px;
  }
  body.archive #main .page-header .page-title { font-size: 24px !important; }
  body.blog #main article.type-post,
  body.archive #main article.type-post {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 12px;
    border-top-width: 1px;
    border-left: 4px solid var(--ip-red, #C0392B);
    border-radius: 6px;
    padding: 8px !important;
    align-items: center;
  }
  body.blog #main article.type-post:hover,
  body.archive #main article.type-post:hover { transform: none; }
  body.blog #main article.type-post .post-thumbnail,
  body.archive #main article.type-post .post-thumbnail {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
  }
  body.blog #main article.type-post .post-thumbnail img,
  body.archive #main article.type-post .post-thumbnail img {
    aspect-ratio: 1 / 1;
    border-radius: 4px !important;
  }
  body.blog #main article.type-post .entry-header,
  body.archive #main article.type-post .entry-header {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 0 !important;
  }
  body.blog #main article.type-post:not(.has-post-thumbnail) .entry-header,
  body.archive #main article.type-post:not(.has-post-thumbnail) .entry-header {
    grid-column: 1 / -1;
    padding: 6px 4px !important;
  }
  body.blog #main article.type-post .entry-title,
  body.archive #main article.type-post .entry-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  body.blog #main article.type-post .entry-content,
  body.archive #main article.type-post .entry-content {
    grid-column: 1 / -1;
    padding: 0 !important;
  }
  body.blog #main article.type-post .entry-content p,
  body.archive #main article.type-post .entry-content p { display: none !important; }
}

/* OPTIONAL - only if real ads render INSIDE the post cards on the listing pages.
   Jetpack WordAds prints a below-post ad slot (div.wordads-tag, data-slot-type belowpost)
   inside every excerpt on the home and archive listings. In the saved HTML it was empty
   (the ad JS fills it at runtime), so the preview cannot show what a filled slot does to a card.
   Preferred fix: turn off below-post ads for the front page and archives in the Ads settings
   (Jetpack or WordPress.com Earn, Ads), which removes the slot server-side.
   Only if that setting is not available, add this AFTER compact-grid.css. Hiding a slot
   with CSS may still load the ad request and can affect ad revenue and reporting, so it is a
   business decision for Julius, not a default. */
body.blog #main article.type-post .wordads-tag[data-slot-type="belowpost"],
body.archive #main article.type-post .wordads-tag[data-slot-type="belowpost"] {
  display: none !important;
}