@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=IM+Fell+English:ital@0;1&family=Manufacturing+Consent&family=Viaoda+Libre&display=swap'); 


html {
    height: 100%;
}

body {
    font-family: sans-serif;
    text-align: center;
    background: radial-gradient(circle, #FFFFFF 5%, #dbd0bd 75%, #A69475 100%);
    min-height: 100vh; 
}

body.no-scroll {
    overflow: hidden; 
    height: 100vh;
}

/* OUTER CONTENT FRAME */

.content {
    text-align: center;
    border: 2px solid #4c3d26; /* Inner border */
    box-shadow: 0 0 0 5px #b29c8d, /* Space */
                0 0 0 7px #442611; /* Outer border */
    margin: 2vh;
    --b: 5px;  /* border thickness */
    --s: 30px; /* size of the dashes  */
    --c1: #b29c8d;
    --c2: #4c3d26;
    position: relative;
    aspect-ratio: 1;
}

/* --- Header Styles --- */

.headerContainer {
    background-image: url('images/H1BG.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto; 
    width: 100%;
    margin: 0 auto;
    padding: 0; 
    aspect-ratio: 2675 / 636; 
    display: grid; 
    place-items: center; 
    grid-template-rows: 34.9% 65.1%; 
}

/* Media query (Viewport < 500px wide) */
@media (max-width: 500px) {
    .headerContainer {
        background-image: none; /* Hides the svg */
        width: 100%; 
        aspect-ratio: auto; 
        min-height: auto; 
        display: flex; 
        align-items: center;
        justify-content: center;
        /* Extra space when the background is hidden */
        margin-top: 30px;
        margin-bottom: 20px;
    }
}

.header {
    grid-row: 2 / 3; 
    width: 100%; 
    display: flex;
    justify-content: center;
    align-items: center; 
    padding-bottom: 0; 
}

.header-title-img {
    width: 73.8%; 
    height: auto;
    aspect-ratio: 1976 / 414; 
    margin-bottom: 0; 
}

/* CALENDAR GRID */

.calendar-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px;
    max-width: 800px;
    margin: 20px auto; 
    grid-template-rows: repeat(10, 100px); 
    height: 1090px;
    position: relative;
    z-index: 2;
}

/* DOORS */

.door {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    transition: transform 0.3s;
    font-size: 24px;
    text-align: center;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.door:hover {
    transform: scale(1.02);
}

.door.locked {
    cursor: not-allowed;
    background-color: #cccccc;
}

/* Modals/Overlays CSS */

.modal,
.overlay { 
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%; 
    height: 950vh; 
    background-color: rgba(0,0,0,0.7);
}

.modal-content,
.overlay-content {
    background: radial-gradient(circle, #FFFFFF 5%, #dbd0bd 75%, #A69475 100%);
    margin-top: 5vh; 
    margin-bottom: 5vh;
    margin-left: auto;
    margin-right: auto; 
    padding: 25px; 
    border: 1px solid #888; 
    width: 60%; 
    border-radius: 8px; 
    max-height: calc(100vh - 10vh); 
    overflow-y: auto; 
    z-index: 11;

    border: 1px solid #000;
    position: relative;      /* ⬅ important */
    padding-top: 3.2rem;     /* ⬅ room for ribbon */
}

@media (max-width: 600px) {
    .modal-content,
    .overlay-content {
        width: 85%;
        margin: 1.5rem auto;                  /* less vertical margin */
        max-height: calc(100vh - 10rem);       /* always shorter than viewport */
        overflow-y: auto;                     /* scroll inside if needed */
    }
}

/* TYPOGRAPHY INSIDE OVERLAY */
sup {
    font-family: 'Manufacturing Consent','Georgia', serif;
    font-weight: 800;
    font-style: italic;
    font-size: .5em;
    padding: 0 3px;
}

/* Classic folded ribbon over the top-left corner of the popup */
#overlay-title {
    font-family: 'Manufacturing Consent','Georgia', serif;
    font-weight: 800;
    font-style: italic;
    font-size: clamp(1rem, 2.6vw, 1.7rem);  /* scales with viewport */
    color: #ffffff;
    display: block;
    margin: 0;

    /* Ribbon geometry controls (same as original design) */
    --f: 0.5em;  /* folded part width */
    --r: 0.8em;  /* depth of the V-notch */

    position: absolute;
    left: 0.9rem;                  /* overlaps top-left corner of popup */
    top: calc(-1 * var(--f));      /* pulled slightly above popup border */
    padding: 0.75em 1.2em;
    background: #ff2b8c;           /* 🔥 hot pink */

    /* Folded left edge (same trick as original) */
    border-left: var(--f) solid #0005;
    border-bottom: var(--r) solid transparent;

    /* Original ribbon silhouette with cut-in notch and angled sides */
    clip-path: polygon(
        var(--f) 0,
        100% 0,
        100% 100%,
        calc(50% + var(--f) / 2) calc(100% - var(--r)),
        var(--f) 100%,
        var(--f) var(--f),
        0 var(--f)
    );
}

/* Slightly smaller & tighter on narrow screens */
@media (max-width: 500px) {
    #overlay-title {
        font-size: clamp(0.9rem, 3vw, 1.3rem);
        left: 0.6rem;
        padding: 0.55em 1em;
        --f: 0.45em;
        --r: 0.7em;
        top: calc(-1 * var(--f));
    }
}

/* Subtitle under title (optional) */

p#overlay-subtitle,
#overlay-subtitle {
    clear: left;
    color: #442611;
    margin-top: 2px;
    font-family: 'IM Fell English','Georgia', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.3em;
}

/* Overlay image */

#overlay-image {
    max-width: 100%;
    max-height: calc(100vh - 150px); /* prevents overflow */
    text-align: center;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
}

/* Caption under image (optional) */

#overlay-caption {
    color: #442611;
    margin-top: 8px;
    font-size: 0.7em;
    text-align: right;
    font-family: 'IM Fell English','Georgia', serif;
    font-style: italic;
}

/* Caption links look like inline links, not buttons */

#overlay-caption a {
    display: inline;
    margin: 0;
    padding: 0;
    background: none;
    color: inherit;
    text-decoration: underline;
    border-radius: 0;
}

/* Main body copy in overlay */

#overlay-message {
    font-family: 'IM Fell English','Georgia', serif;
    font-style: italic;
    margin-top: 10px;
    color: #442611;
}

/*DAY SPECIIFC STYLE OVERRIDES*/
.overlay-content.day-13 #overlay-subtitle {
    margin-top: 15px;
}
.overlay-content.day-13 #overlay-caption {
    font-family: 'IM Fell English','Georgia', serif;
    text-align: center;
    font-style: normal;
    margin-top: 10px;
    margin-bottom: 15px;
    color: #442611;
}
.overlay-content.day-13 #overlay-message {
    font-family: 'IM Fell English','Georgia', serif;
    font-style: normal;
    text-align: left;
    margin-top: 10px;
    color: #442611;
}

.overlay-content.day-15 #overlay-message {
    font-family: 'IM Fell English','Georgia', serif;
    font-style: normal;
    text-align: left;
    margin-top: 10px;
    color: #442611;
}

.overlay-content.day-16 #overlay-message {
    font-family: 'IM Fell English','Georgia', serif;
    font-style: normal;
    text-align: left;
    margin-top: 10px;
    color: #442611;
}

.overlay-content.day-19 #overlay-image {
/* Apply the blur effect by default */
  filter: blur(15px);
  /* Add a smooth transition for the filter property */
  transition: filter 0.3s ease-in-out;
  /* Ensure the image fills its container */
}

.overlay-content.day-19 #overlay-image:hover {
  /* Remove the blur effect on hover */
  filter: blur(0px);
}

.overlay-content.day-22 #overlay-message {
    font-family: 'IM Fell English','Georgia', serif;
    font-style: normal;
    text-align: left;
    margin-top: 10px;
    color: #442611;
}

.overlay-content.day-22 #overlay-image {
/* Apply the blur effect by default */
  filter: blur(15px);
  /* Add a smooth transition for the filter property */
  transition: filter 0.3s ease-in-out;
  /* Ensure the image fills its container */
}

.overlay-content.day-22 #overlay-image:hover {
  /* Remove the blur effect on hover */
  filter: blur(0px);
}

.overlay-content.day-23 #overlay-message {
    font-family: 'IM Fell English','Georgia', serif;
    font-style: normal;
    text-align: left;
    margin-top: 10px;
    color: #442611;
}

span#sig {
    display: block;
    float: right !important;
}

/* BUTTONS */

#overlay-button {
    margin-top: 10px;
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.close-button { 
    color: #fff; 
    float: right; 
    font-size: 24px; 
    font-weight: bold; 
    cursor: pointer;
}

/* Primary & secondary buttons in overlay */

.overlay-buttons a { 
    display: inline-block; 
    margin-top: 15px; 
    padding: 5px 12px; 
    background-color: #442611;
    color: white; 
    text-decoration: none; 
    border-radius: 5px;
    font-family: 'IM Fell English','Georgia', serif;
    font-style: italic;
    font-size: 0.95em;
}

/* Optional: tweak buttons on very small screens */

@media (max-width: 500px) {
    .overlay-buttons a {
        width: 100%;
        text-align: center;
    }
}

/* Style wrong date overlay */
#messageModal {
    /* e.g. background-color, alignment overrides if needed */
}

/* Style the popup box */
#messageModal .modal-content {
    /* e.g. background, border, padding, etc. */
}

h2#modal-message {    font-family: 'IM Fell English','Georgia', serif;
    font-style: italic;
    font-size: 2em;
    color: #442611;      /* hot pink, for example */
    text-align: center;
    margin-bottom: 15px;
}

#modal-message {
    font-family: 'IM Fell English','Georgia', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: #442611;      /* hot pink, for example */
    text-align: center;
    margin-bottom: 1rem;
}
 /*
.overlay-content.day-22 #overlay-image {
    display: none!important;
}

.overlay-content.day-22 #overlay-caption {
    min-width: 50%!important;
    max-width: 70%!important;
    display: inline-block!important;
    text-align: center!important;
}*/