/* PlayCase base: fonts, tokens, element defaults, the content grid and the header.
   The tokens and defaults are the values Automatic.css and the Bricks theme style gave the site (1rem = 10px), so the
   page CSS written against them (site.css, home-manual.css, hero.css, pages/) renders the same without them. */

/* Faces (self-hosted, SIL OFL: fonts/OFL.txt). Inter is the variable font (fontsource), 100–900. */
@font-face { font-family: "Titan One"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/titan-one.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
	--primary: oklch(0.553 0.22 263);          /* cobalt */
	--secondary: oklch(0.902 0.171 97);        /* yellow: the accent on dark */
	--tertiary: oklch(0.61 0.216 28);          /* PlayCase red: the accent on light */
	--base: oklch(0.992 0.002 68);             /* warm white page */
	--neutral: oklch(0 0 0);
	--neutral-dark: oklch(0.371495 0 89.875563);
	--neutral-light: oklch(0.885305 0 89.875563);
	--neutral-ultra-light: oklch(0.961151 0 89.875563);
	--bg-light: oklch(0.885305 0 89.875563);
	--black: #000;
	--white: #fff;
	--body-bg-color: var(--base);

	--text-xs: clamp(0.9567283044rem, calc(-0.22525157vw + 1.2810905652rem), 1.2rem);
	--text-s: clamp(1.3rem, calc(0.0925925926vw + 1.2666666667rem), 1.4rem);
	--text-m: clamp(1.5rem, calc(0.1851851852vw + 1.4333333333rem), 1.7rem);
	--text-l: clamp(1.8rem, calc(0.4315740741vw + 1.6446333333rem), 2.2661rem);
	--text-xxl: clamp(2.592rem, calc(1.3283408916vw + 2.113797279rem), 4.0266081629rem);
	--h1: clamp(2.0736rem, calc(1.1503983813vw + 1.6594565827rem), 3.3160302518rem);
	--h2: clamp(1.728rem, calc(0.7033746296vw + 1.4747851333rem), 2.4876446rem);
	--h3: clamp(1.44rem, calc(0.3946296296vw + 1.2979333333rem), 1.8662rem);
	--h4: clamp(1.2rem, calc(0.1851851852vw + 1.1333333333rem), 1.4rem);
	--h5: clamp(1.0502625656rem, calc(-0.2312383651vw + 1.3832458115rem), 1.3rem);
	--h6: clamp(0.7878938977rem, calc(-0.3815797243vw + 1.3373687008rem), 1.2rem);

	--space-xs: clamp(1.3333333333rem, calc(-0.0160573332vw + 1.3564558932rem), 1.3506752532rem);
	--space-s: clamp(1.8004501125rem, calc(0.1847684143vw + 1.7339334834rem), 2rem);
	--space-m: clamp(2.4rem, calc(0.5555555556vw + 2.2rem), 3rem);
	--space-l: clamp(3.1992rem, calc(1.2044444444vw + 2.7656rem), 4.5rem);
	--section-space-m: clamp(4.8rem, calc(3.8888888889vw + 3.4rem), 9rem);
	--gutter: clamp(1.6rem, calc(5.9259259259vw + -0.5333333333rem), 8rem);
	--content-width: 144rem;
	--radius: 5px;
	--radius-s: 3.3333333333px;
	--radius-m: 5px;
	--radius-l: 7.5px;
	--radius-xl: 11.25px;
	--radius-xxl: 16.875px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; font-family: "Inter", sans-serif; font-size: var(--text-m); line-height: 1.5; color: #000; background: var(--body-bg-color); overflow-x: clip; text-wrap: pretty; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: "Titan One", sans-serif; font-weight: 700; line-height: 1.4; letter-spacing: 0; text-wrap: pretty; }
h1 { font-size: var(--h1); color: var(--secondary); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); font-weight: 400; }
h4 { font-size: var(--h4); color: var(--primary); }
h5 { font-size: var(--h5); color: var(--primary); }
h6 { font-size: var(--h6); color: var(--primary); }
p, ul, ol, dl, blockquote, pre { margin: 0; }
a { color: var(--primary); font-weight: 700; text-decoration: none; }
img, svg, video, canvas { max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { font-weight: 700; }
:focus-visible { outline: .2rem solid var(--primary); outline-offset: .25em; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Inline icons (inc/icons.php). */
.pc-icon { display: inline-block; flex: none; width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; }

/* The content grid (Automatic.css's): a section's children sit in a centred column with the gutter either side. */
.content-grid { --full: minmax(var(--gutter), 1fr); display: grid; padding-inline: 0; column-gap: 0; grid-template-columns: [full-start] var(--full) [content-start] min(var(--content-width), 100% - var(--gutter) * 2) [content-end] var(--full) [full-end]; }
.content-grid > * { grid-column: content; width: 100%; max-width: 100%; }

.pc-skip { position: absolute; top: 1rem; left: 1rem; z-index: 100001; padding: 1rem 1.6rem; background: #000; color: #fff; transform: translateY(-250%); }
.pc-skip:focus { transform: none; }

/* Site notice (ACF options: notification_display / global_notification_message). */
.pc-notice { position: relative; z-index: 99; padding: var(--space-xs); background: var(--secondary); color: var(--neutral); font-weight: 700; font-size: var(--text-s); text-align: center; }
.pc-notice a { color: #fff; }

/* Header: warm white bar; the logo and the cart side grow alike, so the menu sits in the middle. */
.pc-header { position: relative; z-index: 99; background: var(--base); border-bottom: 1px solid rgb(0 0 0 / .08); }
.pc-header__bar { position: relative; display: flex; align-items: center; justify-content: space-between; width: min(var(--content-width), 100% - var(--gutter) * 2); margin-inline: auto; padding: var(--space-s) var(--space-xs); }
.pc-header__logo { flex: 1 1 100%; display: flex; align-items: center; }
.pc-header__logo img { display: block; height: 25px; width: auto; }
.pc-header__end { flex: 1 1 100%; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-m); }
.pc-header__menu { display: none; }
.pc-nav__list { display: flex; margin: 0; padding: 0; list-style: none; }
.pc-nav__list > li { margin: 0 30px; }
.pc-nav__list > li > a { position: relative; isolation: isolate; display: flex; padding: .55em 1em; font: 600 1.6rem/1.5 "Inter", sans-serif; color: var(--black); white-space: nowrap; }
@media (max-width: 1439px) { .pc-nav__list > li { margin-inline: 1.2rem; } }

/* The cart: an icon with the count on a red dot. */
.pc-cart { position: relative; display: flex; color: #000; font-size: 2.7rem; }
.pc-cart .pc-icon { width: 30px; height: 27px; vertical-align: 0; }
.pc-cart__count { position: absolute; top: -9px; left: 22px; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--tertiary); color: #fff; font: 700 10px/1 "Inter", sans-serif; }

/* Below 1280px the full menu no longer fits: the menu button, a centred logo and the cart. */
@media (max-width: 1279px) {
	.pc-nav, .pc-header-shop { display: none; }
	.pc-header__menu { all: unset; flex: 0 0 auto; display: block; width: 4rem; height: 2.4rem; padding: 1rem; cursor: pointer; position: relative; }
	.pc-header__menu span, .pc-header__menu span::before, .pc-header__menu span::after { position: absolute; left: 50%; width: 3.2rem; height: 3px; margin-left: -1.6rem; border-radius: 4px; background: #000; }
	.pc-header__menu span { top: 50%; margin-top: -1.5px; }
	.pc-header__menu span::before, .pc-header__menu span::after { content: ""; }
	.pc-header__menu span::before { top: -8px; }
	.pc-header__menu span::after { top: 8px; }
	.pc-header__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; flex: none; }
}
@media (max-width: 991px) { .pc-header__bar { width: min(var(--content-width), 100% - var(--gutter) * 2 - var(--space-m) * 2); } }
@media (max-width: 478px) {
	.pc-header__bar { width: calc(100% - var(--space-m) * 2); padding-inline: 0; }
	.pc-header__menu { padding: 0; }
	.pc-cart .pc-icon { width: 33px; height: 29px; }
	.pc-cart__count { left: 24px; }
}