/* styles/styles.css
   Clean, minimal manga-inspired theme.
   Comments show where to edit. */

:root{
  --bg:#ffffff;
  --muted:#6c757d;
  --brand:#1f3b5f;       /* primary brand color - adjust to taste */
  --accent:#d95555;      /* optional accent (manga red) */
  --card:#fbfbfe;
  --text:#1a1a1a;
  --radius:8px;
  --max-width:1200px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --serif: "Open Sans","Noto Serif JP", Georgia, serif;
}

/* Basic reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Headings: slightly stylized to fit manga aesthetic */
h1,h2,h3{font-family:var(--serif); color:var(--brand); margin-bottom:0.5rem}
h1{font-weight:700}
h2{font-size:1.6rem}
h3{font-size:1.05rem}

/* Hero */
#home{background:linear-gradient(180deg, rgba(31,59,95,0.05), transparent);}

/* Cards */
.card{border:1px solid rgba(0,0,0,0.06); border-radius:var(--radius)}
.service-card .fa-2x{color:var(--accent)}
.card-body p{margin-bottom:0}

/* Portfolio items */
.portfolio-item img{object-fit:cover; height:240px; width:100%}

/* Buttons */
.btn-primary{background:var(--brand); border-color:var(--brand)}
.btn-primary:hover{background:#18324f; border-color:#18324f}

/* Footer */
footer small{opacity:0.9}

/* Responsive tweaks */
@media (max-width:576px){
  .portfolio-item img{height:180px}
}

/* Utility classes (for maintainability) */
.container{max-width:var(--max-width)}

/* Small accessibility focus outlines */
a:focus, button:focus, input:focus, textarea:focus{
  outline:3px solid rgba(31,59,95,0.15);
  outline-offset:2px;
}

/* Minimal lazy-loading placeholder - optional */
img.lazy{background:linear-gradient(90deg,#f0f0f0,#fafafa);}

/* Distance for small logo */
img.small-logo {
  margin: 5%;
}