/*
Theme Name: PinkBrezel Surreal
Theme URI: https://pinkbrezel.at
Author: Antigravity
Author URI: https://pinkbrezel.at
Description: High-Voltage Editorial Theme. Neo-Brutalist structure.
Version: 2.1
*/

/* 1. CRITICAL: FORCE LOAD FONTS */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;900;1000&family=Inter:wght@400;700;900&display=swap');

/* 2. VARIABLES: HIGH CONTRAST */
:root {
    --bg-paper: #FFFFFF;
    --color-ink: #000000;
    --color-neon: #D63384;
    /* Pink Brezel Power */
    --border-hard: 3px solid #000000;
    /* Thick structure lines */

    /* TYPOGRAPHY OVERRIDE */
    --font-head: 'Nunito', sans-serif;
    /* MATCHES LOGO ROUNDNESS */
    --font-ui: 'Inter', sans-serif;
}

/* 3. BASE RESET (CRITICAL FIX FOR COLLAPSE) */
* {
    box-sizing: border-box;
}

body {
    background: var(--bg-paper);
    color: var(--color-ink);
    font-family: var(--font-ui);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

main {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 4. TYPOGRAPHY THAT SHOUTS */
h1,
h2,
h3 {
    font-family: var(--font-head);
    font-weight: 900;
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

/* 5. HAND-DRAWN SCRIBBLE (Tailwind-like Utility) */
.scribble {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.scribble::after {
    content: "";
    position: absolute;
    left: -5%;
    bottom: -2px;
    width: 110%;
    height: 0.4em;
    /* Hand-drawn line SVG (Pink #D63384) */
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='12' viewBox='0 0 200 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 9.5C45.5 3.5 130.5 -1.5 198 9.5' stroke='%23D63384' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.8;
}

/* Auto-apply to italics in H2 */
h2 em {
    font-style: normal;
    font-family: var(--font-head);
    @apply scribble;
    /* Mixin concept, but we use the class logic above */
    position: relative;
    display: inline-block;
}

h2 em::after {
    content: "";
    position: absolute;
    left: -5%;
    bottom: -2px;
    width: 110%;
    height: 0.4em;
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='12' viewBox='0 0 200 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 9.5C45.5 3.5 130.5 -1.5 198 9.5' stroke='%23D63384' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    opacity: 0.8;
}


/* 5. THE MARQUEE (TICKER) - INSTANT MOTION */
.ticker-wrap {
    width: 100%;
    overflow: hidden;
    background: var(--color-ink);
    color: #fff;
    border-bottom: var(--border-hard);
    white-space: nowrap;
    padding: 12px 0;
}

.ticker-move {
    display: inline-block;
    animation: ticker 20s linear infinite;
}

.ticker-item {
    display: inline-block;
    padding: 0 3rem;
    font-family: 'Inter';
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1rem;
}

@keyframes ticker {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* 6. HEADER & BRANDING */
.hero-header {
    text-align: center;
    padding: 4rem 1rem;
    border-bottom: var(--border-hard);
}

.brand-huge {
    font-size: clamp(3.5rem, 12vw, 10rem);
    /* Responsive Giant Text */
    line-height: 0.8;
}

/* 7. SOCIAL RAIL (PIXEL AVATARS) */
.crew-rail-wrapper {
    position: relative;
    border-bottom: var(--border-hard);
    background: #F4F4F5;
    padding-bottom: 1rem;
}

/* Optional: Mask to fade edges so it's obvious there's more content */
@media (max-width: 768px) {
    .crew-rail-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 30px;
        /* Leave space for hint */
        width: 40px;
        background: linear-gradient(to right, rgba(244, 244, 245, 0) 0%, rgba(244, 244, 245, 1) 100%);
        pointer-events: none;
        z-index: 2;
    }
}

.crew-rail {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem 2rem 0.5rem 3rem;
    /* Increased left padding from 2rem to 3rem so the first item has more space */
    /* Carousel Logic */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 3rem;
    /* Ensure snapping respects the new padding */
    scrollbar-width: none;
    /* Firefox */
}

.crew-rail::-webkit-scrollbar {
    display: none;
    /* Safari/Chrome */
}

/* Ensure items don't flex-shrink so they hold their shape */
.crew-rail>a,
.crew-rail>span {
    flex-shrink: 0;
    scroll-snap-align: start;
}

.crew-avatar {
    width: 70px;
    height: 70px;
    border: var(--border-hard);
    /* Square with thick border */
    filter: grayscale(100%);
    transition: 0.2s;
    background: white;
    object-fit: cover;
    object-position: center top;
}

.crew-avatar:hover {
    filter: none;
    transform: translate(-4px, -4px);
    box-shadow: 4px 4px 0 var(--color-neon);
}

.crew-rail-hint {
    text-align: right;
    padding-right: 2rem;
    margin-top: 1rem;
    /* More space to the avatars */
    margin-bottom: -0.5rem;
    /* Closer to the bottom edge */
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink);
    opacity: 0.6;
    animation: pulse 2s infinite;
}

@media (min-width: 768px) {
    .crew-rail-hint {
        display: none;
        /* Hide hint on desktop since we probably see everything or have mouse scroll */
    }
}

@keyframes pulse {
    0% {
        opacity: 0.4;
        transform: translateX(0);
    }

    50% {
        opacity: 0.8;
        transform: translateX(-3px);
    }

    100% {
        opacity: 0.4;
        transform: translateX(0);
    }
}

/* 9. PAPER CUT EFFECT (Requested Feature) */
.paper-cut {
    /* Random ragged polygon */
    clip-path: polygon(2% 0, 100% 2%, 100% 100%, 2% 98%,
            0% 90%, 2% 80%, 0% 70%, 2% 60%,
            0% 50%, 2% 40%, 0% 30%, 2% 20%, 0% 10%);
    /* Hard offset border via drop-shadow */
    filter: drop-shadow(4px 4px 0px #000);
}

.paper-cut:hover {
    filter: drop-shadow(6px 6px 0px var(--color-neon));
    transform: scale(1.02);
}

.magazine-cover {
    display: grid;
    /* Desktop: Hero (1.5) + 2 Side Cols */
    grid-template-columns: 1.5fr 1fr 1fr;
    /* Fixed minimum height to prevent collapse */
    grid-auto-rows: minmax(300px, auto);
    border-bottom: var(--border-hard);
    width: 100%;
    max-width: 100%;
}

.cover-item {
    position: relative;
    border-right: var(--border-hard);
    border-bottom: var(--border-hard);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 400px;
    /* Force height */
    background: white;
}

/* IMAGE HANDLING */
.cover-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cover-item:hover img {
    transform: scale(1.1);
}

/* HARD TEXT OVERLAY */
.cover-text {
    position: relative;
    z-index: 2;
    padding: 1.5rem;
    background: #fff;
    border-top: var(--border-hard);
    border-right: var(--border-hard);
    width: 85%;
    /* Asymmetric box */
    transition: 0.2s;
}

.cover-item:hover .cover-text {
    background: var(--color-neon);
    color: white;
    border-color: black;
}

.cat-label {
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: block;
}

/* LAYOUT LOGIC */
/* First item spans 2 rows vertically on desktop */
.cover-item:nth-child(1) {
    grid-row: span 2;
}

.cover-item:nth-child(1) h3 {
    font-size: 2.5rem;
}

/* MOBILE RESPONSIVE */
@media (max-width: 1024px) {
    .magazine-cover {
        grid-template-columns: 1fr;
    }

    .cover-item {
        border-right: none;
        min-height: 450px;
    }

    .brand-huge {
        font-size: 15vw;
    }
}

/* 10. POST CONTENT TYPOGRAPHY & LINKS */
.single-post .site-main .entry-content h4,
.page .site-main .entry-content h4,
article .entry-content h4 {
    font-size: 1.5rem;
    text-transform: uppercase;
    font-family: var(--font-head);
    font-weight: 900;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.single-post .site-main .entry-content a,
.page .site-main .entry-content a,
article .entry-content a {
    color: var(--color-neon);
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

.single-post .site-main .entry-content a:hover,
.page .site-main .entry-content a:hover,
article .entry-content a:hover {
    color: var(--color-ink);
}

/* 11. TYPEKIT CALDER FONT INTEGRATION */
.header-logo,
.footer-logo,
.ticker-item {
    font-family: "calder-dark", sans-serif !important;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
}

/* 12. B2B PASSWORD FORM */
.pinkbrezel-pw-form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    text-align: left;
}

.pinkbrezel-pw-form p {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--color-ink);
    opacity: 0.8;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.pinkbrezel-pw-form input[type="password"] {
    display: block !important;
    width: 100%;
    padding: 15px;
    border: 2px solid #ddd;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: border-color 0.2s;
    border-radius: 0;
}

.pinkbrezel-pw-form input[type="password"]:focus {
    border-color: var(--color-ink);
}

.pinkbrezel-pw-form button[type="submit"] {
    background: var(--color-ink);
    color: #fff;
    width: 100%;
    padding: 15px;
    text-transform: uppercase;
    font-weight: 900;
    font-family: var(--font-head);
    border: none;
    cursor: pointer;
    transition: 0.3s;
    letter-spacing: 0.05em;
    font-size: 1.1rem;
}

.pinkbrezel-pw-form button[type="submit"]:hover {
    background: var(--color-neon);
}

/* 14. TOUCH TARGETS & HAPTIC BUTTONS */
button,
.button,
.btn,
input[type="submit"],
input[type="button"] {
    min-height: 48px;
    /* Apple/Google Touch Target minimum */
    min-width: 48px;
    padding: 0.75rem 1.5rem;
    border: var(--border-hard);
    box-shadow: 4px 4px 0px var(--color-ink);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(0, 0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Except header toggles or things without border we style explicitly inline */
button.mobile-toggle,
button#pb-close-menu {
    box-shadow: none;
    border: none;
}

/* The Haptic / Physical Click Effect */
button:active:not(.mobile-toggle):not(#pb-close-menu),
.button:active,
.btn:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translate(4px, 4px) !important;
    box-shadow: 0px 0px 0px var(--color-ink) !important;
}

/* Specific B2B Button Override to Ensure it matches */
.pinkbrezel-pw-form button[type="submit"] {
    border: var(--border-hard) !important;
}

/* Mailchimp Form Overrides (Neobrutalism) */
form.mc4wp-form {
    width: 100%;
}

.mc4wp-form-fields div {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
    box-shadow: 4px 4px 0 var(--color-ink);
}

@media (min-width: 640px) {
    .mc4wp-form-fields div {
        flex-direction: row;
        box-shadow: none;
    }
}

.mc4wp-form-fields input[type="email"] {
    background: #fff;
    border: none;
    padding: 1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    width: 100%;
    border-radius: 0;
    color: var(--color-ink);
    outline: none;
}

.mc4wp-form-fields input[type="submit"] {
    background-color: var(--color-neon);
    color: #fff;
    border: none;
    padding: 1rem 2rem;
    font-family: var(--font-ui), sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: none;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s;
}

@media (min-width: 640px) {
    .mc4wp-form-fields input[type="submit"] {
        width: auto;
    }
}

.mc4wp-form-fields input[type="submit"]:hover {
    background-color: var(--color-ink);
}

.mc4wp-form-fields input[type="submit"]:active {
    transform: translate(2px, 2px);
}

/* Mailchimp Alerts */
.mc4wp-alert {
    padding: 1rem;
    margin-top: 1rem;
    font-weight: 700;
    font-size: 0.85rem;
    border: 2px solid var(--color-ink);
    box-shadow: 2px 2px 0 var(--color-ink);
    width: 100%;
}

.mc4wp-success {
    background-color: var(--color-paper);
    color: var(--color-ink);
}

.mc4wp-error {
    background-color: var(--color-neon);
    color: var(--color-ink);
}

/* Force styles via specific Mailchimp IDs and Classes */
.mc4wp-form {
    width: 100%;
}

.mc4wp-form-fields p {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
    box-shadow: 4px 4px 0 var(--color-ink);
    margin: 0;
}

@media (min-width: 640px) {
    .mc4wp-form-fields p {
        flex-direction: row;
        box-shadow: none;
    }
}

.mc4wp-form-fields input[type="email"] {
    background: #fff;
    border: none;
    padding: 1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    width: 100%;
    border-radius: 0;
    color: var(--color-ink);
    outline: none;
}

.mc4wp-form-fields input[type="submit"] {
    background-color: var(--color-neon);
    color: #fff;
    border: none;
    padding: 1rem 2rem;
    font-family: var(--font-ui), sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: none;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0;
}

@media (min-width: 640px) {
    .mc4wp-form-fields input[type="submit"] {
        width: auto;
    }
}

.mc4wp-form-fields input[type="submit"]:hover {
    background-color: var(--color-ink);
}

.mc4wp-form-fields input[type="submit"]:active {
    transform: translate(2px, 2px);
}

/* Mailchimp Alerts */
.mc4wp-response {
    margin-top: 1rem;
    width: 100%;
}

.mc4wp-alert {
    padding: 1rem !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    border: 3px solid var(--color-ink) !important;
    box-shadow: 4px 4px 0 var(--color-ink) !important;
    border-radius: 0 !important;
}

.mc4wp-success {
    background-color: var(--color-dream) !important;
    color: var(--color-ink) !important;
}

.mc4wp-error {
    background-color: var(--color-neon) !important;
    color: white !important;
}

/* Hard overrides for Mailchimp side-by-side Layout and Messaging */
.mc4wp-form-fields>p {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

@media (min-width: 640px) {
    .mc4wp-form-fields>p {
        flex-direction: row !important;
    }
}

.mc4wp-form-fields input[type="email"]::-webkit-input-placeholder {
    color: var(--color-ink);
    opacity: 0.5;
    text-transform: uppercase;
}

.mc4wp-form-fields input[type="email"]:-ms-input-placeholder {
    color: var(--color-ink);
    opacity: 0.5;
    text-transform: uppercase;
}

.mc4wp-form-fields input[type="email"]::placeholder {
    color: var(--color-ink);
    opacity: 0.5;
    text-transform: uppercase;
}

.mc4wp-success {
    background-color: var(--color-dream) !important;
    color: var(--color-ink) !important;
    border: 3px solid var(--color-ink) !important;
    box-shadow: 4px 4px 0 var(--color-ink) !important;
    padding: 1rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
}

.mc4wp-error {
    background-color: var(--color-neon) !important;
    color: var(--color-ink) !important;
    border: 3px solid var(--color-ink) !important;
    box-shadow: 4px 4px 0 var(--color-ink) !important;
    padding: 1rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
}

/* Force High Contrast Neobrutalism strictly on WP Mailchimp Messages */
.mc4wp-form .mc4wp-alert.mc4wp-success {
    background-color: var(--color-dream) !important;
    color: var(--color-ink) !important;
    border: 3px solid var(--color-ink) !important;
    box-shadow: 4px 4px 0 var(--color-ink) !important;
}

.mc4wp-form .mc4wp-alert.mc4wp-error,
.mc4wp-form .mc4wp-alert.mc4wp-notice {
    background-color: var(--color-neon) !important;
    color: var(--color-ink) !important;
    border: 3px solid var(--color-ink) !important;
    box-shadow: 4px 4px 0 var(--color-ink) !important;
}

/* Force High Contrast Neobrutalism strictly on WP Mailchimp Messages (Inner Tags) */
.mc4wp-form .mc4wp-alert.mc4wp-success,
.mc4wp-form .mc4wp-alert.mc4wp-success p,
.mc4wp-form .mc4wp-alert.mc4wp-success span {
    color: var(--color-ink) !important;
}

.mc4wp-form .mc4wp-alert.mc4wp-error,
.mc4wp-form .mc4wp-alert.mc4wp-error p,
.mc4wp-form .mc4wp-alert.mc4wp-error span {
    color: var(--color-ink) !important;
}

/* Force High Contrast Neobrutalism strictly on WP Mailchimp Messages (Inner Tags) */
.mc4wp-form .mc4wp-alert.mc4wp-success,
.mc4wp-form .mc4wp-alert.mc4wp-success p,
.mc4wp-form .mc4wp-alert.mc4wp-success span {
    color: var(--color-ink) !important;
}

.mc4wp-form .mc4wp-alert.mc4wp-error,
.mc4wp-form .mc4wp-alert.mc4wp-error p,
.mc4wp-form .mc4wp-alert.mc4wp-error span {
    color: var(--color-ink) !important;
}

/* Force Success Background again due to plugin specificities */
div.mc4wp-form .mc4wp-alert.mc4wp-success {
    background-color: var(--color-dream) !important;
}

div.mc4wp-form .mc4wp-alert.mc4wp-error {
    background-color: var(--color-neon) !important;
}