/* =========================================================
   SUNSETNERDVERSE – Unified, Mobile-Ready, AdSense-Compliant CSS
   Applies sitewide: Home, Posts, Pages, Archives, Categories, Tags
   ========================================================= */

/* --- Base / Layout --- */
:root{
  --max-site-width:1200px;
  --max-content-width:960px;
  --pink:#f72585;
  --pink-glow:#9e0059;
  --blue:#4cc9f0;
  --blue-glow:#00f7ff;
  --deep:#0f3460;
  --deep-2:#16213e;
  --bg:#1a1a2e;
  --text:#f0f0f0;
  --purple:#7209b7;
}

html{scroll-behavior:smooth}
body{
  font-family:'Courier New', Courier, monospace;
  line-height:1.6;
  margin:0 auto;
  padding:20px;
  max-width:var(--max-site-width);
  background-color:var(--bg);
  color:var(--text);
}

/* Keep inner content pleasantly narrow for readability */
.content-section{
  background-color:var(--deep);
  padding:20px;
  margin:0 auto 30px auto;
  max-width:var(--max-content-width);
  box-shadow:0 4px 8px rgba(76,201,240,.6);
  border-radius:5px;
}

/* --- Typography --- */
h1,h2,h3{
  text-align:center;
  color:var(--pink);
  text-shadow:1px 1px 5px var(--pink-glow); /* softened for readability */
  margin:0 0 16px 0;
}
h2,h3{
  font-size:1.6em;
  margin-top:30px;
  color:var(--blue);
  text-shadow:1px 1px 4px var(--blue-glow);
}

p,a,li,blockquote{
  font-size:1.1em;
  color:var(--text);
  line-height:1.7;
  text-align:justify; /* unified reading alignment */
}

a{text-decoration:underline}
a:hover{color:var(--pink)}
a:focus,button:focus{outline:2px solid var(--pink); outline-offset:2px}

/* Lists (no bullets look) */
ul{list-style:none; padding-left:0; margin:0 0 20px}
ul li{margin:0 0 10px; color:var(--blue)}

/* --- Thumbnails on Home / Archive / Category / Tag --- */
/* Wrap maintains a clean 16:9 box so grids don't jump */
.home .post-thumbnail,
.archive .post-thumbnail,
.category .post-thumbnail,
.tag .post-thumbnail,
.home .carousel,
.home .banner{
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  aspect-ratio:16/9;          /* keeps rows tidy */
  background:rgba(0,0,0,.15); /* subtle backdrop behind letterboxed images */
  border:3px solid var(--purple);
  box-shadow:0 0 10px var(--purple);
  border-radius:4px;
}

/* Always show the full image without cropping; center it */
.home .post-thumbnail img,
.archive .post-thumbnail img,
.category .post-thumbnail img,
.tag .post-thumbnail img,
.home .carousel img,
.home .banner img{
  display:block;
  margin:0 auto;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;  /* full image visible (may letterbox) */
}

/* Homepage/Archive titles inside cards: readable & no clipping */
.home .entry-title,
.archive .entry-title,
.category .entry-title,
.tag .entry-title{
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3; /* clamp to 3 lines on desktop */
  line-height:1.35;
  text-align:center;
  padding:10px 6px 0;
  margin:0;
}

/* --- Single Posts & Pages --- */
/* Hide theme’s duplicate post title & featured image inside content */
.single-post h1.entry-title,
.single-post .wp-post-image{display:none !important}

.centered-image,
.single-post img,
.page img{
  display:block;
  margin:20px auto;
  max-width:100%;
  height:auto;
  border:4px solid var(--purple);  /* consistent frame in content */
  box-shadow:0 0 10px var(--purple);
  border-radius:5px;
}

/* Pros & Cons */
.pros-cons-container{
  display:flex;
  gap:4%;
  justify-content:center;
  max-width:var(--max-content-width);
  margin:40px auto 0;
}
.pros,.cons{
  flex:1 1 48%;
  background-color:var(--deep-2);
  padding:20px;
  border-radius:5px;
  text-align:center;
  box-shadow:0 4px 8px rgba(76,201,240,.6);
}

/* Grading system – force perfect centering */
.grading-system{
  margin:40px auto;
  max-width:var(--max-content-width);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.grading-system .grade{
  font-size:3em;
  font-weight:700;
  color:var(--pink);
  margin:10px 0;
  text-shadow:0 0 10px var(--pink-glow);
  display:block;
}

/* Embedded media */
iframe{
  display:block;
  margin:20px auto;
  max-width:100%;
  width:100%;
  border:none;
  box-shadow:0 0 10px #3a0ca3;
}

/* Footer widgets */
#nav_menu-9,#nav_menu-8,#nav_menu-4{
  background-color:var(--deep);
  padding:20px;
  color:var(--text);
  box-shadow:0 4px 8px rgba(76,201,240,.6);
  font-family:'Courier New', Courier, monospace;
}

/* Image rows (inline galleries) */
.image-row{
  display:flex; justify-content:center; align-items:center;
  gap:0; flex-wrap:wrap; max-width:100%; margin:19px auto;
}
.image-row img{
  max-width:calc(25% - 0px);
  height:auto;
  border:4px solid var(--purple);
  box-shadow:0 0 10px var(--purple);
  border-radius:5px;
}

/* --- Accessibility niceties --- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* --- Responsive Tweaks --- */
@media (max-width:1024px){
  .image-row img{max-width:calc(50% - 0px)}
  .home .entry-title,
  .archive .entry-title,
  .category .entry-title,
  .tag .entry-title{-webkit-line-clamp:3}
}

@media (max-width:768px){
  body{padding:16px}
  h1{font-size:1.6rem}
  h2,h3{font-size:1.25rem}
  .content-section{padding:16px; margin-bottom:24px}
  .image-row{flex-direction:column; gap:0}
  .image-row img{max-width:100%}
  .home .entry-title,
  .archive .entry-title,
  .category .entry-title,
  .tag .entry-title{-webkit-line-clamp:2}
}

/* Tiny phones */
@media (max-width:480px){
  p,li,blockquote{font-size:1rem}
}

/* Jetpack Search Thumbnails Fix */
.jetpack-search-result__thumbnail img,
.jetpack-instant-search__result-thumbnail img {
    max-width: 100px;   /* Limit width on mobile */
    height: auto;
    object-fit: contain; 
    border: 2px solid #7209b7; /* Keep synthwave styling */
    box-shadow: 0 0 6px #7209b7;
    margin: 0 auto;
    display: block;
}

/* Responsive scaling */
@media (max-width: 768px) {
    .jetpack-search-result__thumbnail img,
    .jetpack-instant-search__result-thumbnail img {
        max-width: 80px; /* Smaller thumbnails for phones */
    }
}

/* WordPress Related Posts Thumbnails */
.related-posts img,
.wp-block-related-posts img {
    display: block !important;
    margin: 0 auto 10px auto;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border: 2px solid #f72585; /* Neon pink to differentiate */
    box-shadow: 0 0 6px #f72585;
}

/* Ensure the container doesn’t collapse */
.related-posts,
.wp-block-related-posts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

/* ===========================
   Banner Section Fix with Line Clamp
   =========================== */
.home .banner .entry-title {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    max-height: 4.5em; /* ~3 lines based on 1.5 line-height */
    line-height: 1.5em;
    padding: 10px 15px;
    text-align: center;
}

.home .banner .post-tag,
.home .banner .entry-meta {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    line-height: 1.4em;
    padding: 5px 15px;
    text-align: center;
}

/* Ensure banner text container adapts */
.home .banner .post-content,
.home .banner .entry-header {
    height: auto !important;
    overflow: visible !important;
}

/* Responsive Banner Font Sizes */
@media (max-width: 1024px) {
    .home .banner .entry-title {
        font-size: 1.2em !important;
        -webkit-line-clamp: 3; /* Still 3 lines on tablets */
    }
    .home .banner .post-tag,
    .home .banner .entry-meta {
        font-size: 1em !important;
        -webkit-line-clamp: 2;
    }
}

@media (max-width: 768px) {
    .home .banner .entry-title {
        font-size: 1.1em !important;
        -webkit-line-clamp: 2; /* Shorter titles on mobile */
    }
    .home .banner .post-tag,
    .home .banner .entry-meta {
        font-size: 0.9em !important;
        -webkit-line-clamp: 1;
    }
}