/*
Theme Name: Wolfpack Coffee Lab
Theme URI: https://wolfpackcoffeelab.com
Author: Codyware
Description: Block theme for Wolfpack Coffee Lab. Ships the site's foundation only — every section on a page comes from a Forge block in the wolfpack-blocks plugin.
Version: 1.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wolfpack
Tags: full-site-editing, block-patterns, one-column
*/

/* The site's design lives in assets/css/site.css, generated verbatim from the
   static build by tools/port/port-css.py. This file carries only what WordPress
   itself puts on the page and the static site never had to style. */

/* WordPress core markup. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 14px 22px;
	clip-path: none;
	background: #fff;
	color: #232930;
	font-weight: 700;
	border-radius: 99px;
	box-shadow: 0 10px 26px rgba(35, 41, 48, .18);
}

/* The admin bar is 32px of chrome the static site never had; without this the
   sticky header hides behind it for logged-in editors. */
body.admin-bar .wolf-header,
body.admin-bar header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .wolf-header,
	body.admin-bar header {
		top: 46px;
	}
}

/* Alignment classes the block editor emits. */
.alignwide { max-width: 1240px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; }

/* Floating WhatsApp chat widget. The static site has no such button — it is an
   addition for the WordPress build, so its styling belongs here and not in the
   generated stylesheet. Without an explicit size the inline SVG has no intrinsic
   one, stretches to the container width and adds ~1450px to every page.

   Ported from the Lluvia Sólida build. The behaviour is the same; the colours
   are not: that site paints the widget in WhatsApp green, and this one only
   answers to Niebla y miel. The chat paper stays as it is, because that grey is
   what makes the panel read as WhatsApp at a glance. */
.wolf-wa {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 70;
	font-family: var(--font-body, inherit);
}

.wolf-wa .wolf-wa__fab {
	position: relative;
	width: 58px;
	height: 58px;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: var(--navy);
	color: var(--honey);
	display: grid;
	place-items: center;
	box-shadow: 0 10px 30px -10px rgba(35, 41, 48, .6);
	transition: transform .2s, box-shadow .2s;
}

.wolf-wa .wolf-wa__fab:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -10px rgba(35, 41, 48, .7); }
.wolf-wa .wolf-wa__fab svg { width: 28px; height: 28px; }

/* The halo is what makes the button read as "you can talk to someone", and it
   stops once the panel is open so it does not compete with the conversation. */
.wolf-wa .wolf-wa__fab::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	animation: wolfWaPulse 2.4s infinite;
}

.wolf-wa.is-anim .wolf-wa__fab::after { animation: none; }

.wolf-wa .wolf-wa__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--honey);
	color: var(--ink);
	font-size: 12px;
	font-weight: 700;
	display: grid;
	place-items: center;
}

.wolf-wa .wolf-wa__panel {
	position: absolute;
	right: 0;
	bottom: 72px;
	width: 330px;
	max-width: calc(100vw - 40px);
	background: #e5ddd5;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 50px rgba(35, 41, 48, .38);
	opacity: 0;
	transform: translateY(12px) scale(.96);
	transform-origin: bottom right;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}

.wolf-wa.is-anim .wolf-wa__panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.wolf-wa .wolf-wa__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	background: var(--navy);
	color: #fff;
}

.wolf-wa .wolf-wa__avatar {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--honey);
	color: var(--ink);
	display: grid;
	place-items: center;
	font-size: 18px;
	font-weight: 700;
}

.wolf-wa .wolf-wa__meta { flex: 1 1 auto; line-height: 1.25; min-width: 0; }
.wolf-wa .wolf-wa__name { font-weight: 700; font-size: 15px; display: block; }
.wolf-wa .wolf-wa__status { font-size: 12px; opacity: .85; display: flex; align-items: center; gap: 5px; }

.wolf-wa .wolf-wa__status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--honey);
	animation: wolfWaDot 1.8s infinite;
}

.wolf-wa .wolf-wa__close {
	background: none;
	border: 0;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	opacity: .85;
	padding: 2px 4px;
}

.wolf-wa .wolf-wa__close:hover { opacity: 1; }

.wolf-wa .wolf-wa__body {
	padding: 14px;
	min-height: 58px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.wolf-wa .wolf-wa__typing {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	background: #fff;
	padding: 12px 14px;
	border-radius: 0 12px 12px 12px;
	box-shadow: 0 1px 1px rgba(35, 41, 48, .08);
}

.wolf-wa .wolf-wa__typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--muted);
	animation: wolfWaType 1.2s infinite;
}

.wolf-wa .wolf-wa__typing span:nth-child(2) { animation-delay: .18s; }
.wolf-wa .wolf-wa__typing span:nth-child(3) { animation-delay: .36s; }

.wolf-wa .wolf-wa__bubble {
	background: #fff;
	color: var(--ink);
	padding: 11px 14px;
	border-radius: 0 12px 12px 12px;
	box-shadow: 0 1px 1px rgba(35, 41, 48, .08);
	font-size: 14.5px;
	line-height: 1.45;
	max-width: 90%;
	min-height: 1.45em;
}

.wolf-wa .wolf-wa__bubble.is-in { animation: wolfWaBubble .3s ease; }

.wolf-wa .wolf-wa__form {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px 12px;
	background: var(--sky-soft);
}

.wolf-wa .wolf-wa__input {
	flex: 1 1 auto;
	border: 0;
	border-radius: 20px;
	padding: 10px 14px;
	font-size: 14px;
	background: #fff;
	color: var(--ink);
	outline: none;
	min-width: 0;
}

/* Miel y no petróleo: es el anillo de foco que ya usa el resto del sitio, y
   sobre el gris claro del campo el petróleo se leía como un borde grueso. */
.wolf-wa .wolf-wa__input:focus-visible { box-shadow: 0 0 0 2px var(--honey); }

.wolf-wa .wolf-wa__send {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	background: var(--honey);
	color: var(--ink);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: transform .2s, background .2s;
}

.wolf-wa .wolf-wa__send:hover { transform: scale(1.06); }
.wolf-wa .wolf-wa__send svg { width: 18px; height: 18px; }

.wolf-wa .wolf-wa__typing[hidden],
.wolf-wa .wolf-wa__bubble[hidden],
.wolf-wa .wolf-wa__panel[hidden] { display: none !important; }

@keyframes wolfWaPulse {
	0%   { box-shadow: 0 0 0 0 rgba(237, 200, 95, .55); }
	70%  { box-shadow: 0 0 0 16px rgba(237, 200, 95, 0); }
	100% { box-shadow: 0 0 0 0 rgba(237, 200, 95, 0); }
}

@keyframes wolfWaDot {
	0%   { box-shadow: 0 0 0 0 rgba(237, 200, 95, .7); }
	70%  { box-shadow: 0 0 0 6px rgba(237, 200, 95, 0); }
	100% { box-shadow: 0 0 0 0 rgba(237, 200, 95, 0); }
}

@keyframes wolfWaType {
	0%, 60%, 100% { transform: translateY(0); opacity: .5; }
	30%           { transform: translateY(-5px); opacity: 1; }
}

@keyframes wolfWaBubble {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* Motion off: the panel still opens, it just does not slide, pulse or type. */
@media (prefers-reduced-motion: reduce) {
	.wolf-wa__fab::after,
	.wolf-wa__status::before,
	.wolf-wa__typing span { animation: none; }

	.wolf-wa__panel,
	.wolf-wa__fab,
	.wolf-wa__send { transition: none; }
}

/* WordPress prints width and height attributes on every image it renders; the
   static site's markup carried none. Both are presentational hints, so both have
   to be neutralised or the image is sized by its file instead of by the design:

     - height alone: Terra's packs came out 373px tall instead of 302px;
     - width alone: the logo took 509px instead of 122px, which squeezed the nav
       until "Orígenes 2026" broke onto a second line.

   `:where()` contributes no specificity, so any rule that really does want to
   set a height (the video poster, the editorial photo pairs) still wins. */
:where(img[width][height]) {
	width: auto;
	height: auto;
}

/* The header is sticky and 136px tall, so an anchor jump lands its target
   underneath it — the static build does this too, losing the top of the
   contact band behind the bar. Scroll position is not something the visual
   comparison captures, so correcting it costs no parity. */
:target,
#contacto {
	scroll-margin-top: 136px;
}

@media (max-width: 640px) {
	:target,
	#contacto {
		scroll-margin-top: 84px;
	}
}

/* ── Pages the static site never had ───────────────────────────
   Soporte técnico and Privacidad are new, so their styling lives here rather
   than in the generated stylesheet. Both borrow the site's own measures: the
   1240px container, the honey-soft cards, the 22px radii. */

/* Support form */
.wolf-support {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 56px;
	align-items: start;
}

@media (max-width: 900px) {
	.wolf-support { grid-template-columns: 1fr; gap: 36px; }
}

.wolf-support__channels {
	list-style: none;
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wolf-support__channels li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--sky-soft);
	border-radius: 16px;
	padding: 14px 18px;
}

.wolf-support__channels span {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}

.wolf-support__channels a {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--navy);
}

.wolf-support__form {
	background: #fff;
	border-radius: 22px;
	padding: 34px 32px;
	box-shadow: 0 14px 34px rgba(35, 41, 48, .08);
}

@media (max-width: 560px) {
	.wolf-support__form { padding: 24px 20px; }
}

.wolf-support__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

@media (max-width: 640px) {
	.wolf-support__row { grid-template-columns: 1fr; gap: 0; }
}

.wolf-support__form p { margin-bottom: 18px; }

.wolf-support__form label {
	display: block;
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-2);
	margin-bottom: 6px;
}

.wolf-support__form label span { color: var(--navy); }

.wolf-support__form input,
.wolf-support__form select,
.wolf-support__form textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ink);
	background: var(--sky-soft);
	border: 2px solid transparent;
	border-radius: 14px;
	padding: 12px 16px;
	transition: border-color .2s, background .2s;
}

.wolf-support__form textarea { resize: vertical; min-height: 140px; }

.wolf-support__form input:focus,
.wolf-support__form select:focus,
.wolf-support__form textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--navy);
}

.wolf-support__form button { margin-top: 4px; border: none; }

.wolf-support__note {
	margin-top: 14px;
	font-size: .88rem;
	color: var(--muted);
}

.wolf-support__errors {
	background: var(--honey-soft);
	border-radius: 14px;
	padding: 14px 18px;
	margin-bottom: 22px;
}

.wolf-support__errors p { margin: 0 0 4px; font-size: .92rem; }
.wolf-support__errors p:last-child { margin-bottom: 0; }

/* The honeypot: present for a bot, gone for everyone else — including screen
   readers, which is why it is moved off-screen rather than hidden. */
.wolf-support__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wolf-support__done {
	background: var(--honey-soft);
	border-radius: 22px;
	padding: 40px 34px;
}

.wolf-support__done h3 { font-size: 1.4rem; margin-bottom: 8px; }
.wolf-support__done p { color: var(--ink-2); }

/* Legal document */
.wolf-legal { max-width: 74ch; }
.wolf-legal__updated {
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 22px;
}

.wolf-legal__intro p { font-size: 1.1rem; color: var(--ink-2); }

.wolf-legal__list {
	list-style: none;
	counter-reset: clause;
	margin-top: 44px;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.wolf-legal__list > li { counter-increment: clause; }

/* Numbered so a clause can be cited by number. */
.wolf-legal__list h2 {
	font-size: 1.3rem;
	margin-bottom: 10px;
	display: flex;
	gap: 12px;
}

.wolf-legal__list h2::before {
	content: counter(clause) ".";
	color: var(--navy);
	flex: none;
}

.wolf-legal p { margin-bottom: 12px; color: var(--ink-2); }
.wolf-legal p:last-child { margin-bottom: 0; }
.wolf-legal a { color: var(--navy); border-bottom: 2px solid currentColor; }

.wolf-legal ul {
	margin: 0 0 12px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--ink-2);
}

/* The wave that closes a hero is the last child of its section, but the section
   still has its own 88px of bottom padding underneath — so the hero's honey
   reappears below the wave as a second band, on both builds. The container
   already carries this hero's spacing (`.page-hero .container` sets 56/64), so
   the section's own bottom padding is only that stray band.

   A defect in the source design, corrected here rather than reproduced. */
.page-hero {
	padding-bottom: 0;
}