/* styles.css */
/* ==========================================================================
   Vaiksed Eesliinid — global styles
   - Unified typography (headings weight 500, consistent dark grey)
   - Minimalist cards (features, blog, contact)
   - Accessible focus states, skip link
   - Contact form styled like the minimalist reference (centered, thin divider,
     light-grey inputs, outline button that inverts on hover)
   ========================================================================== */

/* ===== BASE VARIABLES ===== */
:root{
  --color-bg:#ffffff;
  --color-bg-alt:#f7f7f7;
  --color-text:#1e1e1e;           /* dark grey for body + headings */
  --color-text-muted:#8c8c8c;     /* subtle secondary copy */
  --color-nav:#0f0f0f;            /* nav a bit darker than body text */
  --color-border:#e6e6e6;

  --color-accent-1:#c98b8b; /* rose */
  --color-accent-2:#f2dcc1; /* sand */
  --color-accent-3:#c3d0cb; /* sage */

  --ff-sans:"Inter","Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  --maxw:1100px;

  --s-0:0;
  --s-1:.5rem;
  --s-2:1rem;
  --s-3:1.5rem;
  --s-4:2rem;
  --s-5:2.5rem;
  --s-6:3rem;
}

/* ===== GLOBAL ===== */
*{ box-sizing:border-box; }
html:focus-within{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--ff-sans);
  color:var(--color-text);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background: var(--color-bg);
}
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
.container{ width:min(100% - 2rem, var(--maxw)); margin-inline:auto; }
.container-narrow{ width:min(100% - 2rem, 780px); margin-inline:auto; }
.page-centered{ text-align:center; }
section{ padding-block: clamp(var(--s-4), 5vw, var(--s-6)); }

/* Focus styles (accessibility) */
:where(a,button,input,textarea) :focus{ outline:none; }
:where(a,button,input,textarea):focus-visible{
  outline: 2px solid var(--color-accent-1);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-sans);
  font-weight:500;                 /* unified heading weight */
  margin:0 0 .75rem 0;
  color:var(--color-text);         /* same dark grey for headings */
}
h1{ font-size:clamp(1.75rem,4vw,2.625rem); line-height:1.22; }
h2{ font-size:clamp(1.375rem,3vw,2rem); line-height:1.24; }
h3{ font-size:1.125rem; line-height:1.3; }

.hero.container-narrow {
  padding-top: var(--s-6);
  padding-bottom: var(--s-5);
}
.hero .lead {
  margin-block: var(--s-2) var(--s-3);
  line-height:1.7;
  text-align:center;
  color:var(--color-text-muted);
  font-size:clamp(1rem,2.2vw,1.15rem);
  max-width:66ch;
  margin-inline:auto;
}

.project-note{
  margin-top: var(--s-5);
  margin-bottom: var(--s-5);
  line-height:1.7;
  text-align:center;
  max-width:66ch;
  margin-inline:auto;
  color:var(--color-text-muted);
  font-size:1.05rem;
}
.project-note strong{ font-weight:500; }

/* ===== HEADER ===== */
header{
  background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--color-border);
  backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:10;
}
.navbar{ display:flex; align-items:center; justify-content:space-between; padding-block:.7rem; }
.brand img{ height:44px; width:auto; }
.navlinks{ display:flex; gap:var(--s-2); }
.navlinks a{ padding:.35rem .7rem; border-radius:8px; color:var(--color-nav); font-weight:500; }
.navlinks a:hover{ background:var(--color-bg-alt); }
.navlinks a[aria-current="page"]{ background:var(--color-bg-alt); }

/* ===== FEATURES ===== */
.features{
  display:grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--s-3);
}
.feature{
  border:1px solid var(--color-border);
  border-radius:14px;
  background:#fff;
  text-align:center;
  padding: var(--s-3);
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}
.badge{
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; margin:0 auto var(--s-2);
  color:#fff; background:var(--color-accent-1);
}
.feature:nth-child(2) .badge{ background:#e7c97f; color:#333; }
.feature:nth-child(3) .badge{ background:#9dbb9d; }

/* ===== CONTACT ===== */
.section-muted{ background:var(--color-bg-alt); }

/* Card look like reference: centered, thin divider, light-grey inputs */
.contact-card{
  width:min(100%, 760px);
  margin:0 auto;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:20px;
  padding: clamp(var(--s-4), 4vw, var(--s-5));
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  text-align:center;
}
.form-title{
  font-size:clamp(1.5rem, 3.2vw, 2rem);
  font-weight:500;
  color:var(--color-text);
  margin:0;
}
.form-rule{
  border:0; height:1px;
  background: var(--color-border);
  margin: 1rem 0 1.5rem;
}

.form-grid{
  display:grid; gap: var(--s-2);
  grid-template-columns: 1fr 1fr;
}
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }

.field{ display:block; margin-bottom: var(--s-2); text-align:center; }
.label{
  display:block;
  font-weight:500;
  margin-bottom:.4rem;
  color: var(--color-text);
}
.hint{
  display:block;
  font-size:.9rem;
  color: var(--color-text-muted);
  margin-top:.35rem;
}

input, textarea{
  width:100%;
  padding: .9rem 1rem;
  border:1px solid var(--color-border);
  border-radius:12px;
  background: var(--color-bg-alt);   /* light grey like reference */
  font:inherit;
  text-align:left;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder, textarea::placeholder{ color:#b7b7b7; }
input:focus, textarea:focus{
  outline: none;
  border-color: var(--color-accent-1);
  background:#fff;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-accent-1) 18%, transparent);
}
textarea{ min-height:140px; resize:vertical; }

.form-actions.stacked{
  margin-top: var(--s-2);
  display:flex; align-items:center; justify-content:center; gap: var(--s-2);
  flex-wrap:wrap;
}
.checkbox{ display:flex; align-items:center; gap:.6rem; justify-content:center; }

.btn-primary{
  background:#fff;                 /* outline button that inverts on hover */
  color:#111;
  border:1.5px solid #111;
  border-radius:12px;
  padding:.85rem 1.5rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:none;
  transition: background .15s ease, color .15s ease, transform .05s ease;
}
.btn-primary:hover{ background:#111; color:#fff; }
.btn-primary:active{ transform: translateY(1px); }

.form-note{
  margin-top: var(--s-2);
  font-size:.95rem; text-align:center;
  color: var(--color-text);
}

/* Honeypot for spam (kept out of layout) */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Success / error states (script writes classes) */
.form-success{ border-color:#9dbb9d; box-shadow: 0 10px 24px rgba(0,0,0,.05), 0 0 0 4px rgba(157,187,157,.18) inset; }
.form-error{ border-color:#e6a3a3; box-shadow: 0 10px 24px rgba(0,0,0,.05), 0 0 0 4px rgba(233,150,150,.18) inset; }

/* ===== FOOTER ===== */
footer{
  background:#fff;
  border-top:1px solid var(--color-border);
  padding-block: var(--s-3);
}
.footer-grid{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:var(--s-2);
}
.footer-brand{ display:flex; align-items:center; gap:.8rem; }
.footer-brand img{ height:38px; width:auto; }
.footer-links{ display:flex; gap:var(--s-2); align-items:center; }
footer small{
  display:block;
  margin-top: var(--s-2);
  text-align:center;
  color: var(--color-text-muted);
  font-size:.85rem;
}

/* ===== SKIP LINK ===== */
.skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px; height:1px;
  overflow:hidden; white-space:nowrap;
}
.skip:focus{
  position:absolute;
  left:1rem; top:1rem;
  width:auto; height:auto;
  padding:.5rem 1rem;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  z-index:1000;
}

/* ===== PROSE (privacy, posts) ===== */
.prose{
  color:var(--color-text);
  font-size:1rem;
  line-height:1.75;
  letter-spacing:.01em;
}
.prose h1,.prose h2,.prose h3{ font-weight:500; color:var(--color-text); }
.prose h1{ font-size:clamp(1.75rem,4vw,2.25rem); margin:.25rem 0 1rem; line-height:1.25; }
.prose h2{ font-size:clamp(1.25rem,3vw,1.5rem); margin:2rem 0 .75rem; }
.prose h3{ font-size:1.125rem; margin:1.25rem 0 .5rem; }
.prose p{ margin:.75rem 0; }
.prose ul,.prose ol{ margin:.5rem 0 1rem 1.25rem; }
.prose li{ margin:.35rem 0; }
.prose a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.prose hr{ border:0; border-top:1px solid var(--color-border); margin:2rem 0; }
.prose small, .prose time{ color:var(--color-text-muted); }
.prose blockquote{
  margin:1rem 0; padding: .75rem 1rem;
  border-left:4px solid var(--color-accent-1);
  background:linear-gradient(0deg,#fff, #fff), var(--color-bg-alt);
  border-radius:10px;
}

/* Page wrappers to keep rhythm consistent */
.page-header{ background:#fff; border-bottom:1px solid var(--color-border); }
.page-hero{ padding-top: var(--s-6); padding-bottom: var(--s-4); text-align:center; }
.page-hero .lead{ color:var(--color-text-muted); max-width:66ch; margin:.75rem auto 0; }
.page-body{ padding-block: clamp(var(--s-4),5vw,var(--s-6)); }

/* ===== BLOG LIST & POST ===== */
.blog-grid{
  display:grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  margin-top: var(--s-3);
}
.post{
  border:1px solid var(--color-border);
  border-radius:14px;
  background:#fff;
  padding: var(--s-3);
  box-shadow:0 6px 16px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
  text-align:left;
}
.post:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.08);
}
.post h2{
  font-size:1.25rem;
  margin:0 0 .5rem;
  line-height:1.35;
}
.post h2 a{ text-decoration:none; color:inherit; }
.post h2 a:hover{ text-decoration:underline; }
.post time{
  display:block;
  font-size:.9rem;
  color:var(--color-text-muted);
  margin-bottom:.75rem;
}
.post p{
  margin:0;
  color:var(--color-text);
  font-size:.95rem;
  line-height:1.6;
}

.article{
  max-width: 740px;
  margin-inline:auto;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:16px;
  padding: var(--s-4);
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.article h1{
  font-size:clamp(1.75rem,4vw,2.25rem);
  margin:0 0 1rem;
  line-height:1.25;
}
.article .meta{
  font-size:.9rem;
  color:var(--color-text-muted);
  margin-bottom: var(--s-3);
}
.article img{
  border-radius:12px;
  margin:1.25rem 0;
}
.article .prose{ font-size:1rem; }

.backlink{
  display:inline-block;
  margin-top: var(--s-3);
  font-size:.95rem;
  color:var(--color-accent-1);
}
.backlink:hover{ text-decoration:underline; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}