/*
Theme Name:     Spookt
Theme URI:      
Description:    Pronghorn child theme.
Author:         Me
Author URI:     
Template:       pronghorn
Version:        0.1.16
*/

html {
	/* makes the heading font and regular text look better on most browsers */
	-webkit-font-smoothing: antialiased;
}

header.wp-block-template-part {
	.wp-block-site-title {
		padding-top: 22px;
	}
}

.wp-block-navigation {
	.wp-block-navigation__responsive-container.is-menu-open {
		.wp-block-navigation__responsive-container-content {
			.wp-block-navigation__container {
				.wp-block-site-logo {
					background-color: var(--wp--preset--color--base);
				}

				.wp-block-navigation-item:has(.wp-block-site-title) {
					margin: auto;
					margin-top: -5px;
				}

				.wp-block-site-title {
					margin: 0;
					padding-top: 0;

					a {
						color: var(--wp--preset--color--base-contrast);
					}
				}

				.wp-block-social-links {
					background-color: var(--wp--preset--color--base);
					.wp-block-social-link.wp-social-link
						.wp-block-social-link-anchor
						svg {
						color: var(--wp--preset--color--base-contrast);
						fill: var(--wp--preset--color--base-contrast);
					}
				}
			}
		}
	}

	&.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
		left: -10px;
	}
}

.wp-block-quote {
	padding: 15px;
	margin-inline-start: 0;
	margin-inline-end: 0;
	background-color: #000;
	border: 1px solid #333;
	border-left-width: 0.5rem;
	font-size: 1.2rem;
	font-style: italic;
}

.wp-block-tag-cloud a {
	border-radius: 8px;
}

main .wp-block-heading {
	scroll-margin-top: 16px;
}

main .wp-block-separator {
	border-top: 1px solid #646464;	
}

.pronghorn-swiper {
	.swiper-button-prev, 
	.swiper-button-next {
		background-color: color-mix(in srgb, var(--wp--preset--color--primary-contrast) 80%, transparent);
	}
}

.wp-block-pronghorn-gallery .pronghorn-gallery {
	.swiper .swiper-slide.swiper-slide-next img {
		opacity: unset;
	}
}



.spookt-toc-holder {
	background-color: #000;
	border: 1px solid #333;
	padding: 8px 10px;
	width: 100%;
	top: 16px;

	.wp-block-rank-math-toc-block {
		margin-top: var(--wp--preset--spacing--30);

		h2 {
			margin-top: 0;
			margin-bottom: 0;
			padding-left: 10px;
		}

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

			li {
				text-decoration: none;
				width: 100%;
				box-sizing: border-box;
				text-align: left;
				position: relative;

				.spookt-toc-link-wrapper {
					position: relative;
					display: flex;
					align-items: center;
				}

				/* Select the item, or its parent if item is in a closed submenu */
				.spookt-toc-link-wrapper[data-current],
				.spookt-toc-link-wrapper:has(~ ul:not(.is-open) .spookt-toc-link-wrapper[data-current]){
					border-color: var(--wp--preset--color--primary);
					border-width: 0.5px;
					border-style: solid;
					background-color: #333;
				}

				a {
					text-decoration: none;
					padding: 8px 22px 8px 16px;
					display: block;
					width: 100%;
					
					&:visited {
						color: var(--wp--preset--color--primary);
					}

					&:hover {
						text-decoration: underline;
					}
				}
				
				.spookt-toc-submenu-toggle {
					position: absolute;
					right: 12px;
					top: 50%;
					transform: translateY(-50%);
					color: var(--wp--preset--color--primary);
					cursor: default;

					svg {
						width: 1.5rem;
						height: 1.5rem;
						fill: currentColor;
					}

					&.is-open {
						.spookt-toc-submenu-toggle-icon-open {
							display: inline;
						}
						.spookt-toc-submenu-toggle-icon-closed {
							display: none;
						}
					}

					&:not(.is-open) {
						.spookt-toc-submenu-toggle-icon-open {
							display: none;
						}
						.spookt-toc-submenu-toggle-icon-closed {
							display: inline;
						}
					}
				}

				ul {
					margin-left: var(--wp--preset--spacing--50);
					height: 0;
					overflow: clip;
					transition: height 0.2s ease-out;

					&.is-open {
						height: auto;
						@supports (height: calc-size(auto, size)) {
							/* calc-size() supported */
							height: calc-size(auto, size);
						}
					}
				}
			}
		}
	}
}

/* Don't hide the toc submenus in the admin */
.block-editor-iframe__body {
	.spookt-toc-holder {
		& .wp-block-rank-math-toc-block {
			& ul {
				& li {
					ul {
						height: auto;
					}
				}
			}
		}
	}
}



.spookt_breadcrumbs_holder {
	margin-block-start: -0.3rem;
	margin-block-end: -0.6rem;
	padding-left: var(--wp--preset--spacing--60);

	.rank-math-breadcrumb {
		font-size: 0.875rem;
		padding-left: 5px;

		.separator {
			margin-left: 6px;
    	margin-right: 6px;
		}

		a {
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}


		.spookt-breadcrumbs-home-icon {
			svg {
				width: 1rem;
				height: 1rem;
				fill: currentColor;
				position: relative;
				top: 3px;
			}
		}
	}
}

/* Tweak the looks for the related post overview cards */
.pronghorn-post-card {
	border-radius: 8px;
	background-color: #000;
	border: 1px solid #333;
}

.pronghorn-swiper {
	--swiper-pagination-bottom: 24px;
}



.spookt-place-type-city {
	&.is-layout-flex {
	gap: .2em;
	}

	a {
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}

	.wp-block-post-terms__suffix {
		margin-left: .2em;
	}
}



.wp-theme-pronghorn.wp-child-theme-spookt {

	header {
		nav {
			margin-top: 27px; /* Centering nav to logo */
		}
	}

	gmp-map {
		border: 1px solid #333;
	}
	
	.spookt-pretitle {
		font-size: 0.875rem;
		color: oklch(from var(--wp--preset--color--base-contrast) calc(l - 0.2) c h);
	}

	.spookt-post-content-holder {
		margin-block-start: 0.2rem;

		.spookt-subtitle {
			margin-left: 1.5rem;
    	margin-top: -0.5rem;
		}

		.spookt-contributors {
			.wp-block-image {
				img {
					border-radius: 50%;
					outline: #999 solid 1px;
				}
				
				&:not(:first-child){
					margin-left: -25px;
				}
			}
		}

		.spookt-sources {
			img {
				border-radius: 50%;
			}
		}
	}
}