/* styles.css */
.site-header { background:#f0f0f0; }
.site-nav    { max-width:1200px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; position:relative; background:transparent; }
body { font-family: Arial, sans-serif; max-width:1200px; margin:20px auto; padding:0 15px; color:#222; }
nav { margin-bottom:20px; }
nav a { margin-right:10px; text-decoration:none; color:#1a73e8;}
main h1 { margin-top:0; }
.error { background:#ffdede; padding:8px; border:1px solid #d88; margin-bottom:10px; }
.success { background:#eaffea; padding:8px; border:1px solid #7c7; margin-bottom:10px; }
.gallery-grid { display:flex; flex-wrap:wrap; gap:12px; }
.gallery-item { width:200px; text-align:center; }
.post { margin-border:28px; padding-bottom:16px; border-bottom:1px solid #ddd; }
.post-image { margin:10px 0; }
.post h2 { margin:0 0 6px; }

/* Header and Nav */
.site-header { background:#f0f0f0; border-bottom:1px solid #eee; }
.site-nav { max-width:1200px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; position:relative; }
.brand { font-weight:700; color:#222; text-decoration:none; }


/* fixed-width thumbnail column so text lines up */
  .post .thumb {
    width:120px;            /* reserve 120px for the thumbnail column */
    flex: 0 0 120px;        /* don't shrink or grow */
    display:block;
  }
  .post .thumb img {
    width:100%;
    height:auto;
    display:block;
    border-radius:4px;
  }



/* === Homepage two-column layout (main + right sidebar) === */
.home-layout {
  display: flex;           /* side-by-side layout on larger screens */
  gap: 24px;               /* space between main & sidebar */
  align-items: flex-start;
  flex-wrap: nowrap;
}

/* Main content area: take remaining width */
.home-main {
  flex: 1 1 auto;
  min-width: 0; /* prevents flexbox overflow issues with long content */
}

/* Sidebar: fixed width on desktop, stacks on small screens */
.home-sidebar {
  flex: 0 0 300px;  /* fixed sidebar width */
  max-width: 300px;
  box-sizing: border-box;
}

/* Default gallery image in main area */
.default-img {
  width: 100%;
  max-width: 600px;  /* limit main image width */
  height: auto;
  display: block;
  margin-top: 12px;
  border-radius: 4px;
}

/* Recent posts list */
.recent-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Each recent item: thumbnail + title */
.recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #222;
  padding: 6px;
  border-radius: 4px;
}

/* thumbnail: fixed 60x60 */
.recent-thumb {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  object-fit: cover;      /* crop to fill square */
  border-radius: 4px;
  background: #eee;
  display: block;
}

/* placeholder when no image */
.recent-thumb.placeholder {
  display: inline-block;
}

/* title next to thumbnail */
.recent-title {
  font-size: 14px;
  line-height: 1.2;
}

/* Hover state for recent item */
.recent-item:hover { background: rgba(0,0,0,0.03); }

/* Responsive: stack the sidebar under the main content on small screens */
@media (max-width: 900px) {
  .home-layout {
    flex-direction: column;
  }
  .home-sidebar {
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
  }
}

/* Blog / two-column layout used site-wide */
.layout {
  display: flex;
  gap: 24px;
 /* align-items: flex-start; */
  /* prevent overflow when content is long */
  /*box-sizing: border-box;*/
}

.main {
  flex: 1 1 auto;   /* main column grows */
  min-width: 0;     /* important to allow text to wrap in flex */
}

.side {
  /*flex: 0 0 260px;  /* fixed sidebar width */
  width: 260px;
  /*box-sizing: border-box; */
}

/* category list styling */
.cat-list a { display:block; padding:6px 0; text-decoration:none; }
.cat-list a.active { font-weight:bold; }

/* small screens: stack columns */
@media (max-width: 800px) {
  .layout { flex-direction: column; }
  .side { width: 100%; flex: 0 0 auto; margin-top: 16px; }
}



/* Default gallery image */
.default-img {
  width: 100%;
  max-width: 100%; /* fill main column but stay inside flex */
  height: auto;
  display: block;
  margin-top: 12px;
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
  .home-layout {
    flex-direction: column;
  }
  .home-sidebar {
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
  }
}



.post {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 12px;
}

.thumb img {
  width: 120px;
  height: auto;
  display: block;
}

.summary h2 {
  margin: 0 0 6px;
}


.footer {
  background: #f0f0f0;
  padding: 15px;
  text-align: center;
  margin-top: 40px;
  font-size: 14px;
  color: #555;
}
.footer a {
  color: #333;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}

/* Basic nav layout */
.site-nav { display:flex; align-items:center; gap:12px; padding:12px 20px; background:transparent; border-bottom:1px solid #eee; }

/* Nav list */
.site-nav .nav-list { list-style:none; margin:0; padding:0; display:none; gap:16px; align-items:center; }
.site-nav .nav-list a { text-decoration:none; color:#222; padding:8px 6px; }

/* Hamburger */
.nav-toggle { background:none; border:0; padding:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.hamburger { width:22px; height:2px; background:#222; position:relative; display:block; }
.hamburger::before, .hamburger::after { content:""; position:absolute; left:0; right:0; height:2px; background:#222; }
.hamburger::before { top:-7px; }
.hamburger::after  { top:7px; }



/* Mobile menu dropdown */
@media (max-width: 800px) {
  .site-nav .nav-list {
    flex-direction:column;
    position:absolute;
    left:8px;
    right:8px;
    top:calc(100% + 8px);
    background:#fff;
    border:1px solid #eee;
    box-shadow:0 8px 30px rgba(0,0,0,0.12);
    padding:8px;
    z-index:9999;
  }
  .site-nav .nav-list li { border-top:1px solid #f4f4f4; }
  .site-nav .nav-list li:first-child { border-top:0; }
}

/* I added this bext below */
/* Stack layout on mobile */
@media (max-width: 800px) {
  .layout {
    flex-direction: column;
  }
  .side {
    width: 100%;     /* take full width */
    margin-top: 20px; /* add spacing so it's not stuck to the posts */
  }
}

/* when menu is open (JS will toggle .open on the list) */
.site-nav .nav-list.open { display:flex !important; }

/* Accessibility focus */
.site-nav .nav-list a:focus,
.site-nav .nav-list a:hover { background:#f6f6f6; outline:none; }

/* Desktop always visible */
@media (min-width: 801px) {
  .nav-toggle { display:none; }
  .site-nav .nav-list { display:flex !important; flex-direction:row; position:static; background:none; box-shadow:none; }
}

/* When open (JS adds .open) */
.site-nav .nav-list.open { display:flex !important; }