/*
Theme Name: Friends of the Library Child Theme
Theme URI: https://dreugeneclarkfriends.org
Author: Friends of the Dr. Eugene Clark Library
Author URI: https://dreugeneclarkfriends.org
Description: Block child theme of Twenty Twenty-Five for the Friends of the Dr. Eugene Clark Library. Palette drawn from the 1899 building's masonry and its stained-glass window.
Template: twentytwentyfive
Version: 2.0.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: friends-library-child
*/

/* ---------------------------------------------------------------------------
 * Header — brick course along the top, quiet white masthead below.
 * ------------------------------------------------------------------------ */

.site-header {
	border-top: 4px solid var(--wp--preset--color--accent-1);
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.site-header a {
	text-decoration: none;
}

/* Navigation pills — classNames live on the wp_navigation post (ID 4 on live). */
.wp-block-navigation-item.menu-join-button a.wp-block-navigation-item__content {
	border: 1.5px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	border-radius: 999px;
	padding: 0.35rem 1.1rem;
	font-weight: 600;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-navigation-item.menu-join-button a.wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-navigation-item.menu-donate-button a.wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: calc(0.35rem + 1.5px) 1.1rem;
	font-weight: 600;
	transition: background-color 0.15s ease;
}

.wp-block-navigation-item.menu-donate-button a.wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}

/* Inside the mobile overlay menu the pills fight the layout — render Join and
   Donate as plain menu items there. */
.wp-block-navigation__responsive-container.is-menu-open .menu-join-button a.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .menu-donate-button a.wp-block-navigation-item__content {
	border: none;
	background: transparent;
	color: var(--wp--preset--color--base);
	border-radius: 0;
	padding: 0;
}

.site-footer .wp-block-navigation-item.menu-join-button a.wp-block-navigation-item__content {
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

.site-footer .wp-block-navigation-item.menu-join-button a.wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------------------
 * Section rhythm — bands butt together; each carries its own padding.
 * ------------------------------------------------------------------------ */

.wp-site-blocks > *,
.wp-block-post-content > .alignfull,
main.wp-block-group.alignfull > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Small-caps label (used sparingly, always ink or masonry — never a third hue). */
.smallcaps {
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Homepage events list ([friends_upcoming_events]) — editorial rows.
 * ------------------------------------------------------------------------ */

.friends-events-list {
	margin: 2rem 0 0.5rem;
}

.friends-event {
	display: grid;
	grid-template-columns: 8.5rem 1fr auto;
	align-items: baseline;
	gap: 1.25rem;
	padding: 1.1rem 0.25rem;
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.friends-event:last-child {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.friends-event__date {
	color: var(--wp--preset--color--accent-1);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.85rem;
}

.friends-events-list a.friends-event__title {
	font-family: Fraunces, Georgia, serif;
	font-size: 1.35rem;
	font-weight: 560;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.friends-events-list a.friends-event__title:hover {
	color: var(--wp--preset--color--accent-1);
}

.friends-event__time {
	color: rgba(42, 30, 25, 0.65);
	font-size: 0.9rem;
}

@media (max-width: 600px) {
	.friends-event {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}
}

/* ---------------------------------------------------------------------------
 * Editorial news grid — hairline rules between columns instead of cards.
 * ------------------------------------------------------------------------ */

.news-editorial .wp-block-post-template {
	gap: 0;
}

.news-editorial .wp-block-post-template > li {
	padding: 0 2rem;
	border-left: 1px solid var(--wp--preset--color--accent-6);
}

.news-editorial .wp-block-post-template > li:first-child {
	padding-left: 0;
	border-left: none;
}

@media (max-width: 781px) {
	.news-editorial .wp-block-post-template > li {
		padding: 1.5rem 0;
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--accent-6);
	}

	.news-editorial .wp-block-post-template > li:first-child {
		padding-top: 0;
		border-top: none;
	}
}

/* ---------------------------------------------------------------------------
 * The Events Calendar — skin via CSS variables, no template overrides.
 * ------------------------------------------------------------------------ */

:root {
	--tec-color-accent-primary: var(--wp--preset--color--accent-1);
	--tec-color-accent-primary-hover: var(--wp--preset--color--accent-2);
	--tec-color-text-events-title: var(--wp--preset--color--contrast);
	--tec-color-text-event-title: var(--wp--preset--color--contrast);
	--tec-color-link-primary: var(--wp--preset--color--accent-1);
	--tec-color-link-accent: var(--wp--preset--color--accent-1);
	--tec-color-link-accent-hover: var(--wp--preset--color--accent-2);
	--tec-color-background-events: transparent;
	--tec-font-family-sans-serif: 'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;
	--tec-font-family-base: 'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;
}

.tribe-events .tribe-events-calendar-list__event-title,
.tribe-events .tribe-events-calendar-month__calendar-event-title {
	font-family: Fraunces, Georgia, serif;
}

/* ---------------------------------------------------------------------------
 * Contact Form 7 (carried over from v1, colors mapped to the new palette)
 * ------------------------------------------------------------------------ */

.wpcf7-form {
	max-width: var(--wp--style--global--content-size, 720px);
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	font-size: var(--wp--preset--font-size--medium);
	font-family: var(--wp--preset--font-family--body);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 4px;
	background-color: var(--wp--preset--color--accent-5);
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	border-color: var(--wp--preset--color--accent-1);
	outline: none;
	box-shadow: 0 0 3px var(--wp--preset--color--accent-1);
}

.wpcf7-form label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	color: var(--wp--preset--color--contrast);
}

.wpcf7-form input[type="submit"] {
	padding: 10px 20px;
	font-size: var(--wp--preset--font-size--medium);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.wpcf7-form input[type="submit"]:hover {
	background-color: var(--wp--preset--color--accent-2);
}

.wpcf7-not-valid-tip {
	color: var(--wp--preset--color--accent-1);
	font-size: var(--wp--preset--font-size--small);
	margin-top: -10px;
	margin-bottom: 10px;
}