@import url('https://fonts.googleapis.com/css2?family=Swanky+and+Moo+Moo&display=swap');

@font-face {
    font-family: 'Config Rounded';
    src: url('./Fonts/ConfigRoundedRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Config Rounded';
    src: url('./Fonts/ConfigRoundedBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Config Rounded';
    src: url('./Fonts/ConfigRoundedItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

body {
    background: #fff;
    background-image: url('./images/bckg option 1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Config Rounded', sans-serif;
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
    font-family: 'Swanky and Moo Moo', cursive;
    font-size: 2.8rem;
    margin-top: 32px;
    margin-bottom: 16px;
    color: #111;
}

#floating-wall {
    position: relative;
    width: 100vw;
    height: 90vh;
    min-height: 600px;
    overflow: hidden;
    background: transparent;
}

/* Mobile class that can be toggled by JavaScript */
body.mobile-view {
    background-image: url('./images/mobile-background.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* Mobile-specific styles */
@media only screen and (max-width: 767px) {
    body {
        background-image: url('./images/mobile-background.png') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
    }

    #floating-wall {
        background: transparent;
        height: 65vh;
    }

    /* Make the layout vertical on mobile */
    .responses-main-layout {
        flex-direction: column !important;
        padding: 10px !important;
    }

    /* Adjust sticky notes for mobile */
    .sticky-note {
        width: 70vw;
        max-width: 250px;
        min-height: 90px;
        padding: 10px 12px;
        font-size: 1rem;
        border-width: 2.5px;
        border-radius: 12px;

        /* Optimize rendering */
        transform: translateZ(0);
        will-change: transform, left, top;

        /* Remove complex filters for better performance */
        filter: none !important;
    }

    /* Reposition the right panel */
    .right-panel {
        width: 100% !important;
        min-width: 100% !important;
        margin-top: 20px !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Make the navigation and submit sections centered */
    #nav-heading, #submit-section {
        margin: 0 auto 15px !important;
    }

    /* Adjust title section for mobile */
    h1 {
        font-size: 2.2rem !important;
    }

    /* Adjust the wall container */
    #sticky-wall-container {
        min-width: 100% !important;
        padding: 0 !important;
    }

    /* Adjust the title top padding for mobile */
    [style*="padding:120px"] {
        padding-top: 80px !important;
    }

    /* Make the banner image bigger on mobile */
    [alt="Share your story to exist among all the other women who have been dismissed... It is Not Just You"] {
        max-width: 90% !important;
    }

    /* Black & White Sticky Note Palette optimized for mobile */
    .sticky-white {
        --note-color: #fff;
        border-color: #111;
        color: #111;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    }

    .sticky-black {
        --note-color: #111;
        border-color: #000;
        color: #fff;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25) !important;
    }

    /* Simpler animation for newly submitted notes */
    .sticky-note.newly-submitted {
        animation: new-note-appear-mobile 1s ease;
    }

    @keyframes new-note-appear-mobile {
        0% {
            opacity: 0;
            transform: scale(0.9);
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Simpler highlight animation */
    .sticky-note.featured {
        animation: highlight-mobile 0.8s ease;
    }

    @keyframes highlight-mobile {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.03);
        }

        100% {
            transform: scale(1);
        }
    }

    /* Make note numbers smaller */
    .note-number {
        font-size: 2rem;
        margin-bottom: 6px;
    }

    .note-number-circle {
        width: 1.3em !important;
        height: 1.3em !important;
        border-width: 2px;
    }
}

.sticky-note {
    position: absolute;
    background: var(--note-color, #fff);
    border: 3.5px solid #111;
    border-radius: 18px;
    width: clamp(260px, 26vw, 370px);
    min-height: 120px;
    padding: 18px 18px;
    font-size: 1.35rem;
    font-family: 'Swanky and Moo Moo', cursive;
    box-shadow:
        0 8px 24px 0 rgba(0, 0, 0, 0.18),
        8px 16px 0 -4px rgba(0, 0, 0, 0.10),
        -8px 16px 0 -4px rgba(0, 0, 0, 0.08);
    filter: url(#handdrawn-border);
    word-break: break-word;
    overflow-wrap: anywhere;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow 0.2s, z-index 0.2s;
    box-sizing: border-box;
    unicode-bidi: plaintext;
    white-space: pre-wrap;
    line-height: 1.4;
}

/* Add specific font for Arabic text */
.sticky-note:lang(ar),
.sticky-note *:lang(ar) {
    font-family: 'Playpen Sans Arabic', cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 0.9rem !important;
    line-height: 2.6 !important;
    /* Increased line spacing for Arabic text */
}

/* Automatically detect and apply Arabic font for text that contains Arabic characters */
.sticky-note>div:has(:lang(ar)),
.sticky-note>div:has(span:lang(ar)) {
    font-family: 'Playpen Sans Arabic', cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 0.9rem !important;
    line-height: 2.6 !important;
    /* Increased line spacing for Arabic text */
}

/* Fallback for browsers that don't support :has selector */
[dir="rtl"] .sticky-note,
[dir="rtl"] .sticky-note>div {
    font-family: 'Playpen Sans Arabic', cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 0.9rem !important;
    line-height: 2.6 !important;
    /* Increased line spacing for Arabic text */
}

.sticky-note>div {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    text-align: center;
    min-height: 1.4em;
    line-height: 1.4;
    direction: auto;
}

.sticky-note:hover {
    box-shadow:
        0 12px 32px 0 rgba(0, 0, 0, 0.22),
        12px 20px 0 -4px rgba(0, 0, 0, 0.13),
        -12px 20px 0 -4px rgba(0, 0, 0, 0.11);
}

.sticky-note.is-hovered {
    z-index: 9999 !important;
    box-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.28), 16px 32px 0 -4px rgba(0, 0, 0, 0.18), -16px 32px 0 -4px rgba(0, 0, 0, 0.15);
}

/* Black & White Sticky Note Palette */
.sticky-white {
    --note-color: #fff;
    border-color: #111;
    color: #111;
}

.sticky-black {
    --note-color: #111;
    border-color: #000;
    color: #fff;
}

/* Remove or comment out old color classes below if present */
/*
.sticky-yellow, .sticky-blue, .sticky-pink, .sticky-green, .sticky-purple { display: none; }
*/

/* Remove the pin dot */
.sticky-note::before {
    display: none !important;
}

/* Remove the pin stem */
/*
.sticky-note::after {
    ...
}
*/

@keyframes pin-bounce {
    0% {
        transform: translateX(-50%) scale(1);
    }

    100% {
        transform: translateX(-50%) scale(1.15);
    }
}

.sticky-purple {
    --note-color: #f3e7ff;
    border-color: #b18be2;
}

/* Optional: SVG filter for hand-drawn border effect */
.sticky-note svg {
    display: none;
}

/* Remove grid layout from #wall */
#wall {
    display: block;
    padding: 0;
    gap: 0;
    grid-template-columns: none;
}

.note-number {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Swanky and Moo Moo', cursive;
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 10px;
    color: #fff;
    /* White by default */
    font-weight: bold
}

.note-number-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em !important;
    height: 1.5em !important;
    border-radius: 50%;
    background: #111;
    color: #fff;
    border: 3px solid #111;
    box-sizing: border-box;
    font-size: 1em;
}

.sticky-black .note-number-circle {
    background: #fff;
    color: #111;
    border: 3px solid #fff;
}

.sticky-black .note-number {
    color: #111;
}

/* Hide timestamps on sticky notes */
.note-timestamp {
    display: none;
}

/* Add transition for featured note */
.sticky-note.featured {
    animation: highlight 1s ease;
}

@keyframes highlight {
    0% {
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
        transform: scale(1);
    }
}

/* Animation for newly submitted notes */
.sticky-note.newly-submitted {
    animation: new-note-appear 1.5s ease;
}

@keyframes new-note-appear {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    20% {
        opacity: 1;
        transform: scale(1.1);
    }

    40% {
        transform: scale(0.95);
    }

    60% {
        transform: scale(1.03);
    }

    80% {
        transform: scale(0.98);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}