/*
Theme Name: Strive
Theme URI: https://strive.studio/
Description: Child theme pro Astru. Nese vlastní frontend Strive Studia (nová homepage bez Elementoru). Header, footer, menu, blog a zbytek webu zůstávají plně v režii parent themu Astra.
Author: Strive Studio
Version: 0.4.0
Template: astra
Requires PHP: 7.4
Requires at least: 6.0
Text Domain: strive
Tags: custom-menu, full-width-template, translation-ready
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =============================================================================
   Strive child theme – globální vrstva.

   Načítá se na CELÉM webu, proto sem patří jen:
     1. design tokeny (pouhé deklarace – samy o sobě nic nepřekreslují),
     2. sdílený placeholder systém,
     3. drobné utility.

   Layout nové homepage je v assets/css/home.css a načítá se výhradně na
   šabloně Strive Home Custom. Žádné pravidlo v tomto souboru nesmí měnit
   vzhled existujících stránek.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Design tokeny
   -------------------------------------------------------------------------- */

:root {
	/*
	 * Značka. Accent je jediná barevná konstanta Strive – hodnota se nikde
	 * jinde neopakuje, varianty s průhledností jsou odvozené tady.
	 *
	 * Role červené na homepage:
	 *   A) dominantní barevná plocha  – červený marquee
	 *   B) typografický akcent        – jedno slovo / fráze v nadpisu
	 *   C) interakce a mikrodetail    – hover, focus, šipky, separátory
	 */
	--strive-red: #de1333;
	--strive-red-soft: rgba(222, 19, 51, 0.35);
	--strive-red-glow: rgba(222, 19, 51, 0.22);
	/* Text na červené ploše – čistá bílá kvůli kontrastu drobného textu. */
	--strive-on-red: #ffffff;
	--strive-ink: #0b0b0c;
	--strive-ink-raised: #141416;
	--strive-paper: #f2f1ef;
	--strive-paper-muted: rgba(242, 241, 239, 0.62);
	--strive-paper-faint: rgba(242, 241, 239, 0.34);
	--strive-rule: rgba(242, 241, 239, 0.16);

	/* Prostor – velkorysý vertikální rytmus editorial layoutu. */
	--strive-space-2xs: 0.5rem;
	--strive-space-xs: 0.75rem;
	--strive-space-sm: 1rem;
	--strive-space-md: 1.5rem;
	--strive-space-lg: 2.5rem;
	--strive-space-xl: 4rem;
	--strive-space-2xl: clamp(4rem, 9vw, 9rem);
	--strive-space-3xl: clamp(6rem, 14vw, 14rem);

	/* Šířky. Gutter je fluidní, aby mobil nelepil text na okraj. */
	--strive-gutter: clamp(1.25rem, 5vw, 4rem);
	--strive-measure: 62ch;
	--strive-container: 1400px;
	--strive-container-narrow: 1100px;

	/* Rádiusy držíme minimální – žádné přehnané zaoblení. */
	--strive-radius: 2px;

	/* Placeholder systém – produkce (neutrální, nenápadné). */
	--strive-ph-line: rgba(127, 127, 127, 0.45);
	--strive-ph-tint: transparent;
	--strive-ph-text: rgba(127, 127, 127, 0.9);

	/*
	 * Placeholder systém – dev signální barva.
	 * Záměrně NENÍ brandová červená: placeholder se nesmí splést s designem.
	 */
	--strive-dev: #00e5ff;
	--strive-dev-tint: rgba(0, 229, 255, 0.04);
	--strive-dev-hatch: rgba(0, 229, 255, 0.1);
}

/* -----------------------------------------------------------------------------
   2. Sdílený placeholder systém

   Dvě úrovně, obě vydávané výhradně z PHP helperů:

     [data-placeholder="true"]   celá nedokončená sekce
     [data-placeholder-item]     jednotlivý prvek (media, diagram, fact, client, cta)

   Vizuál je záměrně zdrženlivý: outline místo borderu (nemění layout) a jen
   náznak tintu. Šrafování zůstává pouze na media slotech, kde nese informaci
   „sem přijde obraz“ a nezhoršuje čitelnost kompozice.
   -------------------------------------------------------------------------- */

[data-placeholder='true'] {
	position: relative;
	outline: 1px dashed var(--strive-ph-line);
	outline-offset: -1px;
	background-color: var(--strive-ph-tint);
}

[data-placeholder-item] {
	position: relative;
	outline: 1px dotted var(--strive-ph-line);
	outline-offset: 2px;
}

/* Badge sekce – malý, v rohu, nezasahuje do kompozice. */
.strive-placeholder__flag {
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin: 0;
	padding: 0.3em 0.7em;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--strive-ph-text);
	pointer-events: none;
}

.strive-placeholder__dot {
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background-color: currentColor;
}

/* Vývojářská poznámka k sekci – co sem teprve přijde. */
.strive-placeholder__note {
	position: absolute;
	z-index: 5;
	top: 1.7em;
	left: 0;
	max-width: min(46ch, 80vw);
	margin: 0;
	padding: 0 0.9em;
	font-size: 0.6875rem;
	line-height: 1.4;
	color: var(--strive-ph-text);
	pointer-events: none;
}

/* -----------------------------------------------------------------------------
   3. Dev / local prostředí

   Třídu strive-env-dev přidává strive_body_class() jen pro
   wp_get_environment_type() = 'local' | 'development'.
   Na produkci se celá tato vrstva neuplatní.
   -------------------------------------------------------------------------- */

.strive-env-dev [data-placeholder='true'] {
	outline-color: var(--strive-dev);
	background-color: var(--strive-dev-tint);
}

.strive-env-dev [data-placeholder-item] {
	outline-color: var(--strive-dev);
}

.strive-env-dev .strive-placeholder__flag {
	background-color: var(--strive-dev);
	color: #001518;
}

.strive-env-dev .strive-placeholder__note {
	color: var(--strive-dev);
	opacity: 0.75;
}

/* Dev banner nad obsahem – renderuje strive_render_dev_banner(). */
.strive-dev-banner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	align-items: baseline;
	margin: 0;
	padding: 0.65rem var(--strive-gutter);
	background-color: var(--strive-dev);
	color: #001518;
	font-size: 0.75rem;
	line-height: 1.4;
}

.strive-dev-banner strong {
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   4. Utility
   -------------------------------------------------------------------------- */

.strive-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-contrast: more) {
	[data-placeholder='true'],
	[data-placeholder-item] {
		outline-style: solid;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-placeholder='true'],
	[data-placeholder-item] {
		transition: none !important;
		animation: none !important;
	}
}