/* =========================================================
   MMM DAILY PLANET — HEADER / BRAND / NAV
   Theme: Missouri Mars Mavens (space navy + Mars rust accents)
   Use on all “Daily Planet” blog postings.
   ========================================================= */

/* ---------- Theme tokens (safe defaults) ---------- */
:root{
  --mmm-header-700: #d88a4a; /* light rust */
  --mmm-header-900: #b85a2c; /* darker rust */

  /* Backgrounds (borrowed from short-stories) */
  --page-bg:  #f3e6d6;              /* dusty parchment */
  --panel-bg: rgba(255,255,255,0.84);

  /* Accents (rust / copper) */
  --accent:      #b24a2b;
  --accent-2:    #d07b3a;

  /* Core ink + backgrounds */
  --mmm-ink: #eaf1ff;                 /* light ink on dark header */
  --mmm-ink-soft: rgba(234,241,255,.78);
  --mmm-ink-dim: rgba(234,241,255,.62);

  --mmm-space-900: #071427;           /* deep space */
  --mmm-space-800: #0b1e3a;           /* navy */
  --mmm-space-700: #12335f;           /* brighter navy for gradient */
  --mmm-border: rgba(234,241,255,.12);

  /* Mars accent */
  --mmm-mars: #c94b2f;                /* Mars rust */
  --mmm-mars-soft: rgba(201,75,47,.22);

  /* Button surfaces */
  --mmm-pill: rgba(255,255,255,.10);
  --mmm-pill-hover: rgba(255,255,255,.16);
  --mmm-pill-border: rgba(234,241,255,.18);

  /* Shadows */
  --mmm-shadow: 0 10px 26px rgba(0,0,0,.35);

  /* Hook for other rules if you want */
  --ink-primary: var(--mmm-ink);
}

/* =========================
   HEADER / BRAND / NAV
   ========================= */

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;

  /* Space-gradient with a subtle Mars glow */
  background:
    radial-gradient(900px 240px at 85% 10%, var(--mmm-mars-soft) 0%, rgba(201,75,47,0) 60%),
    linear-gradient(180deg, var(--mmm-header-700) 0%, var(--mmm-header-900) 100%);

  border-bottom: 1px solid var(--mmm-border);
}

header .brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

header h1{
  margin:0;
  font-size:22px;
  letter-spacing:0.2px;
  color:var(--mmm-ink);
  line-height:1.1;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Subline: e.g., “Daily Planet • Missouri Mars Mavens” */
header .sub{
  font-size:13px;
  color:var(--mmm-ink-soft);

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

header nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Nav buttons */
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;

  color:var(--mmm-ink);
  background: var(--mmm-pill);
  border:1px solid var(--mmm-pill-border);
  box-shadow: var(--mmm-shadow);

  transition: transform .08s ease, background .2s ease, border-color .2s ease;
  font-size:14px;
  white-space:nowrap;
}

.btn:hover{
  background: var(--mmm-pill-hover);
  border-color: rgba(234,241,255,.28);
}

.btn:active{
  transform: translateY(1px);
}

/* Optional “accent” button if you want one (e.g., Subscribe / Donate)
   Usage: <a class="btn btn-accent" ...> */
.btn.btn-accent{
  background: linear-gradient(180deg, rgba(201,75,47,.92) 0%, rgba(201,75,47,.78) 100%);
  border-color: rgba(201,75,47,.55);
  color: #fff;
}

/* Keyboard focus (accessibility) */
.btn:focus-visible{
  outline: 2px solid rgba(201,75,47,.85);
  outline-offset: 2px;
}

/* =========================
   MOBILE HEADER
   Subline gets its own row under brand + nav
   ========================= */

@media (max-width: 560px){

  header{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "nav"
      "sub";
    align-items:start;
    gap:10px;
    padding:14px 14px;
  }

  header .brand{ grid-area: brand; min-width:0; }

  header nav{
    grid-area: nav;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:8px;
  }

  .brand-text{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }

  header h1{
    font-size:20px;
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
    line-height:1.15;
  }

  header .sub{
    grid-area: sub;
    justify-self:start;

    /* keep it clean: no pill feel on mobile */
    padding:0;
    border:0;
    border-radius:0;
    background: transparent;
    box-shadow:none;

    font-size:12.5px;
    line-height:1.25;
    white-space:normal;
    max-width:100%;
    color: var(--mmm-ink-dim);
  }

  .btn{
    padding:9px 12px;
  }
}

.mmm-thumb{
   width: 56px; height: 56px; border-radius: 12px; overflow:hidden;
   border:1px solid rgba(234,241,255,.18);
   background: rgba(255,255,255,.10);
   box-shadow: 0 10px 22px rgba(0,0,0,.35);
   flex: 0 0 auto
   }

 .mmm-thumb img{ width:100%; height:100%; object-fit:cover; display:block;
}

body{
  background: var(--page-bg);
}

.text-box{
  background: var(--panel-bg);
}