/*
Theme Name: HEY PLAY (Avada Child)
Theme URI: https://sportoveprojekty.sk/
Description: Child theme pre Avadu — identita HEY PLAY podľa brand manuálu, smer 2a. Farby, typografia, tlačidlá, formuláre, produktové výpisy a dopytový košík.
Author: AGGER, s.r.o.
Template: Avada
Version: 1.0.0
Text Domain: heyplay
*/

/* ============================================================
   1. Značka — jediné miesto na zmenu farieb
   ============================================================ */
:root {
	--hp-ink: #0b2b2e;          /* stmavená petrolejová (brand: #026d77) */
	--hp-ink-soft: #123c40;
	--hp-sand: #faf7f2;         /* teplá biela (brand: #fff2df) */
	--hp-sand-2: #eef1e6;
	--hp-accent: #dff24a;       /* mäkký lime (brand: #fbed1a) */
	--hp-mint: #9cd5ce;         /* brand akvamarínová #82c5be */
	--hp-lilac: #c3b6e0;        /* brand levanduľová #9b7db9 */
	--hp-green: #a3cd3d;
	--hp-body: #3c5350;
	--hp-muted: #456558;
	--hp-line: #e6e0d4;
	--hp-radius: 24px;
	--hp-radius-sm: 14px;
}

/* ============================================================
   2. Typografia — MuseoModerno len H1, Ubuntu ostatné
   ============================================================ */
body,
.fusion-body {
	font-family: Ubuntu, -apple-system, "Segoe UI", sans-serif;
	color: var(--hp-body);
	background: var(--hp-sand);
	-webkit-font-smoothing: antialiased;
}

h1,
.fusion-title h1,
.entry-title {
	font-family: MuseoModerno, Ubuntu, sans-serif !important;
	font-weight: 700;
	line-height: 0.96;
	letter-spacing: -0.035em;
	color: var(--hp-ink);
}

h2, h3, h4, h5, h6 {
	font-family: Ubuntu, sans-serif;
	color: var(--hp-ink);
	letter-spacing: -0.01em;
}

/* Sekčné nadpisy môžu použiť nadpisový font — trieda sa pridáva v Fusion Builderi */
.hp-display {
	font-family: MuseoModerno, Ubuntu, sans-serif !important;
	letter-spacing: -0.03em;
	line-height: 1.02;
}

p, li { line-height: 1.65; text-wrap: pretty; }
a { color: var(--hp-ink); }
a:hover { color: var(--hp-muted); }

/* ============================================================
   3. Tlačidlá
   ============================================================ */
.fusion-button.button-default,
.hp-btn,
input[type="submit"],
button[type="submit"] {
	background: var(--hp-ink) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: var(--hp-sand) !important;
	font-weight: 500;
	padding: 15px 28px !important;
	transition: transform 0.15s ease, background 0.15s ease;
}

.fusion-button.button-default:hover,
.hp-btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background: var(--hp-ink-soft) !important;
	transform: translateY(-1px);
}

.hp-btn--accent,
.fusion-button.button-1 {
	background: var(--hp-accent) !important;
	color: var(--hp-ink) !important;
	font-weight: 700;
}

.hp-btn--ghost {
	background: transparent !important;
	border: 1.5px solid var(--hp-ink) !important;
	color: var(--hp-ink) !important;
}

/* ============================================================
   4. Organické tvary dopadových plôch (grafický prvok značky)
   ============================================================ */
.hp-blob {
	display: inline-block;
	border-radius: 58% 42% 50% 50% / 52% 56% 44% 48%;
	background: var(--hp-accent);
}

.hp-blob--mint { background: var(--hp-mint); }
.hp-blob--lilac { background: var(--hp-lilac); }
.hp-blob--green { background: var(--hp-green); }

/* Obrázok v organickom tvare — trieda na Fusion Image element */
.hp-image-blob img {
	border-radius: 56% 44% 48% 52% / 46% 52% 48% 54%;
}

/* ============================================================
   5. Karty a kontejnery
   ============================================================ */
.hp-card {
	background: #fff;
	border-radius: var(--hp-radius);
	overflow: hidden;
}

.hp-card--sand { background: var(--hp-sand-2); }

.hp-card--dark {
	background: var(--hp-ink);
	color: var(--hp-sand);
}

.hp-card--dark h2,
.hp-card--dark h3 { color: var(--hp-accent); }

.hp-eyebrow {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hp-muted);
}

/* ============================================================
   6. WooCommerce — katalógový režim
   ============================================================ */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	display: none; /* ceny sa neimportujú; plugin vypisuje vlastný text */
}

.heyplay-price-note {
	display: block;
	font-weight: 700;
	color: var(--hp-ink);
	margin-bottom: 10px;
}

.woocommerce ul.products li.product {
	background: #fff;
	border-radius: var(--hp-radius);
	overflow: hidden;
	padding-bottom: 6px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 18px !important;
	line-height: 1.3;
	letter-spacing: -0.01em;
	padding: 0 20px;
}

.woocommerce ul.products li.product img {
	border-radius: 0 !important;
}

/* Parametre prvku (vek, výška pádu, rozmer) */
.hp-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 20px 12px;
	list-style: none;
	margin: 10px 0 0;
}

.hp-specs li {
	padding: 5px 10px;
	border-radius: 8px;
	background: var(--hp-sand-2);
	font-size: 12.5px;
	color: var(--hp-body);
}

/* Štítok NEW z acf.label */
.hp-label {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--hp-accent);
	color: var(--hp-ink);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	z-index: 2;
}

/* ============================================================
   7. Formuláre
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
	border: 1px solid var(--hp-line) !important;
	border-radius: var(--hp-radius-sm) !important;
	padding: 13px 15px !important;
	font-size: 15px !important;
	color: var(--hp-ink) !important;
	background: #fff !important;
}

input::placeholder,
textarea::placeholder {
	color: #7a7263; /* kontrast 4.6:1 */
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--hp-accent);
	outline-offset: 1px;
	border-color: var(--hp-ink) !important;
}

/* ============================================================
   8. Referencie (CPT z pluginu)
   ============================================================ */
.hp-ref-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 24px 0;
}

.hp-ref-meta div {
	padding: 20px 22px;
	border-radius: 18px;
	background: #fff;
}

.hp-ref-meta span {
	display: block;
	font-size: 12.5px;
	color: var(--hp-muted);
}

.hp-ref-meta strong {
	font-size: 16px;
	font-weight: 500;
	color: var(--hp-ink);
}

.hp-quote {
	padding: 32px;
	border-radius: var(--hp-radius);
	background: var(--hp-ink);
	color: var(--hp-sand);
	font-size: 19.5px;
	font-weight: 300;
	line-height: 1.5;
}

/* ============================================================
   9. Mobil
   ============================================================ */
@media (max-width: 768px) {
	h1, .entry-title { font-size: 38px !important; letter-spacing: -0.03em; }
	.hp-display { font-size: 30px !important; }
	.fusion-button.button-default,
	.hp-btn { width: 100%; text-align: center; }
	.hp-ref-meta { grid-template-columns: 1fr 1fr; }
}