/* ==========================================================================
   True Vision — base styles
   Palette + type scale extracted directly from the live report-it.org.uk
   site's computed styles (Poppins, Bootstrap-based section bands):
     --tv-blue       : primary band (hero base colour, footer)
     --tv-blue-dark  : secondary band (accordion / updates sections, buttons)
     --tv-bg         : soft light-blue section background
     --tv-bg-light   : lightest band / border colour
     --tv-navy       : dark hero photo overlay + heading text colour
     --tv-red        : "Report a Hate Crime" CTA
     --tv-text       : body copy colour
   ========================================================================== */

:root {
	--tv-blue: #0076cc;
	--tv-blue-dark: #00579e;
	--tv-red: #de2432;
	--tv-red-dark: #b81d29;
	--tv-bg: #f2f6fc;
	--tv-bg-light: #eaedf2;
	--tv-navy: #0d1431;
	--tv-navy-text: #0d1431;
	--tv-white: #ffffff;
	--tv-border: #eaedf2;
	--tv-text: #4e5679;
	--tv-font: "Poppins", "Segoe UI", Arial, sans-serif;
	--tv-radius: 0.35rem;

	--tv-fontsize-base: 16px;
}

/* Accessibility toolbar font-size steps (see assets/js/main.js) */
html[data-tv-fontsize="small"] { font-size: 14px; }
html[data-tv-fontsize="standard"] { font-size: 16px; }
html[data-tv-fontsize="large"] { font-size: 19px; }

/* Accessibility toolbar colour schemes */
html[data-tv-theme="dark"] body { background: #101010; color: #f2f2f2; }
html[data-tv-theme="dark"] .tv-section { background: #1a1a1a; }
html[data-tv-theme="high-contrast"] body { background: #000; color: #fff; }
html[data-tv-theme="high-contrast"] a { color: #ffe600; }
html[data-tv-theme="high-contrast"] .tv-button--cta { background: #ffe600; color: #000; }

/*
 * NOTE: the old global resets that used to live here (*, body, h1-h6, a,
 * img) have been removed on purpose. The theme now loads the live site's
 * REAL compiled Bootstrap/Argon stylesheet (see
 * inc/vendor-assets-fetcher.php + true_vision_assets() in functions.php) -
 * that bundle already defines correct global typography, colours and
 * element defaults. Redeclaring them here with our own approximated values
 * is exactly what caused the "different text size" / general mismatch
 * reported against the live site - don't reintroduce broad element
 * selectors (body/h1-h6/a/img/*) in this file.
 */

.tv-container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
	height: 1px; width: 1px;
}
.skip-link:focus {
	position: fixed; top: 0; left: 0; z-index: 10000;
	background: var(--tv-navy); color: #fff; padding: 12px 20px;
}

/* Buttons ------------------------------------------------------------- */
.tv-button {
	display: inline-block;
	padding: 0.875em 1.25em;
	border-radius: var(--tv-radius);
	font-weight: 400;
	font-family: var(--tv-font);
	text-decoration: none;
	border: 2px solid transparent;
}
.tv-button--cta {
	background: var(--tv-red);
	color: #fff;
}
.tv-button--cta:hover { background: var(--tv-red-dark); }
.tv-button--secondary {
	background: var(--tv-blue-dark);
	color: #fff;
}
.tv-button--secondary:hover { background: var(--tv-navy); }

/*
 * The old header (.site-header/.tv-header__*/.tv-primary-nav/.tv-menu*),
 * hero (.tv-hero*) and card grid (.tv-card-grid/.tv-card) rules that used
 * to live here have been removed: header.php, front-page.php's hero, and
 * true_vision_card_grid() now all emit the live site's real navbar-*/
 * header-banner/profile-card markup, which is styled entirely by the
 * fetched main.min.css + vendor.min.css (see inc/vendor-assets-fetcher.php).
 */

/* Sections ------------------------------------------------------------- */
.tv-section { padding: 72px 0; }
.tv-section__heading { text-align: center; font-size: 2.25rem; font-weight: 300; margin-bottom: 1em; color: var(--tv-navy-text); }
.tv-section__heading--inverse { color: #fff; }
.tv-section--accordion,
.tv-section--updates { background: var(--tv-blue-dark); color: #fff; }
.tv-section--tiles { background: var(--tv-bg); }

/* Accordion --------------------------------------------------------------- */
.tv-accordion__item { background: #fff; border-radius: var(--tv-radius); margin-bottom: 10px; color: var(--tv-text); box-shadow: 0 2px 8px rgba(18,38,63,0.06); }
.tv-accordion__trigger {
	width: 100%; text-align: left; background: none; border: none; cursor: pointer;
	padding: 18px 20px; font-weight: 500; font-size: 1rem; display: flex; justify-content: space-between;
	color: var(--tv-navy-text); font-family: var(--tv-font);
}
.tv-accordion__trigger::after { content: "+"; font-weight: 400; }
.tv-accordion__trigger[aria-expanded="true"]::after { content: "\2212"; }
.tv-accordion__panel { padding: 0 20px 18px; }

/* Tile grid ---------------------------------------------------------------- */
.tv-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
.tv-tile { text-align: center; text-decoration: none; color: var(--tv-navy-text); font-weight: 500; }
.tv-tile img { border-radius: var(--tv-radius); margin-bottom: 0.6em; aspect-ratio: 1/1; object-fit: cover; }

/* Updates / social ---------------------------------------------------------- */
.tv-updates-grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.tv-updates-grid__news { list-style: none; margin: 0; padding: 0; }
.tv-updates-grid__news li { border-bottom: 1px solid rgba(255,255,255,0.2); padding: 10px 0; }
.tv-updates-grid__news a { color: #fff; }

/* CTA banner ------------------------------------------------------------- */
.tv-cta-banner { background: var(--tv-bg-light); padding: 32px 0; text-align: center; }

/* Footer -------------------------------------------------------------------- */
.site-footer { background: var(--tv-blue); color: #eaf2fb; padding: 48px 0 24px; }
.tv-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; align-items: start; }
.tv-footer__copyright { font-size: 0.85rem; margin-top: 1em; }
.tv-footer-menu { list-style: none; margin: 0; padding: 0; }
.tv-footer-menu li { margin-bottom: 0.5em; }
.tv-footer-menu a, .tv-footer__legal a { color: #eaf2fb; text-decoration: none; }
.tv-footer__social { list-style: none; margin: 0; padding: 0; }
.tv-footer__social a { color: #eaf2fb; text-decoration: none; }

/* Breadcrumbs --------------------------------------------------------------- */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 1.5em 0; padding: 0; font-size: 0.85rem; }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 6px; color: var(--tv-border); }

/* Content ------------------------------------------------------------------- */
.tv-content { padding: 48px 0; }
.tv-content h1 { font-size: 2.5rem; font-weight: 400; }
.tv-content h4 { font-size: 1.4rem; }
.tv-content h5 { font-size: 1.1rem; text-transform: none; }
.related-pages, .downloads-list { margin-top: 3em; border-top: 1px solid var(--tv-border); padding-top: 1.5em; }
.tv-stat-callout { font-size: 1.25rem; font-weight: 500; background: var(--tv-bg); padding: 1em 1.4em; border-radius: var(--tv-radius); }

/* Directory (jump-nav link groups) ------------------------------------------- */
.tv-directory__jump-nav ul { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; }
.tv-directory__group { margin-top: 2.5em; scroll-margin-top: 100px; }

/* Police force list (contact / your-police-force shortcode) ----------------- */
.tv-police-force-list { list-style: none; margin: 1.5em 0; padding: 0; column-count: 3; column-gap: 24px; }
.tv-police-force-list li { break-inside: avoid; margin-bottom: 0.6em; }
.tv-police-force-list a { color: var(--tv-blue); text-decoration: none; }
.tv-police-force-list a:hover { text-decoration: underline; }

/* Carousel -------------------------------------------------------------------- */
.tv-carousel { position: relative; margin: 1.5em 0; }
.tv-carousel__slide img { width: 100%; border-radius: var(--tv-radius); }
.tv-carousel__prev, .tv-carousel__next {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: rgba(13,20,49,0.7); color: #fff; border: none; border-radius: 50%;
	width: 40px; height: 40px; cursor: pointer; font-size: 1.4rem;
}
.tv-carousel__prev { left: 12px; }
.tv-carousel__next { right: 12px; }

/* Accessibility toolbar ------------------------------------------------------- */
.tv-a11y-toolbar { position: fixed; right: 20px; bottom: 20px; z-index: 60; font-size: 0.85rem; }
.tv-a11y-toolbar__toggle {
	background: var(--tv-navy); color: #fff; border: 2px solid #fff; border-radius: var(--tv-radius);
	padding: 10px 16px; font-weight: 500; cursor: pointer;
}
.tv-a11y-toolbar__panel {
	position: absolute; bottom: 100%; right: 0; margin-bottom: 10px;
	background: #fff; color: var(--tv-text); border-radius: var(--tv-radius); padding: 16px;
	box-shadow: 0 12px 24px rgba(13,20,49,0.2); width: 240px;
}
.tv-a11y-toolbar__panel fieldset { border: none; margin: 0 0 12px; padding: 0; }
.tv-a11y-toolbar__panel legend { font-weight: 500; margin-bottom: 6px; padding: 0; }
.tv-a11y-toolbar__panel button {
	background: var(--tv-bg); border: 1px solid var(--tv-border); border-radius: 4px;
	padding: 6px 10px; margin: 2px; cursor: pointer;
}
.tv-a11y-toolbar__panel button[aria-pressed="true"] { background: var(--tv-blue); color: #fff; }

/* Formidable form baseline (visual parity only — Formidable renders its own markup) */
.frm_forms { max-width: 640px; }
.frm_forms input[type="text"], .frm_forms input[type="email"], .frm_forms textarea {
	width: 100%; padding: 0.6em 0.8em; border: 1px solid var(--tv-border); border-radius: 4px; margin-bottom: 1em;
	font-family: var(--tv-font);
}
.frm_forms .frm_submit input[type="submit"] {
	background: var(--tv-red); color: #fff; border: none; border-radius: var(--tv-radius); padding: 0.875em 1.25em; font-weight: 400; cursor: pointer;
	font-family: var(--tv-font);
}

/* Responsive ------------------------------------------------------------------ */
@media (max-width: 900px) {
	.tv-updates-grid { grid-template-columns: 1fr; }
	.tv-footer__grid { grid-template-columns: 1fr; }
	.tv-police-force-list { column-count: 1; }
}