/*
Theme Name: Trench Crusade Campaign
Theme URI: https://example.com/
Author: You
Description: A black and white theme for documenting an 8-player Trench Crusade campaign.
Version: 1.0
License: GNU General Public License v2 or later
*/

body {
  background: #fff;
  color: #000;
  font-family: "Georgia", serif;
  margin: 0;
  padding: 0;
}

header, nav, footer {
  text-align: center;
  padding: 20px;
}

h1, h2, h3, h4 {
  font-family: 'Boycott', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  margin: 20px 0 10px 0;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: inline-block;
  margin: 0 15px;
  font-size: 1.2em;
}

nav a {
  font-family: 'Boycott', sans-serif;
  font-size: 1.4em;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #000;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

nav a:hover {
  text-decoration: underline;
  color: #333;
}

nav li.current-menu-item a {
  text-decoration: underline;
}


.container {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

footer {
  border-top: 1px solid #000;
  font-size: 0.9em;
  margin-top: 40px;
}

/* Page layouts */
.article-img-left, .article-img-right {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
}

.article-img-left img,
.article-img-right img {
  max-width: 40%;
  height: auto;
  margin: 0 20px;
}

.article-img-left {
  flex-direction: row;
}

.article-img-right {
  flex-direction: row-reverse;
}

.article-img-left .text,
.article-img-right .text {
  flex: 1;
}

/* Battles Page */
.battles-page {
  margin-top: 40px;
}

.battle-entry {
  border: 1px solid #000;
  padding: 20px;
  margin-bottom: 30px;
  background: #fff;
}

.battle-entry h3 {
  font-family: 'Boycott', sans-serif;
  margin-top: 0;
}

.battle-meta {
  font-size: 0.9em;
  margin-bottom: 15px;
  font-style: italic;
}

.battle-description {
  margin-bottom: 15px;
}

.battle-photo img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ===== Classic Barbed Wire ===== */
.barbed-sep {
  display: block;
  height: 28px;
  margin: 20px 0;
  border: 0;
  background-repeat: repeat-x;
  background-size: 40px 28px;
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='28' viewBox='0 0 40 28'><line x1='0' y1='9' x2='40' y2='9' stroke='%23000' stroke-width='1'/><line x1='0' y1='18' x2='40' y2='18' stroke='%23000' stroke-width='1'/><path d='M6 14 L10 12 L8 14 L10 16 Z' fill='%23000'/><path d='M20 14 L24 12 L22 14 L24 16 Z' fill='%23000'/><path d='M34 14 L38 12 L36 14 L38 16 Z' fill='%23000'/></svg>");
}

/* ===== Grittier Hand-Drawn Barbed Wire ===== */
.barbed-sep-gritty {
  display: block;
  height: 36px;
  margin: 20px 0;
  border: 0;
  background-repeat: repeat-x;
  background-size: 60px 36px;
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='36' viewBox='0 0 60 36'><path d='M0 12 Q15 8 30 12 T60 12' stroke='%23000' stroke-width='2' fill='none'/><path d='M0 24 Q15 20 30 24 T60 24' stroke='%23000' stroke-width='2' fill='none'/><path d='M10 18 L14 14 L12 18 L14 22 Z' fill='%23000'/><path d='M30 18 L34 14 L32 18 L34 22 Z' fill='%23000'/><path d='M50 18 L54 14 L52 18 L54 22 Z' fill='%23000'/></svg>");
}

/* ===== Animated Shimmer Barbed Wire ===== */
.barbed-sep-animated {
  position: relative;
  display: block;
  height: 36px;
  margin: 20px 0;
  border: 0;
  background-repeat: repeat-x;
  background-size: 60px 36px;
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='36' viewBox='0 0 60 36'><line x1='0' y1='12' x2='60' y2='12' stroke='%23000' stroke-width='1'/><line x1='0' y1='24' x2='60' y2='24' stroke='%23000' stroke-width='1'/><path d='M10 18 L14 14 L12 18 L14 22 Z' fill='%23000'/><path d='M30 18 L34 14 L32 18 L34 22 Z' fill='%23000'/><path d='M50 18 L54 14 L52 18 L54 22 Z' fill='%23000'/></svg>");
  overflow: hidden;
}

.barbed-sep-animated::after {
  content: "";
  position: absolute;
  top: 0; left: -150%;
  width: 200%; height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.5) 50%,
    transparent 100%
  );
  animation: shimmer-move 3s infinite linear;
}

@keyframes shimmer-move {
  from { left: -150%; }
  to { left: 100%; }
}