/**
 * Decoder Ads - Frontend Styles
 */

/* Ad Wrapper Styles */
.decoder-ad-wrapper {
    margin: 40px 0;
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.ad{
    text-align: center;
    width: 100%;
}

.desktop-view .ad {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Ad Notice */
.ad-notice {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    line-height: normal;
}

/* Ad Row Layout */
.ad-row {
    display: block;
    max-width: 100%;
    overflow: hidden;
}

/* Custom ad centering - Tailwind preflight makes img display:block, so text-align won't work */
.decoder-custom-ad img {
    margin-left: auto;
    margin-right: auto;
}

/* Ad Container */
.ad-container {
    flex: 1;
    position: relative;
    max-width: 100vw;
    box-sizing: border-box;
}

.ad-feed {
    width: 100%;
    max-width: 100% !important;
    background: #fff;
    box-sizing: border-box;
}

/* Placeholder Content */
.decoder-ad-placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* Desktop/Mobile View Control */
.desktop-view {
    display: block;
}

.mobile-view {
    display: none;
}

/* Mobile specific styles */
.ad-m {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ad-container.ad-m.ad-feed {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Feed ad wrapper */
.decoder-feed-ad-wrapper {
    max-width: 100vw;
    overflow: hidden;
    box-sizing: border-box;
}

/* Top ad wrapper */
.decoder-top-ad-wrapper {
    width: 100%;
    max-width: 100vw;
    display: flex;
    justify-content: center;
    margin: 20px 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* ============================================================
   Skyscraper neben dem Inhalt (symplr sky_1 rechts, sky_2 links,
   je 300x600).

   Geometrie: #page ist mittig zentriert und max-w-5xl breit. max-w-5xl
   ist im Theme ueberschrieben (tailwind/tailwind-theme.css:56,
   --container-5xl: 67.5rem = 1080px) und ist NICHT der Tailwind-Default.
   Die halbe Seitenbreite betraegt damit exakt 540px. Rechts endet die
   Sidebar (w-xs = 320px) durch justify-between buendig auf 50% + 540px,
   links beginnt <main> (max-w-2xl = 672px) buendig auf 50% - 540px.
   Mit 30px Abstand nach aussen braucht jede Seite 540 + 30 + 300 =
   870px, beide zusammen 1740px.

   ACHTUNG: Wird --container-5xl geaendert, verrutschen beide Bloecke
   still und ueberlappen dann Sidebar beziehungsweise Artikel.
   ============================================================ */
.ad-right-wrapper,
.ad-left-wrapper {
    position: fixed !important;
    top: 35px !important;
    width: 300px;
    z-index: 1000;
    pointer-events: none;
}

/* left und right strikt getrennt halten: stuenden beide im selben
   Regelsatz, gewaenne bei fester Breite die left-Angabe. */
.ad-right-wrapper { left:  calc(50% + 540px + 30px) !important; }
.ad-left-wrapper  { right: calc(50% + 540px + 30px) !important; }

.ad-right-container,
.ad-left-container {
    pointer-events: auto;
    width: 300px;
}

.ad-right-wrapper .ad-container,
.ad-left-wrapper .ad-container {
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Anzeige selbst in Position halten.
   Bewusst ueber die Klasse statt ueber die ID: die symplr-IDs enthalten
   einen Punkt (the-decoder.com_sky_1), und CSS liest "#the-decoder.com_sky_1"
   als Element #the-decoder mit Klasse .com_sky_1. */
.ad-right-wrapper .ad-container > .ad,
.ad-left-wrapper .ad-container > .ad {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2 x 870px = 1740px Platzbedarf. Unterhalb 1800px verschwinden BEIDE
   gemeinsam - sonst gaebe es einen Fensterbereich mit nur einem
   Skyscraper und entsprechend schiefem Layout. */
@media (max-width: 1800px) {
    .ad-right-wrapper,
    .ad-left-wrapper {
        display: none;
    }
}

/* Sticky ad container */
.ad-sticky-container {
    position: relative;
    overflow: hidden;
}

/* Sticky-Footer-Regeln entfallen: symplr liefert das Format als
   Sonderformat ohne eigene Div, wir erzeugen dafuer kein Markup mehr. */


/* Mobile ad sticky positioning */
.mobile-view .ad-feed-mobile {
    position: sticky;
    top: 20px;
    z-index: 10;
}

/* Ad padding wrapper - prevents overflow from padding */
.ad-padding-wrapper {
    padding: 20px; /* Desktop: all sides */
    box-sizing: border-box;
    max-width: 100%;
    /* NO overflow: hidden here - would break position: sticky */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .desktop-view {
        display: none !important;
    }

    .mobile-view {
        display: block !important;
    }

    .decoder-top-ad-wrapper {
        margin: 0;
    }

    /* Mobile: only vertical padding to prevent horizontal overflow */
    .ad-padding-wrapper {
        padding: 20px 0;
    }

    /* Mobile: add left padding to ad notice */
    .ad-notice {
        padding-left: 20px;
    }

    .ad-row {
        display: block;
        max-width: 100vw;
        overflow: hidden;
    }

    .decoder-ad-wrapper {
        margin: 30px 0;
        max-width: 100vw;
        overflow: hidden;
    }

    .decoder-feed-ad-wrapper {
        max-width: 100vw;
        overflow: hidden;
    }

    .ad-container {
        width: 100%;
        max-width: 100vw !important;
        box-sizing: border-box;
    }

    .ad-container.ad-m {
        display: flex;
        justify-content: center;
    }

    .ad-feed {
        max-width: 100% !important;
    }

    /* Ensure all ad divs stay within viewport */
    .ad {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Ensure sticky behavior works on mobile */
    .mobile-view .ad-sticky-container {
        position: relative;
        height: 600px;
        overflow: hidden;
        max-width: 100vw;
    }

    .mobile-view .ad-feed-mobile {
        position: sticky;
        top: 20px;
        z-index: 10;
        max-width: 100%;
    }
}


/* ============================================================
   Sidebar-Werbeplaetze (symplr sitebar_1 oben, sitebar_2 unten).

   Elternkette: #primary ist display:flex ohne items-*-Utility, also
   align-items: normal (= stretch). Das <aside> hat keine eigene Hoehe
   und wird deshalb auf die Zeilenhoehe gestreckt, die <main> vorgibt.
   Genau dadurch entsteht unterhalb der letzten Card der Leerraum, in
   dem sitebar_2 mitlaufen kann. Kein Vorfahre (#page, #content,
   #primary, aside) setzt overflow != visible, Scrollport ist das
   Viewport.

   WICHTIG: diese Bloecke nie in .decoder-ad-wrapper, .ad-row oder
   .ad-sticky-container wickeln - die setzen overflow: hidden und
   wuerden position: sticky einfrieren.
   ============================================================ */
.decoder-sidebar-ad {
    width: 100%;
    /* Ueber das mitlaufende Decoder-Logo legen. Dessen SVG steht
       absolut bei left: -46px und ragt damit rund 6px in die Sidebar
       hinein; .sticky-the-decoder traegt z-index 30. Ohne eigene
       Stapelposition gewaenne das Logo und schnitte die Anzeige an.
       position: relative ist noetig, damit z-index ueberhaupt greift -
       auf position: static bleibt es wirkungslos. */
    position: relative;
    z-index: 40;
}

.decoder-sidebar-ad .ad-notice {
    margin-bottom: 6px;
    padding-left: 0;
}

.decoder-sidebar-ad__slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    max-width: 100%;
    /* deckelt zu grosse Creatives. Unkritisch, weil dieses Element
       kein Vorfahre des sticky Elements ist. */
    overflow: hidden;
    /* Bewusst eckig: die Anzeigen sollen sich nicht als Karte lesen
       wie die uebrigen Sidebar-Elemente. */
    border-radius: 0;
}

.decoder-sidebar-ad__slot > .ad {
    width: 100%;
}

/* Unten: frisst den Leerraum, den align-items: stretch im aside
   erzeugt, und laesst den inneren Block darin mitlaufen. */
.decoder-sidebar-ad--sticky {
    flex: 1 1 auto;
    min-height: 600px;
}

.decoder-sidebar-ad--sticky .decoder-sidebar-ad__inner {
    position: sticky;
    top: 24px;
}

/* Labelfarbe je Position und Sidebar-Kontext.

   Der obere Platz sitzt durch den reduzierten Kopfabstand in den oberen
   rund 570px der Seite - auf Einzelartikeln liegt dort das blaue
   Verlaufsband, auf Uebersichtsseiten der dunkle Grund. Beide Male ist
   nur Weiss lesbar; das dunkle --heise-primary kaeme auf dem Band nur
   auf etwa 2,6:1 Kontrast.

   Der untere Platz laeuft dagegen weit unterhalb des Bandes mit: auf
   Einzelartikeln auf hellgrauem Grund (dunkles Label), auf
   Uebersichtsseiten weiterhin auf dunklem Grund (weisses Label). */
.decoder-sidebar-ad--top .ad-notice,
.decoder-sidebar-ad--feed .ad-notice {
    color: #ffffff;
}

.decoder-sidebar-ad--sticky.decoder-sidebar-ad--post .ad-notice {
    color: var(--heise-primary, #14315b);
}

/* Die Sidebar existiert erst ab lg - darunter ist das aside
   display: none. Container gar nicht erst mitrendern lassen. */
@media (max-width: 1023px) {
    .decoder-sidebar-ad {
        display: none;
    }
}


/* ============================================================
   NUR LOKALE ENTWICKLUNG: Werbeflaechen sichtbar machen.

   Der gesamte Block haengt an der Klasse .decoder-ads-dev, die das
   Plugin ausschliesslich setzt, wenn wp_get_environment_type()
   'local' meldet (docker-compose.dev.yaml, WP_ENVIRONMENT_TYPE).
   Produktion und Stage definieren die Konstante nicht und fallen auf
   'production' zurueck - dort ist dieser Block wirkungslos.

   Zweck: erkennen, WO ein Platz liegt und WELCHER es ist, auch wenn
   symplr lokal keine Anzeige ausliefert.
   ============================================================ */
.decoder-ads-dev .ad-container,
.decoder-ads-dev .decoder-sidebar-ad__slot {
    position: relative;
    /* !important, weil Top-Ad und Feed-Anzeige ihren weissen
       Hintergrund inline beziehungsweise per .ad-feed setzen. */
    background: #e5e7eb !important;
    outline: 1px dashed #9ca3af;
    outline-offset: -1px;
    /* Affordanz: signalisiert, dass beim Zeigen etwas erscheint. */
    cursor: help;
}

/* Slot-ID als Tooltip beim Zeigen auf die Flaeche.
   attr(id) liest die ID direkt von dem Container, den symplr befuellt -
   dafuer braucht es kein zusaetzliches Markup.

   Bewusst nicht dauerhaft sichtbar: die IDs sind laenger als die
   schmalen 300px-Flaechen und ragten darueber hinaus. Der Tooltip
   bricht deshalb um und ist auf die Containerbreite gedeckelt, statt
   zu ueberlaufen - ein aus der Box herausragender Tooltip waere in den
   Wrappern mit overflow: hidden ohnehin abgeschnitten worden. */
.decoder-ads-dev [id*="_incontent_"]::after,
.decoder-ads-dev [id*="_dynamic_ad"]::after,
.decoder-ads-dev [id*="_sky_"]::after,
.decoder-ads-dev [id*="_sitebar_"]::after {
    content: attr(id);
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    max-width: calc(100% - 8px);
    padding: 3px 6px;
    border-radius: 3px;
    background: rgba(17, 24, 39, 0.88);
    color: #ffffff;
    font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}

/* Hover liegt auf dem Container, nicht auf der ID-Div: die ist ohne
   ausgelieferte Anzeige oft 0 Pixel hoch und waere nicht treffbar. */
.decoder-ads-dev .ad-container:hover > [id]::after,
.decoder-ads-dev .decoder-sidebar-ad__slot:hover > [id]::after {
    opacity: 1;
}


/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .ad-notice {
        color: #aaa;
    }
}


/* KI Pro specific styling - removed border styling */

/* The Decoder specific styling - removed border styling */