/*
 Theme Name:   Eure Superhelden Child
 Theme URI:    https://eure-superhelden.de
 Description:  Child Theme für Extra — Comic-Panel-Layout
 Author:       Eure Superhelden
 Template:     Extra
 Version:      1.0.0
 Text Domain:  esh-child
*/

/* ─── Lokale Fonts ─── */
@font-face {
    font-family: 'Bangers';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/bangers-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Bangers';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/bangers-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Comic Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/comic-neue-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Comic Neue';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/comic-neue-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Custom Properties ─── */
:root {
    --comic-black:  #1a1a1a;
    --comic-yellow: #D4A84B;   /* gedämpftes Goldgelb statt Signalgelb */
    --comic-red:    #C0392B;
    --comic-blue:   #1D3557;
    --comic-white:  #F8F5EE;   /* leicht cremig, wie altes Papier */
    --comic-shadow: 5px 5px 0 var(--comic-black);
}

/* ─── Basis ─── */
body {
    font-family: 'Comic Neue', sans-serif;
    font-size: 17px;
    line-height: 1.65;
    background-color: var(--comic-white);
    background-image: radial-gradient(circle, #c8c0b0 1px, transparent 1px);
    background-size: 18px 18px;
    color: var(--comic-black);
}

p, li, .post-meta {
    font-size: 1rem;
}

.post-excerpt, .post-content p {
    font-size: 1.05rem;
}

h1, h2, h3, h4, h5, h6,
.post-title,
.entry-title {
    font-family: 'Bangers', cursive !important;
    letter-spacing: 0.04em;
}

/* ─── Section-Container: kein eigener Kasten ─── */
.post-module {
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ─── Extra interne Borders neutralisieren (verhindert Doppel-Box) ─── */
article.post .post-content,
article.post .post-thumbnail,
.main-post .post-content,
.main-post .post-thumbnail {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ─── Comic-Panels: individuelle Artikel-Karten ─── */
article.post,
div.main-post {
    border: 3px solid var(--comic-black) !important;
    box-shadow: var(--comic-shadow) !important;
    background: var(--comic-white) !important;
    margin: 10px 6px !important;
    padding: 8px !important;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

article.post:nth-child(odd),
div.main-post:nth-child(odd)   { transform: rotate(-1deg); }
article.post:nth-child(even),
div.main-post:nth-child(even)  { transform: rotate(0.7deg); }
article.post:nth-child(3n),
div.main-post:nth-child(3n)    { transform: rotate(-0.5deg); }
article.post:nth-child(4n),
div.main-post:nth-child(4n)    { transform: rotate(1.1deg); }

article.post:hover,
div.main-post:hover {
    transform: rotate(0deg) scale(1.02) !important;
    box-shadow: 8px 8px 0 var(--comic-black) !important;
    z-index: 10;
}

/* ─── Bilder ─── */
article.post img,
.main-post img {
    border: 2px solid var(--comic-black);
    display: block;
    width: 100%;
}

/* ─── Titel-Highlight ─── */
.post-title a,
.entry-title a {
    color: var(--comic-black) !important;
    background: var(--comic-yellow);
    padding: 1px 5px;
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    text-decoration: none !important;
}
.post-title a:hover,
.entry-title a:hover {
    background: var(--comic-red);
    color: #fff !important;
}

/* ─── Kategorie-Badge ─── */
.post-meta .categories a,
.post-meta a[rel="category"] {
    background: var(--comic-red) !important;
    color: #fff !important;
    font-family: 'Bangers', cursive;
    font-size: 0.85em;
    letter-spacing: 0.08em;
    padding: 1px 7px;
    border: 2px solid var(--comic-black);
    box-shadow: 2px 2px 0 var(--comic-black);
    text-transform: uppercase;
    text-decoration: none !important;
    display: inline-block;
    margin-bottom: 4px;
}

/* ─── Header ─── */
#main-header,
#top-header {
    border-bottom: 4px solid var(--comic-black) !important;
    background: var(--comic-yellow) !important;
}

/* ─── Navigation ─── */
#top-menu .menu-item a,
#top-menu li a {
    font-family: 'Bangers', cursive !important;
    font-size: 1.1em;
    letter-spacing: 0.05em;
}

/* ─── Buttons ─── */
.et_pb_button,
a.et_pb_button,
.button,
input[type="submit"],
.more-link,
a.more-link {
    font-family: 'Bangers', cursive !important;
    font-size: 1.1em !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    background: var(--comic-yellow) !important;
    color: var(--comic-black) !important;
    border: 3px solid var(--comic-black) !important;
    box-shadow: 4px 4px 0 var(--comic-black) !important;
    padding: 8px 20px !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    display: inline-block;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}
.et_pb_button:hover,
a.et_pb_button:hover,
.button:hover,
input[type="submit"]:hover,
.more-link:hover,
a.more-link:hover {
    background: var(--comic-red) !important;
    color: #fff !important;
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--comic-black) !important;
}

/* ─── Footer ─── */
#main-footer {
    background: var(--comic-black) !important;
    color: var(--comic-white);
    border-top: 4px solid var(--comic-yellow);
}
#main-footer a {
    color: var(--comic-yellow);
}