/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Uchen&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.cdnfonts.com/css/futurarenner');               /**/

/*sticky footer fix*/
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1;
}

#page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/*main menu styles*/
ul.menu {
	display: flex;
	flex-direction: row;
	padding-top: 32px;
}

ul.menu a {
	padding-right: 32px;
}

/*the rest*/
body {
	background-color:  #fcf8f7;
	font-family:  Work Sans, sans-serif;
	color:  #333333;
	font-size:  16px;
	line-height:  1.2;
	padding-left:  100px;
}

a {
	color:  #89a232;
	font-family:  Work Sans, sans-serif;
	font-size: 14px;
}

/*post title*/
h1, .post-title a {
/*	font-family: FuturaRenner, sans-serif;*/
	font-family:  work sans, sans-serif;
	font-size:  24px;
	/*font-weight 700 is bold, 900 is 'black' (extra bold)*/
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.3s ease;
	color: #333;
}

h1.post-title:hover, .post-title a:hover {
    color: #89a232; /* green on hover */
}

.post-title a {
    pointer-events: auto;
}


/*post-date*/
h2 {
/*	font-family: FuturaRenner, sans-serif;*/
	font-family:  work sans, sans-serif;
	font-size: 14px;
	font-weight:  400;
	text-transform:  uppercase;
}

/*publisher*/
h3 {
	font-family:  work sans, sans-serif;
	font-size:  14px;
	font-weight:  400;
	padding-top: 16px;
}

/*blockquote*/
h4, p.blockquote {
	font-family:  uchen, serif;
/*	font-family: work sans, sans-serif;*/
	font-weight: 400;
	font-size: 16px;
	line-height:  1.5;
	margin-top: 8px;
	margin-bottom: 8px;
}

h5 {
	color: #333333;
	font-family:  Work Sans, sans-serif;
	font-size: 14px;
	text-transform: uppercase;
}

/*review*/
p {
	font-family: work sans, sans-serif;
	font-size: 16px;
	line-height:  1.8;
}

/*container styles*/
.container {
	/*max-width: auto;*/
	margin-left:  56px;
	/*margin-right:  128px;*/
}

/*header styles*/
.site-branding img {
	width:  100%;
}

.site-header {
	/*padding-right: 488px;*/
	/*debating between 96 and 64 pixels of space*/
	padding-top:  96px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items:  center;
	padding-left: 56px;
}

.menu {
	list-style: none;
}

.menu a {
	color:  #333333;
	text-decoration:  none;
}

/*laying out recent posts and posts sections*/
main {
	display:flex;
	flex-direction: row;
	gap: 40px;
}

section.recent-posts {
	flex: 1;
	padding-top: 36px;
/*	padding-top: 48px;*/
	/*padding-left:35px;*/
	/*padding-right: 35px;*/
	text-align: left;
	max-width: 200px;
}

ul.recent-posts{
	margin-top: -22px;
	list-style-type:none;
	padding-inline-start:0em;
	width: 100%;
	box-sizing: border-box;
}

ul.recent-posts li a {
	text-decoration: none;
}
/*
ul.recent-posts li {
	line-height: 1;
	padding-top: 2px;
	padding-bottom: 2px;
}
*/
/*standard post styles*/

div#standard-post:empty {
	display:none;
}

.onepost {
	padding-top: 48px;
	display: flex;
	flex-direction:  row;
	justify-content: flex-start;
}

.cover {
	padding-right:  32px;
}

.post-date {
	margin-top: -10px;
}

.post-text {
	display:  flex;
	flex-direction:  column;
	justify-content: flex-start;
	width: 450px;
	padding-top: 8px;
}

p.blockquote {
	margin-top:18px;
	display:  flex;
	align-items: center;
	border-left: 3px solid #333333;
	padding-left: 16px;
	/*padding-top: 10px;
	padding-bottom: 10px;*/
}

.publisher {
	margin-top:-20px;
}

.post-footer {
	margin-top:-12px;
	display:  flex;
	flex-direction:  row;
	justify-content: space-between;
	align-items: flex-start;
}

/*about page styles*/
section.about-page {
	display:flex;
	flex-direction:column;
}

span.gray {
	color: #6b6b6b;
	font-size: 14px;
}

section.about-page p#first {
	font-size: 14px;
}

section.about-page p#second {
	margin-top: 0px;
	font-size: 14px;
}

section.about-page p#third {
	margin-top: -10px;
	font-size: 14px;
}

/*two and three up post styles*/
div#two-up-post, div#three-up-post, div#four-up-post, div#five-up-post, div#six-up-post {
	display:flex;
	flex-direction:column;
}

div.twoup-covers, div.threeup-covers, div.fourup-covers {
	display:flex;
	flex-direction:row;
	align-items:stretch;
}

div.twoup-covers img {
	height:100%;
	width:auto;
}

div.threeup-covers {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* keep them in a single row */
    justify-content: space-between; /* optional: space between covers */
    align-items: flex-start; /* align tops */
    max-width: 100%; /* stay inside container */
    overflow: hidden; /* prevent overflow */
}

div.fourup-covers {
 /*   display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* keep them in a single row */
   /* justify-content: space-between; /* optional: space between covers */
   /* align-items: flex-start; /* align tops */
   /* max-width: 100%; /* stay inside container */
   /* overflow: hidden; /* prevent overflow */
   /*grid instead below*/
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* two covers across */
    grid-template-rows: repeat(2, auto);   /* two rows */
    gap: 20px; /* space between covers */
    max-width: 100%;
}

div.threeup-covers img {
    max-width: 100%; /* each cover takes roughly a third of container */
	height: auto;
    object-fit: contain; /* ensures image keeps aspect ratio */
}

div.fourup-covers img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

.fourup-covers .left-cover,
.fourup-covers .center-left-cover,
.fourup-covers .center-right-cover,
.fourup-covers .right-cover {
    padding: 0;
}

div.left-cover {
	padding-right:20px;
}

/*div.center-cover {
	padding-right: 20px;
}
*/

div.center-left-cover {
	padding-right: 20px;
}

div.right-cover {
	padding-left:20px;
}

.post-text#twoup, .post-text#threeup, .post-text#fourup, .post-text#fiveup, .post-text#sixup {
	display:  flex;
	flex-direction:  column;
	justify-content: flex-start;
	width:100%;
}

section.posts, div.all-posts-wrapper {
	max-width: 1100px;
}

/*five up styles*/
.fiveup-covers {
	display: flex;
	flex-direction: row;
}

.fiveup-covers.hero-cover {
  display: flex;
  width: 100%;
  flex: 1;
  max-width: 50%;
}

.fiveup-covers.hero-cover img {
  width: 100%;
  height: auto;
  display: block;
}

.fiveup-covers.cover-spread {
  flex: 1;
  max-width: 50%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px; /* space between covers */
  padding-left: 20px;
}

.fiveup-covers.cover-spread .fiveup img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* optional but keeps the images neat */
}

/*six up styles*/
.sixup-covers {
	display: flex;
	flex-direction: column;
}

/* hero section unchanged */
.sixup-covers .hero-covers {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.sixup-covers .hero-covers img {
	max-width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* cover spread (your four covers) */
div.sixup-covers.cover-spread {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: nowrap;
	max-width: 100%;
	overflow: hidden;
	padding-top: 20px;
	gap: 20px; /* optional for consistent spacing */
}

/* make top and bottom spread rows flex containers */
.sixup-top-spread,
.sixup-bottom-spread {
	display: flex;
	flex-direction: row;
	gap: 20px; /* space between covers */
}

/* general image styling */
div.sixup-covers.cover-spread img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}


/*.sixup-covers {
	display: flex;
	flex-direction: column;
}

.sixup-covers .hero-covers {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.sixup-covers .hero-covers img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/*.sixup .left-hero-cover {
	padding-right: 20px;
}*/

/*div.sixup-covers.cover-spread {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* keep them in a single row 
    justify-content: space-between; /* optional: space between covers 
    align-items: flex-start; /* align tops 
    max-width: 100%; /* stay inside container 
    overflow: hidden; /* prevent overflow 
    padding-top: 20px;
}

div.sixup-covers.cover-spread img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}*/

/*all posts*/
h3.all-posts {
	margin-bottom: -4px;
	font-size: 24px;
}

div.all-posts-wrapper {
	padding-left: 56px;
	max-width: 584px;
}

li.all-posts {
	margin-bottom: -48px;
}

h1.all-posts {
	margin-bottom: -32px;
	margin-top: 64px;
}

li.all-posts a {
    display: inline-flex;
}

.post-title-link::before {
    content: attr(data-date);
    color: #333333;
    font-size: 0.85rem;
    margin-right: 4px;
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: baseline;
    padding-right: 4px;
}

/*fix blockquote paragraphs so they don't start in a new column*/
.blockquote {
	display: inline-flex;
	flex-direction: column;
}

/*.blockquote br, p.review br, p.blockquote br {
	margin-top: 20px;
	display: inline;
}*/

.blockquote p {
	display: inline;
}

/*fix post text for custom post types where the text appears below the covers*/
.fourup-post-text, .twoup-post-text, .threeup-post-text, .fiveup-post-text, .sixup-post-text {
	width: 100%;
}

/*fix italic text*/
span.italic {
	font-style: italic;
	display: inline;
}

/*format blog post date text so it's green*/
span.date-text {
	color: #89a232;
}

/*fix title and post text so it aligns flush with the top of the left cover on oneup posts*/
.post-title.oneup {
	margin-top: 0px;
	padding-top: 0px;
}

/* Add spacing between posts */
.site-main .posts article {
    margin-bottom: 120px; /* adjust as needed */
}

/*about page styles*/
div.aboutpage, div.page, h1.aboutpage {
	max-width: 1100px;
	margin-left: 56px;
	margin-top: 56px;
}

/*faded text on about page copy*/
p.faded {
	color: #BFC0BF;
}

/*small text on about page copy*/
p.smallaboutcopy {
	font-size: 12px;
	line-height: 1.5;
}

/*deleted alt designs section*/
/*.altdesigns-text {
	text-transform: uppercase;
	text-decoration: none;
	color: #6b6b6b;
	font-weight: 700;
}*/

/*spacing adjustments to standard post text*/
/*.altdesigns {
	padding-left: 10px;
}

.post-text p {
	margin-top: -10px;
}

.post-footer {
	margin-top:  -10px;
}*/

/*left and right frame styles*/

/*first try*/

/*div.left-frames {
	z-index: 99;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: -235px;
	margin-left: -357px;
	width: 486px;
	min-height: calc(100% + 235px);
	background-image: url('../../galleyrat/assets/left-frames.png');
	background-repeat: repeat-y;
}*/

/*solution below for right frames used code snippet in template-parts that used php and get_template_directory_uri to source the image*/

/*.right-frames {
	z-index: -1;
	position: absolute;
	top: 0;
	right: 0;
	margin-top: -234px;
	margin-right: -512px;
}*/

/*second try below using solution from https://stackoverflow.com/questions/712689/css-div-stretch-100-page-height*/

html {
    min-height:100%;
    position:relative;
}

body {
    height:100%;
}

div.left-frames{
    position:absolute;
    top:0;
    left:0;
    margin-top: -275px;
	margin-left: -357px;
    width: 486px;
    height: calc(100% + 275px);
	background-image: url('../../galleyrat/assets/left-frames.png');
	background-repeat: repeat-y;
}

div.right-frames {
	position: absolute;
	top: 0;
	right: 0;
	margin-top: -274px;
	margin-right: -512px;
	width: 640px;
	height: calc(100% + 274px);
	background-image: url('../../galleyrat/assets/right-frames.png');
	background-repeat: repeat-y;
}

/*disable horizontal scroll*/
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/*footer styles*/
footer {
	text-align: center;
	margin-top: 40px;
/*	width: 100%;
	text-align: center;
	margin-top: 400px;
	position:relative;
	bottom: 0;
	right: 50%;
	transform: translate(50%);*/
}

/*fixing links spacing*/
div.links a {
	padding-right: 4px;
}

/*responsive styles*/
/*recent posts disappears*/
@media (max-width: 1624px) {
	section.recent-posts {
  		max-width: 120px;
  }
}

@media (max-width: 1560px) {
	 section.recent-posts {
  	display: none;
  }
}

/*breakpoints for changing post flex styles and cover flex styles*/
@media (max-width: 1440px) {
	div.onepost {
		flex-direction: column;
	}
	div.twoup-covers, div.threeup-covers , div.fiveup-covers {
		flex-direction: column;
	}
	div.twoup-covers .right-cover {
		padding-left: 0px;
		padding-top: 20px;
	}
	.twoup-post-text, .threeup-post-text, .fourup-post-text, .fiveup-post-text, .sixup-post-text {
		width: 450px;
	}
	div.fourup-covers {
		display: flex;
		flex-direction: column;
	}
	div.threeup-covers .left-cover {
		padding-bottom: 20px;
	}
	div.threeup-covers .right-cover {
		padding-top: 20px;
		padding-left: 0px;
	}
	div.fiveup-covers .cover-spread {
		padding-top: 20px;
		padding-left: 0px;
		width: 1000px;
	}
	div.sixup-covers .hero-covers {
		flex-direction: column;
	}
	.sixup-covers .hero-covers .left-hero-cover {
		padding-bottom: 20px;
	}
	div.sixup-covers.cover-spread {
		flex-direction: column; /* top spread above bottom spread */
		align-items: center;
		width: 500px;
	}
	.sixup-top-spread,
	.sixup-bottom-spread {
		justify-content: center;
	}
	div.sixup.center-left-cover {
		padding-right: 0px;
	}
	div.onepost .cover {
		padding-bottom: 8px;
	}
}

/*header*/
@media (max-width: 1270px) {
	.site-header {
		padding-right: 0px;
	}
}

@media (max-width: 820px) {
  .main-navigation ul {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 32px;
  }
}

/*right frame disappearance*/
@media (max-width: 1000px) {
  div.right-frames {
    display: none;
  }
}

/* mobile sizes */
@media (max-width: 796px) {
  div.left-frames {
    margin-left: -400px !important;
  }

  /* pull the main content left so frame takes less visual space */
  body {
    padding-left: 16px !important; /* smaller than desktop */
  }
}

@media (max-width: 664px) {
	div.twoup-covers img, div.onepost .cover img, div.fourup-covers .fourup img, div.threeup-covers img, div.sixup-covers .hero-covers img, div.sixup-covers.cover-spread, div.fiveup-covers .hero-cover img {
		height: auto;
		width: 400px;
	}
	div.fiveup-covers.cover-spread {
		width: 800px;
	}
	.post-text {
		width: 400px;
	}
}

@media (max-width: 568px) {
	div.twoup-covers img, div.onepost .cover img, div.fourup-covers .fourup img, div.threeup-covers img, div.sixup-covers .hero-covers img, div.sixup-covers.cover-spread, div.fiveup-covers .hero-cover img {
		height: auto;
		width: 264px;
	}
	div.fiveup-covers.cover-spread {
		width: 528px;
	}
	.post-text {
		width: 264px;
	}
	ul.menu a {
		font-size: 12px;
		margin-left: -96px;
	}
	.site-branding img {
		width: 72%;
	}
}

@media (max-width: 392px) {
	div.left-frames {
    	margin-left: -450px !important;
  	}
  	body {
    	margin-left: -64px !important;
  	}
  	footer {
  		padding-left: 64px !important;
  	}
}

/*page responsive styles*/
/*about page*/
@media (max-width: 1312px) {
	div.aboutpage {
		width: 680px;
	}
}

@media (max-width: 1104px) {
	div.aboutpage {
		width: 544px;
	}
}

@media (max-width: 832px) {
	div.aboutpage {
		width: 448px;
	}
}

@media (max-width: 616px) {
	div.aboutpage {
		width: 304px;
	}
}

@media (max-width: 472px) {
	div.aboutpage {
		width: 240px;
	}
	h3.all-posts {
		padding-right: 16px;
	}
}

/*all posts page*/
@media (max-width: 1000px) {
	div.all-posts-wrapper {
		max-width: 424px;
	}
}

@media (max-width: 616px) {
	div.all-posts-wrapper {
		max-width: 280px;
		padding-bottom: 32px;
	}
}

/*contact page*/
@media (max-width: 568px) {
	p.contactcopy {
		font-size: 14px;
	}
}