/**
 * versioned-tag.css
 *
 * Styles for <versioned> custom tags that display version-specific content
 * Shows v1 and v2 content based on user's version preference
 * - Horizontal layout: side-by-side (50/50 split)
 * - Vertical layout: stacked (one above another)
 * - Works without JavaScript (shows both by default)
 * - v1 content: pastel orange accent (1px dotted border)
 * - v2 content: pastel blue accent (1px dotted border)
 *
 * Visibility is controlled by data-display-version attribute set by JavaScript:
 * - No attribute or "nc" or "both": show both v1 and v2 with borders and labels
 * - "v1": show only v1 with no styling (plain content, display:contents)
 * - "v2": show only v2 with no styling (plain content, display:contents)
 *
 * When showing only one version, display:contents is used on both versioned
 * and v1/v2 elements to ensure content flows naturally without affecting
 * surrounding layout (e.g., list items remain properly formatted).
 *
 * TRANSPARENT MODE (when one version is empty):
 * When v1 or v2 contains no alphanumeric characters (empty), the tag operates
 * in "transparent" mode - no borders, labels, or styling. The non-empty
 * content displays as if the versioned tag wasn't there. If the selected
 * version matches the empty tag, nothing is displayed at all.
 * JavaScript sets data-has-empty="v1" or data-has-empty="v2" to enable this.
 */

/* Base versioned tag container */
versioned {
    /* Block display for proper layout */
    display:         block;

    /* No margin by default (when showing only one version) */
    margin:          0;

    /* Clear floats */
    clear:           both;

    /* Allow nested tags to work properly */
    position:        relative;
}

/* When showing only v1 or v2: use display:contents to not affect layout */
versioned[data-display-version="v1"],
versioned[data-display-version="v2"] {
    display:         contents;
}

/* Add margin only when showing both versions */
versioned[data-display-version="both"],
versioned[data-display-version="nc"],
versioned:not([data-display-version]) {
    margin:          1em 0;
}

/* Horizontal layout (default) - side by side */
versioned[orientation="horizontal"],
versioned:not([orientation]),
versioned[orientation=""] {
    display:         flex;
    flex-direction:  row;
    gap:             0;  /* No gap by default */
    align-items:     stretch;
}

/* Horizontal layout gap - only when showing both versions */
versioned[data-display-version="both"][orientation="horizontal"],
versioned[data-display-version="nc"][orientation="horizontal"],
versioned:not([data-display-version])[orientation="horizontal"],
versioned[data-display-version="both"]:not([orientation]),
versioned[data-display-version="nc"]:not([orientation]),
versioned:not([data-display-version]):not([orientation]),
versioned[data-display-version="both"][orientation=""],
versioned[data-display-version="nc"][orientation=""],
versioned:not([data-display-version])[orientation=""] {
    gap:             1em;
}

/* Vertical layout - stacked */
versioned[orientation="vertical"] {
    display:         flex;
    flex-direction:  column;
    gap:             0;  /* No gap by default */
    align-items:     stretch;
}

/* Vertical layout gap - only when showing both versions */
versioned[data-display-version="both"][orientation="vertical"],
versioned[data-display-version="nc"][orientation="vertical"],
versioned:not([data-display-version])[orientation="vertical"] {
    gap:             1em;
}

/* v1 content container - only styled when showing both versions */
v1 {
    /* Block display */
    display:         block;

    /* Default: no styling (when showing only v1) */
    background:      none;
    border:          none;
    border-radius:   0;
    padding:         0;
    margin:          0;

    /* Flex grow for horizontal layout */
    flex:            1;

    /* Minimum width */
    min-width:       0;

    /* Box sizing */
    box-sizing:      border-box;

    /* Position for label */
    position:        relative;
}

/* v2 content container - only styled when showing both versions */
v2 {
    /* Block display */
    display:         block;

    /* Default: no styling (when showing only v2) */
    background:      none;
    border:          none;
    border-radius:   0;
    padding:         0;
    margin:          0;

    /* Flex grow for horizontal layout */
    flex:            1;

    /* Minimum width */
    min-width:       0;

    /* Box sizing */
    box-sizing:      border-box;

    /* Position for label */
    position:        relative;
}

/* When showing only v1 or v2: use display:contents so content flows naturally */
versioned[data-display-version="v1"] v1,
versioned[data-display-version="v2"] v2 {
    display:         contents;
}

/* Hide labels when showing only one version (no border/background to anchor them) */
versioned[data-display-version="v1"] v1::before,
versioned[data-display-version="v2"] v2::before {
    display:         none;
}

/* When showing BOTH versions: add styling to distinguish them */
versioned[data-display-version="both"] v1,
versioned[data-display-version="nc"] v1,
versioned:not([data-display-version]) v1 {
    background:      #1a1a1a;
    border:          1px dotted #ffd966; /* 1px dotted orange */
    border-radius:   6px;
    padding:         1em;
    /* South-east shadow - strong for dark mode */
    box-shadow:      8px 8px 16px rgba(0, 0, 0, 0.5),
                     4px 4px 8px rgba(0, 0, 0, 0.4),
                     2px 2px 4px rgba(0, 0, 0, 0.3);
}

versioned[data-display-version="both"] v2,
versioned[data-display-version="nc"] v2,
versioned:not([data-display-version]) v2 {
    background:      #1a1a1a;
    border:          1px dotted #7ec8ed; /* 1px dotted blue */
    border-radius:   6px;
    padding:         1em;
    /* South-east shadow - strong for dark mode */
    box-shadow:      8px 8px 16px rgba(0, 0, 0, 0.5),
                     4px 4px 8px rgba(0, 0, 0, 0.4),
                     2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Version labels - ALWAYS shown, positioned on the right */
v1::before,
v2::before {
    /* Display */
    display:         inline-block;

    /* Position on the RIGHT */
    position:        absolute;
    top:             -12px;
    right:           10px;  /* Changed from left to right */

    /* Background */
    background:      #1a1a1a;

    /* Padding */
    padding:         2px 8px;

    /* Typography */
    font-size:       0.75em;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.5px;

    /* Border radius */
    border-radius:   3px;

    /* Z-index */
    z-index:         1;

    /* Cursor to indicate clickability */
    cursor:          pointer;

    /* Transition for smooth hover effect */
    transition:      all 0.2s ease;
}

/* v1 label styling */
v1::before {
    content:         "V1";
    color:           #ffd966; /* Pastel orange */
    border:          1px solid #ffd966;
}

/* v2 label styling */
v2::before {
    content:         "V2";
    color:           #7ec8ed; /* Pastel blue */
    border:          1px solid #7ec8ed;
}

/* Label hover effect - brighten on hover */
v1::before:hover,
v2::before:hover {
    transform:       scale(1.1);
    box-shadow:      0 0 8px rgba(255, 217, 102, 0.5);
}

v2::before:hover {
    box-shadow:      0 0 8px rgba(126, 200, 237, 0.5);
}

/* Typography inside v1 and v2 - only when showing both versions */
versioned[data-display-version="both"] v1,
versioned[data-display-version="nc"] v1,
versioned:not([data-display-version]) v1,
versioned[data-display-version="both"] v2,
versioned[data-display-version="nc"] v2,
versioned:not([data-display-version]) v2 {
    font-family:     'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:       0.95em;
    line-height:     1.6;
    color:           #ecf0f1;
}

/* Allow other tags inside versioned content to work */
v1 setting,
v1 pin,
v2 setting,
v2 pin {
    /* Preserve tag styling */
    display:         inline-flex;
}

/* Ensure nested content works properly */
v1 > *:first-child,
v2 > *:first-child {
    margin-top:      0;
}

v1 > *:last-child,
v2 > *:last-child {
    margin-bottom:   0;
}

/* ============================================================================
   VERSION VISIBILITY CONTROL
   ============================================================================
   JavaScript sets data-display-version attribute on <versioned> elements
   CSS hides v1 or v2 content based on this attribute
   ============================================================================ */

/* When showing only v1: hide v2 */
versioned[data-display-version="v1"] v2 {
    display:         none;
}

/* When showing only v2: hide v1 */
versioned[data-display-version="v2"] v1 {
    display:         none;
}

/* Default (no attribute, "nc", or "both"): show both - no hiding needed */
/* versioned elements without data-display-version show both by default */
/* versioned[data-display-version="nc"] shows both */
/* versioned[data-display-version="both"] shows both */

/* ============================================================================
   TRANSPARENT MODE - WHEN ONE VERSION IS EMPTY
   ============================================================================
   When v1 or v2 is empty (contains no alphanumeric characters), the versioned
   tag operates in "transparent" mode:
   - No borders, labels, or styling on the non-empty content
   - Content displays as if the versioned tag wasn't there
   - If the selected version matches the empty tag, nothing is displayed

   JavaScript sets data-has-empty attribute:
   - data-has-empty="v1": v1 is empty, v2 has content
   - data-has-empty="v2": v2 is empty, v1 has content
   ============================================================================ */

/* --- TRANSPARENT MODE: v1 is empty, v2 has content --- */

/* When v1 is empty and user selects v1: hide everything */
versioned[data-has-empty="v1"][data-display-version="v1"] {
    display:         none !important;
}

/* When v1 is empty and user selects v2 or both: show v2 transparently */
versioned[data-has-empty="v1"][data-display-version="v2"],
versioned[data-has-empty="v1"][data-display-version="both"],
versioned[data-has-empty="v1"][data-display-version="nc"],
versioned[data-has-empty="v1"]:not([data-display-version]) {
    display:         contents !important;
    margin:          0 !important;
}

/* v2 content in transparent mode: no styling, display:contents */
versioned[data-has-empty="v1"][data-display-version="v2"] v2,
versioned[data-has-empty="v1"][data-display-version="both"] v2,
versioned[data-has-empty="v1"][data-display-version="nc"] v2,
versioned[data-has-empty="v1"]:not([data-display-version]) v2 {
    display:         contents !important;
    background:      none !important;
    border:          none !important;
    border-radius:   0 !important;
    padding:         0 !important;
    margin:          0 !important;
    box-shadow:      none !important;
    font-family:     inherit !important;
    font-size:       inherit !important;
    line-height:     inherit !important;
    color:           inherit !important;
}

/* Also make ul inside v2 transparent (no nesting) */
versioned[data-has-empty="v1"][data-display-version="v2"] v2 > ul,
versioned[data-has-empty="v1"][data-display-version="both"] v2 > ul,
versioned[data-has-empty="v1"][data-display-version="nc"] v2 > ul,
versioned[data-has-empty="v1"]:not([data-display-version]) v2 > ul {
    display:         contents !important;
}

/* Hide v2 label in transparent mode */
versioned[data-has-empty="v1"] v2::before {
    display:         none !important;
    content:         none !important;
}

/* Hide empty v1 in transparent mode */
versioned[data-has-empty="v1"] v1 {
    display:         none !important;
}

/* Hide v1 label in transparent mode */
versioned[data-has-empty="v1"] v1::before {
    display:         none !important;
    content:         none !important;
}

/* --- TRANSPARENT MODE: v2 is empty, v1 has content --- */

/* When v2 is empty and user selects v2: hide everything */
versioned[data-has-empty="v2"][data-display-version="v2"] {
    display:         none !important;
}

/* When v2 is empty and user selects v1 or both: show v1 transparently */
versioned[data-has-empty="v2"][data-display-version="v1"],
versioned[data-has-empty="v2"][data-display-version="both"],
versioned[data-has-empty="v2"][data-display-version="nc"],
versioned[data-has-empty="v2"]:not([data-display-version]) {
    display:         contents !important;
    margin:          0 !important;
}

/* v1 content in transparent mode: no styling, display:contents */
versioned[data-has-empty="v2"][data-display-version="v1"] v1,
versioned[data-has-empty="v2"][data-display-version="both"] v1,
versioned[data-has-empty="v2"][data-display-version="nc"] v1,
versioned[data-has-empty="v2"]:not([data-display-version]) v1 {
    display:         contents !important;
    background:      none !important;
    border:          none !important;
    border-radius:   0 !important;
    padding:         0 !important;
    margin:          0 !important;
    box-shadow:      none !important;
    font-family:     inherit !important;
    font-size:       inherit !important;
    line-height:     inherit !important;
    color:           inherit !important;
}

/* Also make ul inside v1 transparent (no nesting) */
versioned[data-has-empty="v2"][data-display-version="v1"] v1 > ul,
versioned[data-has-empty="v2"][data-display-version="both"] v1 > ul,
versioned[data-has-empty="v2"][data-display-version="nc"] v1 > ul,
versioned[data-has-empty="v2"]:not([data-display-version]) v1 > ul {
    display:         contents !important;
}

/* Hide v1 label in transparent mode */
versioned[data-has-empty="v2"] v1::before {
    display:         none !important;
    content:         none !important;
}

/* Hide empty v2 in transparent mode */
versioned[data-has-empty="v2"] v2 {
    display:         none !important;
}

/* Hide v2 label in transparent mode */
versioned[data-has-empty="v2"] v2::before {
    display:         none !important;
    content:         none !important;
}

/* ============================================================================
   VERSIONED LIST ITEMS - Styled divs that look like list items
   ============================================================================ */

.versioned-list-item {
    display:         list-item;
    list-style-type: disc;
    list-style-position: outside;
    margin-bottom:   0.25em;
}

/* ============================================================================
   V2-ONLY LIST ITEMS - Restructured from versioned tags into proper <li> elements
   These are created by JavaScript when V2-only versioned tags are inside lists
   ============================================================================ */

/* V2-only list items are visible in v2 and both modes */
.v2-only-list-item {
    /* Default: visible */
}

/* Hide V2-only list items when V1 is selected */
body[data-display-version="v1"] .v2-only-list-item,
body[data-display-version="v1"] .v2-only-list-item ul {
    display:         none !important;
}

/* ============================================================================
   HOVER EFFECTS IN SINGLE-VERSION MODE
   ============================================================================
   When showing only v1 or v2, hovering over the content area shows a border
   to indicate it's interactive and clickable
   ============================================================================ */

/* Show border when hovering over v1 in v1-only mode (NOT in transparent mode) */
versioned[data-display-version="v1"]:not([data-has-empty]) v1:hover {
    background:      #1a1a1a;
    border:          1px dotted #ffd966; /* 1px dotted orange */
    border-radius:   6px;
    padding:         1em;
    transition:      all 0.2s ease;
    /* South-east shadow - strong for dark mode */
    box-shadow:      8px 8px 16px rgba(0, 0, 0, 0.5),
                     4px 4px 8px rgba(0, 0, 0, 0.4),
                     2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Show border when hovering over v2 in v2-only mode (NOT in transparent mode) */
versioned[data-display-version="v2"]:not([data-has-empty]) v2:hover {
    background:      #1a1a1a;
    border:          1px dotted #7ec8ed; /* 1px dotted blue */
    border-radius:   6px;
    padding:         1em;
    transition:      all 0.2s ease;
    /* South-east shadow - strong for dark mode */
    box-shadow:      8px 8px 16px rgba(0, 0, 0, 0.5),
                     4px 4px 8px rgba(0, 0, 0, 0.4),
                     2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   RESPONSIVE BEHAVIOR
   ============================================================================ */

/* On narrow screens, force vertical layout for horizontal versioned tags */
@media (max-width: 768px) {
    versioned[orientation="horizontal"],
    versioned:not([orientation]),
    versioned[orientation=""] {
        flex-direction:  column;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    versioned {
        page-break-inside: avoid;
    }

    v1, v2 {
        border:          1px solid #000;
        background:      #fff;
        color:           #000;
    }

    v1::before,
    v2::before {
        background:      #fff;
        color:           #000;
    }
}