/*
 * BAR Theme — Global CSS custom properties & base styles
 * TODO: self-host fonts — place woff2 files in assets/fonts/ and remove
 *       the Google Fonts enqueue in inc/enqueue.php.
 */

/* ---------------------------------------------------------------------------
 * Asymmetric radius tokens — the brand's defining detail (spec §1.4)
 * Applied per-element; not WP presets (theme.json has no per-corner API).
 * --------------------------------------------------------------------------- */
:root {
	--bar-radius-base:     8px;                  /* inputs, images, chips */
	--bar-radius-button:   20px 8px 20px 8px;   /* pill buttons, nav CTA */
	--bar-radius-card-img: 80px 8px 8px 8px;    /* card image top-left */
	--bar-radius-hero-img: 200px 8px 8px 8px;   /* hero / media images */
	--bar-radius-enquiry:  80px 20px 80px 20px; /* enquiry form panel */
	--bar-radius-feature:  8px 80px 8px 80px;   /* feature / "What We Do" panel */
	--bar-radius-modal:    80px 8px 80px 8px;   /* modals, contact map */

	/* Shadows */
	--bar-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
	--bar-shadow-modal: 0 0 16px rgba(0, 0, 0, 0.16);

	/* Layout rhythm */
	--bar-section-y: 60px;
	--bar-section-x: 80px;
	--bar-gutter:    32px;
	--bar-content:   1280px;
}

/* ---------------------------------------------------------------------------
 * Box-sizing & reset
 * --------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg {
	display: block;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * Skip link
 * --------------------------------------------------------------------------- */
.bar-skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 9999;
	padding: 12px 24px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	text-decoration: none;
	border-radius: 0 0 var(--bar-radius-base) var(--bar-radius-base);
	transition: top 0.15s ease;
}

.bar-skip-link:focus {
	top: 0;
	outline: 3px solid var(--wp--preset--color--accent-soft);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Selection
 * --------------------------------------------------------------------------- */
::selection {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------------------
 * Focus visible — consistent across all interactive elements
 * --------------------------------------------------------------------------- */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: var(--bar-radius-base);
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 * --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
 * WordPress alignment helpers
 * --------------------------------------------------------------------------- */
.alignwide {
	max-width: var(--bar-content);
	margin-inline: auto;
}

.alignfull {
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Screen reader text utility
 * --------------------------------------------------------------------------- */
.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;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	left: 5px;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ---------------------------------------------------------------------------
 * AJAX grid pagination (News Grid, Study Grid) — see assets/js/grid-ajax.js.
 * Dims the grid while the next page is fetched and blocks double-clicks. The
 * grid also takes focus after a swap, so kill the focus ring on the container.
 * --------------------------------------------------------------------------- */
[data-bar-grid] {
	transition: opacity 0.15s ease;
}

[data-bar-grid].is-loading {
	opacity: 0.55;
	pointer-events: none;
}

[data-bar-grid]:focus {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-bar-grid] {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * "Content Page" template (page-content.php) — text-led pages (Privacy, Terms,
 * Accessibility). Body content is constrained to the site container; the theme's
 * full-bleed blocks still span the viewport by breaking out of the column.
 * --------------------------------------------------------------------------- */
.bar-content-page {
	max-width: var(--bar-content);
	margin-inline: auto;
	/* --bar-section-x (not --bar-gutter) so the copy lines up with the header
	 * logo and the page-banner title, which use the same inset. */
	padding-inline: var(--bar-section-x);
	padding-block: var(--bar-section-y);
}

@media (max-width: 767px) {
	.bar-content-page {
		padding-inline: var(--bar-gutter);
	}
}

/* Full-bleed blocks break out of the constrained column to the viewport edges */
.bar-content-page > .bar-page-banner,
.bar-content-page > .bar-hero,
.bar-content-page > .bar-feature-panel,
.bar-content-page > .bar-cta-panel,
.bar-content-page > .alignfull {
	position: relative;
	width: 100vw;
	left: 50%;
	margin-left: -50vw;
}

/* A full-bleed banner leading the page sits flush at the top (cancels the
 * column's top padding) and spaces the copy below it. */
.bar-content-page > .bar-page-banner:first-child {
	margin-top: calc(-1 * var(--bar-section-y));
	margin-bottom: var(--bar-section-y);
}