/*
Theme Name: Agrochamba
Theme URI: https://agrochamba.com
Author: Agrochamba
Description: Tema clásico liviano de Agrochamba. Reemplaza a Bricks Builder. Dueño del shell, el blog y las landings estáticas; el plugin agrochamba-core aporta la nav, el footer y los templates de app.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: agrochamba
*/

/* =============================================================================
   RESET
   ============================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body { margin: 0; }

img, video, svg { max-width: 100%; height: auto; }
a img { border: 0; }

/* =============================================================================
   DESIGN TOKENS
   Base-4 spacing scale · green-forward agro palette · Plus Jakarta Sans
   (la fuente la enquea el módulo 77; acá la fijamos explícita para no caer a serif).
   ============================================================================= */

:root {
  /* Spacing — base 4 */
  --sp-xs:   4px;
  --sp-sm:   8px;
  --sp-md:   12px;
  --sp-lg:   16px;
  --sp-xl:   24px;
  --sp-xxl:  32px;
  --sp-xxxl: 48px;
  --sp-huge: 72px;

  /* Colour — brand greens + warm neutrals + restrained harvest accent */
  --clr-green-dark:   #2d7a22;
  --clr-green:        #3a9c2e;
  --clr-green-light:  #5aad45;
  --clr-green-pale:   #eaf6e7;
  --clr-ink:          #16240f;   /* deep warm green-black for display headings */
  --clr-cream:        #f7f9f4;
  --clr-bg-soft:      #f4f8f1;   /* subtle tint for alt surfaces / hovers */
  --clr-white:        #ffffff;
  --clr-text:         #283228;
  --clr-text-muted:   #5e6b5a;
  --clr-border:       #e2ebde;
  --clr-border-strong:#cdddc7;
  --clr-link:         #2d7a22;
  --clr-link-hover:   #1d5414;
  --clr-accent:       #cf962a;   /* harvest gold — used SPARINGLY */

  /* Typography */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs:   0.78rem;    /* ~12.5px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.375rem;   /* 38px */

  /* Shadows — layered, soft, green-tinted */
  --shadow-sm: 0 1px 2px rgba(22, 36, 15, 0.05), 0 1px 3px rgba(22, 36, 15, 0.06);
  --shadow-md: 0 6px 16px rgba(45, 122, 34, 0.09), 0 2px 6px rgba(22, 36, 15, 0.05);
  --shadow-lg: 0 14px 34px rgba(45, 122, 34, 0.14), 0 4px 10px rgba(22, 36, 15, 0.06);
  --ring:      0 0 0 3px rgba(58, 156, 46, 0.30);

  /* Layout */
  --container-max: 900px;
  --measure:       70ch;    /* ancho de lectura cómodo para prosa */
  --radius:        8px;
  --radius-lg:     14px;
  --radius-pill:   999px;
}

/* =============================================================================
   BASE ELEMENTS
   ============================================================================= */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--clr-text);
  background: var(--clr-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}

a {
  color: var(--clr-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--clr-link) 35%, transparent);
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

a:hover,
a:focus { color: var(--clr-link-hover); text-decoration-color: currentColor; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  line-height: 1.2;
  font-weight: 700;
  color: var(--clr-ink);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

p { margin-top: 0; }
ul, ol { padding-left: var(--sp-xl); }
strong, b { font-weight: 700; color: var(--clr-ink); }

::selection { background: var(--clr-green-pale); color: var(--clr-green-dark); }

:focus-visible {
  outline: 2px solid var(--clr-green);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* =============================================================================
   LAYOUT UTILITIES
   ============================================================================= */

.agro-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-lg);
}

@media (min-width: 640px) {
  .agro-container { padding-inline: var(--sp-xxl); }
}

.agro-main { min-height: 60vh; }

/* Carga suave del contenido (respeta reduce-motion). */
@media (prefers-reduced-motion: no-preference) {
  .agro-page-article,
  .agro-single-article,
  .agro-archive-header,
  .agro-archive-grid,
  .agro-404-inner {
    animation: agro-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .agro-archive-grid { animation-delay: 0.06s; }
}

@keyframes agro-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================================
   GENERIC PAGE — page.php
   ============================================================================= */

.agro-page { padding-block: var(--sp-huge) var(--sp-xxxl); }

.agro-page-article {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-lg);
}

@media (min-width: 640px) {
  .agro-page-article { padding-inline: var(--sp-xxl); }
}

.agro-page-header {
  margin-bottom: var(--sp-xxl);
  padding-bottom: var(--sp-lg);
  position: relative;
}

.agro-page-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--clr-green), var(--clr-accent));
}

.agro-page-header .entry-title {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  color: var(--clr-ink);
  margin-bottom: 0;
}

/* =============================================================================
   PROSE — área de contenido enriquecido
   ============================================================================= */

.agro-prose {
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: 1.78;
  color: var(--clr-text);
}

.agro-prose > * + * { margin-top: var(--sp-lg); }

.agro-prose h2 {
  font-size: var(--text-2xl);
  margin-top: var(--sp-xxl);
  color: var(--clr-ink);
}
.agro-prose h3 {
  font-size: var(--text-xl);
  margin-top: var(--sp-xl);
  color: var(--clr-ink);
}
.agro-prose p,
.agro-prose ul,
.agro-prose ol { margin-bottom: 0; }
.agro-prose li + li { margin-top: var(--sp-xs); }
.agro-prose img { border-radius: var(--radius); box-shadow: var(--shadow-sm); }

.agro-prose a { font-weight: 500; }

.agro-prose blockquote {
  margin: var(--sp-xl) 0;
  padding: var(--sp-sm) var(--sp-xl);
  border-left: 4px solid var(--clr-accent);
  background: var(--clr-bg-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--clr-text-muted);
  font-style: italic;
}
.agro-prose blockquote p { margin: 0; }

.agro-prose code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--clr-green-pale);
  color: var(--clr-green-dark);
  padding: 0.15em 0.4em;
  border-radius: var(--radius);
}

.agro-prose pre {
  background: var(--clr-ink);
  color: #e8f0e3;
  padding: var(--sp-lg);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.agro-prose pre code { background: none; color: inherit; padding: 0; }

.agro-prose hr {
  border: 0;
  height: 1px;
  margin: var(--sp-xxl) auto;
  background: var(--clr-border-strong);
}

.agro-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin: var(--sp-xl) 0;
}
.agro-prose th,
.agro-prose td {
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--clr-border);
  text-align: left;
}
.agro-prose thead th { background: var(--clr-bg-soft); color: var(--clr-ink); }

.agro-prose figure { margin: var(--sp-xl) 0; }
.agro-prose figcaption {
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  text-align: center;
  margin-top: var(--sp-sm);
}

/* =============================================================================
   SINGLE POST — single.php
   ============================================================================= */

.agro-single { padding-block: var(--sp-huge) var(--sp-xxxl); }

.agro-single-article {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-lg);
}

@media (min-width: 640px) {
  .agro-single-article { padding-inline: var(--sp-xxl); }
}

.agro-single-header { margin-bottom: var(--sp-xxl); }

.agro-single-header .entry-title {
  font-size: clamp(var(--text-2xl), 4.5vw, var(--text-4xl));
  color: var(--clr-ink);
  margin-bottom: var(--sp-md);
}

.agro-single-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  color: var(--clr-text-muted);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}

.agro-single-thumb { margin: 0 0 var(--sp-xxl); }
.agro-single-thumb img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.agro-single-footer {
  margin-top: var(--sp-xxl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--clr-border);
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  align-items: center;
}

.agro-single-footer a {
  text-decoration: none;
  background: var(--clr-green-pale);
  color: var(--clr-green-dark);
  padding: var(--sp-xs) var(--sp-md);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--text-xs);
}
.agro-single-footer a:hover { background: var(--clr-green); color: var(--clr-white); }

/* =============================================================================
   ARCHIVE / HOME (blog index) — archive.php, home.php
   ============================================================================= */

.agro-archive {
  padding-block: var(--sp-huge) var(--sp-xxxl);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-lg);
}

@media (min-width: 640px) {
  .agro-archive { padding-inline: var(--sp-xxl); }
}

.agro-archive-header { margin-bottom: var(--sp-xxl); }

.agro-archive-header .entry-title {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  color: var(--clr-ink);
  margin-bottom: var(--sp-sm);
}

.agro-archive-desc {
  color: var(--clr-text-muted);
  font-size: var(--text-lg);
  max-width: var(--measure);
}

.agro-archive-grid {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .agro-archive-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 840px) {
  .agro-archive-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================================
   CARD — archive.php, home.php, search.php
   ============================================================================= */

.agro-card {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--clr-white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
  list-style: none;
}

.agro-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--clr-green-light);
}

.agro-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--sp-lg);
  height: 100%;
}

.agro-card-thumb {
  margin: calc(-1 * var(--sp-lg)) calc(-1 * var(--sp-lg)) var(--sp-lg);
  overflow: hidden;
  background: var(--clr-bg-soft);
}

.agro-card-thumb img {
  width: 100%;
  height: 184px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.agro-card:hover .agro-card-thumb img { transform: scale(1.04); }

.agro-card-title {
  font-size: var(--text-lg);
  color: var(--clr-ink);
  margin-bottom: var(--sp-sm);
  line-height: 1.3;
  transition: color 0.18s ease;
}
.agro-card:hover .agro-card-title { color: var(--clr-green-dark); }

.agro-card-excerpt {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--clr-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =============================================================================
   PAGINATION — the_posts_pagination() / the_comments_pagination()
   ============================================================================= */

.pagination .nav-links,
.comments-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  justify-content: center;
  margin-top: var(--sp-xxxl);
}

.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 var(--sp-md);
  border: 1px solid var(--clr-border-strong);
  border-radius: var(--radius);
  background: var(--clr-white);
  color: var(--clr-green-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.nav-links a.page-numbers:hover {
  background: var(--clr-green-pale);
  border-color: var(--clr-green-light);
}

.nav-links .page-numbers.current {
  background: var(--clr-green);
  border-color: var(--clr-green);
  color: var(--clr-white);
}

.nav-links .page-numbers.dots {
  border-color: transparent;
  background: none;
}

/* =============================================================================
   SEARCH — search.php, searchform.php
   ============================================================================= */

.agro-search {
  padding-block: var(--sp-huge) var(--sp-xxxl);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-lg);
}

.agro-searchform {
  display: flex;
  gap: var(--sp-sm);
  margin-block: var(--sp-xl);
  max-width: var(--measure);
}

.agro-searchform input[type="search"] {
  flex: 1;
  padding: var(--sp-md) var(--sp-lg);
  border: 1px solid var(--clr-border-strong);
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--clr-text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.agro-searchform input[type="search"]:focus {
  outline: none;
  border-color: var(--clr-green);
  box-shadow: var(--ring);
}

.agro-searchform button {
  padding: var(--sp-md) var(--sp-xl);
  background: var(--clr-green);
  color: var(--clr-white);
  border: none;
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease;
}

.agro-searchform button:hover { background: var(--clr-green-dark); }

/* =============================================================================
   404 — 404.php
   ============================================================================= */

.agro-404 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64vh;
  padding: var(--sp-huge) var(--sp-lg);
  background: radial-gradient(circle at 50% 0%, var(--clr-green-pale), transparent 60%);
}

.agro-404-inner { text-align: center; max-width: 480px; }

.agro-404-inner h1 {
  font-size: clamp(var(--text-3xl), 6vw, var(--text-4xl));
  color: var(--clr-ink);
  margin-bottom: var(--sp-lg);
}

.agro-404-inner p {
  color: var(--clr-text-muted);
  font-size: var(--text-lg);
  margin-bottom: var(--sp-xl);
}

.agro-404-inner .agro-btn-primary,
.agro-404-inner .agro-btn-secondary { margin: var(--sp-xs); }

/* =============================================================================
   BUTTONS — compartidos
   ============================================================================= */

.agro-btn-primary,
.agro-btn-secondary {
  display: inline-block;
  padding: var(--sp-md) var(--sp-xxl);
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.5;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.agro-btn-primary {
  background: var(--clr-green);
  color: var(--clr-white);
  border: 2px solid var(--clr-green);
}

.agro-btn-primary:hover,
.agro-btn-primary:focus {
  background: var(--clr-green-dark);
  border-color: var(--clr-green-dark);
  color: var(--clr-white);
}

.agro-btn-secondary {
  background: transparent;
  color: var(--clr-green);
  border: 2px solid var(--clr-green);
}

.agro-btn-secondary:hover,
.agro-btn-secondary:focus {
  background: var(--clr-green-pale);
  color: var(--clr-green-dark);
}

.agro-btn-primary:active,
.agro-btn-secondary:active { transform: translateY(1px); }

/* =============================================================================
   COMMENTS — comments.php
   ============================================================================= */

.agro-comments {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-lg);
  padding-block: var(--sp-xxxl);
  border-top: 1px solid var(--clr-border);
}

@media (min-width: 640px) {
  .agro-comments { padding-inline: var(--sp-xxl); }
}

.agro-comments-title {
  font-size: var(--text-2xl);
  color: var(--clr-ink);
  margin-bottom: var(--sp-xl);
}

.agro-comment-list { padding: 0; list-style: none; margin: 0; }
.agro-comment-list ol { list-style: none; padding-left: var(--sp-xl); }

.agro-comment-list .comment-body {
  padding: var(--sp-lg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-lg);
  background: var(--clr-white);
  box-shadow: var(--shadow-sm);
}

.agro-comment-list .comment-author { font-weight: 700; color: var(--clr-ink); }
.agro-comment-list .comment-meta,
.agro-comment-list .comment-metadata {
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.agro-comment-list .comment-metadata a { color: inherit; text-decoration: none; }

.comment-respond { margin-top: var(--sp-xxl); }
.comment-respond .comment-reply-title {
  font-size: var(--text-xl);
  color: var(--clr-ink);
  margin-bottom: var(--sp-lg);
}

.comment-form { display: grid; gap: var(--sp-lg); max-width: var(--measure); }
.comment-form p { margin: 0; }
.comment-form label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--sp-xs);
  color: var(--clr-ink);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: var(--sp-md) var(--sp-lg);
  border: 1px solid var(--clr-border-strong);
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--clr-text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--clr-green);
  box-shadow: var(--ring);
}

.comment-form textarea { min-height: 140px; resize: vertical; }

.comment-form .submit,
.comment-form input[type="submit"] {
  justify-self: start;
  padding: var(--sp-md) var(--sp-xxl);
  background: var(--clr-green);
  color: var(--clr-white);
  border: none;
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.comment-form input[type="submit"]:hover {
  background: var(--clr-green-dark);
  box-shadow: var(--shadow-md);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 480px) {
  .agro-btn-primary,
  .agro-btn-secondary {
    display: block;
    text-align: center;
    width: 100%;
  }
  .agro-page,
  .agro-single,
  .agro-archive,
  .agro-search { padding-block: var(--sp-xxxl) var(--sp-xxl); }
}