/* ==========================================================
Fluent / Microsoft 365 Admin Center-inspired theme
- Light neutral canvas, white surfaces, subtle elevation
- Segoe UI-first typography + type ramp-like sizing
- Brand blue accent + accessible focus rings
========================================================== */

:root{
  /* Typography */
  --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Canvas / surfaces */
  --canvas:#f5f6f8;
  --canvas2:#eef1f6;
  --surface:#ffffff;
  --surface2:#fbfbfd;

  /* Text */
  --text:#1b1a19;
  --muted:#605e5c;

  /* Borders */
  --border:#e1dfdd;
  --border2:#edebe9;

  /* Brand */
  --brand:#0f6cbd;
  --brandHover:#115ea3;
  --brandSoft: rgba(15,108,189,.10);

  /* Radius / elevation */
  --r4: 4px;
  --r8: 8px;
  --r12: 12px;
  --shadow1: 0 1px 2px rgba(0,0,0,.08);
  --shadow2: 0 6px 18px rgba(0,0,0,.10);

  /* Layout */
  --max: 1040px;

  /* Motion */
  --ease: cubic-bezier(.2,.0,.0,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1000px 700px at 10% -10%, rgba(15,108,189,.10), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(98,171,245,.12), transparent 62%),
    linear-gradient(180deg, var(--canvas2), var(--canvas));
  min-height:100vh;
}

/* Links */
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Focus ring */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:var(--r4);
}

/* Container */
.wrap{
  width:min(var(--max), calc(100% - 40px));
  margin:18px auto;
}

/* ==========================================================
HEADER (updated to support top banner + keep chips/brand row)
========================================================== */

header{
  display:flex;
  flex-direction:column;
  gap:0;
  align-items:stretch;
  justify-content:flex-start;

  padding:0; /* banner + header-inner manage padding */
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--r12);
  box-shadow: var(--shadow1);
  overflow:hidden;

  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}

header:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  border-color:#d2d0ce;
}

/* Banner wrapper (inside header, above brand/nav row) */
.header-banner{
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(900px 300px at 80% 0%, rgba(98,171,245,.18), transparent 60%),
    radial-gradient(900px 300px at 10% 0%, rgba(15,108,189,.18), transparent 55%),
    linear-gradient(180deg, rgba(15,108,189,.06), transparent 80%);
}

/* ✅ Prevent cropping of certbannernew.png */
.header-banner-img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain; /* show full image, no crop */
}

/* Existing header row content */
.header-inner{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  padding:16px;
}

.brand{
  display:flex;
  gap:14px;
  align-items:center;
  min-width:0;
}

.headshot{
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius: var(--r12);
  border:1px solid var(--border);
  background: var(--surface2);
  flex:0 0 auto;
}

.title h1{
  margin:0;
  font-size:18px;
  font-weight:600;
  letter-spacing:.1px;
}

.title p{
  margin:2px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:16px;
}

/* Top nav */
.nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius: var(--r8);
  background: transparent;
  color: var(--text);
  font-size:13px;
  line-height:18px;
  white-space:nowrap;
  transition:
    transform .14s var(--ease),
    background .14s var(--ease),
    border-color .14s var(--ease),
    box-shadow .14s var(--ease);
}

.chip:hover{
  text-decoration:none;
  background: rgba(0,0,0,.03);
  border-color:#d2d0ce;
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.chip.primary{
  background: var(--brand);
  border-color: var(--brand);
  color:#fff;
}

.chip.primary:hover{
  background: var(--brandHover);
  border-color: var(--brandHover);
}

/* ==========================================================
Main layout
========================================================== */

main{
  margin-top:14px;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:14px;
}
.full{ grid-column:1 / -1; }

/* Cards */
.card{
  padding:18px;
  border:1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r12);
  box-shadow: var(--shadow1);
  transition:
    transform .16s var(--ease),
    box-shadow .16s var(--ease),
    border-color .16s var(--ease);
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  border-color:#d2d0ce;
}
.card h2{
  margin:0 0 10px;
  font-size:16px;
  font-weight:600;
}
.card p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:18px;
}

/* ==========================================================
Bio — readable width, centered
========================================================== */

.bio{ margin-top:14px; }
.bio p{
  margin:10px auto 0;
  font-size:13.5px;
  line-height:20px;
  color:var(--muted);
  max-width:110ch;
  width:100%;
}
.bio .muted{
  max-width:110ch;
  margin:12px auto 0;
}

/* Credentials list (Index) */
.cred-list{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:grid;
  gap:10px;
}
.cred-list li{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  color:var(--muted);
  line-height:1.35;
  padding:10px;
  border:1px solid var(--border2);
  border-radius: var(--r12);
  background: var(--surface2);
  transition:
    transform .16s var(--ease),
    border-color .16s var(--ease),
    box-shadow .16s var(--ease);
}
.cred-list li:hover{
  transform: translateY(-1px);
  border-color:#d2d0ce;
  box-shadow: 0 3px 14px rgba(0,0,0,.08);
}
.cred-list strong{ color:var(--text); font-weight:600; }

.verify{
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  font-size:12px;
  color:var(--brand);
  text-decoration:none;
  transition:
    background .14s var(--ease),
    border-color .14s var(--ease),
    transform .14s var(--ease);
}
.verify:hover{
  background: var(--brandSoft);
  border-color: rgba(15,108,189,.35);
  transform: translateY(-1px);
  text-decoration:none;
}

/* Sidebar labels */
.sidebar .label{
  font-weight:600;
  color:var(--text);
}

/* Profile Secure Score image */
.profile-figure{
  margin:12px 0 14px;
  padding:10px;
  border:1px solid var(--border2);
  border-radius: var(--r12);
  background: var(--surface2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.profile-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  border:1px solid var(--border);
}
.profile-caption{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}

/* ==========================================================
EXPERIENCE TIMELINE (restored) — FIXED content:""
========================================================== */

.timeline{
  position:relative;
  margin-top:14px;
  padding-left:24px;
}
.timeline:before{
  content:"";
  position:absolute;
  left:10px;
  top:0;
  bottom:0;
  width:2px;
  background: linear-gradient(180deg, rgba(15,108,189,.55), rgba(15,108,189,.15));
  border-radius:2px;
}
.tl-item{ position:relative; margin:0 0 14px; }
.tl-item:last-child{ margin-bottom:0; }
.tl-item:before{
  content:"";
  position:absolute;
  left:-20px;
  top:18px;
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--surface);
  border:2px solid rgba(15,108,189,.65);
  box-shadow: 0 0 0 3px rgba(15,108,189,.10);
}
.tl-card{
  border:1px solid var(--border2);
  border-radius: var(--r12);
  padding:14px;
  background: var(--surface2);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.tl-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  border-color:#d2d0ce;
}
.tl-card h3{
  margin:0 0 4px;
  font-size:14.5px;
  font-weight:600;
}
.tl-meta{
  color:var(--muted);
  font-size:12.5px;
  margin:0 0 10px;
}
.tl-card ul{
  margin:10px 0 0 18px;
  color:var(--muted);
  font-size:13px;
  line-height:18px;
}
.tl-card li{ margin:6px 0; }

/* ==========================================================
SKILLS GRID (restored)
========================================================== */

.skill-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.skill-card{
  border:1px solid var(--border2);
  border-radius: var(--r12);
  padding:14px;
  background: var(--surface2);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.skill-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  border-color:#d2d0ce;
}
.skill-card h3{
  margin:0 0 8px;
  font-size:13.5px;
  font-weight:600;
}
.skill-card ul{
  margin:0 0 0 18px;
  color:var(--muted);
  font-size:13px;
  line-height:18px;
}
.skill-card li{ margin:6px 0; }

/* ==========================================================
Contact (Microsoft Forms) — scoped iframe sizing
========================================================== */

.formwrap{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius: var(--r12);
  overflow:hidden;
  background: var(--surface);
  box-shadow: var(--shadow1);
}
.formwrap iframe{
  display:block;
  width:100%;
  height:1100px; /* desktop */
  border:0;
}

.muted{ color:var(--muted); margin-top:12px; }

/* Footer (shared) */
footer{
  margin-top:14px;
  padding:10px 4px;
  font-size:12px;
  color:var(--muted);
}

/* NOTE: footer banner styles left here harmlessly; you can remove if you fully removed banner HTML */
.footer-banner{
  margin-top:14px;
  border:1px solid var(--border);
  border-radius: var(--r12);
  overflow:hidden;
  background: var(--surface);
  box-shadow: var(--shadow1);
}
.footer-banner-inner{
  background: var(--surface);
  padding:10px;
}
.footer-banner-img{
  display:block;
  width:100%;
  height:auto;
}

.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* ==========================================================
Blog — tightened cards + excerpt clamping (more posts per page)
========================================================== */

.post-list{
  display:grid;
  gap:10px; /* tighter than before */
  margin-top:12px;
}

.post-card{
  background:var(--surface2);
  border:1px solid var(--border2);
  padding:12px 14px; /* tighter than before */
  border-radius:var(--r12);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.post-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  border-color:#d2d0ce;
}

.post-meta{
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
}

.post-title{
  margin:0 0 4px;
  font-size:14.5px;
  font-weight:600;
  line-height:1.25;
}
.post-title a{
  color:var(--text);
  text-decoration:none;
}
.post-title a:hover{ text-decoration:underline; }

/* Excerpts: clamp to 3 lines on desktop to reduce vertical space */
.post-excerpt{
  font-size:13px;
  color:var(--muted);
  line-height:18px;
  margin:0;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow:hidden;
}

/* Post page body */
.post-body{
  margin-top:14px;
  font-size:13.5px;
  line-height:20px;
  color:var(--muted);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  header, .chip, .card, .tl-card, .skill-card, .cred-list li, .verify, .post-card{
    transition:none !important;
    transform:none !important;
  }
}

/* Responsive */
@media (max-width: 900px){
  main{ grid-template-columns:1fr; }
  .header-inner{ flex-direction:column; align-items:flex-start; }
  .nav{ justify-content:flex-start; }
  .skill-grid{ grid-template-columns:1fr; }
  .formwrap iframe{ height:1250px; } /* mobile */

  .bio p, .bio .muted{ max-width:100%; }

  .post-excerpt{ -webkit-line-clamp: 2; }
}

/* Optional: Dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --canvas:#0f1115;
    --canvas2:#0b0d11;
    --surface:#16181d;
    --surface2:#1b1e24;
    --text:rgba(255,255,255,.92);
    --muted:rgba(255,255,255,.72);
    --border:rgba(255,255,255,.12);
    --border2:rgba(255,255,255,.10);
    --shadow1: 0 1px 2px rgba(0,0,0,.40);
    --shadow2: 0 10px 28px rgba(0,0,0,.55);
  }

  body{
    background:
      radial-gradient(1000px 700px at 10% -10%, rgba(15,108,189,.26), transparent 62%),
      radial-gradient(900px 600px at 90% 0%, rgba(98,171,245,.18), transparent 64%),
      linear-gradient(180deg, var(--canvas2), var(--canvas));
  }

  .chip:hover{ background: rgba(255,255,255,.06); }
  .verify{ background: rgba(255,255,255,.04); }
  .verify:hover{ background: rgba(15,108,189,.18); }
  .profile-figure{ box-shadow:none; }
}