/*
Theme Name:   Mariposa
Theme URI:    https://mariposaevents.co
Author:       Mariposa Ventures LLC
Author URI:   https://mariposaevents.co
Description:  Custom theme for Mariposa Events — a Southeastern Arizona vendor directory, event planning resource, and editorial journal. Built around Advanced Custom Fields so vendor, event, and location content is entered once and reused across the directory, single profiles, the homepage, star ratings & reviews, and the REST API feed used to power paid-partnership microsites.
Version:      1.1.0
Requires PHP: 8.0
Text Domain:  mariposa
*/

/* ==========================================================================
   Design tokens — the green motif.
   NOTE: these hex values are my interpretation of "the green motif" — swap
   them for your real brand values from Anastasia if they differ from this.
   ========================================================================== */

:root {
  /* Greens */
  --mariposa-green-900: #16301f; /* deep forest — header/footer, body copy on cream */
  --mariposa-green-700: #2f5233; /* primary green — buttons, links, nav active state */
  --mariposa-green-500: #5c8a62; /* mid sage — secondary UI, borders, icons */
  --mariposa-green-200: #d8e6d8; /* pale sage — badges, hovers, section backgrounds */
  --mariposa-green-100: #eef3ea; /* faint sage wash — alternating section backgrounds */

  /* Neutrals */
  --mariposa-cream: #faf6ec;     /* page background */
  --mariposa-white: #ffffff;     /* card backgrounds */
  --mariposa-ink: #202420;       /* body text */
  --mariposa-ink-muted: #5b6358; /* secondary text */
  --mariposa-line: #e1ddcd;      /* hairlines, borders */

  /* Accent — spent deliberately on sponsor/featured badges and primary CTAs */
  --mariposa-gold: #c6922c;
  --mariposa-gold-100: #f6ead0;

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --container-max: 1200px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--mariposa-cream);
  color: var(--mariposa-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--mariposa-green-900);
  line-height: 1.15;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.6rem + 2vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem); }

a { color: var(--mariposa-green-700); }
a:hover, a:focus-visible { color: var(--mariposa-green-900); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--mariposa-gold);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; display: block; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mariposa-green-700);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.75em 1.4em;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn--primary {
  background: var(--mariposa-green-700);
  color: var(--mariposa-white);
}
.btn--primary:hover { background: var(--mariposa-green-900); color: var(--mariposa-white); }

.btn--ghost {
  background: transparent;
  border-color: var(--mariposa-green-700);
  color: var(--mariposa-green-700);
}
.btn--ghost:hover { background: var(--mariposa-green-100); }

.badge {
  display: inline-block;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge--sage { background: var(--mariposa-green-200); color: var(--mariposa-green-900); }
.badge--gold { background: var(--mariposa-gold-100); color: #7a5a17; }

/* ==========================================================================
   Site header / footer
   ========================================================================== */

.site-header {
  background: var(--mariposa-white);
  border-bottom: 1px solid var(--mariposa-line);
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}

.site-logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--mariposa-green-900);
  text-decoration: none;
}

.primary-nav ul {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  text-decoration: none;
  font-weight: 500;
  color: var(--mariposa-ink);
}
.primary-nav a:hover { color: var(--mariposa-green-700); }

.header-ctas { display: flex; align-items: center; gap: var(--space-2); }

.site-footer {
  background: var(--mariposa-green-900);
  color: var(--mariposa-green-100);
  padding-block: var(--space-5);
  margin-top: var(--space-5);
}
.site-footer a { color: var(--mariposa-green-100); }
.site-footer .container { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; }

/* ==========================================================================
   Directory grid + vendor card
   ========================================================================== */

.directory-toolbar {
  background: var(--mariposa-green-100);
  border: 1px solid var(--mariposa-line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

.directory-toolbar form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
  align-items: end;
}

.directory-toolbar label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mariposa-ink-muted);
  margin-bottom: 0.35em;
}

.directory-toolbar select,
.directory-toolbar input[type="text"] {
  width: 100%;
  padding: 0.6em 0.75em;
  border: 1px solid var(--mariposa-line);
  border-radius: var(--radius-sm);
  background: var(--mariposa-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.vendor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}

.vendor-card {
  background: var(--mariposa-white);
  border: 1px solid var(--mariposa-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.vendor-card:hover {
  box-shadow: 0 8px 24px rgba(22, 48, 31, 0.1);
  transform: translateY(-2px);
}

.vendor-card__media {
  aspect-ratio: 4 / 3;
  background: var(--mariposa-green-100);
  overflow: hidden;
}
.vendor-card__media img { width: 100%; height: 100%; object-fit: cover; }

.vendor-card__body { padding: var(--space-2) var(--space-3) var(--space-3); flex: 1; display: flex; flex-direction: column; gap: 0.4em; }
.vendor-card__name { font-family: var(--font-display); font-size: 1.15rem; margin: 0; color: var(--mariposa-green-900); }
.vendor-card__meta { font-size: 0.85rem; color: var(--mariposa-ink-muted); }
.vendor-card__desc { font-size: 0.92rem; color: var(--mariposa-ink-muted); margin-top: 0.2em; }

/* ==========================================================================
   Star ratings — display + the CSS-only star picker on the review form
   ========================================================================== */

/* Read-only display, used on vendor cards, the profile header, and each
   review. Two stacked ★ characters per star: a muted "track" star behind,
   and a gold star clipped to --fill (0, 0.5, or 1) via absolute width —
   gives half-star precision without an icon font or SVG sprite. */
.mariposa-stars {
  display: inline-flex;
  gap: 0.05em;
  font-size: var(--star-size, 1em);
  line-height: 1;
  vertical-align: middle;
}
.mariposa-star {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  color: var(--mariposa-line);
}
.mariposa-star::before {
  content: "★";
  position: absolute;
  inset: 0;
}
.mariposa-star::after {
  content: "★";
  position: absolute;
  inset: 0;
  width: calc(var(--fill, 0) * 1em);
  overflow: hidden;
  color: var(--mariposa-gold);
}

.vendor-card__rating {
  display: flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
}
.vendor-card__rating-count {
  font-size: 0.82rem;
  color: var(--mariposa-ink-muted);
  white-space: nowrap;
}

/* The submission widget — five radio inputs in reverse DOM order, flexed
   row-reverse so they *display* 1→5 left to right while still letting the
   ~ sibling selector light up "this star and everything before it" on
   hover or selection. No JavaScript involved; works with CSS alone. */
.star-input {
  display: inline-flex;
  flex-direction: row-reverse;
  border: 0;
  margin: 0;
  padding: 0;
  gap: 0.1em;
}
.star-input input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.star-input label {
  cursor: pointer;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--mariposa-line);
}
.star-input label::before { content: "★"; }
/* Visually hidden but still read by screen readers / available to the
   accessible name — the ★ glyph above is what sighted users see. */
.screen-reader-text {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label {
  color: var(--mariposa-gold);
}

/* Honeypot — real visitors never see this field; a bot filling in every
   input blindly will, and the handler (inc/review-submission.php) uses that
   to quietly drop the submission. Hidden off-canvas rather than
   display:none, which some bots skip past deliberately. */
.mariposa-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Reviews section (single vendor profile)
   ========================================================================== */

.vendor-reviews {
  padding-block: var(--space-4);
  border-top: 1px solid var(--mariposa-line);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1em;
  margin-bottom: var(--space-3);
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.review-card {
  background: var(--mariposa-white);
  border: 1px solid var(--mariposa-line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.review-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-bottom: 0.5em;
}
.review-card__author { font-weight: 600; }
.review-card__date { font-size: 0.82rem; color: var(--mariposa-ink-muted); }
.review-card__text { margin: 0; color: var(--mariposa-ink); }

.review-form-wrap {
  background: var(--mariposa-green-100);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  max-width: 640px;
}
.review-form-wrap h3 { margin-top: 0; }

/* ==========================================================================
   Single vendor profile
   ========================================================================== */

.vendor-hero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.vendor-hero__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.vendor-hero__gallery img { aspect-ratio: 1 / 1; object-fit: cover; }

.vendor-hero__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.vendor-hero__logo {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--mariposa-line);
}

.vendor-sidebar {
  background: var(--mariposa-green-100);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  align-self: start;
}
.vendor-sidebar h3 { margin-top: 0; }
.vendor-sidebar .btn { width: 100%; justify-content: center; margin-bottom: var(--space-1); }
.vendor-sidebar dl { margin: 0; }
.vendor-sidebar dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mariposa-ink-muted); margin-top: 0.8em; }
.vendor-sidebar dd { margin: 0.1em 0 0; }

.vendor-services { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 1em 0; }
.vendor-services span {
  background: var(--mariposa-white);
  border: 1px solid var(--mariposa-line);
  border-radius: 999px;
  padding: 0.35em 0.9em;
  font-size: 0.85rem;
}

/* ==========================================================================
   Presenting Sponsor placements (homepage + archive)
   ========================================================================== */

.sponsor-banner {
  background: linear-gradient(135deg, var(--mariposa-green-900), var(--mariposa-green-700));
  color: var(--mariposa-white);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.sponsor-banner__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mariposa-gold-100);
}
.sponsor-banner h2 { color: var(--mariposa-white); margin-bottom: 0.2em; }
.sponsor-banner p { color: var(--mariposa-green-100); max-width: 46ch; margin: 0; }
.sponsor-banner__logo {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--mariposa-white); object-fit: cover;
  border: 3px solid var(--mariposa-gold);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 880px) {
  .vendor-hero { grid-template-columns: 1fr; }
  .primary-nav { display: none; }
}