/*
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;
}

/* Modal is purple with white text, but the SVG icons can't be modified within the overlay
so we specify them as white here only when modal is open */
:root.has-modal-open .wp-block-social-links svg,
:root.has-modal-open .wp-block-social-links a svg {
	color: var(--wp--preset--color--menu-contrast) !important;
}

/* 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 var(--wp--preset--color--menu-contrast);
	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-3) !important; 
}
/* Links inside the hover submenu should be white for purple background */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-submenu a:hover {
	color: var(--wp--preset--color--menu-contrast) !important; 
}
/* Add spacing inside hover submenu to match space between items */
:root:not(.has-modal-open) .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-submenu {
	padding-top:  var(--wp--preset--spacing--20);
	padding-bottom:  var(--wp--preset--spacing--20);
}
/* Rounded corners and no border on hover submenu */
:root:not(.has-modal-open) .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-submenu,
:root:not(.has-modal-open) .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-submenu li {
	border: none;
	border-radius:  var(--jer--preset--round-corners--default);
}

.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;
}

/* 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 var(--wp--preset--color--accent-1);
	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);
}