/**
 * LurkMode landing page styles.
 *
 * Recreates the original Elementor landing page design with plugin-owned CSS.
 * Values here mirror the measured computed styles of the Elementor page, so the
 * rendered result is pixel-identical. Self-contained: it does not rely on the
 * theme's reset, so the page renders the same under any theme.
 */

/* Fonts ------------------------------------------------------------------ */

.lm-landing {
    /* Headings, captions and body copy used Poppins... */
    --lm-font: "Poppins", sans-serif;
    /* ...but Elementor left accordion titles on the theme's system stack. */
    --lm-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --lm-container: 1140px;
    --lm-gap: 20px;
}

/* Base ------------------------------------------------------------------- */

.lm-landing-body {
    margin: 0;
    background-color: #131313;
    color: #333;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

.lm-landing,
.lm-landing *,
.lm-landing *::before,
.lm-landing *::after {
    box-sizing: border-box;
}

.lm-landing img {
    border-style: none;
    display: inline-block;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

/*
 * Themes and other plugins style bare tags like h4/h6/p freely. Neutralise the
 * typographic properties they commonly set so the landing page looks the same
 * regardless of the active theme.
 */
.lm-landing h4,
.lm-landing h6,
.lm-landing p,
.lm-landing li,
.lm-landing a,
.lm-landing summary,
.lm-landing div {
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    word-spacing: normal;
}

/* Sections --------------------------------------------------------------- */

.lm-section {
    display: flex;
    flex-direction: column;
}

.lm-section--boxed {
    padding: 0 10px;
}

.lm-section-inner {
    display: flex;
    flex-direction: column;
    gap: var(--lm-gap);
    margin: 0 auto;
    max-width: var(--lm-container);
    padding: 10px 0;
    width: 100%;
}

.lm-section--gap-top {
    margin-top: 32px;
}

/* Headings --------------------------------------------------------------- */

.lm-landing h4,
.lm-landing h6 {
    font-family: var(--lm-font);
    line-height: 1;
    margin: 0;
    padding: 0;
}

.lm-heading-white,
.lm-heading-glow {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
}

.lm-heading-white {
    color: #ffffff;
}

.lm-heading-glow {
    color: #d79aff;
    text-shadow: 0 0 10px #723f88;
}

/* Section headings sit 8px closer to the block they label. */
.lm-landing .lm-heading-tight {
    margin-bottom: 8px;
}

.lm-heading-dim {
    color: #686868;
    font-size: 1rem;
    font-weight: 200;
    text-align: center;
}

.lm-heading-dim a {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
}

/* Hero ------------------------------------------------------------------- */

.lm-hero-row {
    display: flex;
    flex-direction: row;
    gap: var(--lm-gap);
    padding: 10px;
}

/*
 * Elementor sizes sibling containers by letting each ask for the full width and
 * shrink equally, which is also what makes them stack at the mobile breakpoint.
 */
.lm-hero-row > *,
.lm-cards > * {
    flex-shrink: 1;
    width: 100%;
}

.lm-hero-image {
    display: flex;
    flex-direction: column;
    gap: var(--lm-gap);
    justify-content: center;
    padding: 10px;
    text-align: center;
}

.lm-hero-side {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: center;
    padding: 10px;
}

.lm-pick-one {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 400;
}

/* Cards ------------------------------------------------------------------ */

.lm-cards {
    display: flex;
    flex-direction: row;
    gap: var(--lm-gap);
    padding: 10px;
    width: 100%;
}

.lm-card {
    align-items: center;
    border: 4px solid rgba(255, 255, 255, 0);
    border-radius: 16px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: center;
    min-height: 320px;
    padding: 10px;
    text-decoration: none;
    transition: border-color 0.3s;
}

.lm-card:hover,
.lm-card:focus-visible {
    border-color: #ffffff;
}

.lm-card--teal {
    background-color: #2bdac1;
    gap: 12px;
}

.lm-card--purple {
    background-color: #8151fe;
}

.lm-card-image {
    text-align: center;
}

/* The LAN Party logo was nudged left to optically centre it. */
.lm-card--teal .lm-card-image {
    margin-left: -6px;
}

.lm-card-caption {
    font-family: var(--lm-font);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-align: center;
}

.lm-card--teal .lm-card-caption {
    color: #000000;
}

.lm-card--purple .lm-card-caption {
    color: #ffffff;
}

/* Divider band ----------------------------------------------------------- */

.lm-divider {
    background-color: #42cbd1;
    background-image: url("../images/divider-room.png");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 16px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    min-height: 20vh;
    padding: 10px;
    position: relative;
}

.lm-divider::before {
    background-image: url("../images/noise.gif");
    background-position: center center;
    background-size: 26% auto;
    border-radius: inherit;
    content: "";
    inset: 0;
    opacity: 0.15;
    position: absolute;
}

@media (min-width: 1025px) {
    .lm-divider {
        background-attachment: fixed;
    }
}

/* Accordions ------------------------------------------------------------- */

.lm-accordion {
    background-image: linear-gradient(197deg, #252525 0%, #000000 100%);
    border-radius: 12px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    width: 100%;
}

.lm-acc-item {
    display: flex;
    flex-direction: column;
    position: relative;
}

.lm-acc-title {
    align-items: center;
    color: #a8a8a8;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 0 10px;
    list-style: none;
    padding: 10px;
}

.lm-acc-title::-webkit-details-marker {
    display: none;
}

.lm-acc-title-text {
    font-family: var(--lm-font-system);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.lm-acc-icon {
    align-items: center;
    display: flex;
    flex-direction: row;
    position: relative;
    width: fit-content;
}

.lm-acc-icon span {
    align-items: center;
    display: flex;
    height: 15px;
    width: auto;
}

.lm-acc-icon svg {
    fill: #ffffff;
    height: 15px;
    width: auto;
}

.lm-acc-item:not([open]):hover > .lm-acc-title {
    color: #ffffff;
}

.lm-acc-item:not([open]):hover > .lm-acc-title svg {
    fill: #ffffff;
}

.lm-acc-item[open] > .lm-acc-title svg {
    fill: #a8a8a8;
}

.lm-acc-item .lm-acc-opened {
    display: none;
}

.lm-acc-item .lm-acc-closed {
    display: flex;
}

.lm-acc-item[open] > .lm-acc-title .lm-acc-opened {
    display: flex;
}

.lm-acc-item[open] > .lm-acc-title .lm-acc-closed {
    display: none;
}

.lm-acc-content {
    background-color: rgba(0, 0, 0, 0.788);
    display: flex;
    flex-direction: column;
    gap: var(--lm-gap);
    padding: 10px;
}

/* Rich text -------------------------------------------------------------- */

.lm-rich-text {
    color: #e0e0e0;
    font-family: var(--lm-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.lm-rich-text p {
    margin: 0 0 0.9rem;
}

.lm-rich-text ul,
.lm-rich-text ol {
    list-style-position: outside;
    margin: 0;
    padding: 0 0 0 40px;
}

.lm-rich-text li {
    margin: 0;
}

.lm-rich-text strong,
.lm-rich-text b {
    font-weight: 700;
}

/* Outro (warehouse background) ------------------------------------------- */

.lm-outro {
    background-image: url("../images/warehouse.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    gap: var(--lm-gap);
    justify-content: space-between;
    margin-top: 32px;
    min-height: 60vh;
    padding: 0;
    position: relative;
}

.lm-outro::before {
    background-image: linear-gradient(180deg, #131313 0%, #000000cf 100%);
    content: "";
    inset: 0;
    position: absolute;
}

.lm-outro > * {
    position: relative;
    z-index: 1;
}

.lm-how {
    display: flex;
    flex-direction: column;
    gap: var(--lm-gap);
    padding: 10px;
}

.lm-how-text {
    padding: 0 12px 0 0;
    text-align: start;
}

.lm-footer {
    align-items: center;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    gap: var(--lm-gap);
    margin-top: 30vw;
    padding: 10px;
    width: 100%;
}

.lm-footer-text {
    color: #ffffff;
    font-family: var(--lm-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

/* Breakpoints ------------------------------------------------------------ */

@media (max-width: 1024px) {
    .lm-section-inner {
        max-width: 1024px;
    }

    .lm-divider {
        background-position: center center;
        background-size: cover;
        min-height: 192px;
    }
}

@media (max-width: 767px) {
    .lm-section-inner {
        max-width: 767px;
    }

    .lm-hero-row,
    .lm-cards {
        flex-wrap: wrap;
    }

    .lm-divider {
        background-size: cover;
    }
}