/*

Theme Name: kalpanabhattarai

Theme URI: 

Author:  kalpanabhattarai

Author URI: 

Description: Responsive theme for kalpanabhattarai .

Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready

Version: 1.0

License: GNU General Public License v2 or later

Text Domain: kalpanabhattarai

*/


    /* Reset & base */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    :root{
      --accent:#A8C6E9;
      --light:#E6F0FB;
      --dark:#0b1720;
      --container:1200px;
    }
    body{
      font-family: "Roboto", sans-serif;
      line-height: 1.35;
      overflow-x: hidden;
    }

    /* Container */
    .container{
      width: 94%;
      max-width: var(--container);
      margin: 0 auto;
    }

    /* Header */
    .site-header{
      position: absolute;
      left: 0; right: 0; top: 12px;
      z-index: 60;
      pointer-events: auto;
    }
    .site-header .container{
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
    .logo{
      font-family: "Playfair Display", serif;
      color: rgba(255,255,255,0.9);
      text-decoration:none;
      font-size: 20px;
      letter-spacing:1px;
      opacity:0.95;
    }

    /* Nav */
    .main-nav ul{ list-style:none; display:flex; gap:24px; align-items:center; }
    .main-nav a{
      text-decoration:none; color: #fff; font-weight:500; letter-spacing:0.6px;
      padding:8px 4px;
      transition: color 0.3s ease;
    }
    .main-nav a:hover { color: var(--accent); }
    .main-nav a.active{ border-bottom:2px solid var(--accent); }

    .nav-toggle{
      background:transparent; border:0; cursor:pointer;
      width:38px; height:28px; padding:0; position:relative;
      display: none; /* Start hidden, show only on mobile */
    }
    .nav-toggle .bar{
      display:block; height:3px; background: rgba(255,255,255,0.9); margin:5px 0;
      border-radius:2px; transition: transform .25s ease, opacity .2s;
    }

    /* Hero */
    .hero{
      position:relative;
      min-height: 100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }
    .hero-bg{
      position:absolute; inset:0;
      background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
      background-size:cover; 
      background-position:center;
      background-attachment: fixed;
      filter: saturate(.9) contrast(.92) brightness(0.7);
      z-index: 1;
    }
    .hero-overlay{
      position:absolute; inset:0; 
      background: linear-gradient(135deg, rgba(5,10,18,0.7) 0%, rgba(3,8,14,0.5) 50%, rgba(5,10,18,0.3) 100%);
      z-index:2;
    }

    /* inner layout */
    .hero-inner{
      position:relative;
      z-index:30;
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 30px;
      padding:120px 0 80px;
    }

    /* text left */
    .hero-text{
      max-width: 55%;
    }
    .name{
      font-family: "Playfair Display", serif;
      font-size: 88px;
      line-height:0.9;
      color: var(--accent);
      /*text-transform: lowercase;*/
      letter-spacing: -2px;
      margin-bottom: 12px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    .role{
      font-weight:700; font-size: 28px;
      color: var(--light);
      background: rgba(0,0,0,0.3);
      display:inline-block; padding:10px 16px;
      border-radius:6px;
      backdrop-filter: blur(5px);
    }

    /* profile circle right */
    .profile-wrap{
      width: 460px;
      height: 460px;
      flex: 0 0 460px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      overflow:hidden;
      box-shadow: 0 20px 40px rgba(2,6,12,0.8);
      border: 4px solid rgba(255,255,255,0.1);
      background: rgba(0,0,0,0.25);
      transition: transform 0.3s ease;
    }
    .profile-wrap:hover {
      transform: translateY(-5px);
    }
    .profile-photo{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    /* social section */
    .social-section{ background: #fff; color:#333; padding:28px 0; }
    .social-center{ display:flex; gap:14px; justify-content:center; align-items:center; }
    .social-btn{
      display:inline-flex; align-items:center; justify-content:center;
      width:44px; height:44px; border-radius:8px; background:#cfe6ff; text-decoration:none;
      box-shadow: 0 6px 14px rgba(12,40,80,0.06);
      transition: all 0.3s ease;
    }
    .social-btn:hover {
      transform: translateY(-3px);
      background: var(--accent);
    }
    .social-btn img{ width:22px; height:22px; filter:grayscale(100%); opacity:.95; transition: all 0.3s ease; }
    .social-btn:hover img { filter: grayscale(0); opacity: 1; }

    /* footer */
    .site-footer{ text-align:center; padding:34px 0; background:#fafafa; color:#667; font-size:14px; }

    /* RESPONSIVE */
    /* Tablet */
    @media (max-width: 1024px){
      .hero-inner{ gap: 40px; padding: 100px 0 60px; }
      .name{ font-size: 72px; }
      .profile-wrap{ width: 380px; height: 380px; flex: 0 0 380px; }
    }

    /* small screens: stack, center everything */
    @media (max-width: 900px){
      .hero-inner{ 
        flex-direction:column-reverse; 
        gap:40px; 
        align-items:center; 
        text-align: center;
        padding: 120px 0 60px;
      }
      .hero-text{ max-width: 100%; }
      .name{ font-size: 60px; letter-spacing:-1px; }
      .role{ font-size:22px; }
      .profile-wrap{ 
        width:320px; height:320px; flex:0 0 320px; 
        margin-top: 20px;
      }
    }

    /* mobile: collapse nav into toggle */
    @media (max-width: 768px){
      /* Show the toggle button on mobile */
      .nav-toggle{ 
        display: inline-block; 
        z-index: 100;
      }
      
      /* Hide the main nav by default on mobile */
      .main-nav{ 
        position: fixed; 
        top: 0; 
        right: 0; 
        z-index: 99; 
        transform: translateX(100%); 
        transition: transform 0.3s ease; 
        background: rgba(3,10,18,0.98); 
        backdrop-filter: blur(10px);
        padding: 80px 30px 30px 30px; 
        height: 100vh; 
        width: 280px; 
      }
      
      /* Show nav when open class is added */
      .main-nav.open{ 
        transform: translateX(0); 
      }
      
      .main-nav ul{ 
        flex-direction: column; 
        gap: 24px; 
        align-items: flex-start; 
      }
      .main-nav a{ 
        color: #fff; 
        font-size: 20px; 
        padding: 10px 0; 
        display: block;
        width: 100%;
      }
      
      /* Hamburger animation */
      .nav-toggle.open .bar:nth-child(1){ 
        transform: translateY(8px) rotate(45deg); 
      }
      .nav-toggle.open .bar:nth-child(2){ 
        opacity: 0; 
      }
      .nav-toggle.open .bar:nth-child(3){ 
        transform: translateY(-8px) rotate(-45deg); 
      }

      .name{ font-size:48px; }
      .profile-wrap{ width:280px; height:280px; flex: 0 0 280px; }
      .hero{ min-height:100vh; }
      .hero-bg { background-attachment: scroll; }
    }

    /* small mobile */
    @media (max-width: 480px){
      .name{ font-size:42px; }
      .role{ font-size:20px; padding:8px 14px; }
      .profile-wrap{ width:240px; height:240px; flex: 0 0 240px; }
      .hero-inner { padding: 100px 0 40px; }
      .logo { font-size: 18px; }
      .main-nav { width: 100%; padding: 90px 30px 30px; }
    }

    /* tiny screens */
    @media (max-width: 380px){
      .name{ font-size:36px; }
      .profile-wrap{ width:200px; height:200px; flex: 0 0 200px; }
      .role{ font-size:18px; padding:6px 12px; }
    }

    /* Extra small devices */
    @media (max-width: 320px){
      .name{ font-size:32px; }
      .profile-wrap{ width:180px; height:180px; }
      .hero-inner { gap: 30px; }
    }
  
  
  
  
  
  /* -----------------------
   Blog / Recent Work Grid
   ----------------------- */

/* Variables */
:root{
  --card-bg: #ffffff;
  --muted: #6b7b87;
  --accent: #0577ff;
  --shadow: 0 12px 30px rgba(12,18,40,0.06);
  --radius: 12px;
}

/* Container */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
  margin-top: 20px;
}

/* Card */
.article-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
  box-shadow: var(--shadow);
  border: 1px solid rgba(12,18,40,0.03);
}

/* hover lift */
.article-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(12,18,40,0.10);
}

/* Image area */
.article-image{
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
  flex-shrink: 0;
}

/* subtle overlay */
.article-image::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,7,18,0.0) 30%, rgba(3,7,18,0.18) 100%);
  transition: opacity .22s ease;
}

/* Category badge */
.article-category{
  position: absolute;
  left: 14px;
  top: 14px;
  background: rgba(255,255,255,0.95);
  color: var(--accent);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(7,123,255,0.06);
  z-index: 3;
}

/* Content */
.article-content{
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}

/* Meta */
.article-meta{
  display:flex;
  gap:12px;
  font-size: 13px;
  color: var(--muted);
  align-items:center;
  flex-wrap:wrap;
}
.article-meta i { margin-right:6px; opacity:0.85; }

/* Title */
.article-title{
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  color: #071426;
  font-weight: 700;
}
.article-title a{
  color: inherit;
  text-decoration: none;
}
.article-title a:hover{
  color: var(--accent);
  text-decoration: underline;
}

/* Excerpt - clamp to 3 lines */
.article-excerpt{
  margin: 0;
  color: #475563;
  font-size: 15px;
  line-height: 1.6;
  /* line-clamp */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Read more button */
.read-more{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  align-self: flex-start;
  background: linear-gradient(90deg, var(--accent), #00b4ff);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(5,119,255,0.14);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
}
.read-more i { font-size: 12px; opacity: 0.95; }
.read-more:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(5,119,255,0.16);
}

/* Small helper for empty category */
.article-category:empty { display:none; }

/* Responsive */
@media (max-width: 1024px){
  .articles-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .article-image { height: 200px; }
}

@media (max-width: 640px){
  .articles-grid { grid-template-columns: 1fr; gap: 16px; }
  .article-image { height: 180px; }
  .article-content { padding: 16px; }
  .article-title { font-size: 18px; }
}