/* CMS Content Pages - safe defaults */

.cms-content img,
.cms-content video,
.cms-content iframe {
  max-width: 100%;
  height: auto;
}

.cms-content table {
  width: 100%;
}

.cms-content pre {
  white-space: pre-wrap;
  word-break: break-word;
}

.cms-preview {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 1rem;
  background: rgba(255,255,255,.02);
}

.cms-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .95rem;
}

/* Media helper list item hover (premium feel) */
#adMediaHelper .ad-glass:hover,
#mediaList .ad-glass:hover {
    transform: translateY(-1px);
    transition: transform .12s ease;
}


/* =========================================
   CMS Content Pages - safe defaults
   ========================================= */

.cms-content img,
.cms-content video,
.cms-content iframe {
  max-width: 100%;
  height: auto;
}

.cms-content table { width: 100%; }

.cms-content pre {
  white-space: pre-wrap;
  word-break: break-word;
}

.cms-preview {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 1rem;
  background: rgba(255,255,255,.02);
}

.cms-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .95rem;
}

/* =========================================
   CMS Pages — Cyber Premium
   ========================================= */

.cms-page {
    color: rgba(245,245,245,.92);
}

    /* ---------- Titlebar ---------- */
    .cms-page .cms-titlebar {
        position: relative;
        margin: 10px 0 18px;
        padding: 16px 16px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,.22);
        background: linear-gradient(90deg, rgba(0,255,255,.16), rgba(255,60,130,.14), rgba(255,184,46,.14) );
        box-shadow: 0 18px 45px rgba(0,0,0,.20);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        overflow: hidden;
    }

        .cms-page .cms-titlebar::before {
            content: "";
            position: absolute;
            inset: -2px;
            background: radial-gradient(circle at 12% 30%, rgba(0,255,255,.25), transparent 55%), radial-gradient(circle at 78% 22%, rgba(255,60,130,.22), transparent 60%), radial-gradient(circle at 68% 80%, rgba(255,184,46,.20), transparent 60%);
            opacity: .9;
            pointer-events: none;
        }

    .cms-page .cms-titlebar-inner {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        z-index: 1;
    }

    .cms-page .cms-title {
        margin: 0;
        font-weight: 900;
        letter-spacing: .2px;
        line-height: 1.06;
        font-size: clamp(30px, 4.2vw, 54px);
        color: rgba(255,255,255,.95);
        text-shadow: 0 14px 40px rgba(0,0,0,.45);
    }

    .cms-page .cms-titlebar-meta {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .cms-page .cms-badge {
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 800;
        color: rgba(255,255,255,.92);
        background: rgba(0,0,0,.22);
        border: 1px solid rgba(255,255,255,.18);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* ---------- CMS body wrapper ---------- */
    .cms-page .cms-body {
        margin-top: 12px;
    }

        /* ---------- Headings INSIDE BODY HTML ---------- */
        .cms-page .cms-body h1 {
            margin: 6px 0 18px;
            font-weight: 900;
            letter-spacing: .4px;
            line-height: 1.05;
            color: rgba(245,245,245,.96);
            text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 12px 34px rgba(0,0,0,.22), 0 0 18px rgba(0,255,255,.18), 0 0 26px rgba(255,60,130,.10);
            font-size: clamp(34px, 3.6vw, 60px);
        }

            /* The premium “rail/pill” should apply to the FIRST H1 in the BODY, not the titlebar */
            .cms-page .cms-body h1:first-of-type {
                display: inline-block;
                padding: 10px 14px;
                border-radius: 14px;
                background: rgba(0,0,0,.14);
                border: 1px solid rgba(255,255,255,.18);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
            }

        /* Sub headings */
        .cms-page .cms-body h2 {
            margin: 22px 0 12px;
            font-weight: 900;
            letter-spacing: .2px;
            color: rgba(245,245,245,.94);
            text-shadow: 0 10px 26px rgba(0,0,0,.18);
            font-size: clamp(22px, 2.2vw, 34px);
        }

        .cms-page .cms-body h3 {
            margin: 18px 0 10px;
            font-weight: 850;
            color: rgba(245,245,245,.92);
        }

        /* Text readability */
        .cms-page .cms-body p,
        .cms-page .cms-body li {
            color: rgba(245,245,245,.82);
            text-shadow: 0 8px 20px rgba(0,0,0,.16);
        }

        /* Optional accent */
        .cms-page .cms-body .cms-accent {
            background: linear-gradient(90deg, rgba(0,255,255,.95), rgba(255,60,130,.95), rgba(255,184,46,.95));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter: drop-shadow(0 12px 30px rgba(0,0,0,.22));
        }

/* =========================================
   Headings inside CMS BODY only
   (avoid fighting the titlebar)
   ========================================= */

.cms-page .cms-body h1{
  margin: 18px 0 14px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.08;
  font-size: clamp(22px, 2.4vw, 34px);
  color: rgba(245,245,245,.95);
  text-shadow: 0 10px 26px rgba(0,0,0,.18);
}

/* If your BodyHtml starts with an H1 that duplicates the title, hide it */
.cms-page .cms-body > h1:first-child{
  display: none;
}

/* Media helper list item hover (premium feel) */
#adMediaHelper .ad-glass:hover,
#mediaList .ad-glass:hover {
  transform: translateY(-1px);
  transition: transform .12s ease;
}