/*
The main style sheet of the home page, made on 7 June 2026
Author: Web site publisher
Meta data: contains root variables as follows
*/


/*  23.06.2026: the full image 'popup' the full two image boxes    */

   #home-gallery .popup-full-img {
        position: fixed;
        top: 0; left: 0;
        background: rgba(0, 0, 0, 0.9);
        width: 100%;
        height: 100%;
        z-index: 100;                         /* z-index changed from 100 to auto: 22.06.2026, 19:00pm */
        display: none                        /* hide large image until requested by a click */
    }

    /*

    
    */
    .popup-full-img img {
        position: absolute;
        top: 50%; left: 50%;               /* Centers popup image in the screen */
        transform: translate(-50%, -50%);    
        border: 3px solid var(--base-white);
        border-radius: 5px;
        width: 750px;
        object-fit: cover;
    }

    @media (max-width:768px) {              /* handle smaller devices */
      .popup-full-img img {
      width: 95%;
      }      
    }


    .popup-full-img span {
        position: absolute;
        top: 5%;
        right: 5%;
        font-size: 60px;
        color: var(--base-white);
        cursor: pointer;
        z-index: 100;
    }
/*  21.06.2026: End the styles for the full two images    */




/* Define some css variables using the root selector */

:root {
    --base-white: #ffffff;
    --wrapper-bg-color: #8cdd81;
    --black-color: #000000;
    --orange-color: #fe9900;
    --brown-color: rgb(231, 162, 72);
    --gallery-bg: #000;
    --dark-orange: #fe9800f5;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html{                                                   /* Apply some page-wide fonts */
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: var(--black-color);                          /* Text color */
}


/* Logo layout starts here */

#logo-header {
    margin: 2em auto;
    width: min(66.5em, 100%);                          /* reduce width by : min(75.5em, 100%) */
    background-color: var(--gallery-bg);

    color: var(--base-white);
      
    /* Restyle header/logo/mission statement 21.06.2026 */
    font-family: '0.8em/normal Arial', Helvetica, sans-serif;
    font-size: large;
    font-weight: bolder; 

    /* Reduce or increase first padding parameter from 2em to 1.5em or vice-versa when necessary 21.06.2026 */
    padding: min(1.5em, 15%);
    border-radius: 1em;
}


body{
    padding: 1em;                                       /* spacing around the page */
    background-color: var(--base-white);

    /*  user-select: none;                                  20.06.2026 - Disables text highlighting */
    /* -user-select: none;                                  20.06.2026 - Disables text highlighting */
    /* -webkit-user-select: none;                           Safari */
    /* -ms-user-select: none;                               IE/Edge */
}


nav{
    margin: 1.5em auto 0.3em auto;                      /* top right bottom left | adjust height and width of menu grid */
    width: min(1000px, 100%);                           /* nav bar grow but not over 100 percent */
    height: auto;                                       /* Updated: 15062026 - for height */

    /* Following inclusion into logo-header, retain menu styles for original menu options, 05.07.2026 */
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;    
    font-size:medium;
    font-weight:lighter;  
}

nav ul{
    display: flex;                                      /* turn the list into a horizontal role */
    align-items: center;
    list-style-type: none;                              /* remove the default bullet point  */
    gap: 2em;
      
/* NOT using now
    border-radius: 0.3em;
    color: var(--orange-color);  
*/
}


nav li:first-child{                                     /* push first link of the menu to the left */
    margin-right: auto;                                 /* push all the other items to the right */
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    /* font-weight: lighter; */
}


nav a {
    text-decoration: none;                             /* remove the default underline */ 
    border: 1px dashed var(--base-white);              /* Updated 15062026 - styling the menu button */
    background-color: var(--orange-color);
    color: var(--base-white);
    padding: 5px 15px 5px 15px;                        /* NOTE: fix responsive menu overflow */

    border-radius: 0.4em;
}

nav a:hover {                                          /* Old menu highlight - return commenter - show that the link is clickable on hover */
  /* text-decoration: underline; */
  background-color: var(--black-color);
} 


/* Header 'article (Slider/Banner)' and body 'section (Main Gallery)' styles follows */

section {                                      /* format the header with spacing, etc. */
    margin: 2em auto;
    width: min(75em, 100%);
    background-color: var(--gallery-bg);
    padding: min(2em, 15%);
    border-radius: 1em;
}

/* not using now */
/*  header img {                                        
    max-width: 100%;
    border-radius: 1em;
    object-fit:cover;
    object-position: bottom;
}
*/

/*  Style the slider 05.07.2026  */

 .slider-container {         /* 'article' class '.slider-container' applied thus formating the header with spacing, etc. */
    margin: 1.5em auto;
    width: min(75em, 100%); 
    height: 14em;            /* Controls the height of the slider wrapper, so to say */
    background-color: var(--gallery-bg);
    
    /* padding: min(0.5em, 15%); */

    padding: 1.3em 1.3em 0%;
  
    border-radius: 1em; 
} 

.slider-container{
    position: relative;

    /* width: 60%; height: 40rem; */
    /* margin: 2em auto; width: min(75em, 100%); */

    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}

/* style the slider div that holds all the slides and control its operation */
.slider {
    position:relative;
    width: 400%; height: auto;               /* set to 400 per cent because we have five slides */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
   /* animation: 20s cubic-bezier(1, 0.95, 0.565, 1) slider infinite; */
    animation: 10s step-start infinite;     /* use 'step-start' to still the slide, instead of 'slider' in keyframes that moves it */
    
   /* alternative height to .slider-container */
   /* overflow: hidden; */
}

/* style the .style class  
.slider {
    position: relative;
    min-width: 75%;
    height: 75%;
} */

/* style the image tag, the image fill the entire slide ensuring it covers the entire dimensions
.slider img {
    width: 100%;
    height: 100%;
}  */

/* Custom 1: ensure the image scales properly */
.slider img { 
    width: 100%;
    height: auto; 
    display: block;

    background-color: var(--base-white);  /* Change background colour to white to show gabs between images on black background */
}

/* apply padding to banner/slider imgages 8.07.2026 */

.slideclass1 img {
    /* border-color: var(--base-white); */
    padding-left: 0.1em; 
    padding-right: 0.1em;
}

.slideclass2 img {
    /* border-color: var(--base-white); 
    margin-left: 0.2em; */
    padding-right: 0.2em;
}

.slideclass3 img {
    /* border-color: var(--base-white); 
    margin-left: 0.4em; */
    padding-right: 0.2em;
}

.slideclass4 img {
    /* border-color: var(--base-white); 
    margin-left: 0.4em; */
    padding-right: 0.1em;
}

.slideclass5 img {
    /* border-color: var(--base-white); 
    margin-left: 0.4em; */
    padding-right: 0.1em;
}


/* style the caption: 'pending-onhold' */
.slider-s .caption {
    position: absolute;
    left: 0;
    bottom: 5%;
    font-size: 2rem;
    font-weight: 100;
    color: var(--base-white);
    text-transform: capitalize;
    background:rgba(0, 0, 0, 0.348);
    backdrop-filter: blur(10px);
    padding: 1rem 5rem;
    border-radius: 0 2rem 2rem 0;
}


/* Do animation effects: 'onhold' */
@keyframes slider {
    0% {left: 0;}

    20% {left: 0;}

    25% {left: -100%;}

    35% {left: -100%;}

    40% {left: -120%;}

    55% {left: -155%;}

   /* 60%{ transform: translateX(-300%);}

    75%{ transform: translateX(-300%);}

    80%{ transform: translateX(-400%);}

    100%{ transform: translateX(-400%);} */
}


/* Start CSS grid framework for the photo-image gallery */
section#home-gallery {
    background-color: var(--gallery-bg);      /* dark green as in wrapper */
}
   

.grid-container {
    margin-top: 1em;                                /* give the gallery some breathing space */
    margin-bottom: 1em;
    display: grid;                                  /* turn this container into a CSS layout */
    width: 100%;                                    /* strecth the full width of the section */
    grid-template-columns: repeat(4, 1fr);          /* we want to have four columns of one fraction */
    grid-template-rows: 1fr 1fr;                    /* we want to have two rows of one fraction */ 
    grid-template-areas:                            /* arrange the grid in order of 3 columns on the web as defined in img tags using strings to hold the identifiers */
    "img-1 img-1 img-2 img-3"                       /* image 1 spans over two rows and two columns - one big column on the left */
    "img-1 img-1 img-4 img-5";                      /* using the grid area names, we can rearragne the each grid/image to our liking */

    gap: 2em;

    /* Update: 15-06-2026 - grid-container background -
    background-color: var(--brown-color);
    border: 1px solid var(--brown-color);
    padding: 1em;   
    border-radius: .5em; */
}

.grid-container img {                               /* controls the appearance of the photos - style the images now */
    height: 100%;                                   /* fill out entire grid areas */
    width: 100%;                                    /* stretch the full width of this section container  */
    border-radius: .5em;
    transition: 100ms ease;                         /* transition for a visual appeal and effect */
    border: 0.3em solid var(--base-white);          /* Updated: 15-06-2026 - turn each border to white */
    filter: contrast(100%);                         /* make contrast 100 per cent */
}

.grid-container img:hover {                         /* when a visitor hover over an image, it will be slightly bigger */
    scale: 1.10;                                    /* we want to increase the scale by making it 1.05 */
    border: 0.1em solid var(--base-white);          /* Updated: 15-06-2026 - turn each border to white */
    cursor: pointer;
}





/* 27-06-2026: Generate caption content for each image in the photo gallery, i.e. img-A, img-B, img-C, etc.    */

/* - - - - - 27.06.2026: Start captioning people images of the homepage  - - - - - - -  */

.grid-container figure {
    /*  For the figure tag, the browser (css) will ignore the default property values for the first three properties. */
    margin: 0; padding: 0; /* display: contents;   - not accepted by grid - */   /* Force the browser to ignore the <figure> tag so the imgages act as a direct child of the css grid. */

    width: auto; text-align: justify; border:none solid greenyellow;  /* apply some visual style to the main figure. */
}

.grid-container figure .img-A {      /* Resize the image to fill its Container.ensure imges  */
    width: 100%;                     /* Ensure the <img> tag is scaled to strictly fill the <figure> container by resizing.  */
    height: auto;
    object-fit: cover;               /* ensures image fill the grid area without distortion */
    display: block;
}

/*  figcaption {
    font: smaller sans-serif;
    text-align: centre;
    color: var(--base-white);
    padding: 1em;
} */


.grid-container .img-A::after
{
    margin: 0;
    padding: 0;

    margin-top: 0.1em;           /* Breathing room between img and caption */

    content:"An hydrating tattooed portrait, new inhabitants of the ruins, left and top right, bottom left - a sculpture depicting a pastoral role in the 12th century, old Abbey Church, DA17. Click over...";
   
    color:var(--base-white);
    font-size: 0.9em;

    text-align: left;                             /* Center home gallery caption on 2 June 2026 @ 07:05 */

    width: max-content;
    position: absolute;
    display: inline-block;                         /* keeps container tight around the image */
    overflow: hidden;                              /* clean edges if you use hover transition */
}

/* ensure the image scales properly */
.img-A img { 
    display: block;
    /* width: 10%;
    height: 10%; */
}

/* ---------- End Fig. A: Main left image -- --- - - - - - */





/* apply this @ media rules when screen is 988px or smaller - note, probably not use now, except the below media query! - */
/* @media(max-width: 988px){
    header {
        text-align: center;
    }

    header .text-container {
    padding-top: 0;
    }
} */



/*  Apply this @ media rules when screen is 640px or smaller, hide all nav links with display property */
@media(max-width: 640px){
    nav li {
       display: none;
    }

/* Display only first and last child links for mobile device users */
    nav li:first-child,     
    nav li:last-child {
        display: block;
    }


/* Apply this @ meida rules when the creen is 640px or smaller: show responsive captiion.  */

  .grid-container .img-A::after
  {
    margin: 0;
    padding: 0;

    margin-top: 0.1em;           /* Breathing room between img and caption */

    content:"An hydrating tattooed art & new inhabitants, a monk's sculpture & old Abbey.";
   
    color:var(--base-white);
    font-size: 0.9em;

    text-align: right;                             /* Center home gallery caption on 2 June 2026 @ 07:05 */

    width: max-content;
    position: absolute;
    display: inline-block;                         /* keeps container tight around the image */
    overflow: hidden;                              /* clean edges if you use hover transition */
  }

}


/* The footer content syles as follows  */
.footer {
    margin: 1em auto;
    width: min(75em, 100%);
    background-color: var(--black-color);
    padding: min(1em, 15%);
    border-radius: 1em;
    color: var(--base-white);
}

.footer p {
   font: 0.8em/normal Arial, Helvetica, sans-serif;
}

/* text decoration modified, removing text underline - 21.06.2026 */
.footer a {
    color: var(--base-white);
    text-decoration:none;
    background-color: var(--gallery-bg);

/* Restyle contact to match X  */
    font-size:large;
    font-weight:bolder;

    text-align: justify;
}


.footer a:hover {
        border-bottom: 1px;
        color: var(--orange-color);
        text-decoration: none;
}

.footer img {
    position: absolute;
}