/* ---- global design toggles ---- */
:root{
  --sidebar-w: 400px;
  --bg:       #D6D0CA; /* right panel */
  --sidebar:  #B3ACA3; /* left panel */
  --text:     #525E3D; /* green text */
  --hero-size: 72px;    /* main hero text size */
  --capsule-w: 1000px; /* max width of fake input capsule */
}

/* ---- layout ---- */
body{
  margin:0;
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height:100vh;
  font-family: system-ui, sans-serif;
  color: var(--text);
}

#sidebar {
  grid-column: 1;                  /* stay in left column */
  background: var(--sidebar);
  padding: 2.5rem;
  color: var(--text);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .5px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100vh;
}

#sidebar > aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

main{
  background: var(--bg);
  display:flex;
  justify-content:center;
  align-items:center;
  font-size: 2rem;
}

/* ---- hero ---- */
.hero{ margin:auto; text-align:center; }

.hero h1{
  font-size: var(--hero-size);
  margin:0 0 4px;
  letter-spacing:1px;
  color: var(--text);
  font-weight:800;
}

.hero .subtitle{ font-size:22px; opacity:.9; } /* I'm siv text*/

.hero .body{ font-size:16px; opacity:1; } /* main body textt*/

/* Sidebar navigation */

/* the nav block itself — add left padding so links aren't glued to the edge */
.nav {
  padding-left: 2rem;        /* 1rem ≈ 16px */
}

/* base style for all links inside .nav */
.nav a {
  color: var(--text);        /* use the site’s green variable */
  text-decoration: none;     /* remove default underline */
  font-weight: inherit;      /* keep same boldness as parent */
  display: block;            /* each link on its own line */
  margin-bottom: 1rem;     /* vertical spacing between items */
  margin-top: 2rem;
}

/* style for visited links (same as normal so color doesn’t change) */
.nav a:visited {
  color: var(--text);
}

/* subtle hover feedback without underline */
.nav a:hover {
  opacity: 0.8;              /* slightly lighter when hovered */
  cursor: pointer;           /* show pointer hand */
}


/* ---- prompt label + capsule ---- */
.prompt-label{
  margin: 38px auto 10px;   /* top, left/right auto (center), bottom */
  text-align:center;
  opacity:.7;
  font-size:16px;
}

.fake-input{
  margin:0 auto;
  width: min(var(--capsule-w), 95%);
  text-align: left;
  background:rgba(0,0,0,0.06);
  border-radius:999px;
  padding:12px 16px;
  border:1px solid rgba(0,0,0,.12);
  font-family: ui-monospace, monospace;
  font-size:15px;
  text-align:left;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05);
  color: var(--text);
}

/* ---- small footer ---- */
.copyri{
  font-size:10px;
  color: var(--text);
  opacity:.8;
  letter-spacing:.3px;
  font-weight:400;
  padding-left: 2rem;
}

/* --------------------- CV page layout --------------------------- */
.template-page {
  flex-direction: column;     /* stack title, button, CV vertically */
  text-align: center;         /* center text like the other pages */
  gap: 2.5rem;                  /* space between items */
  padding: 8rem 0;            /* breathing room top/bottom */
}

.template-page .body{ font-size:16px; opacity:1; } /* main body textt*/

/* capsule-style button (matches your fake-input look) */
.capsule-btn{
  display:inline-flex;               /* size to content + nice hover area */
  align-items:center;
  gap:.5rem;
  padding:12px 20px;                 /* capsule padding */
  border-radius:999px;               /* full pill */
  background:rgba(0,0,0,.06);        /* same tint as .fake-input */
  border:1px solid rgba(0,0,0,.12);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05);
  color: var(--text);
  text-decoration:none;
  font-size:18px;
  font-weight:600;
}
.capsule-btn:hover{ opacity:.9; transform: translateY(-1px); }
.capsule-btn:active{ transform: translateY(0); }

/* container for CV page images */
.cv-preview {
  width: min(var(--capsule-w), 80%);
  margin: 0 auto;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

/* shadow hugs images directly */
.cv-preview img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 2px 14px rgba(0,0,0,.15);
}

.cv-preview img + img {
  margin-top: 1em;   /* background gap between pages */
}

/*__________________ Contact form layout________________________ */
.contact-form{
  width: min(var(--capsule-w), 90%);
  margin: 0 auto;
  display: grid;
  gap: 1.2rem;
  justify-items: center;
}

/* Boxy, capsule-inspired text area */
.message-box{
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 28px;                 /* boxy—not full pill */
  padding: 18px 22px;
  font: 16px/1.5 system-ui, sans-serif;
  color: var(--text);
  box-shadow: 0 2px 14px rgba(0,0,0,.15);
  resize: vertical;
  outline: none;
}
.message-box:focus{
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
}

/* Status feedback under the button */
.status-note{
  min-height: 1.2em;                  /* reserve space to avoid layout jump */
  font-size: 15px;
  opacity: .95;
}
.status-note.ok{ color: #2e6a3e; }    /* your green-ish theme */
.status-note.err{ color: #7a2c2c; }

/* Inputs and textarea share the same visual base */
.input-box,
.message-box {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 24px; /* softer than capsule, still structured */
  padding: 14px 18px;
  font: 16px/1.5 system-ui, sans-serif;
  color: var(--text);
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  outline: none;
  transition: box-shadow .15s ease;
}

.input-box:focus,
.message-box:focus {
  box-shadow: 0 3px 14px rgba(0,0,0,.15);
}

/* Form layout */
.contact-form {
  width: min(var(--capsule-w), 85%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

/* Status message (feedback below button) */
.status-note {
  min-height: 1.2em;
  font-size: 15px;
  opacity: .95;
  text-align: center;
}
.status-note.ok { color: var(--text); }
.status-note.err { color: #7a2c2c; }