/* style.css */
body {
  font-family: "Noto Sans", "Microsoft YaHei", Arial, sans-serif;
  margin: 20px;
  line-height: 1.6;
  background-color: #f2f9f1;
}
header .home{
  display: flex;
  align-items: center;  /* vertically centers logo and title */
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

header :hover{
  color: #87A96B;
}

header .logo {
  height: 60px;        /* adjust size of logo */
  margin-right: 10px;  /* space between logo and text */
}

header h1 {
  font-size: 1.7em;    /* control title size */
  margin: 0;
}

/* Intro texts */
p {
  font-size: 1.2em;
  margin: 12px 1;
}
h1, h2, h3{
  color: #2c3e50;
}


h2 {
  margin-top: 70px;
  padding: 5px;
  font-weight: normal; /* unbold text */
}

h3 {
  padding-left: 5px;
}

/* spacing below intro texts */
nav{
  margin-top: 50px
}

nav table {
  width: 100%;
  border-collapse:collapse;
  margin: 0 auto;
}

nav th{
  padding: 2px;
  font-size:1.2em;
}

nav th a {
  text-decoration: none; /* remove underline */
  color: #5585b5;
  transition: color 0.15s;
}

nav th a:hover {
  color: #3498db;        /* highlight color on hover */
  text-decoration: underline;
}

.nav-img {
  width: 400px;
  height: 250px; /* between 250 to 400 is good */
  object-fit: cover; /* crops to fit while keeping aspect ratio */
  margin-top: 10px;
  border-radius: 14px;  /* rounded corners */
}

.general-img {
  max-width: 100%; /* Image will not exceed 100% of its container's width */
  height: auto;    /* Height adjusts automatically to maintain aspect ratio */
  margin-top: 25px;
}

nav a {
  text-decoration: none; /* remove underline */
  display: block; /* each link on its own line*/
  margin: 25px 0; /* line spacing */
  padding-left: 15px; /* distance to left edge */
  color: #5585b5;
  transition: color 0.15s;
}

nav a:hover {
  color: #3498db;        /* highlight color on hover */
  text-decoration: underline;
}


.btn {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  background-color: #3498db;   /* match nav link color */
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-size: 15px;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn:hover {
  background-color: #5585b5;   /* darker hover */
  transform: translateY(-3px); /* subtle lift */
}

/* Flex container for reflections.html main content */
.content {
  display: flex;
  justify-content: space-between; /* space between left & right */
  align-items: flex-start;        /* align top edges */
  margin-top: 20px;
}

/* Left side (nav, text) */
.content .left {
  flex: 1;               /* takes remaining space */
  padding-right: 20px;   /* spacing before image */
}

/* Right side (box image) */
.content .right {
  flex: 1;               /* let it take up good portion */
  display: flex;
  justify-content: flex-end; /* stick to the right edge */
}

.mailbox {
  max-width: 80%;   /* adjust size */
  height: auto;
}
/* Flex container for reflections.html main content */
.content {
  display: flex;
  justify-content: space-between; /* space between left & right */
  align-items: flex-start;        /* align top edges */
  margin-top: 20px;
}

/* Left side (nav, text) */
.content .left {
  flex: 1;               /* takes remaining space */
  padding-right: 10px;   /* spacing before image */
}

/* Right side (box image) */
.content .right {
  flex: 1;               /* let it take up good portion */
  display: flex;
  justify-content: flex-end; /* stick to the right edge */
}

.mailbox {
  max-width: 75%;   /* adjust size */
  height: auto;
}

.honey {
  max-width: 75%;   /* adjust size */
  height: auto;
}

/* for formating the reflection entries, new column every 10 */
/* Multi-column list: fill 10 rows, then start a new column */
nav.entries {
  display: grid;
  grid-auto-flow: column;           /* fill down first, then new column */
  grid-template-rows: repeat(15, auto); /* <= exactly 10 per column */
  grid-auto-columns: max-content;   /* column width fits content */
  column-gap: 24px;                 /* space between columns */
  row-gap: 10px;                    /* space between rows (entries) */
  padding-left: 15px;               /* indent from left edge */
}

/* Entry link look (keeps your hover rules) */
nav.entries a {
  display: block;
  margin: 0;                        /* spacing handled by row-gap */
  text-decoration: none;
  color: #5585b5;
  transition: color 0.15s;
}
nav.entries a:hover {
  color: #3498db;
  text-decoration: underline;
}

/* try #1 */
@media (max-width: 700px) {
  nav.entries {
    display: block;
  }
  nav.entries a {
    margin: 10px 0;
  }
}
/* Mobile: collapse to a single column list */




/* mobile users get swipe hints below 4 categories */
.swipe-hint {
  text-align: center;
  font-size: 0.9em;
  color: #888;
  margin-top: 10px;
  margin-left: 20px; /* add left spacing */
  display: none;   /* hidden by default */
}

/* Only show on mobile (screen ≤ 480px wide) */
@media screen and (max-width: 480px) {
  .swipe-hint {
    display: block;
  }
}

/* Only show on touch devices (optional, uncomment if needed)
@media (hover: none) and (pointer: coarse) {
  .swipe-hint {
    display: block;
  }
}
*/

/* Format photo gallery automatically  */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px; /* spacing between photos */
}

.gallery img {
  width: 100%;
  border-radius: 10px;
  display: block;
}

.gallery figcaption {
  text-align: center;
  margin-top: 5px;
  font-size: 0.9em;
  color: #555;
}

.gallery figcaption a {
  text-decoration: none;     /* 去掉下划线 */
  color: #5585b5;            /* 与导航链接同色 */
  transition: color 0.15s;
}

.gallery figcaption a:hover {
  color: #3498db;            /* 鼠标悬停时变亮 */
  text-decoration: underline;
}