/*
Theme Name: The Bell & Bear
Theme URI: https://thebellandbear.co.uk
Author: Pour
Author URI: https://www.get-poured.co.uk/
Description: A custom block theme built for The Bell & Bear, the community-owned village pub in Emberton, Buckinghamshire. Includes a scheduled hero slider, a filterable What's On events calendar, food truck and recurring event pages, private hire, an Investors Area with AGM forms and documents, a Google reviews carousel, opening hours with special hours, pop-up alerts, cookie consent, a newsletter sign-up, a Contact page enquiry form and search-engine structured data. Content, events and settings are all managed from the WordPress admin.
Version: 1.0.2
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bell-bear
Tags: full-site-editing, block-styles, custom-colors, editor-style, featured-images, translation-ready
*/

/* Standard WP accessibility-ready pattern - visually hidden but still readable by
   screen readers. Core only styles this in wp-admin, not the front end, so themes
   are expected to provide it themselves. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* WP core adds margin-block-start:24px to every top-level template block (via
   :where(.wp-site-blocks) > *) - originally only <main> needed zeroing here, but any
   top-level block right after the header template part hits the same gap (e.g. the
   page-hero banner, which isn't wrapped in <main>). Zero it for all of them, not just
   <main>, so nothing has to be special-cased here again later. Section spacing is
   handled explicitly per-section anyway (padding-block on .content-section etc), so
   this fallback margin was never doing useful work. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Kill WP core's default 24px block-gap fallback between stacked blocks inside
   constrained/flow layout containers (columns, groups, page content, etc.) - we
   handle spacing explicitly per-section ourselves, don't want it added on top. */
.is-layout-constrained > *,
.is-layout-flow > * {
	margin-block-start: 0;
}

/* Removing the rule above also killed spacing between stacked text - paragraphs and
   headings sitting flush against each other with no gap. Add it back, but scoped to
   actual text elements only (not every block).
   Core has ANOTHER fallback rule beyond the one we killed - :root :where(.is-layout-flow)
   > * { margin-block: 24px 0px } - which explicitly zeroes margin-block-end on direct
   children of flow containers (e.g. paragraphs inside a Column). The leading :root gives
   it one real specificity point, so a plain :where() here loses to it regardless of
   source order. Prefix with :root too to match that specificity - any component class
   (e.g. .section-heading, real class selectors) still overrides both since a class beats
   a lone :root. */
:root :where(p, h1, h2, h3, h4, h5, h6) {
	margin-block-start: 0;
	margin-block-end: 1rem;
}
:root :where(p, h1, h2, h3, h4, h5, h6):last-child {
	margin-block-end: 0;
}

/* h1 previously had no explicit size of its own (theme.json only sets fontWeight for
   it), so it fell back to whatever a component's own class gave it - which is how the
   page-hero banner title ended up landing on exactly the same computed size as
   .section-heading (h2) at desktop. Give h1 a real, distinct size here instead, and
   drop page-hero__title's own font-size overrides (blocks/page-hero/style.css) so it
   inherits this instead of drifting from it again later. */
:root :where(h1) {
	font-size: 2.75rem;
	line-height: 1.1;
}
@media (min-width: 48rem) {
	:root :where(h1) {
		font-size: 5rem;
	}
}

/* The global paragraph color above (muted-foreground, a dark gray) assumes a light
   background. On dark-background sections it needs to flip light instead - this
   naturally out-specifies the :root:where(p) rule since it's a real ancestor class +
   element (0,1,1) rather than :root + :where (0,1,0), no extra tricks needed. */
.has-navy-background-color p,
.has-charcoal-background-color p,
.has-forest-background-color p {
	color: rgba(255, 255, 255, 0.8);
}

/* A single image block filling one column of a text+image row - core Columns/Image
   blocks, not just our custom galleries - capped at the text column's height instead
   of rendering at its own (often much taller) natural size. position:absolute pulls
   the image out of normal flow entirely, so it contributes nothing to the row's
   height; the row ends up exactly as tall as the text column needs, and the image
   just fills whatever that turns out to be. :only-child keeps this scoped to a plain
   single image filling its column - a multi-image gallery (e.g. .section-gallery
   wrapped in its own group) isn't a bare .wp-block-image child of the column, so it's
   untouched. .are-vertically-aligned-center is included explicitly to outright beat
   core's own .wp-block-columns.are-vertically-aligned-center{align-items:center} rule
   (same specificity otherwise, tie broken by load order) rather than rely on it. */
.wp-block-column > .wp-block-image:only-child {
	position: relative;
	height: 100%;
	min-height: 16rem;
	margin: 0;
}
.wp-block-column > .wp-block-image:only-child img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Note: this targets the COLUMN's own align-self, not the row's align-items - WP core
   ships ".wp-block-columns { align-items: normal !important; }", which no amount of
   specificity can out-rank from the row side. align-self on the individual column
   isn't fought the same way, so it's the reliable lever here. */
.wp-block-columns .wp-block-column:has(> .wp-block-image:only-child) {
	align-self: stretch;
}

/* Rounded corners on any standalone image block, matching the same treatment already
   used on gallery images (.section-gallery__main/__thumb, .vendor-feature__image) - 
   so a plain wp:image an editor drops into a section looks consistent without needing
   a custom class. */
.wp-block-image img {
	border-radius: 0.75rem;
}

/* Bullet/numbered lists (core/list) don't pick up theme.json's core/paragraph styling
   at all - that only targets <p> - so a list next to body copy looked visibly
   different (default colour/line-height instead of muted-foreground/1.6). Match it
   explicitly, including the same dark-background flip as paragraphs above. */
.wp-block-list {
	color: var(--wp--preset--color--muted-foreground);
	line-height: 1.6;
	margin-block-end: 1rem; /* paragraphs get this via the :root :where(p...) rule above; lists don't */
}
.has-navy-background-color .wp-block-list,
.has-charcoal-background-color .wp-block-list,
.has-forest-background-color .wp-block-list {
	color: rgba(255, 255, 255, 0.8);
}

/* Shared eyebrow style - used above section/hero headings site-wide. :root prefix
   matches the specificity of the global paragraph color/margin rule above (also
   :root-prefixed), so this reliably wins regardless of load order rather than
   depending on a tie being broken in our favour. */
:root .eyebrow {
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Shared section heading scale, used site-wide (homepage sections, event category/series
   pages, etc): text-3xl -> md:text-6xl, font-bold, mb-4, line-height 1. Deliberately no
   color here - inherits from whatever the section's own text color is, so it works on
   both light and dark backgrounds without fighting an inline textColor via specificity. */
:root .section-heading {
	font-weight: 700;
	font-size: 1.875rem; /* text-3xl */
	line-height: 1;
	margin: 0 0 1rem;
}
@media (min-width: 48rem) {
	:root .section-heading {
		font-size: 3.75rem; /* md:text-6xl */
	}
}

/* Long-form legal text (templates/page-privacy-policy.html): headings need breathing room
   above them - the global rule only sets margin-below, so without this each section title
   sits tight against the paragraph before it. */
.privacy-policy-content h3 {
	margin-top: 2.5rem;
}
.privacy-policy-content h4 {
	margin-top: 1.75rem;
}
.privacy-policy-content > :first-child {
	margin-top: 0;
}

/* Base button feel: smooth hover transition, no label wrapping, consistent line-height.
   Matches the original Payload build's computed styles (0.15s ease, line-height 1.5). */
.wp-block-button__link {
	line-height: 1.5;
	white-space: nowrap;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* Button style variations (registered in functions.php) - mirror the old .btn-outline / .btn-outline-dark system */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: #fff;
	border-color: #fff;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: #fff;
	color: var(--wp--preset--color--charcoal);
}

.wp-block-button.is-style-outline-dark .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--charcoal);
	border-color: var(--wp--preset--color--charcoal);
}
.wp-block-button.is-style-outline-dark .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--charcoal);
	color: #fff;
}