/*
Theme Name: Jonas Blog (Clean)
Version: 1.0
*/

/* =========================
   Fonts + Base (modern, no serif)
   ========================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root{
  --max: 860px;
  --pad: 1.5rem;

  --bg: #fff;
  --text: #111;
  --text-2: #222;
  --muted: #777;
  --line: rgba(0,0,0,.10);
}

*{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; height: auto; display: block; }

/* Links: modern, ruhig */
a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover{ opacity: .85; }

/* =========================
   Remove ALL "card" visuals everywhere
   ========================= */
.blog-item,
.post,
article,
.wp-block-group,
.wp-block-post,
.entry-content,
.post__content,
.site-main,
main {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* =========================
   Hide Header / Branding (no "JG", no top-left logo)
   ========================= */
.site-header,
#header,
#headerimg{
  display: none !important;
}

/* Optional: also hide old theme footer/powered-by blocks if they appear */
#footer{
  display: none !important;
}

/* HR lines toned down if any remain */
hr{
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* =========================
   Layout / Container
   ========================= */
.site-main,
.site-main.blog,
main.site-main,
main.blog{
  max-width: var(--max);
  margin: 0 auto;
  padding: 6rem var(--pad) 7rem;
}

/* =========================
   Blog Overview (your home.php classes)
   ========================= */
.blog-header{
  text-align: left;
  margin-bottom: 3rem;
}

.blog-header h1{
  margin: 0 0 .75rem;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.blog-intro{
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 55ch;
}

.blog-item{
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--line);
}

.post-category{
  display: inline-block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: #888;
  margin-bottom: .6rem;
}

.blog-title{
  margin: 0 0 .7rem;
}

.blog-title a{
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-decoration: none;
  color: var(--text);
}
.blog-title a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 1;
}

.blog-date{
  display: block;
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.blog-excerpt{
  margin: 0;
  color: var(--text-2);
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 70ch;
}

.blog-readmore{
  display: inline-block;
  margin-top: 1rem;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================
   Single Post (matches your single.php classes)
   ========================= */
.post__top{
  margin-bottom: 1.5rem;
}

.post__back{
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--muted);
}
.post__back:hover{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post__meta{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 1rem;
}

.post__dot{
  opacity: .5;
}

.post__title{
  margin: 0 0 1.5rem;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -0.03em;
}

.post__content{
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-2);
}

.post__content p{
  margin: 0 0 1.2rem;
}

/* Gutenberg content defaults */
.entry-content :where(h2,h3){
  margin: 2rem 0 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.entry-content :where(ul,ol){
  padding-left: 1.2rem;
  margin: 0 0 1.2rem;
}

.entry-content :where(figcaption){
  color: var(--muted);
  font-size: .9rem;
  margin-top: .5rem;
}

.post__footer{
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9rem;
}

/* =========================
   Mobile tweaks
   ========================= */
@media (max-width: 640px){
  :root{ --pad: 1.2rem; }

  .site-main,
  .site-main.blog{
    padding: 4.5rem var(--pad) 6rem;
  }

  .blog-item{
    padding: 2rem 0;
  }
}