/* topografos.gr — front-end component styles
   Uses theme.json preset variables (--wp--preset--color--*, --wp--preset--font-family--*).
   Visual phase only; interactive marketplace components are wired in a later phase. */

:root{
  --tg-primary:var(--wp--preset--color--primary,#0E7A5F);
  --tg-dark:var(--wp--preset--color--dark,#09523F);
  --tg-accent:var(--wp--preset--color--accent,#E8A33D);
  --tg-light:var(--wp--preset--color--light,#E2EFEC);
  --tg-muted:var(--wp--preset--color--muted,#5B6B7A);
  --tg-head:var(--wp--preset--font-family--heading, "Poppins", system-ui, sans-serif);
}

/* small uppercase eyebrow label above section titles */
.tg-eyebrow{display:block;text-align:center;font-family:var(--tg-head);font-weight:700;
  font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--tg-accent);margin-bottom:6px}

/* ---- Header CTA + nav ---- */
.tg-headerbar{gap:18px}
.wp-block-navigation .wp-block-navigation-item__content{font-family:var(--tg-head);font-weight:500;color:var(--tg-dark)}
.tg-cta a, a.tg-cta{background:var(--tg-accent)!important;color:#16241E!important;font-family:var(--tg-head);
  font-weight:700;padding:.62em 1.4em;border-radius:26px;text-decoration:none;display:inline-block}
.tg-cta a:hover, a.tg-cta:hover{filter:brightness(.96)}

/* ---- Hero search ---- */
.tg-search{display:flex;gap:8px;background:#fff;border-radius:16px;padding:10px;max-width:680px;
  margin:22px auto 0;box-shadow:0 18px 50px rgba(9,82,63,.28);flex-wrap:wrap}
.tg-search .f{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;background:#f4f7f6;
  border-radius:11px;padding:10px 14px}
.tg-search .f svg{width:18px;height:18px;color:var(--tg-primary);flex-shrink:0}
.tg-search input{border:0;background:transparent;width:100%;font-size:15px;color:#16241E;outline:none}
.tg-search button{border:0;background:var(--tg-primary);color:#fff;font-family:var(--tg-head);font-weight:700;
  font-size:15px;padding:0 22px;border-radius:11px;cursor:pointer}
.tg-search button:hover{background:var(--tg-dark)}
.tg-hero-note{color:rgba(255,255,255,.8);font-size:13px;text-align:center;margin-top:12px}

/* ---- Trust stats ---- */
.tg-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:1000px;margin:0 auto}
.tg-stat{flex:1;min-width:150px;text-align:center;padding:20px 14px;background:#fff;border:1px solid #e9eef0;border-radius:14px}
.tg-stat b{display:block;font-family:var(--tg-head);font-weight:800;font-size:30px;color:var(--tg-primary);line-height:1}
.tg-stat span{display:block;font-size:13.5px;color:var(--tg-muted);margin-top:6px}

/* ---- Category cards ---- */
.tg-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1100px;margin:0 auto}
.tg-cat{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #e7edf0;border-radius:14px;
  padding:20px 18px;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.tg-cat:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(9,82,63,.12);border-color:#d4e6e0}
.tg-cat .ic{width:46px;height:46px;border-radius:11px;background:var(--tg-light);display:flex;align-items:center;justify-content:center}
.tg-cat .ic svg{width:24px;height:24px;stroke:var(--tg-primary);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tg-cat h3{font-family:var(--tg-head);font-size:15px;font-weight:700;color:var(--tg-dark);margin:0}
.tg-cat p{font-size:12.5px;color:var(--tg-muted);margin:0}

/* ---- How it works steps ---- */
.tg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1000px;margin:0 auto}
.tg-step{text-align:center;padding:8px}
.tg-step .n{width:52px;height:52px;border-radius:50%;background:var(--tg-primary);color:#fff;font-family:var(--tg-head);
  font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.tg-step h3{font-family:var(--tg-head);font-size:17px;font-weight:700;color:var(--tg-dark);margin:0 0 6px}
.tg-step p{font-size:14px;color:var(--tg-muted);margin:0}

/* ---- Testimonials ---- */
.tg-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1100px;margin:0 auto}
.tg-quote{background:#fff;border:1px solid #e7edf0;border-radius:14px;padding:22px}
.tg-quote .stars{color:var(--tg-accent);font-size:15px;letter-spacing:2px}
.tg-quote p{font-size:14px;color:#33404f;margin:10px 0 14px}
.tg-quote .who{font-family:var(--tg-head);font-weight:700;font-size:13.5px;color:var(--tg-dark)}
.tg-quote .who span{display:block;font-weight:400;font-size:12px;color:var(--tg-muted)}

/* ---- Guarantee band items ---- */
.tg-guar{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;max-width:1000px;margin:18px auto 0}
.tg-guar div{display:flex;align-items:center;gap:10px;font-weight:600;color:#fff;font-family:var(--tg-head);font-size:14.5px}
.tg-guar svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- Feature (image + text) ---- */
.tg-feature{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;max-width:1100px;margin:0 auto}
.tg-feature .img{width:100%;border-radius:16px;display:block;box-shadow:0 18px 40px rgba(9,82,63,.16);aspect-ratio:4/3;object-fit:cover}
.tg-feature .tg-eyebrow{text-align:left}
.tg-feature h2{text-align:left;margin:0 0 10px}
.tg-feature .pts{list-style:none;padding:0;margin:14px 0 20px}
.tg-feature .pts li{display:flex;gap:11px;align-items:flex-start;margin:11px 0;font-size:15px;color:#33404f}
.tg-feature .pts svg{width:22px;height:22px;flex:0 0 22px;stroke:var(--tg-primary);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.tg-feature .btn-link{display:inline-block;font-family:var(--tg-head);font-weight:700;color:#fff;background:var(--tg-primary);padding:.66em 1.5em;border-radius:26px;text-decoration:none}
.tg-feature .btn-link:hover{background:var(--tg-dark)}

/* responsive */
@media(max-width:900px){.tg-cats{grid-template-columns:repeat(2,1fr)}.tg-steps{grid-template-columns:1fr}.tg-quotes{grid-template-columns:1fr}.tg-feature{grid-template-columns:1fr;gap:22px}}
@media(max-width:520px){.tg-cats{grid-template-columns:1fr}.tg-search{flex-direction:column}.tg-search button{padding:12px}}