/*
Theme Name: Creaholik
Theme URI: https://creaholik.com/
Author: Creaholik
Author URI: https://creaholik.com/
Description: The Creaholik block theme — the company site, the product landing pages and the customer dashboard on one set of design tokens. No build step, no framework, no front-end JavaScript.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.4.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: creaholik
Tags: block-theme, full-site-editing, one-column, wide-blocks, accessibility-ready, custom-colors, custom-logo, custom-menu, editor-style
*/

/*
 * Everything expressible in theme.json lives in theme.json. What is left here
 * is the handful of things it genuinely cannot say: focus behaviour, the skip
 * link, sticky positioning, and the utility classes the patterns apply through
 * the editor's "Additional CSS class" field.
 *
 * Budget: under 15 KB. If a rule here duplicates something theme.json can
 * express, it is in the wrong file.
 */

/* ---------------------------------------------------------------- Baseline */

:root {
	--crk-rule: 1px solid #dce5f0;
	--crk-button-radius: 10px;
	--crk-card-radius: 16px;
	--crk-logo-height: 34px;
	--crk-transition: 140ms ease;
}

html {
	scroll-behavior: smooth;
}

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

::selection {
	background: var(--wp--preset--color--haze);
	color: var(--wp--preset--color--ink);
}

/* A visible focus ring everywhere, and one that is never removed. Keyboard
   users are the reason the dashboard is usable at all. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
	border-radius: 3px;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------- Skip link */

/* WordPress emits the skip link and its base styles for block themes. Only its
   focused appearance is restyled here, so it matches the rest of the site. */
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border-radius: 0 0 var(--crk-button-radius) 0;
	box-shadow: none;
}

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

.crk-header {
	border-bottom: var(--crk-rule);
	background: var(--wp--preset--color--paper);
}

body.crk-sticky-header .crk-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(180%) blur(12px);
	background: color-mix(in srgb, var(--wp--preset--color--paper) 86%, transparent);
}

.crk-header .wp-block-site-logo img {
	height: var(--crk-logo-height);
	width: auto;
	display: block;
}

/* The site title stands in for the logo until one is uploaded, so a fresh
   install is never headed by an empty box. Once a logo exists, it steps back. */
body.crk-has-logo .crk-header .crk-site-title,
body.crk-has-logo .crk-footer .crk-site-title {
	display: none;
}

/* The header CTA is a link styled as a button without being a button block,
   so navigation stays one block and stays keyboard-navigable in order. */
.crk-nav-cta a,
.wp-block-navigation .crk-nav-cta a {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--paper);
	padding: 0.6rem 1.1rem;
	border-radius: var(--crk-button-radius);
	font-weight: 600;
	transition: background var(--crk-transition);
}

.crk-nav-cta a:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* ------------------------------------------------------- Announcement bar */

.crk-announce {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--haze);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	padding: 0.6rem var(--wp--preset--spacing--30);
}

.crk-announce a {
	color: var(--wp--preset--color--paper);
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------- Utilities */

/* Applied to a paragraph above a heading: the small tracked-out label. */
.crk-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	margin-bottom: 0.5rem;
}

/* Caps a body paragraph at a readable line length regardless of column width. */
.crk-measure {
	max-width: 68ch;
}

.crk-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--slate);
	max-width: 60ch;
}

.crk-muted {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
}

.crk-center {
	margin-inline: auto;
	text-align: center;
}

.crk-center .crk-measure,
.crk-center .crk-lead {
	margin-inline: auto;
}

/* ----------------------------------------------------------------- Cards */

.crk-card,
.is-style-crk-card {
	background: var(--wp--preset--color--paper);
	border: var(--crk-rule);
	border-radius: var(--crk-card-radius);
	padding: var(--wp--preset--spacing--40);
	height: 100%;
	transition: box-shadow var(--crk-transition), transform var(--crk-transition);
}

.crk-card.crk-card--link:hover {
	box-shadow: var(--wp--preset--shadow--lift);
	transform: translateY(-2px);
}

.crk-card--tinted,
.is-style-crk-card-tinted {
	background: var(--wp--preset--color--paper-2);
	border-color: transparent;
}

.crk-card--ink {
	background: var(--wp--preset--color--ink);
	border-color: transparent;
	color: var(--wp--preset--color--haze);
}

.crk-card--ink :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--paper);
}

.crk-card--ink a {
	color: var(--wp--preset--color--brand-lift);
}

/* Equal-height cards inside a columns block without touching the markup. */
.crk-cards .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* Equal height alone is not alignment. Cards whose feature lists differ in
   length were putting their buttons at four different heights, which reads as
   a broken grid rather than as different amounts of content. Pushing the
   button block down puts every call to action on one line. */
.crk-cards .crk-card {
	display: flex;
	flex-direction: column;
}

.crk-cards .crk-card > .wp-block-buttons {
	margin-top: auto;
	padding-top: 1.25rem;
}

/* -------------------------------------------------------- Dark sections */

.crk-section--ink,
.is-style-crk-section-ink {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--haze);
}

.crk-section--ink :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--paper);
}

.crk-section--ink a:not(.wp-element-button) {
	color: var(--wp--preset--color--brand-lift);
}

.crk-section--ink .crk-eyebrow {
	color: var(--wp--preset--color--mist);
}

/* The secondary text utilities carry an explicit slate colour, which is right
   on paper and unreadable on ink — about 1.6:1, which is not "low contrast",
   it is invisible. Any utility that sets its own colour has to be answered
   here, or it survives into the dark sections and takes the text with it. */
.crk-section--ink .crk-lead,
.crk-section--ink .crk-muted,
.crk-section--ink .crk-caption,
.is-style-crk-section-ink .crk-lead,
.is-style-crk-section-ink .crk-muted,
.is-style-crk-section-ink .crk-caption {
	color: var(--wp--preset--color--mist);
}

.crk-card--ink .crk-lead,
.crk-card--ink .crk-muted {
	color: var(--wp--preset--color--mist);
}

.crk-section--ink .wp-element-button,
.crk-section--ink .wp-block-button__link {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.crk-section--ink .wp-element-button:hover,
.crk-section--ink .wp-block-button__link:hover {
	background: var(--wp--preset--color--haze);
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------- Button variants */

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--mist);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--paper-2);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
}

.crk-section--ink .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--haze);
	border-color: rgba(199, 214, 232, 0.35);
	background: transparent;
}

.crk-section--ink .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(199, 214, 232, 0.1);
	color: var(--wp--preset--color--paper);
}

/* A quiet text link that reads as an action. */
.crk-link-arrow a::after,
a.crk-link-arrow::after {
	content: " \2192";
	transition: margin var(--crk-transition);
	display: inline-block;
}

.crk-link-arrow a:hover::after,
a.crk-link-arrow:hover::after {
	margin-left: 0.25rem;
}

/* ------------------------------------------------------------- Stat strip */

.crk-stat {
	font-size: clamp(2.75rem, 6vw, 4.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--ink);
}

.crk-section--ink .crk-stat {
	color: var(--wp--preset--color--paper);
}

/* ------------------------------------------------------------ Numbered steps */

.crk-steps {
	counter-reset: crk-step;
}

.crk-steps .wp-block-column {
	counter-increment: crk-step;
	position: relative;
	padding-top: 3.25rem;
}

.crk-steps .wp-block-column::before {
	content: counter(crk-step);
	position: absolute;
	top: 0;
	left: 0;
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	border-radius: var(--crk-button-radius);
	background: var(--wp--preset--color--haze);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}

.crk-section--ink .crk-steps .wp-block-column::before {
	background: rgba(199, 214, 232, 0.16);
	color: var(--wp--preset--color--paper);
}

/* ------------------------------------------------------------ Check lists */

.crk-checklist,
.is-style-crk-checklist {
	list-style: none;
	padding-left: 0;
}

.crk-checklist li,
.is-style-crk-checklist li {
	position: relative;
	padding-left: 1.85rem;
	margin-bottom: 0.65rem;
}

.crk-checklist li::before,
.is-style-crk-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.7rem;
	height: 0.38rem;
	border-left: 2px solid var(--wp--preset--color--success);
	border-bottom: 2px solid var(--wp--preset--color--success);
	transform: rotate(-45deg);
}

/* A list of things the product will never do — same shape, opposite mark. */
.crk-nevers,
.is-style-crk-nevers {
	list-style: none;
	padding-left: 0;
}

.crk-nevers li,
.is-style-crk-nevers li {
	position: relative;
	padding-left: 1.85rem;
	margin-bottom: 0.85rem;
}

.crk-nevers li::before,
.is-style-crk-nevers li::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.55em;
	width: 0.7rem;
	height: 0.7rem;
	background:
		linear-gradient(to bottom, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%);
	color: var(--wp--preset--color--mist);
	transform: rotate(-45deg);
}

/* ---------------------------------------------------------------- Pricing */

.crk-price {
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--wp--preset--color--ink);
}

.crk-price small {
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--wp--preset--color--slate);
}

.crk-card--featured {
	border-color: var(--wp--preset--color--brand);
	box-shadow: var(--wp--preset--shadow--card);
	position: relative;
}

.crk-badge {
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: var(--crk-button-radius);
	background: var(--wp--preset--color--haze);
	color: var(--wp--preset--color--ink);
}

.crk-badge--brand {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--paper);
}

/* -------------------------------------------------------------------- FAQ */

.crk-faq .wp-block-details {
	border-bottom: var(--crk-rule);
	padding: 1.15rem 0;
}

.crk-faq .wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: baseline;
}

.crk-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.crk-faq .wp-block-details summary::after {
	content: "+";
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--wp--preset--color--brand);
	flex: none;
}

.crk-faq .wp-block-details[open] summary::after {
	content: "\2013";
}

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

.crk-footer {
	border-top: var(--crk-rule);
	background: var(--wp--preset--color--paper-2);
	font-size: var(--wp--preset--font-size--small);
}

.crk-footer a {
	color: var(--wp--preset--color--slate);
	text-decoration: none;
}

.crk-footer a:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

.crk-footer .wp-block-heading {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--slate);
	font-weight: 600;
}

.crk-footer .wp-block-list {
	list-style: none;
	padding-left: 0;
	line-height: 2;
}

/* ------------------------------------------------------------------ Tables */

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table :is(th, td) {
	border-bottom: var(--crk-rule);
	padding: 0.7rem 0.9rem;
	text-align: left;
}

.wp-block-table th {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* ------------------------------------------------------------- Print sanity */

@media print {
	.crk-header,
	.crk-footer,
	.crk-announce,
	.wp-block-button {
		display: none !important;
	}
}

/* ------------------------------------------------------------------ Social */

.crk-social .wp-social-link {
	transition: opacity var(--crk-transition), transform var(--crk-transition);
	opacity: 0.75;
}

.crk-social .wp-social-link:hover {
	opacity: 1;
	transform: translateY(-1px);
}

.crk-footer .crk-social a {
	text-decoration: none;
}

/* ------------------------------------------------------- Media placeholders */

/* A framed slot for a product screenshot or a demo video. The frame is part of
   the design, so replacing the placeholder image does not change the layout. */
.crk-shot {
	border: var(--crk-rule);
	border-radius: var(--crk-card-radius);
	background: var(--wp--preset--color--paper);
	box-shadow: var(--wp--preset--shadow--card);
	overflow: hidden;
	padding: 0;
}

/* A constrained group caps its children at the *content* width, so a wide
   frame ended up with a narrow image floating in the middle of it. The frame is
   the element that should be wide; whatever sits inside fills it. */
.crk-shot > *,
.crk-shot > .wp-block-image,
.crk-shot figure {
	max-width: none;
	width: 100%;
}

.crk-shot img,
.crk-shot video,
.crk-shot iframe {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.crk-shot figure {
	margin: 0;
}

/* The browser-chrome strip above a screenshot: three dots, no image needed. */
.crk-shot--framed::before {
	content: "";
	display: block;
	height: 34px;
	background:
		radial-gradient(circle 4px at 18px 17px, var(--wp--preset--color--mist) 98%, transparent 100%),
		radial-gradient(circle 4px at 36px 17px, var(--wp--preset--color--mist) 98%, transparent 100%),
		radial-gradient(circle 4px at 54px 17px, var(--wp--preset--color--mist) 98%, transparent 100%),
		var(--wp--preset--color--paper-2);
	border-bottom: var(--crk-rule);
}

.crk-section--ink .crk-shot {
	border-color: rgba(199, 214, 232, 0.18);
	background: rgba(199, 214, 232, 0.04);
}

.crk-caption {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--slate);
	text-align: center;
	margin-top: 0.75rem;
}

/* ------------------------------------------------------------------- Icons */

/* Inline SVG, sized and coloured from the token set so the icons change with
   the brand rather than needing to be redrawn. */
.crk-icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.25rem;
	border-radius: 12px;
	background: var(--wp--preset--color--paper-2);
	color: var(--wp--preset--color--brand);
	flex: none;
}

.crk-icon svg {
	width: 1.6rem;
	height: 1.6rem;
	display: block;
}

.crk-section--ink .crk-icon,
.crk-card--ink .crk-icon {
	background: rgba(199, 214, 232, 0.1);
	color: var(--wp--preset--color--brand-lift);
}

/* --------------------------------------------------------------- Languages */

.crk-langs {
	gap: 0.5rem;
}

.crk-langs .crk-badge {
	margin: 0;
}

/* ------------------------------------------------- Mobile navigation overlay */

/* The header's call to action is a button on desktop and a menu item on mobile.
   Two elements rather than one moved around, because the navigation block owns
   its overlay markup and nothing can be injected into it from here — so each
   viewport shows the one that belongs to it and hides the other. */
/* Core's own `.wp-block-navigation-item { display: flex }` is a single class
   and its stylesheet loads after this one, so a bare `.crk-nav-cta-item` rule
   loses the tie and the item showed up twice on desktop. Matching core's
   specificity is what settles it. */
.wp-block-navigation .crk-nav-cta-item,
.wp-block-navigation li.crk-nav-cta-item {
	display: none;
}

@media (max-width: 599px) {
	/* Standing under the logo is where this button used to land, which read as
	   a stray element rather than as part of the menu. */
	.crk-header .wp-block-buttons {
		display: none;
	}

	.crk-header .wp-block-group.alignwide {
		padding-top: 0.85rem;
		padding-bottom: 0.85rem;
	}
}

/* Full screen, and unmistakably a different mode rather than a dropdown.
 *
 * Colour comes from the navigation block's own `overlayBackgroundColor` and
 * `overlayTextColor` attributes, not from here. Overriding core's overlay CSS
 * was the wrong instinct: an inline `background` on the container still
 * computed transparent, because core paints the overlay through its own
 * generated classes. The block has an API for this; use it.
 *
 * What is left below is layout and typography, where the selectors are still
 * deliberately long. Core sets
 *
 *   .wp-block-navigation:not(.has-background)
 *     .wp-block-navigation__responsive-container.is-menu-open
 *       { background-color: #fff }
 *
 * which is four classes, so anything shorter loses and the menu renders white
 * with dark text — while every other rule here appears to work, because they
 * are not the one being overridden. Matching that shape and adding `.crk-header`
 * is what actually wins. Confirmed by enumerating the matching CSSOM rules, not
 * by reading the stylesheet and hoping. */
.crk-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem var(--wp--preset--spacing--30) 3rem;
}

.crk-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: flex-start;
	padding-top: 2.5rem;
	width: 100%;
}

.crk-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.25rem;
	width: 100%;
}

.crk-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(199, 214, 232, 0.14);
}

.crk-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1rem 0;
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.crk-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--paper);
	top: 1.6rem;
	right: 1.4rem;
}

/* The call to action, inside the menu where it belongs, and last so it reads as
   the conclusion of the list rather than another destination in it. */
.crk-header .is-menu-open .crk-nav-cta-item {
	display: block;
	border-bottom: 0;
	margin-top: 1.75rem;
}

.crk-header .is-menu-open .crk-nav-cta-item .wp-block-navigation-item__content {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--paper);
	border-radius: var(--crk-button-radius);
	text-align: center;
	padding: 1rem 1.5rem;
	font-size: 1.05rem;
}

/* --------------------------------------------------- Responsive refinements */

@media (max-width: 781px) {
	/* Columns stack below this width in WordPress, so anything relying on two
	   of them sitting side by side needs its spacing reconsidered rather than
	   inherited. */
	.crk-cards .wp-block-column,
	.crk-steps .wp-block-column {
		margin-bottom: 0;
	}

	.crk-steps .wp-block-column {
		padding-top: 3rem;
	}

	.crk-card,
	.is-style-crk-card {
		padding: var(--wp--preset--spacing--30);
	}

	.crk-stat {
		font-size: clamp(2.25rem, 11vw, 3rem);
	}

	.crk-shot--framed::before {
		height: 26px;
		background-size: auto;
	}
}

@media (max-width: 599px) {
	.crk-lead {
		font-size: var(--wp--preset--font-size--medium);
	}

	.crk-faq .wp-block-details summary {
		font-size: 1rem;
	}

	/* A four-across price grid at phone width is four tall thin cards; letting
	   them run full width is what makes them readable. */
	.crk-cards .wp-block-column {
		flex-basis: 100% !important;
	}
}