/* ============================================================
   KINTSUGI — Additional CSS
   Paste this whole file into:
   WP Admin → Appearance → Customize → Additional CSS

   It only contains things Elementor's own controls can't do
   cleanly (font tokens, line-clamping, focus states, dropdown
   hover behavior). Everything else (spacing, columns, colors)
   should be set directly on Elementor widgets/sections so the
   page stays editable without touching code.
   ============================================================ */

:root {
  --kintsugi-ink: #1a1a1a;
  --kintsugi-sage: #5f7161;
  --kintsugi-sage-light: #75917a;
  --kintsugi-mint: #e8efe9;
  --kintsugi-cream: #faf9f6;
  --kintsugi-font-serif: 'Playfair Display', serif;
  --kintsugi-font-sans: 'Inter', sans-serif;
}

body {
  font-family: var(--kintsugi-font-sans);
  color: var(--kintsugi-ink);
}

/* Elementor Heading widgets set to "Kintsugi Display" style */
.kintsugi-font-serif,
h1.elementor-heading-title,
.kintsugi-hero-title {
  font-family: var(--kintsugi-font-serif) !important;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* 2-line clamp on article card titles (Elementor "Advanced > CSS Classes": kintsugi-clamp-2) */
.kintsugi-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 3-line clamp on article card excerpts (CSS Class: kintsugi-clamp-3) */
.kintsugi-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Nav dropdown panels (Elementor Nav Menu widget, "Dropdown" layout already
   handles this — only needed if you build the dropdowns by hand with
   a Container + visibility toggle) */
.kintsugi-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.kintsugi-nav-item:hover .kintsugi-dropdown,
.kintsugi-nav-item:focus-within .kintsugi-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Visible keyboard focus (accessibility — Elementor strips this by default) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--kintsugi-sage);
  outline-offset: 2px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Active state for the sage filter pills — toggle the
   "kintsugi-pill-active" class via the small JS block included
   with this template (or an Elementor "Loop" filter addon) */
.kintsugi-pill-active {
  background-color: rgba(255, 255, 255, 0.28) !important;
}