/* Wasteland Lore single-mode overrides for Tripoli */
:root{
  --wl-bg:#0F0F0F;           /* soot */
  --wl-ink:#E4D7C5;          /* sand */
  --wl-ink-2:#9B9387;        /* ash */
  --wl-accent:#A34E28;       /* rust */
  --wl-accent-2:#5C2B18;     /* dark rust */
  --wl-edge:rgba(255,255,255,.12);
  color-scheme: dark;
}

/* Map to Tripoli tokens */
:root{
  --color-text-primary: var(--wl-ink);
  --color-text-secondary: var(--wl-ink-2);
  --color-bg-primary: var(--wl-bg);
  --color-bg-secondary:#171717;
  --color-bg-tertiary:#1d1d1d;
  --color-border-primary: var(--wl-edge);
  --color-accent: var(--wl-accent);
  --color-accent-contrast:#fff;
}

/* Global sand/grit background */
html, body {
  background:
    #0F0F0F
    url("/content/images/2025/10/dirt.png") repeat; /* your new tile */
  background-size: 768px 768px;   /* try 512–1024px to taste */
    color: var(--wl-ink);
}

/* Optional: subtle vignette to keep edges moody and text readable */
html::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 20%, rgba(0,0,0,0) 40%, rgba(0,0,0,.25) 100%);
  z-index: -1;
}



a{ color:var(--wl-accent); }
a:hover,a:focus{ color:#d86d46; text-decoration:none; }

/* Header / nav */
.c-header,.site-header,.site-nav{
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-nav a{ color:var(--wl-ink); opacity:.9; }
.site-nav a:hover{ opacity:1; }

/* Cards & containers */
.post-card,.article-card,.kg-card,.post,.c-cta,.c-box{
  border:1px solid var(--wl-edge);
  border-radius:14px;
  background:rgba(0,0,0,.35);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 60px rgba(163,78,40,.05);
}
.post-card:hover{ transform:translateY(-1px); }

/* Buttons */
button,.button,.c-btn,[type="submit"]{
  color:#fff!important;
  background:linear-gradient(180deg,var(--wl-accent),var(--wl-accent-2));
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 0 30px rgba(255,255,255,.05);
}
button:hover,.button:hover,.c-btn:hover,[type="submit"]:hover{
  filter:brightness(1.05) contrast(1.02);
}

/* Content */
.gh-content,.post-content{ color:var(--wl-ink); }
.gh-content h1,.gh-content h2,.gh-content h3,
.post-content h1,.post-content h2,.post-content h3{
  color:var(--wl-ink); text-transform:none; letter-spacing:.02em;
}

/* Callouts */
.kg-callout-card{
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(0,0,0,.35);
}
.kg-callout-card.yellow{ border-color:rgba(240,215,110,.35); box-shadow:inset 0 0 40px rgba(240,215,110,.08) }
.kg-callout-card.red   { border-color:rgba(216,109,70,.35);  box-shadow:inset 0 0 40px rgba(216,109,70,.10) }
.kg-callout-card.blue  { border-color:rgba(110,170,240,.30); box-shadow:inset 0 0 40px rgba(110,170,240,.08) }

/* Code blocks */
pre,code{
  background:rgba(0,0,0,.55)!important;
  border:1px solid rgba(255,255,255,.08);
  color:#EADCCB;
}

/* Footer */
img{ filter:contrast(1.05) saturate(.9); }
.site-footer{ background:rgba(0,0,0,.5); border-top:1px solid rgba(255,255,255,.06); }

/* Hero + sections */
.c-hero,.c-header-cover{ min-height:420px; background-size:cover; background-position:center; }
.c-section{ padding:1.25rem 0 1.75rem; }
.c-section-title{ margin:0 0 .75rem; }

/* Tag archive timeline separators */
body.tag-template .post-feed .post-card:not(:first-child){
  margin-top:1.2rem; padding-top:1.2rem; border-top:1px dashed rgba(255,255,255,.12);
}

/* Tribe row ABOVE the title (from card.hbs) */
.tribe-badge{
  width:80px; height:80px;
  object-fit:cover;
  margin:0;
}
.c-card__tribe{
  display:flex; align-items:center; gap:.5rem;
  margin:0 0 .55rem 0; text-decoration:none;
}
.c-card__tribe-name{
  line-height:1; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  color:var(--wl-ink); opacity:.95;
}

/* Card content padding (helps no-image cards) */
.c-card__content{ padding:1rem 1.1rem 1.1rem !important; }
article.no-image .c-card__content{ padding-top:1.15rem !important; }

/* Tribe emblem overlay ON the thumbnail (inset from edges) */
.c-card__media{ position:relative; overflow:hidden; }
.c-card__media :is(.c-card__tag,.c-tag){
  position:absolute !important;
  top:14px !important; left:14px !important;
  padding:0 !important; margin:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  display:inline-flex !important;
}
.c-card__media :is(.c-card__tag img,.c-tag img){
  width:34px !important; height:34px !important;
  border-radius:50% !important; object-fit:cover !important;
  border:1px solid rgba(255,255,255,.25) !important; display:block !important;
}
.c-card__media :is(.c-card__tag span,.c-tag span){ display:none !important; } /* emblem only */

/* Hide non-tribe tag UI in CARD CONTENT & posts (keep tribe row + overlay) */
.c-card__content :is(.c-tag,.c-card__tag){ display:none !important; }
.c-editors-picks-wrapper :is(.c-tag,.c-card__tag),
.sidebar :is(.c-tag,.c-card__tag){ display:none !important; }
.post :is(.c-post__tags,.post-tags,.article-tags,.tags){ display:none !important; }

/* Hide the PUBLIC/visibility pill */
.c-card__meta :is(.label,.c-label,[class*="visibility"]),
.post :is(.label,.c-label,[class*="visibility"]){ display:none !important; }

/* ---------- Teasers (left column & lists) ---------- */

/* Comfortable content padding on teasers */
.c-teaser__content{ padding:10px 12px 12px !important; }

/* ONLY hide tag pills inside the teaser CONTENT area (do NOT hide overlay on image) */
.c-teaser__content :is(.c-tag,.c-card__tag){ display:none !important; }

/* Overlay tribe badge on teaser images */
.c-teaser__media{ position:relative; overflow:hidden; }
.c-teaser__media :is(.c-tag,.c-card__tag){
  position:absolute !important; top:14px !important; left:14px !important;
  padding:0 !important; margin:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
  display:inline-flex !important;
}
.c-teaser__media :is(.c-tag img,.c-card__tag img){
  width:32px !important; height:32px !important; border-radius:50% !important;
  object-fit:cover !important; border:1px solid rgba(255,255,255,.25) !important; display:block !important;
}
.c-teaser__media :is(.c-tag span,.c-card__tag span){ display:none !important; } /* emblem only */

/* Accessibility / polish */
:focus-visible{ outline:2px solid rgba(163,78,40,.85); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }

/* Misc */
::selection{ background:#3b2a25; color:#fff; }
hr{ border-color:rgba(255,255,255,.12); }




/* Darken the sand only under the content area */
#main {                    /* the main content wrapper in Tripoli */
  position: relative;
  z-index: 0;
}

/* A subtle, centered overlay that sits behind cards */
#main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, calc(100% - 40px)); /* match your content lane */
  height: 100%;
  background: rgba(0,0,0,.18);          /* adjust darkness here */
  pointer-events: none;
  z-index: 0;

  /* Soft fade on the left/right edges so it blends into the sand */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0 24px,
    #000 80px calc(100% - 80px),
    transparent calc(100% - 24px) 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0 24px,
    #000 80px calc(100% - 80px),
    transparent calc(100% - 24px) 100%
  );
}

/* Ensure real content sits above the overlay */
#main > * {
  position: relative;
  z-index: 1;
}


/* === Wasteland Lore: Rust panel card skin =============================== */
/* Uses your image: https://wastelandlore.com/content/images/2025/10/rust-panel.jpg */

.c-card,
.post-card,
.article-card,
.c-teaser,
.kg-card,
.c-cta,
.c-box {
  position: relative;
  /* Darken for readability, then lay the rust panel behind */
  background:
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.52)),
    url("https://wastelandlore.com/content/images/2025/10/rust-panel.jpg");
  background-size: cover, cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Frame/finish to match your palette */
  border: 1px solid rgba(227,168,134,.20);     /* dusty bronze edge */
  border-radius: 14px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 0 60px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* Inner spacing (kept modest so the texture is visible) */
.c-card__content { padding: 1rem 1.1rem 1.1rem; }

/* Teaser variant */
.c-teaser {
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.48)),
    url("https://wastelandlore.com/content/images/2025/10/rust-panel.jpg");
  background-size: cover, cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Optional: subtle “hardware” details (corner rivets) */
.c-card::before,
.c-card::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 2px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), rgba(0,0,0,0) 60%),
    rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 1px 4px rgba(0,0,0,.5);
}
.c-card::before { top: 10px; left: 12px; }
.c-card::after  { bottom: 10px; right: 12px; }

/* Gentle interaction */
.c-card:hover,
.c-teaser:hover { filter: brightness(1.03) contrast(1.01); }

/* === Header background image === */
.c-header { 
  background: transparent;            /* let the image show through */
  border-bottom: none;                /* optional: remove the old line */
}

.c-header__top{
  position: relative;
  background-image: url("https://wastelandlore.com/content/images/2025/10/header4-1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;   /* <-- anchor to bottom */
}


/* Soft vignette so links stay legible on any part of the image */
.c-header__top::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(10,10,10,.55) 0%,
      rgba(10,10,10,.25) 45%,
      rgba(10,10,10,.55) 100%);
}

/* Keep the nav bar that sits inside the header transparent */
.site-nav{
  background: transparent;
  border-bottom: 0;
}