/*
Theme Name: Ryan Rushing personal site
Theme URI: 
Author: Ryan Rushing
Author URI: 
Description: Theme for my personal site
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ryan-rushing
Tags: 
*/

:root{

	/* Spacing */
	/* --------------------------------------- */
	--s-4: calc(var(--s-3)*.5);
	--s-3: calc(var(--s-2)*.5);
	--s-2: calc(var(--s-1)*.5); 
	--s-1: calc(var(--s0)*.5);
	--s0:  1rem;
	--s1:  calc(var(--s0)*1.5);
	--s2:  calc(var(--s1)*1.5);
	--s3:  calc(var(--s2)*1.5);
	--s4:  calc(var(--s3)*1.5);


	/* Typography */
	/* --------------------------------------- */

 	/* Fonts */
	--font-sans-serif: "GeneralSans-Variable";
	--font-serif: "Recia-Variable";	/*--font-sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;*/
	--font-serif-italic: "Recia-VariableItalic";

	/* Font Sizing */
	--fs-2: calc(var(--fs-1)*.85);
	--fs-1: calc(var(--fs0)*.85);
	--fs0: 1rem;
	--fs1: calc(var(--fs0)*1.25);
	--fs2: calc(var(--fs1)*1.25);


	/* Width */
	/* --------------------------------------- */
	--max-characters: 65ch;
	--max-width: 38rem;


	/* Colors */
	/* --------------------------------------- */
	--color-background: #fff8ee; /*beige*/
	--color-text:  #272727; /* black */
	--color-links:  #6b232e; /* magenta */
	--color-accent: #ef2cac; /*hot pink*/
	--color-accent-2: #745897; /*purple*/

	/* Colors with Alpha Channel */
	--color-accent-alpha: oklch(from var(--color-accent) l c h / 10%);

	/* Color Gradients */
	--color-accent-gradient: linear-gradient(355deg, transparent, var(--color-accent-alpha));

	/* Border Width */
	/* --------------------------------------- */
	--border-width: 				var(--s-2);
	--border-width-medium: 	var(--s-3);
	--border-width-small: 	var(--s-4);

}

*{
	box-sizing: border-box;
}

html{
	color: var(--color-text);
	font-family: var(--font-serif);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4;
	font-feature-settings: "ss02" 1;
	font-variant-ligatures: common-ligatures discretionary-ligatures;
	font-variant-numeric: slashed-zero;

	@media (min-width: 500px){
		line-height: 1.6;
	}
}

body{
	background-color: var(--color-background);
	padding: 0 clamp(2vw,calc(1vw + var(--s-1)),4vw);
	position: relative;
	display: flex;
  flex-direction: column;
  min-height: 100vh;

  @media (min-width:600px){
  	padding: clamp(2vw,calc(1vw + var(--s-1)),4vw);
  }
}

header,
main,
footer{
	margin-inline: auto;
	max-inline-size: 100rem;
	inline-size: 100%;
}

header,
footer{
	display: flex;
	justify-content: space-around;
	
}

#site-header{
	padding-inline: var(--s0);
	padding-block-start: var(--s0);
	padding-block-end: var(--s2);

	@media (min-width:600px){
		justify-content: space-between;
	}
}

header{
	padding-block: 2vw;
}

footer{
	padding: 2vw;
}

.site-logo{
	inline-size: 100%;
	max-inline-size: 5rem;
	display: inline-block;
	margin-inline-start: auto;
	margin-inline-end: auto;

	svg{
		width: 100%;
		fill: var(--color-text);
	}
}

.site-logo{
  	margin-inline-start: -21px; /*accounts for the alignment of the stem in the R of "Rushing"*/
  	margin-inline-end: 0;
  
}

@media (min-width:853px){
	.site-logo{
		margin-inline-start: 0;
	}
}

footer{
	background: var(--color-accent-gradient);
	border-top: var(--border-width) solid var(--color-accent);
	container-type: inline-size;
	display: flex;
	font-family: var(--font-sans-serif);
	flex-direction: column;
  flex-wrap: wrap;

	.left,
	.center,
	.right {
		margin-block: var(--s-4);;
		align-items: center;
    display: flex;
    justify-content: center;
	}

 	.copyright{
 		margin-inline: var(--s-2);
 	}

 	li{
 		display: inline-block;

 		a{
 			padding-inline: var(--s-2);
 		}
 	}

 	li:nth-child(n+2){
 		&:before{
 			content: '\00B7';
 		}
 	}
}

@media (min-width: 500px){
	footer{
		flex-direction: row;
		flex-wrap: wrap;
	}

	.left,
	.center,
	.right{
		margin-block: 0;
	}

	.left,
	.center{
		flex: 0 0 50%;
	}

	.right{
		flex: 0 0 100%;
	}
}

@media (min-width: 750px){
	.left,
	.center,
	.right{
		flex: 30%;
	}
}

main{
	display: flex;
	justify-content: center;
	margin-inline: auto;
	flex-direction: column;
	flex-grow: 1;
	justify-content: flex-start;
	margin-block-end: 5vw;
}

nav{
	ul{
		list-style: none;
		padding: 0;
		margin: 0;
	}

	a{
		display: inline-block;
		font-family: var(--font-sans-serif);
	}
}

a{
	color: var(--color-links);
	text-decoration-color: var(--color-accent);
  text-decoration-thickness: var(--s-4);
  transition: all 250ms ease-in-out;

 	&:hover{
 		color: var(--color-accent-2);
 		text-decoration-color: var(--color-accent);
 		text-decoration-thickness: var(--s-3);
 		transition: all 250ms ease-in-out;
 	}
}

img{
	max-width: 100%;
	height: auto;
}

p, li, blockquote, time{
	max-inline-size: var(--max-characters);
	font-size: var(--fs0);
}

p{
	margin: 0;
}

p + p{
  text-indent: 1lh;
}

.work-single p:last-of-type{
	margin-block-end: 0;
}

p:has(img.aligncenter){
	text-align: center;
}

/* -------------------------------------- */
/* Blockquote */
/* -------------------------------------- */

blockquote{
	display: grid;
	grid-template-columns: 1lh auto;
	margin-block-end: 0;
	margin-block-start: var(--s0);
	margin-inline: 0;
	text-wrap: balance;

	&::before {
	  content: "\201C";
	  font-size: 2lh;
	  line-height: 0.9;
	  font-family: var(--font-sans-serif);
	}

	& + p:not(:has(cite)){
		margin-block-start: var(--s0);
	}

	p:last-of-type{
		margin-block-end: 0;
	}
}

p:has(cite) {
  margin-block-end: var(--s0);
  margin-block-start: 0;	
  margin-inline-start: 1lh;
  padding-block-start: var(--s0);
  text-indent: 0;

  &::before{
		content: "—";
	}

  & + p{
		text-indent: 0;
		margin-block-start: var(--s0);
	}
}

blockquote::before,
p:has(cite)::before{
	color: var(--color-accent);
}

blockquote,
p:has(cite){
  max-inline-size: var(--max-width);
  
}

/* -------------------------------------- */
/* Headings */
/* -------------------------------------- */

p + figure,
p + h3,
p + h2,
figure + h2{
	margin-block-start: var(--s0);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	font-family: var(--font-sans-serif);
	margin: 0;
	margin-block-end: var(--s0);
	line-height: 1.2;
}

h1{
	font-size: clamp(var(--fs0),calc(4vw + var(--fs0)),60px);
  text-wrap: balance;
}

h2{
	font-size: clamp(var(--fs0),calc(4vw + var(--fs0)),40px);
	border-bottom: var(--border-width) solid var(--color-accent);
	margin-block-start: var(--s0);
	text-wrap: balance;
}

h3{
	margin-block: var(--s0);
	font-size: clamp(var(--fs-1), calc(4vw + var(--fs0)), 30px);
}

.subtitle{
	font-size: clamp(var(--fs0), calc(1vw + var(--fs0)), 30px);
}

.subtitle{
	line-height: 1.2;
}

em, i, blockquote{
	font-family: var(--font-serif-italic);
}

figcaption{
	font-size: var(--fs0);
	font-family: var(--font-serif-italic);

	p{
		margin-inline: auto;
	  text-align: start;
	  max-width: var(--max-width);
	}
}

ul, ol{
	padding-inline-start: 1lh;
  margin-block: .5lh;
  list-style-position: outside;
}

ol li::marker{
	font-family: var(--font-serif-italic);
	font-variant-numeric: tabular-nums slashed-zero;
}

ul li::marker {
	font-family: var(--font-sans-serif);
}

li::marker{
	font-size: var(--fs1);
  color: var(--color-accent);
  line-height: 1lh;
}

video{
	inline-size: 100%;
}

.fraction{
	font-variant-numeric: oldstyle-nums slashed-zero diagonal-fractions;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

article{
	header{
    padding: 0;
    display: flex;
    flex-direction: column;
    max-inline-size: var(--max-width);
  	margin-inline: auto;
  	position: relative;
  }

  &:has(.subtitle) h1{
  	margin-block-end: 0;
  }
}

.subtitle{
	align-self: flex-start;
  text-align: start;
  text-wrap: balance;
  font-family: var(--font-sans-serif);
	font-weight: 500;
	margin-block: var(--s0);
}

#table-of-contents{
	inline-size: 100%;
	margin-inline: auto;
	max-width: var(--max-width);
	margin-block-end: 1lh;

  .table-of-contents-heading{
		font-weight: 600;
		margin-block: .5lh;
		font-family: var(--font-sans-serif);

		&:first-of-type{
			margin-block-start: 0;
		}
	}

	.table-of-contents-group{
		padding-inline: .25lh;
	  border-left: var(--border-width-medium) solid var(--color-accent);
	}

	.contents{
		padding: var(--s0);
	}

	ul{
		list-style: none;
		margin-block-end: .5lh;
	}

	details{
	  background: var(--color-accent-gradient);
	  border-bottom: var(--border-width) solid var(--color-accent-2);
	}

  details[open] summary{
  	font-weight: 600;
  	border-bottom: var(--border-width) solid var(--color-accent);
  	background: var(--color-background);
  }

  summary{
		cursor: pointer;
		font-size: var(--fs0);
		font-family: var(--font-sans-serif);
		padding: var(--s0);

		&::marker{
			color: var(--color-accent);
			font-family: monospace;
		}
	}
}

/* this goes on characters that turn into emoji on mobile */
.no-emoji{
	color: var(--color-accent);
	font-family: monospace;
}

/* mostly used for my pronouns at the top of the homepage */
.comma-to-the-top {
  font-size: .5em;
  color: var(--color-accent);
  vertical-align: top;
  &::after{
    content: "\A";
    white-space: pre;
  }
}


.rich-text {
	--toc-col: 31px;

	@media (min-width: 850px){
		--toc-col: 50px;
	}

	max-inline-size: var(--max-width); /* 38rem */
	inline-size: 100%;
	margin-inline: auto;
	position: relative;

	.heading-toc-wrap{
		display: grid;
		grid-template-columns: var(--toc-col) 1fr;
		align-items: baseline;

		@media (min-width: 850px){
			margin-inline-start: calc(var(--toc-col) * -1);
		}
	}

  .heading-link{
  	color: var(--color-accent);
  	text-decoration: none;
  	text-align: start;
    font-size: var(--fs2);
    grid-column: 1/2;

    @media (min-width: 850px){
    	text-align: center;
    	grid-column: 1;
    }

  	&:hover,
  	&:focus{
  		color: var(--color-links);
  	}
  }

  h2, h3 {
  	grid-column: 1/3;
    margin-block-start: 0;

  	@media (min-width: 850px){
  		grid-column: 2;
  	}
  }
}

#table-of-contents:target,
h2:target,
h3:target {
  animation-duration: 1s; 
  animation-name: scaleIncreaseThenNormal; 
  animation-iteration-count: 1; 
  animation-timing-function: ease-in-out; 
}

/* Define the animation stages */
@keyframes scaleIncreaseThenNormal {
  0% {
    background: var(--color-background);
  }
  50% {
    background: var(--color-accent-alpha);
  }
  100% {
    background: var(--color-background);
  }
}


section{
	&.home{
		display: flex;
		inline-size: 100%;
		margin-inline: auto;
		padding: clamp(1vh, calc(4vw + 1vh), 10vh);
  	background: var(--color-accent-gradient);
  	border-bottom: var(--border-width) solid var(--color-accent);
  	margin-block-end: var(--s0);
  	max-inline-size: clamp(50rem, 75vw, 100vw);
    flex-direction: column;
    justify-content: center;

    p{
    	text-wrap: balance;
    }

    @media (max-width: 500px){
    	h1{
    		font-size: var(--fs2);
    	}
    }
	}

	&.image-links{
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
		gap: var(--s0);
		margin-block-start: 1lh;
	}
}

.work-single{
	.featured-image{
		text-align: center;
	}

	.gallery img{
		margin-inline: auto;
	}

	figure{
    margin-inline: auto;
	}
}

.current_page_item,
.current_page_parent{
	a{
		font-weight: 600;
	}
}

.main-navigation li,
.listing li,
#table-of-contents li{
		margin-block: 0;
	}

.main-content{
	max-inline-size: var(--max-width);
  margin-inline: auto;
  inline-size: 100%;
  position: relative;
}

.listing{

	p{
		margin-block-end: var(--s0);
	}

	ul{
		list-style: none;
		padding: 0;
		margin: 0;
	}

	li {
  	max-inline-size: 100%;
  	container-type: inline-size;
  }

	a{
		display: flex;
  	gap: var(--s-1);
		align-items: baseline;
		text-decoration: none;
		overflow: hidden;
    position: relative;
    padding: var(--s0);
    color: var(--color-text);
		background: var(--color-accent-gradient);
		justify-content: space-between;

		@container(width < 500px){
			flex-direction: column;
		}

    &:hover,
  	&:active,
  	&:focus{
  		border-left: var(--border-width) solid var(--color-accent-2);
		}
	}
}

.title {
	font-size: clamp(var(--fs0),calc(1vw + var(--fs0)),var(--fs2));
	font-weight: 550;
	text-wrap: balance;
	font-family: var(--font-sans-serif);
	line-height: 1.2;
}

.categories, time{
	display: flex;
	margin-block-start: 0;
	margin-block-end: var(--s-1);
}

.logline{
	line-height: 1.2;
}

.date{
	line-height: 1;
}

.logline,
.date{
	font-size: var(--fs-1);
  text-align: end;
  text-wrap: balance;
  align-self: flex-end;

  @container(width < 500px){
  	text-align: start;
  	align-self: flex-start;
  }
}

.button{
	display: inline-block;
  margin-block: var(--s0);
}

.jagged {
  --jag: .5lh;
  
  mask-position: bottom;
  mask-size: 101%;
  mask-repeat: repeat-x;
  mask-image: 
    linear-gradient(
      to bottom, 
      black calc(100% - var(--jag)),
      transparent 0),
    repeating-linear-gradient(
      -60deg,
      black 0,
      black calc(var(--jag)/3),
      transparent calc(var(--jag)/3),
      transparent var(--jag));
}

.gallery{
	display: grid;
	gap: 1lh;
	margin-block: 1lh;
	align-items: baseline;

	figure{
		margin: 0;
		display: flex;
    flex-direction: column;
	}

	figcaption{
		inline-size: 100%;
		max-inline-size: var(--max-width);
    margin-inline: auto;
    text-align: start;
    margin-block-start: .5lh;
	}

}

.gallery-columns-1 {
	grid-template-columns: repeat(auto-fit, minmax(min(1200px, 100%), 1fr));

	figure {
	  inline-size: 100%;
	  margin-inline: auto;
	}

	picture{
		display: flex;
    justify-content: center;
	}
}

.gallery-columns-2,
.gallery-columns-3,
.gallery-columns-4{
	grid-template-columns: repeat(1, 1fr);
	
	img{
	 	inline-size: 100%;
	}
}

.gallery-columns- {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

@media (min-width: 500px){
  .gallery-columns-4{
  	grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 800px){
	.gallery-columns-2{
  	grid-template-columns: repeat(2, 1fr);
	}

	.gallery-columns-3{
  	grid-template-columns: repeat(3, 1fr);
	}

  .gallery-columns-4{
  	grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1200px){
	.gallery-columns-2,
	.gallery-columns-3,
	.gallery-columns-4{		
		img{
		 	inline-size: auto;
		}
	}
}


@media (prefers-color-scheme: dark) {
  :root {

	  /* Colors */
		/* --------------------------------------- */
		--color-background: #1f1f1f; /*dark gray*/
		--color-text:  #d1d1d1; /* light gray */
		--color-links:  #e7bbbb; /* light magenta */
		--color-accent: #bc64a5; /* light pink */
		--color-accent-2: #cfbee4; /*light purple*/

		/* Colors with Alpha Channel */
		--color-accent-alpha: oklch(from var(--color-accent) l c h / 25%);

		/* Color Gradients */
		--color-accent-gradient: linear-gradient(355deg, transparent, var(--color-accent-alpha));
	}

	h1, h2, h3, h4, h5, h6 {
		letter-spacing: 0.02em;
	}


	img{
		opacity: 0.85;
	}

	html{
		line-height: 1.8;
	}
}