/*
Theme Name: Twenty Twenty-Five Brand Guidelines
Theme URI: https://example.com/twentytwentyfive-brand/
Description: A child theme of Twenty Twenty-Five for building branded design-system / brand-guideline websites in Gutenberg. Ships with a multi-palette colour system, swappable font stack, logo + imagery guideline patterns, and a sticky in-page navigation.
Author: Your Studio
Author URI: https://example.com
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-brand
Tags: brand-guidelines, block-theme, design-system, full-site-editing, child-theme

This child theme inherits all functionality from Twenty Twenty-Five. Most styling
is handled via theme.json. The CSS below covers things that theme.json cannot
express: sticky positioning, scroll-padding for the anchor nav, and a few
guideline-specific component states (swatch hover, copy-to-clipboard, do/don't
cards).
*/

/* -----------------------------------------------------------------------------
   1. Anchor scroll behaviour
   The sticky nav adds height to the top of the viewport, so we offset section
   anchors with scroll-margin-top so headings aren't hidden under the nav.
-------------------------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
}

.brand-section {
	scroll-margin-top: 6rem;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* -----------------------------------------------------------------------------
   2. Sticky in-page navigation
   The .brand-sticky-nav class is applied to the wrapping group block in the
   sticky-nav template part.
-------------------------------------------------------------------------------*/
.brand-sticky-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent);
	border-bottom: 1px solid var(--wp--preset--color--neutral-200);
	transition: box-shadow 0.2s ease;
}

.brand-sticky-nav.is-scrolled {
	box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
}

/* Active link state, set by the small scrollspy script in functions.php. */
.brand-sticky-nav a.is-active {
	color: var(--wp--preset--color--primary-600);
	font-weight: 600;
}

.brand-sticky-nav a {
	text-decoration: none;
	transition: color 0.15s ease;
}

.brand-sticky-nav a:hover {
	color: var(--wp--preset--color--primary-600);
}

/* -----------------------------------------------------------------------------
   3. Colour swatch component
   Used inside the colour-palette pattern. Each swatch is a group block with
   the .brand-swatch class. The colour chip itself uses inline background.
-------------------------------------------------------------------------------*/
.brand-swatch {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.brand-swatch:hover {
	transform: translateY(-2px);
}

.brand-swatch__chip {
	aspect-ratio: 1 / 1;
	width: 100%;
	border-radius: 8px;
	border: 1px solid color-mix(in srgb, currentColor 8%, transparent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	position: relative;
	overflow: hidden;
}

/* Subtle "click to copy" indicator on hover. */
.brand-swatch__chip::after {
	content: "Copy";
	position: absolute;
	inset: auto 0.5rem 0.5rem auto;
	padding: 0.25rem 0.5rem;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 500;
	border-radius: 4px;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.brand-swatch:hover .brand-swatch__chip::after {
	opacity: 1;
	transform: translateY(0);
}

.brand-swatch.is-copied .brand-swatch__chip::after {
	content: "Copied!";
	opacity: 1;
	transform: translateY(0);
	background: var(--wp--preset--color--success-600, #16a34a);
}

.brand-swatch__meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.brand-swatch__name {
	font-weight: 600;
	font-family: var(--wp--preset--font-family--body);
}

/* -----------------------------------------------------------------------------
   4. Typography specimen
   Block style "Specimen" applied to a group block — shows a font in use.
-------------------------------------------------------------------------------*/
.is-style-specimen {
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: 12px;
	padding: 2rem;
	background: var(--wp--preset--color--base);
}

.is-style-specimen .specimen-glyph {
	font-size: clamp(6rem, 18vw, 12rem);
	line-height: 1;
	letter-spacing: -0.04em;
}

/* -----------------------------------------------------------------------------
   5. Do / Don't cards (used in imagery and logo guidelines)
-------------------------------------------------------------------------------*/
.is-style-do,
.is-style-dont {
	border-radius: 12px;
	overflow: hidden;
	border: 2px solid;
	position: relative;
}

.is-style-do {
	border-color: var(--wp--preset--color--success-600, #16a34a);
}

.is-style-dont {
	border-color: var(--wp--preset--color--danger-600, #dc2626);
}

.is-style-do::before,
.is-style-dont::before {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.is-style-do::before {
	content: "Do";
	background: var(--wp--preset--color--success-600, #16a34a);
	color: #fff;
}

.is-style-dont::before {
	content: "Don't";
	background: var(--wp--preset--color--danger-600, #dc2626);
	color: #fff;
}

/* -----------------------------------------------------------------------------
   6. Logo asset card
   Used in the logo pattern. Provides the checkerboard background option for
   transparent logos and a download button row.
-------------------------------------------------------------------------------*/
.brand-logo-card {
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--neutral-200);
}

.brand-logo-card__preview {
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

.brand-logo-card__preview.is-checkered {
	background-image:
		linear-gradient(45deg, #f3f3f3 25%, transparent 25%),
		linear-gradient(-45deg, #f3f3f3 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #f3f3f3 75%),
		linear-gradient(-45deg, transparent 75%, #f3f3f3 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.brand-logo-card__preview img,
.brand-logo-card__preview svg {
	max-width: 100%;
	max-height: 100%;
	height: auto;
}

.brand-logo-card__downloads {
	display: flex;
	gap: 0.5rem;
	padding: 1rem;
	border-top: 1px solid var(--wp--preset--color--neutral-200);
	flex-wrap: wrap;
}

.brand-logo-card__downloads a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	background: var(--wp--preset--color--neutral-100);
	color: var(--wp--preset--color--neutral-900);
	text-decoration: none;
	transition: background 0.15s ease;
}

.brand-logo-card__downloads a:hover {
	background: var(--wp--preset--color--neutral-200);
}

/* -----------------------------------------------------------------------------
   7. Imagery guideline grid — show, don't tell
-------------------------------------------------------------------------------*/
.brand-imagery-grid figure {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
}

.brand-imagery-grid figcaption {
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	background: var(--wp--preset--color--neutral-50);
}

/* -----------------------------------------------------------------------------
   8. Print: when someone prints the guidelines, hide the sticky nav and
   ensure colours print correctly.
-------------------------------------------------------------------------------*/
@media print {
	.brand-sticky-nav {
		display: none;
	}

	.brand-section {
		page-break-inside: avoid;
	}

	* {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}