/* ============================================================
   UBUNTU VILLAGE — CORE BLOCK STYLESHEET
   Paste into: Appearance → Customize → Additional CSS
   Version: 1.0 | June 2026
   ============================================================ */

/* --- FONTS (already loaded by theme, referenced here) ------- */
/* Headings: Cormorant Garamond */
/* Body:     DM Sans           */

/* --- DESIGN TOKENS ------------------------------------------ */
:root {
  --uv-ink:       #2C1A0E;
  --uv-gold:      #C9A84C;
  --uv-terra:     #D4784A;
  --uv-cream:     #fdf6ec;
  --uv-parchment: #f9f3ea;
  --uv-dark:      #4a2c1a;
  --uv-white:     #f5e6c8;
}

/* ============================================================
   1. HERO / OPENING BLOCK  →  class="uv-hero"
   ============================================================ */
.uv-hero {
  background: linear-gradient(135deg, var(--uv-ink) 0%, var(--uv-dark) 100%);
  border-left: 5px solid var(--uv-gold);
  border-radius: 12px;
  padding: 2.4rem 2.2rem;
  margin-bottom: 2rem;
  font-family: 'DM Sans', sans-serif;
}

.uv-hero .uv-opening-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  color: var(--uv-gold);
  font-style: italic;
  line-height: 1.6;
  margin: 0 0 1rem;
}

.uv-hero .uv-opening-body {
  color: var(--uv-white);
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 0;
}

/* ============================================================
   2. SECTION HEADING BLOCK  →  class="uv-section"
   ============================================================ */
.uv-section {
  margin: 2.5rem 0;
  font-family: 'DM Sans', sans-serif;
}

.uv-section h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  color: var(--uv-ink);
  margin-bottom: 1rem;
}

.uv-section .uv-rule {
  border: none;
  border-top: 2px solid var(--uv-gold);
  margin-bottom: 1.5rem;
  width: 60px;
}

.uv-section p {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--uv-ink);
}

.uv-section p + p {
  margin-top: 1rem;
}

/* ============================================================
   3. PULL QUOTE  →  class="uv-pullquote"
   ============================================================ */
.uv-pullquote {
  border-left: 6px solid var(--uv-terra);
  background: var(--uv-cream);
  border-radius: 8px;
  padding: 2rem 2.2rem;
  margin: 2.5rem 0;
  font-family: 'DM Sans', sans-serif;
}

.uv-pullquote .uv-quote-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  color: var(--uv-terra);
  font-style: italic;
  line-height: 1.65;
  margin: 0;
}

.uv-pullquote .uv-quote-attr {
  margin: 1rem 0 0;
  color: var(--uv-ink);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ============================================================
   4. PRACTICE / RITUAL BOX  →  class="uv-practice"
   ============================================================ */
.uv-practice {
  background: var(--uv-cream);
  border: 2px solid var(--uv-gold);
  border-radius: 12px;
  padding: 2.2rem;
  margin: 2.5rem 0;
  font-family: 'DM Sans', sans-serif;
}

.uv-practice h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  color: var(--uv-ink);
  margin: 0 0 1.2rem;
}

.uv-practice p {
  color: var(--uv-ink);
  line-height: 1.85;
  margin: 0 0 1rem;
}

.uv-practice ol,
.uv-practice ul {
  color: var(--uv-ink);
  line-height: 2.1;
  padding-left: 1.4rem;
  margin: 0 0 1rem;
}

/* ============================================================
   5. REFERENCES BLOCK  →  class="uv-references"
   ============================================================ */
.uv-references {
  margin: 2.5rem 0;
  padding: 1.8rem 2rem;
  background: var(--uv-parchment);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
}

.uv-references h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  color: var(--uv-ink);
  margin: 0 0 1.2rem;
}

.uv-references ul {
  color: var(--uv-ink);
  line-height: 2.1;
  padding-left: 1.4rem;
  margin: 0;
  font-size: 0.97rem;
}

.uv-references a {
  color: var(--uv-terra);
  text-decoration: underline;
}

/* ============================================================
   6. DARK CTA BLOCK  →  class="uv-cta"
   ============================================================ */
.uv-cta {
  background: var(--uv-ink);
  border-radius: 12px;
  padding: 2.4rem 2.2rem;
  margin: 2.5rem 0;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
}

.uv-cta .uv-cta-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  color: var(--uv-gold);
  font-style: italic;
  margin: 0 0 0.6rem;
}

.uv-cta .uv-cta-body {
  color: var(--uv-white);
  font-size: 1rem;
  line-height: 1.75;
  margin: 0 0 1.8rem;
}

.uv-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.uv-btn-primary {
  background: var(--uv-gold);
  color: var(--uv-ink);
  padding: 0.75rem 1.6rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  letter-spacing: 0.04em;
  display: inline-block;
}

.uv-btn-primary:hover {
  background: #e0b85a;
  color: var(--uv-ink);
}

.uv-btn-secondary {
  background: transparent;
  color: var(--uv-gold);
  border: 2px solid var(--uv-gold);
  padding: 0.75rem 1.6rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  letter-spacing: 0.04em;
  display: inline-block;
}

.uv-btn-secondary:hover {
  background: rgba(201,168,76,0.1);
  color: var(--uv-gold);
}

/* ============================================================
   7. AUTHOR BIO  →  class="uv-author-bio"
   ============================================================ */
.uv-author-bio {
  background: var(--uv-parchment);
  border-radius: 12px;
  padding: 2rem 2.2rem;
  margin: 2.5rem 0;
  font-family: 'DM Sans', sans-serif;
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.uv-author-bio img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--uv-gold);
  flex-shrink: 0;
}

.uv-author-bio .uv-author-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  color: var(--uv-ink);
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.uv-author-bio .uv-author-text {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--uv-ink);
  margin: 0;
}

/* ============================================================
   8. CLOSING STATEMENT  →  class="uv-closing"
   ============================================================ */
.uv-closing {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--uv-ink);
  font-weight: 600;
  margin-top: 1.5rem;
  font-family: 'DM Sans', sans-serif;
}

/* ============================================================
   9. MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .uv-hero { padding: 1.6rem 1.2rem; }
  .uv-hero .uv-opening-quote { font-size: 1.25rem; }
  .uv-section h2 { font-size: 1.6rem; }
  .uv-pullquote .uv-quote-text { font-size: 1.25rem; }
  .uv-practice { padding: 1.4rem 1.2rem; }
  .uv-cta { padding: 1.6rem 1.2rem; }
  .uv-cta-buttons { flex-direction: column; align-items: center; }
  .uv-btn-primary,
  .uv-btn-secondary { width: 100%; text-align: center; }
  .uv-author-bio { flex-direction: column; }
}
/* Fix: Jetpack Likes widget z-index - prevents overlay intercepting clicks on share buttons and article links */
#likes-other-gravatars {
    z-index: 99 !important;
}

/* Fix: Elementor sticky header z-index - prevents header intercepting blog navigation clicks */
.elementor-element-68bb41b {
    z-index: 200 !important;
}

/* Fix: Ensure share buttons are always clickable above any overlay */
.jetpack-sharing-buttons__services-list {
    position: relative;
    z-index: 10;
}

#likes-other-gravatars {
    z-index: 99 !important;
}

.elementor-element-68bb41b {
    z-index: 200 !important;
}

.jetpack-sharing-buttons__services-list {
    position: relative;
    z-index: 10;
}