/* ============================================================================
   SHARKBYTEZ — SHARED STYLESHEET
   ============================================================================
   Design system: bright pop-art / comic-strip. Ben-Day halftone dots, bold
   panel borders, rotated "burst" badges. Mobile-first: base rules are the
   phone layout; the desktop two-column layout (content + sticky sidebar ad)
   is added at 900px+.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Bangers&family=Lexend:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* Color tokens — comic/pop-art palette */
  --ink:            #14110F;   /* near-black, warm */
  --paper:          #FFFDF5;   /* warm off-white, not pure white */
  --comic-red:      #FF3B30;
  --comic-yellow:   #FFD400;
  --comic-blue:     #1C6DD0;
  --comic-pink:     #FF3D81;
  --comic-blue-ink: #0E3E73;   /* darker blue for text on yellow/white */
  --line:           rgba(20,17,15,0.12);

  /* Type */
  --font-display: 'Archivo Black', sans-serif;
  --font-burst:   'Bangers', cursive;
  --font-body:    'Lexend', sans-serif;
  --font-mono:    'Space Mono', monospace;

  --radius: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;           /* Mediavine: 18-20px body minimum */
  line-height: 1.6;          /* Mediavine: 1.5-1.6 line height */
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--comic-blue-ink); text-decoration: none; }
a:hover{ text-decoration: underline; }

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

:focus-visible{
  outline: 3px solid var(--comic-blue);
  outline-offset: 3px;
}

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3{
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink);
}

/* ── Halftone texture (signature texture, used sparingly) ───────────────── */
.halftone{
  position: relative;
}
.halftone::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--ink) 1.4px, transparent 1.6px);
  background-size: 12px 12px;
  opacity: 0.06;
}

/* ── HEADER ───────────────────────────────────────────────────────────── */
.site-header{
  background: var(--ink);
  border-bottom: 6px solid var(--comic-yellow);
  padding: 14px 0;
  position: relative;
  z-index: 20;
}
.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo{
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-burst);
  font-size: 2rem;
  letter-spacing: 0.02em;
  color: var(--paper);
  line-height: 1;
}
.logo .z{
  color: var(--comic-yellow);
  -webkit-text-stroke: 1.5px var(--ink);
}
.logo img{ height: 40px; width: auto; } /* swap in your uploaded logo image here */

.main-nav{ display: none; gap: 24px; }
.main-nav a{
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.main-nav a:hover{ color: var(--comic-yellow); text-decoration: none; }

.menu-toggle{
  display: inline-flex;
  background: none;
  border: 2px solid var(--paper);
  border-radius: 8px;
  color: var(--paper);
  padding: 6px 10px;
  cursor: pointer;
}

.mobile-nav{
  display: none;
  flex-direction: column;
  gap: 2px;
  background: var(--ink);
  border-bottom: 6px solid var(--comic-yellow);
}
.mobile-nav.open{ display: flex; }
.mobile-nav a{
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ── LAYOUT: content + sidebar ───────────────────────────────────────── */
.page-layout{
  display: block;
  padding: 28px 0 60px;
}
.content-col{ min-width: 0; }
.sidebar-col{ display: none; } /* hidden on mobile, shown at 900px+ */

/* ── TOPIC BURST BADGE (signature element) ───────────────────────────── */
.topic-burst{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.burst-shape{
  font-family: var(--font-burst);
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--comic-yellow);
  padding: 8px 18px 6px;
  transform: rotate(-3deg);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 4px 4px 0 var(--ink);
  display: inline-block;
}
.date-stamp{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  border: 2px dashed var(--ink);
  border-radius: 999px;
  padding: 5px 12px;
  transform: rotate(2deg);
}

/* ── COMIC PANEL (the image) ──────────────────────────────────────────── */
.comic-panel{
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--comic-blue);
  margin-bottom: 24px;
  position: relative;
}
.comic-panel img{ width: 100%; height: auto; }
.comic-panel .placeholder-art{
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background:
    radial-gradient(var(--comic-blue) 2px, transparent 2.2px) 0 0/20px 20px,
    linear-gradient(160deg, #FFF7D6, #FFE9A8);
  color: var(--comic-blue-ink);
  text-align: center;
  padding: 20px;
}
.placeholder-art strong{ font-family: var(--font-burst); font-size: 1.6rem; }
.placeholder-art span{ font-family: var(--font-mono); font-size: 0.8rem; opacity: 0.75; }

/* ── HEADLINE / META ──────────────────────────────────────────────────── */
.post-title{
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  margin-bottom: 10px;
}
.post-meta{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: rgba(20,17,15,0.6);
  margin-bottom: 20px;
}

/* ── SHARE BAR ────────────────────────────────────────────────────────── */
.share-bar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
}
.share-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
  box-shadow: 3px 3px 0 var(--ink);
}
.share-btn:hover{
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
  text-decoration: none;
}
.share-btn.reddit:hover{ background: var(--comic-red); color: var(--paper); }
.share-btn.x:hover{ background: var(--ink); color: var(--paper); }
.share-btn.facebook:hover{ background: var(--comic-blue); color: var(--paper); }

/* ── ARTICLE BODY (short paragraphs, large type) ─────────────────────── */
.post-body p{
  margin: 0 0 1.3em;
  max-width: 68ch;
}
.post-body h2{ font-size: 1.3rem; margin-top: 1.6em; }

/* ── AD SLOTS (placeholders — replace with real ad network embed code) ── */
.ad-slot{
  margin: 32px 0;
  border: 3px dashed var(--line);
  border-radius: 10px;
  background: repeating-linear-gradient(135deg, rgba(20,17,15,0.03) 0 10px, transparent 10px 20px);
  padding: 26px 16px;
  text-align: center;
}
.ad-slot span{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(20,17,15,0.4);
}
.ad-slot.in-content{ min-height: 90px; display:flex; align-items:center; justify-content:center; }
.ad-slot.sidebar-sticky{
  min-height: 600px;
  display:flex; align-items:center; justify-content:center;
}

/* ── SIDEBAR ──────────────────────────────────────────────────────────── */
.sidebar-inner{ position: sticky; top: 24px; }
.sidebar-card{
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 20px;
  background: var(--paper);
}
.sidebar-card h3{ font-size: 1rem; margin-bottom: 10px; }
.sidebar-card p{ font-size: 0.9rem; color: rgba(20,17,15,0.7); margin: 0; }

/* ── MORE COMICS GRID ─────────────────────────────────────────────────── */
.more-comics{ margin-top: 56px; }
.more-comics h2{
  font-size: 1.5rem;
  border-bottom: 4px solid var(--ink);
  padding-bottom: 10px;
  margin-bottom: 22px;
}
.comics-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.comic-card{
  border: 3px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  box-shadow: 5px 5px 0 rgba(20,17,15,0.15);
}
.comic-card:hover{
  transform: translateY(-4px);
  box-shadow: 6px 6px 0 var(--comic-pink);
}
.comic-card .thumb{
  aspect-ratio: 4/3;
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(160deg, #E9F3FF, #CFE6FF);
  color: var(--comic-blue-ink);
  font-family: var(--font-burst);
  font-size: 1.1rem;
  text-align:center;
  padding: 12px;
}
.comic-card .card-body{ padding: 14px 16px 18px; }
.comic-card .card-tag{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--comic-pink);
  margin-bottom: 6px;
  display:block;
}
.comic-card h3{ font-size: 1rem; margin: 0; }

/* ── FOOTER ───────────────────────────────────────────────────────────── */
.site-footer{
  background: var(--ink);
  color: rgba(255,253,245,0.75);
  padding: 40px 0 30px;
  margin-top: 60px;
  border-top: 6px solid var(--comic-yellow);
}
.site-footer .wrap{
  display:flex;flex-direction:column;gap:18px;
  align-items:flex-start;
}
.footer-links{ display:flex; flex-wrap:wrap; gap:16px 24px; }
.footer-links a{
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}
.footer-links a:hover{ color: var(--comic-yellow); }
.footer-note{ font-size: 0.78rem; color: rgba(255,253,245,0.45); font-family: var(--font-mono); }

/* ── STATIC PAGES (About / Privacy) ──────────────────────────────────── */
.static-page{ padding: 40px 0 70px; }
.static-page h1{ font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 20px; }
.static-page h2{ font-size: 1.3rem; margin-top: 1.8em; }
.static-page p, .static-page li{ max-width: 70ch; }
.static-page ul{ padding-left: 1.3em; }

/* ── DESKTOP LAYOUT (900px+) ──────────────────────────────────────────── */
@media (min-width: 900px){
  .main-nav{ display: flex; }
  .menu-toggle{ display: none; }

  .page-layout .wrap{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: start;
  }
  .sidebar-col{ display: block; }

  .comics-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 640px) and (max-width: 899px){
  .comics-grid{ grid-template-columns: repeat(2, 1fr); }
}