/**
 * Spiral Knights theme - global stylesheet.
 *
 * Sectioned: variables > base/backdrop > header/logo > account bar >
 * primary nav > breadcrumb > content panel/typography > forum table >
 * footer > responsive.
 *
 * Assets and colors below are pulled directly from the live
 * forums.spiralknights.com site (Drupal 6 "pxmainsite" Zen sub-theme +
 * Advanced Forum "blue_lagoon" style, with a custom Color-module palette
 * applied) so the port matches pixel-for-pixel where practical:
 * - images/spiralknights_bg.jpg: full-page night-sky/moon backdrop, logo
 *   art is baked into the image itself (top-left).
 * - images/menu_sheet.en.jpg: primary nav sprite sheet -- 6 columns
 *   (Home/Play/About/Media/Forums/Wiki) x 3 rows (normal/hover/active),
 *   102x77px per cell.
 * - images/middle.jpg + images/bottom.jpg: vertically-tiling dark content
 *   panel background + bottom cap, sits behind the forum table.
 * - images/top_box_rt.png: rounded account-bar pill background.
 * - images/forum-folder*.png: forum row folder icons (normal/new/locked).
 * - Forum table selectors are written against Drupal core's actual
 *   forum-list.html.twig markup, which carries no classes at all (bare
 *   <table>, an `.indent` div per nesting level, an icon
 *   <div title="..."> placeholder) -- verified directly against
 *   forums-upgrade.spiralknights.com's live DOM. Divider/category rows
 *   render as <td colspan="4">; real forum rows render 4 plain <td>s.
 */

:root {
  --sk-bg-fallback:   #0f0f11;
  --sk-panel-flat:    #051725;
  --sk-header-bg:     #264a73;
  --sk-gold:          #ffc134;
  --sk-gold-alt:      #e69b1e;
  --sk-teal:          #43cdca;
  --sk-teal-bright:   #03cff5;
  --sk-link-blue:     #3121f1;
  --sk-container-bg:  #99c4df;
  --sk-row-even:      #eaeaea;
  --sk-row-odd:       #d6ddea;
  --sk-desc-grey:     #585858;
  --sk-count-navy:    #0b146d;
  --sk-ink:           #1b2437;
  --sk-post-avatar-bg:    #1b1f2e;
  --sk-font: Arial, Verdana, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sk-font);
  font-size: 14px;
  color: #dce6f5;
  background: var(--sk-bg-fallback) url("../images/spiralknights_bg.jpg") no-repeat 50% 0;
  min-height: 100vh;
}

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sk-page {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 40px;
  position: relative;
}

/* ---------- Header / logo ---------- */

/* Wraps the header and breadcrumb -- the band of the page where the body's
   spiralknights_bg.jpg backdrop used to show a baked-in flat panel behind
   the nav/breadcrumb. That panel was flat-filled at a fixed ~980px width,
   so it can't stretch with a fluid page; this wrapper redraws it in CSS
   instead (flanked by real cropped scenery from the same source image on
   wide viewports) so it can grow to any width. See spiralknights_bg_flank_*
   .jpg and the --sk-panel-flat color, both sampled from spiralknights_bg.jpg. */
.sk-scenery-wrap {
  position: relative;
  background-image: linear-gradient(var(--sk-panel-flat), var(--sk-panel-flat));
  background-repeat: no-repeat;
  background-position: 0 132px;
  background-size: 100% 100%;
}

/* Below ~1040px there isn't room for both 520px flank images without them
   overlapping in the middle, so only the flat panel color shows. */
@media (min-width: 1042px) {
  .sk-scenery-wrap {
    background-image:
      url("../images/spiralknights_bg_flank_left.jpg"),
      url("../images/spiralknights_bg_flank_right.jpg"),
      linear-gradient(var(--sk-panel-flat), var(--sk-panel-flat));
    background-repeat: no-repeat, no-repeat, no-repeat;
    /* Positioned relative to viewport CENTER (like the body's own
       spiralknights_bg.jpg, via "50% 0"), not pinned to the viewport
       edges -- these crops are literal pieces of that same 2020px-wide
       image, so they only stay pixel-continuous with the moon/sky above
       if they share its centered reference frame. NOTE: background-position
       percentages are (container - image) * pct, which already bakes in
       half the image's own width -- so the right offset here is each
       crop's own center minus the *source* image's center (1010), not the
       crop's left-edge offset (that earlier version was off by ~half each
       crop's width, ~260px, which is exactly the jump this caused). Left
       flank center 260 - 1010 = -750; right flank center 1759.5 - 1010 =
       749.5. */
    background-position:
      calc(50% - 750px) 132px,
      calc(50% + 749.5px) 132px,
      0 132px;
    background-size: auto, auto, 100% 100%;
  }
}

.sk-header {
  position: relative;
  padding-top: 132px;
  margin-bottom: 6px;
}

/* Logo art is baked into spiralknights_bg.jpg -- this is just an
   accessible, clickable overlay matching its position/size. Positioned
   from center (rather than the header's own left edge) since the backdrop
   image is centered on the viewport regardless of how wide the fluid
   .sk-page/.sk-header grow -- 485px = half of the old 980px page width
   (490px) minus the old left:5px offset. Clamped with max() so it never
   goes negative and clips off-screen below that old 980px width -- it
   pins back to the original left:5px there instead of continuing to
   "center" past the edge. */
.sk-logo {
  position: absolute;
  top: 25px;
  left: max(5px, calc(50% - 485px));
  width: 259px;
  height: 96px;
  display: block;
}

/* The old site's account bar, from www.spiralknights.com's mainsite.css:
   the parts float right (so the markup reads right to left) over
   top_box_rt.png, which draws the Support and MY ACCOUNT boxes and the
   round divider; the user part stretches top_box_md.png to fit and ends in
   top_box_lt.png's rounded cap. Unlike there, it's right-aligned to the
   980px column everything else sits in, as the old forum page showed it. */
.sk-account-bar {
  position: absolute;
  top: 0;
  right: max(0px, calc(50% - 490px));
  height: 40px;
  font-size: 8pt;
  color: var(--sk-teal);
  /* top_box_rt_narrow.png is the old site's top_box_rt.png with 88px cut
     from the middle of its Support box (whose columns are identical, so
     there's no seam): that box was 168px wide to fit "Support | Language",
     and with no Language menu here it's 80px. */
  background: url("../images/top_box_rt_narrow.png") no-repeat right 0;
}
.sk-account-bar a { color: var(--sk-teal); text-decoration: none; }
.sk-account-bar a:hover { color: var(--sk-teal); text-decoration: underline; }
.sk-account-bar__support,
.sk-account-bar__account,
.sk-account-bar__user {
  float: right;
  height: 40px; /* 27px + the padding, as this theme sizes border-box */
  padding-top: 13px;
  text-align: center;
}
.sk-account-bar__support { width: 80px; }
.sk-account-bar__account { width: 101px; }
.sk-account-bar__user {
  margin-right: 20px;
  padding-left: 5px;
  padding-right: 5px;
  background: url("../images/top_box_md.png") repeat-x;
  color: #535353;
}
.sk-account-bar__user a { margin: 0 5px; }
.sk-account-bar__account a,
.sk-account-bar__user a,
.sk-account-bar__account a:hover,
.sk-account-bar__user a:hover { color: #ffffff; }
.sk-account-bar__user .sk-account-bar__name,
.sk-account-bar__user .sk-account-bar__name:hover { color: #708aa7; }
.sk-account-bar__leftcap { float: right; }

/* Core renders a visible <h2> block title ("Main navigation") inside the
   menu block -- match the live site by hiding it like Zen did, while
   keeping it in the accessibility tree. */
.sk-nav-wrapper h2 {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Primary nav ---------- */

/* A 980px bar centered over the flat panel, like the old site: buttons on
   the left, and the rest of the bar filled with menu_right.jpg (the old
   site's empty-button art, from www.spiralknights.com). Six 102px buttons
   with 2px gaps plus the 351px filler exactly fill the bar, so the filler
   is only drawn when the bar is at full width (narrower, the buttons
   wrap and would overlap it). */
.sk-nav-wrapper {
  max-width: 980px;
  margin: 5px auto 0;
  padding: 0 0 0 5px;
  clear: both;
}
@media (min-width: 980px) {
  .sk-nav-wrapper {
    background: url("../images/menu_right.jpg") no-repeat right 2px top 0;
  }
}

.sk-nav {
  list-style: none;
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.sk-nav__item { display: block; }

.sk-nav__link {
  display: block;
  width: 102px;
  height: 77px;
  background-image: url("../images/menu_sheet.en.jpg");
  background-repeat: no-repeat;
  text-decoration: none;
}
.sk-nav__link:hover { text-decoration: none; }

.sk-nav__link--home   { background-position: 0 0; }
.sk-nav__link--play   { background-position: -103px 0; }
.sk-nav__link--about  { background-position: -206px 0; }
.sk-nav__link--media  { background-position: -309px 0; }
.sk-nav__link--forums { background-position: -412px 0; }
.sk-nav__link--wiki   { background-position: -515px 0; }
.sk-nav__link--other  { background-position: -515px 0; }

.sk-nav__link--home:hover   { background-position: 0 -77px; }
.sk-nav__link--play:hover   { background-position: -103px -77px; }
.sk-nav__link--about:hover  { background-position: -206px -77px; }
.sk-nav__link--media:hover  { background-position: -309px -77px; }
.sk-nav__link--forums:hover { background-position: -412px -77px; }
.sk-nav__link--wiki:hover   { background-position: -515px -77px; }

/* This site *is* the forums, so that button always shows its active
   (orange) state, as on the old site. */
.sk-nav__link--forums,
.sk-nav__link--forums:hover { background-position: -412px -154px; }

.sk-nav__item--active .sk-nav__link--home,
.sk-nav__item.menu-item--active-trail .sk-nav__link--home   { background-position: 0 -154px; }
.sk-nav__item--active .sk-nav__link--play,
.sk-nav__item.menu-item--active-trail .sk-nav__link--play   { background-position: -103px -154px; }
.sk-nav__item--active .sk-nav__link--about,
.sk-nav__item.menu-item--active-trail .sk-nav__link--about  { background-position: -206px -154px; }
.sk-nav__item--active .sk-nav__link--media,
.sk-nav__item.menu-item--active-trail .sk-nav__link--media  { background-position: -309px -154px; }
.sk-nav__item--active .sk-nav__link--forums,
.sk-nav__item.menu-item--active-trail .sk-nav__link--forums { background-position: -412px -154px; }
.sk-nav__item--active .sk-nav__link--wiki,
.sk-nav__item.menu-item--active-trail .sk-nav__link--wiki   { background-position: -515px -154px; }

.sk-submenu {
  clear: both;
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 0 8px;
}
.sk-submenu a { color: #cfe0f5; font-size: 0.85rem; }

/* ---------- Breadcrumb ---------- */

.sk-breadcrumb {
  clear: both;
  font-size: 11px;
  color: #ffffff;
  padding: 10px 6px 8px;
}
/* The breadcrumb region holds the breadcrumb and the search block, laid out
   like the old site's header bar: trail on the left, search on the right,
   both kept within the flat panel's old 980px width (the flank scenery
   either side of it is too busy to read text over). */
.sk-breadcrumb > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  max-width: 968px;
  margin: 0 auto;
}
.sk-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.sk-breadcrumb li:not(:last-child)::after { content: '\203A'; margin-left: 6px; color: #55688e; }
.sk-breadcrumb a { color: #ffffff; }
.sk-breadcrumb a:hover { text-decoration: underline; }

/* Pushed right even on pages with no breadcrumb trail (the front page). */
.sk-breadcrumb [role="search"] { margin-left: auto; }
.sk-breadcrumb .search-block-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.sk-breadcrumb .search-block-form .form-item,
.sk-breadcrumb .search-block-form .form-actions { margin: 0; }
.sk-breadcrumb .search-block-form input[type="search"] {
  border: none;
  border-radius: 3px;
  padding: 3px 8px;
  width: 160px;
  font-size: 12px;
}
.sk-breadcrumb .search-block-form input[type="submit"] {
  background: #e7e7e7;
  border: 1px solid #888;
  border-radius: 3px;
  padding: 2px 10px;
  color: #444;
  font-size: 12px;
  cursor: pointer;
}
.sk-breadcrumb .search-block-form input[type="submit"]:hover { color: #000; background: #fff; }

/* ---------- Local task tabs (View/Edit/Delete etc.) ----------
 * Not automatically part of page.html.twig in current core (unlike
 * Drupal 7, there's no bare {{ tabs }} variable any more) -- this is the
 * "Tabs" block (plugin local_tasks_block), which has to be placed into
 * this theme's Content region via Block layout to show up at all.
 *
 * Selector is keyed off the block's own HTML id rather than a class:
 * confirmed directly against this site's live markup that blocks here
 * render as bare `<div id="block-{machine name}">` with NO class list at
 * all (block.html.twig's usual "block-" ~ plugin_id|clean_class classes
 * aren't present) -- true of every block on this site, not just this
 * one. "spiralknights-tabs" is this specific block's machine name as
 * placed via Block layout; rename that placement and this id changes
 * with it.
 *
 * is-active is added client-side by core's active-link.js once the page
 * loads (matching the current URL), so it's absent from the raw HTML but
 * present on the actually-rendered page.
 */
#block-spiralknights-tabs ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 17px 14px;
  padding: 0;
}
#block-spiralknights-tabs li {
  display: block;
}
/* Plain buttons, like the post's Edit/Delete links, not tabs: on a topic
   they act on the whole topic, so they don't sit on top of its first post. */
#block-spiralknights-tabs a {
  display: inline-block;
  padding: 4px 10px;
  background: #264a73;
  border-radius: 3px;
  color: #ffffff;
  font-size: 11px;
  text-decoration: none;
}
#block-spiralknights-tabs a:hover {
  background: #3a6699;
}
#block-spiralknights-tabs a.is-active {
  color: var(--sk-gold);
}

/* ---------- Content panel ---------- */

/* Fixed at the panel art's own 980px width (middle.jpg/bottom.jpg), centered
   under the header's flat panel like the old site, so the backdrop scenery
   shows either side. Narrower viewports just shrink it. */
.sk-main {
  clear: both;
  max-width: 980px;
  margin: 0 auto;
  /* bottom.jpg is the panel's rounded bottom edge, drawn over middle.jpg's
     tiling so it closes off the panel itself, right above the footer. */
  background:
    url("../images/bottom.jpg") no-repeat left bottom / 100% auto,
    url("../images/middle.jpg") repeat-y left top / 100% auto;
  padding: 10px 20px 33px;
}

.sk-content h1,
.sk-content .page-title {
  color: var(--sk-gold);
  font-size: 20px;
  font-weight: normal;
  margin: 8px 3px 12px;
  padding: 0 17px;
}

.sk-content > .region-content-inner p,
.sk-content p.sk-intro {
  color: #b9c7de;
  padding: 0 17px;
}

.sk-content a { color: var(--sk-link-blue); }

/* Status/warning/error messages (drupal core's status-messages markup --
   no classes to hook into, same as everything else stripped by
   base theme: false, so this keys off the aria-label core still sets). */
.sk-content [data-drupal-messages] {
  margin: 0 3px 16px;
}
.sk-content [data-drupal-messages] [role="contentinfo"] {
  padding: 10px 14px;
  border-radius: 3px;
  font-size: 13px;
}
.sk-content [data-drupal-messages] [aria-label="Warning message"] {
  background: #5a3d0a;
  color: #ffe9b3;
  border: 1px solid var(--sk-gold-alt);
}
.sk-content [data-drupal-messages] [aria-label="Warning message"] a {
  color: var(--sk-gold);
  font-weight: bold;
}
.sk-content [data-drupal-messages] [aria-label="Status message"] {
  background: #14432a;
  color: #d7f5e3;
  border: 1px solid #2f8f5b;
}
.sk-content [data-drupal-messages] [aria-label="Status message"] a {
  color: #9be8bd;
  font-weight: bold;
}
.sk-content [data-drupal-messages] [aria-label="Error message"] {
  background: #4a1414;
  color: #ffd6d6;
  border: 1px solid #b23a3a;
}
.sk-content [data-drupal-messages] [aria-label="Error message"] a {
  color: #ff9d9d;
  font-weight: bold;
}

/* Generic search block (e.g. core Search form block) styled like the
   "Log in to post on the forums ... [search][Search]" bar. */
.search-form,
.sk-content form.search-block-form {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin: 0 17px 16px;
  color: #b9c7de;
  font-size: 12px;
}
.search-form input[type="text"],
.search-form input[type="search"] {
  border: none;
  border-radius: 3px;
  padding: 6px 10px;
  min-width: 220px;
}
.search-form input[type="submit"] {
  background: #e7e7e7;
  border: 1px solid #b8b8b8;
  border-radius: 3px;
  padding: 6px 14px;
  cursor: pointer;
  font-weight: 600;
}

/* The "Log in to post new content in the forum." prompt core renders as a
   <ul class="action-links"> with one bulleted <li>. */
.sk-content .action-links {
  list-style: none;
  margin: 0 17px 16px;
  padding: 0;
  text-align: right;
  font-size: 12px;
  color: #ffffff;
}
.sk-content .action-links .button {
  color: #ffffff;
  text-decoration: none;
  font-weight: normal;
}
.sk-content .action-links .button:hover { text-decoration: underline; }

/* ---------- Forum listing table (core Forum module markup) ----------
 * Drupal core's actual forum-list.html.twig output carries NO classes at
 * all on the table/rows/cells -- only a bare <table>, a `.indent` div per
 * nesting level, and an icon <div title="..."> placeholder. So instead of
 * BEM-ish classes, these selectors key off structure:
 * - a group/category divider row (vocabulary term with no direct topics)
 *   renders its single cell as <td colspan="4">
 * - an actual forum row (has topics/posts/last-post data) renders 4 plain
 *   <td>s, no colspan
 * Verified directly against forums-upgrade.spiralknights.com's live DOM.
 */

.sk-content table {
  width: calc(100% - 6px);
  border-collapse: collapse;
  margin: 0 3px 20px;
}

.sk-content table thead th {
  background: var(--sk-header-bg);
  color: var(--sk-gold);
  text-align: left;
  font-weight: bold;
  padding: 8px 14px;
  font-size: 14px;
}
/* Every column header is a sort link (core tablesort markup), and the
   global `a { color: var(--sk-link-blue) }` rule otherwise wins over the
   inherited gold above -- a direct rule on the element always beats an
   inherited one, regardless of the ancestor's specificity. Left unfixed,
   the link's blue was low-contrast against the header's own blue
   background. */
.sk-content table thead th a {
  color: inherit;
}
.sk-content table thead th:nth-child(2),
.sk-content table thead th:nth-child(3) { text-align: center; width: 80px; }
.sk-content table thead th:nth-child(4) { width: 220px; }

/* Faint column divider lines, matching the reference site's table.
   box-shadow rather than border-left: border-collapse silently drops a
   plain border-left on some column boundaries (confirmed on the
   Replies/Last-reply edge specifically -- a collapsed-border resolution
   quirk, not a selector-matching issue, since a debug border-left DID
   paint at 4px/solid-red but not at 1-2px/low-opacity). An inset
   box-shadow paints inside the cell's own box and isn't subject to
   border-collapse resolution at all, so it renders consistently on every
   column boundary in both tables. */
.sk-content table th:not(:first-child),
.sk-content table td:not(:first-child):not([colspan]) {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.12);
}

/* Group/category divider rows: vocabulary / top-level groupings, e.g.
   "English Language Forums", and sub-section dividers like
   "Announcements" / "General". */
.sk-content table tbody tr:has(td[colspan]) td {
  background: var(--sk-container-bg);
  color: var(--sk-ink);
  padding: 10px 14px;
}
.sk-content table tbody tr:has(td[colspan]) td > a,
.sk-content table tbody tr:has(td[colspan]) td > div > a {
  color: var(--sk-link-blue);
  font-weight: bold;
  font-size: 15px;
}
.sk-content table tbody tr:has(td[colspan]) td div:last-child {
  color: #45516b;
  font-weight: normal;
  font-size: 13px;
  margin-top: 2px;
}
/* No folder icon on divider rows -- matches the live drupal6 site. */
.sk-content table tbody tr:has(td[colspan]) td div[title] { display: none; }

/* Forum rows: the actual forum listing lines with icon/name/description +
   topics/posts/last-post columns. */
.sk-content table tbody tr:not(:has(td[colspan])) td {
  padding: 10px 14px;
  vertical-align: middle;
}
.sk-content table tbody tr:not(:has(td[colspan])):nth-child(odd) td {
  background: var(--sk-row-odd);
}
.sk-content table tbody tr:not(:has(td[colspan])):nth-child(even) td {
  background: var(--sk-row-even);
}

/* Both tables render their icon as a sibling of the title/description
   inside ONE cell (there's no separate icon column in the underlying
   markup) -- padding-left plus absolutely positioning the icon inside
   that reserved space recreates a dedicated icon column purely in CSS,
   matching the reference site, without needing a real extra column.
   Fixed regardless of nesting depth on purpose: forum-list rows can be
   wrapped in one or more .indent divs (sub-forum depth), but the icon
   should stay in the same visual column regardless -- only the
   title/description text should shift with indentation. */
.sk-content table tbody tr:not(:has(td[colspan])) td:first-child,
.sk-content table tbody tr:not(:has(td[colspan])) td.forum__topic {
  position: relative;
  padding-left: 60px;
}

/* Icon placeholder div, forum-list rows only (title="No new posts" /
   "New posts" -- confirmed against forum.module's
   template_preprocess_forum_list(), which never sets any other text here;
   there's no "locked forum" state in this contrib module, only locked
   *topics*, handled separately below). Explicitly excludes .forum__topic
   so it can't also catch the topic-list icons below -- both tables can
   appear on the same page when a forum has both sub-forums and topics of
   its own, and both put a title attribute on a bare <div>, so without this
   the two rule sets would fight over the same elements. */
.sk-content table td:not([colspan]):not(.forum__topic):not(.sk-topic__icon) div[title] {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: url("../images/forum-folder.png") no-repeat center / contain;
}
.sk-content table td:not([colspan]):not(.forum__topic) div[title="New posts"] {
  background-image: url("../images/forum-folder-new-posts.png");
}

/* Topic-list icon placeholder (td.forum__topic, per the Views-based topic
   table forum.module renders) -- exact title strings from
   template_preprocess_forum_icon(), which is also where the precedence
   comes from: sticky beats closed beats hot/hot-new beats new/default. */
.sk-content table td.forum__topic div[title],
.sk-content table td.sk-topic__icon div[title] {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: url("../images/topic-default.png") no-repeat center / contain;
}
.sk-content table td.forum__topic div[title="New comments"],
.sk-content table td.sk-topic__icon div[title="New comments"] {
  background-image: url("../images/topic-new.png");
}
.sk-content table td.forum__topic div[title="Hot topic"],
.sk-content table td.sk-topic__icon div[title="Hot topic"] {
  background-image: url("../images/topic-hot.png");
}
.sk-content table td.forum__topic div[title="Hot topic, new comments"],
.sk-content table td.sk-topic__icon div[title="Hot topic, new comments"] {
  background-image: url("../images/topic-hot-new.png");
}
.sk-content table td.forum__topic div[title="Sticky topic"],
.sk-content table td.sk-topic__icon div[title="Sticky topic"] {
  background-image: url("../images/topic-sticky.png");
}
.sk-content table td.forum__topic div[title="Closed topic"],
.sk-content table td.sk-topic__icon div[title="Closed topic"] {
  background-image: url("../images/topic-closed.png");
}

.sk-content table td:not([colspan]):first-child > a,
.sk-content table td:not([colspan]):first-child > div > a {
  color: var(--sk-link-blue);
  font-weight: bold;
  font-size: 15px;
}
.sk-content table td:not([colspan]):first-child div:last-child {
  display: block;
  color: var(--sk-desc-grey);
  font-size: 12px;
  margin-top: 2px;
}

.sk-content table td:nth-child(2),
.sk-content table td:nth-child(3) {
  text-align: center;
  color: var(--sk-count-navy);
  font-weight: normal;
}

.sk-content table td:nth-child(4) {
  font-size: 12px;
  color: var(--sk-count-navy);
}
.sk-content table td:nth-child(4) a {
  color: var(--sk-link-blue);
  font-weight: normal;
}
.sk-content table td:nth-child(4) span > span {
  font-weight: bold;
  color: var(--sk-count-navy);
}

/* Nesting depth (vocabulary > container > forum) is expressed purely by
   how many .indent divs wrap the icon/name/description -- padding
   compounds naturally since they nest. */
.sk-content table td .indent { padding-left: 20px; }

/* ---------- Topic list (Advanced Forum layout) ----------
 * spiralknights_build_topic_table() rebuilds the forum module's topic table
 * as the old site's Advanced Forum one: icon | Topic | Replies | Created |
 * Last reply, with classed cells. Colors and sizes are the old site's
 * computed styles. The generic structural rules above (written for the
 * forum-list table) would misfire here, e.g. a moved topic's colspan cell
 * would be styled as a category divider, so these override them.
 */
.sk-content table.sk-topic-list thead th {
  text-align: center;
  padding: 6px 8px;
  width: auto;
}
.sk-content table.sk-topic-list thead th.sk-topic__icon { width: 52px; }
.sk-content table.sk-topic-list thead th:nth-child(3) { width: 70px; }
.sk-content table.sk-topic-list thead th:nth-child(4),
.sk-content table.sk-topic-list thead th:nth-child(5) { width: 150px; }

.sk-content table.sk-topic-list tbody tr.sk-topic td {
  position: static;
  padding: 6px 8px;
  vertical-align: middle;
  text-align: left;
  font-size: 14px;
  color: var(--sk-count-navy);
  background: var(--sk-row-even);
  border-bottom: 1px solid #466288;
}
.sk-content table.sk-topic-list tbody tr.sk-topic:nth-child(odd) td { background: var(--sk-row-odd); }
.sk-content table.sk-topic-list tbody tr.sk-topic--sticky td { background: #97c3dd; }

/* tr.sk-topic in these selectors: they have to outrank the generic per-column rules above. */
.sk-content table.sk-topic-list tbody tr.sk-topic td.sk-topic__icon { width: 52px; padding: 6px 4px; text-align: center; }
.sk-content table.sk-topic-list td.sk-topic__icon div[title] {
  display: inline-block;
  position: static;
  transform: none;
  vertical-align: middle;
}

.sk-content table.sk-topic-list tbody tr.sk-topic td.sk-topic__title { color: #1e0655; }
.sk-content table.sk-topic-list td.sk-topic__title > a { font-weight: normal; font-size: 15px; }
.sk-topic__adminpost {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-right: 4px;
  vertical-align: middle;
  background: url("../images/topic-adminpost.png") no-repeat center / contain;
}
.sk-content table.sk-topic-list .sk-topic__pages { color: var(--sk-ink); font-size: 13px; margin-top: 2px; }
.sk-content table.sk-topic-list .sk-topic__pages a { color: var(--sk-link-blue); }

.sk-content table.sk-topic-list tbody tr.sk-topic td.sk-topic__replies { text-align: center; }
.sk-content table.sk-topic-list tbody tr.sk-topic td.sk-topic__created,
.sk-content table.sk-topic-list tbody tr.sk-topic td.sk-topic__last-reply {
  font-size: 12.5px;
  line-height: 140%;
  padding: 4px 10px;
}
.sk-content table.sk-topic-list td.sk-topic__moved a { color: var(--sk-link-blue); font-weight: normal; font-size: 14px; }

/* ---------- Forum topic / reply posts ----------
 * node--forum.html.twig and comment.html.twig render the same .sk-post
 * structure, the old site's Advanced Forum (blue_lagoon) post: a
 * full-width blue header bar (gold date, white "#N"), then the author
 * column (avatar, teal name) beside a white box with the reply's title
 * and content. Colors and sizes are the old site's computed styles.
 */

.sk-topic-title {
  color: var(--sk-gold);
  font-size: 20px;
  font-weight: normal;
  margin: 8px 3px 12px;
  padding: 0 17px;
}

.sk-topic-replies {
  text-align: right;
  color: #b9c7de;
  font-size: 12px;
  margin: 0 3px 4px;
}
.sk-topic-replies a { color: #ffffff; }

.sk-post {
  margin: 0 3px 8px;
  border: 1px solid #264a73;
  border-top: 0;
}

.sk-post__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #264a73;
  color: var(--sk-gold);
  font-size: 11px;
  font-weight: bold;
  padding: 3px 6px;
}
.sk-post__header .sk-post__number {
  color: #ffffff;
  font-size: 13px;
  font-weight: normal;
}

.sk-post__row {
  display: flex;
}

.sk-post__meta {
  flex: 0 0 150px;
  padding: 0 5px 10px;
  text-align: center;
}

.sk-post__avatar {
  display: block;
  width: 96px;
  height: 96px;
  margin: 10px auto 4px;
  object-fit: cover;
}

.sk-post__author {
  margin-top: 8px;
  color: var(--sk-teal-bright);
  font-size: 16px;
  word-break: break-word;
}

.sk-post__body-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-left: 1px solid #264a73;
}

.sk-post__title {
  padding: 2px 10px;
  border-bottom: 1px solid #264a73;
  color: #000c3d;
  font-size: 13px;
  font-weight: bold;
}

.sk-post__content {
  flex: 1 1 auto;
  color: #000c3d;
  padding: 2px 10px 10px;
  font-size: 13px;
  line-height: 1.5;
}
.sk-post__content a { color: var(--sk-link-blue); }

/* Operation links (Edit/Delete) and the comment/reply form -- generic
   Drupal `links.html.twig` markup, still styled as a small dark button
   bar even though the individual field wrappers around it are unclassed. */
.sk-post__content .links {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 10px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid #ddd;
}
.sk-post__content .links a {
  display: inline-block;
  background: #264a73;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 11px;
  text-decoration: none;
}
.sk-post__content .links a:hover { background: #3a6699; }

.sk-content form.comment-form,
.sk-content .comment-form {
  background: var(--sk-post-avatar-bg);
  margin: 0 3px 20px;
  padding: 14px;
}
/* Shown in place of the reply form to accounts without an Ident Knight
   (ooosso_form_comment_form_alter()). */
.sk-content .comment-form .ooosso-ident-knight-required { margin: 0; font-size: 13px; }
.sk-content .comment-form .ooosso-ident-knight-required a { color: #ffffff; }
.sk-content form.comment-form label,
.sk-content .comment-form label {
  color: #cfe0f5;
}
.sk-content form.comment-form textarea,
.sk-content .comment-form textarea {
  width: 100%;
  border-radius: 3px;
  border: none;
  padding: 8px;
}
.sk-content form.comment-form input[type="submit"],
.sk-content .comment-form input[type="submit"] {
  background: var(--sk-gold);
  color: var(--sk-ink);
  border: none;
  border-radius: 3px;
  padding: 8px 18px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 8px;
}

@media (max-width: 700px) {
  .sk-post__row { flex-direction: column; }
  .sk-post__meta { flex: none; }
  .sk-post__body-wrapper { border-left: 0; }
}

/* ---------- Pager ----------
 * Targets core's standard pager.html.twig classes (.pager/.pager__items/
 * .pager__item) -- unlike node/comment, the pager template wasn't gutted
 * by the base-theme-less markup stripping, so this should apply as-is.
 * The plain `ul li` fallback below covers it if that assumption is wrong.
 */
.sk-content .pager,
.sk-content nav[aria-label="Pagination"] {
  margin: 0 3px 20px;
  padding: 10px 14px;
}
.sk-content .pager__items,
.sk-content nav[aria-label="Pagination"] ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.sk-content .pager__item,
.sk-content nav[aria-label="Pagination"] li {
  display: block;
}
.sk-content .pager__item a,
.sk-content nav[aria-label="Pagination"] li a {
  display: inline-block;
  min-width: 24px;
  text-align: center;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--sk-container-bg);
  color: var(--sk-ink);
  font-weight: bold;
  text-decoration: none;
}
.sk-content .pager__item a:hover {
  background: var(--sk-gold);
}
/* The current page's <li class="pager__item is-active"> still wraps its
   own <a> (verified against forums-upgrade.spiralknights.com's live DOM) --
   style that inner link, not the li itself. Styling both (as one merged
   rule used to) double-stacked the padding/background box on just this
   one item, which is what made it look enlarged/lower than its siblings. */
.sk-content .pager__item.is-active a {
  background: var(--sk-header-bg);
  color: var(--sk-gold);
}

/* ---------- Forum/topic icon-key legends (forums.html.twig) ----------
 * Same icon assets as the live legends on forums.spiralknights.com:
 * forum-folder*.png (already used for the table rows themselves) for the
 * 3-icon forum-index legend, and the newly-added topic-*.png set for the
 * 6-icon per-forum topic legend.
 */
.sk-forum-legend,
.sk-topic-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin: 16px 17px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #b9c7de;
  font-size: 12px;
}
.sk-forum-legend__item,
.sk-topic-legend__item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.sk-forum-legend__icon,
.sk-topic-legend__icon {
  display: inline-block;
  background: no-repeat center / contain;
}
.sk-forum-legend__icon { width: 32px; height: 32px; }
.sk-forum-legend__icon--new-posts { background-image: url("../images/forum-folder-new-posts.png"); }
.sk-forum-legend__icon--no-new    { background-image: url("../images/forum-folder.png"); }
.sk-forum-legend__icon--locked    { background-image: url("../images/forum-folder-locked.png"); }

.sk-topic-legend__icon { width: 28px; height: 28px; }
.sk-topic-legend__icon--default { background-image: url("../images/topic-default.png"); }
.sk-topic-legend__icon--new     { background-image: url("../images/topic-new.png"); }
.sk-topic-legend__icon--hot     { background-image: url("../images/topic-hot.png"); }
.sk-topic-legend__icon--hot-new { background-image: url("../images/topic-hot-new.png"); }
.sk-topic-legend__icon--sticky  { background-image: url("../images/topic-sticky.png"); }
.sk-topic-legend__icon--closed  { background-image: url("../images/topic-closed.png"); }

.sk-feed-icon {
  margin: 0 17px 10px;
}
.sk-feed-icon__link {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("../images/feed.png") no-repeat center / contain;
}

.sk-powered-by {
  margin: 0 17px 20px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sk-powered-by__link {
  display: inline-block;
  width: 80px;
  height: 15px;
  background: url("../images/powered-blue-80x15.png") no-repeat center / contain;
}

/* ---------- Footer ---------- */

/* 980px and centered, matching the content panel. Colors, sizes and spacing
   are the old site's computed styles (www.spiralknights.com's footer, which
   the D6 forum pulled in): gold nav links, brown small links and dividers,
   grey copyright. */
.sk-footer {
  clear: both;
  max-width: 980px;
  margin: 0 auto;
  padding-top: 13px;
  background: var(--sk-bg-fallback) url("../images/spiralknights_core.jpg") no-repeat top center;
  font-family: Arial, Verdana, sans-serif;
  font-size: 12px;
  color: #8e4b01;
}
.sk-footer a { color: #8e4b01; }
.sk-footer a:hover { color: #e1af3a; text-decoration: none; }
.sk-footer__havens {
  display: block;
  width: 244px;
  height: 100px;
  background: url("../images/logo_havens.png") no-repeat;
  background-size: contain;
}

/* ---------- Footer nav (sitewide, not a page.footer block) ---------- */

.sk-footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0 4px;
  border-bottom: 1px solid #331d03;
  font-size: 13.333px;
}
.sk-footer-nav__terms {
  order: 2;
  padding-right: 22px;
  font-weight: bold;
  color: #e1af3a;
}
.sk-footer-nav__terms a { color: #e1af3a; }
.sk-footer-nav__list {
  order: 1;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.sk-footer-nav__list li { padding-right: 29px; }
.sk-footer-nav__list a {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #e1af3a;
}
.sk-footer-nav__list a:hover { color: #ffffff; }
.sk-footer-nav__icon {
  display: inline-block;
  width: 22px;
  height: 19px;
  background: no-repeat center / contain;
}
.sk-footer-nav__icon--home   { background-image: url("../images/home_sm.png"); }
.sk-footer-nav__icon--play   { background-image: url("../images/play_sm.png"); }
.sk-footer-nav__icon--about  { background-image: url("../images/about_sm.png"); }
.sk-footer-nav__icon--media  { background-image: url("../images/media_sm.png"); }
.sk-footer-nav__icon--forums { background-image: url("../images/forums_sm.png"); }
.sk-footer-nav__icon--wiki   { background-image: url("../images/wiki_sm.png"); }

/* Three link columns (280/200/100px wide, the first indented 28px), with
   the Grey Havens logo at the far right. */
.sk-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  min-height: 115px;
  padding: 4px 0 0 28px;
  line-height: 17px;
}
.sk-footer-links .sk-footer__havens {
  order: 1;
  flex: 0 0 auto;
  margin: 5px 15px 0 auto;
}
.sk-footer-links__col {
  display: flex;
  flex-direction: column;
  flex: 0 0 200px;
}
.sk-footer-links__col:first-of-type { flex-basis: 252px; }
.sk-footer-links__col:last-of-type { flex-basis: 100px; white-space: nowrap; }
.sk-footer__copyright {
  margin: 0;
  padding: 5px 0 0;
  border-top: 1px solid #331d03;
  text-align: center;
  font-size: 10.667px;
  color: #b7b9b9;
}

/* ---------- Responsive ---------- */

@media (max-width: 700px) {
  .sk-scenery-wrap { background-position: 0 60px; }
  .sk-header { padding-top: 60px; }
  .sk-logo { width: 180px; height: 66px; }
  .sk-account-bar { position: static; text-align: left; margin-bottom: 8px; }
  .sk-nav { justify-content: center; }
  .sk-nav__link { width: 76px; height: 58px; background-size: 462px 231px; }
  .sk-nav__link--home   { background-position: 0 0; }
  .sk-nav__link--play   { background-position: -77px 0; }
  .sk-nav__link--about  { background-position: -154px 0; }
  .sk-nav__link--media  { background-position: -231px 0; }
  .sk-nav__link--forums { background-position: -308px 0; }
  .sk-nav__link--wiki   { background-position: -385px 0; }
  .sk-content table thead th:nth-child(4),
  .sk-content table td:nth-child(4) { display: none; }
  .search-form { justify-content: flex-start; flex-wrap: wrap; }
}