/*
Theme Name: Nanah
Theme URI: https://distribuidor.nanah.mx
Author: Nanah
Description: Tema de bloques de marca para el sitio público de distribuidores Nanah (teal #67B9A2 + clay). Editable por el Site Editor.
Version: 0.4.4
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: nanah
*/

/* Organic icons: inherit color, thin round stroke, never filled. */
.nanah-ic { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.nanah-ic.lg { width: 2em; height: 2em; }
.nanah-ic.xl { width: 3em; height: 3em; }
/* Section label (11–12px uppercase greenDk) — DESIGN-SYSTEM §2. */
.nanah-kicker { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; font-weight: 700; }

/* Site header: a STICKY, solid deep-teal bar on every marketing page — always visible while
   scrolling and unmistakably a menu (replaces the old transparent-over-hero treatment, which read
   as decoration, not navigation). White logo + nav for contrast. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--wp--preset--color--green-dk);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 8px 20px -14px rgba(0, 0, 0, .55);
}
/* Bigger logo (was 22px), white via invert. !important beats the block's inline height. */
header.wp-block-template-part img { filter: brightness(0) invert(1); height: 40px !important; width: auto; }
@media (min-width: 782px) { header.wp-block-template-part img { height: 46px !important; } }

header.wp-block-template-part .wp-block-navigation,
header.wp-block-template-part .wp-block-navigation a { color: var(--wp--preset--color--card); }
/* Read as a menu: bold links, comfortable tap targets, a clear hover/current affordance. */
header.wp-block-template-part .wp-block-navigation { font-weight: 700; }
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content {
	padding: 7px 13px;
	border-radius: 9px;
	transition: background-color .15s ease;
}
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	background: rgba(255, 255, 255, .16);
}
/* Mobile overlay toggle also white so the hamburger shows on the teal bar. */
header.wp-block-template-part .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--card); }

/* Featured-catalog product grid: 2-up mobile → 4-up desktop.
   core/columns forces flex-basis:100% below 782px and can't do a 2-up mobile grid, so the
   4 cards live as direct children of a core/group carrying this class instead — DEV-HANDOFF. */
.nanah-catalog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; align-items: stretch; }
@media (min-width: 782px) { .nanah-catalog-grid { grid-template-columns: repeat(4, 1fr); } }
/* Equal-size, aligned cards: each photo sits in a uniform square box (object-fit) regardless of its
   native aspect ratio, the card is a full-height flex column, and the title takes the slack so the
   "Inicia sesión" row bottom-aligns across all four frames. */
/* min-width:0 makes the 4 `1fr` columns TRULY equal (without it a card's content min-size can widen
   its column and shrink the rest — the same grid-item trap as MasVendido). object-fit:contain keeps
   each product whole inside an identical square box, so all four frames match in size regardless of
   the photo's native crop. */
/* margin-block:0 kills WordPress's flow block-gap margin (it stamps margin-top on every child but
   the first — fine for a stacked flow, but here the cards are GRID items spaced by `gap`, so that
   stray top-margin shoved cards 2-4 down 18px and left the first card sitting higher). */
.nanah-catalog-grid > .wp-block-group { display: flex; flex-direction: column; height: 100%; min-width: 0; margin-block: 0; overflow: hidden; }
.nanah-catalog-grid .wp-block-image { margin: 0; }
.nanah-catalog-grid .wp-block-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; display: block; }
.nanah-catalog-grid > .wp-block-group > p:first-of-type { flex: 1 0 auto; }
.nanah-login-link { color: var(--wp--preset--color--green-dk); font-weight: 700; text-decoration: underline; }

/* Beneficios (/ser-distribuidor): 1 columna en móvil → 2 columnas en desktop. margin-block:0 mata el
   block-gap de WordPress (margin-top en hijos no-primeros), que en una grid desalinearía las celdas. */
.nanah-beneficios-grid { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); }
@media (min-width: 782px) { .nanah-beneficios-grid { grid-template-columns: 1fr 1fr; column-gap: var(--wp--preset--spacing--50); } }
.nanah-beneficios-grid > .wp-block-columns { margin-block: 0; }
/* Bullets de Beneficios: mismo trato que "Por qué Nanah" — título/subtítulo pegados (ya centrados
   verticalmente al icono por verticalAlignment:center en las columnas). */
.nanah-beneficios-grid .wp-block-column p { margin-block: 0; }
.nanah-beneficios-grid .wp-block-column p + p { margin-top: 2px; }

/* Home "Por qué Nanah": centrar la sección y pegar título/subtítulo de cada bullet, centrados
   verticalmente respecto al icono (las columnas ya llevan verticalAlignment:center). */
#por-que-nanah { text-align: center; }
#por-que-nanah > .wp-block-group { justify-content: center; }           /* fila del encabezado */
#por-que-nanah .wp-block-columns { max-width: 460px; margin-inline: auto; text-align: left; } /* bullets como bloque centrado */
#por-que-nanah .wp-block-column p { margin-block: 0; }                   /* pega los dos textos */
#por-que-nanah .wp-block-column p + p { margin-top: 2px; }

/* Clay conversion CTA (block style "is-style-clay" on core/button) — mockup fidelity: the
   primary conversion buttons (hero + cta-band) must render kraft clay, not the teal
   brand-button gradient from theme.json elements.button. background-image:none + explicit
   background-color beats the theme.json gradient's specificity — DEV-HANDOFF W4a.4. */
.wp-block-button.is-style-clay .wp-block-button__link { background-image: none; background-color: var(--wp--preset--color--clay); color: #fff; }
.wp-block-button.is-style-clay .wp-block-button__link:hover { background-color: var(--wp--preset--color--clay-dk); }

/* /ser-distribuidor lead-form (nanah/lead-form pattern): native <form>, not core blocks, so
   Task 4 JS can bind fixed ids. Primitives reference theme.json preset tokens only — W4b.3. */
.nanah-hp { position: absolute; left: -9999px; }

.nanah-heading-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.nanah-heading-row h3 { margin: 0; }

.nanah-field { margin-bottom: 13px; }
.nanah-field label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 5px; }
.nanah-field-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--wp--preset--color--muted); }

.nanah-input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--wp--preset--color--line); border-radius: 10px; padding: 11px; font-size: 14px; font-family: inherit; background: var(--wp--preset--color--card); color: var(--wp--preset--color--ink); }
.nanah-input:focus-visible { outline: 2px solid var(--wp--preset--color--green); outline-offset: 1px; }
textarea.nanah-input { height: 84px; resize: vertical; }

.nanah-split { display: flex; gap: 10px; }
.nanah-split > .nanah-field { flex: 1; }

.nanah-policy-card { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--sand); border-radius: 13px; padding: 14px; margin-top: var(--wp--preset--spacing--40); }
.nanah-policy-card__title { color: var(--wp--preset--color--clay-dk); }
.nanah-policy-card__intro { font-size: 13px; color: var(--wp--preset--color--ink); line-height: 1.55; }

.nanah-policy { border: 1px solid var(--wp--preset--color--line); border-radius: 11px; background: var(--wp--preset--color--card); margin-bottom: 11px; overflow: hidden; }
.nanah-policy summary { list-style: none; cursor: pointer; padding: 12px 14px; font-weight: 700; color: var(--wp--preset--color--green-dk); display: flex; align-items: center; gap: 8px; }
.nanah-policy summary::-webkit-details-marker { display: none; }
.nanah-policy summary::after { content: "\25B8"; margin-left: auto; color: var(--wp--preset--color--muted); transition: transform .2s; }
.nanah-policy[open] summary { border-bottom: 1px solid var(--wp--preset--color--line); }
.nanah-policy[open] summary::after { transform: rotate(90deg); }
.nanah-policy__body { padding: 12px 14px; font-size: 13px; color: var(--wp--preset--color--muted); line-height: 1.55; }

.nanah-check-row { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--wp--preset--color--ink); margin: 12px 0 0; line-height: 1.45; cursor: pointer; }
.nanah-check-row input { margin-top: 3px; flex: none; }

.nanah-subcard { background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--line); border-radius: 13px; padding: 13px 14px; margin-top: 13px; }
.nanah-subcard__intro { font-size: 13px; color: var(--wp--preset--color--muted); line-height: 1.55; }

.nanah-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.nanah-chip { display: inline-flex; align-items: center; font-size: 12px; padding: 5px 11px; border-radius: 20px; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--card); color: var(--wp--preset--color--ink); white-space: nowrap; }

/* color-mix() tints the teal preset for the info banner — still a preset reference, no new hex. */
.nanah-banner-info { display: flex; gap: 9px; align-items: flex-start; border-radius: 12px; padding: 11px 13px; font-size: 13px; line-height: 1.45; background: color-mix(in srgb, var(--wp--preset--color--green) 14%, var(--wp--preset--color--card)); border: 1px solid color-mix(in srgb, var(--wp--preset--color--green) 34%, var(--wp--preset--color--card)); color: var(--wp--preset--color--green-dk); }

.nanah-accept-label { font-weight: 700; color: var(--wp--preset--color--clay-dk); margin: 13px 0 8px; }
.nanah-accept-req { color: var(--wp--preset--color--clay-dk); }

.nanah-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.nanah-btn, .nanah-btn-outline { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; border-radius: 12px; padding: 13px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; }
.nanah-btn { border: none; color: var(--wp--preset--color--card); background: var(--wp--preset--gradient--brand-button); }
.nanah-btn:disabled { cursor: not-allowed; background: var(--wp--preset--color--line); background-image: none; color: var(--wp--preset--color--muted); }
.nanah-btn-outline { background: var(--wp--preset--color--card); color: var(--wp--preset--color--green-dk); border: 1.5px solid var(--wp--preset--color--green-dk); }

.nanah-footnote { font-size: 11px; color: var(--wp--preset--color--muted); text-align: center; margin-top: 8px; }

/* JS-driven states (lead-form.js, W4b.4): Sí/No selection, inline validation, success card. */
.nanah-btn.is-selected, .nanah-btn-outline.is-selected { outline: 2px solid var(--wp--preset--color--green-dk); outline-offset: 2px; }
.nanah-accept-note { font-size: 12px; color: var(--wp--preset--color--clay-dk); margin: 8px 0 0; }
/* Single consent checkbox (round 4, replaces the Sí/No buttons): emphasised so it reads as the gate. */
.nanah-agree-row { margin-top: 14px; padding: 12px 13px; border: 1.5px solid var(--wp--preset--color--green-dk); border-radius: 12px; background: var(--wp--preset--color--card); font-weight: 700; }
.nanah-agree-row input { width: 18px; height: 18px; margin-top: 1px; }
.nanah-field-error { display: block; font-size: 12px; color: var(--wp--preset--color--clay-dk); margin-top: 5px; }

/* Round 5: full shipping address + fiscal (invoice) block. */
[hidden] { display: none !important; } /* belt-and-suspenders for the toggled fiscal/billing panels */
.nanah-section-label { font-size: 12px; font-weight: 800; letter-spacing: .3px; color: var(--wp--preset--color--green-dk); margin: 16px 0 6px; }
select.nanah-input { appearance: auto; background: var(--wp--preset--color--card); }
.nanah-file { padding: 8px 10px; font-size: 13px; background: var(--wp--preset--color--paper); }
.nanah-toggle-row { margin-top: 14px; padding: 12px 13px; border: 1.5px solid var(--wp--preset--color--line); border-radius: 12px; background: var(--wp--preset--color--card); font-weight: 700; }
.nanah-fiscal-panel { margin-top: 10px; padding: 14px; border: 1px solid var(--wp--preset--color--sand); border-radius: 13px; background: var(--wp--preset--color--paper); }

/* Centered validation popup (round 6): appears on a failed submit, fades after ~2.5s. */
.nanah-toast { position: fixed; inset: 0; margin: auto; width: max-content; max-width: 88vw; height: max-content; z-index: 1000; padding: 16px 22px; border-radius: 14px; background: var(--wp--preset--color--clay-dk); color: var(--wp--preset--color--card); font-weight: 700; font-size: 15px; line-height: 1.4; text-align: center; box-shadow: 0 12px 40px -8px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.nanah-toast.is-visible { opacity: 1; }

/* "¿Cómo funciona?" — video de ayuda en la página de registro (round 7). */
.nanah-help-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 7px 14px; border-radius: 10px; border: 1.5px solid var(--wp--preset--color--green-dk); background: var(--wp--preset--color--card); color: var(--wp--preset--color--green-dk); font-weight: 700; font-size: 13px; cursor: pointer; }
.nanah-help-btn:hover { background: var(--wp--preset--color--paper); }
.nanah-help-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.nanah-help-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
.nanah-help-modal__box { position: relative; z-index: 1; width: 100%; max-width: 820px; background: var(--wp--preset--color--ink); border-radius: 16px; padding: 12px; box-shadow: 0 20px 60px -12px rgba(0, 0, 0, .6); }
.nanah-help-modal__video { width: 100%; max-height: 78vh; border-radius: 10px; background: #000; display: block; }
.nanah-help-modal__title { margin: 10px 4px 4px; color: var(--wp--preset--color--card); font-weight: 700; font-size: 14px; }
.nanah-help-modal__close { position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; border-radius: 999px; border: none; background: var(--wp--preset--color--card); color: var(--wp--preset--color--ink); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .5); }
.nanah-input[aria-invalid="true"] { border-color: var(--wp--preset--color--clay-dk); }
#nanah-lead-result:not(:empty) { font-size: 13px; color: var(--wp--preset--color--clay-dk); margin-top: 10px; }
.nanah-success-card { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--sand); border-radius: 13px; padding: 16px; font-size: 14px; color: var(--wp--preset--color--green-dk); font-weight: 700; text-align: center; }
.nanah-success-card p { margin: 0; }