/*
 * Reiver Games Online — board-game theme
 * Structured to mirror the original WordPress "Origami" child theme:
 * keeps #page-container, #logo, nav#menu.primary, .post / .entry-title /
 * .post-info / .content, figure.wp-block-image, h2.wp-block-heading, #footer.
 * The look-and-feel is a tabletop board-game skin layered on top.
 */

/* ---------- design tokens ---------- */
:root{
  --parchment:#f3e7cd;
  --parchment-2:#efe0bf;
  --board-dark:#2c1c10;
  --wood:#5c3d24;
  --wood-light:#7a5230;
  --leather:#3b2a1a;
  --reiver-red:#8c2b22;
  --reiver-red-dark:#6e1f18;
  --gold:#c79a3a;
  --gold-bright:#e6c25c;
  --meeple-green:#3f7d4e;
  --meeple-blue:#2f6690;
  --ink:#2b2118;
  --ink-soft:#5a4a38;
  --tile-a:#e9d6ad;
  --tile-b:#dcc191;
  --shadow:0 6px 0 rgba(0,0,0,.18), 0 14px 26px rgba(0,0,0,.28);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  font-family:"Spectral","EB Garamond",Georgia,"Times New Roman",serif;
  font-size:18px;
  line-height:1.6;
  background-color:#241710;
  /* felt + board texture */
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 8px),
    radial-gradient(circle at 20% 0%, #3a2616 0%, #241710 60%);
  background-attachment:fixed;
}

a{color:var(--reiver-red);text-decoration:none}
a:hover{color:var(--reiver-red-dark);text-decoration:underline}

img{max-width:100%;height:auto}

/* ---------- shell ---------- */
.container{width:100%}
#page-container{
  max-width:1120px;
  margin:24px auto;
  background:var(--parchment);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(0,0,0,.035) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 62%, rgba(0,0,0,.03) 0 1px, transparent 2px);
  background-size:26px 26px,34px 34px;
  border:6px solid var(--board-dark);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:50}

/* ---------- header / logo ---------- */
#logo{
  position:relative;
  text-align:center;
  padding:30px 20px 22px;
  background:
    linear-gradient(180deg,var(--wood) 0%,var(--leather) 100%);
  border-bottom:5px solid var(--gold);
  color:var(--parchment);
}
#logo .logo-link{display:inline-block;color:inherit;text-decoration:none}
#logo .logo-link:hover{text-decoration:none}
h1.logo{
  margin:0;
  font-family:"Cinzel","Cinzel Decorative",Georgia,serif;
  font-weight:800;
  letter-spacing:3px;
  font-size:46px;
  line-height:1;
  color:var(--gold-bright);
  text-shadow:0 2px 0 #000, 0 0 18px rgba(231,194,92,.25);
}
h3.logo{
  margin:8px 0 0;
  font-family:"Spectral",serif;
  font-weight:400;
  font-style:italic;
  font-size:17px;
  letter-spacing:1px;
  color:var(--parchment);
  opacity:.9;
}
/* little dice in the corners of the header */
#logo:before,#logo:after{
  content:"⚄";
  position:absolute;top:14px;font-size:26px;color:var(--gold);opacity:.55;
}
#logo:before{left:18px}
#logo:after{right:18px;content:"⚂"}

.searchform{margin:16px auto 0;max-width:360px}
.searchform div{display:flex;gap:8px;justify-content:center}
.searchform input[type=text]{
  flex:1;padding:8px 12px;border:2px solid var(--board-dark);
  border-radius:8px;background:var(--parchment);font-family:inherit;font-size:15px;
}
#searchsubmit{
  padding:8px 16px;border:2px solid var(--board-dark);border-radius:8px;
  background:var(--gold);color:var(--leather);font-weight:700;cursor:pointer;
  font-family:"Cinzel",serif;letter-spacing:1px;
}
#searchsubmit:hover{background:var(--gold-bright)}
.screen-reader-text{position:absolute;left:-9999px}

/* ---------- navigation (tiles) ---------- */
nav#menu.primary{
  background:var(--board-dark);
  border-bottom:4px solid var(--gold);
  padding:0 10px;
}
nav#menu ul#main-menu{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
}
nav#menu ul#main-menu > li{position:relative}
nav#menu ul#main-menu > li > a,
nav#menu .sub-menu a{
  display:block;
  font-family:"Cinzel",serif;
  font-weight:700;
  letter-spacing:.5px;
  font-size:14px;
  text-transform:uppercase;
  color:var(--parchment);
  padding:14px 16px;
  text-decoration:none;
  border-bottom:3px solid transparent;
}
nav#menu ul#main-menu > li > a:hover,
nav#menu ul#main-menu > li.current-menu-item > a{
  color:var(--gold-bright);
  border-bottom-color:var(--gold-bright);
}
nav#menu .menu-item-has-children > a:after{content:" ▾";font-size:11px;opacity:.8}
/* dropdown */
nav#menu .sub-menu{
  list-style:none;margin:0;padding:6px;
  position:absolute;left:0;top:100%;min-width:260px;z-index:40;
  background:var(--leather);
  border:3px solid var(--gold);border-top:none;border-radius:0 0 10px 10px;
  display:none;box-shadow:0 12px 24px rgba(0,0,0,.4);
}
nav#menu li:hover > .sub-menu,
nav#menu li:focus-within > .sub-menu{display:block}
nav#menu .sub-menu a{
  text-transform:none;font-size:13.5px;padding:9px 12px;border-radius:6px;border-bottom:none;
}
nav#menu .sub-menu a:hover{background:var(--wood);color:var(--gold-bright)}

/* mobile menu containers from WP are hidden; we rely on flex-wrap + toggle */
.so-mobilenav-standard,.so-mobilenav-mobile,.menu-mobilenav-container{display:none}
#nav-toggle{display:none}

/* ---------- post / article body ---------- */
.post{padding:0}
#content{padding:0}
.featured-image{
  margin:0;border-bottom:5px solid var(--gold);
  background:#2c1c10;text-align:center;
}
.featured-image img{display:block;width:100%;max-height:420px;object-fit:cover}
/* It's Alive!: show the feature image at its natural width (centred), not
   stretched full-bleed — but go full width on mobile. Scoped to this page. */
.page-itsalive .featured-image img{
  width:auto;max-width:100%;height:auto;max-height:420px;
  object-fit:contain;margin:0 auto;
}

.post .entry-title,
h1.entry-title{
  margin:0;
  font-family:"Cinzel",Georgia,serif;
  font-weight:800;
  font-size:34px;
  line-height:1.15;
  color:var(--leather);
  text-align:left;
  padding:26px 40px 6px;
}
.post-info{
  padding:0 40px;
  font-size:14px;font-style:italic;color:var(--ink-soft);
  border-bottom:2px dotted rgba(92,61,36,.35);
  padding-bottom:14px;margin-bottom:6px;
}
.post-info a{color:var(--meeple-blue)}

.content{padding:18px 40px 40px}
.content p,.content ul,.content ol,.content dl{font-size:1.05em}
/* links within article paragraphs are underlined */
.content p a{text-decoration:underline}
.content p a:hover{text-decoration:underline}
.content h2,h2.wp-block-heading{
  font-family:"Cinzel",Georgia,serif;
  font-size:25px;color:var(--reiver-red);
  margin:1.6em 0 .5em;
  padding-bottom:.2em;
  border-bottom:3px solid var(--gold);
  display:inline-block;
}
.content h3{font-family:"Cinzel",serif;color:var(--wood);font-size:20px}
.content figure.wp-block-image{
  margin:1.4em 0;text-align:center;
}
.content figure.wp-block-image img{
  border:5px solid #fff;border-radius:6px;
  box-shadow:0 4px 0 rgba(0,0,0,.15),0 10px 22px rgba(0,0,0,.22);
}
.content figure.wp-block-image.alignleft,
.content .wp-block-image.alignleft{float:left;margin:.3em 1.6em 1em 0}
.content figure.wp-block-image.alignright{float:right;margin:.3em 0 1em 1.6em}
.content ul li{margin:.3em 0}
.clear{clear:both}

/* a parchment card around the body text on inner pages */
.post.type-page .content,
.post.type-post .content{position:relative}

/* ---------- HOME: board-square carousel ---------- */
.home-intro{padding:26px 40px 0;text-align:center}
.home-intro h2{
  font-family:"Cinzel",serif;color:var(--leather);font-size:24px;border:none;display:block;margin:.2em 0;
}

.board-carousel{
  margin:18px 26px 8px;
  padding:22px 18px 26px;
  background:
    linear-gradient(135deg, var(--wood) 0%, var(--leather) 100%);
  border:5px solid var(--board-dark);
  border-radius:14px;
  position:relative;
  box-shadow:inset 0 0 0 3px rgba(231,194,92,.25);
}
.board-carousel .bc-title{
  text-align:center;color:var(--gold-bright);
  font-family:"Cinzel",serif;letter-spacing:2px;text-transform:uppercase;
  font-size:14px;margin:0 0 14px;
}
/* the track of square spaces */
.bc-track{
  display:flex;gap:14px;justify-content:center;align-items:center;
  flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;       /* no vertical scrollbar */
  padding:32px 6px 18px;                    /* room for lifted/scaled square + meeple */
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;                     /* Firefox: slim, not chunky */
  scrollbar-color:var(--gold) transparent;
}
.bc-track::-webkit-scrollbar{height:8px}
.bc-track::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px}
.bc-track::-webkit-scrollbar-track{background:transparent}
.bc-square{
  position:relative;flex:0 0 auto;
  width:150px;height:150px;
  scroll-snap-align:center;
  border:4px solid var(--board-dark);
  border-radius:10px;
  overflow:hidden;
  background:var(--tile-a);
  box-shadow:0 4px 0 rgba(0,0,0,.3);
  transition:transform .35s ease, box-shadow .35s ease, filter .35s ease;
  filter:saturate(.85) brightness(.92);
  text-decoration:none;color:#fff;
}
.bc-square:nth-child(even){background:var(--tile-b)}
.bc-square img{width:100%;height:100%;object-fit:cover;display:block}
.bc-square .bc-num{
  position:absolute;top:6px;left:6px;z-index:3;
  width:26px;height:26px;border-radius:6px;
  background:var(--gold);color:var(--leather);
  font-family:"Cinzel",serif;font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--board-dark);
}
.bc-square .bc-label{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:18px 8px 8px;
  font-family:"Cinzel",serif;font-weight:700;font-size:13px;line-height:1.2;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.82));
  text-shadow:0 1px 3px #000;
}
.bc-square:hover{transform:translateY(-4px) scale(1.03);text-decoration:none}
.bc-square.is-active{
  filter:none;
  transform:translateY(-8px) scale(1.12);
  box-shadow:0 10px 0 rgba(0,0,0,.35),0 18px 30px rgba(0,0,0,.4);
  border-color:var(--gold-bright);
  z-index:5;
}
/* the player token / meeple that hops to the active square */
.bc-square .bc-meeple{
  position:absolute;top:-14px;right:8px;z-index:6;
  font-size:22px;opacity:0;transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));
}
.bc-square.is-active .bc-meeple{opacity:1;transform:translateY(0)}

/* caption + controls */
.bc-caption{
  margin:8px auto 0;max-width:760px;text-align:center;color:var(--parchment);
  font-style:italic;font-size:15.5px;min-height:48px;padding:0 10px;
}
.bc-controls{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:10px}
.bc-btn{
  cursor:pointer;border:3px solid var(--board-dark);border-radius:8px;
  background:var(--gold);color:var(--leather);
  font-family:"Cinzel",serif;font-weight:800;font-size:16px;
  width:42px;height:40px;line-height:1;
}
.bc-btn:hover{background:var(--gold-bright)}
.bc-dots{display:flex;gap:8px}
.bc-dot{
  width:14px;height:14px;border:2px solid var(--board-dark);
  background:var(--parchment-2);cursor:pointer;border-radius:3px;transform:rotate(45deg);
}
.bc-dot.is-active{background:var(--reiver-red)}

/* ---------- game grid (board "spaces") ---------- */
.game-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;padding:10px 0;
}
.game-card{
  display:block;background:var(--parchment-2);
  border:4px solid var(--board-dark);border-radius:12px;overflow:hidden;
  box-shadow:0 4px 0 rgba(0,0,0,.18);text-decoration:none;color:var(--ink);
  transition:transform .2s ease, box-shadow .2s ease;
}
.game-card:hover{transform:translateY(-4px);box-shadow:0 8px 0 rgba(0,0,0,.2);text-decoration:none}
.game-card .gc-thumb{height:140px;background:#2c1c10;display:flex;align-items:center;justify-content:center;overflow:hidden}
.game-card .gc-thumb img{width:100%;height:100%;object-fit:cover}
.game-card .gc-body{padding:12px 14px}
.game-card .gc-title{font-family:"Cinzel",serif;font-weight:700;font-size:16px;color:var(--leather);margin:0}
.game-card .gc-cat{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--meeple-blue)}

/* ---------- footer ---------- */
#footer{
  background:linear-gradient(180deg,var(--leather) 0%,var(--board-dark) 100%);
  color:var(--parchment);
  border-top:5px solid var(--gold);
  padding:22px 30px;text-align:center;
}
#footer .copyright{font-family:"Cinzel",serif;letter-spacing:1px;color:var(--gold-bright)}
#footer .designed{font-size:12px;opacity:.7;margin-top:6px}
#footer a{color:var(--gold-bright)}

/* ---------- responsive ---------- */
@media (max-width:720px){
  body{font-size:16px}
  h1.logo{font-size:34px}
  .entry-title,h1.entry-title{font-size:26px;padding:20px 22px 6px}
  .post-info{padding:0 22px 12px}
  .content{padding:16px 22px 30px}
  nav#menu ul#main-menu{justify-content:flex-start}
  nav#menu ul#main-menu > li > a{padding:12px 11px;font-size:12.5px}
  nav#menu .sub-menu{position:static;min-width:0;display:block;background:transparent;border:none;box-shadow:none;padding:0 0 0 14px}
  nav#menu .sub-menu a{color:var(--parchment);opacity:.85}
  .board-carousel{margin:14px 12px}
  .bc-square{width:120px;height:120px}
  /* It's Alive! feature image stretches full width on mobile */
  .page-itsalive .featured-image img{width:100%;object-fit:cover}
}