/*
Theme Name: Hassium
Theme URI: https://github.com/wpgaurav/hassium
Author: Gaurav Tiwari
Author URI: https://gauravtiwari.org
Description: A block theme for software companies and startups, built on the Core Forms design system. Hassium is element 108, first made in a lab in Darmstadt a few atoms at a time, and the theme is for small teams who build that way. It pairs Inter with Hedvig Letters Serif headings, puts one brand color on everything that asks to be clicked, and ships a frosted sticky header, dark and brand bands, screenshot frames, pricing tables, changelogs, and complete landing pages. Includes 67 patterns, six designs, three heading presets, core blocks only, and no JavaScript of its own.
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hassium
Domain Path: /languages
Tags: blog, grid-layout, one-column, three-columns, wide-blocks, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, style-variations, sticky-post, template-editing, threaded-comments, translation-ready
*/

/*
 * Nearly every style in Hassium lives in theme.json or in a block style
 * variation under styles/. This file carries only what theme.json cannot say:
 * the focus ring, the three sections that restyle whatever sits inside them,
 * form controls, and a few element defaults. Styles for a single block live in
 * assets/css/blocks and load only on pages where that block renders.
 */

/* Page values captured once. The dark and brand sections redefine the
   palette's custom properties for everything inside them, so they read the
   page's own brand and night colors from here. */
:root {
	--hassium-brand: var(--wp--preset--color--primary);
	--hassium-night: var(--wp--preset--color--night);
	--hassium-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Anchors land below the sticky header instead of under it. */
html {
	scroll-padding-top: calc(var(--wp--custom--header--height) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Focus. A solid ring in the brand color, with the design system's soft halo
   around it. The outline stays visible in forced-colors mode, where box
   shadows are dropped. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation a:focus-visible {
	border-radius: var(--wp--preset--border-radius--xs);
	box-shadow: var(--wp--custom--ring);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.wp-block-button__link:focus-visible {
	border-radius: var(--wp--preset--border-radius--md);
}

/* The header stacks above the page, so the phone menu it opens is never
   covered by a section further down. A frosted header also sticks
   (see group.css). */
.wp-site-blocks > header.wp-block-template-part {
	position: relative;
	z-index: 50;
}

/* The footer sits at the bottom of the window on short pages, such as a 404
   or an empty search, instead of floating above a blank strip. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Template sections sit flush. WordPress applies the root block gap between
   header, main, and footer too, which only ever shows up as a stray band
   above a full-width section. Every template sets its own rhythm instead. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Underlines. theme.json can switch an underline on but cannot place it or
   soften it. Links in running text keep a light underline that darkens on
   hover, so they never rely on color alone. */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:where(:not(.wp-element-button)) {
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	transition: color var(--wp--custom--transition--fast), text-decoration-color var(--wp--custom--transition--fast);
}

a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}

::selection {
	background-color: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--contrast);
}

h1,
h2,
h3,
h4,
.wp-block-post-title,
.wp-block-query-title {
	text-wrap: balance;
}

p,
li,
figcaption {
	text-wrap: pretty;
}

/* Highlighted words in a heading take the brand gradient, the way the
   design system sets one word of a hero title. Select the words in the
   editor and use Highlight; the color you pick there is the fallback. */
:is(h1, h2, h3, .wp-block-post-title) mark {
	background-image: linear-gradient(90deg, var(--wp--preset--color--primary-strong), color-mix(in srgb, var(--wp--preset--color--primary) 78%, #fff));
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--wp--preset--color--primary-strong);
	-webkit-text-fill-color: transparent;
}

/* Inline code in running text. Code blocks are styled in theme.json. */
:where(p, li, td, th, figcaption, dd, .wp-block-details summary) code,
:where(p, li, td, th, figcaption, dd) kbd {
	background-color: var(--wp--preset--color--base-3);
	border: 1px solid var(--wp--preset--color--contrast-3);
	border-radius: var(--wp--preset--border-radius--xs);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.86em;
	padding: 0.0625rem 0.375rem;
}

.wp-block-code code {
	background: none;
	border: 0;
	padding: 0;
}

/* Hero section: two soft brand glows over a faint grid that fades out
   toward the bottom. Text keeps the page colors. */
.is-style-section-hero {
	background-image:
		radial-gradient(56rem 30rem at 15% -10%, color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent), transparent 60%),
		radial-gradient(44rem 26rem at 95% 5%, color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent), transparent 60%),
		linear-gradient(180deg, var(--wp--preset--color--base) 0%, color-mix(in srgb, var(--wp--preset--color--primary-tint) 40%, var(--wp--preset--color--base)) 100%);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.is-style-section-hero::before {
	background-image:
		linear-gradient(var(--wp--preset--color--contrast-3) 1px, transparent 1px),
		linear-gradient(90deg, var(--wp--preset--color--contrast-3) 1px, transparent 1px);
	background-size: 3.5rem 3.5rem;
	content: "";
	inset: 0;
	-webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 0%, #000 40%, transparent 80%);
	mask-image: radial-gradient(ellipse 60% 60% at 50% 0%, #000 40%, transparent 80%);
	opacity: 0.5;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* Dark section. Rather than restyle every block inside it, the band
   redefines the palette's custom properties, so headings, body copy, links,
   kickers, cards, borders, and outline buttons all turn light together, and
   any palette color a pattern picked follows. The ground is the night color
   with two brand glows and a faint grid. */
.is-style-section-dark {
	--wp--preset--color--base: color-mix(in srgb, #fff 6%, transparent);
	--wp--preset--color--base-2: color-mix(in srgb, #fff 4%, transparent);
	--wp--preset--color--base-3: color-mix(in srgb, #fff 8%, transparent);
	--wp--preset--color--contrast: #fff;
	--wp--preset--color--body: color-mix(in srgb, #fff 78%, transparent);
	--wp--preset--color--contrast-2: color-mix(in srgb, #fff 70%, transparent);
	--wp--preset--color--contrast-3: color-mix(in srgb, #fff 14%, transparent);
	--wp--preset--color--primary-strong: color-mix(in srgb, var(--hassium-brand) 38%, #fff);
	--wp--preset--color--primary-tint: color-mix(in srgb, var(--hassium-brand) 22%, transparent);
	--wp--preset--color--primary-soft: color-mix(in srgb, var(--hassium-brand) 45%, transparent);
	background-color: var(--hassium-night);
	background-image:
		radial-gradient(75rem 44rem at 85% 20%, color-mix(in srgb, var(--hassium-brand) 22%, transparent), transparent 60%),
		radial-gradient(56rem 38rem at 10% 100%, color-mix(in srgb, var(--hassium-brand) 12%, transparent), transparent 60%),
		linear-gradient(180deg, color-mix(in srgb, var(--hassium-night) 80%, #000) 0%, color-mix(in srgb, var(--hassium-night) 86%, var(--hassium-brand)) 55%, var(--hassium-night) 100%);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.is-style-section-dark::before {
	background-image:
		linear-gradient(color-mix(in srgb, #fff 3.5%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, #fff 3.5%, transparent) 1px, transparent 1px);
	background-size: 4rem 4rem;
	content: "";
	inset: 0;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
	opacity: 0.7;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* Brand panel: the closing call to action. A deep brand gradient with two
   soft highlights. The palette turns white inside it, and the primary button
   turns white with brand text (see button.css). The gradient starts and ends
   darker than the brand itself, so white text holds 4.5:1 across it. */
.is-style-section-brand {
	--wp--preset--color--base: color-mix(in srgb, #fff 10%, transparent);
	--wp--preset--color--base-2: color-mix(in srgb, #fff 8%, transparent);
	--wp--preset--color--base-3: color-mix(in srgb, #fff 12%, transparent);
	--wp--preset--color--contrast: #fff;
	--wp--preset--color--body: color-mix(in srgb, #fff 92%, transparent);
	--wp--preset--color--contrast-2: color-mix(in srgb, #fff 86%, transparent);
	--wp--preset--color--contrast-3: color-mix(in srgb, #fff 35%, transparent);
	--wp--preset--color--primary-strong: #fff;
	--wp--preset--color--primary-tint: color-mix(in srgb, #fff 16%, transparent);
	--wp--preset--color--primary-soft: color-mix(in srgb, #fff 30%, transparent);
	background-image:
		radial-gradient(circle at 20% 0%, color-mix(in srgb, #fff 6%, transparent), transparent 50%),
		radial-gradient(circle at 80% 100%, color-mix(in srgb, #fff 5%, transparent), transparent 50%),
		linear-gradient(135deg, color-mix(in srgb, var(--hassium-brand) 62%, #000), color-mix(in srgb, var(--hassium-brand) 82%, #000));
	box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--hassium-brand) 55%, transparent);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

/* Core injects the skip link for block themes. */
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--contrast);
	border-radius: var(--wp--preset--border-radius--md);
	box-shadow: var(--wp--preset--shadow--lg);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	left: 1rem;
	line-height: 1.2;
	padding: 0.75rem 1.375rem;
	text-decoration: none;
	top: 1rem;
	z-index: 100000;
}

/* Form controls. The schema has no input element, so these live here. The
   border mixes the heading color at 48 percent, which keeps it at 3:1 or
   better against the page in every design, as WCAG 1.4.11 asks. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	background-color: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 48%, var(--wp--preset--color--base));
	border-radius: var(--wp--preset--border-radius--sm);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	padding: 0.625rem 0.75rem;
	transition: border-color var(--wp--custom--transition--fast), box-shadow var(--wp--custom--transition--fast);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--custom--ring);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 0;
}

textarea {
	width: 100%;
}

::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 64%, var(--wp--preset--color--base));
	opacity: 1;
}

/* The default separator is a 100px stub in block themes. Here a separator is
   a hairline the width of its container. */
.wp-block-separator {
	border-bottom: 0;
	border-top-width: 1px;
	opacity: 1;
}

.wp-block-separator:not(.is-style-dots) {
	width: 100%;
}

/* Long words and URLs inside narrow columns. */
.wp-block-post-content,
.wp-block-post-excerpt,
.wp-block-post-title {
	overflow-wrap: break-word;
}

img,
video,
iframe,
svg {
	height: auto;
	max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.wp-block-template-part[class*="header"],
	.wp-block-template-part[class*="footer"],
	.wp-block-navigation,
	.wp-block-search,
	.wp-block-post-comments-form,
	.skip-link {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}

	.is-style-section-dark,
	.is-style-section-brand,
	.is-style-section-hero {
		background: none !important;
		box-shadow: none !important;
	}
}