/*
Theme Name: RUB Chair
Theme URI: https://gitlab.ruhr-uni-bochum.de/jm/tp1-website
Author: Ruhr-Universität Bochum
Author URI: https://www.ruhr-uni-bochum.de/
Description: WordPress theme in the corporate design 2026 of the Ruhr-Universität Bochum (RUB Inter, RUB Blau, Hellblau) and its web components, for chairs, institutes and research groups: white header with the RUB logo, the institution and a panel menu, breadcrumb, picture header, Hellblau teaser cards and bands, Hellblau footer with “Built to change”, page layouts for team, news, research and teaching. Use it together with the plugin RUB Chair Core; name, faculty, address and footer links are entered under RUB Chair → Chair settings – no programming needed.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.3
Version: 3.36.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rub-chair
Update URI: https://gitlab.ruhr-uni-bochum.de/jm/tp1-website
Tags: block-theme, full-site-editing, education, university, accessibility-ready, translation-ready
*/

/* -------------------------------------------------------------------------
 * 1. Base
 * ---------------------------------------------------------------------- */

:root {
	/* RUB corporate design 2026 (design/README.md): RUB Blau, and the colour
	   group Hellblau – one group per medium. */
	--rub-blue: #003560;
	--rub-blue-dark: #002447;
	/* Hellblau 100: bars, edges and marks; never text on white (2.4:1). */
	--rub-accent: #66b3fb;
	/* Text and outlines that stand out on white: in RUB Blau, as the
	   corporate design sets all text. */
	--rub-accent-text: #003560;
	/* Hellblau 50: light areas and lines instead of grey. */
	--rub-light: #dcebfb;
	/* Lines that must be seen, e.g. around form fields (3:1 on white). */
	--rub-light-mid: #4296e9;
	/* Quiet light area of the RUB web components (token surface/subtle), the
	   info box. */
	--rub-subtle: #ecf0f4;
	/* Quiet text, e.g. the current breadcrumb step (token breadcrumb/link/current,
	   4.9:1 on white). */
	--rub-quiet: #5d7283;
	/* Lines between table rows (token border/secondary). */
	--rub-line: #8595a8;
	/* Fine frame around white cards and thin rules, e.g. in the footer. */
	--rub-frame: rgb(0 53 96 / 20%);
	/* Rounded corners and shadow of the RUB web components (Figma library,
	   design/README.md): 12px for boxes, 16px for header and footer. */
	--rub-radius: 12px;
	--rub-radius-bar: 16px;
	--rub-shadow: 0 4px 12px rgb(0 13 23 / 5%);
	/* Cards that lead somewhere, under the mouse; open menu panels. */
	--rub-shadow-hover: 0 6px 24px rgb(0 13 23 / 12%);
	--rub-shadow-panel: 0 6px 12px rgb(0 53 96 / 20%);
	/* Underline of links in quiet running text (breadcrumb, footer). */
	--rub-underline: rgb(0 53 96 / 40%);
	--rub-transition: 0.2s ease;
	/* Page rhythm of the RUB library (docs/specs/2026-10-19-page-rhythm.md):
	   page margin, gap between sections, gap between the parts of a section.
	   Phone values here, tablet and desktop below. */
	--rub-page-margin: 16px;
	--rub-section-gap: 72px;
	--rub-part-gap: 24px;
	/* Headline 1 (picture header, page titles): 40/42, 50/54, 58/64. */
	--rub-h1-size: 2.5rem;
	--rub-h1-line: 2.625rem;
}

@media (min-width: 768px) {
	:root {
		--rub-page-margin: 24px;
		--rub-section-gap: 72px;
		--rub-part-gap: 48px;
		--rub-h1-size: 3.125rem;
		--rub-h1-line: 3.375rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--rub-page-margin: 32px;
		/* 96, not the home template's 144: our pages are short (decision 009). */
		--rub-section-gap: 96px;
		--rub-h1-size: 3.625rem;
		--rub-h1-line: 4rem;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Visible keyboard focus everywhere — RUB accessibility requirement (BITV 2.0).
   WCAG 2.1 SC 1.4.11 asks for 3:1 against the adjacent background, and no single
   colour clears that on every surface we use. So the ring is context aware:
   RUB blue on light surfaces (white header and Hellblau footer included),
   white on the dark band. Verified in bin/check-contrast.js. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--rub-accent-text);
	/* 4px off the element, as the RUB library (spacing/focus-outline-offset). */
	outline-offset: 4px;
}

/* The skip link carries .screen-reader-text, so focus has to undo the clipping
   as well as reposition it — otherwise it stays invisible to sighted keyboard
   users, which is the one group it exists for. */
.rub-skip-link:focus {
	background: #fff;
	clip-path: none;
	color: var(--rub-blue);
	display: block;
	font-weight: 700;
	height: auto;
	left: 0.5rem;
	margin: 0;
	overflow: visible;
	padding: 0.75rem 1.25rem;
	position: fixed;
	top: 0.5rem;
	width: auto;
	z-index: 1000;
}

/* Bold text in RUB Inter's Semi Bold: the house font is loaded in 400, 500,
   600 and 800, and 700 would otherwise fall back to the heavy Extra Bold. */
strong,
b {
	font-weight: 600;
}