/* ================================================
   PRATHAMESH PERSONAL PORTFOLIO — main.css
   Pixel-perfect match to mockup
   Sections:
   1. Google Font
   2. Reset
   3. Shell (3-col grid)
   4. Left Sidebar
   5. Center Column
   6. Topbar
   7. Intro
   8. Project Feed + Cards
   9. Right Sidebar
   10. Badge
   11. Dark Mode
   12. WordPress overrides
   13. Tablet (max 1199px)
   14. Mobile (max 767px)
   15. Small mobile (max 380px)
================================================ */


/* ── 1. GOOGLE FONT ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');


/* ── 2. RESET ───────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #111111;
  background: #ffffff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: #534AB7;
  text-decoration: none;
  transition: color 0.15s;
}
a:hover { color: #3C3489; }

img {
  display: block;
  max-width: 100%;
}

ul { list-style: none; }


/* ── 3. SHELL ───────────────────────────────── */
/* Wrapper for the whole site — 3 columns */

.pf-shell {
  display: grid !important;
  grid-template-columns: 220px 1fr 200px !important;
  height: 100vh !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #ffffff !important;
}


/* ── 4. LEFT SIDEBAR ────────────────────────── */

.pf-left {
  border-right: 0.5px solid #e0e0e0 !important;
  background: #f5f5f5 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  display: block !important;
  padding: 0 !important;
}

.pf-left::-webkit-scrollbar { display: none; }

.pf-left-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 1.5rem 1.25rem !important;
}

/* "MY PROJECTS" label */
.pf-sidebar-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #999999 !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Query wrapper */
.pf-nav-query,
.pf-nav-query .wp-block-post-template {
  display: block !important;
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Each project name row */
.pf-nav-item {
  padding: 8px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  margin-bottom: 2px !important;
  transition: background 0.15s !important;
}

.pf-nav-item:hover {
  background: #ffffff !important;
}

.pf-nav-item.active {
  background: #ffffff !important;
}

.pf-nav-item.active .pf-nav-name {
  color: #534AB7 !important;
  font-weight: 500 !important;
}

.pf-nav-name {
  font-size: 14px !important;
  color: #666666 !important;
  font-weight: 400 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  transition: color 0.15s !important;
}

/* Dots container */
.pf-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 0;
}

.pf-dots .pip {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #e0e0e0;
  transition: all 0.2s;
  cursor: pointer;
  display: block;
}

.pf-dots .pip.active {
  background: #534AB7;
  height: 22px;
  border-radius: 4px;
}


/* ── 5. CENTER COLUMN ───────────────────────── */

.pf-center {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
  min-height: 0 !important;
}


/* ── 6. TOPBAR ──────────────────────────────── */

.pf-topbar {
  padding: 1.25rem 2rem !important;
  border-bottom: 0.5px solid #e0e0e0 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  background: #ffffff !important;
  min-height: 0 !important;
}

/* Site name */
.pf-site-name,
.pf-site-name a,
.pf-topbar .wp-block-site-title,
.pf-topbar .wp-block-site-title a {
  font-size: 22px !important;
  font-weight: 500 !important;
  color: #111111 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Available badge */
.pf-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #EAF3DE !important;
  border-radius: 20px !important;
  padding: 3px 11px !important;
  flex-shrink: 0 !important;
}

.pf-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #639922;
  display: inline-block;
  flex-shrink: 0;
  animation: pfpulse 2s infinite;
}

@keyframes pfpulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

.pf-badge-text {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #3B6D11 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}


/* ── 7. INTRO ───────────────────────────────── */

.pf-intro {
  padding: 1.25rem 2rem !important;
  border-bottom: 0.5px solid #e0e0e0 !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
}

.pf-intro-heading {
  font-size: 32px !important;
  font-weight: 500 !important;
  color: #111111 !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.pf-intro-sub {
  font-size: 13px !important;
  color: #666666 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ── 8. PROJECT FEED + CARDS ────────────────── */

/* The snap scroll container */
.pf-feed {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Inner scroll wrapper — this is what actually scrolls */
/* We set this via JS by adding .pf-feed-inner */
.pf-query {
  height: 100% !important;
  overflow-y: scroll !important;
  scroll-snap-type: y mandatory !important;
  scrollbar-width: none !important;
  scroll-behavior: smooth !important;
}

.pf-query::-webkit-scrollbar { display: none; }

/* WordPress post-template wrapper */
.pf-query > .wp-block-post-template,
.pf-loop {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
}

/* WordPress wraps each post in a li or div */
.pf-loop > li,
.pf-loop > .wp-block-post,
.pf-query .wp-block-post {
  height: 100% !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Our card inside each post */
.pf-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 1.5rem 2rem !important;
  gap: 16px !important;
  background: #ffffff !important;
}

/* Project image — fills remaining space */
.pf-card-img,
.pf-card .wp-block-post-featured-image {
  flex: 1 !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #f5f5f5 !important;
  border: 0.5px dashed #e0e0e0 !important;
}

.pf-card-img img,
.pf-card .wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.pf-card:hover .pf-card-img img,
.pf-card:hover .wp-block-post-featured-image img {
  transform: scale(1.02);
}

/* Meta section — always at bottom */
.pf-card-meta {
  flex-shrink: 0 !important;
  padding: 0 !important;
}

.pf-card-title,
.pf-card-meta .wp-block-post-title {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #111111 !important;
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

.pf-card-desc,
.pf-card-desc p,
.pf-card-meta .wp-block-post-excerpt p {
  font-size: 13px !important;
  color: #666666 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.6 !important;
}

.pf-card-link,
.pf-card-link a,
.pf-card .wp-block-read-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #534AB7 !important;
  text-decoration: none !important;
  margin-top: 8px !important;
  transition: all 0.2s !important;
}

.pf-card-link:hover,
.pf-card-link a:hover,
.pf-card .wp-block-read-more:hover {
  color: #3C3489 !important;
  gap: 8px !important;
}

/* No projects message */
.pf-empty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  padding: 2rem !important;
}

.pf-empty p {
  color: #999999 !important;
  text-align: center !important;
}


/* ── 9. RIGHT SIDEBAR ───────────────────────── */

.pf-right {
  border-left: 0.5px solid #e0e0e0 !important;
  background: #f5f5f5 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  display: block !important;
  padding: 0 !important;
}

.pf-right::-webkit-scrollbar { display: none; }

.pf-right-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 1.5rem 1.25rem !important;
  gap: 0 !important;
}

.pf-right-section {
  margin-bottom: 1.5rem !important;
}

/* Pages nav */
.pf-pages-nav .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.pf-pages-nav .wp-block-navigation-item__content {
  font-size: 14px !important;
  color: #666666 !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  display: block !important;
  transition: background 0.15s, color 0.15s !important;
}

.pf-pages-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content {
  background: #ffffff !important;
  color: #111111 !important;
}

/* Socials */
.pf-socials.wp-block-social-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pf-socials .wp-block-social-link {
  border-radius: 6px !important;
  transition: background 0.15s !important;
}

.pf-socials .wp-block-social-link a,
.pf-socials .wp-social-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  font-size: 14px !important;
  color: #666666 !important;
  background: none !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: background 0.15s, color 0.15s !important;
}

.pf-socials .wp-block-social-link:hover a,
.pf-socials .wp-block-social-link:hover .wp-social-link {
  background: #ffffff !important;
  color: #111111 !important;
}

.pf-socials .wp-block-social-link svg {
  width: 16px !important;
  height: 16px !important;
  fill: #999999 !important;
  flex-shrink: 0 !important;
}

/* Dark mode toggle */
.pf-right-bottom {
  margin-top: auto;
}

.pf-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border-radius: 999px;
  border: 0.5px solid #e0e0e0;
  background: none;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  color: #666666;
  cursor: pointer;
  transition: all 0.2s;
}

.pf-theme-btn:hover {
  background: #ffffff;
  color: #111111;
  border-color: #111111;
}


/* ── 10. DARK MODE ──────────────────────────── */

body.pf-dark {
  background: #0f0f0f;
  color: #f0f0f0;
}

body.pf-dark .pf-shell       { background: #0f0f0f !important; }
body.pf-dark .pf-left        { background: #1a1a1a !important; border-color: #2a2a2a !important; }
body.pf-dark .pf-right       { background: #1a1a1a !important; border-color: #2a2a2a !important; }
body.pf-dark .pf-center      { background: #0f0f0f !important; }
body.pf-dark .pf-topbar      { background: #0f0f0f !important; border-color: #2a2a2a !important; }
body.pf-dark .pf-intro       { background: #0f0f0f !important; border-color: #2a2a2a !important; }
body.pf-dark .pf-card        { background: #0f0f0f !important; border-color: #2a2a2a !important; }

body.pf-dark .pf-site-name,
body.pf-dark .pf-topbar .wp-block-site-title,
body.pf-dark .pf-topbar .wp-block-site-title a { color: #f0f0f0 !important; }

body.pf-dark .pf-intro-heading,
body.pf-dark .pf-card-title,
body.pf-dark .pf-card .wp-block-post-title { color: #f0f0f0 !important; }

body.pf-dark .pf-intro-sub,
body.pf-dark .pf-card-desc,
body.pf-dark .pf-card-desc p { color: #999999 !important; }

body.pf-dark .pf-nav-item.active { background: #0f0f0f !important; }
body.pf-dark .pf-nav-item:hover  { background: #0f0f0f !important; }

body.pf-dark .pf-dots .pip        { background: #2a2a2a; }
body.pf-dark .pf-dots .pip.active { background: #7B72D9; }

body.pf-dark .pf-card-img,
body.pf-dark .pf-card .wp-block-post-featured-image { background: #1a1a1a !important; border-color: #2a2a2a !important; }

body.pf-dark .pf-pages-nav .wp-block-navigation-item__content { color: #999999 !important; }
body.pf-dark .pf-pages-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content { background: #0f0f0f !important; color: #f0f0f0 !important; }

body.pf-dark .pf-socials .wp-block-social-link a,
body.pf-dark .pf-socials .wp-social-link { color: #999999 !important; }
body.pf-dark .pf-socials .wp-block-social-link:hover a { background: #0f0f0f !important; color: #f0f0f0 !important; }

body.pf-dark .pf-theme-btn { border-color: #2a2a2a; color: #999999; }
body.pf-dark .pf-theme-btn:hover { background: #1a1a1a; color: #f0f0f0; border-color: #f0f0f0; }

body.pf-dark .pf-nav-name { color: #999999 !important; }
body.pf-dark .pf-nav-item.active .pf-nav-name { color: #7B72D9 !important; }


/* ── 11. WORDPRESS BLOCK OVERRIDES ─────────── */
/* Remove all default WP spacing/margins */

.wp-site-blocks {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  height: 100vh !important;
  overflow: hidden !important;
}

.wp-site-blocks > * { margin-top: 0 !important; }

.wp-block-group,
.wp-block-template-part {
  margin: 0 !important;
}

.wp-block-post-template {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove WP default social link colored backgrounds */
.wp-block-social-links:not(.is-style-logos-only) .wp-social-link {
  background-color: transparent !important;
  color: inherit !important;
}

/* Remove WP adding padding to site blocks */
body > .wp-site-blocks {
  padding: 0 !important;
}


/* ── 12. TABLET — max-width: 1199px ─────────── */

@media (max-width: 1199px) {

  .pf-shell {
    grid-template-columns: 160px 1fr !important;
  }

  /* Hide right sidebar */
  .pf-right {
    display: none !important;
  }

  .pf-topbar {
    padding: 1rem 1.5rem !important;
    justify-content: space-between !important;
  }

  .pf-intro {
    padding: 1rem 1.5rem !important;
  }

  .pf-intro-heading {
    font-size: 24px !important;
  }

  .pf-card {
    padding: 1rem 1.5rem !important;
  }

  .pf-site-name,
  .pf-topbar .wp-block-site-title,
  .pf-topbar .wp-block-site-title a {
    font-size: 18px !important;
  }
}


/* ── 13. MOBILE — max-width: 767px ──────────── */

@media (max-width: 767px) {

  html, body {
    overflow: hidden !important;
    height: 100% !important;
  }

  .pf-shell {
    grid-template-columns: 1fr !important;
    height: 100vh !important;
  }

  /* Hide both sidebars */
  .pf-left,
  .pf-right {
    display: none !important;
  }

  .pf-center {
    height: 100vh !important;
  }

  .pf-topbar {
    padding: 0.75rem 1rem !important;
  }

  .pf-site-name,
  .pf-topbar .wp-block-site-title,
  .pf-topbar .wp-block-site-title a {
    font-size: 16px !important;
  }

  .pf-intro {
    padding: 0.75rem 1rem !important;
  }

  .pf-intro-heading {
    font-size: clamp(18px, 5vw, 24px) !important;
  }

  /* Horizontal snap scroll on mobile */
  .pf-feed {
    overflow: hidden !important;
  }

  .pf-query {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    height: 100% !important;
  }

  .pf-query > .wp-block-post-template,
  .pf-loop {
    display: flex !important;
    flex-direction: row !important;
    height: 100% !important;
  }

  .pf-loop > li,
  .pf-loop > .wp-block-post,
  .pf-query .wp-block-post {
    min-width: 100vw !important;
    width: 100vw !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
  }

  .pf-card {
    padding: 1rem !important;
    height: 100% !important;
  }

  .pf-card-img,
  .pf-card .wp-block-post-featured-image {
    height: 42vw !important;
    min-height: 160px !important;
    flex: none !important;
  }

  /* Mobile tabs — horizontal project name list */
  .pf-mobile-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 1rem;
    overflow-x: auto;
    border-bottom: 0.5px solid #e0e0e0;
    scrollbar-width: none;
    flex-shrink: 0;
    background: #ffffff;
  }

  .pf-mobile-tabs::-webkit-scrollbar { display: none; }

  .pf-mobile-tab {
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    border: 0.5px solid #e0e0e0;
    color: #666666;
    background: #ffffff;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.15s;
    flex-shrink: 0;
  }

  .pf-mobile-tab.active {
    background: #EEEDFE;
    color: #534AB7;
    border-color: #534AB7;
  }

  /* Mobile dot indicators */
  .pf-mobile-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    flex-shrink: 0;
    background: #ffffff;
  }

  .pf-mobile-dots .pip {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #e0e0e0;
    cursor: pointer;
    transition: all 0.2s;
  }

  .pf-mobile-dots .pip.active {
    background: #534AB7;
    width: 18px;
    border-radius: 3px;
  }

  /* Mobile bottom nav bar */
  .pf-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #ffffff;
    border-top: 0.5px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 999;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .pf-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-family: 'Inter', sans-serif;
    color: #999999;
    text-decoration: none;
    padding: 6px 10px;
    transition: color 0.15s;
  }

  .pf-bottom-nav a.active,
  .pf-bottom-nav a:hover { color: #534AB7; }

  .pf-bottom-nav svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body { padding-bottom: 60px; }

  /* Dark mobile */
  body.pf-dark .pf-mobile-tabs  { background: #0f0f0f; border-color: #2a2a2a; }
  body.pf-dark .pf-mobile-tab   { background: #0f0f0f; border-color: #2a2a2a; color: #999999; }
  body.pf-dark .pf-mobile-tab.active { background: #1e1a3a; color: #7B72D9; border-color: #7B72D9; }
  body.pf-dark .pf-mobile-dots  { background: #0f0f0f; }
  body.pf-dark .pf-bottom-nav   { background: #0f0f0f; border-color: #2a2a2a; }
}


/* ── 14. SMALL MOBILE — max-width: 380px ────── */

@media (max-width: 380px) {

  .pf-intro-heading { font-size: 18px !important; }
  .pf-card          { padding: 0.75rem !important; }
  .pf-card-title,
  .pf-card .wp-block-post-title { font-size: 15px !important; }
  .pf-topbar        { padding: 0.6rem 0.75rem !important; }
}