/*
 * okcmod.com shell styles.
 * Values reproduced from the archived Themify Customizer stylesheet of 2026-07-22:
 * wp-content/uploads/themify-css/concate/2945832019/themify-concate-3669258860.css
 */

:root {
  --okcmod-ground: #272727;
  --okcmod-text: #676767;
  --okcmod-link: #00acf0;
  --okcmod-bright: #d1d1d1;
  --okcmod-nav-hover: #acacac;
  --okcmod-post-title: #b0b0b0;
  --okcmod-width: 1000px;
  /* Resolved relative to THIS stylesheet, not the site root: the pre-DNS-flip preview serves the
   * site under /~okcmodpanel/, where a root-relative path 404s and the texture silently vanishes. */
  --okcmod-linen: url("../../../../uploads/2012/09/low_contrast_linen.png");
}

body {
  background-color: var(--okcmod-ground);
  background-image: var(--okcmod-linen);
  color: var(--okcmod-text);
  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

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

/* ---------- header ---------- */

.okcmod-header {
  background-image: var(--okcmod-linen);
  padding: 0 0 10px;
}

.okcmod-header__inner {
  max-width: var(--okcmod-width);
  margin: 0 auto;
  padding: 20px 15px 0;
}

.okcmod-header a,
.okcmod-footer a {
  color: var(--okcmod-bright);
  text-decoration: none;
}

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

/* ---------- primary nav ---------- */

.okcmod-nav {
  padding-top: 15px;
}

.okcmod-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.okcmod-nav li {
  position: relative;
  padding: 0 15px;
  margin: 0;
}

.okcmod-nav a {
  font-family: Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--okcmod-text);
  text-decoration: none;
  display: block;
  padding: 6px 0;
}

.okcmod-nav a:hover,
.okcmod-nav .current-menu-item > a,
.okcmod-nav .current_page_item > a,
.okcmod-nav .current-menu-ancestor > a {
  color: var(--okcmod-nav-hover);
}

.okcmod-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 220px;
  background-color: var(--okcmod-ground);
  flex-direction: column;
  padding: 6px 0;
}

.okcmod-nav li:hover > .sub-menu,
.okcmod-nav li:focus-within > .sub-menu {
  display: flex;
}

.okcmod-nav .sub-menu a {
  padding: 6px 15px 6px 2px;
}

/* ---------- body ---------- */

.okcmod-main {
  max-width: var(--okcmod-width);
  margin: 0 auto;
  padding: 0 15px;
}

.okcmod-content {
  background-color: var(--okcmod-ground);
  padding: 15px;
}

.okcmod-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.okcmod-layout__main {
  flex: 1 1 auto;
  min-width: 0;
}

.okcmod-layout__sidebar {
  flex: 0 0 27%;
  padding: 0 10px;
}

.okcmod-page-title {
  font-size: 20px;
}

.okcmod-post-title,
.okcmod-post-title a {
  font-size: 25px;
  color: var(--okcmod-post-title);
}

.okcmod-post-title a:hover {
  color: var(--okcmod-bright);
}

.okcmod-post-meta {
  font-size: 13px;
  margin-bottom: 1.2em;
}

.okcmod-content ul li,
.okcmod-content ol li {
  margin: 0 0 10px;
  line-height: 1.4em;
}

.okcmod-content ul ul,
.okcmod-content ol ul {
  list-style-type: disc;
}

/* ---------- images the Wayback Machine never captured ----------
 * The page keeps the image in place so the layout and the caption still read correctly, and so
 * the client can restore the photo by dropping the file at exactly that path. Until then the slot
 * shows what the photo was rather than a broken-image icon.
 */

img.okcmod-missing-image {
  display: block;
  min-height: 120px;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  padding: 14px;
  border: 1px dashed #4a4a4a;
  background-color: #1f1f1f;
  color: #8a8a8a;
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  text-indent: 0;
}

/* ---------- child-page index (replaces the cc-child-pages plugin) ---------- */

.okcmod-child-pages {
  list-style: none;
  margin: 1.5em 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.okcmod-child-pages--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.okcmod-child-pages--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.okcmod-child-pages--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.okcmod-child-page a {
  display: block;
  color: var(--okcmod-text);
  text-decoration: none;
}

.okcmod-child-page a:hover {
  color: #d0d0d0;
}

.okcmod-child-page__thumb img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.okcmod-child-page__title {
  display: block;
  font-size: 1em;
  font-weight: 500;
  margin-top: 6px;
}

/* ---------- footer ---------- */

.okcmod-footer {
  max-width: var(--okcmod-width);
  margin: 0 auto;
  padding: 30px 15px 40px;
  font-size: 13px;
}

.okcmod-footer__logo img {
  width: 150px;
  height: auto;
  display: block;
}

.okcmod-social {
  list-style: none;
  display: flex;
  gap: 14px;
  margin: 14px 0;
  padding: 0;
}

.okcmod-social a {
  color: var(--okcmod-bright);
  text-decoration: none;
}

/* ---------- responsive ---------- */

@media only screen and (max-width: 900px) {
  .okcmod-layout {
    display: block;
  }

  .okcmod-layout__sidebar {
    width: 100%;
    padding: 20px 0 0;
  }

  .okcmod-child-pages--cols-3,
  .okcmod-child-pages--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 600px) {
  .okcmod-nav ul {
    flex-direction: column;
  }

  .okcmod-nav .sub-menu {
    position: static;
    display: flex;
    padding-left: 14px;
  }

  .okcmod-child-page__thumb img {
    height: 75px;
  }

  .okcmod-child-page__title {
    font-size: 0.7em;
  }
}