/* Shared look for the main pelekanos.org pages (/, /data, /support, /delete-account, /privacy, /terms).
   /beta, /agora and the app bounce pages (auth/, events/, ngos/, actions/) keep their own styles. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#fefbeb; color:#1a2a27; line-height:1.65;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:#00695c; overflow-wrap:anywhere}
:focus-visible{outline:3px solid #f2b705; outline-offset:2px; border-radius:4px}

/* ── One language at a time (site.js sets data-show). Without JavaScript both languages show. ── */
html[data-show="el"] body [lang="en"],
html[data-show="en"] body [lang="el"]{display:none !important}
html:not([data-show]) .both > [lang="en"]::before{content:" / "}
html:not([data-show]) article[lang="en"]{border-top:3px solid #00695c; margin-top:40px; padding-top:8px}

/* ── Header + menu ── */
.site-head{background:#00695c; color:#fff}
.site-head .inner{
  max-width:980px; margin:0 auto;
  padding:calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
  display:flex; flex-wrap:wrap; align-items:center; gap:0 8px;
}
.brand{flex:1 1 auto; display:flex; align-items:center; gap:10px; min-height:48px;
       color:#fff; text-decoration:none; font-weight:700; font-size:19px; letter-spacing:.2px}
.brand img{width:32px; height:auto; display:block}
.langs{order:2; display:flex; border:1px solid rgba(255,255,255,.6); border-radius:999px; overflow:hidden}
.langs button{appearance:none; -webkit-appearance:none; background:transparent; color:#fff; border:0; cursor:pointer;
              font:inherit; font-size:14px; font-weight:600; padding:0 14px; min-height:44px; min-width:48px}
html[data-show="el"] .langs [data-set-lang="el"],
html[data-show="en"] .langs [data-set-lang="en"]{background:#fff; color:#00695c}
html:not([data-show]) .langs{display:none}
.menu{order:3; flex:1 0 100%; display:flex; flex-wrap:wrap; gap:0 2px; margin:0 -10px}
.menu a{color:#fff; text-decoration:none; font-size:15px; padding:11px 10px; opacity:.85; border-radius:8px}
.menu a:hover{opacity:1; background:rgba(255,255,255,.1)}
.menu a[aria-current="page"]{opacity:1; font-weight:700; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px}
@media (min-width:760px){
  .menu{order:2; flex:0 1 auto; margin:0 8px 0 0}
  .langs{order:3}
  .site-head .inner{padding-bottom:8px}
}

/* ── Page title band ── */
.page-title{background:#00695c; color:#fff; text-align:center; padding:26px 20px 34px;
            border-top:1px solid rgba(255,255,255,.14)}
.page-title h1{margin:0; font-size:28px; line-height:1.25; letter-spacing:.2px}
.page-title p{margin:10px 0 0; opacity:.9; font-size:15px}

/* ── Homepage hero ── */
.hero{background:#00695c; color:#fff; text-align:center; padding:30px 20px 44px;
      border-top:1px solid rgba(255,255,255,.14)}
.hero img{width:104px; max-width:36vw; height:auto; display:block; margin:0 auto 16px}
.hero h1{margin:0; font-size:34px; letter-spacing:.2px}
.hero .tagline{margin:4px 0 0; font-size:18px; opacity:.92}
.hero .intro{margin:18px auto 0; max-width:560px; font-size:17px; opacity:.95}
.hero .soon{display:inline-block; margin:22px 0 0; padding:6px 14px; border-radius:14px;
            background:rgba(255,255,255,.14); font-size:14px}

/* ── Content ── */
main{max-width:780px; margin:0 auto; padding:32px 16px 64px}
h2{color:#00695c; font-size:21px; margin:36px 0 10px}
h3{font-size:17px; margin:22px 0 6px}
article > :first-child, .card > :first-child{margin-top:0}
p,li{font-size:16px}
ul,ol{padding-left:22px}
li{margin:6px 0}
.lead{font-size:18px}
.muted{color:#5b6b66; font-size:14px}
.note{background:#fff4d6; border-left:4px solid #c9a227; border-radius:8px; padding:10px 14px; font-size:15px}
.card{background:#fff; border:1px solid #e6dfc4; border-radius:12px; padding:16px 18px; margin:14px 0}
.card h2{margin:0 0 6px; font-size:19px}
.cols{display:grid; gap:14px; margin:20px 0 8px}
.cols .card{margin:0}
@media (min-width:720px){ .cols{grid-template-columns:1fr 1fr} }
.contact{font-size:18px; line-height:1.9; margin:0}
table{border-collapse:collapse; width:100%; margin:14px 0; font-size:15px}
th,td{border:1px solid #d8d2bc; padding:8px 10px; text-align:left; vertical-align:top}
th{background:#eee6c8}
code{background:#eee6c8; padding:1px 5px; border-radius:4px; font-size:14px}

/* ── Footer ── */
.site-foot{background:#f5efd6; border-top:1px solid #d8d2bc}
.site-foot .inner{max-width:780px; margin:0 auto; padding:22px 16px calc(28px + env(safe-area-inset-bottom))}
.site-foot nav{display:flex; flex-wrap:wrap; gap:4px 18px; margin:0 0 10px}
.site-foot nav a{font-size:15px; padding:10px 0; display:inline-block}
.site-foot nav a[aria-current="page"]{font-weight:700}
.site-foot p{margin:0; color:#5b6b66; font-size:13px}