/* Landing Page Manager — Frontend Styles */

/* ==================================================================
   THEME ISOLATION — Neutralise inherited theme styles
   These prevent theme CSS (headings, links, paragraphs, etc.) from
   leaking into landing page content.
   ================================================================== */

/* —— Reset inherited font properties —— */
.lpm-landing-page {
    max-width: 100%;
}

.lpm-landing-page,
.lpm-landing-page *,
.lpm-landing-page *::before,
.lpm-landing-page *::after {
    /* Neutralise theme font cascade */
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    color: inherit;
    text-align: inherit;
    letter-spacing: normal;
    text-transform: none;
}

/* —— Neutralise theme heading defaults (bare headings only) —— */
/* Only target headings WITHOUT class names — LP content uses class-based
   styling which must NOT be overridden by isolation CSS.
   Element selectors like h1 have specificity (0,0,1) which is lower
   than LP class selectors (0,1,0) — so LP styles win automatically. */
.lpm-landing-page h1:not([class]),
.lpm-landing-page h2:not([class]),
.lpm-landing-page h3:not([class]),
.lpm-landing-page h4:not([class]),
.lpm-landing-page h5:not([class]),
.lpm-landing-page h6:not([class]) {
    margin: 0;
    padding: 0;
}

/* —— Neutralise theme link styles —— */
/* Low specificity — LP uploaded CSS overrides via class selectors */
.lpm-landing-page a:not([class]) {
    color: inherit;
    text-decoration: none;
}

/* —— Neutralise theme paragraph margin (bare paragraphs only) —— */
.lpm-landing-page p:not([class]) {
    margin: 0;
}

/* —— Neutralise theme list styles (bare lists only) —— */
.lpm-landing-page ul:not([class]),
.lpm-landing-page ol:not([class]) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lpm-landing-page li:not([class]) {
    margin: 0;
}

/* —— Neutralise theme image display (bare images only) —— */
.lpm-landing-page img:not([class]) {
    display: inline;
}

/* —— Neutralise theme bold/italic inline elements —— */
.lpm-landing-page strong:not([class]),
.lpm-landing-page b:not([class]) {
    font-weight: inherit;
}

/* —— Neutralise theme form input/focus styles —— */
.lpm-landing-page input:not([class]),
.lpm-landing-page textarea:not([class]),
.lpm-landing-page select:not([class]),
.lpm-landing-page button:not([class]) {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.lpm-landing-page input:not([class]):focus,
.lpm-landing-page textarea:not([class]):focus,
.lpm-landing-page select:not([class]):focus,
.lpm-landing-page button:not([class]):focus {
    outline: none;
    box-shadow: none;
}

/* —— Neutralise theme blockquote/code/hr (bare elements only) —— */
.lpm-landing-page blockquote:not([class]) {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.lpm-landing-page pre:not([class]),
.lpm-landing-page code:not([class]) {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

/* ==================================================================
   FULL-WIDTH MODE: Break out of theme container
   ================================================================== */

/* Uses calc(-50vw + 50%) to shift the element to viewport edges regardless
   of parent container width/padding. More robust than left:50% + margin-left:-50vw
   because it doesn't depend on CSS positioning context.

   Also neutralises parent padding-top/padding-bottom (typically 2rem/32px)
   so the landing page starts/ends flush against viewport edges.
   LP sections have their own internal padding via their CSS.

   Falls back to --lpm-scrollbar-width (set by JS) for Windows scrollbar compensation. */
.lpm-landing-page.lpm-fullwidth {
    width: calc(100vw - var(--lpm-scrollbar-width, 0px));
    max-width: none;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: -2rem;
    margin-bottom: -2rem;
    box-sizing: border-box;
}

/* Ensure images/media are responsive */
.lpm-landing-page img {
    max-width: 100%;
    height: auto;
    display: inline;
}

.lpm-landing-page video,
.lpm-landing-page iframe {
    max-width: 100%;
}