/*
Theme Name: QuickStream
Theme URI: https://quickstream.ai/
Author: QuickStream AI
Author URI: https://quickstream.ai/
Description: A dark, cinematic block theme for SaaS and AI product sites. Every colour, gradient, font, size, spacing step, radius and shadow is a Global Styles preset, every section is a pattern of core blocks, and every component look is a block style variation — so the whole site can be redesigned from Appearance → Editor without touching code.
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: quickstream
Tags: dark, one-column, two-columns, wide-blocks, block-patterns, block-styles, full-site-editing, style-variations, custom-colors, custom-logo, custom-menu, editor-style, featured-images, accessibility-ready, translation-ready, blog, portfolio
*/

/*
 * Only rules that no block control can express live here, and every value in
 * them is read from a theme.json preset. To change a colour, size, radius,
 * spacing step or shadow, edit the preset in Appearance → Editor → Styles —
 * these rules follow automatically.
 */

/* Arial tuned to Manrope's metrics, so text drawn before the web font arrives
   occupies the same space and nothing reflows when it swaps in. */
@font-face {
	font-family: "Manrope Fallback";
	src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Roboto");
	size-adjust: 101.5%;
	ascent-override: 105%;
	descent-override: 29.6%;
	line-gap-override: 0%;
}

html {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 6rem);
	-webkit-text-size-adjust: 100%;
}

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

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

/* One visible focus ring everywhere, for keyboard users only. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary-2);
	outline-offset: 3px;
	border-radius: var(--wp--preset--border-radius--sm);
}

/* ---------------------------------------------------------------------------
 * Sticky header — toggled with the "Sticky" style on the Header template part.
 * A template part renders as its own wrapper element, so position: sticky has
 * to sit on that wrapper rather than on a group inside it.
 * ------------------------------------------------------------------------ */
.wp-block-template-part.is-style-sticky {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

@media (max-width: 600px) {
	#wpadminbar {
		position: fixed;
	}
}

/* ---------------------------------------------------------------------------
 * Tables. Core draws a full grid in the text colour; on the dark theme that
 * reads as a cage. Rows are separated by hairlines instead, the header and
 * footer rows by the strong line colour. Column alignment set in the block
 * toolbar still applies.
 * ------------------------------------------------------------------------ */
.wp-block-table table :is(th, td) {
	padding: 0.7em 0.9em;
	border-width: 0 0 1px;
	border-style: solid;
	border-color: var(--wp--preset--color--line);
	overflow-wrap: normal;
	word-break: normal;
}

/* Narrow screens: tighter cells; a table that still does not fit scrolls
   sideways inside its own block rather than breaking words. */
@media (max-width: 600px) {
	.wp-block-table table :is(th, td) {
		padding: 0.6em 0.4em;
	}
}

.wp-block-table table :is(thead, tfoot) {
	border: 0;
}

.wp-block-table table thead th {
	border-bottom-color: var(--wp--preset--color--line-strong);
	color: var(--wp--preset--color--contrast-3);
	font-weight: 600;
}

.wp-block-table table th:not([class*="has-text-align-"]) {
	text-align: start;
}

.wp-block-table table tfoot td {
	border-bottom: 0;
	border-top: 1px solid var(--wp--preset--color--line-strong);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Links inside running text are underlined, so they can be told apart from
 * the words around them without relying on colour (WCAG 1.4.1). Buttons,
 * menus and cards keep their own styling.
 * ------------------------------------------------------------------------ */
.wp-block-post-content :where(p, li) a:not(.wp-element-button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* ---------------------------------------------------------------------------
 * Current page in any menu takes the Secondary colour. Core resets menu link
 * colour with a three-class selector, and Global Styles CSS is wrapped in
 * :where(), so this rule has to live here to win.
 * ------------------------------------------------------------------------ */
.wp-block-navigation .wp-block-navigation-item:is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--secondary);
}

/* ---------------------------------------------------------------------------
 * Phone menu. A backdrop filter makes its element the containing block for
 * fixed-position children, so the glass header would trap the full-screen
 * menu inside its own height. While the menu is open the header drops the
 * filter (the menu covers the page, so nothing shows through anyway).
 * ------------------------------------------------------------------------ */
:where(.is-style-header-glass):has(.wp-block-navigation__responsive-container.is-menu-open) {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* ---------------------------------------------------------------------------
 * Sticky sidebar — the "Sticky sidebar" style on a template part placed in a
 * column (the Legal page template). It stays in view below the sticky header
 * while the column beside it scrolls; the offset matches scroll-padding-top.
 * On narrow screens the columns stack and the sidebar moves after the content.
 * ------------------------------------------------------------------------ */
@media (min-width: 782px) {
	.wp-block-template-part.is-style-sticky-sidebar {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 6rem);
	}
}

@media (max-width: 781px) {
	.wp-block-column:has(> .is-style-sticky-sidebar):not(:has(.wp-block-quickstream-table-of-contents)) {
		order: 1;
	}
}

/* A featured image in a row (e.g. the Popular list) keeps its set size. */
:where(.is-layout-flex) > .wp-block-post-featured-image {
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
 * Cards. A card whose heading or paragraph holds a link becomes clickable as
 * a whole and picks up the strong line colour on hover.
 * ------------------------------------------------------------------------ */
:where(.is-style-card, .is-style-card-flat, .is-style-card-highlight) {
	transition: border-color var(--wp--custom--transition), transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

:where(.is-style-card, .is-style-card-flat):has(a:hover, a:focus-visible) {
	border-color: var(--wp--preset--color--line-strong);
}

/* The industry tiles and app cards are whole-card links. */
.is-style-card :where(.wp-block-heading, p) a::after,
.is-style-card-flat :where(.wp-block-heading, p) a::after,
.qs-hover--highlight :where(.wp-block-heading, p) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

:where(.is-style-card, .is-style-card-flat, .qs-hover--highlight):has(:where(.wp-block-heading, p) a) {
	position: relative;
}

:where(.is-style-card, .is-style-card-flat, .qs-hover--highlight) :where(.wp-block-heading, p) a {
	color: inherit;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Inline highlight colour inside headings — the "two-tone" headline look.
 * Pick a colour with the Highlight tool in the toolbar; the background stays
 * transparent so only the text changes.
 * ------------------------------------------------------------------------ */
:where(h1, h2, h3, h4, h5, h6, p) mark.has-inline-color {
	padding: 0;
	background-color: transparent;
}

/* ---------------------------------------------------------------------------
 * Form controls. Core has no form block, so this styles whichever form plugin
 * or search field is used, using the same presets as everything else.
 * ------------------------------------------------------------------------ */
:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"], [type="color"]), select, textarea) {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--sm);
	background-color: var(--wp--preset--color--base-3);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	transition: border-color var(--wp--custom--transition);
}

:where(input, select, textarea)::placeholder {
	color: var(--wp--preset--color--contrast-3);
	opacity: 1;
}

:where(input, select, textarea):hover {
	border-color: var(--wp--preset--color--line-strong);
}

:where(input, select, textarea):focus {
	border-color: var(--wp--preset--color--secondary);
	outline: none;
}

:where(label) {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

:where(input[type="submit"], button[type="submit"]) {
	cursor: pointer;
	border: 0;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--on-brand);
	font: inherit;
	font-weight: 600;
	padding: 0.9rem 1.9rem;
	box-shadow: var(--wp--preset--shadow--glow-blue);
}

/* ---------------------------------------------------------------------------
 * Motion. Everything above animates only for people who have not asked their
 * system to reduce motion.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

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

/* Template parts sit flush against the sections around them; each section
   sets its own padding instead. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * Fluent Forms compatibility. The plugin ships light-theme field styles with
 * higher specificity than the generic rules above; map them to the presets.
 * ------------------------------------------------------------------------ */
.fluentform .ff-el-form-control {
	border-color: var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--sm);
	background-color: var(--wp--preset--color--base-3);
	color: var(--wp--preset--color--contrast);
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--secondary);
	background-color: var(--wp--preset--color--base-3);
	color: var(--wp--preset--color--contrast);
}

.fluentform .ff-el-input--label label {
	color: var(--wp--preset--color--contrast);
}

.fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--on-brand);
	box-shadow: var(--wp--preset--shadow--glow-blue);
	padding: 0.9rem 1.9rem;
	font-weight: 600;
}

/* The Modals template part holds closed dialogs only; it takes no space. */
.wp-site-blocks > .wp-block-template-part:has(> dialog:only-child) {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * Comparison board ("Comparison board" style on a Group of Columns rows).
 * Wide screens: two lanes with a topic spine. Narrow screens: each row stacks
 * into its own small card — topic first, then the old way, then the new way.
 * ------------------------------------------------------------------------ */
.is-style-compare-board > .wp-block-columns {
	align-items: stretch !important;
}

/* Lane cells stretch to the row height and centre their content, so each
   line sits level with its topic in the middle. */
.is-style-compare-board > .wp-block-columns > .wp-block-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 781px) {
	.is-style-compare-board {
		box-shadow: none;
		background-image: none !important;
	}
	.is-style-compare-board > .wp-block-columns {
		gap: 0 !important;
		margin-block-start: var(--wp--preset--spacing--30) !important;
		border: 1px solid var(--wp--preset--color--line-strong);
		border-radius: var(--wp--preset--border-radius--md);
		overflow: hidden;
	}
	.is-style-compare-board > .wp-block-columns > .wp-block-column {
		border: 0 !important;
		border-radius: 0 !important;
	}
	.is-style-compare-board > .wp-block-columns > .wp-block-column:nth-child(2) {
		order: -1;
		padding-bottom: 0 !important;
	}
}

/* Mega menu panels belong to the QuickStream Blocks plugin. If it is ever
   inactive, keep their saved content from showing under the header. */
.wp-block-quickstream-mega-panel:not(.is-open) {
	display: none;
}