@charset "UTF-8";

/* set some variables to be reused */
:root {
	--backblue: #DCEAF7; /* background blue from ppt */
	--hlblue1: #A6C5D7; /* highlight blue for selected */
	--hlblue2: #C5DAE5; /* highlight blue for hover */
	--hoverblue: #F0F5FA; /* lighter blue for hover */
    --txtblue1: #156082 ; /* text blue standard */
	--mw: 1000px ; /* the maximum width we allow for any element*/
	--cwp1: 90% ; /* what percentage to make the item when there is only one inside*/
	--cwp2: 45% ; /* and 2*/
	--cwp3: 30% ; /* the width of the individual item for 3 */
	--dw: 800px ; /* below this we want the details parts to go into a single column */
	--dwp1: 0.60 ; /* width for the text in the d block. No percent because I need it for a calc */
	--dwp2: 0.30 ; /* width for the picture in the d block*/
	/*	--cwmax: 300px;*/ /* mw * cwp */
	/*--cwmin: 180px; */ /* 600 * cwp3 */ /* calc(var(--cwp3)*600) */
	--nwmin: 200px; /* minimum width for the nbox */
	--nw1p: 32%; /* this is how wide we make it when it only contains one item */
	/*--nw1max: 310px; */ /* nw1p * mw */ /* calc(var(--nw1p) * var(--mw)) */
	--nw2p: 64.5%;
	/*--nw2max: 620px; */ /* nw2p * mw */ /* calc(var(--nw2p) * var(--mw)) */
	--nw3p: 100%;
	/*--nw3max: 1000px; */ /* nw3p * mw */ /* calc(var(--nw3p) * var(--mw)) */
}

/* set the styles for my document. */

* {
	box-sizing: border-box /* so things don't go wrong with padding ?? */
}

body {
	font-family: Arial, sans-serif;
	background-color: var(--hoverblue);
	color: var(--textblue1);
	margin: 0;
	padding: 0px 0px;
}

.padlr {
	padding-inline: 5%;
	margin-right: 0px;
}

/* styles for background colours */
.backwhite {
	background-color: #FFF;
}

.backblue {
	background-color: var(--backblue);
}

.backblue1 {
	background-color: var(--hlblue1);
}

.backblue2 {
	background-color: var(--hlblue2);
}


/* style to centre the element in the page and push footer down */
.cpage {
	max-width: var(--mw);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Push the footer to the bottom of the page */
main {
    flex: 1;
}

/* Footer styling */
.site-footer {
    padding: 20px 0;
    text-align: center;
}

/* Puts the LinkedIn and Email links on the same line */
.site-footer .footer-links {
    display: flex;
    justify-content: center;
    gap: 15px; /* Adjust spacing between the links */
    margin-bottom: 5px; /* Space between the two lines */
}

.site-footer .footer-text small {
	color: var(--txtblue1);
    font-size: 0.9em;
}

/* sneaky */
div.asdfgh > span:nth-child(2) {
	display: none;
}

/* previous and next links, this css pushes the next across to the right.  This is not part of the footer, it goes
under the text for the offering */

.pn-container {
	display: flex;
	padding-bottom: 0.5em; /* give it some space */
}

.next-link {
	margin-left: auto; /* pushes this to the right irrespective of if previous is there*/
}


/* simple style that sets to be 100% width, but crops rather than scaling */
.imgcrop {
	overflow: hidden;
	width: 100%;
	height: auto;
}

.imgfit img {
	object-fit: contain;
	max-width: 90%;
	height: auto;
	display: table;
	margin: 0 auto;
}

/* for the graphic at the top */

.container {
  display: flex;
  align-items: center; /* Vertically centers both elements */
  max-width: var(--mw);        /* Takes maximum allowable width */

}

.side-image {
  flex: 1;             /* Takes up the remaining 1/3 space */
  max-width: 30%;  /* Ensures it stays within ~1/3 width */
  max-height: 200px;   /* Never taller than 200px */
  width: auto;         /* Maintains aspect ratio */
  height: auto;        /* Maintains aspect ratio */
  object-fit: contain; /* Prevents distortion */
}

.side-text {
  flex: 2;             /* Takes up 2/3 of the container width */
  width: 60%;      /* Explicitly maps to 2/3 viewport width */
  text-align: right;   /* Right-aligns the text */
  color: var(--txtblue1); 
  font-weight: bold;
  /* Scales font with viewport height, but enforces a 16px minimum */
  font-size: clamp(16px, 10vw, 48px); 
}


/* Also need something so that text doesn't go wider than the graphic */
.textdiv {
	width: 100%;
	max-width: var(--mw);
	text-align: left;
	vertical-align: top;
	color: var(--txtblue1);
}

.biggertext {
	font-size: 1em;
}

.smallertext {
	font-size: 0.85em;
}

.mediumtext {
	font-size: 1em;
}

/* no indent for bullets */
.ul-left {
	padding-left: 1em;
	margin-left: 0;
}

.ul-left li {
	list-style-position: outside;
}

/* for a responsive column layout */
 .columns-container {
    display: flex;
    gap: 30px;
	/* padding: 20px; */
    /*margin: 0 auto; */
}

/* Each column takes up equal space */
.column {
    flex: 1;
    /* padding: 15px; */
}

/* Responsive behavior: stack columns on smaller screens */
@media (max-width: 768px) {
    .columns-container {
        flex-direction: column;
    }
}
	
/* to get a bit of extra space after some paragraphs*/
.spaceafter {
	margin-bottom: 0.5em;
}	
	
/* kill margin before and after */
.notbmargin {
	margin-top: 0;
	margin-bottom: 0;
}