/*
 * justkiddingstudios.com
 *
 * The old site ran on the Graphene WordPress theme. This borrows its *appearance* — snowflake
 * field, banner, dark menu bar, white column of entries — and none of its CSS: the class names and
 * the rules are this theme's own. Colours and metrics were sampled from the live site rather than
 * matched by eye, and are noted where they came from.
 */

:root {
    --jks-field: #9fb5d8;        /* the snowflake tile's own base colour */
    --jks-bar: #2f2733;          /* the menu bar */
    --jks-bar-active: #080808;   /* the current item */
    --jks-ink: #4a474b;          /* body text */
    --jks-heading: #1f1a22;
    --jks-accent: #783d98;       /* links, and the day in the date block */
    --jks-rule: #e9e8e3;
    --jks-width: 960px;
    --jks-sans: Lato, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--jks-ink);
    font: 400 16px/24px var(--jks-sans);

    /* `contain` is what makes the snowflakes scale with the window instead of tiling at a fixed
       size — the artwork is 1800x360, so contain fits it to the viewport's width and the field
       resizes as the window does. That is what the old site did, and it is why the flakes there
       never looked like a repeating tile at the top of the page. It still repeats downward, which
       is what covers a long page; centring it keeps the seam symmetrical.

       The flat colour is the tile's own base, and shows through while the image loads and below
       the point the repeat reaches. */
    background-color: var(--jks-field);
    background-image: url("images/snowflakes.png");
    background-size: contain;
    background-position: 50% 0;
    background-repeat: repeat;
}

a { color: var(--jks-accent); }

.jks-skip { position: absolute; left: -9999px; }
.jks-skip:focus {
    left: 1rem; top: 1rem; z-index: 10;
    background: #fff; padding: 0.5rem 0.75rem; border: 1px solid var(--jks-rule);
}

/* The whole site sits in one fixed column, as it did before. Everything below the banner is white;
   the snowflakes only show either side of it. */
.jks-shell {
    max-width: var(--jks-width);
    margin: 0 auto;
    background: #fff;
}

/* --- banner -------------------------------------------------------------------------------- */

.jks-banner { line-height: 0; }
.jks-banner img { display: block; width: 100%; height: auto; }

/* --- menu ---------------------------------------------------------------------------------- */

.jks-menu { background: var(--jks-bar); }

.jks-menu__inner {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jks-menu__inner > li { position: relative; }

.jks-menu a {
    display: block;
    padding: 13px 15px;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
}

.jks-menu a:hover,
.jks-menu a:focus-visible { background: rgba(255, 255, 255, 0.1); }
.jks-menu a[aria-current] { background: var(--jks-bar-active); }

.jks-menu__caret { margin-left: 0.35rem; font-size: 11px; }

/* --- the mobile menu button ------------------------------------------------------------------
   Only ever visible below the breakpoint, and only when site.js has added it — `.jks-menu--
   collapsible` is set by the script, so the collapsed state cannot apply without the control that
   undoes it. With scripting off none of this matches and the list stays open. */

.jks-menu__toggle {
    display: none;
    width: 100%;
    padding: 13px 15px;
    border: 0;
    background: transparent;
    color: #fff;
    font: 700 16px/24px var(--jks-sans);
    text-align: left;
    cursor: pointer;
}

.jks-menu__toggle:hover,
.jks-menu__toggle:focus-visible { background: rgba(255, 255, 255, 0.1); }

/* Three bars, drawn rather than an icon font or an SVG file — it is six lines of CSS and one less
   thing to load. */
.jks-menu__bars {
    display: inline-block;
    width: 18px;
    height: 2px;
    margin-right: 10px;
    vertical-align: middle;
    background: currentColor;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

@media (max-width: 47.99rem) {
    .jks-menu--collapsible .jks-menu__toggle { display: block; }
    .jks-menu--collapsible .jks-menu__inner { display: none; }
    .jks-menu--collapsible.jks-menu--open .jks-menu__inner { display: block; }

    /* Stacked, and the two games indent under Games so the nesting is still legible without the
       hover the dropdown relies on above this width. */
    .jks-menu__inner > li { border-top: 1px solid rgba(255, 255, 255, 0.12); }
    .jks-menu__sub a { padding-left: 32px; }

    /* No caret down here: it points at a dropdown that does not exist at this width, since the
       children are already shown. */
    .jks-menu__caret { display: none; }
}

/* The Games dropdown, in CSS. No script: it opens on hover and on keyboard focus anywhere inside,
   so tabbing through the menu reaches the children — which a hover-only or JS-only dropdown does
   not. Left in the flow on narrow screens, where there is no hover to open it with. */
.jks-menu__sub {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--jks-bar-active);
}

.jks-menu__sub a { font-weight: 400; font-size: 15px; }

@media (min-width: 48rem) {
    .jks-menu__sub {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 5;
        min-width: 15rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
        /* visibility rather than display, so the transition and focus-within both work */
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.12s ease;
    }

    .jks-menu__parent:hover .jks-menu__sub,
    .jks-menu__parent:focus-within .jks-menu__sub {
        visibility: visible;
        opacity: 1;
    }
}

/* --- carousel ------------------------------------------------------------------------------ */

/* A scroll-snap row rather than a script: the browser does the paging, so it swipes on touch,
   scrolls on a trackpad, and the arrows and dots below are plain anchors to each slide's id. That
   is why there is no JavaScript here and nothing breaks without it. */
.jks-carousel { position: relative; }

.jks-carousel__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* The scrollbar would sit across the bottom of the artwork on desktop. */
    scrollbar-width: none;
}

.jks-carousel__track::-webkit-scrollbar { display: none; }

.jks-carousel__slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    /* 400px is the old slider's height. The aspect-ratio floor keeps the artwork from being cropped
       to a letterbox on a phone, where 400px would be most of the screen. */
    height: min(400px, 56vw);
    min-height: 190px;
    background-color: #6d86b4;
    /* The artwork sits behind the caption as an element rather than a background — see the template
       for why. object-fit does what background-size: cover did. */
    overflow: hidden;
}

.jks-carousel__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.jks-carousel__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 14px 18px;
    background: rgba(20, 16, 24, 0.62);
    color: #fff;
    text-decoration: none;
}

.jks-carousel__caption h2 {
    margin: 0 0 0.25rem;
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
}

.jks-carousel__caption p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: #e6e2ea;
}

.jks-carousel__caption:hover,
.jks-carousel__caption:focus-visible { background: rgba(20, 16, 24, 0.78); }

.jks-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    color: #1f1a22;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    text-decoration: none;
}

.jks-carousel__arrow:hover,
.jks-carousel__arrow:focus-visible { background: rgba(255, 255, 255, 0.7); }
.jks-carousel__arrow--prev { left: 12px; }
.jks-carousel__arrow--next { right: 12px; }

.jks-carousel__dots {
    margin: 0;
    padding: 8px 0;
    text-align: center;
    line-height: 1;
}

.jks-carousel__dots a {
    display: inline-block;
    padding: 3px 4px;
    color: #c3c0c6;
    font-size: 12px;
    text-decoration: none;
}

.jks-carousel__dots a:hover,
.jks-carousel__dots a:focus-visible { color: var(--jks-accent); }

@media (prefers-reduced-motion: reduce) {
    .jks-carousel__track { scroll-behavior: auto; }
}

/* --- entries ------------------------------------------------------------------------------- */

.jks-main { padding: 25px 15px 10px; }

.jks-entry {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--jks-rule);
}

.jks-entry:last-child { border-bottom: 0; margin-bottom: 0; }

.jks-entry__title {
    margin: 0;
    font-size: 30px;
    line-height: 36px;
    font-weight: 700;
    color: var(--jks-heading);
}

.jks-entry__title a { color: inherit; text-decoration: none; }
.jks-entry__title a:hover { color: var(--jks-accent); }

.jks-entry__meta {
    margin: 0.35rem 0 1rem;
    color: #8a868c;
    font-size: 13px;
}

/* The date block: 53x55 on a #f9f9f9 ground, floated beside the title, month above day. */
.jks-date {
    float: left;
    width: 53px;
    margin: 4px 15px 6px 0;
    padding: 4px 0 6px;
    background: #f9f9f9;
    text-align: center;
    line-height: 1;
}

.jks-date__month {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--jks-ink);
}

.jks-date__day {
    display: block;
    margin-top: 3px;
    font-size: 26px;
    font-weight: 700;
    color: var(--jks-accent);
}

.jks-more { clear: both; margin: 1rem 0 0; font-weight: 700; }
.jks-more a { text-decoration: none; }
.jks-more a:hover { text-decoration: underline; }

.jks-pagination { display: flex; justify-content: space-between; font-weight: 700; }

/* --- prose --------------------------------------------------------------------------------- */

.jks-prose { clear: both; }
.jks-prose h2 { font-size: 22px; line-height: 30px; color: var(--jks-heading); }
.jks-prose p { margin: 0 0 1.25rem; }
.jks-prose img { max-width: 100%; height: auto; }
.jks-prose a img { display: block; }

/* Store badges and the like sit inline; anything else is a block with room around it. */
.jks-prose table { border-collapse: collapse; }
.jks-prose td { padding: 0 12px 0 0; vertical-align: middle; }

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

.jks-footer {
    padding: 18px 15px;
    border-top: 1px solid var(--jks-rule);
    background: var(--jks-bar);
    color: #fff;
    font-size: 13px;
    text-align: center;
}

.jks-footer p { margin: 0; }