/* ─── GardenDecoded theme ──────────────────────────────────────────────
   A fresh garden palette layered over Bootstrap 5. Bootstrap's own custom
   properties are overridden at :root so btn-primary, text-primary, links and
   focus rings all pick up the theme without a Sass build.               */

:root {
  --gd-green-900: #0f2e20;
  --gd-green-800: #143d2b;
  --gd-green-700: #1c5238;
  --gd-green-600: #2e6b40;
  --gd-green-500: #3f8b52;
  --gd-leaf:      #7cb342;
  --gd-leaf-soft: #c8e6a0;
  --gd-cream:     #fbfaf5;
  --gd-sand:      #f2efe4;
  --gd-bark:      #6b5b4a;
  --gd-bloom:     #c2185b;
  --gd-sky:       #4a90a4;
  /* Accent for interactive chips on dark backgrounds. Deliberately warm —
     it separates them from the green surface instead of blending in. */
  --gd-amber:       #f4c430;
  --gd-amber-light: #ffd75e;

  --gd-ink:        #1f2a24;
  --gd-ink-soft:   #55635b;
  --gd-line:       #dfe4da;
  --gd-surface:    #ffffff;
  --gd-surface-2:  var(--gd-cream);

  /* Bootstrap overrides */
  --bs-primary:      var(--gd-green-600);
  --bs-primary-rgb:  46, 107, 64;
  --bs-link-color:   var(--gd-green-700);
  --bs-link-hover-color: var(--gd-green-500);
  --bs-body-color:   var(--gd-ink);
  --bs-body-bg:      var(--gd-cream);
  --bs-border-color: var(--gd-line);
  --bs-font-sans-serif: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
}

body {
  background: var(--gd-cream);
  color: var(--gd-ink);
  font-family: var(--bs-font-sans-serif);
  font-size: 1.02rem;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, .gd-display {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  color: var(--gd-green-800);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); line-height: 1.15; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); }

a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ─── Dark surfaces: text must lighten with the background ─────────── */
/* background-color is set as well as the gradient on purpose. A gradient is
   a background-*image*, so if it fails to paint — forced-colors mode, a
   print stylesheet, an extension blocking background images — the colour
   keeps the surface dark and the light text below stays readable. */
.gd-dark,
.gd-hero,
.gd-footer,
.navbar.gd-nav {
  background-color: var(--gd-green-800);
  background-image: linear-gradient(160deg, var(--gd-green-900) 0%, var(--gd-green-700) 100%);
  color: #eef3ea;
}
.gd-dark h1, .gd-dark h2, .gd-dark h3, .gd-dark h4,
.gd-hero h1, .gd-hero h2, .gd-hero h3,
.gd-footer h1, .gd-footer h2, .gd-footer h3, .gd-footer h4 {
  color: #ffffff;
}
.gd-dark p, .gd-hero p, .gd-footer p,
.gd-dark li, .gd-footer li { color: #d6e2d2; }
.gd-dark .text-muted, .gd-footer .text-muted { color: #a9bcaa !important; }

/* ─── Link colour on dark surfaces ─────────────────────────────────────
   Set through a custom property, NOT a descendant selector.

   `.gd-hero a` has specificity 0-1-1 and beats `.gd-pill` at 0-1-0, so it
   silently repainted every component that happened to sit inside the hero:
   the popular-search pills and the search autocomplete both ended up with
   light-green text on a pale background (1.2:1 — invisible).

   Consuming the property from a bare `a` rule (0-0-1) inverts that. Any
   component with its own colour now wins automatically, and plain prose links
   still pick up the light colour they need. Do not turn this back into a
   descendant selector. */
:root { --gd-link: var(--bs-link-color); --gd-link-hover: var(--bs-link-hover-color); }
.gd-dark, .gd-hero, .gd-footer, .navbar.gd-nav {
  --gd-link: var(--gd-leaf-soft);
  --gd-link-hover: #ffffff;
}
a { color: var(--gd-link); }
a:hover { color: var(--gd-link-hover); }

/* ─── Header ──────────────────────────────────────────────────────── */
.navbar.gd-nav { border-bottom: 3px solid var(--gd-leaf); }
.navbar.gd-nav .navbar-brand {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.navbar.gd-nav .navbar-brand img { width: 34px; height: 34px; border-radius: 8px; }
.navbar.gd-nav .nav-link { color: #d6e2d2; font-weight: 500; }
.navbar.gd-nav .nav-link:hover,
.navbar.gd-nav .nav-link.active { color: #ffffff; }
.navbar.gd-nav .nav-link.active { box-shadow: inset 0 -2px 0 var(--gd-leaf); }
.navbar.gd-nav .navbar-toggler {
  border-color: rgba(255,255,255,.35);
}
.navbar.gd-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ─── Hero ────────────────────────────────────────────────────────── */
.gd-hero {
  padding: clamp(2.5rem, 1rem + 6vw, 5rem) 0 clamp(3.5rem, 2rem + 7vw, 6.5rem);
  position: relative;
  overflow: hidden;
  /* Drawn garden border, layered over the gradient. It is an SVG (~4.5 KB
     gzipped) rather than a photograph so it needs no licence or on-page credit
     — the same standard the plant photographs are held to — and it stays sharp
     at any width. The solid background-color underneath is the fallback if the
     images never paint; see the note on dark surfaces above. */
  background-image:
    url('../img/hero-garden.svg'),
    linear-gradient(160deg, var(--gd-green-900) 0%, var(--gd-green-700) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center bottom, center center;
}
.gd-hero .container { position: relative; z-index: 1; }
.gd-hero .lead { color: #cfe0ca; font-size: 1.15rem; max-width: 42rem; }

/* The planting is decoration. Anyone who has asked for less motion or simpler
   surfaces gets the plain gradient. */
@media (prefers-reduced-motion: reduce) {
  .gd-hero { background-image: linear-gradient(160deg, var(--gd-green-900) 0%, var(--gd-green-700) 100%); }
}

/* ─── Search ──────────────────────────────────────────────────────── */
.gd-search { position: relative; max-width: 44rem; }
.gd-search .form-control {
  border: 0;
  border-radius: 999px;
  padding: .95rem 1.4rem;
  font-size: 1.05rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.gd-search .form-control:focus {
  box-shadow: 0 6px 24px rgba(0,0,0,.18), 0 0 0 .25rem rgba(124,179,66,.45);
}
.gd-search .btn {
  border-radius: 999px;
  padding: .95rem 1.7rem;
  font-weight: 600;
}

/* Autocomplete dropdown */
.gd-suggest {
  position: absolute;
  z-index: 1050;
  top: calc(100% + .4rem);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--gd-line);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15,46,32,.18);
  overflow: hidden;
  display: none;
}
.gd-suggest.show { display: block; }
.gd-suggest-item {
  display: block;
  padding: .6rem 1rem;
  color: var(--gd-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gd-sand);
}
.gd-suggest-item:last-child { border-bottom: 0; }
.gd-suggest-item:hover,
.gd-suggest-item.active { background: var(--gd-sand); color: var(--gd-green-800); }
.gd-suggest-item .sci { font-style: italic; font-weight: 600; }
.gd-suggest-item .meta { font-size: .85rem; color: var(--gd-ink-soft); }

/* ─── Cards ───────────────────────────────────────────────────────── */
.gd-card {
  background: var(--gd-surface);
  border: 1px solid var(--gd-line);
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.gd-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(15,46,32,.12);
}
.gd-card a.stretched-link { color: inherit; text-decoration: none; }
.gd-card-media {
  aspect-ratio: 4 / 3;
  background: var(--gd-sand);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.gd-card-media img { width: 100%; height: 100%; object-fit: cover; }
.gd-card-media .bi { font-size: 2.4rem; color: #b9c7ab; }
.gd-card-body { padding: .9rem 1rem 1.1rem; }
.gd-card .sci { font-style: italic; font-weight: 600; color: var(--gd-green-800); }
.gd-card .meta { font-size: .85rem; color: var(--gd-ink-soft); }

/* ─── Plant detail ────────────────────────────────────────────────── */
.gd-figure {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--gd-line);
  background: var(--gd-sand);
}
.gd-figure img { width: 100%; display: block; }
.gd-figure figcaption {
  font-size: .8rem;
  color: var(--gd-ink-soft);
  padding: .5rem .75rem;
  background: var(--gd-surface);
  border-top: 1px solid var(--gd-line);
}
.gd-figure figcaption a { color: var(--gd-green-700); }

.gd-thumbs { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.gd-thumbs img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 10px; border: 2px solid transparent; cursor: pointer;
}
.gd-thumbs img.active,
.gd-thumbs img:hover { border-color: var(--gd-leaf); }

.gd-facts {
  background: var(--gd-surface);
  border: 1px solid var(--gd-line);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
}
.gd-facts dt {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gd-ink-soft);
  font-weight: 600;
}
.gd-facts dd { margin-bottom: .85rem; color: var(--gd-ink); }
.gd-facts dd:last-child { margin-bottom: 0; }

.gd-section { margin-top: 2.2rem; }
.gd-section > h2 {
  display: flex; align-items: center; gap: .55rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--gd-sand);
  margin-bottom: 1rem;
}
.gd-section > h2 .bi { color: var(--gd-leaf); }

.gd-list { padding-left: 1.15rem; }
.gd-list li { margin-bottom: .35rem; }

.gd-pill {
  display: inline-block;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: var(--gd-sand);
  color: var(--gd-green-800);
  font-size: .85rem;
  font-weight: 600;
  margin: 0 .3rem .3rem 0;
  text-decoration: none;
}
a.gd-pill:hover { background: var(--gd-leaf-soft); color: var(--gd-green-900); }
.gd-pill-syn { font-style: italic; font-weight: 500; }

/* On a dark surface the neutral sand pill reads as washed out, so the hero and
   any other dark section use amber. Against deep green it carries a clear
   "press me" signal, and near-black text on it measures about 9:1. */
.gd-hero .gd-pill,
.gd-dark .gd-pill {
  background: var(--gd-amber);
  color: var(--gd-green-900);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.gd-hero a.gd-pill:hover,
.gd-dark a.gd-pill:hover {
  background: var(--gd-amber-light);
  color: var(--gd-green-900);
}
.gd-hero a.gd-pill:focus-visible,
.gd-dark a.gd-pill:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Care guidance not yet written — honest empty state, not a fake value. */
.gd-empty {
  background: var(--gd-sand);
  border: 1px dashed #c8d2c0;
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  color: var(--gd-ink-soft);
}

.gd-source-note {
  font-size: .85rem;
  color: var(--gd-ink-soft);
  border-left: 3px solid var(--gd-leaf-soft);
  padding-left: .85rem;
}

/* ─── Ad zones ────────────────────────────────────────────────────── */
.gd-layout { margin: 0; }
.gd-rail { width: auto; }
.gd-ad-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0;
}
.gd-ad-zone-top, .gd-ad-zone-bottom { align-items: center; }
.gd-ad { margin: 0 auto; }
.gd-ad-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #9aa79b;
  text-align: center;
  margin-bottom: .2rem;
}
.gd-ad-body { overflow: hidden; margin: 0 auto; }
.gd-ad-placeholder {
  border: 1px dashed #c3cfbc;
  border-radius: 10px;
  background: repeating-linear-gradient(45deg, #f6f4ea, #f6f4ea 10px, #f1eee2 10px, #f1eee2 20px);
  color: #8c9a8b;
  margin: 0 auto;
  gap: .15rem;
}
@media (max-width: 991.98px) {
  /* Sidebar rails stack under the content on narrow screens. */
  .gd-rail { width: 100%; }
}

/* ─── Footer ──────────────────────────────────────────────────────── */
.gd-footer {
  margin-top: 3rem;
  padding: 2rem 0 1.5rem;
  border-top: 3px solid var(--gd-leaf);
}
.gd-footer a { text-decoration: none; }
.gd-footer a:hover { text-decoration: underline; }
.gd-social-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  color: #d6e2d2;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gd-social-icon:hover, .gd-social-icon:focus {
  background: var(--gd-leaf);
  border-color: var(--gd-leaf);
  color: #ffffff;
}

/* ─── Admin tweaks ────────────────────────────────────────────────── */
.gd-admin-sidebar {
  background: var(--gd-green-900);
  min-height: 100vh;
}
.gd-admin-sidebar .nav-link { color: #c3d2c1; border-radius: 8px; padding: .45rem .75rem; }
.gd-admin-sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.gd-admin-sidebar .nav-link.active { background: var(--gd-green-600); color: #fff; }
.gd-admin-sidebar .gd-nav-group {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: #7e9280; margin: 1rem 0 .35rem .75rem;
}

.gd-paper {
  background: var(--gd-surface);
  border: 1px solid var(--gd-line);
  border-radius: 14px;
  padding: 1.1rem;
}

/* Drag-and-drop ad placement board.
   .gd-dz is a drop zone; .gd-ad-chip is a draggable ad unit. */
.gd-dz {
  background: rgba(255, 255, 255, .65);
  border: 2px dashed #c3cfbc;
  border-radius: 12px;
  padding: .7rem;
  min-height: 84px;
  transition: border-color .12s ease, background .12s ease;
}
.gd-dz-over   { border-color: var(--gd-leaf); background: #eef7e2; }
.gd-dz-reject { border-color: #d9534f; background: #fdeeee; }

.gd-ad-chip {
  background: #fff;
  border: 1px solid var(--gd-line);
  border-radius: 10px;
  padding: .45rem .6rem;
  margin-bottom: .5rem;
  cursor: grab;
  font-size: .9rem;
  box-shadow: 0 1px 2px rgba(15, 46, 32, .06);
}
.gd-ad-chip:last-child { margin-bottom: 0; }
.gd-ad-chip:active { cursor: grabbing; }
.gd-ad-chip.dragging { opacity: .45; }
.gd-chip-size {
  font-size: .75rem;
  color: var(--gd-ink-soft);
  background: var(--gd-sand);
  border-radius: 999px;
  padding: .05rem .5rem;
  white-space: nowrap;
}

@media print {
  .navbar, .gd-footer, .gd-ad-zone, .gd-rail { display: none !important; }
}

/* ─── Editorial articles ──────────────────────────────────────────── */
.gd-article { max-width: 46rem; }
.gd-byline { font-size: .9rem; }
.gd-article-body { font-size: 1.04rem; line-height: 1.7; }
.gd-article-body p.lead {
  font-size: 1.15rem;
  color: var(--gd-ink-soft);
}
.gd-article-body h2 {
  font-size: 1.45rem;
  margin-top: 2rem;
  margin-bottom: .75rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--gd-sand);
  color: var(--gd-green-800);
}
.gd-article-body h3 {
  font-size: 1.15rem;
  margin-top: 1.4rem;
  margin-bottom: .5rem;
  color: var(--gd-green-700);
}
.gd-article-body ul, .gd-article-body ol { padding-left: 1.25rem; }
.gd-article-body li { margin-bottom: .4rem; }
.gd-article-body table { margin: 1rem 0; }

/* ─── About page: personal photo ──────────────────────────────────── */
.gd-about-photo {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--gd-sand);
  box-shadow: 0 2px 10px rgba(15, 46, 32, .12);
}
@media (max-width: 575px) {
  .gd-about-photo { width: 130px; height: 130px; }
}

/* ─── About page: the "About me" panel ──────────────────────────────
 * Lighter than the page background with a 2px rounded border and a soft
 * inset shadow, so the personal introduction sits in its own gently
 * debossed panel. */
.gd-about-bio {
  background: #fffefb;
  border: 2px solid #d3decb;
  border-radius: 5px;
  padding: 1.4rem 1.6rem;
  box-shadow: inset 0 2px 6px rgba(15, 46, 32, .07),
              inset 0 1px 2px rgba(15, 46, 32, .05);
}
.gd-about-bio > :last-child { margin-bottom: 0; }

/* ─── Debossed admin editor field (About yourself) ──────────────────
 * Near-white so it stands apart from the page and card backgrounds, with a
 * 2px rounded border and an inset shadow for the pressed-in look. */
.gd-deboss {
  background: #fefefc;
  border: 2px solid #cfd9c9;
  border-radius: 12px;
  box-shadow: inset 0 2px 5px rgba(15, 46, 32, .08),
              inset 0 1px 2px rgba(15, 46, 32, .06);
}
.gd-deboss:focus {
  background: #ffffff;
  border-color: var(--gd-leaf);
  box-shadow: inset 0 2px 4px rgba(15, 46, 32, .06),
              0 0 0 .25rem rgba(124, 179, 66, .15);
}