/* Chinese New Year Theme - Tiled Pattern Variant
   Toggle by adding this file: <link href="assets/css/cny.css" rel="stylesheet">
*/

:root {
    --cny-red: #d32f2f;
}

/* html needs zero padding to let body background fill screen */
html.theme-cny {
    padding: 0 !important;
}

body.theme-cny,
html.theme-cny body {
    /* Set repeating background pattern */
    background-color: #fbf7e6;
    /* Golden/Beige shade */
    background-image: url('../images/cny-pattern.webp');
    background-repeat: repeat;
    background-size: 1024px;
    background-attachment: fixed;
    /* Compensate for removed html padding (24px + 24px = 48px) */
    padding-top: 48px;
    padding-bottom: 48px;
}

/* Ensure container remains white and on top */
body.theme-cny .container {
    background-color: #fff;
    position: relative;
    z-index: 10;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
    border-top: 4px solid var(--cny-red);
    /* Consistent festivity */
}

/* 
   Since the pattern is seamless, it works on mobile too.
   We just ensure it doesn't overwhelm small screens by possibly adjusting opacity or size if needed.
   For now, we keep it consistent.
*/
@media (max-width: 1000px) {
    body.theme-cny {
        background-size: 200px;
        /* Smaller pattern on mobile */
    }
}