/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


/* ================================================== PAGE CONTAINER ================================================== */
/* Controls the overall page width, centring, and base typography */
body {
  margin: 0;                 /* removes default browser margins */
  padding: 32px;             /* space between content and window edge */

  max-width: 1080px;         /* limits page width */
  margin-left: auto;         /* centres page horizontally */
  margin-right: auto;

  font-family: Georgia, "Times New Roman", serif;  /* base font */
}


/* ================================================== DOUBLE HEADER (TOP ROW) ================================================== */
/* Creates a horizontal row holding the two header boxes */
.double-header {
  display: flex;             /* puts children side-by-side */
  gap: 16px;                 /* space between the two boxes */
  
  margin-bottom: 32px;   /* space below the header */
}


/* ========== SHARED HEADER BOX RULES ========== */
/* Applies to both left and right header boxes */
.dh-box {
  border: 2px solid #000;    /* temporary: shows structure */
  padding: 16px;             /* inner spacing */
  box-sizing: border-box;    /* padding included in size */
}


/* ========== HEADER BOX PROPORTIONS ========== */
/* Controls how wide each header box is */
.dh-left {
  flex: 3;                   /* left box is wider */
}

.dh-right {
  flex: 2;                   /* right box is narrower */
}


/* ================================================== THREE COLUMN MAIN LAYOUT ================================================== */
/* Creates the left / main / right column row */
.three-col {
  display: flex;             /* puts columns side-by-side */
  gap: 16px;                 /* space between columns */
}


/* ========== SHARED COLUMN RULES ========== */
/* Applies to all three columns */
.col {
  border: 2px solid #000;    /* temporary: shows structure */
  padding: 16px;             /* inner spacing */
  box-sizing: border-box;    /* padding included in size */
  min-width: 0;              /* prevents overflow issues */
}


/* ========== COLUMN PROPORTIONS ========== */
/* Controls how wide each column is */
.col-left  { flex: 2; }      /* slim left sidebar */
.col-main  { flex: 4; }      /* wide main content column */
.col-right { flex: 2; }      /* slim right sidebar */


/* ================================================== SITE MENU BLOCK ================================================== */
/* Container for the vertical menu */
.site-menu {
  margin: 0;
}

/* Menu title */
.menu-title {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.1em;
}

/* Removes default bullets and spacing */
.site-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Space between menu items */
.site-menu li {
  margin-bottom: 8px;
}

/* Menu links */
.site-menu a {
  text-decoration: none;
  color: inherit;
}

/* Optional hover behaviour */
.site-menu a:hover {
  text-decoration: underline;
}

/* ================================================== JOURNAL ================================================== */

/* ==================== JOURNAL PAGE LAYOUT (2 COLUMNS) ================ */
/* Use this instead of .three-col on journal pages */

.journal-layout {
  display: flex;        /* side-by-side columns */
  gap: 16px;            /* space between them */
}

.journal-menu {
  flex: 1;              /* slim left menu column */
}

.journal-content {
  flex: 4;              /* wide journal column */
  min-width: 0;        /* prevents overflow issues */
}



/* =========== IMAGES INSIDE JOURNAL POSTS ===================== */
/* Keeps images inside the column and visually spaced */

.post-body img {
  max-width: 100%;     /* never overflow the column */
  height: auto;       /* keeps proportions */
  display: block;     /* prevents inline spacing issues */
  margin: 16px 0;     /* space above and below the image */
}


/* ========== IMAGES INSIDE JOURNAL CONTENT ========== */
/* Forces images to respect the column width */

.journal-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16px auto;   /* centres image and adds vertical space */
}


/* ========== Journal Fonts and Special Accents ========== */

.post-body {
  line-height: 1.6;
}

.post-body h3 {
  font-size: 1.3em;
  margin-top: 24px;
}

.post-body em {
  font-style: italic;
  color: #444;
}

.post-body strong {
  font-weight: bold;
  color: #000;
}






/* Post header spacing */
.post-head {
  margin-bottom: 16px;          /* space before body text begins */
}

/* Date line: smaller + quieter */
.post-date {
  font-size: 0.95em;
  opacity: 0.8;                 /* makes it feel like metadata */
  margin-bottom: 6px;
}

/* Post title */
.post-title {
  margin: 0;                    /* removes default top gap */
}

/* Paragraph rhythm inside posts */
.post-body p {
  margin-top: 0;
  margin-bottom: 14px;
}

/* Optional: a “final line” that reads like a sign-off */
.post-signoff {
  margin-top: 18px;
  font-style: italic;
}

/* Notes block: separate container */
.post-notes {
  margin-top: 22px;             /* space above notes */
  padding-top: 14px;
  border-top: 1px solid #000;   /* structural divider; restyle later */
}

/* Notes heading */
.notes-title {
  margin: 0 0 10px 0;
  font-size: 1.05em;
}

/* Notes list formatting */
.notes-list {
  margin: 0;
  padding-left: 18px;           /* keeps bullets tidy */
}

.notes-list li {
  margin-bottom: 8px;
}


/* ========== JOURNAL ENTRY LIST ========== */

.entry-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.entry-card {
  display: block;
  padding: 14px;
  border: 1px solid #000;
  text-decoration: none;
  color: inherit;
}

.entry-meta {
  font-size: 0.95em;
  opacity: 0.85;
  margin-bottom: 6px;
}

.entry-title {
  font-size: 1.15em;
  margin-bottom: 6px;
}

.entry-excerpt {
  font-size: 1em;
  opacity: 0.9;
}





/* ================================================== BUTTONS ================================================== */


/* ========== BACK TO JOURNAL LINK ========== */
/* Used at top and bottom of journal posts */

.back-to-journal {
  margin: 16px 0;
  font-size: 0.95em;
}

.back-to-journal a {
  text-decoration: none;
  color: inherit;
}

.back-to-journal a:hover {
  text-decoration: underline;
}



/* ================================================== DECORATIONS ================================================== */



/* ========== GENERIC IMAGE EFFECTS ========== */
/* Soft drop shadow for graphics and icons */

.dropshadow {
  filter: drop-shadow(0px 0px 3px #000000);
}