/*
Theme Name: Work Smarter
Theme URI: https://www.worksmarter.london
Author: Work Smarter
Description: Custom block theme for Work Smarter — virtual admin services, London. Purple, dark blue and turquoise brand with Source Serif 4 headings. Fully editable in the Site Editor.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: work-smarter
*/

/*
	All design tokens (colours, fonts, sizes, button styles) live in theme.json.
	This file holds only what theme.json cannot express. Keep it short.
*/

/* Eyebrow label — small uppercase mono kicker above headings.
   Set its colour per use in the editor:
   "Turquoise (text on light)" on light backgrounds, "Turquoise (on dark)" on dark bands. */
.ws-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Speech bubble — testimonial card with a pointer tail (bottom left). */
.ws-bubble {
	position: relative;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(25, 37, 54, 0.1);
	border-radius: 18px;
	box-shadow: 0 6px 22px rgba(25, 37, 54, 0.06);
}

.ws-bubble::after {
	content: "";
	position: absolute;
	bottom: -13px;
	left: 40px;
	width: 26px;
	height: 26px;
	background: var(--wp--preset--color--white);
	border-right: 1px solid rgba(25, 37, 54, 0.1);
	border-bottom: 1px solid rgba(25, 37, 54, 0.1);
	transform: rotate(45deg);
}

/* The logo file has a white background; multiply blends it into tinted backgrounds. */
.wp-block-site-logo img {
	mix-blend-mode: multiply;
}

/* Navigation: pill-shaped links, purple-tinted pill on the current page. */
.wp-block-navigation a {
	padding: 0.5rem 0.8rem;
	border-radius: 999px;
}

.wp-block-navigation .current-menu-item > a {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
}

/* Visible focus for keyboard users. Never remove. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}