/* Copyright David Harris 2025 */
/* theme colour: hex: #021953, rgb: 0, 0, 102) */

/* REVISIONS */
/* 5-0-0 updated to suit PHP/SQL format pages*/
/* 5-1-10 CSS review*/
/* 5-2-0 general review */
/* 6-0-0 general review */
/* 6-1-0 colour variables added */
/* 6-2-0 navigation menu structure updated */
/* 7-0-0 general review */

/* ~~~~~~~~~~ colour variables ~~~~~~~~~~ */
:root {
/*	BASE: text and icons: */
/*	BLANC normal background - contrast: 16.6, WCAG Rating: AAA	*/
/* min contrast requirements: AA: normal text 4.5:1 large text 3:1; AAA: normal text 7:1 large text 4.5:1 */

	--NOIR: #000000;
	--BLANC: #FFFFFF;
	--BASE: #021953;
	--SHADOW: #303030;
	--HILITE: #B30000; /* red  -  white contrast 7.2:1 */
}

 * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Finger Paint", cursive;
	color: var(--BLANC);
	font-size: 1rem;
	line-height: 1.5rem;
}

button, input, select {
	font-family: inherit;
}

#pageHeader, nav, #popImage, #popMap, #popMap, .mapDiv, .mapListDiv, .mapPicDiv, .txt75char {
	background-color: var(--BASE);
}

#galleryGrid, .panoZone, #indexZone, .indexDiv, .tooltip, .mapDiv {
	background-color: transparent;
}

/* ~~~~~~~~~~~~~~~~~~~~~~ PAGE TRANSITIONS ~~~~~~~~~~~~~~~~~~~~~~ */
@view-transition {
	navigation: auto;
}

::view-transition-group(root) {
	animation-duration: 2s;
}

/* ~~~~~~~~~~~~~~~~~~~~~~ FONTS ~~~~~~~~~~~~~~~~~~~~~~ */
@font-face {
	font-family: 'Finger Paint';
	font-style: normal;
	font-weight: 400;
	src: local(''),
	url('../Fonts/finger-paint-v10-latin-regular.woff2') format('woff2'), 
	url('../Fonts/finger-paint-v10-latin-regular.woff') format('woff');
	font-display: swap;
}

h1, h2, h3, .button {
	font-weight: bold;
	text-align: center;
}

h1 {
	font-size: 1.75em;
	line-height: 2.7rem;
}

h2 {
	font-size: 1.1em;
	line-height: 1.7rem;
	margin: 20px auto 0 auto;
}

h3 {
	font-size: 1rem;
	margin: 20px auto 0 auto;
}

p {
	margin-bottom: 20px;
	text-wrap: pretty;
}

a {
	padding: 5px 12px 5px 12px;
	border-radius: 8px;
}

.fas {
	font-size: 1rem;
	color: var(--BASE);
	background-color: transparent;
}

.fasML {
	margin-left: 6px;
}

.fasMR {
	margin-right: 6px;
}

.fa-external-link-alt {
	color: var(--BLANC);
}

.txt75char {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: 75ch;
	margin: 0 auto 0 auto;
	padding: 10px;
}

.centerTxt, .centerTxt p {
	text-align: center;
}

/* ~~~~ buttons ~~~~ */
button, .linkBtn {
	color: var(--BASE);
	background-color: var(--BLANC);
	font-size: 1rem;
	font-weight: normal;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: 
		inset 1px 1px 2px #888888, /* top outer */
		inset 2px 2px 5px #DCDCDC, /* top inner*/
		inset -1px -1px 2px #585858, /* bottom outer*/
		inset -2px -2px 5px #696969, /* bottom inner*/
		4px 4px 8px var(--SHADOW);
}

button {
	min-height: 36px;
	min-width: 64px;
	padding: 0 10px 0 10px;
	border: none;
}

.linkBtn {
	padding: 5px 12px 0 12px;
	text-decoration: none;
}

button:hover, .linkBtn:hover, a:not(.indexLink):hover, summary:hover {
	transition: 0.75s;
	font-style: oblique;
	text-decoration: underline;
	box-shadow:
		inset 2px 2px 3px #404040; /* top */
}

 a:not(.indexLink):hover, summary:hover {
 	background-color: var(--BLANC);
 	color: var(--BASE);
 		& .fas {
 			color: var(--BASE);
 		}
}

button:active, .linkBtn:active, a:active {
	transform: translateY(4px);
	transition: 0.75s;
	box-shadow:
		inset 4px 4px 6px #404040; /* top */
}

/* ~~~~~~~~~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~~~~~~~~~ */
header {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 110px;
	background-image: linear-gradient(to bottom, rgba(2,25,83,1) 65%, rgba(2,25,83,0));
	z-index: 100010;
}

#shaggyDogLogoPic {
	width: calc(100% - 50px);
	max-width: 400px;
	aspect-ratio: 1200/350;
	margin: 0 auto 0 auto;
}

#shaggyDogLogoImg {
	width: 100%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~~~ */
footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	width: 100%;
	padding: 20px;
	background-color: var(--NOIR);
	z-index: 100010;
}

footer p {
	text-align: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~ NAVIGATION ~~~~~~~~~~~~~~~~~~~~~~ */
#navToggle {
	position: fixed;
	top: 10px;
	right: 10px;
	min-width: 44px;
	min-height: 44px;
	padding: 5px 0 0 0;
	z-index: 100030;
}

nav {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 0;
	padding-top: 50px;
	border-left: 2px solid var(--BLANC);
	overflow-x: hidden;
	transition: .75s;
	z-index: 100020;
}

nav a {
	display: block;
	text-decoration: none;
	margin-left: 20px;
	margin-right: 10px;
}

.fa-bars, .fa-times, .fa-home, .fa-search{
	font-size: 1.5rem;
}

.fa-search, .fa-home {
	color: var(--BLANC);
}

nav a, summary {
	height: 46px;
	padding: 12px 0 18px 20px;
	font-weight: bold;
	font-size: 1.1rem;
	cursor: pointer;
}

summary::marker {
	font-size: 1.5rem;
}

details a {
	padding-left: 40px;
	font-weight: normal;
	font-size: 1rem;
}

#currentpage {
	color: var(--BASE);
	background-color: var(--BLANC);
}

#currentpage::before {
	content: "\f083";
	font-family: "Font Awesome 5 Free";
	margin-right: 8px;
	color: var(--BASE);
}

#btnToTop {
	display: none;
	position: fixed;
	bottom: 140px;
	right: 10px;
	padding: 5px 10px 5px 10px;
	z-index: 100010;
}

.fa-chevron-circle-up {
	margin-right: 8px;
}

#walkies, #sit {
	display: none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~ MAIN ~~~~~~~~~~~~~~~~~~~~~~ */
main {
	min-height: 100vh;
	padding: 0 0 20px 0;
	background-image: url('../Images/Assets/backgroundMobile.webp');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~ HOME PAGE ~~~~~~~~~~~~~~~~~~~~~~ */
#indexZone {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 50px 30px 0 30px;
}

.indexDiv {
	width: 75vw;
	max-width: 350px;
	aspect-ratio: auto 1 / 1;
}

.indexDiv:hover {
	z-index: 99998;
}

.tooltip .tooltiptext {
	position: relative;
	top: -150px;
	left: calc(50% - 70px);
	visibility: hidden;
	margin: 0 auto 0 auto;
	padding: 5px 10px 5px 10px;
	color: var(--BASE);
	background-color: var(--BLANC);
	text-align: center;
	font-size: 1.25em;
	font-weight: bold;
	border-radius: 6px;
	box-shadow: 10px 10px 15px #E6E6E6;
}

.tooltip:hover .tooltiptext, .tooltip:focus .tooltiptext {
	visibility: visible;
	z-index: 100000;	
}

.tooltip a, .tooltip a:hover {
	text-decoration: none;
}

.indexImg {
	width: 100%;
	transition: 2s ease;
}

.rotL {
	transform: rotate(12.5deg);
}

.rotR {
	transform: rotate(-12.5deg);
}

.rotL:hover {
	transform: rotate(17.5deg) scale(1.1,1.1);
}

.rotR:hover {
	transform: rotate(-17.5deg) scale(1.1,1.1);
}

.filmStrip {
	padding: 10px;
	backdrop-filter: blur(15px) saturate(150%);
	background-color: transparent;
	box-shadow: -5px -5px 8px 0 rgba(255, 255, 255, 0.25),
	10px 10px 10px 1px rgba(0, 0, 0, 0.65);
}

[class^="sprocket"] {
	width: 100%;
	height: 20px;
	background: repeating-linear-gradient(90deg, rgba(220, 220, 220, .35), rgba(220, 220, 220, .35) 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 50px);
	backdrop-filter: blur(15px) saturate(150%);
	animation: runFilm 1s linear 10;
}

@keyframes runFilm {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 50px 0;
	}
}

.sprocketTop {
	margin-bottom: 5px;
}

.sprocketBot {
	margin-top: 5px;
}

[id^="indexFig"] {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
}

[id^="indeximg"] {
	border: 1px solid var(--BLANC);
	min-height: 260px;
	object-fit: cover;
}

/* ~~~~~~~~~~~~~~~~~~~~~~ GALLERY HEADER ~~~~~~~~~~~~~~~~~~~~~~ */
#pageHeader  {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	width: 100%;
	max-width: 500px;
	margin: 0 auto 0 auto;
	padding: 150px 12px 12px 12px;
}

#filterBox, #searchBox {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 100%;
	max-width: 300px;
	margin: 0 auto 0 auto;
}

select, input {
	width: 250px;
	padding: 5px;
	color: var(--BASE);
	background-color: var(--BLANC);
	border-radius: 8px;
	box-shadow: inset 2px 2px 4px var(--SHADOW);
}

select option {
	color: var(--BASE);
}

/* code does not work even though it's as shown in several examples */
input:-webkit-autofill, input:autofill {
	background-color: var(--BLANC);
}

.btnAction {
	background-color: #e6ffe6;
}

.btnQuit {
	background-color: #ffcccc;
}

#colControl {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 300px;
	margin: 0 auto 0 auto;
}

#colControl button {
	width: 145px;
}

#lessCol {
	opacity: 0.5;
	cursor: no-drop;
}

/* ~~~~~~~~~~~~~~~~~~~~~~ GALLERY PAGE ~~~~~~~~~~~~~~~~~~~~~~ */
[class^="gridGallery"] {
	display: grid;
	grid-auto-flow: dense;
	margin: 0;
	padding: 20px 5px 0 5px;
}

.gridGallery300 {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-auto-rows: 300px;
	grid-gap: 20px;
}

.gridGallery150 {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	grid-auto-rows: 150px;
	grid-gap: 15px;	
}

.gridGallery75 {
	grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
	grid-auto-rows: 75px;
	grid-gap: 10px;
}

.portrait {
	grid-row-end: span 2;
}

.gridGallery150 .square, .gridGallery75 .square {
	grid-row-end: span 2;
	grid-column-end: span 2;
}

.gridGallery150 .landscape:nth-child(10n+10), .gridGallery75 .landscape:nth-child(10n+10) {
	grid-row-end: span 2;
	grid-column-end: span 2;
}

figure {
	position: relative;
	height: 100%;
	width: 100%;
}

figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 5px;
	border-left: 1px solid var(--BLANC);
	border-right: 1px solid var(--BLANC);
	border-bottom: 1px solid var(--BLANC);
	background-color: var(--BASE);
}

.gridGallery150 figcaption, .gridGallery75 figcaption, .panoZone figcaption {
	display: none;
}

#galleryGrid figure:hover {
	transform: scale(1.1);
	box-shadow: 0 0 5px 5px rgb(240 240 240 / 70%);
	border: 5px solid var(--BLANC);
	transition: 0.4s;
	z-index: 10010;
}

.galleryImg {
	height: 100%;
	width: 100%;
	border: 1px solid var(--BLANC);
	cursor: pointer;
	object-fit: cover;
	transition: transform .3s;
}

.lazy {
	transition: all 800ms ease-out;
	transform: translate3d(0, 75px, 0);
}

.panoZone {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 20px auto 0 auto;
}

.panoZone figure {
	margin: 0 auto 0 auto;
	width: 100%;
	max-width: 1500px;
}

.panoZone figcaption {
	bottom: 12px;
	left: 5px;
	width: auto;
	padding: 5px 20px 5px 20px;
	border-top: 1px solid var(--BLANC);
}

.videoZone {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: 1300px;
	margin: 20px auto 20px auto;
	padding: 20px;
}

#videoInnner {
	width: 100%;
	border: 2px solid var(--BLANC);
}

#popImage, #popMap {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 95%;
	max-width: 1000px;
	height: 85vh;
	padding: 10px;
	border: 1px solid var(--BLANC);
	box-shadow: 0 0 7px 7px rgb(240 240 240 / 70%);
	cursor: move;
	z-index: 100020;
}

#popImg {
	max-width: 100%;
	max-height: calc(100% - 100px);
	/* max-height: 75vh; */
	border: 2px solid var(--BLANC);
	cursor: pointer;
}

#popTxt {
	text-align: center;
	margin: 10px;
}

.popControls {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-end;
	gap: 20px;
	width: 200px;
	margin: 0 auto 0 auto;
}

.mapDiv {
	width: 100%;
	max-width: 550px;
	max-height: 550px;
	aspect-ratio: 1 / 1;
	border: 2px solid var(--BLANC);
}

#popMapDiv {
	width: 100%;
	max-width: 550px;
	aspect-ratio: 1 / 1;
	border: 2px solid var(--BLANC);
}


/* ~~~~~~~~~~~~~~~~~~~~~~ WORLD MAP PAGE ~~~~~~~~~~~~~~~~~~~~~~ */
.mapZone {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 20px 10px 20px 10px;
}

.mapListDiv, .mapPicDiv {
	width: 100%;
	border: 2px solid var(--BLANC);
}

.mapListDiv {
	max-width: 750px;
	aspect-ratio: 750 / 550;
	padding: 10px;
	overflow-y: scroll;
}

.mapPicDiv {
	max-width: 550px;
}

#mapList {
	list-style-type: none;
}

#mapList li {
	padding: 8px 0 8px 8px;
}

#mapList li:hover {
	font-style: oblique;
	text-decoration: underline;
	color: var(--BASE);
	background-color: var(--BLANC);
	box-shadow: inset 2px 2px 4px var(--SHADOW);
	cursor: pointer;
}

#worldMapTxt {
	width: 100%;
	max-width: 550px;
	height: 130px;
	padding: 10px 10px 0 10px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~ ABOUT ME PAGE ~~~~~~~~~~~~~~~~~~~~~~ */
.aboutMe {
	margin: 20px 0 20px 0;
}

.aboutMe img {
	float: left;
	width: 125px;
	margin: 0 10px 10px 0;
}

.aboutMe h2 {
	margin-bottom: 1.5rem;
	padding-top: 10px;
	border-top: 1px solid var(--BLANC);
}

.aboutMe a {
	margin-left: 6px;
	margin-right: 6px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~ XMAS PAGE ~~~~~~~~~~~~~~~~~~~~~~ */
#snowfield {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000100;
	pointer-events: none;
	background-color: transparent;
}

.snowflake {
	background-color: transparent;
}

.wreath {
	width: 75px;
	height: 75px;
	margin: 0 auto 0 auto;
}

.xCardBtns {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 10px;
	margin: 10px auto 010px auto;
}

/* ~~~~~~~~~~~~~~~~~~~~~~ BLOG PAGES ~~~~~~~~~~~~~~~~~~~~~~ */
#blogLog, #blogReg {
	width: 300px;
	margin: 0 auto 20px auto;
}

.blogZone {
	display:flex;
	flex-direction: row;
	justify-content: center;
	max-width: 1750px;
	margin: 0 auto 0 auto;
	padding: 20px;
}

#uploadImg, #editImg {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 20px;
	width: 100%;
	max-width: 1200px;
	color: var(--BLANC);
}

.shaggyFormDiv {
	width: 100%;
	max-width: 350px;
	margin: 0 auto 0 auto;
}

.shaggyForm input, .shaggyForm select {
	display: block;
	width: 100%;
	margin-bottom: 10px;
}

.fa-camera-retro {
	color: var(--BLANC);
}

input[type="file"]::file-selector-button {
	border: 1px solid var(--SHADOW);
	border-radius: 4px;
}

.shaggyForm input[type="text"]:read-only {
	color: var(--HILITE);
}

.formAction {
	display: flex;
	flex-direction: row;
	gap: 10px;
	width: 100%;
	justify-content: center;
}

#blogMapDiv::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100px;
  height: 100px;
  background: url('https://shaggydogphoto.co.uk/Images/Assets/crosshair.png');
  background-size: 100% 100%;
  pointer-events: none;
}

#editThumb {
	width: auto;
	max-width: 350px;
	height: auto;
	max-height: 450px;
	margin: 0 auto 0 auto;
	border: 2px solid white;
}

#edStatus {
	width: 100%;
	max-width: 750px;
	margin: 0 auto 0 auto;
	padding: 10px;
}

.edStatusInner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	margin-bottom: 25px;
	padding: 10px;
}

.edStatusImg {
	width: 100px;
	height: 100px;
	aspect-ratio: 1 / 1;
	margin: 0 20px 0 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~ SUPPORT PAGES ~~~~~~~~~~~~~~~~~~~~~~ */
.navOffline a {
	display: block;
	width: 175px;
	margin: 5px auto 5px auto;
	text-align: center;
	text-decoration: none;
}

.navOffline a:hover {
	text-decoration: underline;
	font-style: oblique;
}


/* ~~~~~~~~~~~~~~~~~~~~~~ ACCESSIBILITY ~~~~~~~~~~~~~~~~~~~~~~ */
#skip {
	position: absolute;
	left: 30px;
	transform: translateY(-200px);
	padding: 6px 25px 8px 25px;
	text-align: center;
	font-size: 1.2em;
	background-color: var(--HILITE);
	z-index: 100030;
}

#skip:focus, #skip:active {
	transform: translateY(0);
	margin: 20px;
}

.sr-only:not(:focus):not(:active) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	color: var(--NOIR);
	background-color: var(--BLANC);
	border: 0 !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	clip-path: inset(50%) !important; 
	/* clip: rect(1px, 1px, 1px, 1px) !important; */
	-webkit-clip-path: inset(50%) !important;
}

/* ~~~~~~~~~~~~~~~ Adjustments for screen sizes - TABLETS ~~~~~~~~~~~~~~~ */
@media only screen and (min-width: 768px) {
	
	main {
		background-image: url('../Images/Assets/backgroundTablet.webp');
		background-attachment: fixed;
	}
	
	#shaggyDogLogoPic {
		max-width: 450px;
	}
	
}

/* ~~~~~~~~~~~~~~~ Adjustments for screen sizes - DESKTOPS ~~~~~~~~~~~~~~~ */
@media only screen and (min-width:1024px) {
	
	#shaggyDogLogoPic {
		max-width: 600px;
	}
	
	
	main {
		background-image: url('../Images/Assets/background.webp');
		padding: 50px 25px 100px 25px;
	}
	
	footer {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		position: fixed;
		bottom: 0;
		left: 0;
		padding-bottom: 0;
		background-image:	linear-gradient(to top, rgba(0,0,0,1) 65%, rgba(0,0,0,0));
		background-color: transparent;
	}
	
	.lazy {
		transform: translate3d(0, 150px, 0);
	}

	.gridGallery300 .square {
		grid-row-end: span 2;
		grid-column-end: span 2;
	}
	
	.panoZone figcaption {
		display: block;
	}
	
	.mapZone {
		flex-direction: row;
	}
	
	#walkies, #sit {
		position: fixed;
		bottom: 45px;
		left: 0;
	}

	#sit {
		display: block;
	}

	#btnToTop::before {
		content: '';
		position: absolute;
		bottom: 25px;
		right: -10px;
		height: 125px;
		width: 125px;
		background-image: url('../Images/Assets/shaggyUP.webp');
		z-index: 100020;
	}
	
}