/* This code uses media queries to adjust the layout for smaller screens. */
/* When the screen width is 768 pixels or less, the top section and footer will be arranged in a column instead of a row, and elements like the burger menu and content pane will be resized accordingly. */

/* The design is: */
/*   Top section: logo top left, header top remainder, background image only on home page; on other pages the burger bar and title move to this top line
      Menu: burger bar menu navigation with Page title inline
      Main part of page: a content pane for text
      Footer: a logo on the bottom left, a centralised line of text  and a logo on the right */

/* Ensure brower works for box-sizing command in CSS. Applies to:
/*   Safari (< 5.1) 
/*   Chrome (< 10)  
/*   Firefox (< 29) */

/*html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  } */

/* Could be replaced by 2 sections above but messes up main formatting */
* {
    box-sizing: border-box; 
}


body {
    font-family: Helvetica, sans-serif;
    margin: 30px;
    padding: 0;
    color: #003399;
}

/* Add a smaller text font to use in a span */
.small-text {
    font-size: 0.7em; /* Adjust the size as needed */
}

/* HEADER NO LONGER USED */
/*header {
    display: flex; /* Flex container */
/*    flex-wrap: wrap;
}*/

.IPSAC_logo {
    display: flex;/* Flex container */
    flex: 0 0 20%;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    margin: 10px 0 0 0;
}

.IPSAC_logo img {
    width: 100px;
    height: auto;
    max-width: 100%; /* Ensure it doesn't exceed the container's width */
}

.home-page .header-bg {
    display: flex;/* Flex container */
    flex: 1 0 80%; /* flex-grow flex-shrink flex-basis */
    background: url('../images/site/homeimage.jpg') no-repeat center center;
    background-size: cover;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    font-family: Georgia, sans-serif;
    text-align: center;
    color: #000000;
    padding: 10px;
}

/* The background image only displays on the home page - this section is the header design without the background image for other pages */
.other-page header {
    display: flex; /* Flex container */
    justify-content: space-between;
    align-items: center;
    padding: 10px;
/*    background-color: #003399; /* Optional: Add a background color */
}

.other-page .burger-bar {
    flex: 1; /* Expand to take up remaining space */
    position:sticky; /* Make it stay in sight */
    top: 0; /* Stays in sight at the top */
    z-index: 1000; /* sits on top of all other elements on the page */
    overflow: hidden;
    justify-content: flex-end; /* Align menu items to the right */
    background-color: #003399;
}

.burger-bar {
    display: flex; /* Burger bar menu banner can extend across page width */
    position:sticky; /* Make it stay in sight */
    top: 0; /* Stays in sight at the top */
    background-color: #003399;
    padding: 0 5px; /* reduce vertical padding so bar is not too thick */
    align-items: flex-start;
    width: auto; /* Set width based on content (100%=full width)  */
    overflow: hidden;
    flex-direction: row; /* Align items in a row - editor doesn't like row */
    justify-content: center; /* Ensure space between items */
}

.burger-icon {
    font-size: 24px;
    cursor: pointer;
    color: white;
    margin: 2px 10px 2px 2px; /* With justify-content in burger-bar section, a value of auto will ensure there is space between the icon and the title */
    z-index: 1;
}

/* Website title in burger bar */
.header-title {
    display: flex; 
    flex: 1; /* Expand to take up remaining space (flex-grow flex-shrink flex-basis) */
    justify-content: center; /* Centre the title */
    text-align: center;
    color: white; /* so text visible on blue background */
}

.header-title .content {
    font-size: 20px;
    font-weight: bold;
/*    align-items: start; not needed as parent covers this alignment now */
    color: white;
    padding: 2px;
}

.burger-bar ul {
    list-style-type: none;
    padding: 0; /* padding does not overlap next element padding */
    margin: 0; /* margins for adjacent elements will overlap each other */
    display: none; /* Hide menu initially */
    flex-direction: column;
    align-content: flex-start;
    width: auto; /*Allow width to be determined by content */
}

.burger-bar li {
    margin: 5px 0; /* margins for adjacent elements will overlap each other */
}

.burger-bar a, .burger-bar a:visited, .burger-bar a:active, .burger-bar a:link {
    color: white;
    text-decoration: none;
    display: block;
    padding: 5px;
/*    background-color: #003399; */
    border-radius: 5px;
    width: auto; /* Allow width to be determined by content */
    max-width: 100%; /* Ensure it doesn't exceed the container's width */
}

.burger-bar a:hover {
    color: white;
    text-decoration: none;
    background-color: #555;
}


main {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; /* Add this line to align elements vertically */
}

.content-pane, .content-panepublic {
    margin: 20px 100px;
    text-align: justify;
    padding: 0;
}

/* The title should be centred, bold and big */

.content-pane .title, .content-panepublic .title {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    max-width: 100%;
}

/* START OF FORMATTING FOR GALLERY */

/* Creates a flex box to hold the thumbnails or main photo. Flex box re-sizes according to how many images are inside it */
.image-container {
    display: flex;
    flex-wrap: wrap;
/*    gap: 10px; */
    align-items: center;
    justify-content: space-between; /* Space out images */
}

/* For the gallery-single page - 1 photo on page with PREV and NEXT buttons and a caption all in a row above the image */
.image-display {
    flex-direction: column;
    align-items: center;
    max-height: 95%;
    width:100%;
}

.image-display div {
    display: flex;
    justify-content: space-between;
    width: 80vw;
    align-items: center;
}

.left-button .right-button .image-caption {
    display: inline-block;
    margin: 10px; /* Adjust the margin as needed */
}

/* For gallery pages showing multiple images with captions - allows a maximum of 3 pics per line (2 pics per line on small screens - see @mediaquery section) */
.image-container figure {
    margin: 5px;
    text-align: center;
    flex: 1 1 auto;
    box-sizing: border-box;
    max-width: calc(33.33% - 40px); /* Ensure 3 figures fit in one row with margins considered */
    min-height: 20vw;
}

.image-container img {
    max-width: 100%; /* Expand to max allowed by image-container */
    max-height: 80vh;
    height: auto;
    border: 5px solid #D4AF37; /* Add a gold border/frame */
    padding: 5px; /* Optional: add padding inside the frame */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Optional: add a shadow for a 3D effect */
}

.image-container figcaption {
    margin-top: 8px;
    font-style: italic;
    color: #555;
    max-width: 100%; /* Ensure the figcaption does not overflow */
    overflow-wrap: break-word; /* Break long words to fit within the container */
    white-space: normal;
    display: block;
}
/* END OF FORMATTING FOR GALLERY */

/* START OF TIMELINE FORMATTING */

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  z-index:1; /* used with burger-bar z-index to ensure timeline elements scroll behind the burger bar as the timeline moves up the page */
  max-width: 800px;
  margin: 0 auto;
}

/* Stretch the timeline to fill the height */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #003399;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content (box around timeline bubble) */
.container {
  padding: 10px 20px; 
  position: relative;
  background-color: inherit;
  width: 50%;
  z-index:1; /*Ensure it stays behind sticky burger bar */
}

/* The circles on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #439538;
  top: 15px;
  border-radius: 50%;
  z-index: 2; /*Ensure it's behind sticky burger bar but in front of container */
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0; /* the element has no height but will be visible due to borders */
  position: absolute;
  top: 22px; /* position it 22px from top of container */
  width: 0;
  z-index: 1; /* controls overlay (z-axis (stacking) of elements on timeline */
  right: 30px; /* position it 45px from right of container (& scroll bar) */
  border: medium solid white; /* border width of medium is responsive */
  border-width: 10px 0 10px 10px; /* works with the border-color property... */
  border-color: transparent transparent transparent #003399; /*...to create the arrow; the right border is invisible */
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent #003399 transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -16px;
}

/* The actual content - add scroll bars and fix event balloon height */
.tlcontent {
  padding: 0 15px;
  background-color: #f1f1f1;
  position: relative;
  border-radius: 6px;
  height: 150px; /* Fixed height */
  overflow-y: auto; /* Adds vertical scroll bar if content exceeds height */
}

/* END OF TIMELINE FORMATTING */

/* START OF FORM FIELDS FORMATTING */

/* Error message styling */
.error-message {
    color: red;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Response message styling */
.response-message {
    color: green;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Form styles - not quite full width of container and grey background with rounded corners. Small inner margin between edge of form and content */
form {
    max-width: 80%;
    margin: 5px;
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 5px;
}

/* Put a bit of space under and bewtween each div section on the form */
form div {
    margin-bottom: 15px;
    margin-left: 5px;
}

/* Make the default label class so it does not take up the full width of its container */
label {
    display: inline;
    text-align: left;
    vertical-align: top;
    margin-right: 10px; /* Add some margin to separate from the input */
}

/* Make the label take up the full width of its container */
label.fullwidth {
    display: block;
}

/* For input boxes, give them a border and make them a reasonable height and full width of container. Also note that form fields (including input, textarea boxes, select dropdowns and options etc) do not inherit the font styles from the parent, so force this */
input {
    border: 1px solid #ccc;
    border-radius: 4px;
    height:2em;
    width: 100%;
    font-family: inherit; /* Ensures it takes the font from the parent */
}

/* Define medium and small input boxes (eg for email and captcha) */
 input.text-med {
    width: 50%;
}

 input.text-small {
    width: 25%;
}

/* Make any large text box (eg for message text on Contact Us) full width */
textarea {
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    height: 8em;
    font-family: Helvetica, sans-serif;
}

/* Prevent the automatic browser-generated icons for saved password and look at hidden entry from overlaying each other */

input [type="password"] {
    padding-right: 2em; /* Ensure space for the eye icon */
}
.input-password .password-toggle {
    position: absolute;
    right: 10px; /* Adjust position as needed */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

button {
    padding: 0.75em;
    margin: 5px;
    background-color: #003399;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button[type="reset"] {
    background-color: #ccc;
}

button:hover {
    background-color: #002277;
}

a:link	{
	font-size: 1em;
	font-family: "Helvetica";
/*	color: #439538; */
    color: #008000;
	font-weight: bold;
	text-decoration: underline;
	line-height: 14pt;
/*	text-decoration: none; */
	}

a:visited	{
	font-size: 1em;
	font-family: "Helvetica";
	color: #439538;
	font-weight: bold;
	line-height: 14pt;
/*	text-decoration: none */
	}

a:active	{
	font-size: 1em;
	font-family: "Helvetica";
	color: #FF0000;
	font-weight: bold;
	line-height: 14pt;
	text-decoration: none
	}
a.is-red	{
	font-size: 1em;
	font-family: "Helvetica";
	color: red;
	font-weight: bold;
	line-height: 14pt;
	text-decoration: none
	}

/* END OF FORM FIELDS FORMATTING */


/* START OF CIRCLES FORMATTING */

/* The circles html tag is used to enclose the circle section */
/* Make it a flex container to hold this section*/

circles {
    display: flex;
    justify-content: center;
    align-items: center;
/*    height: 100vh; /*100% of viewport height */
/*    background-color: #f0f0f0; /* light grey */
    font-family: Helvetica, sans-serif;
    padding: 0;
/*    color: turquoise; */

}

/* Membership clock-face styling
   Create a circular space like a clock-face to hold the link splodges */
/* box-shadow arguments are: horizontal then vertical shadow in px of orig shape. Then optional blur radius in px (higher number = more blurry). Then optional spread radius in px (higher number - wider the shadow. Then optional colour (the 4th value is transparency; 0=clear 1=opaque */

.circle-container {
    position: relative;
    width: 80vh;
    height: 80vh;
    border-radius: 50%; /* radius in x & y directions = 50% of container */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff; /*white */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* horiz - vertical shadow - colour*/
    margin: 0 auto;
}

/* Now for the clock-face splodges (back up design in case images don't load) */
.circle-item {
    position: absolute;
    width: 80px;
    height: 80px;
    color: #003399;
/*    border-radius: 50%; This makes the text label in a circle too! */
    z-index:1;
    padding-bottom: 40px; /* Add padding to create space for the text */
}

/* And now add the formatting for the image which goes over each splodge */
.circle-item img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the image covers the circle dimensions without squashing or clipping */
    border-radius: 50%;  /* and make it a circular image */
    z-index:2;
}

/* Labels for each of the clock-face splodges */
.circle-text {
    position: absolute;
    bottom:-5px; 
    color: #003399;
    font-size: 0.8em;
    text-align: center;
    z-index:3;
}

/* Make the cursor into a hand over the circle image or text */

.circle-item:hover, .circle-text:hover {
    cursor:pointer;
}

/* Pop-up box to show the detailed text for each splodge link */

.details-box {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* make it appear in the centre */
    overflow-y: scroll; /* Adds vertical scroll bar if content exceeds height */
    max-width: 50%;
    max-height: 50%;
    padding: 10px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.details-box .box-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

/* Calculate the position of each splodge on the circle */
/* nth-child is a pseudo-item; it acts on the nth element in a group (under a parent element). top and left define where the top and left sides of the element are positioned respectively. The code below puts the splodges in clock face positions: 1st item (12 o'clock) is 5% down from the top of the clock-face circle and (40% from the left (eg aligned with the middle  of the clock face. Note that the 5 item has been moved in slightly as the text is too long to fit without hitting the edge of the clock face */

.circle-item:nth-child(1) { top: 5%; left: 43%; }  /* 12:00 Reg Diving */
.circle-item:nth-child(2) { top: 25%; left: 75%; } /* 14:00 Sites */
.circle-item:nth-child(3) { top: 60%; left: 75%; } /* 16:00 Online */
.circle-item:nth-child(4) { top: 80%; left: 43%; } /* 18:00 Friendly */
.circle-item:nth-child(5) { top: 60%; left: 10%; } /* 20:00 Low Cost */
.circle-item:nth-child(6) { top: 25%; left: 12%; } /* 22:00 Social */ 
.circle-item:nth-child(7) { top: 45%; left: 43%; } /* Middle - instructions */ 

/* Transform makes an element move, rotate, skew etc Translate moves the element from its current position in the x and y directions specified. Use this function to move the text for each splodge to where it can be read */
/*   transform: matrix(1, -0.3, 0, 1, 0, 0); ScaleX-ScaleY-SkewX-SkewY-TranslateX-TranslateY */
/*    transform: translate(0%, -50%); */
/*    transform: rotate(20deg); /* another option +ve or -ve */
/*    transform: scaleX(0.5); /* info: another option x*width */
/*    transform: scaleY(2); /* info: another option y* height*/
/*    transform: scale(0.5,2); /* info: another option x*width & y*height */
/*    transform: skewX(20deg); /* info: another option top moves xdegs left */
/*    transform: skewY(-20deg); /* info: another option LHS moves xdegs down*/
/*    transform: skew(x,x); /* info: another option xdegs left and down*/
/*    transform: matrix(); /* info: another option combines all the above!*/

/* END OF CIRCLES FORMATTING */




footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #fff;
}

.footer-logo {
    flex: 0 0 15%;
}

.footer-logo img {
    max-width: 100%;
    max-height: 120px;
    height: auto;
}

.privacy-policy {
    flex: 0 0 65%;
    text-align: center;
    line-height: 120px;
    text-decoration: none; /* only show underline to indicate it is a link when when the mouse hovers over the text (see below) */
}

.privacy-policy:hover {
    text-decoration: underline;
}

/* SSL seal in footer to show this is a secure site */
.sslseal {
    display: flex; 
    flex: 1; /* Expand to take up remaining space (flex-grow flex-shrink flex-basis) */
    justify-content: flex-end; /* Centre the title */
}

/* Make the page responsive using Media Queries */
/* Amazon Fire HD8 is 800x1280. iPhoneSE is 320x568px */
@media (max-width: 768px) {

/* Smaller screens need less margin all round and arrange the flex-items in columns so content loads down the page, not across */    
body {
    margin: 15px;
}    
    header {
        flex-direction: column;
    }

    .IPSAC_logo {
        flex: 0 0 100%;
        margin: 0;
        text-align: center;
        padding: 7px;
    }

    .header-bg {
        flex: 0 0 100%;
        padding: 30px 0 0 0; /* top right bottom left */
}

    .content-pane, .content-panepublic {
        margin: 15px;
}


/* START OF FORM FORMATTING FOR SMALLER SCREENS */
form {
    max-width: 100%;
    padding: 5px;
    border-radius: 5px;
}
/* END OF FORM FORMATTING FOR SMALLER SCREENS */




/* START OF GALLERY ALBUM PAGE FORMATTING FOR SMALLER SCREENS */

.left-button, .right-button .image-caption {
    margin: 5px; /* Adjust the margin as needed */
}

.image-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

.image-container figure {
    margin: 5px;
    text-align: center;
    flex: 1 1 auto;
    box-sizing: border-box;
    max-width: calc(50.0% - 30px); /* Ensure 2 figures fit in one row with margins considered */
    min-height: 50vw;
}

/* END OF GALLERY ALBUM PAGE FORMATTING FOR SMALLER SCREENS */


/* START OF CIRCLES FORMATTING FOR SMALLER SCREENS */
/* Create a circular space like a clock-face to hold the link splodges */
/* for smaller screens, ensure the height does not exceed the width so the circle can remain in view without scrolling */
.circle-container {
    width: 80vw;
    height: 80vw;
}

/* Now for the clock-face splodges (back up design in case images don't load) */
/* for smaller screens, ensure the images are a bit smaller */
.circle-item {
    width: 60px;
    height: 60px;
}

/* Labels for each of the clock-face splodges */
/* for smaller screens, ensure the label can be wider so it still fits on 2 lines. And specify a height so the overflow property prevents cropping */
.circle-text {
    bottom:-15px;
    width: 70px;
/*    border: 1px solid #003399; */
    height: 40px; /* must be specified so overflow works */
    overflow: visible;
}

/* Pop-up box to show the detailed text for each splodge link */
/* for smaller screens, allow the box to be a bit bigger */
.details-box {
    top: 30%;
    left: 30%;
    transform: translate(-20%, -20%);
    max-width: 80%;
    max-height: 70%;
}

/* Calculate the position of each splodge on the circle */
/* for smaller screens, move the 3rd item in slightly and the 4th (bottom) item up slightly to fit in the labels */
.circle-item:nth-child(1) { top: 5%; left: 40%; }
.circle-item:nth-child(2) { top: 25%; left: 65%; } 
.circle-item:nth-child(3) { top: 55%; left: 65%; }
.circle-item:nth-child(4) { top: 75%; left: 40%; } 
.circle-item:nth-child(5) { top: 55%; left: 15%; }
.circle-item:nth-child(6) { top: 25%; left: 15%; }


/* END OF CIRCLES FORMATTING FOR SMALLER SCREENS */


}

/* Media queries - Responsive timeline on screens less than 600px wide */
/* Amazon Fire HD8 is 800x1280. iPhoneSE is 320x568px */

@media screen and (max-width: 600px) {

/* START OF GALLERY ALBUM PAGE FORMATTING FOR V SMALL SCREENS */
.image-container figure {
    min-height:20vw;
}
/* END OF GALLERY ALBUM PAGE FORMATTING FOR V SMALL SCREENS */



/* START OF TIMELINE FORMATTING FOR V SMALL SCREENS */

/* Place the timelime to the left */
  .content-pane .timeline::after, .content-panepublic .timeline::after {
    left: 31px;
  }

/* Full-width containers */
  .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

/* Make sure that all arrows are pointing leftwards */
  .container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent #003399 transparent transparent;
  }

/* Make sure all circles are at the same spot */
  .left::after, .right::after {
    left: 15px;
  }

/* Make all right containers behave like the left ones */
  .right {
    left: 0%;
  }

/* END OF TIMELINE FORMATTING FOR V SMALL SCREENS */


}