/*
Theme Name: The Ankler Child
Theme URI: https://theankler.com
Description: A child theme of Ollie for The Ankler
Author: The Ankler Team
Author URI: https://theankler.com
Template: ollie
Version: 1.0.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theankler-child
*/

/* Add your custom styles here */

:root {
	--ankler--preset--color--primary-accent: #777382; /* see https://xwp-co.atlassian.net/browse/ANK-111?focusedCommentId=233814 */
}
/* Remove whitespace at the very bottom of the page */
.wp-site-blocks {
	padding-bottom: 0;
}

/**
 * See https://xwp-co.atlassian.net/browse/ANK-111
 * Styling of figcaption, jp-carousel-caption ( for Jetpack lightbox ), and image-credit
 */
body div[class*="wp-block-"] figcaption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--main);
	margin-top: 0.5rem;
	line-height: 1.2;
	text-align: left;
}
.jp-carousel-info-footer .jp-carousel-photo-caption,
.jp-carousel-photo-info .jp-carousel-caption {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--small);
	color: var(--jp-carousel-primary-color);
	text-align: left;
	line-height: 1.2;
}
body div[class*="wp-block-"] figcaption .image-credit,
.jp-carousel-photo-caption .image-credit,
.jp-carousel-caption .image-credit {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.7rem;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.5px;
	line-height: 1.2;
	font-family: var(--wp--preset--font-family--primary);
	color: var(--ankler--preset--color--primary-accent);
}
.jp-carousel-photo-caption .image-credit a,
.jp-carousel-photo-caption .image-credit,
.jp-carousel-caption .image-credit,
.jp-carousel-caption .image-credit a {
	color: var(--jp-carousel-primary-subtle-color) !important;
}
.image-credit a {
	display: inline;
	color: var(--ankler--preset--color--primary-accent);
	text-decoration: underline;
}

.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption.gallery-caption,
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	background: var(--wp--preset--color--black);

	.image-credit {
		color: var(--jp-carousel-primary-subtle-color);
	}
}
/* Choosing to hide the figcaption on the gallery block. The only thing in it is the
credit, added by us. Both caption and credit appear when image is expanded. We also
end up fully removing this figcaption with Javascript */
.wp-block-gallery figcaption.wp-element-caption {
	display: none;
}
.wp-block-gallery.has-nested-images
	figure.wp-block-image:has(figcaption):before {
	display: none;
}

/**
 * ANK-63: Header overrides
 * See https://xwp-co.atlassian.net/browse/ANK-63
 */
.wp-block-navigation__responsive-container:not(.is-menu-open)
	:where(.wp-block-navigation__submenu-container)
	a,
.wp-block-navigation__responsive-container:not(.is-menu-open)
	:where(.wp-block-navigation__submenu-container)
	.wp-block-navigation-submenu__toggle {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) !important;
}
.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container {
	border-radius: 0;
	margin-left: calc(var(--wp--preset--spacing--40) * -1);
}
.wp-block-navigation__responsive-container:not(.is-menu-open)
	:where(.wp-block-navigation__submenu-container)
	li:first-child {
	padding-top: var(--wp--preset--spacing--20);
}
.wp-block-navigation__responsive-container:not(.is-menu-open)
	:where(.wp-block-navigation__submenu-container)
	li:last-child {
	padding-bottom: var(--wp--preset--spacing--20);
}
.wp-block-navigation__responsive-container:not(.is-menu-open)
	:where(.wp-block-navigation__submenu-container)
	li {
	white-space: nowrap; /* in combination with removing the min-width below, this ensures the submenus are always the perfect width */
}
body
	.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container {
	min-width: 0 !important; /* !important to override important in core-navigation */
}

/* This hides the social media part of the nav on mobile when the search form is showing */
@media (max-width: 600px) {
	div.ankler-sticky-menu:has(
			form[role="search"]:not(.wp-block-search__searchfield-hidden)
		)
		div.secondary-nav {
		display: none !important;
	}
}
.wp-block-navigation__responsive-container:not(
		.hidden-by-default,
		.is-menu-open
	)
	.ankler-mobile-logo {
	display: none;
}

/* Get the search box in the header as requested */
div.ankler-sticky-menu .wp-block-search__inside-wrapper {
	height: 1.5rem;
}
div.ankler-sticky-menu .wp-block-search__button {
	padding: 0;
}
div.ankler-sticky-menu .wp-block-search {
	margin-left: 1rem;
}

/* Reduce spacing between logo and mobile menu in overlay */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding-top: 2rem;
}
/* Remove background color on hamburger menu */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	background: none;
}
/* Change color of title links in Jetpack top posts */
.wp-block-jetpack-top-posts h2 a {
	color: var(--wp--preset--color--custom-black);
}
.wp-block-jetpack-top-posts h2 a:hover {
	color: var(--wp--preset--color--custom-orange);
}

/* Responsive iframes (e.g. YouTube embeds in author multimedia field) */
.wp-block-ankler-core-author-details iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}
/* Here specifically so the first p in a the_content filter applied block doesn't have a leading margin */
.wp-block-ankler-core-author-details > :first-child {
	margin-block-start: 0;
}
/* See ANK-70 */
.wp-block-query-pagination.is-content-justification-space-between a {
	padding: 0;
}
/* On the archive pages, this puts the side rail with the term image
   and description between the featured and main lists on mobile */

/* Mobile first: side rail appears first, main list below */
.archive-side-rail {
	order: 1;
}

.archive-main-list {
	order: 2;
}
/* Desktop: main on left, side on right */
@media (min-width: 782px) {
	.archive-side-rail {
		order: 2;
	}

	.archive-main-list {
		order: 1;
	}
}
@media (max-width: 781px) {
	.ankler-reduce-block-spacing-on-mobile > * + * {
		margin-block-start: 1rem;
	}
}
/* See https://xwp-co.atlassian.net/browse/ANK-70?focusedCommentId=236032 */
.wp-block-ankler-core-author-details h6,
h5,
h4 {
	margin-bottom: 0;
	margin-top: 1em;
}
.wp-block-ankler-core-author-details p {
	margin-top: 0.5em;
}
/* ANK-95: Ad slot visibility — desktop/mobile toggling via CSS breakpoints */
@media (min-width: 768px) {
	.ad-slot-mobile {
		display: none;
	}
}
@media (max-width: 767px) {
	.ad-slot-desktop {
		display: none;
	}
}
/* ANK-95: align ads in the centers of their divs by default */
.ad-slot-desktop > div,
.ad-slot-mobile > div {
	display: flex;
	justify-content: center;
	align-items: center;
}
/* Remove the annoying baseline gap on images ( keeping a specific selector to prevent messing with auto-placed ads from GAM ) */
.ad-slot-desktop a > img,
.ad-slot-mobile a > img {
	display: block;
}
/* ANK-128: distribute rail children across full column height */
.ankler-rail-column {
	justify-content: space-between;
}
.ankler-group-with-sticky-ad {
	flex-grow: 1;
	justify-content: space-between;
}
/* in article ad slot styling, including label */
body.single-post .wp-block-post-content .ankler-advanced-ads-entity-placement {
	margin-block-start: 1.5rem;
	margin-block-end: 0;
	border: 1px solid #b9b9b9;
	border-left: none;
	border-right: none;
	padding-top: 1rem;
	padding-bottom: 2rem;

	/* Remove baseline gap on images */
	a > img {
		display: block;
		margin: auto;
	}

	&::before {
		content: "Advertisement";
		display: block;
		text-align: center;
		font-family: var(--wp--preset--font-family--wittgenstein);
		letter-spacing: 2px;
		text-transform: uppercase;
		font-size: var(--wp--preset--font-size--x-small);
		color: var(--wp--preset--color--primary-accent);
		margin-bottom: 1rem;
	}
}
/*
 * https://xwp-co.atlassian.net/browse/ANK-78?focusedCommentId=236549
 * and https://xwp-co.atlassian.net/browse/ANK-217
 */
body.single-post .wp-block-post-content p {
	hyphens: auto;
	hyphenate-limit-chars: 8;
}
/* https://xwp-co.atlassian.net/browse/ANK-214 */
.wp-lightbox-container {
	display: block;
	text-align: center;
}

/*
 * https://xwp-co.atlassian.net/browse/ANK-260
 *
 * Change the breakpoints of when the mobile menu appears and columns wrap.
 */
@media (min-width: 600px) {
	/* Reset display at the hard-coded WP breakpoint */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(
			.is-menu-open
		) {
		display: none;
	}
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}
@media (min-width: 900px) {
	/* Set up our own breakpoint for the mobile menu */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(
			.is-menu-open
		) {
		display: block;
	}
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}
@media (min-width: 782px) {
	/* Reset the wrapping at the hardcoded WP breakpoint */
	body .wp-block-columns {
		flex-wrap: wrap !important;
	}
}
@media (min-width: 900px) {
	/* Set our own nowrap breakpoint */
	.wp-block-columns {
		flex-wrap: nowrap !important;
	}
}
@media (max-width: 899px) {
	/* Change the flex-basis below our breakpoint */
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}
@media (max-width: 899px) {
	.reverse-column-flow-on-mobile {
		flex-flow: column-reverse;
	}
}