/*
Theme Name: Wrekin Forest
Theme URI: https://wrekinforest.co.uk
Author: Shire-Tech
Author URI: https://shire-tech.co.uk
Description: Block theme for the Wrekin Forest Multisite. Each site's colours come from brands/<brand>.json, picked in Settings → Wrekin Forest.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.3.3
License: Proprietary
Text Domain: wf-theme
*/

:root {
	--wf-angle: 40px;
	--wf-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5C11 3.5 4 8.3 4 15.2c0 1.9.6 3.6 1.6 5L3.5 22.3l1.2 1.2 2.1-2.1a8.3 8.3 0 0 0 5 1.6c6.9 0 11.7-7 11.7-16.5V3.5h-3zm-8.7 16.3c-1.1 0-2.2-.3-3.1-.8l7.4-7.4-1.2-1.2-7.4 7.4a6 6 0 0 1-.8-3.1c0-5.3 5.4-9.3 12.1-9.6-.3 6.8-2.3 14.7-7 14.7z'/%3E%3C/svg%3E");
}
@media (min-width: 900px) {
	:root { --wf-angle: 70px; }
}

/* Paper texture behind everything except full-bleed coloured bands. Weddings stays clean. */
body { background: url(assets/images/paper-tile.jpg) repeat var(--wp--preset--color--base); }
body.wf-brand-weddings { background-image: none; }

/* Angled bottom edge, as on the original school site. */
.is-style-angled { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--wf-angle)), 0 100%); padding-bottom: calc(var(--wf-angle) + var(--wp--preset--spacing--40)) !important; }
.is-style-angled-top { clip-path: polygon(0 var(--wf-angle), 100% 0, 100% 100%, 0 100%); padding-top: calc(var(--wf-angle) + var(--wp--preset--spacing--40)) !important; }
.wp-block-cover.is-style-angled { padding-bottom: calc(var(--wf-angle) + var(--wp--preset--spacing--50)) !important; }

/* Heading flanked by two leaves in the brand colour. */
.is-style-leaves { display: flex; align-items: center; justify-content: center; gap: 0.8em; text-align: center; }
.is-style-leaves::before,
.is-style-leaves::after { content: ""; flex: 0 0 1.1em; height: 1.1em; background: var(--wp--preset--color--primary); -webkit-mask: var(--wf-leaf) center / contain no-repeat; mask: var(--wf-leaf) center / contain no-repeat; }
.is-style-leaves::after { transform: scaleX(-1); }

/* Cards */
.is-style-card { background: var(--wp--preset--color--surface); border-radius: 10px; box-shadow: var(--wp--preset--shadow--card); overflow: hidden; }
.is-style-card > .wp-block-image:first-child { margin: 0; }
.is-style-card > .wp-block-image:first-child img { border-radius: 0; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.is-style-card > :not(.wp-block-image) { padding-left: var(--wp--preset--spacing--40); padding-right: var(--wp--preset--spacing--40); }
.is-style-card > :last-child { padding-bottom: var(--wp--preset--spacing--40); }

/* Photo tile with its label on a dark band (audience links, cross-site pods). */
.wf-tile { position: relative; display: block; border-radius: 10px; overflow: hidden; text-decoration: none; }
.wf-tile.wp-block-cover { min-height: 260px !important; }
.wf-tile .wp-block-cover__inner-container { align-self: flex-end; }
.wf-tile a { color: inherit; text-decoration: none; }
.wf-tile a::after { content: ""; position: absolute; inset: 0; }
.wf-tile:hover .wp-block-cover__image-background { transform: scale(1.04); }
.wf-tile .wp-block-cover__image-background { transition: transform 0.4s ease; }

/* Header */
.wf-header { position: sticky; top: 0; z-index: 50; }
.wf-header .wf-logo img { width: 38px; height: auto; display: block; }
.wf-header .wp-block-navigation a { text-decoration: none; }
.wf-header .wp-block-navigation a:hover { text-decoration: underline; }
.admin-bar .wf-header { top: var(--wp-admin--admin-bar--height, 32px); }

/* Footer */
.wf-footer a { color: inherit; }
.wf-footer .wp-block-list { list-style: none; padding-left: 0; }
.wf-footer .wp-block-list li { margin: 0.3rem 0; }

/* Upcoming sessions (wf/upcoming-sessions block) */
.wf-sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--40); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.wf-session { background: var(--wp--preset--color--surface); border-radius: 10px; box-shadow: var(--wp--preset--shadow--card); padding: var(--wp--preset--spacing--40); display: flex; flex-direction: column; gap: 0.5rem; border-top: 5px solid var(--wp--preset--color--primary); }
.wf-session__date { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); margin: 0; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.wf-session__title { font-size: var(--wp--preset--font-size--large); margin: 0; }
.wf-session__meta { font-size: var(--wp--preset--font-size--small); margin: 0; }
.wf-session__full { color: var(--wp--preset--color--muted); font-weight: 600; }
.wf-session .wp-element-button { margin-top: auto; align-self: flex-start; text-decoration: none; }
.wf-sessions-empty { color: var(--wp--preset--color--muted); }

/* FAQs */
.wp-block-details summary { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
	.wf-tile .wp-block-cover__image-background { transition: none; }
}

/* Header, main and footer sit flush; sections manage their own spacing. */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-post-content > .alignfull:first-child { margin-block-start: 0; }
.wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }

/* Leaves hug the heading text even when it wraps. */
.is-style-leaves { width: fit-content; max-width: 100%; margin-inline: auto !important; }

/* Phones: hero repeats the header button, so drop it and tighten the title. */
@media (max-width: 600px) {
	.wf-header .wp-block-buttons { display: none; }
	.wf-header .wp-block-site-title { font-size: 1.15rem !important; line-height: 1.2; }
	.wf-header .wf-logo img { width: 30px; }
}

/* Imported content: media & text sections breathe, images round off. */
.wp-block-post-content > .wp-block-media-text { margin-block: var(--wp--preset--spacing--50); }
.wp-block-media-text__media img { border-radius: 10px; }
.wp-block-post-content > .wp-block-separator { border-color: var(--wp--preset--color--accent); opacity: 0.6; margin-block: var(--wp--preset--spacing--50); }
.wp-block-post-content > .wp-block-group.has-accent-background-color { border-radius: 8px; padding: var(--wp--preset--spacing--30); }

/* Collapse the menu to the hamburger below 1100px: seven items plus the button don't fit sooner. */
@media (max-width: 1099px) {
	.wf-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.wf-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
	.wf-header .wp-block-site-title { font-size: var(--wp--preset--font-size--medium) !important; }
}

/* Header menu in the narrower body font so seven items fit beside the title and button. */
.wf-header .wp-block-navigation { font-family: var(--wp--preset--font-family--body); font-size: 1.05rem; font-weight: 600; --navigation-layout-justification-setting: flex-end; }
.wf-header .wp-block-navigation .wp-block-navigation__container { gap: 1.1rem; }
.wf-header .wp-block-site-title { white-space: nowrap; }