/*
 * custom.css — styles for the parts of the site whose original CSS
 * did not survive in the Web Archive. Loaded after all theme styles.
 * Colors come from the Kadence palette defined inline in every page
 * (--global-palette1 … 9), so everything matches the original theme.
 */

html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------
 * 1. Home page hero (its background photo is not in the archive)
 * ------------------------------------------------------------------ */
.home .kb-row-layout-id_72f54c-bd {
  position: relative;
  overflow: hidden;
  background-color: #141a33 !important;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(255, 200, 40, .28) 0, transparent 38%),
    radial-gradient(circle at 85% 75%, rgba(43, 108, 176, .55) 0, transparent 45%),
    linear-gradient(135deg, #10162e 0%, #1d2a5a 50%, #3a1d5c 100%) !important;
  background-size: cover !important;
}
/* geometric "level" pattern */
.home .kb-row-layout-id_72f54c-bd::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 2px, transparent 2px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  pointer-events: none;
}
/* spikes along the bottom edge */
.home .kb-row-layout-id_72f54c-bd::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28px;
  background: linear-gradient(135deg, transparent 50%, #cee3ef 50%) 0 0 / 28px 28px repeat-x,
              linear-gradient(225deg, transparent 50%, #cee3ef 50%) 0 0 / 28px 28px repeat-x;
  pointer-events: none;
}
.home .kb-row-layout-id_72f54c-bd > .kt-row-column-wrap {
  position: relative;
  z-index: 1;
  padding-top: 110px !important;
  padding-bottom: 130px !important;
  text-align: center;
}
.home .kb-row-layout-id_72f54c-bd > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col::before {
  content: "Geometry Dash Mod APK";
  display: block;
  font-family: var(--global-body-font-family);
  font-size: clamp(32px, 6vw, 64px);
  font-weight: 800;
  line-height: 1.1;
  color: #ffd23f;
  letter-spacing: .02em;
  text-shadow: 0 4px 0 #b4580a, 0 10px 30px rgba(0, 0, 0, .45);
}
.home .kb-row-layout-id_72f54c-bd > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col::after {
  content: "Game synced with the rhythm of music";
  display: block;
  margin-top: 18px;
  font-size: clamp(15px, 2vw, 20px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.home .kb-row-layout-id_4d8174-50 > .kt-row-column-wrap { padding: 0 !important; }

/* ------------------------------------------------------------------
 * 2. Kadence Blocks Pro post grid ("Popular Posts")
 *    original style-post-grid-styles.css is missing
 * ------------------------------------------------------------------ */
.kt-post-grid-wrap {
  display: grid;
  grid-template-columns: repeat(var(--kb-cols, 1), minmax(0, 1fr));
  gap: 30px;
}
.kt-post-grid-wrap[data-columns-ss="1"] { --kb-cols: 1; }
.kt-post-grid-wrap[data-columns-ss="2"] { --kb-cols: 2; }
@media (min-width: 544px) {
  .kt-post-grid-wrap[data-columns-xs="1"] { --kb-cols: 1; }
  .kt-post-grid-wrap[data-columns-xs="2"] { --kb-cols: 2; }
  .kt-post-grid-wrap[data-columns-xs="3"] { --kb-cols: 3; }
}
@media (min-width: 768px) {
  .kt-post-grid-wrap[data-columns-sm="1"] { --kb-cols: 1; }
  .kt-post-grid-wrap[data-columns-sm="2"] { --kb-cols: 2; }
  .kt-post-grid-wrap[data-columns-sm="3"] { --kb-cols: 3; }
}
@media (min-width: 992px) {
  .kt-post-grid-wrap[data-columns-md="1"] { --kb-cols: 1; }
  .kt-post-grid-wrap[data-columns-md="2"] { --kb-cols: 2; }
  .kt-post-grid-wrap[data-columns-md="3"] { --kb-cols: 3; }
  .kt-post-grid-wrap[data-columns-md="4"] { --kb-cols: 4; }
}

/* the layout is "image left" with 3 columns — too cramped, so put the image on top */
.kt-blocks-post-grid-item {
  height: 100%;
  border-style: solid;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.kt-blocks-post-grid-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(26, 32, 44, .14);
}
.kt-blocks-post-grid-item-inner-wrap {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
.kt-blocks-post-grid-item .kadence-post-image { padding: 0 !important; }
.kadence-post-image-intrisic {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25% !important;
  background: var(--global-palette7);
}
.kadence-post-image-inner-intrisic,
.kadence-post-image-inner-wrap {
  position: absolute;
  inset: 0;
  display: block;
}
.kadence-post-image-inner-intrisic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.kt-blocks-post-grid-item:hover .kadence-post-image-inner-intrisic img { transform: scale(1.05); }
.kt-blocks-post-grid-item-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px !important;
}
.kt-blocks-post-grid-item .entry-title { line-height: 1.45 !important; font-size: 16px !important; }
.kt-blocks-post-grid-item .entry-title a {
  color: var(--global-palette3);
  text-decoration: none;
}
.kt-blocks-post-grid-item .entry-title a:hover { color: var(--global-palette1); }
.kt-blocks-post-grid-item .entry-content { margin-top: auto !important; padding-top: 12px !important; }
.kt-blocks-post-readmore {
  display: inline-block;
  margin: 0 !important;
  padding: 7px 16px !important;
  border: 2px solid transparent;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.kt-blocks-post-footer:empty,
.kt-blocks-post-footer-left:empty + .kt-blocks-post-footer-right:empty { display: none; }

/* category filter (isotope JS is missing — replaced by /assets/custom.js) */
.kb-post-filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.kb-filter-item {
  cursor: pointer;
  border-style: solid;
  border-radius: 4px;
  padding: 7px 16px !important;
  font-family: inherit;
  font-size: 15px;
  transition: background-color .2s, opacity .2s;
  opacity: .75;
}
.kb-filter-item:hover,
.kb-filter-item.is-active { opacity: 1; }
.kb-filter-item.is-active { box-shadow: inset 0 -3px 0 #ffd23f; }
.kt-post-masonry-item.kb-is-filtered { display: none; }

/* ------------------------------------------------------------------
 * 3. Table of contents (Spectra / UAG) — its CSS is missing
 * ------------------------------------------------------------------ */
.wp-block-uagb-table-of-contents { margin: 1.5em 0 2em; }
.uagb-toc__wrap {
  display: inline-block;
  width: min(100%, 520px);
  padding: 18px 22px;
  background: var(--global-palette8);
  border: 1px solid var(--global-palette7);
  border-left: 4px solid var(--global-palette1);
  border-radius: 6px;
  box-sizing: border-box;
}
.uagb-toc__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--global-palette3);
  cursor: pointer;
  user-select: none;
}
.uagb-toc__title svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: currentColor;
  transition: transform .2s;
}
.uagb-toc__separator {
  height: 2px;
  margin: 12px 0 14px;
  background: var(--global-palette7);
}
.uagb-toc__wrap ol.uagb-toc__list,
.uagb-toc__wrap ul.uagb-toc__list {
  margin: 0;
  padding-left: 1.4em;
}
.uagb-toc__wrap ul.uagb-toc__list { list-style: disc; margin: 4px 0; }
li.uagb-toc__list { margin: 4px 0; line-height: 1.5; }
li.uagb-toc__list a { text-decoration: none; color: var(--global-palette1); }
li.uagb-toc__list a:hover { text-decoration: underline; }
.uagb-toc__wrap.is-collapsed .uagb-toc__separator,
.uagb-toc__wrap.is-collapsed .uagb-toc__list-wrap { display: none; }
.uagb-toc__wrap.is-collapsed .uagb-toc__title svg { transform: rotate(-90deg); }

/* Kadence table of contents — JS missing, keep it always open */
.kb-table-of-content-nav .kb-table-of-content-list-wrap,
.kb-table-of-content-nav .kb-table-of-content-list { display: block !important; max-height: none !important; }

/* ------------------------------------------------------------------
 * 4. Search widget (now searches the site via Google)
 * ------------------------------------------------------------------ */
.wp-block-search__inside-wrapper { display: flex; gap: 6px; }
.wp-block-search__input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--global-palette6);
  border-radius: 4px;
  font: inherit;
}
.wp-block-search__input:focus { outline: none; border-color: var(--global-palette1); box-shadow: 0 0 0 3px rgba(43, 108, 176, .18); }
.wp-block-search__button {
  padding: 10px 18px;
  border: 0;
  border-radius: 4px;
  background: var(--global-palette-btn-bg, #2B6CB0);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.wp-block-search__button:hover { background: var(--global-palette-btn-bg-hover, #215387); }

/* ------------------------------------------------------------------
 * 5. Contact form (works through the visitor's mail client, see custom.js)
 * ------------------------------------------------------------------ */
.wpcf7-form { max-width: 640px; }
.wpcf7-form label { display: block; font-weight: 700; color: var(--global-palette3); }
.wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--global-palette6);
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-weight: normal;
  box-sizing: border-box;
}
.wpcf7-form textarea { min-height: 160px; resize: vertical; }
.wpcf7-form input:focus,
.wpcf7-form textarea:focus { outline: none; border-color: var(--global-palette1); box-shadow: 0 0 0 3px rgba(43, 108, 176, .18); }
.wpcf7-submit {
  padding: 12px 32px;
  border: 0;
  border-radius: 4px;
  background: var(--global-palette-btn-bg, #2B6CB0);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.wpcf7-submit:hover { background: var(--global-palette-btn-bg-hover, #215387); }
.wpcf7-response-output:not(:empty) {
  margin-top: 16px;
  padding: 12px 16px;
  border-left: 4px solid var(--global-palette1);
  background: var(--global-palette8);
}

/* ------------------------------------------------------------------
 * 6. Small fixes
 * ------------------------------------------------------------------ */
/* placeholder for images that are not in the archive */
img[src="/assets/placeholder.svg"] { object-fit: cover; background: #1b2a4a; }
/* hidden comment / reply leftovers of WordPress */
.comment-respond, #respond, .comment-reply-link { display: none !important; }
/* tables (TablePress css is missing) */
.single-content table { width: 100%; border-collapse: collapse; }
.tablepress th, .tablepress td { padding: 8px 10px; border-top: 1px solid var(--global-palette7); text-align: left; }
.tablepress thead th { background: var(--global-palette7); font-weight: 700; }
.tablepress tbody tr:nth-child(odd) td { background: var(--global-palette8); }
/* embedded videos keep their ratio on phones */
.wp-block-embed__wrapper iframe { max-width: 100%; }
@media (max-width: 767px) {
  .home .kb-row-layout-id_72f54c-bd > .kt-row-column-wrap { padding-top: 70px !important; padding-bottom: 90px !important; }
}

/* Contact page: the theme shows it full-width with no title — give it a container */
.wp-block-contact-form-7-contact-form-selector {
  max-width: 720px;
  margin: 48px auto 64px;
  padding: 32px 36px 36px;
  background: #fff;
  border: 1px solid var(--global-palette7);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(26, 32, 44, .08);
  box-sizing: border-box;
}
.wp-block-contact-form-7-contact-form-selector::before {
  content: "Contact Us";
  display: block;
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: 700;
  color: var(--global-palette3);
}
.wp-block-contact-form-7-contact-form-selector .wpcf7-form { max-width: none; }
@media (max-width: 767px) {
  .wp-block-contact-form-7-contact-form-selector { margin: 24px 16px 40px; padding: 22px 18px; }
}
