/* ==========================================================================
   Treva — styles.css (no-Bootstrap, all-in-one)
   Version: 2.0 (2025-10-04)
   Notes:
     - Містить усі утиліти та сітку; окремий adapter не потрібен.
     - Узгоджено з оновленими header.php, index.php, footer.php.
   ========================================================================== */

/* ------------------------------ CSS Variables ------------------------------ */
:root{
  /* Brand */
  --treva-green: #1B9F5A;
  --treva-green-light: #3BCB7E;
  --treva-green-dark: #127744;
  --treva-green-dark-howdoes: #023F04;
  --treva-sage: #B5B77E;
  --treva-eco-gold: #DEAB03;
  --treva-roadmap: #83A5A6;

  /* Neutrals */
  --black: #0b0c0d;
  --white: #ffffff;
  --muted: #6b7280;

  /* Surfaces */
  --body-bg: #ffffff;
  --body-fg: #101114;
  --section-bg: #023F04;
  --section: #023F04;
  --card-bg: #ffffff;
  --card-border: #219D21;
  --form-bg: #83A5A6;

  /* Footer */
  --footer-bg: #C9C9C9;
  --footer-fg: #023F04;

  /* Shadows */
  --shadow-1: 0 10px 30px rgba(0,0,0,.08);
  --shadow-2: 0 18px 44px rgba(0,0,0,.12);

  /* Radii */
  --radius: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --pill: 999px;

  /* Spacing scale */
  --sp-0: 0;
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --space-section: 50px;

  /* Container */
  --container: 1200px;
}


/* ----------------------------- Base / Reset ----------------------------- */
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: var(--body-fg);
  background: var(--body-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width:100%; height:auto; display:flex; }

h1, h2, h3, h4, h5, h6{
  margin: 0 0 .5em 0;
  line-height: 1.2;
  font-weight: 500;
}
.zag-white{
	color: #fff;
}
p{ margin: 0 0 1em 0; }

a{ color: inherit; text-decoration: none; }
a:hover{ opacity:.9; }

/* Typography helpers */
.display-5 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; font-weight: 800; }
.fw-bold { font-weight: 600; }
.fs-5 { font-size: 1.25rem; }
.lead { font-size: 1.1rem; opacity: .9; }
.small { font-size: .875rem; }
.list-unstyled { list-style: none; padding: 0; margin: 0; }

/* ----------------------------- Layout & Grid ----------------------------- */
.layout-container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}
.section {
	padding: var(--space-section) 0;
	background: var(--section);
 }
.bg-section { background: var(--section-bg) !important; }

/* 12-col CSS grid */
.grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1rem;
}
[class^="col-"], [class*=" col-"] { grid-column: span 12; }
.col-12 { grid-column: span 12; }
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }

/* Responsive spans */
@media (min-width: 576px){ .sm\:col-6{ grid-column: span 6; } .sm\:col-4{ grid-column: span 4; } }
@media (min-width: 768px){ .md\:col-6{ grid-column: span 6; } .md\:col-4{ grid-column: span 4; } .md\:col-3{ grid-column: span 3; } .md\:col-8{ grid-column: span 8; } .md\:col-4{ grid-column: span 4; } }
@media (min-width: 992px){ .lg\:col-6{ grid-column: span 6; } .lg\:col-4{ grid-column: span 4; } .lg\:col-8{ grid-column: span 8; } .lg\:col-3{ grid-column: span 3; } .lg\:col-12{ grid-column: span 12; } }
@media (min-width: 1200px){ .xl\:col-6{ grid-column: span 6; } .xl\:col-4{ grid-column: span 4; } }

/* Gaps */
.gap-0{ gap:0; } .gap-1{ gap:.25rem; } .gap-2{ gap:.5rem; } .gap-3{ gap:1rem; } .gap-4{ gap:1.5rem; } .gap-5{ gap:2rem; }
.gapx-3{ column-gap:1rem; } .gapy-3{ row-gap:1rem; }

/* Flex utilities */
.flex{
	display:flex;
	justify-content: center;
}
.flex-wrap{ flex-wrap: wrap; }
.items-center{ align-items:center; }
.items-start{ align-items:flex-start; }
.items-end{ align-items:flex-end; }
.justify-between{ justify-content:space-between; }
.justify-center{ justify-content:center; }
.justify-end{ justify-content:flex-end; }

/* Text alignment */
.text--center{ text-align:center; }
.text--start{ text-align:left; }
.text--end{ text-align:right; }
.center{ text-align:center; } /* backward-compat */

/* Spacing utilities */
.m-0{margin:var(--sp-0);} .m-1{margin:var(--sp-1);} .m-2{margin:var(--sp-2);} .m-3{margin:var(--sp-3);} .m-4{margin:var(--sp-4);} .m-5{margin:var(--sp-5);}
.mt-0{margin-top:var(--sp-0);} .mt-1{margin-top:var(--sp-1);} .mt-2{margin-top:var(--sp-2);} .mt-3{margin-top:var(--sp-3);} .mt-4{margin-top:var(--sp-4);} .mt-5{margin-top:var(--sp-5);}
.mb-0{margin-bottom:0;} .mb-1{margin-bottom:var(--sp-1);} .mb-2{margin-bottom:var(--sp-2);} .mb-3{margin-bottom:var(--sp-3);} .mb-4{margin-bottom:var(--sp-4);} .mb-5{margin-bottom:var(--sp-5);}
.py-5 { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.p-0{padding:var(--sp-0);} .p-1{padding:var(--sp-1);} .p-2{padding:var(--sp-2);} .p-3{padding:var(--sp-3);} .p-4{padding:var(--sp-4);} .p-5{padding:var(--sp-5);}
.pt-0{padding-top:var(--sp-0);} .pt-1{padding-top:var(--sp-1);} .pt-2{padding-top:var(--sp-2);} .pt-3{padding-top:var(--sp-3);} .pt-4{padding-top:var(--sp-4);} .pt-5{padding-top:var(--sp-5);}
.pb-0{padding-bottom:var(--sp-0);} .pb-1{padding-bottom:var(--sp-1);} .pb-2{padding-bottom:var(--sp-2);} .pb-3{padding-bottom:var(--sp-3);} .pb-4{padding-bottom:var(--sp-4);} .pb-5{padding-bottom:var(--sp-5);}
.px-4{padding-left:var(--sp-4);padding-right:var(--sp-4);} .py-2{padding-top:var(--sp-2);padding-bottom:var(--sp-2);}

/* Display / Position */
.d-none{ display:none !important; } .d-block{ display:block !important; } .d-inline{ display:inline !important; } .d-inline-block{ display:inline-block !important; }
.position-relative{ position:relative; } .position-absolute{ position:absolute; }
.top-0{ top:0; } .bottom-0{ bottom:0; } .start-0{ left:0; } .end-0{ right:0; }

/* Shadows & radii */
.shadow-1 { box-shadow: var(--shadow-1); }
.shadow-2 { box-shadow: var(--shadow-2); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }

/* ----------------------------- Buttons ----------------------------- */
.button{
  display:inline-block;
  padding:12px 20px;
  border-radius: var(--pill);
  font-weight:700;
  border:2px solid transparent;
  transition:.2s ease;
  background: #e5e7eb;
  color: #111827;
}
.button:hover{ filter: brightness(.97); text-decoration: none; }
.button--primary{ background:var(--treva-green); color:#fff; }
.button--primary:hover{ filter:brightness(.95); }
.button--outline{ background:transparent; color:var(--body-fg); border-color:currentColor; }
html[data-bs-theme="dark"] .button--outline{ color:#fff; border-color:#fff; }
.button--ghost{ background:#fff; color:var(--treva-green); border:2px solid var(--treva-green); }
html[data-bs-theme="dark"] .button--ghost{ background:transparent; color:var(--treva-green); }
.button--lg { padding: 14px 24px; font-size: 1.125rem; }

/* ----------------------------- Header / Nav ----------------------------- */
.site-header { background: var(--body-bg); border-bottom:1px solid var(--card-border); }
.site-nav { min-height: 64px; gap: 16px; }
.site-nav__brand img { display:block; }

/* Burger + menu */
.site-nav__toggle { display:none; }
.site-nav__menu { display:flex; align-items:center; gap:16px; }
.site-nav__list { list-style:none; margin:0; padding:0; display:flex; gap:8px; }
.site-nav__link { text-decoration:none; padding:10px 12px; display:inline-block; border-radius: 10px; }
.site-nav__link:hover { background: rgba(0,0,0,.05); }
html[data-bs-theme="dark"] .site-nav__link:hover { background: rgba(255,255,255,.08); }
.site-nav__actions { margin-left:auto; display:flex; gap:8px; align-items:center; }

/* Dropdown */
.site-dropdown { position: relative; }
.site-dropdown__menu {
  position: absolute; top:calc(100% + 6px); right:0; min-width: 180px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
  padding: 6px; display:none; z-index: 50;
}
.site-dropdown.is-open .site-dropdown__menu { display:block; }
.site-dropdown__item {
  display:block; padding:8px 10px; border-radius: 10px; text-decoration:none; color:inherit;
}
.site-dropdown__item:hover { background: rgba(0,0,0,.05); }
html[data-bs-theme="dark"] .site-dropdown__item:hover { background: rgba(255,255,255,.07); }

/* Responsive nav */
@media (max-width: 992px) {
  .site-nav__toggle { display:inline-block; }
  .site-nav__menu { 
    position: absolute; left:0; right:0; top:64px;
    background: var(--body-bg);
    border-bottom: 1px solid var(--card-border);
    display:none; flex-direction:column; padding:12px 16px; gap:12px;
  }
  .site-nav__menu.is-open { display:flex; }
  .site-nav__list { flex-direction:column; gap:8px; }
  .site-nav__actions { width:100%; display:flex; gap:8px; }
}

/* ----------------------------- Hero ----------------------------- */
.hero{
  position: relative;
  min-height: 91.8vh; /* Для десктопів */
  display: flex;
  align-items: center;
  color: #fff; /* Критично для білого тексту */
  background: #0d1f16 url("../img/man.png") center/cover no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 60% at 70% 20%, rgba(59,203,126,.25), transparent 60%);
  pointer-events: none;
}
.hero .content{ position:relative; z-index:2; }

.hero-content {
  margin-left: 650px;
  width: 650px;
  padding: 25px;
  background-color: rgba(33, 157, 33, 0.5); /* #219D21 з прозорістю 50% */
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-1);
}

@media (max-width: 768px) {
  .hero-content {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* ----------------------------- Features + Cards ----------------------------- */
.features{
	display:grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 20px;
	padding:0;
	margin: 24px 0 0 0;
	list-style:none;
}
@media (min-width:768px){ .features{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.features .card{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-1);
  padding: 22px;
}
.emoji{ font-size: 28px; }

/* ----------------------------- Images / specific blocks ----------------------------- */
.image-container{
	margin-top: 16px;
	text-align: center;
}
.image-container-center {
	display: flex;
	justify-content: center;
}
.semo-image{
	max-width: 50%;
	height: auto;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-1);
	display: inline-block;
}

.result-for-the-world{
	padding: var(--space-section) 0;
	background: var(--treva-sage);
}
.result-for-the-world .result-content{
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: center;
}
@media (min-width: 992px){
  .result-for-the-world .result-content{
	grid-template-columns: 1fr 1fr; }
}
.result-for-the-world-image{
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-1);
}
.result-text p{ font-size: 1.05rem; }

/* NFT preview boxes */
.treva-nft {
	background: var(--treva-eco-gold);
}
.pw-nft{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:10px;
}
.pw-nft-certificate{
	max-width: 260px;
	border-radius: var(--radius);
	box-shadow: var(--shadow-1);
}

/* ----------------------------- Roadmap ----------------------------- */

.roadmap {
	background: var(--treva-roadmap);
}

/* Батьківський контейнер: 2 колонки, вирівнювання по ВЕРХУ */
.roadmap-inner{
  display: flex;
  align-items: flex-start;       /* ключ: зверху в один рівень */
  justify-content: space-between;
  gap: 40px;
}

/* Ліва колонка (текст) */
.roadmap-content{
  flex: 1 1 560px;               /* росте, але має комфортну базу */
  max-width: 720px;              /* щоб рядки не були надто довгими */
}

/* Права колонка (картинка) */
.image-container{
  flex: 0 0 420px;               /* фіксуємо стовпець під зображення */
  display: flex;
  justify-content: flex-end;     /* тримаємо правий край */
  align-items: flex-start;       /* зверху */
}
.roadmap-image{
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-1);
}

/* Мобільна адаптація */
@media (max-width: 992px){
  .roadmap-inner{
    flex-direction: column;
    align-items: center;         /* центруємо контент */
    gap: 24px;
  }
  .roadmap-content{ max-width: 100%; }
  .image-container{ flex: 0 0 auto; justify-content: center; width: 100%; }
}
	/* ----------------------------- COMMUNITY --------------------------- */
.com-content {
	color: #fff;
	text-align:center;
}


/* ----------------------------- Contact form (мінімум) ----------------------------- */
#contact .form-wrapper{
  display:flex;
  justify-content:center;   /* центр по горизонталі */
  /* align-items:center;     ← НЕ потрібно, якщо не треба вертикального центру */
  /* min-height:60vh;       ← додай, якщо хочеш ще й вертикально центр */
}

#contact form{
  width:100%;
  max-width:480px;           /* обмеження ширини */
  /* нижче — залиш, тільки якщо потрібна «картка» */
  background:var(--form-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-1);
  padding:24px;
}

/* Поля форми */
#contact .form-label{ display:block; font-weight:600; margin-bottom:6px; }

#contact .form-input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--card-border);
  border-radius:var(--radius-xl);
  background:var(--card-bg);
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
  color: inherit;            /* було var(--body-fg) — у твоєму CSS такої змінної немає */
}
#contact .form-input:focus{
  border-color:var(--treva-green);
  box-shadow:0 0 0 3px rgba(27,159,90,.15);
}
#contact textarea.form-input{ resize:vertical; }


/* ----------------------------- Footer ----------------------------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: 48px 0 24px;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { opacity: .9; }
.site-footer__text { opacity: .9; }
.site-footer .grid{ gap: 1.25rem; }

.site-footer__links { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.site-footer__link { text-decoration: none; }
.site-footer__link:hover { opacity: .9; }

/* ----------------------------- Misc helpers ----------------------------- */
.h-100 { height: 100%; }
.border { border: 1px solid var(--card-border); }
.bg-dark { background: #0b0c0d; color: #e8eaed; } /* legacy class mapping */
.text-light { color: #e8eaed; } /* legacy */
.mt-3 { margin-top: var(--sp-3); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-2 { margin-bottom: var(--sp-2); }
.mt-5 { margin-top: var(--sp-5); }

/* End of file */