/* ===== EcoGreenCover — Planting / Single Place styles =====
   Drop into your child theme custom.css or Appearance → Additional CSS
   Palette inspired by eco/green: deep-green, mid-green, soft-green, warm-beige, neutral greys.
   Feel free to replace the hexes with exact site colors if you share them.
*/

/* Color palette (change to match your brand exactly if needed) */
:root{
  --eco-deep: #1e5f3a;     /* deep green for headings, buttons */
  --eco-mid:  #2f8a4a;     /* primary green accent */
  --eco-soft: #eaf6ec;     /* soft background green */
  --eco-accent:#7cc36a;    /* lighter accent */
  --eco-warm: #f6f7f3;     /* warm paper background */
  --muted:    #6b6b6b;     /* muted text */
  --dark:     #16221a;     /* near-black for strong text */
  --card-shadow: 0 8px 24px rgba(18, 37, 21, 0.08);
  --card-border: 1px solid rgba(20, 60, 30, 0.06);
  --radius:   12px;
  --max-width: 980px;
  --gutter: 18px;
  --accent-cta: #ffb84d;   /* optional warm accent for CTA */
}

/* Page container / main content */
.site-main, .content-area, main#primary {
  max-width: var(--max-width);
  margin: 36px auto;
  padding: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), var(--eco-warm));
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  font-family: "Inter", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--dark);
}

/* Header of the single planting */
.entry-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.entry-header .entry-title {
  font-size: 1.9rem;
  line-height: 1.12;
  margin: 0;
  color: var(--eco-deep);
  font-weight: 700;
  letter-spacing: -0.4px;
}
.entry-header .byline {
  color: var(--muted);
  font-size: 0.92rem;
}

/* Content / two-column layout for image + details */
.entry-content {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}

/* Left column: description */
.entry-content .post-content-description {
  font-size: 1rem;
  color: #243627;
  line-height: 1.6;
}

/* Right column: the details card */
.planting-details-card {
  background: white;
  border-radius: var(--radius);
  padding: 18px;
  border: var(--card-border);
  box-shadow: 0 6px 20px rgba(20, 60, 30, 0.04);
  position: sticky;
  top: 26px;
}

/* Planting details title */
.planting-details-card h3 {
  margin: 0 0 12px 0;
  color: var(--eco-mid);
  font-size: 1.05rem;
}

/* Details list style */
.planting-details-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.planting-details-card li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(34, 102, 58, 0.04);
}
.planting-details-card li:last-child { border-bottom: none; }

.planting-details-card li strong {
  display: inline-block;
  width: 110px;
  color: var(--eco-deep);
  font-weight: 600;
  font-size: 0.95rem;
}

/* Coordinates, small text */
.planting-details-card .coords {
  font-size: 0.88rem;
  color: var(--muted);
}

/* Photo styling */
.planting-photo {
  margin-top: 12px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(30,80,40,0.06);
}
.planting-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2,.9,.3,1), box-shadow .25s;
}
.planting-photo img:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 30px rgba(20,80,40,0.1);
}

/* Status badge */
.status-badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  background: var(--eco-mid);
  box-shadow: 0 6px 18px rgba(47, 138, 74, 0.12);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* CTA buttons */
.button, .btn, .wp-block-button__link, .btn-cta {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--eco-mid), var(--eco-deep));
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(22,60,30,0.12);
  transition: transform .18s ease, box-shadow .18s;
}
.button:hover, .btn:hover, .btn-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(22,60,30,0.14);
}

/* Secondary button variant */
.btn-outline {
  background: transparent;
  border: 2px solid rgba(47,138,74,0.12);
  color: var(--eco-deep);
  font-weight: 700;
}

/* Map container */
.map-embed, .planting-map {
  height: 240px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(20,60,30,0.06);
  margin-top: 12px;
}

/* Responsive adjustments */
@media (max-width: 980px) {
  .site-main { padding: 20px; margin: 20px; }
  .entry-content { grid-template-columns: 1fr; }
  .planting-details-card { position: relative; top: auto; margin-top: 16px; }
}

/* Small utility tweaks */
.kv {
  display:flex;
  gap:10px;
  align-items:center;
}
.small-muted {
  color: var(--muted);
  font-size: 0.88rem;
}
.card-row {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}

/* Certificate look (downloadable view) */
.certificate {
  max-width: 820px;
  margin: 18px auto;
  padding: 28px;
  background: linear-gradient(180deg,#fff,#fbfff7);
  border-radius: 14px;
  border: 1px solid rgba(30,80,40,0.06);
  box-shadow: 0 18px 40px rgba(20,60,30,0.06);
  text-align: center;
}
.certificate h2 { color: var(--eco-deep); margin-bottom: 6px; }
.certificate p { color: var(--muted); line-height:1.6; }

/* Accessibility focus states */
a:focus, button:focus, .btn:focus {
  outline: 3px solid rgba(47,138,74,0.14);
  outline-offset: 3px;
}

/* Tiny: improve image loading appearance */
img { transition: opacity .32s ease; opacity: 1; }




/* === RTL Adjustments === */
html[dir="rtl"], body[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

.entry-content,
.site-main,
.content-area,
.planting-details-card {
  text-align: right;
}

.entry-content ul,
.planting-details-card ul {
  padding-right: 0;
}

.planting-details-card li {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.planting-details-card li strong {
  text-align: left;
}

.place-link,
a {
  direction: rtl;
}



/* === Merge: Responsive & extra tweaks from plugin CSS === */

/* Body font & background for single planting/places pages */
body.single-planting,
body.single-places {
    background-color: #f9faf9; /* soft warm background */
    font-family: "Poppins", sans-serif; /* optional fallback for Arabic, keep Inter/Tajawal already in custom.css */
    color: #333;
}

/* Small responsive adjustments */
@media (max-width: 768px) {
    .site-main {
        padding: 20px;
        margin: 20px; /* ensures spacing on mobile */
    }

    .entry-title {
        font-size: 1.6rem; /* slightly smaller on mobile */
    }

    .entry-content {
        grid-template-columns: 1fr !important; /* override two-column layout on small screens */
    }

    .planting-details-card {
        position: relative !important; /* remove sticky effect on mobile */
        top: auto !important;
        margin-top: 16px;
    }
}

/* Small improvements for Planting / Place list items */
.plant-details li,
.place-details li {
    list-style: none;
    padding: 10px 0;
    border-bottom: 1px solid #eaeaea;
}

.plant-details li strong,
.place-details li strong {
    color: #205c36; /* matches eco green palette */
    font-weight: 600;
}

/* Linked Place button styling (already matches design, just reinforce) */
.place-link {
    display: inline-block;
    background: #3d9155;
    color: #fff !important;
    padding: 8px 18px;
    border-radius: 25px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s ease;
}

.place-link:hover {
    background: #2d7141;
}


/* End of theme styles */