/*
 * The blog's pages in frvr.com's look: category headers, the archive's lead posts, pagination and the
 * dark scheme. Loaded after style.css, which it overrides where the two meet.
 */

:root {
  --frvr-display: 'Lilita One', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --frvr-ink: #1d2b4f;
  --frvr-ink-soft: #555b75;
  --frvr-card: #fff;
  --frvr-line: rgba(30, 34, 80, 0.12);
}

/* Dark mode is frvr.com's navy, not grey: the page is its body colour, panels its header colour */
html[data-scheme='dark'] {
  --dark-mode-bg-1: #1e2250;
  --dark-mode-bg-2: #161a3d;
  --frvr-ink: #fff;
  --frvr-ink-soft: #d5daee;
  --frvr-card: #161a3d;
  --frvr-line: rgba(255, 255, 255, 0.12);
}

html[data-scheme='dark'] .wp-block-post-date,
html[data-scheme='dark'] .wp-block-post-date a,
html[data-scheme='dark'] .has-custom-deep-grey-color,
html[data-scheme='dark'] .has-custom-mid-grey-color {
  color: var(--frvr-ink-soft) !important;
}

/* --- Category and page header: the banner at the top of archives and of pages like FAQs (doubled
   class: style.css colours each category with four classes). The title and description on a card in
   the header's navy with its drop edge, instead of a full-width
   bright block with a tagline above and a logo card beside. --- */

:is(body.archive .browse-games-banner, body.page .wp-block-post-content > .browse-games-banner:first-child).has-background.has-background {
  background: none !important;
  color: #fff !important;
  margin-bottom: 40px !important;
  padding-top: 32px !important;
  padding-bottom: 6px !important;
}

:is(body.archive .browse-games-banner, body.page .wp-block-post-content > .browse-games-banner:first-child).has-background.has-background > .wp-block-columns {
  max-width: var(--wp--style--global--wide-size, 1140px);
  margin: 0 auto !important;
  padding: 32px 40px !important;
  border-radius: 24px;
  background: #161a3d;
  /* The header's solid drop edge */
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
}

@media (max-width: 781px) {
  :is(body.archive .browse-games-banner, body.page .wp-block-post-content > .browse-games-banner:first-child).has-background.has-background > .wp-block-columns {
    padding: 24px 22px !important;
  }
}

/* On dark mode's navy page the card needs an edge of its own */
html[data-scheme='dark'] :is(body.archive .browse-games-banner, body.page .wp-block-post-content > .browse-games-banner:first-child).has-background.has-background > .wp-block-columns {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 0 rgba(0, 0, 0, 0.35);
}

:is(body.archive .browse-games-banner, body.page .wp-block-post-content > .browse-games-banner:first-child) .frvr-cat-tagline,
:is(body.archive .browse-games-banner, body.page .wp-block-post-content > .browse-games-banner:first-child) p:has(+ h1),
:is(body.archive .browse-games-banner, body.page .wp-block-post-content > .browse-games-banner:first-child) .wp-block-column:has(.wp-block-post-featured-image),
:is(body.archive .browse-games-banner, body.page .wp-block-post-content > .browse-games-banner:first-child) .wp-block-column:has(.jet-listing-dynamic-image),
:is(body.archive .browse-games-banner, body.page .wp-block-post-content > .browse-games-banner:first-child) .wp-block-column:has([data-is-block='jet-engine/dynamic-image']) {
  display: none;
}

:is(body.archive .browse-games-banner, body.page .wp-block-post-content > .browse-games-banner:first-child) .wp-block-column {
  flex-basis: 100% !important;
}

:is(body.archive .browse-games-banner, body.page .wp-block-post-content > .browse-games-banner:first-child) h1,
:is(body.archive .browse-games-banner, body.page .wp-block-post-content > .browse-games-banner:first-child) h2 {
  margin: 0;
  color: #fff !important;
  font-family: var(--frvr-display) !important;
  font-size: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem) !important;
  font-weight: 400 !important;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

:is(body.archive .browse-games-banner, body.page .wp-block-post-content > .browse-games-banner:first-child) p {
  max-width: 46rem;
  color: #d5daee !important;
  font-size: 1.125rem !important;
  line-height: 1.5 !important;
}

:is(body.archive .browse-games-banner, body.page .wp-block-post-content > .browse-games-banner:first-child) a {
  color: #fff !important;
}

/* --- Archive lead posts: the newest post large on the left, the next three stacked beside it, then
   the grid. This used to be done by moving the posts with JavaScript after the page had loaded, and the
   moved posts kept their grid styling (square crops, collapsing thumbnails). --- */

@media (min-width: 992px) {
  .frvr-hero-posts .frvr-post-template {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 40px 32px !important;
  }

  .frvr-hero-posts .frvr-post-template > li {
    grid-column: span 3;
    min-width: 0;
  }

  .frvr-hero-posts .frvr-post-template > li:nth-child(1) {
    grid-column: 1 / 9;
    grid-row: 1 / 4;
  }

  .frvr-hero-posts .frvr-post-template > li:nth-child(1) .wp-block-post-featured-image img {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }

  .frvr-hero-posts .frvr-post-template > li:nth-child(1) .wp-block-post-title {
    font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem) !important;
    line-height: 1.2;
  }

  .frvr-hero-posts .frvr-post-template > li:nth-child(n + 2):nth-child(-n + 4) {
    grid-column: 9 / 13;
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    align-self: start;
  }

  .frvr-hero-posts .frvr-post-template > li:nth-child(2) { grid-row: 1; }
  .frvr-hero-posts .frvr-post-template > li:nth-child(3) { grid-row: 2; }
  .frvr-hero-posts .frvr-post-template > li:nth-child(4) { grid-row: 3; }

  .frvr-hero-posts .frvr-post-template > li:nth-child(n + 2):nth-child(-n + 4) .wp-block-post-featured-image {
    width: 100px;
    margin: 0;
  }

  .frvr-hero-posts .frvr-post-template > li:nth-child(n + 2):nth-child(-n + 4) .wp-block-post-featured-image img {
    border-radius: 18px !important;
  }

  .frvr-hero-posts .frvr-post-template > li:nth-child(n + 2):nth-child(-n + 4) > .wp-block-group {
    margin: 0;
    padding-top: 0 !important;
  }
}

/* --- Pagination: frvr.com's round pop buttons --- */

.frvr-paginaion {
  gap: 10px;
  margin-top: 48px !important;
  padding-bottom: 6px;
}

.frvr-paginaion .wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.frvr-paginaion .page-numbers,
.frvr-paginaion .wp-block-query-pagination-previous,
.frvr-paginaion .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 42px;
  height: 42px;
  margin: 0;
  padding: 2px 14px 0;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--frvr-card);
  color: var(--frvr-ink) !important;
  font-family: var(--frvr-display);
  font-size: 1.0625rem !important;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  box-shadow: 0 0 0 2px var(--frvr-line), 0 4px 0 2px var(--frvr-line);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.frvr-paginaion a:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--frvr-line), 0 6px 0 2px var(--frvr-line);
}

.frvr-paginaion .page-numbers.current {
  border-color: #fff;
  background: #ffc93c;
  color: #1e2250 !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2), 0 4px 0 2px #c98f00;
}

.frvr-paginaion .page-numbers.dots {
  min-width: 0;
  padding: 0 4px;
  border: 0;
  background: none;
  box-shadow: none;
}

html[data-scheme='dark'] .frvr-paginaion .page-numbers:not(.current):not(.dots),
html[data-scheme='dark'] .frvr-paginaion .wp-block-query-pagination-previous,
html[data-scheme='dark'] .frvr-paginaion .wp-block-query-pagination-next {
  border-color: rgba(255, 255, 255, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .frvr-paginaion .page-numbers,
  .frvr-paginaion a:hover {
    transition: none;
    transform: none;
  }
}

/* --- YouTube facade (inc/performance.php, assets/embeds.js): the size of the player it stands in for,
   YouTube's play button shape --- */

.frvr-yt,
.frvr-yt-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.frvr-yt {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #000;
  cursor: pointer;
}

.frvr-yt img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frvr-yt-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 14px 18px 32px;
  background: linear-gradient(rgba(0, 0, 0, 0.6), transparent);
  color: #fff;
  font: 500 1rem/1.3 Roboto, Arial, sans-serif;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .frvr-yt-title {
    padding: 10px 12px 24px;
    font-size: 0.875rem;
  }
}

.frvr-yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* YouTube's red, a shade darker when pointed at */
.frvr-yt-play-bg {
  fill: #f00;
  transition: fill 0.15s ease;
}

.frvr-yt-play-arrow {
  fill: #fff;
}

.frvr-yt:hover .frvr-yt-play-bg,
.frvr-yt:focus-visible .frvr-yt-play-bg {
  fill: #e60000;
}

.frvr-yt:focus-visible {
  outline: 3px solid #ffc93c;
  outline-offset: 3px;
}

/* Inside WordPress' responsive embed wrapper (which pads itself to the video's ratio and places the
   iframe over that) the facade sits where the iframe would; the iframe that replaces it is placed by core */
.wp-has-aspect-ratio .wp-block-embed__wrapper > .frvr-yt {
  position: absolute;
  inset: 0;
  height: 100%;
}

/* --- Links: frvr.com's blue in light mode (the theme's cyan was hard to read on the light page);
   dark mode keeps the brighter cyan, which reads well on navy --- */

html:not([data-scheme='dark']) .wp-site-blocks :where(a:not(.wp-element-button)) {
  color: #1f5fc4;
}

html:not([data-scheme='dark']) .wp-site-blocks :where(.wp-block-post-title a, .awpa-display-name a) {
  color: inherit;
}

/* --- Buttons ("More News", "More Tutorials", Subscribe ...): frvr.com's pop buttons, a white stroke
   and a solid lip under a flat fill, in the display face --- */

.wp-block-button .wp-block-button__link.wp-element-button,
.jet-form-builder__action-button {
  --fill: #3d8bff;
  --lip: #1f5fc4;
  --label: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px 8px !important;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  background: var(--fill) !important;
  color: var(--label) !important;
  font-family: var(--frvr-display) !important;
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  text-shadow: 0 2px 0 var(--lip);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2), 0 4px 0 2px var(--lip) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  cursor: pointer;
}

.wp-block-button .wp-block-button__link.wp-element-button:hover,
.wp-block-button .wp-block-button__link.wp-element-button:focus-visible,
.jet-form-builder__action-button:hover,
.jet-form-builder__action-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2), 0 6px 0 2px var(--lip) !important;
}

.wp-block-button .wp-block-button__link.wp-element-button:active,
.jet-form-builder__action-button:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2), 0 2px 0 2px var(--lip) !important;
}

.wp-block-button .wp-block-button__link.wp-element-button:focus-visible,
.jet-form-builder__action-button:focus-visible {
  outline: 3px solid #ffc93c;
  outline-offset: 4px;
}

.wp-block-button.is-style-red-but .wp-block-button__link.wp-element-button {
  --fill: #ff1f3d;
  --lip: #b80f27;
}

.wp-block-button.is-style-outline .wp-block-button__link.wp-element-button {
  --fill: #fff;
  --lip: #b9c1d1;
  --label: #1d2b4f;
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-button .wp-block-button__link.wp-element-button,
  .jet-form-builder__action-button {
    transition: none;
    transform: none !important;
  }
}

/* --- "New Game Alerts" sign-up box: a frvr.com pop panel, without the "Featured game" line above
   its title; Subscribe in the site's yellow --- */

.signup-banner.has-background {
  border: 3px solid #fff;
  background-color: #3d8bff !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15), 0 6px 0 2px #1f5fc4;
}

.signup-banner p:has(+ h2) {
  display: none;
}

.signup-banner h2 {
  font-family: var(--frvr-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  text-shadow: 0 3px 0 #1f5fc4;
}

.signup-banner .jet-form-builder__field.text-field {
  height: 46px;
  padding: 0 18px;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  background: #fff;
  color: #1d2b4f;
  font-size: 1rem;
  box-shadow: inset 0 2px 0 rgba(29, 43, 79, 0.12);
}

.signup-banner .jet-form-builder__action-button {
  --fill: #ffc93c;
  --lip: #d29a00;
  --label: #1d2b4f;
  height: 46px;
  margin-left: 8px;
  text-shadow: none;
}

/* --- Author box (WP Post Author): white name and links instead of the band's yellow, and the social
   links as the footer's round pop buttons --- */

.awpa-display-name a,
.awpa-more-posts,
a.awpa-more-posts {
  color: inherit !important;
}

:is(body.archive .browse-games-banner) .awpa-display-name a {
  font-family: var(--frvr-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-decoration: none;
}

:is(body.archive .browse-games-banner) a.awpa-more-posts {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wp-post-author ul.awpa-contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px 0 6px !important;
}

.wp-post-author ul.awpa-contact-info li {
  padding: 0 !important;
}

.wp-post-author ul.awpa-contact-info li a {
  --fill: #3d8bff;
  --lip: #1f5fc4;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 38px !important;
  height: 38px !important;
  border: 3px solid #fff;
  border-radius: 50% !important;
  background: var(--fill) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 0 2px var(--lip);
  text-decoration: none !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.wp-post-author ul.awpa-contact-info li a:hover,
.wp-post-author ul.awpa-contact-info li a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3), 0 6px 0 2px var(--lip);
}

/* The plugin's icon font glyph gives way to the footer's single-path icons */
.wp-post-author ul.awpa-contact-info li a::before {
  content: '';
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.wp-post-author ul.awpa-contact-info li.awpa-linkedin-li a { --fill: #0a66c2; --lip: #06427f; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2zM8 19H5V9.5h3V19zM6.5 8.2a1.7 1.7 0 1 1 0-3.5 1.7 1.7 0 0 1 0 3.5zM19 19h-3v-4.6c0-1.1 0-2.5-1.5-2.5s-1.8 1.2-1.8 2.4V19h-3V9.5h2.9v1.3a3.2 3.2 0 0 1 2.9-1.6c3 0 3.6 2 3.6 4.6V19z'/%3E%3C/svg%3E"); }
.wp-post-author ul.awpa-contact-info li.awpa-twitter-li a { --fill: #14171f; --lip: #000; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.2 2.3h3.4l-7.4 8.4 8.7 11.5h-6.8l-5.3-7-6.1 7H1.3l7.9-9L.8 2.3h7l4.8 6.4 5.6-6.4zm-1.2 17.9h1.9L6.9 4.2H4.9L17 20.2z'/%3E%3C/svg%3E"); }
.wp-post-author ul.awpa-contact-info li.awpa-facebook-li a { --fill: #1877f2; --lip: #0b4fb0; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.4 22v-8.4h2.8l.4-3.3h-3.2V8.2c0-.9.3-1.6 1.6-1.6h1.7V3.7c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3v2.4H7.2v3.3H10V22h3.4z'/%3E%3C/svg%3E"); }
.wp-post-author ul.awpa-contact-info li.awpa-youtube-li a { --fill: #ff1f3d; --lip: #b80f27; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2 31.6 31.6 0 0 0 0 12a31.6 31.6 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31.6 31.6 0 0 0 24 12a31.6 31.6 0 0 0-.5-5.8zM9.6 15.6V8.4l6.3 3.6-6.3 3.6z'/%3E%3C/svg%3E"); }
.wp-post-author ul.awpa-contact-info li.awpa-instagram-li a { --fill: #d6249f; --lip: #8f1569; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.8.1 3.3.1 4.8 1.7 4.9 4.9.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 3.2-1.7 4.8-4.9 4.9-1.3.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-3.3-.1-4.8-1.7-4.9-4.9C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.8C2.4 3.9 3.9 2.4 7.2 2.3 8.4 2.2 8.8 2.2 12 2.2zM12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 8.2a3.2 3.2 0 1 1 0-6.4 3.2 3.2 0 0 1 0 6.4zm5.2-9.6a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z'/%3E%3C/svg%3E"); }
/* Website: a globe, in the site's teal */
.wp-post-author ul.awpa-contact-info li.awpa-website-li a { --fill: #1fc2d8; --lip: #0f8fa2; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19M12 2.5c2.6 2.7 3.9 5.9 3.9 9.5s-1.3 6.8-3.9 9.5c-2.6-2.7-3.9-5.9-3.9-9.5s1.3-6.8 3.9-9.5z'/%3E%3C/svg%3E"); }

/* Once signed up, the form gives way to the confirmation; errors as a red pill under the field */
.signup-banner form:has(.jet-form-builder-message--success) .frvr-signup-row {
  display: none;
}

.signup-banner .jet-form-builder-message {
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
}

.signup-banner .jet-form-builder-message--success {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  color: #fff;
  font-family: var(--frvr-display);
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 #1f5fc4;
}

.signup-banner .jet-form-builder-message--success::before {
  content: '';
  flex: none;
  width: 30px;
  height: 30px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #2bd17e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 3px 0 #159257;
}

.signup-banner .jet-form-builder-message.jet-form-builder-message--error {
  display: inline-block;
  padding: 4px 14px 3px;
  border-radius: 999px;
  background: #ff1f3d;
  color: #fff;
  font-size: 0.875rem;
}