/* ===== Sierran Conflict Wiki — custom styling ===== */

/* ----- Page width — reclaim unused side margins for wider reading real estate
   and more room for infoboxes to breathe. Material's default grid is capped at
   61rem (~976px). Bump to 90rem (~1440px) so wide displays actually use their
   horizontal space and the infobox + prose don't compete for the same 620-ish
   pixels of text column. ----- */
.md-grid { max-width: 90rem; }

/* ----- Wikipedia-style infobox ----- */
.infobox {
  float: right;
  /* Widened so labels + values render without cramping. Now that the page
     grid is 90rem, there's room for the box to be more like a Wikipedia
     infobox (~450px) instead of a narrow sidebar. */
  width: 460px;
  max-width: 45%;   /* never exceeds ~45% of the content column */
  margin: 0 0 1.25rem 1.75rem;
  padding: 1rem 1.2rem;
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  font-size: 0.86rem;
  line-height: 1.5;
  /* Break long words / URLs / hyphenated compound labels so nothing spills
     out of the box on the right edge. */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.infobox h3 {
  margin: 0 0 .8rem 0 !important;
  padding-bottom: .4rem;
  font-size: 1rem !important;
  font-weight: 600;
  text-align: center;
  border-bottom: 2px solid var(--md-accent-fg-color);
}

.infobox .infobox-section {
  margin: .85rem 0 .35rem 0;
  padding-top: .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--md-accent-fg-color);
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.infobox dl {
  margin: 0;
  display: grid;
  /* Constrain the label column so a long dt can't push the value column off
     the right edge of the infobox. minmax(0, ...) forces both columns to
     accept shrink and wrap. Value column gets more relative width because
     values (dates, place names, mixed content) typically carry more content
     than labels. */
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
  column-gap: .75rem;
  row-gap: .3rem;
}
.infobox dt {
  font-weight: 600;
  color: var(--md-default-fg-color--light);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.infobox dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
/* Long ambient labels sometimes contain full URLs, hyphenated compound nouns,
   or unbreakable strings; force them to wrap inside the box. */
.infobox a,
.infobox code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Stack on narrow screens */
@media (max-width: 800px) {
  .infobox {
    float: none;
    width: 100%;
    margin: 0 0 1.25rem 0;
  }
}

/* ----- Grid cards — extra polish ----- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li {
  border-radius: 4px;
  transition: border-color 120ms ease;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
}

/* ----- Nation flag thumbnails (used in nation cards) -----
   Inline thumbnail rendered to the left of the nation name in grid cards.
   Custom flags live under docs/flags/<id>.png. Nations missing a flag fall
   back to the .flag-placeholder block (neutral panel) so the layout stays
   consistent. */
.flag-thumb {
  display: inline-block;
  width: 36px;
  height: 24px;
  margin-right: .5rem;
  vertical-align: middle;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 2px;
  object-fit: cover;
  background: var(--md-code-bg-color);
}
.flag-placeholder {
  display: inline-block;
  width: 36px;
  height: 24px;
  margin-right: .5rem;
  vertical-align: middle;
  border: 1px dashed var(--md-default-fg-color--light);
  border-radius: 2px;
  background: var(--md-code-bg-color);
  font-size: .55rem;
  line-height: 22px;
  text-align: center;
  color: var(--md-default-fg-color--light);
  letter-spacing: .04em;
}

/* Bigger version used in the infobox header */
.infobox .flag-thumb,
.infobox .flag-placeholder {
  display: block;
  width: 120px;
  height: 80px;
  margin: 0 auto .6rem auto;
  font-size: .7rem;
  line-height: 76px;
}