/* font styling and layout= */
body {
/* sans-serif default */
  font-family: Cantarell,
	       -apple-system, 
		BlinkMacSystemFont,
		"Segoe UI", 
		Roboto, 
		Oxygen-Sans, 
		Ubuntu, 
		"DejaVu Sans", 
		"Helvetica Neue", 
		sans-serif; 
/* serif default */
/*  font-family: Serif, Garamond */
  list-style-type: decimal;
  background-color: white;
  color: #111;
  min-width: 150px; /*sets minimum page width */
  max-width: 1024px; /* max-width sets width of content, 700px is good */
  padding: 20px;
  margin: 0 auto !important;
  float: none !important;
} 

/* RESPONSIVE FONT SIZES ===========================*/
/* If the screen size is 601px wide or more, set the font-size of <div> to 1.0em */
@media screen and (min-width: 351px) {
  body {
    font-size: 1em;
  }
}

/* if the screen size is 350px wide or less, set the font-size of <div> to 0.9em */
@media screen and (max-width: 350px) {
  body {
    font-size: 0.9em;
  }
}

/* For screens smaller than 400px (typical mobile screens) display nav menu stacked as block */
@media only screen and (max-width: 400px) {
  /* Reduce button width to fit on smaller screens */
  li.menu, li.menu a:link{
    display:block; /* block to show as stacked column */
    align-items: center; /* Horizontally center items */
    justify-content: center; /* Vertically center items */	
    width: 90%; /* buttons expand to 90% of container width */
    text-align: center;
  }
	h1 { /* decrease heading size */
	font-size: 1.5em;
	}
	p.centred-link-button a:link { /* paragraph stlye for link button- button width increases to 80% */
	width: 80%;
	}
}

/*link style for entries */
.entry-link {
	text-decoration: underline !important; /* Force removal of underline */
	display: block;
	padding: 1px;
	border-radius: 8px;
	outline: none;
	max-width: 100%;
	width:auto;
}

.entry-link:hover {
	background-color: #bbffeb !important;
}

/* general hyperlink style */
a:link    { color: blue; text-decoration: underline;      }
a:hover   { background-color: #bbffeb; 	 }
a:visited { color: purple;                             }
/* shows blue border for all links when tab selecting*/
a:focus {outline: 2px solid blue}

/* scrollbar always visible, prevents layout shift in Chromium, Palemoon and others. Firefox/Midori does not require this*/
html {
    overflow-y:scroll;
}

/* condensed  paragraph style limit to 60 chars wide */
p {
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
}


/* =site title= */
.site-title {
  text-align: center;
  font-size: 1.2em;
  font-style: bold;
}

/* =captions= */
.caption {
  text-align: center;
  font-size: 0.9em;
  font-style: italic;
}

/* =centred hyperlink= */
.centred-link {
  text-align: center;
}

/* =centred hyperlink button style= */
.centred-link-button a:link {
	text-align: center;
	display: block;
	color: blue !important;
	text-decoration: none !important;
	border: 2px solid blue;
	border-radius: 4px;
	width: 20%;
	margin: auto;
	padding: 5px;
	cursor: pointer;
  }

.centred-link-button a:visited { color: blue !important}

/* = HEADINGS ==================== */
/* main headings */
h1 { text-align: center;
 }

h2 { 
	text-align: center;
	font-size: 1em;
}
/* heading links */
h1 a { color: inherit !important;
font-family: inherit !important;
 }
h2 a {
	color: inherit
 }
h3 a { color: inherit !important }
h4 a { color: inherit !important }
h5 a { color: inherit !important }
h6 a { color: inherit !important }

/* =images= */
img {
  max-width: 100%;
  height: auto;
/* =centre all images= */
  display: block; 
/*  margin-left: auto; */ 
/*  margin-right: auto; */
/*  width: auto; */
	margin: 0 auto;
}      


/* = MENU =================== */
ul { 
  text-align: center;
  margin: 0 auto;
  width: auto;
  padding: 0;
}

/* menu appearance; flex */

li.menu {
    background-color: white;
    display: inline-flex; /* for safari try -webkit-flex, currently not needed */
    padding: 8px;
    margin: 0;
    cursor: pointer;
}

/* top navigation menu link style: li.menu link style, inherits link colours from "a:link and a:hover*/
li.menu a:link {
	border: 2px solid blue;
	border-radius: 4px;
	padding: 8px;
	text-decoration: none;
}

li.menu a:visited {
	color: blue;
}

/* = POSTS ================== */
/* jinja template for blog: index.html */
/* when [id=something] in jinja template, refer to it in css as [#something] */
	
#post-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style-type: none; 
}

#post-list li {
    box-sizing: border-box;
    padding: 3px; /* Adjust padding as needed */
    width: 100%; /* Fallback for browsers that don't support calc() function */	
    width: calc(30% - 20px); /* Three columns */
    display: flex; 
    flex-direction: column; /* Stack children vertically */
    height: auto;
align-items: center;
}


#post-list .entry-content img {
/*    width: auto !important; */
	width: 100%; 
    height: auto !important;
/*    aspect-ratio: 1.85 / 1; */
	object-fit: contain;
	display: block;
	margin: 0 auto;
  /*  max-height: 400px; /* Prevents extremely tall images */
}

.entry-content img {
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 0px; /* Optional: add rounded corners */
}

.entry-content {
    flex-grow: 1; /* Allow content to grow and fill space */
}

#post-list .entry-content p {
    text-align: center; /* Fallback for older browsers */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* RESPONSIVE LAYOUT ========================== */
@media (max-width: 900px) {
    #post-list li {
        width: calc(50% - 20px); /* Two columns */
    }
}

@media (max-width: 600px) {
    #post-list li {
        width: 100%; /* One column */
    }
}

@media (min-width: 1920px) {
  #post-list li {
    width: 30%; /* Adjust width for larger screens */
    height: auto;
  }
}

@media (min-width: 2560px) {
    body  { 
        max-width: 55%;
        margin: 0 auto;
    }
    #post-list .entry-content img {
        max-width: 500px;
    }
}

ol {
  padding-left: 0px;
}

li {
    display: inline-block;
	border: 2px blue;}

/* tags link style */
li.tags a:link {
	display: inline-block;	
	border: 1px solid;
	border-radius: 4px;
	padding: 4px 6px;
	margin: 2px 2px;
	text-decoration: none;

}
li.tags a:hover {
	background-color: #bbffeb; 
}

/* CATEGORIES =================== */
/* when screen less than 350px increase width of category buttons to 100% for clarity */
@media only screen and (max-width:350px) { 
.categories a:link {
   width: 100%;
 }
}

/* =category list on archives page= the button "icon" and "text" are specified in pelicanconf.py,
 referenced in archives.html jinja template  */
li.categories { 
  text-align: center;
  padding: 8px;
  cursor: pointer;
  width: fit-content; /* IMPORTANT use fit-content */
  display: inline-flex;  /* IMPORTANT use inline-flex plus the justify and align to fix alignment probs in safari */
  justify-content: center;
  align-items: center;
} 


/* = link style for categories- buttons. use margin: auto to centre*/
.categories a:link {
   text-decoration: none;
   width: 100% ; /* set :100% to have button fill width, set <250px if you want buttons to adapt to layout */ 
   border-radius: 8px;
   border: 0px solid blue;
   display:block;
   margin: auto;
   padding: 0px;
   font-weight: bold;
}


/* =archive list on archives page= */
dl {
  text-align: center;
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

/* description name in archive i.e post title */
dd { margin-left: 0px; }

/* =blog post titles= */
.entry-title {
	text-align: center;
	padding-top: 0px;
	height: 2em; /* fixed height for blog title to keep alignment if title on multiple lines */
}

/* = PAGINATOR ====================*/
/* paginator styling- styles for each next/previous and first/last, maybe use different background colors for each, note !important is use to override default link underline style to none*/
.page-first-last {
	text-decoration: none !important;
	color: blue !important;
	border: 2px solid blue;
	border-radius: 4px;
	padding: 5px;
	cursor: pointer;
}

.page-next-previous {
	text-decoration: none !important;
	color: blue !important;
	border: 2px solid blue;
	border-radius: 4px;
	padding: 5px;
	cursor: pointer;
}

/* centre the post info (post footer) */
.post-info {
	text-align: center;
}	

/* = ARTICLE STYLE, IMAGE GALLERY =====================*/

.gallery-wrapper {
    width: 100%; /* or a specific width */
    text-align: center; /* Center the gallery */
    margin: 0 auto; /* Center the wrapper */
	justify-content: center;
}

.gallery-wrapper img {
	max-width: 500px;
}



.image-gallery {
    display: block;
    text-align: center; /* Fallback for non-flexbox browsers */
	width: 100%;
	max-width: 100%;
	margin: 0;
	margin-bottom: 20px;
	padding: 0;
}

.image-gallery li {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 10px 0;
    vertical-align: top;
    box-sizing: border-box;
	text-align: center;
	list-style: none;
	padding: 0;	
	box-sizing: border-box;
	
}

.image-gallery img {
	padding-top: 20px; /*gives space for caption below*/
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;
	padding-bottom: 5px;
	width: auto; /*set to auto to fix stretching in dillo browser*/
    max-width: 500px;
    max-height: 500px;
    height: auto;
    object-fit: contain;
}



/* Fallback for older browsers */
@media screen and (max-width: 1023px) {
    .image-gallery {
        display: block; /* Stack images in a single column */
	text-align: center;
    }

    .image-gallery li {
        display: block; /* Each image takes full width */
        margin: 0 auto; /* Center each image */
        width: 100%; /* Full width for older browsers */
	text-align: center;
    }

}

@media screen and (min-width: 1024px) {
    .image-gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        align-items: flex-start;
    }

    .image-gallery li {
	box-sizing: border-box;
        width: calc(50% - 20px);
        max-width: 500px;
      /*  max-height: 500px; */
	display: flex;
        flex-direction: column; 
	align-items: center;
        margin: 0;
    }

    .image-gallery figure {
        /* MAINTAIN simple layout */
        display: block;
        width: 100%;
        text-align: center;
    }
    .image-gallery img {
        width: 100%;
        height: auto;
      /*  max-height: 500px;*/
        object-fit: contain;
        /* NEW: Add margin below image to separate from caption */
    /*    margin-bottom: 0px; */
    }

.image-gallery figcaption {
        /* ENSURE caption is below image */
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 10px;
	background-color: transparent;
    }
}

figure: {
	display: block;
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 0;
	object-fit: contain;	
}

figcaption {
	font-size: 0.9em;
	font-style: italic;
}

/* == PARAGRAPH STYLING =======================*/
article p {
    text-align: left;
    max-width: 60ch; /*important that this is max-width, and not width so paragraph wraps at sizes less than 60ch */
}

/* Adds a few pixels to bottom margin of images when single column view i.e width less than 1024px */
@media screen and (max-width: 1023px) {
    .image-gallery li {
        margin-bottom: 20px; /* Adds space below each image */
    }
    
    .image-gallery img {
        margin-bottom: 10px; /* Optional: adds a little extra space below the image itself */
    }
}
/* NEW: Add this as an additional block at the end of your existing CSS */
@media screen and (max-width: 500px) {
    .image-gallery {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .image-gallery li {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 20px 0;
        text-align: center;
    }

    .image-gallery img {
        width: 100%;
        max-width: 500px;
        height: auto;
        object-fit: contain;
        margin: 0 auto;
    }

    .image-gallery figcaption {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }
}


* {
    box-sizing: border-box;
}