/*
Theme Name: Kamran Portfolio
Theme URI: https://github.com/kamran-khajehnasiri/kamran-portfolio
Author: Kamran KhajehNasiri
Author URI: https://kamrankhajehnasiri.com
Description: A modern, fully responsive, bilingual (Persian/English, RTL/LTR) WordPress portfolio theme with a dark glassmorphism design and stylish neon accents. Built for advertising agencies, designers, motion designers, photographers and videographers to showcase their work. All neon colors, spacing and typography are adjustable from the WordPress Customizer. Designed & coded by Kamran KhajehNasiri.
Version: 1.0.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: kamran-portfolio
Domain Path: /languages
Tags: portfolio, dark, rtl-language-support, right-sidebar, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, responsive-layout, grid-layout, one-column

Kamran Portfolio WordPress Theme, Copyright 2026 Kamran KhajehNasiri
Kamran Portfolio is distributed under the terms of the GNU GPL v2 or later.

Designer & Developer: Kamran KhajehNasiri
*/

/* =========================================================
   0. DESIGN TOKENS (defaults – overridden live via Customizer
      through inline CSS custom properties, see inc/customizer.php)
   ========================================================= */
:root{
  --kp-bg-base:#0a0a0f;
  --kp-bg-elevated:#12121a;
  --kp-glass-bg:rgba(255,255,255,0.05);
  --kp-glass-border:rgba(255,255,255,0.12);
  --kp-glass-blur:16px;
  --kp-text-primary:#f4f4f8;
  --kp-text-muted:#9a9ab0;
  --kp-neon-primary:#00f0ff;
  --kp-neon-secondary:#ff00e5;
  --kp-neon-accent:#b6ff00;
  --kp-radius:20px;
  --kp-radius-sm:12px;
  --kp-container:1320px;
  --kp-section-spacing:120px;
  --kp-font-heading:'Vazirmatn','Inter',sans-serif;
  --kp-font-body:'Vazirmatn','Inter',sans-serif;
  --kp-heading-scale:1;
  --kp-body-scale:1;
  --kp-transition:280ms cubic-bezier(.2,.8,.2,1);
}

/* =========================================================
   1. RESET & BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 15% -10%, rgba(0,240,255,.08), transparent 60%),
             radial-gradient(1000px 500px at 100% 10%, rgba(255,0,229,.07), transparent 55%),
             var(--kp-bg-base);
  color:var(--kp-text-primary);
  font-family:var(--kp-font-body);
  font-size:calc(16px * var(--kp-body-scale));
  line-height:1.75;
  min-height:100vh;
  overflow-x:hidden;
}
body.rtl{direction:rtl;text-align:right;}
body:not(.rtl){direction:ltr;text-align:left;}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--kp-neon-primary);color:#000;}

h1,h2,h3,h4,h5,h6{
  font-family:var(--kp-font-heading);
  font-weight:800;
  line-height:1.25;
  margin:0 0 .6em;
  letter-spacing:-.01em;
}
h1{font-size:calc(3rem * var(--kp-heading-scale));}
h2{font-size:calc(2.25rem * var(--kp-heading-scale));}
h3{font-size:calc(1.6rem * var(--kp-heading-scale));}
p{margin:0 0 1.2em;color:var(--kp-text-muted);}

.kp-container{max-width:var(--kp-container);margin:0 auto;padding:0 24px;}
.kp-section{padding-block:var(--kp-section-spacing);position:relative;}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);overflow:hidden;height:1px;width:1px;}

/* =========================================================
   2. GLASS UI SYSTEM
   ========================================================= */
.kp-glass{
  background:var(--kp-glass-bg);
  border:1px solid var(--kp-glass-border);
  border-radius:var(--kp-radius);
  -webkit-backdrop-filter:blur(var(--kp-glass-blur)) saturate(140%);
  backdrop-filter:blur(var(--kp-glass-blur)) saturate(140%);
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  transition:transform var(--kp-transition), box-shadow var(--kp-transition), border-color var(--kp-transition);
}
.kp-glass:hover{border-color:var(--kp-neon-primary);}

.kp-neon-text{
  color:var(--kp-neon-primary);
  text-shadow:0 0 6px color-mix(in srgb, var(--kp-neon-primary) 70%, transparent),
              0 0 22px color-mix(in srgb, var(--kp-neon-primary) 40%, transparent);
}
.kp-neon-outline{
  border:1px solid var(--kp-neon-primary);
  box-shadow:0 0 8px color-mix(in srgb, var(--kp-neon-primary) 60%, transparent) inset,
             0 0 18px color-mix(in srgb, var(--kp-neon-primary) 45%, transparent);
}

.kp-btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.9em 1.9em;
  border-radius:999px;
  font-weight:700;font-size:.95rem;
  background:linear-gradient(135deg, var(--kp-neon-primary), var(--kp-neon-secondary));
  color:#04040a;
  border:none;
  box-shadow:0 0 24px color-mix(in srgb, var(--kp-neon-primary) 45%, transparent);
  transition:transform var(--kp-transition), box-shadow var(--kp-transition), filter var(--kp-transition);
}
.kp-btn:hover{transform:translateY(-3px);filter:brightness(1.1);box-shadow:0 6px 30px color-mix(in srgb, var(--kp-neon-secondary) 55%, transparent);}
.kp-btn-outline{
  background:transparent;color:var(--kp-text-primary);
  border:1px solid var(--kp-glass-border);
}
.kp-btn-outline:hover{border-color:var(--kp-neon-primary);color:var(--kp-neon-primary);}

/* skip link */
.kp-skip-link{position:absolute;top:-60px;inset-inline-start:10px;background:var(--kp-neon-primary);color:#000;padding:10px 18px;border-radius:8px;z-index:9999;transition:top .2s;}
.kp-skip-link:focus{top:10px;}

/* =========================================================
   3. HEADER
   ========================================================= */
.kp-header{position:sticky;top:0;z-index:500;padding:14px 0;}
.kp-header.is-scrolled{background:rgba(10,10,15,.65);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--kp-glass-border);}
.kp-header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.kp-logo{font-size:1.4rem;font-weight:800;}
.kp-logo img{max-height:44px;}

.kp-nav{display:flex;}
.kp-nav ul{display:flex;gap:8px;align-items:center;}
.kp-nav a{padding:10px 16px;border-radius:999px;font-weight:600;transition:background var(--kp-transition), color var(--kp-transition);}
.kp-nav a:hover,.kp-nav .current-menu-item>a{background:var(--kp-glass-bg);color:var(--kp-neon-primary);}

.kp-burger{display:none;width:46px;height:46px;border-radius:12px;align-items:center;justify-content:center;background:var(--kp-glass-bg);border:1px solid var(--kp-glass-border);}
.kp-burger span{display:block;width:20px;height:2px;background:var(--kp-text-primary);position:relative;}
.kp-burger span::before,.kp-burger span::after{content:'';position:absolute;inset-inline-start:0;width:20px;height:2px;background:var(--kp-text-primary);}
.kp-burger span::before{top:-6px;}
.kp-burger span::after{top:6px;}

/* =========================================================
   4. HERO
   ========================================================= */
.kp-hero{min-height:var(--kp-hero-height, 88vh);display:flex;align-items:center;position:relative;overflow:hidden;}
.kp-hero::before{content:'';position:absolute;inset:0;background:var(--kp-hero-bg-image) center/cover no-repeat;opacity:.35;filter:saturate(1.2);z-index:-2;}
.kp-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, transparent, var(--kp-bg-base) 92%);z-index:-1;}
.kp-hero-content{max-width:820px;}
.kp-hero-eyebrow{display:inline-block;padding:6px 16px;border-radius:999px;font-size:.8rem;font-weight:700;margin-bottom:18px;}
.kp-hero h1{margin-bottom:.4em;}
.kp-hero-cta{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap;}

/* floating glass blobs */
.kp-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;z-index:-1;animation:kp-float 12s ease-in-out infinite;}
@keyframes kp-float{0%,100%{transform:translateY(0) translateX(0);}50%{transform:translateY(-30px) translateX(20px);}}

/* =========================================================
   5. PORTFOLIO GRID
   ========================================================= */
.kp-filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:48px;}
.kp-filter-btn{padding:.6em 1.4em;border-radius:999px;background:var(--kp-glass-bg);border:1px solid var(--kp-glass-border);font-weight:600;font-size:.9rem;transition:all var(--kp-transition);}
.kp-filter-btn:hover,.kp-filter-btn.is-active{border-color:var(--kp-neon-primary);color:var(--kp-neon-primary);box-shadow:0 0 16px color-mix(in srgb, var(--kp-neon-primary) 35%, transparent);}

.kp-grid{display:grid;grid-template-columns:repeat(var(--kp-grid-cols-desktop, 3), 1fr);gap:28px;}
.kp-card{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:var(--kp-radius);}
.kp-card-media{position:absolute;inset:0;}
.kp-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.kp-card:hover .kp-card-media img{transform:scale(1.08);}
.kp-card-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;
  background:linear-gradient(0deg, rgba(5,5,10,.92) 0%, rgba(5,5,10,.15) 65%, transparent 100%);
  opacity:0;transform:translateY(10px);transition:all var(--kp-transition);}
.kp-card:hover .kp-card-overlay{opacity:1;transform:translateY(0);}
.kp-card-cat{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;}
.kp-card-title{font-size:1.25rem;margin:0;}
.kp-card-icon{position:absolute;top:20px;inset-inline-end:20px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:all var(--kp-transition);}
.kp-card:hover .kp-card-icon{opacity:1;transform:scale(1);}

/* masonry variant */
.kp-grid.is-masonry{grid-template-rows:masonry;}
.kp-grid.is-masonry .kp-card:nth-child(3n+2){aspect-ratio:4/6;}
.kp-grid.is-masonry .kp-card:nth-child(5n+1){aspect-ratio:5/4;}

/* =========================================================
   6. SINGLE PORTFOLIO
   ========================================================= */
.kp-single-hero{padding-top:60px;padding-bottom:60px;}
.kp-meta-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;padding:26px;margin:36px 0;}
.kp-meta-list dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--kp-text-muted);margin-bottom:6px;}
.kp-meta-list dd{margin:0;font-weight:700;}
.kp-single-gallery{display:grid;gap:24px;margin:48px 0;}
.kp-single-gallery img{border-radius:var(--kp-radius);}
.kp-related{margin-top:80px;}

/* =========================================================
   7. FOOTER
   ========================================================= */
.kp-footer{padding-block:80px 32px;border-top:1px solid var(--kp-glass-border);margin-top:100px;}
.kp-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:60px;}
.kp-social{display:flex;gap:12px;margin-top:20px;}
.kp-social a{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--kp-glass-bg);border:1px solid var(--kp-glass-border);transition:all var(--kp-transition);}
.kp-social a:hover{border-color:var(--kp-neon-primary);color:var(--kp-neon-primary);transform:translateY(-3px);}
.kp-footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid var(--kp-glass-border);font-size:.85rem;color:var(--kp-text-muted);}
.kp-credit a{color:var(--kp-neon-primary);}

/* =========================================================
   8. SCROLL REVEAL ANIMATION
   ========================================================= */
[data-kp-animate]{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease;}
[data-kp-animate].kp-in-view{opacity:1;transform:translateY(0);}
[data-kp-animate="fade"]{transform:none;}
[data-kp-animate="scale"]{transform:scale(.92);}
[data-kp-animate="scale"].kp-in-view{transform:scale(1);}

/* =========================================================
   9. FORMS
   ========================================================= */
.kp-field{margin-bottom:20px;}
.kp-field label{display:block;font-weight:600;margin-bottom:8px;font-size:.9rem;}
.kp-field input,.kp-field textarea,.kp-field select{
  width:100%;padding:14px 18px;border-radius:var(--kp-radius-sm);
  background:var(--kp-glass-bg);border:1px solid var(--kp-glass-border);
  color:var(--kp-text-primary);font-family:inherit;transition:border-color var(--kp-transition);
}
.kp-field input:focus,.kp-field textarea:focus{outline:none;border-color:var(--kp-neon-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--kp-neon-primary) 25%, transparent);}

/* =========================================================
   10. UTILITIES / A11Y / PRINT
   ========================================================= */
.kp-text-center{text-align:center;}
.kp-mt-0{margin-top:0;}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* =========================================================
   11. RESPONSIVE
   ========================================================= */
@media(max-width:1024px){
  .kp-grid{grid-template-columns:repeat(var(--kp-grid-cols-tablet, 2), 1fr);}
  .kp-footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:782px){
  .kp-nav,.kp-header-actions .kp-btn{display:none;}
  .kp-burger{display:flex;}
  h1{font-size:calc(2.1rem * var(--kp-heading-scale));}
  h2{font-size:calc(1.6rem * var(--kp-heading-scale));}
  .kp-grid{grid-template-columns:repeat(var(--kp-grid-cols-mobile, 1), 1fr);}
  .kp-section{padding-block:calc(var(--kp-section-spacing) * .55);}
  .kp-footer-grid{grid-template-columns:1fr;}
}

/* =========================================================
   12. SOCIAL ICONS (lightweight, no icon-font dependency)
   ========================================================= */
.kp-icon{display:inline-block;width:18px;height:18px;position:relative;}
.kp-icon::after{content:attr(data-i);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;letter-spacing:0;}
.kp-icon-instagram::after{content:"IG";}
.kp-icon-telegram::after{content:"TG";}
.kp-icon-whatsapp::after{content:"WA";}
.kp-icon-linkedin::after{content:"IN";}
.kp-icon-behance::after{content:"BE";}
.kp-icon-youtube::after{content:"YT";}

/* Mobile nav drawer */
.kp-mobile-nav{position:fixed;inset:0;z-index:900;background:rgba(8,8,12,.9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  opacity:0;pointer-events:none;transition:opacity .3s ease;}
.kp-mobile-nav.is-open{opacity:1;pointer-events:auto;}
.kp-mobile-nav a{font-size:1.6rem;font-weight:700;}
.kp-mobile-nav-close{position:absolute;top:24px;inset-inline-end:24px;width:44px;height:44px;}