/*
Theme Name: GBP
Theme URI: https://bioeconomypartnership.com
Description: Child theme of Twenty Twenty-Four for the Global Bioeconomy Partnership. Palette "Slate & Summit", Manrope and JetBrains Mono, network-mark motif. The parent theme continues to receive updates.
Author: Global Bioeconomy Partnership
Version: 0.2.0
Template: twentytwentyfour
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: gbp
*/

/* -------------------------------------------------------------
   Only what theme.json cannot express.
   Colours, fonts, sizes and spacing live in theme.json.
   ------------------------------------------------------------- */

:root{
	--gbp-r-card: 22px;
	--gbp-r-img: 28px;
}

/* ---------- brand strip ---------- */
.gbp-strip{display:flex;height:8px}
.gbp-strip span{flex:1}
.gbp-strip span:nth-child(1){background:var(--wp--preset--color--slate)}
.gbp-strip span:nth-child(2){background:var(--wp--preset--color--green)}
.gbp-strip span:nth-child(3){background:var(--wp--preset--color--magenta)}

/* ---------- header ---------- */
.gbp-header{
	position:sticky;top:0;z-index:40;
	background:rgba(255,255,255,.93);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--wp--preset--color--line);
}
.gbp-logo{height:38px;width:auto;display:block}
.gbp-logo-foot{height:42px;width:auto;display:block;margin-bottom:1rem}
.gbp-header .wp-block-navigation a:hover{color:var(--wp--preset--color--slate)}

/* ---------- eyebrow / labels ---------- */
.gbp-eyebrow{
	font-family:var(--wp--preset--font-family--sans);
	font-weight:700;font-size:var(--wp--preset--font-size--x-small);
	letter-spacing:.12em;text-transform:uppercase;
	color:var(--wp--preset--color--green-text);
	margin-bottom:.9rem;
}
.gbp-mono{
	font-family:var(--wp--preset--font-family--mono);
	font-size:.79rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
	color:var(--wp--preset--color--muted);
}
.gbp-mono-green{color:var(--wp--preset--color--green-text)}

/* ---------- hero ---------- */
.gbp-hero{position:relative;overflow:hidden}
.gbp-hero > .gbp-mark-bg{
	position:absolute;right:-220px;top:50%;transform:translateY(-50%);
	width:780px;height:780px;opacity:.1;pointer-events:none;
}
.gbp-hero .wp-block-group.gbp-hero-inner{position:relative}
.gbp-hero h1{max-width:17ch;text-wrap:balance}
.gbp-hero h1 em{font-style:normal;color:var(--wp--preset--color--slate)}
.gbp-lead{font-size:var(--wp--preset--font-size--large);line-height:1.5;max-width:48ch;text-wrap:pretty}

/* ---------- pull quote ---------- */
.gbp-pullquote{
	border-left:3px solid var(--wp--preset--color--green);
	padding-left:1.25rem;margin:1.6rem 0 0;
	font-weight:800;font-size:1.19rem;line-height:1.35;letter-spacing:-.02em;
	color:var(--wp--preset--color--contrast);text-wrap:pretty;
}

/* ---------- cards ---------- */
.gbp-card{
	background:var(--wp--preset--color--base);
	border:1px solid var(--wp--preset--color--line);
	border-radius:var(--gbp-r-card);
}

/* bold bets */
.gbp-bet{border-top-width:5px;border-top-style:solid;border-top-color:var(--wp--preset--color--slate);height:100%}
.gbp-bet-2{border-top-color:var(--wp--preset--color--green)}
.gbp-bet-3{border-top-color:var(--wp--preset--color--magenta)}
.gbp-bet-icon{width:72px;height:72px;display:block;margin-bottom:1.2rem}
.gbp-bet .gbp-mono{color:var(--wp--preset--color--slate)}
.gbp-bet-2 .gbp-mono{color:var(--wp--preset--color--green-text)}
.gbp-bet-3 .gbp-mono{color:var(--wp--preset--color--magenta-text)}

.gbp-wicked{
	background:var(--wp--preset--color--tint-blue);
	border-radius:var(--gbp-r-card);
	padding:1.4rem 1.6rem;color:var(--wp--preset--color--contrast);
	text-wrap:pretty;
}

/* ---------- what unites us: radial ---------- */
.gbp-dark{background:var(--wp--preset--color--contrast);position:relative;overflow:hidden}
.gbp-dark > .gbp-mark-bg{
	position:absolute;right:-160px;top:-180px;width:520px;height:520px;
	opacity:.1;pointer-events:none;
}
.gbp-dark .wp-block-group.gbp-dark-inner{position:relative}
.gbp-dark h2,.gbp-dark h3{color:#fff}
.gbp-dark p{color:#C6D2DC}
.gbp-dark .gbp-eyebrow{color:#BCDFAD}

.gbp-radial{position:relative;margin:3.5rem auto 0;max-width:1060px;height:720px}
.gbp-radial-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gbp-hub{
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	width:228px;height:228px;border-radius:50%;background:#1E2E3D;
	border:1px solid rgba(255,255,255,.16);
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
	box-shadow:0 0 0 14px rgba(47,74,99,.18);
}
.gbp-hub-mark{width:84px;height:84px;display:block}
.gbp-hub-label{
	font-family:var(--wp--preset--font-family--mono);
	font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;
	color:#8FA3B4;text-align:center;line-height:1.5;
}
.gbp-cmt{
	position:absolute;width:256px;transform:translate(-50%,-50%);
	background:#1E2E3D;border:1px solid rgba(255,255,255,.14);
	border-radius:var(--gbp-r-card);padding:1.25rem 1.3rem;
}
.gbp-cmt .gbp-cmt-n{
	font-family:var(--wp--preset--font-family--mono);
	font-size:.72rem;letter-spacing:.1em;color:#7E93A6;display:block;margin-bottom:.55rem;
}
.gbp-cmt p{font-size:.92rem;line-height:1.5;color:#DCE5EC;margin:0;text-wrap:pretty}
.gbp-cmt-1{left:50%;top:9%}
.gbp-cmt-2{left:86%;top:36%}
.gbp-cmt-3{left:73%;top:89%}
.gbp-cmt-4{left:27%;top:89%}
.gbp-cmt-5{left:14%;top:36%}

/* ---------- principles ---------- */
.gbp-pip{width:34px;height:6px;border-radius:3px;background:var(--wp--preset--color--slate);margin-bottom:1.1rem}
.gbp-pip-2{background:var(--wp--preset--color--green)}
.gbp-pip-3{background:var(--wp--preset--color--magenta)}

/* ---------- news ---------- */
.gbp-pill{
	display:inline-block;font-size:.75rem;font-weight:700;padding:5px 13px;border-radius:999px;
	background:var(--wp--preset--color--tint-blue);color:var(--wp--preset--color--slate-dark);
}
.gbp-pill-event{background:var(--wp--preset--color--tint-magenta);color:#6A124C}
.gbp-pill-workshop{background:#DDEFD5;color:#3B6C2C}

/* ---------- photo credit ---------- */
.gbp-credit{
	font-family:var(--wp--preset--font-family--mono);
	font-size:.72rem;letter-spacing:.06em;
	color:var(--wp--preset--color--muted);
	margin-top:.6rem;text-align:left;
}

/* ---------- partners ---------- */
/* A logo is not a photo: no rounded corners, and it keeps its own proportions. */
.gbp-partner-logo img{border-radius:0;max-width:260px;height:auto;display:block}
.gbp-partner-logo{margin-left:0}

.gbp-soon{
	border:1px dashed #C6CFD8;border-radius:var(--gbp-r-card);
	display:flex;flex-direction:column;justify-content:center;
}
.gbp-tag-soon{
	align-self:flex-start;font-family:var(--wp--preset--font-family--mono);
	font-size:.69rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
	color:var(--wp--preset--color--muted);border:1px solid var(--wp--preset--color--line);
	padding:5px 12px;border-radius:999px;background:var(--wp--preset--color--base);
}
.gbp-dots{display:flex;gap:7px}
.gbp-dots span{width:9px;height:9px;border-radius:50%;opacity:.3}
.gbp-dots span:nth-child(1){background:var(--wp--preset--color--slate)}
.gbp-dots span:nth-child(2){background:var(--wp--preset--color--green)}
.gbp-dots span:nth-child(3){background:var(--wp--preset--color--magenta)}

/* ---------- contact band ---------- */
.gbp-band{background:var(--wp--preset--color--slate);position:relative;overflow:hidden}
.gbp-band > .gbp-mark-bg{
	position:absolute;right:-130px;bottom:-190px;width:480px;height:480px;
	opacity:.16;pointer-events:none;
}
.gbp-band .wp-block-group.gbp-band-inner{position:relative}
.gbp-band h2{color:#fff;max-width:19ch;text-wrap:balance}
.gbp-band p{color:#D6E0E9}

/* outline button on dark */
.gbp-btn-outline .wp-block-button__link{
	background:transparent;border:1px solid rgba(255,255,255,.42);color:#fff;
}
.gbp-btn-outline .wp-block-button__link:hover{background:rgba(255,255,255,.12)}
.gbp-btn-light .wp-block-button__link{background:#fff;color:var(--wp--preset--color--contrast)}
.gbp-btn-light .wp-block-button__link:hover{background:var(--wp--preset--color--tint-blue)}

/* ---------- footer ---------- */
.gbp-footer{background:var(--wp--preset--color--contrast)}
.gbp-footer, .gbp-footer p{color:#8FA3B4}
.gbp-footer h2,.gbp-footer h3,.gbp-footer h4{color:#fff}
.gbp-footer a{color:#A9BCCB;text-decoration:none}
.gbp-footer a:hover{color:#fff}
/* The link lists sit in raw HTML blocks, so they need to be stacked here. */
.gbp-footer .wp-block-column > a{display:block;margin-bottom:.55rem;line-height:1.5}
.gbp-footer .wp-block-column > a:last-child{margin-bottom:0}
.gbp-footer-head{
	font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;
}
.gbp-footer-base{border-top:1px solid rgba(255,255,255,.12)}

/* ---------- legal pages ---------- */
.gbp-legal h2{font-size:1.4rem;margin-top:2.6rem}
.gbp-legal h3{font-size:1.1rem;margin-top:1.6rem}
.gbp-addr{background:var(--wp--preset--color--mist);border-radius:var(--gbp-r-card);padding:1.4rem 1.6rem}
.gbp-todo{
	background:#FFF4D6;border:1px solid #E8D08A;border-radius:14px;
	padding:1rem 1.25rem;color:#5C4708;
}
.gbp-legal mark{background:#FFE9A8;color:#4A3A06;padding:1px 5px;border-radius:4px;font-weight:700}

/* ---------- accessibility ---------- */
:where(a:focus-visible),
:where(button:focus-visible),
:where(.wp-block-button__link:focus-visible){
	outline:2px solid var(--wp--preset--color--green);
	outline-offset:2px;
}

/* ---------- responsive ---------- */
@media(max-width:1024px){
	.gbp-hero > .gbp-mark-bg{right:-320px;opacity:.07}
	.gbp-radial{height:auto;display:grid;gap:1rem}
	.gbp-radial-lines{display:none}
	.gbp-hub{position:static;transform:none;width:170px;height:170px;margin:0 auto .6rem;box-shadow:none}
	.gbp-hub-mark{width:64px;height:64px}
	.gbp-cmt{position:static;transform:none;width:auto}
}
@media(max-width:781px){
	.gbp-logo{height:30px}
	.gbp-bet-icon{width:64px;height:64px}
}
@media(prefers-reduced-motion:reduce){
	*{transition:none !important;scroll-behavior:auto}
}