/*
Theme Name: BVCL
Theme URI: https://bvcl.org.uk/
Author: Beacon Villages Community Library
Description: Block theme for Beacon Villages Community Library. Keeps the library's purple identity and logo, puts opening hours and the most-used services first, and is editable in the Site Editor.
Version: 1.0.1
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bvcl
Tags: block-patterns, full-site-editing, one-column
*/

/* ---------- Base ---------- */
:root {
	--bvcl-focus: var(--wp--preset--color--amethyst);
	--bvcl-rule: var(--wp--preset--color--lilac);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(.wp-site-blocks) :focus-visible {
	outline: 3px solid var(--bvcl-focus);
	outline-offset: 2px;
}

a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Old content inserted fixed-width PDF viewers and images; keep them inside the page. */
.wp-block-post-content iframe,
.wp-block-post-content embed,
.wp-block-post-content object,
.wp-block-post-content video,
.wp-block-post-content img {
	max-width: 100%;
}
.wp-block-post-content img { height: auto; }
.wp-block-post-content a,
.wp-block-post-content code { overflow-wrap: anywhere; }

/* ---------- Masthead ---------- */
.bvcl-masthead .wp-block-site-logo img {
	width: 100%;
	height: auto;
}
.bvcl-masthead .wp-block-site-title a { color: var(--wp--preset--color--paper); text-decoration: none; }
.bvcl-masthead a:focus-visible,
.bvcl-navbar a:focus-visible,
.bvcl-navbar button:focus-visible,
.bvcl-band a:focus-visible,
.bvcl-footer a:focus-visible {
	outline-color: var(--wp--preset--color--mist);
}
.bvcl-masthead-contact a { color: var(--wp--preset--color--paper); }
.bvcl-masthead-contact { color: var(--wp--preset--color--paper); }

/* ---------- Navigation bar ---------- */
.bvcl-navbar .wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.85rem 1rem;
	text-decoration: none;
}
.bvcl-navbar .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.bvcl-navbar .wp-block-navigation .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--amethyst);
	color: var(--wp--preset--color--paper);
}
.bvcl-navbar .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.bvcl-navbar .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	box-shadow: inset 0 -4px 0 var(--wp--preset--color--lilac);
}
.bvcl-navbar .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--plum) !important;
	color: var(--wp--preset--color--paper) !important;
	border: 0 !important;
	min-width: 15rem !important;
	box-shadow: 0 6px 0 var(--wp--preset--color--violet);
}
.bvcl-navbar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.7rem 1rem;
}
.bvcl-navbar .wp-block-navigation__responsive-container-open,
.bvcl-navbar .wp-block-navigation__responsive-container-close {
	padding: 0.75rem 0;
}
.bvcl-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.6rem 0;
}
.bvcl-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	box-shadow: none;
	padding-left: 1rem;
}

/* ---------- Page title band ---------- */
.bvcl-title-band .wp-block-post-title,
.bvcl-title-band .wp-block-query-title { margin: 0; }

/* ---------- Notice (group style) ---------- */
.is-style-bvcl-notice {
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--lilac);
	border-left: 6px solid var(--wp--preset--color--amethyst);
	border-radius: 4px;
	color: var(--wp--preset--color--ink);
}
.is-style-bvcl-notice a { color: var(--wp--preset--color--plum); font-weight: 600; }

/* ---------- Opening-hours slip (group style) ----------
   Modelled on a library date-due label: a ruled paper slip with a punched hole. */
.is-style-bvcl-slip {
	position: relative;
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--lilac);
	border-radius: 6px;
	box-shadow: 8px 8px 0 var(--wp--preset--color--lilac);
	padding: 2.25rem 1.5rem 1.5rem !important;
	transform: rotate(-1deg);
	max-width: 26rem;
}
.is-style-bvcl-slip::before {
	content: "";
	position: absolute;
	top: 0.8rem;
	left: 50%;
	width: 0.9rem;
	height: 0.9rem;
	margin-left: -0.45rem;
	border-radius: 50%;
	background: var(--bvcl-hole, var(--wp--preset--color--shelf));
	box-shadow: inset 0 1px 2px rgba(34, 34, 34, 0.35);
}
.is-style-bvcl-slip > h2,
.is-style-bvcl-slip > h3 {
	margin: 0 0 0.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--wp--preset--color--plum);
	font-size: var(--wp--preset--font-size--large);
}
.is-style-bvcl-slip .wp-block-table { margin: 0; }
.is-style-bvcl-slip .wp-block-table table { border-collapse: collapse; width: 100%; }
.is-style-bvcl-slip .wp-block-table td,
.is-style-bvcl-slip .wp-block-table th {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--lilac);
	padding: 0.6rem 0.25rem;
	vertical-align: baseline;
}
.is-style-bvcl-slip .wp-block-table td:first-child {
	font-family: var(--wp--preset--font-family--literata);
	font-weight: 600;
	color: var(--wp--preset--color--plum);
}
.is-style-bvcl-slip .wp-block-table td:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.is-style-bvcl-slip .wp-block-table figcaption { text-align: left; margin-top: 0.5rem; color: var(--wp--preset--color--slate); }
.is-style-bvcl-slip p { margin: 0.75rem 0 0; font-size: var(--wp--preset--font-size--small); }
.bvcl-slip-tag {
	display: inline-block;
	margin: 0 0 0.75rem !important;
	padding: 0.1rem 0.6rem;
	border: 1.5px solid var(--wp--preset--color--amethyst);
	border-radius: 999px;
	color: var(--wp--preset--color--plum);
	font-weight: 600;
}
@media (max-width: 781px) {
	.is-style-bvcl-slip { transform: none; margin-inline: auto; }
}

/* ---------- Hero ---------- */
.bvcl-hero { --bvcl-hole: var(--wp--preset--color--mist); }
.bvcl-hero .bvcl-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--wp--preset--color--ink); max-width: 36rem; }

/* ---------- Services list ---------- */
.bvcl-service {
	border-top: 4px solid var(--wp--preset--color--plum);
	padding-top: 1rem;
}
.bvcl-service h3 { margin: 0 0 0.35rem; font-size: var(--wp--preset--font-size--large); }
.bvcl-service h3 a { text-decoration: none; }
.bvcl-service h3 a:hover { text-decoration: underline; }
.bvcl-service p { margin: 0; }

/* ---------- News lists ---------- */
.bvcl-news-list .wp-block-post {
	border-top: 1px solid var(--bvcl-rule);
	padding-top: 1rem;
}
.bvcl-news-list .wp-block-post-title a { text-decoration: none; }
.bvcl-news-list .wp-block-post-title a:hover { text-decoration: underline; }
.bvcl-news-list .wp-block-post-excerpt__excerpt { margin: 0.25rem 0 0; }

/* ---------- Plum band (group style) ---------- */
.is-style-bvcl-band,
.bvcl-band {
	background-color: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--paper);
}
.is-style-bvcl-band :where(h1, h2, h3, h4, a:not(.wp-element-button)),
.bvcl-band :where(h1, h2, h3, h4, a:not(.wp-element-button)) { color: var(--wp--preset--color--paper); }
.is-style-bvcl-band .wp-element-button,
.bvcl-band .wp-element-button {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--plum);
}
.is-style-bvcl-band .wp-element-button:hover,
.bvcl-band .wp-element-button:hover {
	background-color: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--plum);
}
.is-style-bvcl-band .wp-block-button.is-style-outline .wp-element-button,
.bvcl-band .wp-block-button.is-style-outline .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--paper);
	border: 2px solid var(--wp--preset--color--paper);
}

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline .wp-element-button {
	border: 2px solid var(--wp--preset--color--plum);
	color: var(--wp--preset--color--plum);
	background: transparent;
}
.wp-block-button.is-style-outline .wp-element-button:hover {
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--plum);
}

/* ---------- FAQs (details block) ---------- */
.wp-block-details {
	border-top: 1px solid var(--bvcl-rule);
	padding: 0.9rem 0;
}
.wp-block-details:last-of-type { border-bottom: 1px solid var(--bvcl-rule); }
.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--literata);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--plum);
}
.wp-block-details[open] summary { margin-bottom: 0.75rem; }

/* ---------- In-page contents list ---------- */
.bvcl-contents {
	background: var(--wp--preset--color--shelf);
	padding: 1rem 1.25rem !important;
	border-radius: 4px;
}
.bvcl-contents p { margin: 0 0 0.25rem; font-weight: 700; }
.bvcl-contents ul { margin: 0; }

/* ---------- Footer ---------- */
.bvcl-footer { color: var(--wp--preset--color--mist); }
.bvcl-footer a { color: var(--wp--preset--color--paper); }
.bvcl-footer a:hover { color: var(--wp--preset--color--lilac); }
.bvcl-footer h2 {
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: 0.5rem;
}
.bvcl-footer ul { list-style: none; padding: 0; margin: 0; }
.bvcl-footer li { margin: 0 0 0.35rem; }
.bvcl-footer .bvcl-footer-base { border-top: 1px solid #444; color: var(--wp--preset--color--lilac); }

/* ---------- Legacy content (pre-redesign posts) ---------- */
.wp-block-post-content > h1 { font-size: var(--wp--preset--font-size--x-large); }
.wp-block-post-content :where(p[style*="text-align: center"]) { text-align: left !important; }

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
html { scroll-behavior: smooth; }

@media print {
	.bvcl-navbar, .bvcl-footer, .bvcl-masthead-contact { display: none !important; }
	.is-style-bvcl-slip { transform: none; box-shadow: none; }
	a { color: #000; }
}

/* The footer sits directly under the last section. */
.wp-site-blocks > footer { margin-block-start: 0; }

/* ---------- Contact Form 7 ---------- */
.wpcf7-form p { margin: 0 0 1rem; }
.wpcf7-form label { display: block; font-weight: 600; color: var(--wp--preset--color--ink); }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
	display: block;
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.65rem 0.75rem;
	font: inherit;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1.5px solid #8a8494;
	border-radius: 4px;
	box-sizing: border-box;
}
.wpcf7-form textarea { min-height: 9rem; }
.wpcf7-form input:focus-visible,
.wpcf7-form textarea:focus-visible { border-color: var(--wp--preset--color--plum); }
.wpcf7-form input[type="submit"] {
	font: inherit;
	font-weight: 600;
	padding: 0.75rem 1.375rem;
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--paper);
	cursor: pointer;
}
.wpcf7-form input[type="submit"]:hover { background: var(--wp--preset--color--amethyst); }
.wpcf7-not-valid-tip { color: #a4262c; font-weight: 600; }

/* Space around the hours slip when it sits in a reading column. */
.wp-block-post-content.is-layout-constrained > .is-style-bvcl-slip {
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	/* Line the slip up with the left edge of the text column rather than centring it. */
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

/* Old posts wrap PDF viewers in <code>; show the viewer as a normal block. */
.wp-block-post-content code:has(iframe) { display: block; font: inherit; background: none; padding: 0; }

/* ---------- Featured image on single posts ---------- */
.bvcl-featured img {
	width: auto;
	max-width: 100%;
	max-height: 34rem;
	border-radius: 4px;
}