/*
Theme Name: Sankarsan Behera Portfolio
Theme URI: https://www.linkedin.com/in/sankarsan-behera-206235168/
Author: Sankarsan Behera
Author URI: https://www.linkedin.com/in/sankarsan-behera-206235168/
Description: A custom-coded, minimal portfolio theme for Sankarsan Behera, a strategic communications & IEC professional working across rural livelihoods, agriculture and development in Odisha. Includes an editable Experience post type, and Customizer controls for the hero, about, skills and contact sections so the whole site can be managed from wp-admin without touching code.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sb-portfolio
*/

/* =========================================================
   0. TOKENS — minimal: one type family, one quiet accent,
   generous space, almost no ornament.
   ========================================================= */
:root{
  --ink:      #211F1B;
  --muted:    #7A776E;
  --faint:    #A9A69B;
  --paper:    #FBFAF7;
  --accent:   #4B6455;
  --accent-dp:#37493D;
  --line:     #E9E6DE;

  --font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --narrow: 640px;
  --content: 800px;
  --wide: 1040px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color: var(--accent); text-decoration: none; }
a:hover{ color: var(--accent-dp); }
h1,h2,h3,h4{
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: -.01em;
}
p{ margin: 0 0 1.3em; }
ul{ margin: 0; padding: 0; list-style: none; }
button, input, textarea{ font-family: inherit; font-size: 1rem; color: inherit; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.container{ max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow{ max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter); }

.section{ padding: clamp(4rem, 10vw, 8rem) 0; }
.section-head{ margin-bottom: clamp(2.25rem, 6vw, 3.5rem); }
.section-head h2{ font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.section-head p{ color: var(--muted); margin-bottom: 0; max-width: 56ch; }

.link{ color: var(--accent); border-bottom: 1px solid transparent; padding-bottom: 1px; }
.link:hover{ border-color: var(--accent-dp); color: var(--accent-dp); }
.link-quiet{ color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.link-quiet:hover{ color: var(--muted); border-color: var(--faint); }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper);
  padding:.75em 1.25em; z-index:1000;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* =========================================================
   2. HEADER — plain, no logo box, hairline only on scroll
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(251,250,247,.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{ border-bottom-color: var(--line); }
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  min-height: 72px; max-width: var(--wide);
}
.brand-name{ font-size: .98rem; font-weight: 600; color: var(--ink); }
.brand-name span{ display:none; }

.primary-nav ul{ display:flex; gap: clamp(1.4rem, 3vw, 2.4rem); align-items:center; }
.primary-nav a{ color: var(--muted); font-size: .92rem; font-weight: 500; }
.primary-nav a:hover{ color: var(--ink); }
.nav-linkedin{ color: var(--ink) !important; }

.menu-toggle{
  display:none; background:none; border:none; padding:0;
  width:32px; height:32px; align-items:center; justify-content:center; cursor:pointer;
}
.menu-toggle-bars{ position:relative; width:18px; height:12px; }
.menu-toggle-bars i{
  position:absolute; left:0; right:0; height:1px; background:var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle-bars i:nth-child(1){ top:0; }
.menu-toggle-bars i:nth-child(2){ top:6px; }
.menu-toggle-bars i:nth-child(3){ top:12px; }
.nav-open .menu-toggle-bars i:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-open .menu-toggle-bars i:nth-child(2){ opacity:0; }
.nav-open .menu-toggle-bars i:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 780px){
  .menu-toggle{ display:flex; }
  .primary-nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--paper); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  .primary-nav ul{ flex-direction:column; align-items:flex-start; gap:0; padding: .25rem var(--gutter) 1.5rem; }
  .primary-nav li{ width:100%; }
  .primary-nav a{ display:block; padding: .85em 0; }
  .nav-open .primary-nav{ max-height: 360px; }
}

/* =========================================================
   3. HERO — centered, quiet, small avatar, no framing
   ========================================================= */
.hero{ padding: clamp(4.5rem, 12vw, 8rem) 0 clamp(3.5rem, 8vw, 6rem); text-align:center; }
.hero-inner{ max-width: var(--narrow); margin: 0 auto; }

.hero-avatar{
  width:84px; height:84px; border-radius:50%; overflow:hidden;
  margin: 0 auto 1.75rem; background: var(--line);
}
.hero-avatar img{ width:100%; height:100%; object-fit:cover; }
.hero-avatar-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color: var(--muted); font-weight:600; font-size:1.1rem;
}

.hero-eyebrow{ color: var(--muted); font-size: .92rem; margin-bottom: .9rem; }
.hero h1{
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 600;
}
.hero-role{
  color: var(--accent); font-weight:500;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  margin: .35em auto 1.25rem; max-width: 40ch;
}
.hero-intro{ color: var(--muted); font-size: 1.03rem; max-width: 46ch; margin-left:auto; margin-right:auto; }
.hero-actions{ display:flex; flex-wrap:wrap; gap: 1.75rem; margin-top: 1.9rem; justify-content:center; }
.hero-actions .link, .hero-actions .link-quiet{ font-size: .96rem; font-weight: 600; }

/* single, deliberate load-in — nothing else on the page animates */
.hero-anim > *{ opacity:0; transform: translateY(10px); animation: sb-rise .6s ease forwards; }
.hero-anim > *:nth-child(1){ animation-delay: .03s; }
.hero-anim > *:nth-child(2){ animation-delay: .1s; }
.hero-anim > *:nth-child(3){ animation-delay: .17s; }
.hero-anim > *:nth-child(4){ animation-delay: .24s; }
.hero-anim > *:nth-child(5){ animation-delay: .31s; }
.hero-anim > *:nth-child(6){ animation-delay: .38s; }
@keyframes sb-rise{ to{ opacity:1; transform:none; } }

/* =========================================================
   4. ABOUT — single column, plain meta row (no card/border)
   ========================================================= */
.about-text{ max-width: var(--content); }
.about-text p{ color: var(--ink); max-width: 68ch; }

.meta-row{
  display:flex; flex-wrap:wrap; gap: 2.5rem 3.5rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.meta-item{ min-width: 160px; }
.meta-label{ display:block; font-size:.82rem; color: var(--faint); margin-bottom:.3rem; }
.meta-value{ font-weight:600; font-size: .98rem; }

/* =========================================================
   5. EXPERIENCE — plain stacked list, hairline dividers,
   no rail / no dots
   ========================================================= */
.exp-list{ max-width: var(--content); }
.exp-item{ padding: clamp(1.75rem, 4vw, 2.25rem) 0; border-top: 1px solid var(--line); }
.exp-item:first-child{ border-top: 1px solid var(--line); }

.exp-top{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap: .5rem 1.5rem;
}
.exp-role{ font-size: 1.12rem; font-weight:600; margin:0; }
.exp-date{ color: var(--muted); font-size: .88rem; white-space:nowrap; }
.exp-current{ color: var(--accent); font-weight:600; }

.exp-org{ color: var(--muted); font-size: .95rem; margin: .3rem 0 .9rem; }
.exp-desc{ color: var(--ink); max-width: 62ch; }
.exp-desc p:last-child, .exp-desc ul:last-child{ margin-bottom:0; }
.exp-desc ul{ margin: .5em 0 0; }
.exp-desc li{ position:relative; padding-left:1em; margin-bottom:.4em; color: var(--muted); }
.exp-desc li::before{ content:"–"; position:absolute; left:0; color: var(--faint); }

/* =========================================================
   6. SKILLS — plain running text per category, no chips
   ========================================================= */
.skills-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(2rem, 5vw, 3rem) clamp(2.5rem, 5vw, 4rem);
  max-width: var(--wide);
}
.skill-cat h3{ font-size: .95rem; font-weight:700; margin-bottom:.5rem; }
.skill-cat p{ color: var(--muted); margin-bottom:0; font-size:.98rem; }

/* =========================================================
   7. CONTACT — plain, no card background
   ========================================================= */
.contact-grid{
  display:grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  max-width: var(--wide);
}
.contact-info p{ color: var(--muted); max-width: 40ch; }
.contact-list{ margin-top:1.75rem; }
.contact-list li{ padding: .65rem 0; }
.contact-list li:first-child{ padding-top:0; }
.contact-list a{ font-weight:600; }
.contact-label{ display:block; font-size:.8rem; color: var(--faint); margin-bottom:.15rem; }

.form-row{ margin-bottom: 1.5rem; }
.form-row label{ display:block; font-size:.85rem; color: var(--muted); margin-bottom:.4rem; }
.form-row input, .form-row textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
  padding: .5em 0; transition: border-color .15s ease;
}
.form-row input:focus, .form-row textarea:focus{ border-color: var(--accent); outline:none; }
.form-row textarea{ resize: vertical; min-height:110px; }
.btn-submit{
  background:none; border:none; padding:0; color: var(--accent);
  font-weight:600; font-size:.98rem; cursor:pointer; border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.btn-submit:hover{ color: var(--accent-dp); border-color: var(--accent-dp); }
.form-note{ font-size:.9rem; margin-bottom:1.5rem; color: var(--accent); }
.form-note.is-error{ color: #9C3E29; }

@media (max-width: 780px){ .contact-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   8. FOOTER
   ========================================================= */
.site-footer{ border-top: 1px solid var(--line); padding: 2.5rem 0; }
.site-footer .container{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  max-width: var(--wide);
}
.footer-tag{ color: var(--faint); font-size:.88rem; margin:0; }
.footer-links{ display:flex; gap:1.75rem; }
.footer-links a{ font-size:.88rem; color: var(--muted); }
.footer-links a:hover{ color: var(--ink); }

/* =========================================================
   9. GENERIC PAGE / SINGLE CONTENT (WP editor output)
   ========================================================= */
.page-content{ padding: clamp(3.5rem, 8vw, 6rem) 0; }
.page-content .container{ max-width: var(--content); }
.page-content h1{ font-size: clamp(1.9rem, 4vw, 2.5rem); margin-bottom:1rem; }
.page-content .entry-content{ font-size:1.05rem; color: var(--ink); }
.page-content .entry-content > * { max-width: 66ch; }
.page-content .entry-content img{ margin: 1.5em 0; }