@font-face {
    font-family: 'Agrandir';
    src: local('Agrandir Regular'), local('Agrandir-Regular'),
        url('../fonts/Agrandir-Regular.woff2') format('woff2'),
        url('../fonts/Agrandir-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/*  Bold (wide looking) ---*/
@font-face {
    font-family: 'Agrandir Grand';
    src: local('Agrandir Grand Heavy'), local('Agrandir-GrandHeavy'),
        url('../fonts/Agrandir-GrandHeavy.woff2') format('woff2'),
        url('../fonts/Agrandir-GrandHeavy.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
/*  Italic Bold ----- */
@font-face {
    font-family: 'Agrandir Wide';
    src: local('Agrandir Wide Black Italic'), local('Agrandir-WideBlackItalic'),
        url('../fonts/Agrandir-WideBlackItalic.woff2') format('woff2'),
        url('../fonts/Agrandir-WideBlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* Site sizes ------------------------------------------------- */

.centred {
  max-width: 1420px;
  margin: 0 auto;
  padding: 1rem;
}

nav a,
.serif-font {
	font-family: 'Minion Pro Display',serif;
}
.standard-font {
  font-family: 'Agrandir', 'ariel', sans-serif;
}
.bold-font {
	font-family: 'Agrandir Grand', sans-serif;
}

h1,h2,h3,h4,h5,h6 {
	margin:0;
	font-weight: 100;
}

html {
	font-family: 'Minion Pro Display',serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  scroll-behavior:smooth;
}

.impact {
  font-family: 'impact', sans-serif;
}

body {
	/*font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;*/
	background:#f6f6f6;
	margin:0;
	position: relative;
	color:#222;
	color:#06081a;
}

/* header and nav -------------------------------------------------------- */

 /*-------------------------------------------------------------------*/
/* -------------------- HIDDEN SHOP BUTTON -----------------------*/
/* -------------------------------------------------------------------*/

header {
	/*grid-template:"logo nav social-icon" auto / 200px 1fr 20px !important;*/
	.button {
		display: none;
	}
}

header {
	gap:20px;
	align-items:center;

	display: grid;
	grid-template:"logo nav social-icon hBtn" auto / 200px 1fr 20px 110px;

	.logo {
		grid-area:logo;
	}
	nav {
		grid-area:nav;
	}
	.nav-social-icon {
		grid-area:social-icon;
	}
	.button-blue {
		grid-area:hBtn;
	}
}

a {
	text-decoration:none;
}
footer a.footer-login-btn,
nav a {
	color:#2c3e50;
	border-radius: 10px;
	transition: 0.4s;
	padding:0.6em 1.5em;
	position: relative;
}
footer nav a:before,
nav a:before {	
	background: transparent;
  content: '';
  left: 50%;
  right: 50%;
  height: 4px;
  bottom: 0;
  position: absolute;
  transition: 0.2s;
}
footer nav a:hover:before,
footer nav a.active:before,
nav a:hover:before,
nav a.active:before {
	background: #D8BA34;
	left:1em;
	right:1em;
}
nav a:hover {
	color:#D8BA34;
}
.active:not(.footer-admin) {
	color:#D8BA34;
}


a.back-to-art {
  color: #d8ba34;
  filter: drop-shadow(0px 0px 0px black);
}

a.footer-admin:visited {
	color:#333;
}
a.back-to-art:hover,
a.footer-admin:hover {
	color:#565656 !important;
}

@media screen and (width <= 767px) {
	header {
		/*grid-template:"logo . social-icon hBtn nav" auto / 150px 1fr 20px 102px 50px;*/
		grid-template:"logo . social-icon nav" auto / 150px 1fr 20px 50px !important;
		gap:5px;
		button {
			grid-area:nav;
		}
	}
	nav a {
		text-align: right;
	}
	footer a:hover:before,
	footer a.active:before,
	nav a:hover:before,
	nav a.active:before {
		left:unset;
		right:unset;
	}
}

/* Burger ---------------------------------*/

/* mobile: overlay menu hidden by default */
.nav-toggle {
	display:inline-block;
	background: transparent;
  border: unset;
  font-size:40px;
}
/* prevent scroll when open */
body.menu-open {
	overflow:hidden;
}

.menu {
  position:fixed;
  inset:0;
  background:#fff;
  padding:80px 24px;
  top:160px;
  z-index:99;
}

/* ----- mobile burger -------*/
@media (max-width: 767px) {
	.menu {
	  transform: translateX(100%);
	  transition: 0.3s ease;
	}
	.menu.is-open {
		display:grid;
		grid-template-rows: repeat(5, 50px);
  	transform: translateX(0%);
	}
	.menu a.active {
		font-weight:700;
	}
}

/* desktop: regular inline nav */
@media (min-width: 767px) {
  .nav-toggle {
  	display:none;
  }
  .menu {
  	position:static;
  	display:flex;
  	gap:16px;
  	padding:0;
  	background:transparent;
  	justify-content: flex-end;
  }
  .menu a {
  	padding:8px 12px;
  	font-size:1rem;
  }
}

/* screen reader helper */
.sr-only {
	position:absolute;
	left:-9999px
}
/* -------------------------------------*/

.home-art-grid-top {
  display: grid;
  grid-template-columns: 100px repeat(3, minmax(0, 1fr));
  gap: 20px 1.5rem;
  padding-bottom:1.5rem;
}

.home-art-grid-bot {
  display: grid;
  gap: 20px 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 100px;

  img {
  	object-fit: cover;
  	height:100%;
  }
}
.top-1 { grid-column: 2; }
.top-2 { grid-column: 3; }
.top-3 { grid-column: 4; }

@media (width <= 500px) {
	.home-art-grid-top {
		display: none;
	}
	.home-art-grid-bot {
		grid-template-columns: 1fr;
		grid-template-rows:1fr 1fr 1fr;
	}
}

/* --------- Art Gallery Grid ------------------------ */
.art-grid {
	display: grid;
  grid-template-columns: repeat(3, minmax(235px, 1fr));
  gap: 20px;
  max-width: 1200px;
  padding:60px 1rem;
  
/*
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  max-width: calc(3 * 235px + 40px);
*/
}
.art-cards {
	height:504px;

	width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
}
.art-cards.card-2,
.art-cards.card-5,
.art-cards.card-8 {
	height:597px;
}
.art-card-wrapper,
.art-grid a {
	transition: 0.4s;
	cursor: pointer;
	position: relative;
}
.art-grid a:hover {
	transform: scale(1.005);
}
.art-card-wrapper:after {
	content: 'Discover \2794';
	background: rgba(153,48,2,.8);
	position: absolute;
	inset:0;
	width:100%;
	height: 100%;
	display: grid;
	place-items:center;
	color:#fff;
	transition: 0.3s;
	opacity: 0;
}
.art-grid a:hover .art-card-wrapper:after {
	opacity: 1;
}
.art-label {
	color:#333;
}

/* ----------- end ------------------------ */

img {
	display:block;
	width:100%;
	height:auto;
}

.error {
	background:#fee;
	border:1px solid #f99;
	color:#900;
	padding:.5rem;
	border-radius:.5rem;
}
footer {
	button.logout-btn {
		cursor:pointer !important;
    all:unset;

    &:hover {
    	background:transparent;
    	color:#333;
    }
	}
}
small {
	display: flex;
  justify-content: space-between;
}

.home-layout .logo {
	img {
		max-width: 300px;
	}
}

/*.art-layout {
	.scrolling-grid-wrapper {
		overflow:hidden;
		max-height: 600px;
	}
	.scrolling-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-gap:0.5em;
		margin-bottom: 0.5em;
		img {

		}
	}
}*/

/* Grid Sections - Styling --------------------------------------- */

.img-content-section {
	padding:60px 30px;
}

.sectional-grid-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:50px;
	align-items: end;

	.grid-content {
		padding:8%;
	}
}

.contact-layout .sectional-grid-wrapper.content-content-grid {
	display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 50px;
  align-items: start;
  justify-content: space-between;

	.grid-content-left {
		padding:8%;
	}
}

/* ------- contact form ------------------ */

.contact-layout form:not(.logout-form) {
	box-sizing: border-box;
  display: grid;
  gap: .75rem;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(2, 40px);

	textarea,
	input {
		padding:10px;
	}
	input:nth-child(1),
	textarea {
		grid-column:1 / span 2;
	}
}

.thankyou-message {
	padding:8%;
}

#hidden-form {
	display: none;
}

/* General Styles and Sections ------------------------------------------- */

h1 {
	font-size:50px;
}

.blue-highlight {
	color:#0F7E99 !important;
}
.yellow-highlight {
	color:#D8BA34 !important;
}
.orange-highlight {
	color:#993101 !important;
}
.shadow {
	filter:drop-shadow(2px 2px 2px #000);
}

.bg-section {
	background:linear-gradient(rgba(32, 57, 0, 0.5), rgba(32, 57, 0, 0.5)), url("/images/brushes-landscape.webp") 50% 50% / auto 100% no-repeat fixed;
	padding:170px 60px;
}

.contact-layout .bg-section {
	background:linear-gradient(rgba(0, 69, 93, 0.6), rgba(0, 69, 93, 0.6)), url("/images/see-you.webp") 50% 50% / auto 100% no-repeat fixed;
	padding:170px 60px;
}

.home-layout .bg-section-content {
  max-width: 530px;
  margin: 0 auto;
  text-align: center;
}
.bg-section-content {
  p,h1,h2 {
  	color:#fff;
  }
}
.home-grid-section {
	padding:80px 0;
}

.centre-grid {
	display: grid;
	justify-content: center;
}
.admin-layout form,
.login-layout form {
	display: grid;
	gap:15px;
}

.art-piece figure {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap:1.5rem;
	align-items: center;
}

.art-details-layout form:not(.logout-form) {
	display: none;
	textarea {
		width:50%;
	}
	.form-btn-group {
		margin-top:.5rem;
		display:flex;
		gap:.5rem;
	}
}


/* --------- the file upload 'Thank you' message-------------*/
.toast {
  position: fixed; inset: 1rem auto auto 50%;
  transform: translateX(-50%);
  padding: .75rem 1rem; border-radius: .5rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  z-index: 9999; font-weight: 600;
  background: #222; color: #fff;
  transition: opacity .25s ease, transform .25s ease;
}
.toast--success { background: #1b5e20; }
.toast--error   { background: #b71c1c; }
.toast--hide { opacity: 0; transform: translateY(-4px); }


.art-details-layout .toast {
	position:fixed;
	left:50%;
	top:1rem;
	transform:translateX(-50%);
	padding:.6rem 1rem;
	border-radius:.5rem;
	color:#fff;
	z-index:999
}

/* Button Styles -------------------------------------------- */

.btn.small{ 
	font-size:.9rem;
	padding:.35rem .7rem
}

.admin-login {
	display: flex;
	gap:5px;
}

.button {
	display: inline-block;
}

form button,
.button span {
	position: relative;
	display: block;
	padding:0.4em 30px 0.3em 1em;
	transition: 0.3s;
	font-size:18px;
	width:max-content;
}
form button {
	position: relative;
	cursor: pointer;
	/*width: 120px;*/
	border: unset;
	font-family: 'Minion Pro Display',serif;
}
.add-arrow {
	position: relative;
	transition: 0.3s;
}
form button:not(.logout-btn):after,
.add-arrow:after,
.button span:after {
	position: absolute;
	content:'';
	background: url(/assets/right-arrow-white.png) no-repeat 50% 50% / auto;
  width:20px;
  height:100%;
  top:0;
  transition: inherit;
  transform:translateX(3px);
}
form button:after,
.button-yellow .button span:after {
	background: url(/assets/right-arrow-black.png) no-repeat 50% 50% / auto !important;	
}
.add-arrow:after {
	background: url(/assets/down-arrow-red.png) no-repeat 50% 50% / auto;
	transform: translateY(0px);
}
.add-arrow:hover:after {
	transform: translateY(3px);
}

form button:hover:after,
.button span:hover:after {
	transform:translateX(6px);
}

.button-red span {
	color:#fff;
	background:#993101;
}
.button-red span:hover {
	background: #7C2902;
}

form button,
.button-yellow span {
	background: #D8BA34;
	color:#000;
}

form button:hover,
.button-yellow span:hover {
	background: #BAA030;
}

.button-blue span {
	background: #118096;
	color:#fff;
}

.button-blue span:hover {
	background: #0E6677;
}

.read-more {
	background: transparent;
	color:#993101;
}

/* Footer ------------------------------------------------ */
footer {
  background: #EBEBEB;
  max-width: unset;
  padding: 80px 60px 0;
}
.grey-footer-section {
	background: #EBEBEB;
	display: grid;
	justify-items: center;
	gap:40px;
	padding-bottom:60px;
}

.footer-nav-wrapper {
  display: grid;
  grid-template-columns: 1fr 20px;
  align-items: center;
  gap:6px;
}

.footer-logo {
	width:150px;
}
.nav-social-icon {
	width: 20px;
	height:20px;
	img {
    padding: 12px;
    position: relative;
    left: -12px;
    top: -12px;
	}
}


@media (width <= 1024px) {
	.contact-layout .sectional-grid-wrapper.content-content-grid {
		grid-template-columns: 1fr;
		gap:25px;
	}
	.contact-layout form {
		grid-template-columns: 1fr 1fr;
	}
	.thankyou-message {
		padding:0 8%;
	}

	.art-grid {
		grid-template-columns:repeat(auto-fill, minmax(235px, 1fr)); 
	}
	.art-cards.card-2, .art-cards.card-5 {
		height:504px;
	}
}


@media (width <= 767px) {

	.home-grid-section {
		padding:40px 0;
	}
	.art-piece figure {
		grid-template-columns: 1fr;
	}
	.grey-footer-section {
		gap:20px;
	}
	.sectional-grid-wrapper {
		grid-template-columns: 1fr;
	}
	.img-content-grid {
		grid-template-rows: 1fr max-content;

		.grid-img {
			order:2;
		}
	}
	.content-img-grid {
		grid-template-rows: max-content 1fr;
	}
	.img-content-section {
		padding:15px;
	}
	.contact-layout .bg-section {
		padding:100px 20px;
	}
	.contact-layout form {
		grid-template-columns: 1fr !important;
		input:nth-child(1), textarea {
			grid-column: unset !important;
		}
	}
	footer {
		padding:30px 30px 0;
	}
	.footer-nav {
		display: flex;
    justify-content: center;
    flex-wrap: wrap;
	}
	.footer-nav a {
		padding:0.6em 0.5em;
	}
}