/* ================================================
   PRATHAMESH PERSONAL PORTFOLIO — main.css v3
   
   KEY FIXES:
   1. Mobile nav now comes from PHP — CSS just styles it
   2. Tablet desktop mode fixed — proper breakpoints
   3. Touch device detection works correctly
   4. Desktop mode on mobile phone handled properly
================================================ */

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


/* ── 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; }


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


/* ── 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;
}

.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;
}

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

.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;
}

.pf-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.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;
}


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


/* ── 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;
}

.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;
}

.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;
}


/* ── 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;
  line-height: 1.2 !important;
}

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


/* ── PROJECT FEED ── */
.pf-feed {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.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; }

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

.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;
}

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

.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); }

.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;
  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;
  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; }

.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; }


/* ── 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;
}

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

.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;
}

.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;
}

.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; }


/* ── MOBILE BOTTOM NAV — PHP injected via wp_footer ── */
/*
 * This nav is output by functions.php on EVERY page.
 * We hide it on desktop with CSS.
 * On mobile it shows fixed at the bottom.
 * No JavaScript needed to create it — it is always in the DOM.
 */
.pf-bottom-nav {
  display: none; /* hidden on desktop by default */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  background: #ffffff;
  border-top: 0.5px solid #e0e0e0;
  align-items: center;
  justify-content: space-around;
  z-index: 99999;
  padding-bottom: env(safe-area-inset-bottom);
}

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

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

.pf-bottom-nav-item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  flex-shrink: 0;
}


/* ── 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; }
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,
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-nav-name { color: #999999 !important; }
body.pf-dark .pf-nav-item.active .pf-nav-name { color: #7B72D9 !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 { 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-bottom-nav { background: #0f0f0f; border-top-color: #2a2a2a; }
body.pf-dark .pf-bottom-nav-item { color: #666666; }
body.pf-dark .pf-bottom-nav-item.active,
body.pf-dark .pf-bottom-nav-item:hover { color: #7B72D9; }


/* ── WORDPRESS BLOCK OVERRIDES ── */
.wp-site-blocks {
  padding: 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; }
.wp-block-social-links:not(.is-style-logos-only) .wp-social-link {
  background-color: transparent !important;
}


/* ═══════════════════════════════════════════════
   TABLET — 768px to 1199px
   Right sidebar hidden
   Left sidebar narrower
   ═══════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199px) {

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

  /* Hide right sidebar on tablet */
  .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; }

  /* Keep bottom nav hidden on tablet */
  .pf-bottom-nav { display: none !important; }
}


/* ═══════════════════════════════════════════════
   MOBILE — max-width: 767px
   Single column, horizontal snap scroll,
   PHP-injected bottom nav becomes visible
   ═══════════════════════════════════════════════ */
@media (max-width: 767px) {

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

  /* Single column — no sidebars */
  .pf-shell {
    grid-template-columns: 1fr !important;
    height: 100vh !important;
  }

  .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;
  }

  /* Body padding — content does not hide behind bottom nav */
  body { padding-bottom: 68px !important; overflow: hidden !important; }

  /* ── BOTTOM NAV — show on mobile ── */
  /* The nav HTML is already in the DOM from PHP.
     We just switch display from none to flex here. */
  .pf-bottom-nav {
    display: flex !important;
  }

  /* Mobile project tabs — horizontal scrollable */
  .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;
    -webkit-tap-highlight-color: transparent;
  }
  .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;
  }

  /* 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; }
}


/* ── 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; }
  .pf-bottom-nav { height: 56px !important; }
  .pf-bottom-nav-item { font-size: 9px; padding: 4px 6px; }
}