/*
 * engine/css/kto-layer.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Base styles injected by the engine for every tag-layer wrapper.
 * Loaded before any layer-specific CSS.
 *
 * Responsibilities:
 *   1. Reset — neutralize WordPress theme styles that leak into the layer
 *   2. Pointer-events model — the wrapper is transparent to mouse/touch;
 *      each layer opts specific elements in with pointer-events:auto
 *
 * What this file does NOT do:
 *   - Set position, size, or layout (each layer decides that)
 *   - Set colors, fonts, or visual styles (each layer owns those)
 *   - Assume scroll behavior (full-screen, modal, badge all differ)
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ── 1. RESET ────────────────────────────────────────────────────────────────
 *
 * Scoped to .kto-layer so nothing outside the layer wrapper is affected.
 * Targets the properties WordPress themes most commonly override.
 *
 * Pattern borrowed from the k0 framework reset, adapted for plugin scope.
 */

.kto-layer,
.kto-layer *,
.kto-layer *::before,
.kto-layer *::after {
    box-sizing: border-box;
}

/* Typography: undo theme font stacks, sizes, line-heights */
.kto-layer {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    line-height: 1.5;
}

/* Headings: WP themes set font-size, color, margin on h1–h6 globally */
.kto-layer :is(h1, h2, h3, h4, h5, h6) {
    font-size: revert;
    font-weight: revert;
    color: revert;
    margin: 0;
    line-height: 1.1;
    text-wrap: balance;
}

/* Paragraphs and block elements */
.kto-layer :is(p, figure, blockquote, dl, dd) {
    margin: 0;
}

.kto-layer :is(p, li, figcaption, blockquote, div, span) {
    text-wrap: pretty;
}

/* Lists: themes often add bullets and padding */
.kto-layer :is(ul, ol) {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Links: WP themes universally style these */
.kto-layer a {
    color: inherit;
    text-decoration: none;
}

/*
 * Buttons: this is the most common WP theme leak.
 * Themes set border-radius, background, padding, font on button globally.
 * We revert everything so each layer starts clean.
 */
.kto-layer button {
    all: revert;        /* Nuclear option — justified for buttons in WP */
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.1;
}

/* Inputs */
.kto-layer :is(input, textarea, select) {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* Images */
.kto-layer :is(img, picture, video, canvas, svg) {
    display: block;
    max-width: 100%;
}

/* Strong / em */
.kto-layer :is(b, strong) { font-weight: 700; }
.kto-layer em { font-style: italic; }

/* Address */
.kto-layer address { font-style: inherit; }


/* ── 2. POINTER-EVENTS MODEL ─────────────────────────────────────────────────
 *
 * The .kto-layer wrapper itself is fully transparent to mouse and touch events.
 * This means:
 *   - The WordPress page underneath remains clickable and scrollable
 *   - A ribbon in the corner doesn't block clicks in the rest of that corner
 *   - A full-screen layer that has been dismissed doesn't trap the page
 *
 * Each layer is responsible for opting its interactive elements IN:
 *
 *   /* In your layer CSS: * /
 *   #kto-layer-my-slug .my-button    { pointer-events: auto; }
 *   #kto-layer-my-slug .my-container { pointer-events: auto; }
 *
 * DO NOT set pointer-events:auto on .kto-layer > * as a blanket rule —
 * that would re-introduce the rectangular-div-blocking-clicks problem
 * for badges and other non-full-screen layers.
 *
 * See: example-badge/README.md for the ribbon case study.
 */
.kto-layer {
    pointer-events: none;
}


/* ── 3. STACKING ─────────────────────────────────────────────────────────────
 *
 * No z-index is set here. Each layer sets its own.
 * The engine injects layers in tag alphabetical order,
 * so if z-index conflicts arise, prefix your layer folder name (e.g. 1-ribbon).
 */