/* ============================================================
   Based on my earlier album-grid design (a Westside Gunn discography page).
   Colours have one job each: tan = important (headings, current page,
   emphasis), green = you can click this (links, buttons, tags).
   ============================================================ */

:root{
    color-scheme: dark;    /* dark date picker, dropdowns and scrollbars */
    --bg: #1F271D;
    --text: #FAF7F0;       /* body text, 14.4:1 on --bg */
    --accent: #CDB088;     /* headings, title, active nav item, emphasis, 7.4:1 */
    --link: #8FB37A;       /* links, tags, buttons: anything clickable, 6.5:1 */
    --link-hover: #A6C792;
    --error: #F29B86;      /* form errors, 7.2:1 */
    --field: #283225;      /* form field background */
    --line: rgba(205, 176, 136, 0.3);
}

/* Urbanist: a free font (SIL Open Font License, see font/Urbanist-OFL.txt) close to Aristotelica Pro.
   Self-hosted rather than loaded from Google Fonts: faster, and visitors' IP addresses
   aren't sent to Google, which German courts have ruled a GDPR problem. */
@font-face{
    font-family: "Urbanist";
    src: url(font/urbanist-latin.woff2) format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

body{
    background-color: var(--bg); /* stand-in until you add a background image */
    /* To use a photo like the original, put it in images/ and uncomment:
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    */
    color: var(--text);
    font-family: "Urbanist", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    line-height: 1.5;
}
/* Blurred background layer from the original - uncomment together with the image above.
body::before{
    filter: blur(8px);
    z-index: -1;
    background-image: url(images/background.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
}
*/

h1,
h2,
h3{
    color: var(--accent);
}
h1{
    text-align: center;
    font-weight: 300;
    letter-spacing: 0.06em;
}
h2,
h3{
    font-weight: 600;
}
strong{
    color: var(--accent);
}
a{
    color: var(--link);
}
@media (prefers-reduced-motion: no-preference){
    html{
        scroll-behavior: smooth; /* e.g. the FAQ link gliding down the page */
    }
}

/* ---------- Navbar: plain links, no band ---------- */
.navbar ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.navbar a{
    color: var(--link);
    text-decoration: none;
    padding: 12px 15px;
    display: block;
    text-align: center;
    border-radius: 8px;
}
.navbar a[aria-current="page"]{
    color: var(--accent);
}
/* Lighter green tab on hover. Comes after the rule above so the current page
   also switches to dark text (tan on light green would be unreadable). */
.navbar a:hover,
.navbar a:focus-visible{
    background-color: var(--link-hover);
    color: var(--bg);
}

/* Body text stays at a comfortable line length */
.intro{
    font-size: 1.3em;
    max-width: calc(65ch / 1.3); /* = 65ch of normal text, so it lines up with the sections below */
    margin: 20px auto;
    padding: 0 16px;
}

/* ---------- Grid of months (was the album grid) ---------- */
.grid{
    display: flex;
    margin-left: 100px;
    margin-right: 100px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: flex-start;
}
figure{
    display: flex;
    flex-direction: column;
    align-items: center;
}
figcaption{
    text-align: center;
}
figure > a{
    text-decoration: none;
}
.badge{
    margin: 0;
}

/* ---------- Flip card (from test.css) ---------- */
.maincontainer{
    position: relative;
    width: 250px;
    height: 250px;
    perspective: 1000px;
    border-radius: 15px;
}
.thecard{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.maincontainer:hover .thecard,
a:focus-visible .thecard{
    transform: rotateY(180deg);
}
.thefront,
.theback{
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 16px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 15px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.thefront{
    color: var(--text);
}
.theback{
    transform: rotateY(180deg);
    background-color: var(--accent);
    color: var(--bg);
}
.theback p{
    margin: 4px 0;
}
.card-month{
    font-size: 1.6em;
}
.card-season{
    text-transform: capitalize;
}
.current .maincontainer{
    box-shadow: 0 0 0 4px var(--accent);
}

/* Placeholder colours per season - swap for photos like the album covers */
.season-winter{ background-color: #4a5a6a; }
.season-spring{ background-color: #5f7f45; }
.season-summer{ background-color: #a88a2c; }
.season-autumn{ background-color: #8a4b2a; }
/* Photo per month, same idea as #hh1 ... #hh12:
#m1{ background-image: url(images/m1front.jpg); }
#m2{ background-image: url(images/m2front.jpg); }
... up to #m12
*/

/* ---------- Jump links (were the YouTube / Spotify / Apple Music links) ---------- */
.Listen{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    max-width: 600px;
}
.Listen a{
    text-decoration: none;
}
.links{
    min-width: 75px;
    height: 100px;
    margin: 10px;
    padding: 0 8px;
    border-radius: 15px;
    background-color: var(--link);
    color: var(--bg);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Listen a:hover .links{
    background-color: var(--link-hover);
}

/* ---------- Month page / plant info text ---------- */
.month-info,
.plant-list,
.notes-page{
    max-width: 65ch;
    margin: 0 auto;
    padding: 0 16px;
}
.facts{
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
}
.facts dt{
    color: var(--accent);
}
.facts dd{
    margin: 0;
}
.plant-names li{
    margin-bottom: 4px;
}
.de,
.note,
.small,
.empty{
    opacity: 0.75;
}
.tag{
    font-size: 0.8em;
    border: 1px solid var(--link);
    border-radius: 4px;
    padding: 0 4px;
    color: var(--link);
}
.plant:target{
    padding: 8px;
    background:
        linear-gradient(90deg, var(--accent) 50%, transparent 50%),
        linear-gradient(90deg, var(--accent) 50%, transparent 50%),
        linear-gradient(0deg, var(--accent) 50%, transparent 50%),
        linear-gradient(0deg, var(--accent) 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 16px 2px, 16px 2px, 2px 16px, 2px 16px;
    background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0%;
    animation: border-dance 8s infinite linear;
}


@keyframes border-dance {
  to {
    background-position: 100% 0%, 0% 100%, 0% 0%, 100% 100%;
  }
    
}

/* ---------- Home: right now + forecast ---------- */
.now{
    max-width: 65ch;
    margin: 0 auto 20px;
    padding: 0 16px;
}
.forecast{
    border-collapse: collapse;
    width: 100%;
}
.forecast th,
.forecast td{
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid var(--line);
}
.forecast .frost{
    color: #9fd3ff;
}

/* ---------- All plants: calendar table ---------- */
.legend{
    margin: 0 100px;
    font-size: 1.3em;
    font-weight:bolder ;
}
.table-wrap{
    overflow-x: auto;
    margin: 20px 100px;
}
.calendar{
    border-collapse: collapse;
    width: 100%;
    min-width: 640px;
}
.calendar th,
.calendar td{
    border: 1px solid rgba(205, 176, 136, 0.4);
    padding: 4px 6px;
    text-align: center;
}
.calendar tbody th{
    text-align: left;
    white-space: nowrap;
}
.calendar .group th{
    color: var(--accent);
    background-color: rgba(205, 176, 136, 0.15);
}
.calendar .now{
    background-color: rgba(205, 176, 136, 0.25);
}

/* ---------- Form fields: every field looks the same ---------- */
input:not([type="file"]),
select,
textarea{
    font: inherit;
    color: var(--text);
    background-color: var(--field);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
}
select{ /* own arrow, so the dropdown matches the other fields in every browser */
    -webkit-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238FB37A' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}
input:not([type="file"]):focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline: 2px solid var(--link);
    outline-offset: 1px;
    border-color: var(--link);
}
.note-form [aria-invalid="true"]{ /* class added so it beats the input:not() rule above */
    border-color: var(--error);
}

/* ---------- Notes page ---------- */
.form-hint{
    opacity: 0.75;
}
.note-form .field{
    margin-bottom: 16px;
}
.note-form label{
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}
.note-form input,
.note-form select,
.note-form textarea{
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
}
.note-form input,
.note-form select{
    height: 46px; /* Safari draws date fields taller otherwise */
}
.note-form input[type="date"]::-webkit-datetime-edit{
    padding: 0;
}
.note-form textarea{
    resize: vertical; /* can grow a bit, but not down the whole page */
    min-height: 7em;
    max-height: 20em;
}
.char-count,
.field-error{
    margin: 4px 0 0;
    font-size: 0.9em;
}
.char-count{
    opacity: 0.75;
}
.char-count.near{
    color: var(--accent);
    opacity: 1;
}
.field-error,
.is-error{
    color: var(--error);
}
.field-error:empty{
    display: none;
}
button,
.file-button{
    background-color: var(--link);
    color: var(--bg);
    border: none;
    border-radius: 15px;
    padding: 10px 16px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
}
button:not(.mc-stage):hover,
.file-button:hover{
    background-color: var(--link-hover);
}
button:focus-visible{
    outline: 2px solid var(--text);
    outline-offset: 2px;
}
.note-tools{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.file-button{
    position: relative;
}
.file-button input{ /* hidden but still reachable with the keyboard */
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.file-button:focus-within{
    outline: 2px solid var(--text);
}
.notes-list{
    padding-left: 0;
    list-style: none;
}
.notes-list li{
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.notes-list .delete{ /* outlined: less prominent than Save */
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 0.8em;
    display: block;
    background: none;
    color: var(--link);
    border: 1px solid var(--link);
}
.notes-list .delete:hover{
    background-color: rgba(143, 179, 122, 0.15);
}

/* ---------- Home: FAQ ---------- */
.faq{
    max-width: 65ch;
    margin: 40px auto;
    padding: 0 16px;
}
.faq details{
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
}
.faq summary{
    color: var(--link);
    font-weight: 600;
    cursor: pointer;
}
.faq summary:hover{
    text-decoration: underline;
    text-underline-offset: 4px;
}
.faq details p{
    margin: 8px 0 0;
}

/* ---------- Minecraft pumpkin (September) ---------- */
.harvest-spot{
    text-align: center;
}
.harvest-count{
    min-height: 1.2em;
}
.mc-stage{ /* the button you hold down */
    position: relative;
    display: grid;
    place-items: center;
    width: 180px;
    height: 180px;
    margin: 0 auto;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}
.mc-stage:focus-visible{
    outline: 2px solid var(--link);
    outline-offset: 4px;
}
.mc-cube{
    --size: 96px;
    --crack: none; /* app.js swaps in destroy_stage_0 ... 9 */
    position: relative;
    display: block;
    width: var(--size);
    height: var(--size);
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-45deg);
}
.mc-face{
    position: absolute;
    inset: 0;
    background: url(images/minecraftPumpkinAnimation/pumpkin_side.png) center / 100% 100%;
    image-rendering: pixelated; /* keep the 16x16 textures blocky */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.mc-face::after{ /* the crack overlay */
    content: "";
    position: absolute;
    inset: 0;
    background: var(--crack) center / 100% 100%;
    image-rendering: pixelated;
}
/* Minecraft-style shading: top brightest, sides darker */
.mc-front { transform: translateZ(calc(var(--size) / 2));                  filter: brightness(0.8); }
.mc-back  { transform: rotateY(180deg) translateZ(calc(var(--size) / 2));  filter: brightness(0.8); }
.mc-right { transform: rotateY(90deg) translateZ(calc(var(--size) / 2));   filter: brightness(0.6); }
.mc-left  { transform: rotateY(-90deg) translateZ(calc(var(--size) / 2));  filter: brightness(0.6); }
.mc-top   { transform: rotateX(90deg) translateZ(calc(var(--size) / 2)); }
.mc-bottom{ transform: rotateX(-90deg) translateZ(calc(var(--size) / 2));  filter: brightness(0.5); }
.mc-top,
.mc-bottom{
    background-image: url(images/minecraftPumpkinAnimation/pumpkin_top.png);
}
/* Dark outline when you point at the block, like in the game */
.mc-stage:hover .mc-block .mc-face,
.mc-stage:focus-visible .mc-block .mc-face{
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.6);
}
.mc-stage.broken .mc-block{
    visibility: hidden;
}
.mc-stage.regrow .mc-block{
    animation: mc-regrow 0.4s ease-out;
}
.mc-particle{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    margin: -6px;
    background: url(images/minecraftPumpkinAnimation/pumpkin_side.png) 0 0 / 400% 400%;
    image-rendering: pixelated;
    pointer-events: none;
}
.mc-item{ /* the dropped pumpkin */
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: 10px;
    pointer-events: none;
}
.mc-bob{
    display: block;
    animation: mc-bob 1.5s ease-in-out infinite;
}
.mc-item .mc-cube{
    --size: 32px;
    animation: mc-spin 4s linear infinite;
}
@keyframes mc-regrow{
    from{ scale: 0.2; }
    to{ scale: 1; }
}
@keyframes mc-bob{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-8px); }
}
@keyframes mc-spin{
    from{ transform: rotateX(-30deg) rotateY(0deg); }
    to{ transform: rotateX(-30deg) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce){
    .mc-bob,
    .mc-item .mc-cube,
    .mc-stage.regrow .mc-block{
        animation: none;
    }
}

/* ---------- Minecraft carrot (October) ---------- */
.mc-stage.mc-carrot{
    height: 290px; /* room for the crop on top and the carrots in front */
}
.mc-carrot .mc-cube{
    margin-top: 80px;
}
.mc-farmland .mc-face{ /* app.js swaps in dirt.png when it's added */
    background-image: var(--farmland-side, url(images/minecraftCarrotAnimation/grass_side.png));
}
.mc-farmland .mc-top,
.mc-farmland .mc-bottom{
    background-image: url(images/minecraftCarrotAnimation/farmland_dry.png);
}
.mc-farmland.wet .mc-top{
    background-image: url(images/minecraftCarrotAnimation/farmland_wet.png);
}
/* Four crop pictures standing on the block, crossed like a #, as in Minecraft */
.mc-crop{
    position: absolute;
    inset: 0;
    background: var(--crop, none) center / 100% 100%;
    image-rendering: pixelated;
    pointer-events: none;
}
.mc-crop-a{ transform: translateY(-100%) translateZ(calc(var(--size) / 4)); }
.mc-crop-b{ transform: translateY(-100%) translateZ(calc(var(--size) / -4)); }
.mc-crop-c{ transform: translateY(-100%) rotateY(90deg) translateZ(calc(var(--size) / 4)); }
.mc-crop-d{ transform: translateY(-100%) rotateY(90deg) translateZ(calc(var(--size) / -4)); }
.mc-sparkle{ /* green plus shapes, like bone meal */
    position: absolute;
    width: 9px;
    height: 9px;
    background-color: #7DF25B;
    clip-path: polygon(33% 0, 67% 0, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0 67%, 0 33%, 33% 33%);
    pointer-events: none;
}
.mc-drop{ /* a harvested carrot lying on the ground */
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -14px 0 0 -14px;
    transform: translate(var(--x, 0), var(--y, 0));
    pointer-events: none;
}
.mc-carrot-item{
    display: block;
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
    animation: mc-item-spin 3s linear infinite;
}
@keyframes mc-item-spin{
    from{ transform: rotateY(0deg); }
    to{ transform: rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce){
    .mc-carrot-item{
        animation: none;
    }
}

/* ---------- Phones: drop the big side margins ---------- */
@media (max-width: 700px){
    .grid,
    .legend,
    .table-wrap{
        margin-left: 16px;
        margin-right: 16px;
    }
}