/* Basic blog styles */
:root{
  --max-width: 930px;
  --accent: #2c3e50;
  --muted: #666;
}

html, body { height: 100%; margin: 0; padding: 0;}
body {
  font-family: Segoe UI, Roboto, Arial, sans-serif;
  color: var(--accent);
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.bg-fixed{
  background-image: url("../images/bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.site-header{
  background: #aeb9aad1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  backdrop-filter: blur(5px);
  width: 100%;
  position: fixed;
  top: 0;
  height: 45px;
  z-index: 1000;
  display: flex;
  align-items: center;
}

.site-title{
  margin:0;
  font-size:1.25rem;
  font-weight:700;
  line-height:1;
  flex:0 0 auto;
}
.site-title a{
  color:var(--accent);
  text-decoration:none;
  display:inline-block;
}

.content-wrapper {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  max-width:var(--max-width);
  margin:72px auto auto auto;
  background:#aeb9aad1;
  border-radius:10px
}

/* Ensure menu is a flexible element and visible */
.menu{display:flex;flex:1 1 auto;justify-content:flex-end;visibility:visible;opacity:1}
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem;align-items:center}
.menu li{display:inline-block}
.menu a{color:var(--accent);text-decoration:none;font-weight:600;padding:0.25rem 0.35rem}

/* Debug helpers: outline header and menu if they are not visible */
.site-header.debug-outline{outline:2px dashed rgba(0,0,0,0.08)}
.menu.debug-outline{outline:2px dashed rgba(200,50,50,0.25)}

/*.container{max-width:var(--max-width);width:100%;margin:1.5rem auto;background:#aeb9aad1;padding:2rem;border-radius:6px}*/
/* Shared inner container */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  /*padding: 0 1rem;*/
  padding: 2rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.post-image{width:100%;height:auto;border-radius:4px;display:block;margin-bottom:1rem}
h1{margin-top:0;font-size:2rem}
.intro{color:var(--muted);font-style:italic}
.body-text{line-height:1.6;color:#333;text-align: justify;}

/* Post header: title and muted date on one line */
.post-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:0.75rem}
.post-header h1{margin:0;font-size:1.75rem}
.post-header .muted{margin:0;color:var(--muted);font-size:0.95rem}

/* Image classes parsed from pseudo-tags in post body */
.post .body-text img{box-shadow:4px 4px 6px rgb(0 0 0 / 60%);border-radius:20px;max-height:500px;object-fit:cover;display:block;margin-top:0.75rem;margin-bottom:0.75rem;}

/* Using attribute selector so class names starting with numbers work reliably */
img[class~="100"]{width:100%;float:none}
img[class~="L33"]{width:33%;float:left;margin-right:0.75rem;}
img[class~="L66"]{width:66%;float:left;margin-right:0.75rem;}
img[class~="R33"]{width:33%;float:right;margin-left:0.75rem;}
img[class~="R66"]{width:66%;float:right;margin-left:0.75rem;}
/* Using attribute selector so class names starting with numbers work reliably */
figure[class~="100"]{width:100%;float:none}
.L33{width:31%;float:left;margin-right:0.75rem;}
.L66{width:64%;float:left;margin-right:0.75rem;}
.R33{width:31%;float:right;margin-left:0.75rem;}
.R66{width:64%;float:right;margin-left:0.75rem;}

figure {
  margin: 0px;
}

.figureHelper img{
  width: 100%;
}

figcaption {
    margin-top: 0.5rem;
    text-align: center;   /* centers the note */
    line-height: 1.3;
    color: #555;
    font-size: 0.85rem;
}

/* Ensure text wraps around floated images */
.post .body-text::after{content:"";display:table;clear:both}

@media (max-width:600px){
  .menu ul{flex-direction:column}
}

/* LINKS */
a {
  color: var(--accent);
  text-decoration: underline;            /* visible in body text */
  text-decoration-thickness: 2px;
  transition: color .12s ease, background-color .12s ease, box-shadow .12s ease;
}

/* Visited state — slightly muted */
a:visited {
  color: #5a6a75;                        /* darker/-muted visited color */
}

/* Hover & focus for general links */
a:hover,
a:focus {
  color: #1b2a36;                        /* a touch darker than --accent */
  text-decoration-color: rgba(44,62,80,0.7);
}

/* Keyboard focus outline (accessible and subtle) */
a:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(44,62,80,0.12);
  border-radius: 4px;
}