/*
Theme Name: BrandKit
Theme URI: https://example.com/brandkit
Author: BrandKit
Description: An empty block theme for single-brand affiliate sites: no demo content, but a header and footer that fill themselves from one settings screen, one design system for typography, colours and buttons that every block on the site inherits, and a front end built for slow mobile connections.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Version: 2.1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brandkit
Tags: one-column, block-patterns, full-site-editing, wide-blocks, accessibility-ready
*/

/* -------------------------------------------------------------------------
   Design tokens
   Every value here is a fallback. The real values come from Appearance →
   BrandKit and are injected as custom properties on :root, which is why one
   setting reaches the header, the content and the plugin blocks at once.
   ---------------------------------------------------------------------- */

:root {
	/* Buttons */
	--bk-btn-radius: 4px;
	--bk-btn-border-width: 1px;
	--bk-btn-font-size: 0.9375rem;
	--bk-btn-weight: 600;
	--bk-btn-transform: none;
	--bk-btn-tracking: 0;
	--bk-btn-pad-y: 0.72em;
	--bk-btn-pad-x: 1.4em;
	/* A button's border follows its own background unless a border colour is set.
	   Hard-coding it here is what made a button recoloured to yellow keep a green
	   outline, and made "clear the border field" mean "bring the green back". */
	--bk-btn-primary-bg: #0f7a56;
	--bk-btn-primary-text: #fff;
	--bk-btn-primary-border: var(--bk-btn-primary-bg);
	--bk-btn-primary-bg-hover: #0c6446;
	--bk-btn-primary-text-hover: #fff;
	--bk-btn-secondary-bg: #ffc233;
	--bk-btn-secondary-text: #15130a;
	--bk-btn-secondary-border: var(--bk-btn-secondary-bg);
	--bk-btn-secondary-bg-hover: #f2b01c;
	--bk-btn-secondary-text-hover: #15130a;
	--bk-btn-ghost-bg: transparent;
	--bk-btn-ghost-text: #fff;
	--bk-btn-ghost-border: #fff;
	--bk-btn-ghost-bg-hover: #fff;
	--bk-btn-ghost-text-hover: #0e1713;

	/* Typography */
	--bk-line-height: 1.65;
	--bk-h1: clamp(1.9rem, 1.35rem + 2.4vw, 2.6rem);
	--bk-h2: clamp(1.45rem, 1.2rem + 1.2vw, 1.9rem);
	--bk-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
	--bk-h4: 1.0625rem;
	--bk-heading-weight: 700;
	--bk-heading-height: 1.22;
	--bk-heading-tracking: -0.01em;

	/* Header */
	--bk-header-h: 64px;
	--bk-header-pad-x: var(--wp--preset--spacing--30);
	--bk-header-border: transparent;
	--bk-logo-h: 36px;
	--bk-logo-w: none;
	--bk-menu-size: 0.9375rem;
	--bk-menu-weight: 600;
	--bk-menu-transform: none;
	--bk-menu-gap: 4px;
	--bk-menu-radius: 3px;
	--bk-menu-link: inherit;
	--bk-menu-link-hover: inherit;
	--bk-menu-hover-bg: rgba(255, 255, 255, .1);

	/* Subheader */
	--bk-subheader-bg: #0f7a56;
	--bk-subheader-text: #fff;
	--bk-sub-h: 40px;
	--bk-sub-size: 0.875rem;
	--bk-sub-weight: 600;
	--bk-sub-transform: none;
	--bk-sub-radius: 3px;
	--bk-sub-hover: inherit;
	--bk-sub-hover-bg: rgba(0, 0, 0, .18);

	/* Footer */
	--bk-footer-size: 0.9375rem;
	--bk-footer-title-size: 0.75rem;
	--bk-footer-title-weight: 700;
	--bk-footer-title-color: currentColor;
	--bk-footer-link: currentColor;
	--bk-footer-link-hover: currentColor;
	--bk-footer-icon-h: 30px;
	--bk-footer-icon-gap: 14px;
	--bk-footer-icon-max-w: 200px;
	--bk-footer-social-size: 38px;
	--bk-footer-social-bg: transparent;
	--bk-footer-social-hover: var(--wp--preset--color--brand);
	--bk-footer-radius: 4px;
}

/* -------------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------- */

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

img {
	max-width: 100%;
	height: auto;
}

/* Heading sizes live here rather than in theme.json so one settings field can
   drive them. :where() keeps the specificity at zero for the tag itself, so
   this beats the global-styles rules by load order while any component class
   further down this file — a footer column heading, say — still wins. */
:root :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--bk-font-heading, inherit);
}

:root :where(h1, .wp-block-post-title) {
	font-size: var(--bk-h1);
}

:root :where(h2) {
	font-size: var(--bk-h2);
}

:root :where(h3) {
	font-size: var(--bk-h3);
}

:root :where(h4) {
	font-size: var(--bk-h4);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 200;
	width: auto;
	height: auto;
	clip: auto;
	padding: 10px 16px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		transition-duration: 0.01ms !important;
	}
}

.bk-container {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--bk-header-pad-x);
}

.bk-notice {
	margin: 0;
	padding: 8px 12px;
	border: 1px dashed currentColor;
	border-radius: 3px;
	font-size: 0.8125rem;
	opacity: 0.75;
}

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */

.bk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: var(--bk-btn-pad-y) var(--bk-btn-pad-x);
	border-radius: var(--bk-btn-radius);
	border: var(--bk-btn-border-width) solid transparent;
	font-family: inherit;
	font-size: var(--bk-btn-font-size);
	font-weight: var(--bk-btn-weight);
	letter-spacing: var(--bk-btn-tracking);
	text-transform: var(--bk-btn-transform);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.bk-btn--primary {
	background: var(--bk-btn-primary-bg);
	color: var(--bk-btn-primary-text);
	border-color: var(--bk-btn-primary-border);
}

.bk-btn--primary:hover,
.bk-btn--primary:focus {
	background: var(--bk-btn-primary-bg-hover);
	color: var(--bk-btn-primary-text-hover);
}

.bk-btn--secondary {
	background: var(--bk-btn-secondary-bg);
	color: var(--bk-btn-secondary-text);
	border-color: var(--bk-btn-secondary-border);
}

.bk-btn--secondary:hover,
.bk-btn--secondary:focus {
	background: var(--bk-btn-secondary-bg-hover);
	color: var(--bk-btn-secondary-text-hover);
}

.bk-btn--ghost {
	background: var(--bk-btn-ghost-bg);
	color: var(--bk-btn-ghost-text);
	border-color: var(--bk-btn-ghost-border);
}

.bk-btn--ghost:hover,
.bk-btn--ghost:focus {
	background: var(--bk-btn-ghost-bg-hover);
	color: var(--bk-btn-ghost-text-hover);
}

.bk-btn__icon {
	flex: none;
}

.bk-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */

.bk-header {
	background: var(--wp--preset--color--header-bg);
	color: var(--wp--preset--color--header-text);
	font-family: var(--bk-header-font, inherit);
	border-bottom: 1px solid var(--bk-header-border);
}

/* Sticky has to be applied to the template-part wrapper (<header>), not to the
   .bk-header inside it: a sticky element can only travel within its parent, and
   that parent is exactly as tall as the header, so it would never move. */
.bk-sticky-header .wp-site-blocks > header,
.bk-sticky-header .wp-site-blocks > .wp-block-template-part:first-child,
.bk-sticky-header .wp-block-template-part:has(> .bk-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar.bk-sticky-header .wp-site-blocks > header,
.admin-bar.bk-sticky-header .wp-site-blocks > .wp-block-template-part:first-child,
.admin-bar.bk-sticky-header .wp-block-template-part:has(> .bk-header) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.bk-header a {
	color: inherit;
}

.bk-header__row {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: var(--bk-header-h);
}

.bk-header .wp-block-site-title a,
.bk-header .wp-block-site-title,
.bk-site-title a {
	color: var(--wp--preset--color--header-text);
	text-decoration: none;
}

.bk-site-title {
	font-size: var(--bk-site-title-size, var(--wp--preset--font-size--large));
	font-weight: var(--bk-site-title-weight, 800);
	line-height: 1.1;
	white-space: nowrap;
}

.bk-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
	min-width: 0;
}

/* Logo size is a setting, so the uploaded file can be any resolution. */
.bk-brand .custom-logo-link {
	display: flex;
	align-items: center;
	line-height: 0;
}

.bk-brand .custom-logo {
	display: block;
	height: var(--bk-logo-h);
	width: auto;
	max-width: var(--bk-logo-w, none);
	object-fit: contain;
}

/* Buttons placed in the header part from the Site Editor. They are styled by
   position (any Buttons block inside the header), so it does not matter whether
   the editor kept the bk-header__actions class on them. */
:is(.bk-header__actions, .bk-header .wp-block-buttons) {
	flex: none;
	margin-left: auto;
	gap: 8px;
}

:is(.bk-header__actions, .bk-header .wp-block-buttons) .wp-block-button__link {
	white-space: nowrap;
}

:is(.bk-header__actions, .bk-header .wp-block-buttons) .is-style-outline .wp-block-button__link {
	background: var(--bk-btn-ghost-bg);
	color: var(--bk-btn-ghost-text);
	border-color: var(--bk-btn-ghost-border);
}

:is(.bk-header__actions, .bk-header .wp-block-buttons) .is-style-outline .wp-block-button__link:hover,
:is(.bk-header__actions, .bk-header .wp-block-buttons) .is-style-outline .wp-block-button__link:focus {
	background: var(--bk-btn-ghost-bg-hover);
	color: var(--bk-btn-ghost-text-hover);
}

/* Order is set in CSS, not by the order blocks happen to sit in the template:
   logo, menu, buttons on a computer. Anything not listed below (the logo, the
   site title) keeps order 1 and so always comes first. */
.bk-header__row > * {
	order: 1;
}

.bk-header__row > .bk-nav {
	order: 2;
}

.bk-header__row > :is(.bk-header__actions, .wp-block-buttons, :has(> .wp-block-buttons)) {
	order: 3;
}

/* -------------------------------------------------------------------------
   Navigation
   ---------------------------------------------------------------------- */

.bk-menu {
	display: flex;
	align-items: center;
	gap: var(--bk-menu-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bk-menu li {
	position: relative;
}

.bk-menu a {
	display: block;
	padding: 9px 12px;
	font-size: var(--bk-menu-size);
	font-weight: var(--bk-menu-weight);
	text-transform: var(--bk-menu-transform);
	text-decoration: none;
	border-radius: var(--bk-menu-radius);
	color: var(--bk-menu-link, inherit);
}

/* Hover plates belong to the header and subheader only — in the footer a link
   is a link. */
.bk-header .bk-menu a:hover,
.bk-header .bk-menu a:focus,
.bk-header .bk-menu .current-menu-item > a {
	background: var(--bk-menu-hover-bg);
	color: var(--bk-menu-link-hover, inherit);
}

.bk-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 380px;
	width: max-content;
	max-width: calc(100vw - 24px);
	display: none;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 6px;
	background: var(--wp--preset--color--header-bg);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--bk-menu-radius);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}

/* The last item's dropdown opens leftwards so it cannot run off the screen. */
.bk-menu > li:last-child > .sub-menu {
	left: auto;
	right: 0;
}

.bk-menu li:hover > .sub-menu,
.bk-menu li:focus-within > .sub-menu {
	display: flex;
}

.bk-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 38px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--bk-menu-radius);
	color: inherit;
	cursor: pointer;
}

.bk-nav__bars,
.bk-nav__bars::before,
.bk-nav__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.bk-nav__bars {
	position: relative;
}

.bk-nav__bars::before,
.bk-nav__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.bk-nav__bars::before {
	top: -6px;
}

.bk-nav__bars::after {
	top: 6px;
}

.bk-nav--inline .bk-menu,
.bk-nav--scroll .bk-menu {
	flex-wrap: wrap;
}

/* Menu placement, set from the settings screen. */
.bk-menu-left .bk-header__row .bk-nav {
	margin-right: auto;
}

.bk-menu-left .bk-header__row .bk-brand {
	margin-right: 0;
}

.bk-menu-center .bk-header__row .bk-nav {
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Subheader
   ---------------------------------------------------------------------- */

.bk-subheader {
	background: var(--bk-subheader-bg);
	color: var(--bk-subheader-text);
	font-family: var(--bk-header-font, inherit);
}

.bk-subheader a {
	color: inherit;
}

.bk-subheader .bk-menu {
	gap: 2px;
	min-height: var(--bk-sub-h);
	padding-block: 4px;
}

.bk-subheader .bk-menu a {
	padding: 7px 11px;
	font-size: var(--bk-sub-size);
	font-weight: var(--bk-sub-weight);
	text-transform: var(--bk-sub-transform);
	border-radius: var(--bk-sub-radius);
	color: inherit;
}

.bk-subheader .bk-menu a:hover,
.bk-subheader .bk-menu a:focus {
	background: var(--bk-sub-hover-bg);
	color: var(--bk-sub-hover, inherit);
}

/* -------------------------------------------------------------------------
   Footer

   Nothing in the footer carries a plate: uploaded logos are PNGs with their
   own transparency, and a grey box behind them is exactly what makes a footer
   look assembled rather than designed.
   ---------------------------------------------------------------------- */

.bk-footer {
	background: var(--wp--preset--color--footer-bg);
	color: var(--wp--preset--color--footer-text);
	font-size: var(--bk-footer-size);
}

.bk-footer a {
	color: var(--bk-footer-link);
	text-decoration: none;
}

.bk-footer a:hover,
.bk-footer a:focus {
	color: var(--bk-footer-link-hover);
	text-decoration: underline;
}

.bk-footer__title {
	margin: 0 0 12px;
	font-size: var(--bk-footer-title-size);
	font-weight: var(--bk-footer-title-weight);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bk-footer-title-color);
	opacity: 0.72;
}

.bk-footer .bk-menu {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.bk-footer .bk-menu a {
	padding: 4px 0;
	font-weight: 500;
	font-size: var(--bk-footer-size);
	border-radius: 0;
	background: none;
}

.bk-footer .bk-menu a:hover,
.bk-footer .bk-menu a:focus,
.bk-footer .bk-menu .current-menu-item > a {
	background: none;
	text-decoration: underline;
}

.bk-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bk-footer-icon-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bk-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	padding: 0;
	border-radius: 0;
	min-height: 0;
}

.bk-icon a {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.bk-icon__img {
	display: block;
	height: var(--bk-footer-icon-h);
	width: auto;
	max-width: var(--bk-footer-icon-max-w);
	object-fit: contain;
}

.bk-icon__text {
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
}

/* Optional plate, off by default, for artwork that only exists in dark ink. */
.bk-icons.has-plate .bk-icon {
	padding: 7px 11px;
	background: #fff;
	border-radius: var(--bk-footer-radius);
}

.bk-icons.has-plate .bk-icon__text {
	color: #15130a;
}

.bk-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bk-social {
	display: grid;
	place-items: center;
	width: var(--bk-footer-social-size);
	height: var(--bk-footer-social-size);
	border-radius: 50%;
	background: var(--bk-footer-social-bg);
	color: inherit;
	transition: color .15s ease, background-color .15s ease;
}

.bk-social:hover,
.bk-social:focus {
	color: var(--bk-footer-social-hover);
	text-decoration: none;
}

.bk-disclaimer {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	opacity: 0.75;
}

.bk-copyright {
	margin: 0;
	font-size: 0.8125rem;
	opacity: 0.7;
}

.bk-age {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid currentColor;
	font-size: 0.75rem;
	font-weight: 700;
	flex: none;
}

.bk-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.bk-app-button .bk-btn {
	width: 100%;
	max-width: 260px;
}

/* -------------------------------------------------------------------------
   Block style variations
   ---------------------------------------------------------------------- */

.is-style-brandkit-panel {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--30);
}

.is-style-brandkit-bar {
	padding-block: var(--wp--preset--spacing--20);
}

/* -------------------------------------------------------------------------
   Mobile
   ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	.bk-hide-mobile {
		display: none;
	}

	.bk-nav--drawer .bk-nav__toggle {
		display: inline-flex;
	}

	.bk-nav--drawer .bk-nav__panel {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 90;
		padding: 8px var(--bk-header-pad-x) 14px;
		background: var(--wp--preset--color--header-bg);
		border-top: 1px solid rgba(255, 255, 255, .12);
		box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
	}

	.bk-nav--drawer.is-open .bk-nav__panel {
		display: block;
	}

	.bk-nav--drawer .bk-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.bk-nav--drawer .bk-menu > li + li {
		border-top: 1px solid rgba(255, 255, 255, .1);
	}

	.bk-nav--drawer .bk-menu a {
		padding: 11px 4px;
	}

	.bk-nav--drawer .sub-menu {
		position: static;
		display: flex;
		width: auto;
		min-width: 0;
		max-width: none;
		background: none;
		border: 0;
		box-shadow: none;
		padding: 0 0 6px 14px;
	}

	/* One row: logo, then the buttons, then the menu button at the far right. */
	.bk-header__row {
		position: relative;
		gap: 6px;
		flex-wrap: nowrap;
	}

	.bk-header .bk-header__row > :not(.bk-nav, .bk-header__actions, .wp-block-buttons, :has(> .wp-block-buttons)) {
		flex: 0 1 auto;
		margin-right: auto;
		min-width: 0;
	}

	.bk-header .bk-header__row .bk-brand .custom-logo {
		max-width: 100%;
	}

	.bk-header .bk-header__row > :is(.bk-header__actions, .wp-block-buttons, :has(> .wp-block-buttons)) {
		order: 2;
		flex: 0 0 auto;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		margin-left: 0;
		gap: 6px;
	}

	.bk-header .bk-header__row > .bk-nav {
		order: 3;
		flex: none;
		margin: 0;
	}

	.bk-header .wp-block-buttons {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 6px;
	}

	.bk-header .wp-block-button {
		flex: none;
		margin: 0;
	}

	.bk-header .wp-block-button__link {
		padding: 0.55em 0.75em;
		font-size: 0.75rem;
		letter-spacing: 0;
		line-height: 1.2;
	}

	.bk-nav__toggle {
		width: 38px;
		height: 36px;
	}

	.bk-subheader--scroll .bk-menu,
	.bk-nav--scroll .bk-menu {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.bk-subheader--scroll .bk-menu::-webkit-scrollbar,
	.bk-nav--scroll .bk-menu::-webkit-scrollbar {
		display: none;
	}

	.bk-icons {
		gap: 10px;
	}
}

@media (min-width: 782px) {
	.bk-nav--drawer .bk-nav__panel {
		display: block !important;
	}
}