/**
 * Stylesheet for the public-facing display.
 *
 * @since       5.12.0
 * @since       6.0.0     Implement new UI.
 * @package     pNet
 * @copyright   2024 Keith Pfeiffer
 */

/* @todo - consider different post formats */
.inside-article .entry-content {
	margin-bottom: var(--pnet-v-space);
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
}

/* @todo - implement thi properly. This for the media selector. */
.media-router .media-menu-item {
	color: Var(--on-surface);
}

.pnet-not-found select {
	width: 100%;
}

/* =============================================================================
# Page layout
*/

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	row-gap: 0;
}

.site {
	flex-grow: 1;
}

.site.container {
	width: 100%;
}

.inside-article .entry-title {
	margin-bottom: var(--pnet-v-space);
}

.inside-article>:last-child {
	margin-bottom: 0;
}

/* =============================================================================
# Elements
*/

p a {
	white-space: nowrap;
}

.comments-area a[target=_blank]::after,
.article:not(.pnet-card) a:not(.pnet-icon-link, button)[target=_blank]::after {
	background-image: url("../icons/external-link.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: inline-block;
	height: var(--pnet-text-xxs);
	margin-left: calc(var(--pnet-h-space)/4);
	width: var(--pnet-text-xxs);
}

blockquote {
	border: none;
	font-size: 1rem;
	font-style: italic;
	margin: 0 0 var(--pnet-v-space) 0;
	padding: 0 var(--pnet-h-double-space);
}

blockquote::before {
	content: "\275D";
	font-size: var(--pnet-text-huge);
	left: 0;
	position: absolute;
	top: -0.25rem;
}

blockquote p {
	margin-bottom: var(--pnet-v-half-space);
}

blockquote cite {
	margin-bottom: 0;
}

blockquote cite::before {
	content: "\2015\00a0";
}

figcaption {
	text-align: center;
}

h1,
h2 {
	clear: both;
}

dl,
ol,
ul {
	margin-top: 0;
	margin-bottom: var(--pnet-v-space);
	margin-right: 0;
}

ol,
li>ol {
	margin-left: 1.6rem;
}

ul,
li>ul {
	margin-left: 1.2rem;
}

/* =============================================================================
# Content
*/

.site .generate-columns-container {
	padding: 0 var(--pnet-h-space);
}

.site .generate-columns-container .page-header {
	margin-bottom: var(--pnet-v-space);
	padding: 0;
}

.dynamic-entry-content p:last-child {
	margin-bottom: 0;
}

article:has(.pnet-container-float-left, .pnet-container-float-right) p {
	overflow: hidden
}

.pnet-publication-history .pnet-form-row {
	margin-bottom: 0;
}

.gp-modal__overlay {
	backdrop-filter: blur(var(--pnet-overlay-blur));
}

.gp-modal__container {
	background-color: var(--gp-search-modal-bg-color);
	border-radius: var(--pnet-border-radius);
	box-shadow: var(--pnet-shadow-elevation-4);
}

a.generate-back-to-top,
.load-more .button {
	border-radius: var(--pnet-border-radius);
	box-shadow: var(--pnet-shadow-elevation-1);
}

a.generate-back-to-top {
	opacity: var(--pnet-dim);
	bottom: var(--pnet-v-double-space);
	right: var(--pnet-h-space);
	z-index: 40;
}

.load-more {
	text-align: center;
}

a.generate-back-to-top:is(:focus, :hover),
.load-more .button:is(:focus, :hover) {
	box-shadow: var(--pnet-shadow-elevation-8);
	opacity: 1;
}

/* -----------------------------------------------------------------------------
## Buttons
*/

.pnet-button-text a {
	color: currentColor;
	text-decoration: none;
}

.pnet-button.pnet-icon-link {
	padding: var(--pnet-v-half-space) var(--pnet-h-half-space);
}

/* -----------------------------------------------------------------------------
### Social buttons
*/

.pnet-button-filled.pnet-button-facebook:not(:focus, :hover) {
	background-color: #3b5997;
}

.pnet-button-filled.pnet-button-goodreads:not(:focus, :hover) {
	background-color: #553b08;
}

.pnet-button-filled.pnet-button-instagram:not(:focus, :hover) {
	background-color: #8a3ab9;
}

.pnet-button-filled.pnet-button-linkedin:not(:focus, :hover) {
	background-color: #0074a1;
}

.pnet-button-filled.pnet-button-pinterest:not(:focus, :hover) {
	background-color: #bd081c;
}

.pnet-button-filled.pnet-button-rss:not(:focus, :hover) {
	background-color: #ff6600;
}

.pnet-button-filled.pnet-button-spotify:not(:focus, :hover) {
	background-color: #1db954;
}

.pnet-button-filled.pnet-button-twitter:not(:focus, :hover) {
	background-color: black;
	color: white;
}

.pnet-button-filled.pnet-button-youtube:not(:focus, :hover) {
	background-color: #ff0000;
}

/* -----------------------------------------------------------------------------
## Comments
*/

.separate-containers .comments-area {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: Var(--pnet-v-space);
	max-width: var(--pnet-text-width);
	padding: var(--pnet-v-half-space) var(--pnet-h-space);
}

.comment-navigation {
	display: flex;
	justify-content: space-between;
}

.comment-navigation a {
	text-transform: uppercase;
}

.comment-list>.comment:first-child {
	padding-top: var(--pnet-v-space);
}

.comment-body {
	padding: 0;
}

.comment-body:has(+*) {
	margin-bottom: var(--pnet-v-space);
}

.comment-meta {
	margin-bottom: var(--pnet-v-half-space);
}

.comment-meta .comment-metadata {
	font-size: 1rem;
}

.comment-meta .comment-edit-link {
	text-transform: uppercase;
}

.comment.bypostauthor .comment-author a::after {
	content: '\00a0\2013\00a0 author';
}

.comment-content {
	border: none;
	margin-top: 0;
	padding: 0;
}

.pnet-comment-reply {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.comment-content .reply {
	font-size: 1em;
	text-transform: uppercase;
}

.comment-list .comment .children {
	border: none;
	margin-top: 0;
	padding: 0;
}

#reply-title {
	align-items: center;
	column-gap: var(--pnet-h-space);
	display: flex;
	justify-content: space-between;
}

#cancel-comment-reply-link {
	font-size: 1rem;
	font-weight: normal;
	padding-left: var(--pnet-h-space);
}

.comment-form input,
.comment-form textarea {
	margin-bottom: 0;
}

.comment-form-cookies-consent .pnet-form-row-content {
	align-items: center;
	column-gap: var(--pnet-h-half-space);
	display: flex;

}

.comment-form-cookies-consent .pnet-form-row-content label {
	flex-grow: 1;
	width: 0;
}


/* -----------------------------------------------------------------------------
## Notices
*/

.pnet-notice-container .pnet-notice-icon:has(~ .pnet-notice-info) {
	background-color: var(--info);
	color: var(--on-primary);
}

.pnet-notice-container .pnet-notice-icon:has(~ .pnet-notice-warning) {
	background-color: var(--warning);
	color: var(--on-surface);
}

.pnet-notice-container .pnet-notice-icon:has(~ .pnet-notice-error) {
	background-color: var(--error);
	color: var(--on-primary);
}

.pnet-notice-container .pnet-notice-icon:has(~ .pnet-notice-success) {
	background-color: var(--success);
	color: var(--on-primary);
}

.pnet-grid-standard .pnet-user-message {
	grid-column: 1 / -1;
}

/* =============================================================================
# Footer
*/

.site-footer {
	position: relative;
	z-index: 20;
}

.site-footer ul.wp-block-navigation {
	align-items: center;
	row-gap: var(--pnet-v-half-space);
}

.site-footer .pnet-social-list-follow {
	justify-content: center;
}

.site-footer p {
	margin-bottom: 0;
}

/* =============================================================================
# Effects
*/

/* -----------------------------------------------------------------------------
## Material Design ripple
*/

.menu-item:not(.menu-item-has-children) a::after,
.pnet-button::after {
	aspect-ratio: 1;
	background-color: var(--scrim);
	border-radius: 50%;
	content: "";
	left: 0;
	opacity: 0;
	position: absolute;
	width: 100%;
}

.menu-item:not(.menu-item-has-children) a:is(:focus)::after,
.pnet-button:is(:focus)::after {
	animation: ripple 0.75s ease-out;
}

/* =============================================================================
# Media queries
*/

@media screen and (max-width: 767px) {
	.pnet-social-list .gb-text {
		display: none;
	}
}

@media screen and (min-width: 1201px) {
	.main-navigation .main-nav {
		margin-left: auto;
	}
}

/* =============================================================================
## Accessibility
*/

@media screen and (prefers-reduced-motion) {
	.pnet-spinner {
		animation-duration: 2s;
	}
}