/*
Theme Name: Rodrigweez 5.0
Author: Christiana Rodriguez
Author URI: http://www.rodrigweez.com
Description: Minimal. Colorful. Happy. Fun
Version: 4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rodrigweez

based on BlankSlate from https://opencollective.com/blankslate and Andy Bell's reset css
BlankSlate Author URI: https://opencollective.com/blankslate#section-contributors
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Reset
# Fonts
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Asides
	## Comments
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# HTML, CSS RESET
--------------------------------------------------------------*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'],
dl[role='list'] {
  list-style: none;}

/* Set core body defaults */
body {
  xmin-height: 100vh;
  line-height: 1.5;}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;}

/* Balance text wrapping on headings 
h1, h2,
h3, h4 {
  xtext-wrap: balance;} */

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;}

/*--------------------------------------------------------------
# FONTS
--------------------------------------------------------------*/
@font-face {
	font-family: Pangolin;
	src: url('assets/fonts/Pangolin/Pangolin.woff2') format('woff2'),
	font-weight: normal;
	font-style: normal;}
@font-face {
	font-family: Bodedo;
	src: url('assets/fonts/HVD/Bodedo.woff') format('woff');
	font-weight: normal;
	font-style: normal;}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
:root {
  font-size: 62.5%; /* (62.5/100) * 16px = 10px */
  --font-size--small: 1.4rem; /* 14px */
  --font-size--default: 1.6rem; /* 16px */
  --font-size--large: 2.4rem; /* 24px */}

.font-size--small {
  font-size: var(--font-size--small);}

.font-size--default {
  font-size: var(--font-size--default);}

.font-size--large {
  font-size: var(--font-size--large);}

body,
button,
input,
select,
textarea {
	font-family: Pangolin;
	font-size:1.6rem;}
	body {color:black;}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: Bodedo;
	clear: both;
	margin:0 0 1.6rem;}
	h1 {font-size:3.2rem}
	h2 {
		font-size:2.6rem;
		margin:6.4rem 0 1.6rem;}
	h3 {font-size:2.2rem;
		margin:4.8rem 0 1.6rem;}
	h4 {font-size:1.9rem;
		margin:3.6rem 0 1.6rem;}
	h5 {font-size:1.6rem}

em {font-style: italic;}

q {quotes: "“" "”" "‘" "’";}
q:before {content: open-quote;}
q:after {content: close-quote;}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/

html,
body {
	height:100%;}

body {
	display: flex;
	flex-direction: column;
	margin:0;}
	
.site-content {
	xborder:1px solid red;
	flex: 1 0 auto;}
	
.site-footer {
	flex-shrink: 0;}

p {margin:0 0 1.6rem;}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.6rem;}

ul, ol {
	list-style-position: outside;
	margin: 1.5em 0;
	padding:0 0;}
	ul {list-style-type: "- ";}
	
li {
	margin:0 0 0 1.6rem;}

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */}

a {
	color:black;}
	a:hover,
	a:focus,
	a:active {
		color:rgb(255,109,2);
		outline:0;}
	

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.tnp-subscription {max-width:100% !important}

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color:black;
	color:white;
	display:inline-block;
	font-family: 'Bodedo';
	font-size: 1.6rem;
	padding: 1.6em;}
	.button:hover,
	button:hover,
	input[type="button"]:hover,
	input[type="reset"]:hover,
	input[type="submit"]:hover,
	.button:focus,
	button:focus,
	input[type="button"]:focus,
	input[type="reset"]:focus,
	input[type="submit"]:focus,
	.button:active,
	button:active,
	input[type="button"]:active,
	input[type="reset"]:active,
	input[type="submit"]:active {
		background-color:rgb(229,0,28);
		text-decoration: none;}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;}

select {border: 1px solid #ccc;}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {color:black;}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {padding: 3px;}

textarea {
	padding-left: 3px;
	width: 100%;}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/

.main-navigation {
	font-family: 'Bodedo';
	font-size:2rem;
	justify-content: space-evenly;}

.main-navigation ul {
	display:flex;
	flex-flow:row;
	list-style: none;
	justify-content: space-evenly;
	margin:0;
	padding:0}

.main-navigation a {
	color:black;
	text-decoration: none;}
	.main-navigation a:hover,
	.main-navigation .current-menu-item a,
	.main-navigation .current-page-item a {color:rgb(255,109,2);}

.single-rz_dragonfood .menu-dragonfood a,
.single-comics .menu-comics a,
.single-portfolio .menu-portfolio a,
.category-painting .menu-portfolio a,
.category-photos .menu-portfolio a {
	color:rgb(255,109,2);}

.post-navigation {
	align-items:center;
	display:flex;
	font-family: Bodedo;
	gap:30px;
	justify-content:space-evenly;
	padding:6rem 0;
	width:100%}
	.single-post.post-navigation {border-top:1px solid silver;}

.post-navigation .nav-next,
.post-navigation .nav-previous {
	flex-grow:1;
	flex-shrink:1;
	flex-basis:350px;
	margin:0;
	padding:0;}
	.post-navigation .nav-previous {
		text-align: right;}

.nav-dingbat {
	flex-grow:0;
	margin:0 1.6rem;
	padding:0;
	text-align: center;}

.post-navigation a {
	text-decoration: none;}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.site-header,
.site-content,
.footer {
	xborder:1px solid pink;
	display:flex;
	flex-flow:column nowrap;
	justify-content: flex-start;
	margin:0 auto;
	width:760px;}

.site-header {
	justify-content:center;
	align-items:center;
	margin:0 auto 60px;
	padding:30px 30px 0 30px;}

.site-header a {
	flex:none;
	width:200px;}

.blurb {
	margin:0 auto 40px;
	width:728px;}

.site-footer {
	background-color:black;
	color:white;
	font-size: 1.6rem;
	padding:1.6rem;
	width:100%;}
	
.site-footer div {text-align: center;}

.site-footer a {text-decoration: none;}

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/

/* General Formatting */
	
.lined {
	display: grid;
	grid-template-columns: 1fr max-content 1fr;
	align-items: center;
	gap: 30px;
	margin:0 auto;
	max-width:900px;
	text-transform: capitalize;}
	.lined.silver {
		color:rgb(180, 180, 180);
		font-size:14px;}
	.post-type-archive-portfolio .lined,
	.post-type-archive-comics .lined {margin:100px auto 0;}

.lined:before,
.lined:after {
	content: '';
	height: 1px;
	background-color: black;}
	.lined.silver:before,
	.lined.silver:after { background-color:rgb(180, 180, 180);}

/* Front Page */
.home .site-content {justify-content:center;}

.home img {
	margin:50px auto;
	max-width:400px;}

.home h1 {margin:0 auto 1.6rem;}

.toc {
	display:flex;
	flex-flow:row nowrap;
	gap:3rem;
	font-family:Bodedo;
	margin:0 auto;
	width:fit-content;}

.toc div {
	font-size:2.4rem;
	flex:0 0 45%;
	display:flex;
	flex-flow:column nowrap;}

.toc a {
	text-decoration:none;}

/* Latest */

.journal-post {padding-bottom:6rem;}

.journal-post h1 {margin-bottom:3.6rem;}
	.journal-post h1 a {text-decoration:none;}

.journal-post span {
	color:silver;
	margin: 6rem auto 7.6rem;}

.journal-post img {
	border:1px solid silver;
	margin:0 auto 4.8rem;
	padding:20px;}
	.post-template-single-comics .journal-post img {
		border:none;
		padding:0;}
	.comics-template .journal-post img {border-color:silver;}

.journal-post img:last-child {margin-bottom:0;}
.journal-post p + img {margin-top:4.8rem;}
	
.page .attachment-post-thumbnail {
	border:0;
	padding:0;}

/* Likes */

.likes.site-content {
	background:url('assets/img/mom-tea.png') bottom right 100px no-repeat;
	background-size:260px;
	padding-bottom:200px;}

/* Dragonfood */

.post-type-archive-rz_dragonfood .entry-content a {
	font-family:'BariolS-reg';
}

.dragonfood.site-content {
	background:url('assets/img/dad-eating.png') bottom right 200px no-repeat;
	background-size:160px;
	padding-bottom:60px;}

/* Comics and Portfolio Archive */

.single-comic.post-navigation {
	margin:6rem 0 1rem;
	padding:0;}

.comics-template-single-comics .journal-post img,
.single-comics .journal-post img {
	border-color:black;}

.archive h1 {text-align: center;}

p a.button {
	margin-bottom: 1.6rem;}

.grid-container {
	margin:auto;
	width:900px;}

.pix-grid {
	display: flex;
	padding: 0;
	margin: 30px auto 0;
	gap: 30px 30px;
	list-style: none;
	-webkit-flex-flow: row wrap;
	justify-content: flex-end;}

.pix-grid li {
	background-color:rgb(255,109,2);
	height: 280px;
	width: 280px;
	margin:0;
	padding:0;}
	.pix-grid li:hover {
		background-blend-mode:soft-light;}

.post-type-archive-portfolio .pix-grid:last-of-type {
	background:url('assets/img/art-kids.jpg') bottom right no-repeat;
	background-size:900px;
	padding-bottom:200px;}

.post-type-archive-portfolio .pix-grid li,
.archive .pix-grid li {
	background-position:center;
	background-size:cover;}
	
/* Colors
rgb(60,186,200) light blue
rgb(255,109,2) orange
rgb(0,134,139) dark blue
rgb(189,217,50) green
rgb(254,193,5) yellow */

.pix-grid li a {
	align-items: center;
	display:flex;
	height:280px;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	width:280px;}

.pix-grid li h3 {
	color:white;
	font-size:16px;
	margin:20px;
	opacity:0;}
	.pix-grid li:hover h3 {
		opacity:1;}

li.pix-grid-last {background-color:black;}
	li.pix-grid-last:hover {background-color:rgb(255,109,2);}

li.pix-grid-last h3 {opacity:1;}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comments-area {
	margin:4.8rem auto;}

div.comment {margin-bottom:1.6rem;}
	div.comment img {display: none;}

.comment-meta {margin-bottom:0;}
	.comment-meta span {font-family: 'BariolS-reg';}

.comment-content a {word-wrap: break-word;}

.comment-form-comment label {display: none;}

.comment-respond {font-size: 0;}
	.comment-respond p {font-size: 1.6rem;}

.logged-in-as, .comment-reply-title {display:none;}

/*--------------------------------------------------------------
# WORDPRESS JUNK
--------------------------------------------------------------*/

.sticky {}
.bypostauthor {}
.wp-caption {}
.wp-caption-text {}
.gallery-caption {}
.alignright {}
.alignleft {}
.aligncenter {}

/*--------------------------------------------------------------
# ACCESSIBILITY
--------------------------------------------------------------*/

.screen-reader-text {
	border:0;clip:rect(1px,1px,1px,1px);
	clip-path:inset(50%);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute!important;
	width:1px;
	word-wrap:normal!important;
	word-break:normal}
.screen-reader-text:focus {
	background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);
	clip:auto!important;
	clip-path:none;color:#007acc;display:block;
	font-size:14px;font-size:.875rem;
	font-weight:700;height:auto;right:5px;
	line-height:normal;
	padding:15px 23px 14px;text-decoration:none;
	top:5px;
	width:auto;
	z-index:100000}
.skip-link {
	left:-9999rem;
	top:2.5rem;
	z-index:999999999;
	text-decoration:underline}
.skip-link:focus {
	display:block;
	left:6px;
	top:7px;
	font-size:14px;
	font-weight:600;
	text-decoration:none;
	line-height:normal;
	padding:15px 23px 14px;
	z-index:100000;
	right:auto}
.visually-hidden:not(:focus):not(:active),
.form-allowed-tags:not(:focus):not(:active) {
	position:absolute !important;
	height:1px;
	width:1px;
	overflow:hidden;
	clip:rect(1px 1px 1px 1px);
	clip:rect(1px, 1px, 1px, 1px);
	white-space:nowrap}


/*--------------------------------------------------------------
# Small screens
--------------------------------------------------------------*/

@media (max-width: 910px) {

.site-header {
	xborder:1px solid blue;
	flex-flow:row wrap;
	margin:0 auto 60px;
	padding:30px 30px 0 30px;
	width:100%;}

.main-navigation ul {
	flex-flow:row wrap;}

/* Pixgrid */

.grid-container {width:100%;}

.pix-grid {
	margin:inherit auto;
	width:590px;}

.pix-grid li {
	background-size:100% 100%;
	height: 280px;
	width: 280px;}

.pix-grid li a {
	height: 280px;
	width: 280px;}

.dragonfood.site-content {
	background:none;}

.post-type-archive-portfolio .pix-grid:last-of-type {
	background:none;
	padding-bottom:0;}

}

@media (max-width: 600px) {

.site-content {
	padding:0 2rem;
	width:100%;
}
/* Pixgrid */

.grid-container {width:100%;}

.pix-grid {
	margin:inherit auto;
	width:280px;}

.pix-grid li {
	background-size:100% 100%;
	height: 280px;
	width: 280px;}

.pix-grid li a {
	height: 280px;
	width: 280px;}

}