/* ========================= */
/* === Base & Typography === */
/* ========================= */
body {
  font-family: var(--font-body-family);
  margin: 0;
  padding: 0;
  background-color: var(--body-bg);
  background-image: url("../images/background.png");
  background-repeat: repeat;
  color: var(--body-text);
}

p {
  line-height: var(--p-line-height);
  margin: var(--p-margin);
}

a {
  color: var(--section-link);
  text-decoration: none;
}
a:hover { color: var(--section-link-hover); text-decoration: underline; }

/* ============== */
/* === Header === */
/* ============== */
header {
  text-align: center;
  margin: 0;
}

header h1 {
  font-family: var(--font-h1-family);
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--font-h1-size);
  font-weight: var(--font-h1-weight);
  letter-spacing: var(--font-h1-letter-spacing);
  line-height: var(--font-h1-line-height);
  color: var(--header-title);
  text-shadow: var(--shadow-h1);
}

header .logo {
  max-width: 100%;
  height: auto;
  max-height: var(--logo-max-height);
}

header .tagline {
  font-family: var(--font-tagline-family);
  font-weight: var(--font-tagline-weight);
  text-transform: var(--font-tagline-transform);
  letter-spacing: var(--font-tagline-letter-spacing);
  font-size: var(--font-tagline-size);
  font-style: var(--font-tagline-style);
  margin-top: var(--tagline-margin-top);
  text-shadow: var(--shadow-tagline);
  color: var(--header-tagline);
}

/* =========================== */
/* === Layout & Containers === */
/* =========================== */

.main-content {
  max-width: var(--layout-max-width);
  margin: auto;
  padding: 0;
}

section {
  background: var(--section-bg);
  padding: var(--section-padding);
  margin-bottom: var(--section-margin-bottom);
  border: var(--section-border-width) solid var(--section-border);
  border-radius: var(--section-radius);
}

section:last-of-type {
  margin-bottom: 0;
}

/* ===============*/
/* === Footer === */
/* ===============*/

footer {
  background: none;
  text-align: center;
  color: var(--footer-text);
  font-size: var(--footer-font-size);
  line-height: var(--footer-line-height);
  padding: 0;
  margin: 0;
  text-shadow: var(--shadow-footer);
}

/* =============== */
/* === Buttons === */
/* =============== */

.btn {
  display: inline-block;
  padding: var(--button-padding);
  margin: var(--button-margin);
  background-color: var(--button-bg);
  border: var(--button-border-width) solid var(--button-border);
  color: var(--button-text);
  font-weight: var(--button-font-weight);
  font-size: var(--button-font-size);
  text-decoration: none !important;
  border-radius: var(--button-radius);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn:hover {
  background-color: var(--button-bg-hover);
  color: var(--button-text-hover);
  text-decoration: none !important;
}

.btn.small {
  font-size: var(--button-small-font-size);
  padding: var(--button-small-padding);
  width: fit-content;
}

.btn.centered {
  display: block;
  margin: 0.6em auto 1em auto;
  width: fit-content;
  text-align: center;
}

/* ---- Content Card Wrapper ---- */
.content,
.content-card {
  background: var(--card-bg);
  border: var(--card-border-width) solid var(--nav-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  overflow: auto;
  color: var(--section-text);
  line-height: var(--card-line-height);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.content-card:hover {
  transform: none;
  box-shadow: var(--card-shadow-hover);
}

.content-card.highlight:hover {
  transform: translateY(var(--card-highlight-translate));
  box-shadow: var(--card-shadow-highlight);
}

/* ---- Grid Layout ---- */
.content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em;
  margin-top: 2em;
}

.content-card.full {
  grid-column: span 2;
}

/* ============================= */
/* === Images === */
/* ============================= */
.content-image {
  display: block;
  border-radius: var(--image-radius);
  padding: var(--image-padding);
  background: var(--image-bg);
  border: var(--image-border-width) solid var(--image-border);
  box-shadow: var(--image-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.content-image.gold { border-color: var(--bullet-pill-border); }
.content-image.dark { border-color: var(--nav-border); }
.content-image.accent { border-color: var(--image-border-hover); }

.content-image:hover {
  transform: scale(var(--image-hover-scale));
  box-shadow: var(--image-shadow-hover);
}

/* ---- Image Sizes ---- */
.small  { width: var(--image-size-small); height: auto; }
.medium { width: var(--image-size-medium); height: auto; }
.large  { width: var(--image-size-large); height: auto; }
.xlarge { width: var(--image-size-xlarge); height: auto; }
/* ---- Alignment ---- */
.left {
  float: left;
  margin: 0 1.2em 0.6em 0;
}
.right {
  float: right;
  margin: 0 0 0.6em 1.2em;
}
.center {
  display: block;
  margin: 0 auto 1em auto;
  float: none;
}

/* ---- Responsive Image Reset ---- */
@media (max-width: 768px) {
  .left, .right {
    float: none !important;
    display: block;
    margin: 0 auto 1em auto;
  }
  .small, .medium, .large, .xlarge {
    width: var(--image-responsive-width);
    max-width: var(--image-responsive-max);
  }
}

/* ---- Containment Fix ---- */
.content::after,
.content-card::after {
  content: "";
  display: block;
  clear: both;
}

/* ============================= */
/* === Text & Headings === */
/* ============================= */
.content-card h3 {
  color: var(--section-heading);
  font-size: var(--card-h3-size);
  margin-top: 0;
  margin-bottom: var(--card-h3-margin-bottom);
}

.content-card p {
  margin: var(--card-p-margin);
  font-size: var(--card-p-size);
}

.content-card a {
  color: var(--section-link);
  font-weight: bold;
  text-decoration: none;
}
.content-card a:hover {
  color: var(--section-link-hover);
  text-decoration: underline;
}

/* ============================= */
/* === Pill Bullet Lists === */
/* ============================= */
.pill-bullet {
  list-style: none;
  padding: 0;
  margin: var(--pill-margin);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pill-gap);
  justify-content: flex-start;
  align-items: center;
}

.pill-bullet li { margin: 0; }

.pill-bullet li a {
  display: inline-block;
  padding: var(--pill-padding);
  border-radius: var(--pill-radius);
  background: var(--bullet-pill-bg);
  border: var(--pill-border-width) solid var(--bullet-pill-border);
  color: var(--bullet-pill-text);
  font-weight: var(--pill-font-weight);
  font-size: var(--pill-font-size);
  line-height: var(--pill-line-height);
  transition: background 0.2s ease, color 0.2s ease;
}

.pill-bullet li a:hover {
  background: var(--bullet-pill-bg-hover);
  color: var(--bullet-pill-text-hover);
}

/* ---- Pill Bullet Sizes ---- */
.pill-bullet.small li a {
  font-size: var(--pill-small-font-size);
  padding: var(--pill-small-padding);
}
.pill-bullet.big li a {
  font-size: var(--pill-big-font-size);
  padding: var(--pill-big-padding);
}

/* Prevents interference from image-size classes */
ul.pill-bullet.small,
ul.pill-bullet.big {
  width: auto;
  height: auto;
}

/* ============================= */
/* === Responsive Design === */
/* ============================= */
@media (max-width: 900px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================*/
/* Navigation Wrapper */
/* ===================*/
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* align bottoms evenly */
  margin: 0 2em;
  position: relative;
  z-index: 2; /* ensure tabs stay on top */
}

/* ===================*/
/* Breadcrumbs Stuffs */
/* ===================*/
.breadcrumbs {
  font-size: var(--breadcrumb-font-size);
  padding: 0;
  margin: 0;
  border: var(--breadcrumb-border-width) solid var(--breadcrumb-border);
  border-bottom: none;
  border-radius: var(--breadcrumb-radius);
  overflow: hidden;
  background: var(--breadcrumb-bg);
}

.breadcrumbs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.breadcrumbs li {
  border-left: var(--breadcrumb-border-width) dashed var(--breadcrumb-divider);
  padding: var(--breadcrumb-item-padding);
  font-size: var(--breadcrumb-item-font-size);
  font-weight: bold;
  color: var(--breadcrumb-text);
  white-space: nowrap;
}

.breadcrumbs li:first-child {
  border-left: none;
}

.breadcrumbs li:last-child {
  border-radius: 0 20px 0 0;
  background: var(--breadcrumb-active-bg);
}

.breadcrumbs li a {
  color: var(--breadcrumb-link);
  text-decoration: none;
}

.breadcrumbs li a:hover {
  text-decoration: underline;
}

.breadcrumbs li strong {
  color: var(--section-text);
  font-weight: bold;
}

/* ============================= */
/* Outbound Links Section  */
/* ============================= */
.outbound-links {
  font-size: var(--outbound-font-size);
  padding: 0;
  margin: 0;
  border: var(--outbound-border-width) solid var(--outbound-border);
  border-bottom: none;
  border-radius: var(--outbound-radius);
  overflow: hidden;
  background: var(--outbound-bg);
}

.outbound-links ul {
  list-style: none;
  margin: 0 0 -5px 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

.outbound-links li {
  border-right: var(--outbound-border-width) dashed var(--outbound-divider);
  padding: var(--outbound-item-padding);
  font-size: var(--outbound-item-font-size);
  font-weight: bold;
  color: var(--outbound-text);
  white-space: nowrap;
}

.outbound-links li:last-child {
  border-right: none;
}

.outbound-links li.label {
  border-radius: 20px 0 0 0;
  background: var(--outbound-label-bg);
  color: var(--section-text);
}

.outbound-links li a {
  color: var(--outbound-link);
  text-decoration: none;
}

.outbound-links li a:hover {
  text-decoration: underline;
}

/* Responsive stacking */
@media (max-width: 768px) {
  .breadcrumbs,
  .outbound-links {
    margin: 0.5em auto 0 auto;
  }
  .outbound-links ul {
    justify-content: center;
  }
}

/* ================== */
/* === Navigation === */
/* ================== */

.navigation {
  font-size: var(--nav-font-size);
  padding: 0;
  margin: 0;
  border: var(--nav-border-width) solid var(--nav-border);
  border-bottom: none;
  border-radius: var(--nav-radius);
  overflow: hidden;
  background: var(--nav-bg);
}

.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.navigation li {
  padding: var(--nav-item-padding);
  font-size: var(--nav-item-font-size);
  font-weight: bold;
  color: var(--section-text);
  white-space: nowrap;
  background: var(--nav-tab-bg);
  border-left: var(--nav-border-width) dashed var(--nav-divider);
}

.navigation li:first-child {
  border-left: none;
}

.navigation li a {
  color: var(--nav-tab-text);
  text-decoration: none;
}

.navigation li a:hover {
  text-decoration: underline;
  color: var(--nav-tab-text-active);
}

.navigation li.active {
  background: var(--nav-tab-bg-active);
}

.navigation li.active a {
  color: var(--nav-tab-text-active);
  cursor: default;
  text-decoration: none;
}

.navigation.left ul {
  justify-content: flex-start;
}

.navigation.right ul {
  justify-content: flex-end;
}

/* === Responsive Behavior === */
@media (max-width: 768px) {
  .navigation {
    margin: 0.5em auto 0 auto;
  }

  .navigation ul {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px)
{

  .nav-bar {
    flex-direction: column;
    align-items: center;
    margin: 1.5em 0 2em 0;
  }

  .nav-bar .navigation {
    width: var(--nav-mobile-width);
    max-width: var(--nav-mobile-max-width);
    margin: 0;
    border: var(--nav-border-width) solid var(--nav-border);
    background: var(--nav-bg);
    overflow: hidden;
  }

  .nav-bar .navigation + .navigation {
    border-top: none;
  }

  .nav-bar .navigation:first-child {
    border-radius: var(--nav-mobile-radius) var(--nav-mobile-radius) 0 0;
  }

  .nav-bar .navigation:last-child {
    border-radius: 0 0 var(--nav-mobile-radius) var(--nav-mobile-radius);
  }

  .nav-bar .navigation ul {
    display: flex;
  }

  .nav-bar .navigation li {
    flex: 1;
    text-align: center;
    border-left: var(--nav-border-width) dashed var(--nav-divider);
    background: var(--nav-tab-bg);
  }

  .nav-bar .navigation li:first-child {
    border-left: none;
  }

  .nav-bar .navigation a {
    display: block;
    padding: var(--nav-mobile-link-padding);
    font-size: var(--nav-mobile-link-font-size);
  }

}

/* ============================= */
/* Section Flush Fix             */
/* ============================= */
section {
  margin-top: 0; /* prevent pushing navs away */
}

/* ===========================================================
   Legacy Modular Grid (Required for Game Plan & similar pages)
   Safe additive patch – does not override existing systems
   =========================================================== */

/* --- Modular Grid --- */
.modular-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.modular-grid.cols2 { grid-template-columns: repeat(2, 1fr); }
.modular-grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.modular-grid.cols4 { grid-template-columns: repeat(4, 1fr); }
.modular-grid.cols5 { grid-template-columns: repeat(5, 1fr); }
.modular-grid.cols6 { grid-template-columns: repeat(6, 1fr); }

.modular-grid > * {
  width: 100%;
  box-sizing: border-box;
}

.modular-grid .capsule-item {
  border-left: none;
  border-radius: var(--capsule-radius);
  margin: 0;
}

.modular-grid .capsule-item p {
  text-align: center;
}

.screenshots img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive fallback */
@media (max-width: 768px) {
  .modular-grid.cols2,
  .modular-grid.cols3,
  .modular-grid.cols4,
  .modular-grid.cols5,
  .modular-grid.cols6 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .modular-grid.cols2,
  .modular-grid.cols3,
  .modular-grid.cols4,
  .modular-grid.cols5,
  .modular-grid.cols6 {
    grid-template-columns: 1fr;
  }
}

/* --- Capsule Items --- */
.capsule-item {
  background: var(--capsule-bg);
  padding: var(--capsule-padding);
  border-left: var(--capsule-border-width) solid var(--capsule-border);
  max-width: var(--capsule-max-width);
  margin: var(--capsule-margin);
  border-radius: var(--capsule-radius);
}

.capsule-item.soft-border {
  border-radius: var(--capsule-soft-radius);
}

/* --- Asset Lists --- */
.asset-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1em 0;
}

.asset-list li {
  font-size: var(--asset-font-size);
  padding-left: var(--asset-padding-left);
  text-indent: var(--asset-text-indent);
  margin: var(--asset-margin);
  line-height: var(--asset-line-height);
}

.asset-list li::before {
  content: "◇ ";
  color: var(--bullet-decorative);
}

/* --- itch banner center --- */
.embed-wrap {
  margin: 0 auto 10px auto;
  padding: 0 100px;
}

.embed-wrap iframe {
  width: 100%;
}

/* --- contact forms / phpmailer --- */
.contact-form-wrapper {
  width: var(--form-wrapper-width);
  margin-top: var(--form-wrapper-margin-top);
}

.contact-form {
  max-width: var(--form-max-width);
}

.form-group {
  margin-bottom: var(--form-group-margin);
}

.contact-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4em;
  color: var(--form-label);
}

.contact-form input,
.contact-form textarea {
  width: var(--form-input-width);
  max-width: 100%;
  background: var(--form-input-bg);
  border: var(--form-input-border-width) solid var(--form-input-border);
  border-radius: var(--form-input-radius);
  padding: var(--form-input-padding);
  color: var(--form-input-text);
  font-size: var(--form-input-font-size);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--form-input-border-focus);
}

.contact-form textarea {
  height: var(--form-textarea-height);
  resize: vertical;
}

.char-counter {
  font-size: var(--form-counter-font-size);
  margin-top: var(--form-counter-margin-top);
  color: var(--form-muted-text);
}

.honeypot {
  display: none;
}

.form-feedback {
  width: 100%;
  box-sizing: border-box;
  padding: var(--form-feedback-padding);
  margin-bottom: var(--form-feedback-margin);
  border-radius: var(--form-feedback-radius);
  font-weight: 600;
}

.form-feedback.success {
  background: var(--form-success-bg);
  border: var(--form-feedback-border-width) solid var(--form-success-border);
  color: var(--form-success-text);
}

.form-feedback.error {
  background: var(--form-failure-bg);
  border: var(--form-feedback-border-width) solid var(--form-failure-border);
  color: var(--form-failure-text);
}