/* Self-hosted variable fonts.
   theme.json also emits these, but declaring them here means the fonts keep
   working if a cache or optimisation plugin strips the global-styles sheet.
   Identical URLs, so the browser downloads each file only once. */

@font-face {
	font-family: "Fredoka";
	src: url("../fonts/fredoka-var.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Nunito";
	src: url("../fonts/nunito-var.woff2") format("woff2-variations");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

/* Base: token aliases, typography, prose.
   Colours come from theme.json; the fallbacks keep this file readable
   on its own and cover the block editor before global styles load. */

:root {
	--rb-blue:        var(--wp--preset--color--rb-blue, #009ED6);
	--rb-blue-dark:   var(--wp--preset--color--rb-blue-dark, #007EAB);
	--rb-blue-deep:   var(--wp--preset--color--rb-blue-deep, #005E80);
	--rb-orange:      var(--wp--preset--color--rb-orange, #EB642D);
	--rb-orange-dark: var(--wp--preset--color--rb-orange-dark, #BC5024);
	--rb-ink:         var(--wp--preset--color--rb-ink, #182430);
	--rb-ink-soft:    var(--wp--preset--color--rb-ink-soft, #5A6673);
	--rb-line:        var(--wp--preset--color--rb-line, #E7DFD6);
	--rb-cream:       var(--wp--preset--color--rb-cream, #FFF8F1);
	--rb-white:       var(--wp--preset--color--rb-white, #FFFFFF);
	--rb-sun:         var(--wp--preset--color--rb-sun, #FFC83D);
	--rb-green:       var(--wp--preset--color--rb-green, #1E8E5A);

	--rb-sky:    #E4F4FC;
	--rb-peach:  #FFE9DD;
	--rb-butter: #FFF2D8;
	--rb-mint:   #E2F5EA;

	--rb-display: var(--wp--preset--font-family--rb-display, Fredoka, "Trebuchet MS", system-ui, sans-serif);
	--rb-body:    var(--wp--preset--font-family--rb-body, Nunito, "Segoe UI", system-ui, sans-serif);

	--rb-r-card: 18px;
	--rb-r-tile: 24px;
	--rb-r-slab: 30px;

	--rb-sh-1: 0 2px 8px rgba(24, 36, 48, .06);
	--rb-sh-2: 0 10px 28px rgba(24, 36, 48, .10);

	--rb-header-h: 74px;
	--rb-gutter: 18px;

	color-scheme: light;
}

body {
	background: var(--rb-cream);
	color: var(--rb-ink);
	font-family: var(--rb-body);
	font-size: 1rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--rb-display);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.01em;
	text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); }

a { color: var(--rb-blue-dark); }
a:hover { color: var(--rb-blue-deep); }

strong, b { font-weight: 800; }

/* Accessible text that only screen readers need.
   .screen-reader-text is included because WooCommerce markup uses it and
   expects the theme to define it. */
.rb-visually-hidden,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.rb-skip {
	position: absolute;
	left: -9999px;
	z-index: 100;
}

.rb-skip:focus {
	position: fixed;
	left: 16px;
	top: 16px;
	background: var(--rb-ink);
	color: var(--rb-white);
	padding: 12px 20px;
	border-radius: 999px;
	font-weight: 800;
}

/* Long-form content inside posts and pages. */
.rb-prose { max-width: 68ch; }
.rb-prose > * + * { margin-top: 1.1em; }
.rb-prose h2 { margin-top: 1.8em; }
.rb-prose h3 { margin-top: 1.5em; }
.rb-prose ul,
.rb-prose ol { padding-left: 1.3em; display: grid; gap: .4em; }
.rb-prose li::marker { color: var(--rb-orange-dark); }
.rb-prose img { border-radius: var(--rb-r-card); }
.rb-prose blockquote {
	border-left: 4px solid var(--rb-sun);
	padding-left: 1.1em;
	font-size: 1.08em;
}