/* Cleaned and consolidated stylesheet (behavior preserved) */

/* Variables */
:root{
  --color-charcoal:#2b2b2b;
  --color-off-white:#f9f7f4;
  --color-sea-blue:#004d66;
  --color-light-text:#F0F0F0;
  --color-placeholder-dark:#b0b0b0;
  --footer-height:75px;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}

/* Base / typography */
html,body{
  font-family:"EB Garamond", Georgia, serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  color:var(--color-charcoal);
  background:var(--color-off-white);
  min-height:100%;
}
body{display:flex;flex-direction:column;min-height:100vh;padding-bottom:var(--footer-height)}

/* Layout utilities */
.container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex-grow:1}
.image-flex{display:flex;pointer-events:none;user-select:none}
.image-flex img{width:100%;height:auto;object-fit:cover}
.heading{margin-left:20px;text-align:left;align-self:flex-end;font-weight:500;font-size:50px;line-height:.9}
.description{margin:20px 0 20px 40%;text-align:justify;font-size:16px}
.letter{max-width:600px;margin:0 auto}
p{margin:0;text-align:justify}

/* Poetry: ensure readable padding on narrow screens */
.poetry-page .letter {
  box-sizing: border-box;
  padding: 0 20px; /* desktop & tablet */
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 520px) {
  .poetry-page .letter {
    padding: 0 16px; /* slightly smaller on very narrow screens */
  }
}

/* Gallery / inspiration */
.flex-container{display:flex;flex-flow:row wrap;justify-content:space-around;padding:5px;list-style:none;pointer-events:none;user-select:none;flex-grow:1}
.flex-container img{object-fit:cover;padding:5px;box-sizing:border-box}

/* Navigation / content layout */
.navigation{flex:1;position:fixed;padding-top:3em}
.content{flex:3;padding-left:25px}
.navigation ul{list-style:none;padding:20px}
.navigation li{padding:10px 0}
.navigation a{color:var(--color-charcoal);text-decoration:none;transition:text-decoration .3s}

/* Reflections (dark theme) */
body.reflections-page{
  color:var(--color-light-text);
  overflow-x:hidden;
  background:linear-gradient(135deg,var(--color-sea-blue),#00334d,#004059,#00334d);
  background-size:400% 400%;
  animation:gradientBG 30s ease infinite;
  cursor:url('media/monsun.png') 20 85,auto;
  font-family:inherit;
}
@keyframes gradientBG{0%{background-position:0% 50%}100%{background-position:100% 50%}}

/* Ensure reflections descendants inherit color & font */
body.reflections-page, body.reflections-page *{color:inherit;font-family:inherit}

/* Music toggle button */
#music-toggle-button{
  position:absolute;top:20px;right:22px;margin:5px;padding:10px;background:#fff;border:1px solid #ccc;
  cursor:pointer;font-size:1.2rem;border-radius:50%;width:45px;height:45px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.1);color:var(--color-charcoal)
}
#music-toggle-button:hover{background:#f1f1f1}
#music-toggle-button[data-playing="true"]{background:#e0f7fa;border-color:#00bcd4;animation:subtlePulse 1.5s infinite ease-out}
@keyframes subtlePulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,189,212,.7)}70%{transform:scale(1.05);box-shadow:0 0 0 10px rgba(0,189,212,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,189,212,0)}}
#music-toggle-button svg,#music-toggle-button svg *{fill:currentColor;stroke:currentColor}

/* Main / form layout for reflections */
main{flex-grow:1;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box;width:100%}
form{display:flex;flex-direction:column;height:100%;width:100%;max-width:600px}

/* Textarea (auto-resize JS relies on overflow:hidden & resize:none) */
textarea{
  width:100%;min-height:6rem;max-height:60vh;padding:14px;font-size:1.2rem;line-height:1.5;background:transparent;border:none;
  resize:none;outline:none;cursor:text;box-sizing:border-box;color:inherit;caret-color:var(--color-placeholder-dark);overflow:hidden;
  transition:height 120ms ease
}
textarea::placeholder{color:var(--color-placeholder-dark);opacity:1}
body.reflections-page textarea::-webkit-scrollbar{display:none}

/* Footer (sticky) */
.footer{
  position:fixed;left:0;bottom:0;width:100%;height:var(--footer-height);display:flex;align-items:center;justify-content:space-between;
  padding:20px;background:var(--color-off-white);flex-shrink:0
}
.footer a{color:var(--color-charcoal)}
body.reflections-page .footer, body.reflections-page .footer a, body.reflections-page .footer span{color:var(--color-charcoal) !important}
body.reflections-page .footer{cursor:default}

/* Form controls inherit site font and color */
input,textarea,select,button,optgroup,option{font:inherit;color:inherit;background:transparent;caret-color:inherit}

/* Accessibility helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Links: inherit color, no underline by default (override where needed) */
a,a:link,a:visited,a:hover,a:active,a:focus{color:inherit;text-decoration:none}
a:focus{outline:3px solid rgba(0,0,0,.08);outline-offset:2px}

/* Responsive tweaks */
@media (max-width:520px){.heading{font-size:40px}textarea{font-size:1rem}}

/* Separator */
.seperator{margin:16px 0;text-align:center;line-height:0}
.seperator img{display:inline-block;height:16px;width:auto;max-width:90%;margin:0 auto;vertical-align:middle}
@media (max-width:520px){.seperator{margin:12px 0}.seperator img{height:18px}}

/* Ensure inputs/textarea on reflections page use light text */
body.reflections-page textarea,body.reflections-page input,body.reflections-page select,body.reflections-page button{
  color:var(--color-light-text) !important;
  caret-color:var(--color-light-text) !important;
  background:transparent;border:none;font-family:inherit
}
body.reflections-page textarea::placeholder,body.reflections-page input::placeholder{color:rgba(240,240,240,0.7);opacity:1}

/* END */