/* _theme.css — tokens & header/background για prod look */
:root{
  --kp-ambient: #efe7c5;          /* background όπως στο prod */
  --kp-surface: #ffffff;
  --kp-text: #0f172a;
  --kp-muted: #6b7280;
  --kp-border: #e5e7eb;
  --kp-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.08);

  /* ίδιο πλάτος header + grid */
  --kp-container: 1200px;
  --kp-space: 1.25rem;

  /* pills/buttons */
  --kp-pill-bg: #fff;
  --kp-pill-text: #111827;
  --kp-pill-border: #d1d5db;
  --kp-pill-bg-active: #111827;
  --kp-pill-text-active: #fff;
}

html, body { background: var(--kp-ambient); color: var(--kp-text); }

.container{ max-width: var(--kp-container); margin:0 auto; padding:var(--kp-space); }

/* Header hero */
.site-header .hero {
  background: linear-gradient(180deg, #fbfaf4 0%, #f6edc7 100%);
  border: 1px solid var(--kp-border);
  border-radius: 16px;
  box-shadow: var(--kp-shadow);
  padding: 2rem;
}

/* Header nav as pills */
.nav-pills { display:flex; gap:.5rem; flex-wrap:wrap; }
.nav-pills a{
  display:inline-block; padding:.5rem .9rem; border-radius:999px;
  background: var(--kp-pill-bg); color: var(--kp-pill-text);
  border:1px solid var(--kp-pill-border); text-decoration:none; font-weight:600;
}
.nav-pills a:is(:hover,:focus){ filter: brightness(.98); text-decoration:none; }

/* Make wa-page fully transparent so φαίνεται το ambient background */
wa-page { background: transparent !important; }

/* Πιάνουμε και τα shadow parts για σιγουριά */
wa-page::part(page),
wa-page::part(main),
wa-page::part(container) {
  background: transparent !important;
}
header { background: transparent !important; }
footer { background: transparent !important; }

/* Make the hero card match grid width exactly */
.site-header .container {
  max-width: 1200px;      /* ίδιο με το grid */
  padding-left: 0;        /* αφαιρεί padding του .p-4 από wa-page slot */
  padding-right: 0;
}

.site-header .hero {
  margin: 0 auto;         /* κεντραρισμένο */
  max-width: 100%;        /* να μη μικραίνει */
}
@media (min-width: 1024px) {
  .site-header .hero {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
/* ----- Make header exactly same width as the grid ----- */
.site-header { 
  padding: 0 !important;              /* ακυρώνει τα p-4/md:p-8 */
}

.site-header > .container {
  max-width: 1200px;                  /* ίδιο με το grid */
  padding-left: var(--kp-space);      /* ίδιο εσωτερικό padding με το grid */
  padding-right: var(--kp-space);
  margin-left: auto;
  margin-right: auto;
}

.site-header .hero {
  margin: 0;                          /* μην προσθέτει extra κενά */
  max-width: 100%;
}
/* Hero spacing & perfect align with grid */
.site-header { margin: 0 0 1.25rem 0; }
.site-header .hero { border-radius:16px; box-shadow: var(--kp-shadow); }