/* main.css — Site layout and content styles */

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

:root {
  --page-bg:      #5cb8b5;
  --content-bg:   #5cb8b5;
  --text-main:    #2a2420;
  --text-dim:     #ffc830;
  --border:       #e99e4368;
  --accent:       #8b4513;
  --link:         #8b4513;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  color: var(--text-main);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
}

/* ── Page structure ───────────────────────────────────────────────── */

/* Top ad slot */
.ad-slot-top {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
  background: #235370;
  border-bottom: 1px solid var(--border);
}

/* Middle section: left ad | content | right ad */
.page-body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 0;
  min-height: calc(100vh - 200px);
}

/* Side ad slots */
.ad-slot-left,
.ad-slot-right {
  flex-shrink: 0;
  padding-top: 4px;
}

/* ── Main content area ────────────────────────────────────────────── */
.content {
  flex: 1;
  min-width: 0;
  max-width: 580px;
  padding: 0 24px;
}

.content h1 {
  font-size: 1.9rem;
  font-weight: normal;
  color: var(--text-main);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 20px;
}

.content h2 {
  font-size: 1.2rem;
  font-weight: normal;
  color: var(--accent);
  margin: 28px 0 10px;
}

.content p {
  margin-bottom: 16px;
  color: var(--text-main);
}

.content img {
  max-width: 100%;
  border: 1px solid var(--border);
  display: block;
  margin: 16px 0;
}

/* Entry / journal post styling */
.entry {
  padding: 16px 0;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 16px;
}

.entry-date {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  font-family: 'Gill Sans', sans-serif;
}

.content blockquote {
  border-left: 3px solid var(--border);
  margin: 16px 0;
  padding: 4px 16px;
  color: var(--text-dim);
  font-style: italic;
}

/* NO anchor tags in content — navigation is through ads only.
   If you ever add non-nav links (e.g. external sources), style them here. */

/* ── Bottom ad slot ───────────────────────────────────────────────── */
.ad-slot-bottom {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
  background: #d8d0c4;
  border-top: 1px solid var(--border);
}

/* ── Sticky floating ad ───────────────────────────────────────────── */
.ad-sticky {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  /* visibility controlled by JS after a short delay */
}

/* ── Responsive ───────────────────────────────────────────────────── */

/* Tablet / narrow desktop: stack layout.
   Right ad (placeholder) disappears. Left ad (nav game) moves below content. */
@media (max-width: 900px) {
  .page-body {
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
  }
  .content {
    order: 1;
    padding: 0 16px;
    max-width: 100%;
    width: 100%;
  }
  .ad-slot-left {
    order: 2;          /* sits below content */
    padding: 12px 0 4px;
  }
  .ad-slot-right { display: none; }
}

/* Hide top/bottom leaderboard ads on narrower screens */
@media (max-width: 740px) {
  .ad-slot-top,
  .ad-slot-bottom { display: none; }
}

/* Mobile: shrink sticky ad to a small corner widget instead of a screen slab.
   The iframe (300×250) is scaled down via transform; the outer box clips it. */
@media (max-width: 600px) {
  .ad-sticky {
    bottom: 8px;
    right: 8px;
    width: 180px;      /* 300 × 0.6 */
    height: 150px;     /* 250 × 0.6 */
    overflow: hidden;
  }
  .ad-sticky iframe {
    width: 300px !important;
    height: 250px;
    transform: scale(0.6);
    transform-origin: top left;
  }
}