/*
Theme Name: Jer's Twenty Twentyfive Child Theme
Theme URI: https://github.com/jerclarke/jer-twentytwentyfive-child-theme
Author: Jer Clarke
Author URI: https://jerclarke.org
Description: Jer's personal child theme of 2025
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: jer-twentytwentyfive-child-theme
GitHub Theme URI: https://github.com/jerclarke/jer-twentytwentyfive-child-theme
Tags: 
*/

/* Seems there's no way to alter the breakpoints where columns switch from 3 to 1, this raises it from 600 to 100 for post grids */
@media (max-width: 1000px) {
	.wp-block-post-template-is-layout-grid {
		grid-template-columns: 1fr;
	}
}

/* Some aggressive text-wrap values that can't go in theme.json*/
body {
	text-wrap: pretty;
}

/* https://wordpress.stackexchange.com/questions/431775/how-can-i-change-the-background-color-of-the-built-in-navigation-modal-of-wordpr/431776#431776 */
:root.has-modal-open {
	--wp--preset--color--base: var(--wp--preset--color--accent-1);
	--wp--preset--color--contrast: #fff;
}

/* Tweak modal menu style to have big text and sensible spacing on sub-lists */
:root.has-modal-open :where(.wp-block-navigation) {
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 600;
}
:root.has-modal-open .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: var(--wp--preset--spacing--30);
}
:root.has-modal-open .wp-block-social-links, .wp-block-social-links.has-normal-icon-size {
    font-size: 36px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	padding-top: 0;
	padding-left: 0;
	padding-right: 1em;
	border-right: 3px solid white;
	margin-top: 1em;
}

/* We set top-padding on headings inside posts in theme.json, but we only want it for flow between text items */
:root :where(.wp-block-post-content h2):first-child,
:root :where(.wp-block-post-content h3):first-child,
:root :where(.wp-block-post-content h4):first-child,
:root :where(.wp-block-post-content h5):first-child,
:root :where(.wp-block-post-content h6):first-child {
    padding-top: 0;
}

/* Fix issue where header menu links weren't purple on hover */
:root:not(.has-modal-open) .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent-1) !important; /* Change to your desired color */
}

.wp-block-query .wp-block-post-title,
.wp-block-media-text * {
	text-wrap: balance;
}

/* For some wild reason parent theme marks 1px as !important */
.wp-block-site-title a {
	text-decoration-thickness: 5px !important;
}

/* Media & Text block is foolish, remove 8% side padding on text section and replace with sensible gap */
.wp-block-media-text>.wp-block-media-text__media {
	align-self: start;
}
.wp-block-media-text {
	gap: clamp(1.5rem, 4vw, 4rem);
}
.wp-block-media-text>.wp-block-media-text__content {
	padding-left: 0;
	padding-right: 0;
}
.wp-block-media-text>.wp-block-media-text__content p:first-child {
	margin-block-start: 0;
}

/* Comments styles because I don't want to override the template and there's nothing to hook into for each .comment */
.wp-block-comments-query-loop {
	margin-top: var(--wp--preset--spacing--50) !important;
}
.wp-block-comments .comment {
	border-left: 2px solid #ddd;
	border-left: 2px solid var(--wp--preset--color--accent-3);
	padding-left: 1.2rem;
}
.wp-block-comments .comment > .wp-block-group {
	padding-bottom: var(--wp--preset--spacing--30);
}
/* This could go in theme.json if it wasn't for the "+" */
.comment + .comment-respond {
	margin-top: calc(var(--wp--preset--spacing--50) * -1);
}