/*
Theme Name:        Llama Corp (Blocksy Child)
Theme URI:         https://llamacorporation.shop/
Description:       Llama Corp brand child theme for Blocksy. Brand palette, self-hosted brand fonts, Blocksy Customizer defaults, theme.json presets and WooCommerce styling (classic and block cart/checkout).
Author:            Llama Corp
Template:          blocksy
Version:           1.0.0
Requires at least: 6.4
Tested up to:      6.8
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:       llamacorp-blocksy-child
Tags:              e-commerce, custom-colors, custom-logo, block-styles
*/

/*
 * Base brand layer. Most colors, type and button styles come from Blocksy's own
 * Customizer options (seeded by inc/blocksy-defaults.php). This file only adds what
 * Blocksy has no option for. Tokens live in assets/css/tokens.css.
 */

/* ------------------------------------------------------------------ */
/* Typography details                                                 */
/* ------------------------------------------------------------------ */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Comfortable reading measure for long-form content (brand: 68ch). */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: var(--lc-reading-width);
}

/* Headlines: no orphans where supported. */
h1,
h2,
h3,
.lc-display {
	text-wrap: balance;
}

/* ------------------------------------------------------------------ */
/* Brand utility classes (add via "Additional CSS class(es)" in blocks) */
/* Mirrors llama-content/design-system/tokens.css roles, web scale.    */
/* ------------------------------------------------------------------ */

.lc-display {
	font-family: var(--lc-font-display);
	font-weight: 700;
	font-size: clamp(40px, 6vw, var(--lc-fs-display));
	line-height: var(--lc-lh-display);
	letter-spacing: var(--lc-ls-display);
	color: var(--lc-c-heading);
}

.lc-eyebrow {
	font-family: var(--lc-font-heading);
	font-weight: 700;
	font-size: var(--lc-fs-eyebrow);
	line-height: 1.2;
	letter-spacing: var(--lc-ls-eyebrow);
	text-transform: uppercase;
	color: var(--lc-lavender);
}

.lc-tagline {
	font-family: var(--lc-font-heading);
	font-weight: 500;
	font-size: var(--lc-fs-tagline);
	line-height: var(--lc-lh-tagline);
	color: var(--lc-c-heading);
}

/* Subtitle sits BELOW the copy (headline -> body -> subtitle). Sentence case, lavender. */
.lc-subtitle {
	font-family: var(--lc-font-accent);
	font-weight: 400;
	line-height: 1.25;
	color: var(--lc-lavender);
}

.lc-small {
	font-family: var(--lc-font-body);
	font-size: var(--lc-fs-small);
	line-height: 1.45;
	color: var(--lc-lavender);
}

.lc-pill {
	display: inline-block;
	padding: 7px 14px;
	border-radius: var(--lc-radius-pill);
	background: var(--lc-sunset);
	color: var(--lc-purple);
	font: 700 14px/1 var(--lc-font-heading);
}

.lc-card {
	background: var(--lc-white);
	border-radius: var(--lc-radius-lg);
	padding: var(--lc-space-5);
	box-shadow: var(--lc-shadow-card);
}

/* Speech bubble for Killa: 16px radius, one 4px corner pointing at her. */
.lc-bubble {
	background: var(--lc-white);
	border-radius: 16px 16px 16px 4px;
	padding: 9px 16px;
	font: 400 15px/1.45 var(--lc-font-body);
	color: var(--lc-purple);
}

/* Grounds (tested contrast recipes from design-system/README.md). */
.lc-ground-blush {
	background-color: var(--lc-blush);
	color: var(--lc-lavender);
	--theme-headings-color: var(--lc-purple);
}

.lc-ground-purple {
	background-color: var(--lc-purple);
	color: var(--lc-blush);
	--theme-text-color: var(--lc-blush);
	--theme-headings-color: var(--lc-white);
	--theme-link-initial-color: var(--lc-white);
	--theme-link-hover-color: var(--lc-blush);
}

.lc-ground-lavender {
	background-color: var(--lc-lavender);
	color: var(--lc-blush);
	--theme-text-color: var(--lc-blush);
	--theme-headings-color: var(--lc-white);
	--theme-link-initial-color: var(--lc-white);
	--theme-link-hover-color: var(--lc-blush);
	/* Recipe: white button, purple text on lavender. */
	--theme-button-background-initial-color: var(--lc-white);
	--theme-button-text-initial-color: var(--lc-purple);
}

/* Knit band motif: one per piece, as a divider. Purple on light grounds, blush/white on dark. */
.lc-knit {
	height: 56px;
	background: url("assets/images/knit-band-purple.svg") repeat-x left center / 40px 56px;
}

.lc-ground-purple .lc-knit,
.lc-ground-lavender .lc-knit,
.lc-knit--blush {
	background-image: url("assets/images/knit-band-blush.svg");
}

.lc-knit--white {
	background-image: url("assets/images/knit-band-white.svg");
}

.lc-knit--sunset {
	background-image: url("assets/images/knit-band-sunset.svg");
}

/* ------------------------------------------------------------------ */
/* Buttons and forms                                                  */
/* Colors, radius, height and font come from Blocksy options.         */
/* ------------------------------------------------------------------ */

/* Clear keyboard focus ring in brand purple. */
:is(a, button, input, select, textarea, .button, .wp-element-button, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--lc-purple);
	outline-offset: 2px;
}

/* Outline style button in brand colors. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--lc-purple);
	border: 2px solid var(--lc-purple);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--lc-purple);
	color: var(--lc-white);
}

/* Inputs: 8px radius per the brand radius scale. */
:is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], textarea, select) {
	border-radius: var(--lc-radius-sm);
}

/* ------------------------------------------------------------------ */
/* Images                                                             */
/* ------------------------------------------------------------------ */

.entry-content .wp-block-image img {
	border-radius: var(--lc-radius-md);
}