/*
Theme Name: Jubayer Glass Pro
Theme URI: https://jubayer.net
Author: Jubayer Tech
Author URI: https://jubayer.net
Description: Jubayer Glass Pro is an ultra-premium glassmorphism WordPress theme built for Jubayer Tech — Tech Tutorials & AI Tips. Features a dark luxury SaaS-dashboard aesthetic, frosted glass cards, floating panels, scroll reveal animations, mouse glow effects and a fully custom Gutenberg-ready blog + portfolio layout. No page builder required.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jubayer-glass-pro
Tags: blog, portfolio, custom-menu, custom-logo, translation-ready, threaded-comments, featured-images, footer-widgets, dark
*/

/* =========================================================
   1. CSS VARIABLES / DESIGN TOKENS
   ========================================================= */
:root{
	--jgp-bg: #0B0F19;
	--jgp-bg-elevated: #0F1424;
	--jgp-glass: rgba(255,255,255,0.08);
	--jgp-glass-strong: rgba(255,255,255,0.14);
	--jgp-border: rgba(255,255,255,0.12);
	--jgp-primary: #8EE3FF;
	--jgp-secondary: #D6D9FF;
	--jgp-text: #FFFFFF;
	--jgp-muted: #AAB3C5;
	--jgp-radius: 20px;
	--jgp-radius-sm: 12px;
	--jgp-blur: 18px;
	--jgp-shadow: 0 8px 32px rgba(0,0,0,0.45);
	--jgp-font-heading: 'Poppins', sans-serif;
	--jgp-font-body: 'Inter', sans-serif;
	--jgp-container: 1280px;
	--jgp-transition: 0.35s cubic-bezier(.2,.8,.2,1);
}

/* =========================================================
   2. RESET
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	background:var(--jgp-bg);
	color:var(--jgp-text);
	font-family:var(--jgp-font-body);
	font-size:16px;
	line-height:1.7;
	overflow-x:hidden;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--jgp-primary); text-decoration:none; transition:color var(--jgp-transition); }
a:hover{ color:var(--jgp-secondary); }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5,h6{
	font-family:var(--jgp-font-heading);
	font-weight:600;
	color:var(--jgp-text);
	line-height:1.25;
	margin:0 0 20px;
}
p{ margin:0 0 20px; color:var(--jgp-muted); }
button, input, textarea, select{ font-family:var(--jgp-font-body); }

/* Background ambient glow layer */
body::before{
	content:"";
	position:fixed;
	inset:0;
	z-index:-2;
	background:
		radial-gradient(circle at 15% 20%, rgba(142,227,255,0.12), transparent 40%),
		radial-gradient(circle at 85% 10%, rgba(214,217,255,0.10), transparent 45%),
		radial-gradient(circle at 50% 90%, rgba(142,227,255,0.08), transparent 50%),
		var(--jgp-bg);
}

/* =========================================================
   3. LAYOUT / CONTAINER
   ========================================================= */
.jgp-container{ max-width:var(--jgp-container); margin:0 auto; padding:0 24px; }
.jgp-section{ padding:100px 0; position:relative; }
.jgp-section-head{ text-align:center; max-width:680px; margin:0 auto 60px; }
.jgp-eyebrow{
	display:inline-block;
	font-size:13px;
	letter-spacing:2px;
	text-transform:uppercase;
	color:var(--jgp-primary);
	background:var(--jgp-glass);
	border:1px solid var(--jgp-border);
	padding:6px 16px;
	border-radius:50px;
	margin-bottom:18px;
	backdrop-filter:blur(var(--jgp-blur));
}
.jgp-section-head h2{ font-size:clamp(28px,4vw,42px); margin-bottom:14px; }
.jgp-section-head p{ font-size:17px; }

/* =========================================================
   4. GLASSMORPHISM CORE COMPONENTS
   ========================================================= */
.jgp-glass{
	background:var(--jgp-glass);
	border:1px solid var(--jgp-border);
	backdrop-filter:blur(var(--jgp-blur)) saturate(140%);
	-webkit-backdrop-filter:blur(var(--jgp-blur)) saturate(140%);
	border-radius:var(--jgp-radius);
	box-shadow:var(--jgp-shadow);
}
.jgp-card{
	background:var(--jgp-glass);
	border:1px solid var(--jgp-border);
	backdrop-filter:blur(var(--jgp-blur));
	-webkit-backdrop-filter:blur(var(--jgp-blur));
	border-radius:var(--jgp-radius);
	padding:32px;
	position:relative;
	overflow:hidden;
	transition:transform var(--jgp-transition), box-shadow var(--jgp-transition), border-color var(--jgp-transition);
}
.jgp-card::before{
	content:"";
	position:absolute; inset:0;
	background:linear-gradient(135deg, rgba(255,255,255,0.10), transparent 60%);
	opacity:0;
	transition:opacity var(--jgp-transition);
	pointer-events:none;
}
.jgp-card:hover{
	transform:translateY(-8px);
	border-color:rgba(142,227,255,0.4);
	box-shadow:0 20px 50px rgba(0,0,0,0.5), 0 0 40px rgba(142,227,255,0.08);
}
.jgp-card:hover::before{ opacity:1; }

.jgp-btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:14px 30px;
	border-radius:50px;
	font-weight:600;
	font-size:15px;
	border:1px solid var(--jgp-border);
	cursor:pointer;
	transition:all var(--jgp-transition);
}
.jgp-btn-primary{
	background:linear-gradient(135deg, var(--jgp-primary), var(--jgp-secondary));
	color:#081018;
	border:none;
	box-shadow:0 10px 30px rgba(142,227,255,0.25);
}
.jgp-btn-primary:hover{
	transform:translateY(-3px);
	box-shadow:0 14px 40px rgba(142,227,255,0.4);
	color:#081018;
}
.jgp-btn-ghost{
	background:var(--jgp-glass);
	color:var(--jgp-text);
	backdrop-filter:blur(var(--jgp-blur));
}
.jgp-btn-ghost:hover{ background:var(--jgp-glass-strong); color:var(--jgp-text); transform:translateY(-3px); }

/* =========================================================
   5. HEADER
   ========================================================= */
#jgp-header{
	position:sticky; top:0; z-index:999;
	padding:16px 0;
}
#jgp-header .jgp-header-inner{
	display:flex; align-items:center; justify-content:space-between;
	padding:14px 26px;
	background:rgba(11,15,25,0.55);
	border:1px solid var(--jgp-border);
	backdrop-filter:blur(20px) saturate(160%);
	-webkit-backdrop-filter:blur(20px) saturate(160%);
	border-radius:50px;
}
.jgp-logo{ display:flex; align-items:center; gap:10px; font-family:var(--jgp-font-heading); font-weight:700; font-size:20px; color:var(--jgp-text); }
.jgp-logo img{ max-height:38px; width:auto; border-radius:8px; }
.jgp-logo span{ background:linear-gradient(135deg,var(--jgp-primary),var(--jgp-secondary)); -webkit-background-clip:text; background-clip:text; color:transparent; }

#jgp-primary-menu{ display:flex; gap:8px; align-items:center; }
#jgp-primary-menu li a{
	color:var(--jgp-muted); font-weight:500; font-size:15px;
	padding:10px 16px; border-radius:50px; display:block;
	transition:all var(--jgp-transition);
}
#jgp-primary-menu li a:hover, #jgp-primary-menu li.current-menu-item a{
	color:var(--jgp-text); background:var(--jgp-glass);
}
.jgp-header-actions{ display:flex; align-items:center; gap:12px; }
.jgp-icon-btn{
	width:42px; height:42px; display:flex; align-items:center; justify-content:center;
	border-radius:50%; background:var(--jgp-glass); border:1px solid var(--jgp-border); cursor:pointer;
	color:var(--jgp-text); transition:all var(--jgp-transition);
}
.jgp-icon-btn:hover{ background:var(--jgp-glass-strong); transform:translateY(-2px); }

.jgp-mobile-toggle{ display:none; }

.jgp-header-search{
	max-height:0; overflow:hidden; transition:max-height var(--jgp-transition);
}
.jgp-header-search.is-open{ max-height:100px; padding-top:14px; }
.jgp-header-search .search-form{ display:flex; gap:10px; }
.jgp-header-search input[type=search]{
	flex:1; padding:14px 20px; border-radius:50px; border:1px solid var(--jgp-border);
	background:rgba(255,255,255,0.06); backdrop-filter:blur(var(--jgp-blur)); color:var(--jgp-text);
}
.jgp-header-search button{
	padding:0 24px; border-radius:50px; border:none; background:var(--jgp-primary); color:#081018; font-weight:600; cursor:pointer;
}
#jgp-header.is-scrolled .jgp-header-inner{ background:rgba(11,15,25,0.75); }

/* =========================================================
   6. HERO
   ========================================================= */
.jgp-hero{ padding:120px 0 100px; position:relative; overflow:hidden; }
.jgp-hero-panel{
	text-align:center; padding:80px 40px; position:relative;
	max-width:900px; margin:0 auto;
}
.jgp-hero-panel h1{
	font-size:clamp(36px,6vw,64px);
	margin-bottom:20px;
	background:linear-gradient(135deg,#fff 30%, var(--jgp-primary) 70%, var(--jgp-secondary));
	-webkit-background-clip:text; background-clip:text; color:transparent;
}
.jgp-hero-panel .jgp-hero-sub{
	font-size:15px; letter-spacing:3px; text-transform:uppercase; color:var(--jgp-primary); margin-bottom:24px; font-weight:600;
}
.jgp-hero-panel p.jgp-hero-desc{ font-size:18px; max-width:620px; margin:0 auto 36px; }
.jgp-hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.jgp-particles{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.jgp-particle{
	position:absolute; border-radius:50%;
	background:radial-gradient(circle, rgba(142,227,255,0.5), transparent 70%);
	animation:jgpFloat linear infinite;
}
@keyframes jgpFloat{
	0%{ transform:translateY(0) translateX(0); opacity:0; }
	10%{ opacity:1; }
	90%{ opacity:1; }
	100%{ transform:translateY(-120vh) translateX(30px); opacity:0; }
}

/* mouse glow */
.jgp-mouse-glow{
	position:fixed; width:420px; height:420px; border-radius:50%;
	background:radial-gradient(circle, rgba(142,227,255,0.10), transparent 70%);
	pointer-events:none; z-index:0; transform:translate(-50%,-50%);
	transition:opacity .3s ease; opacity:0;
}

/* =========================================================
   7. GRID SECTIONS (tutorials, ai tools, blog, categories, portfolio)
   ========================================================= */
.jgp-grid{ display:grid; gap:28px; }
.jgp-grid-3{ grid-template-columns:repeat(3,1fr); }
.jgp-grid-4{ grid-template-columns:repeat(4,1fr); }
.jgp-grid-2{ grid-template-columns:repeat(2,1fr); }

.jgp-tag{
	display:inline-block; font-size:12px; font-weight:600; letter-spacing:.5px;
	text-transform:uppercase; color:var(--jgp-primary);
	background:rgba(142,227,255,0.1); border:1px solid rgba(142,227,255,0.25);
	padding:5px 12px; border-radius:50px; margin-bottom:14px;
}
.jgp-card-icon{
	width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
	background:linear-gradient(135deg, rgba(142,227,255,0.2), rgba(214,217,255,0.1));
	border:1px solid var(--jgp-border); margin-bottom:20px; font-size:22px;
}
.jgp-card h3{ font-size:20px; margin-bottom:10px; }
.jgp-card .jgp-card-meta{ display:flex; gap:14px; align-items:center; font-size:13px; color:var(--jgp-muted); margin-top:18px; }
.jgp-thumb{ border-radius:var(--jgp-radius-sm); overflow:hidden; margin-bottom:20px; aspect-ratio:16/10; }
.jgp-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.jgp-card:hover .jgp-thumb img{ transform:scale(1.08); }

.jgp-categories-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
.jgp-cat-pill{
	text-align:center; padding:26px 14px; border-radius:var(--jgp-radius-sm);
	background:var(--jgp-glass); border:1px solid var(--jgp-border);
	transition:all var(--jgp-transition); color:var(--jgp-text);
}
.jgp-cat-pill:hover{ background:var(--jgp-glass-strong); transform:translateY(-6px); color:var(--jgp-primary); }
.jgp-cat-pill .count{ display:block; color:var(--jgp-muted); font-size:13px; margin-top:4px; }

/* =========================================================
   8. NEWSLETTER + CONTACT
   ========================================================= */
.jgp-newsletter-panel, .jgp-contact-panel{
	padding:60px; text-align:center; position:relative; overflow:hidden;
}
.jgp-newsletter-form{ display:flex; gap:12px; max-width:480px; margin:24px auto 0; flex-wrap:wrap; justify-content:center; }
.jgp-newsletter-form input[type=email]{
	flex:1; min-width:240px; padding:14px 20px; border-radius:50px;
	border:1px solid var(--jgp-border); background:rgba(255,255,255,0.05); color:var(--jgp-text);
}
.jgp-newsletter-form input::placeholder{ color:var(--jgp-muted); }

.jgp-contact-form{ display:grid; gap:16px; max-width:640px; margin:30px auto 0; text-align:left; }
.jgp-contact-form input, .jgp-contact-form textarea{
	width:100%; padding:14px 18px; border-radius:var(--jgp-radius-sm);
	border:1px solid var(--jgp-border); background:rgba(255,255,255,0.05); color:var(--jgp-text);
}
.jgp-contact-form .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* =========================================================
   9. FOOTER
   ========================================================= */
#jgp-footer{ margin-top:80px; padding:70px 0 30px; border-top:1px solid var(--jgp-border); position:relative; }
.jgp-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px; }
.jgp-footer-col h4{ font-size:16px; margin-bottom:18px; color:var(--jgp-text); }
.jgp-footer-col ul li{ margin-bottom:10px; }
.jgp-footer-col ul li a{ color:var(--jgp-muted); font-size:14px; }
.jgp-footer-col ul li a:hover{ color:var(--jgp-primary); }
.jgp-social-icons{ display:flex; gap:10px; margin-top:18px; }
.jgp-footer-bottom{
	border-top:1px solid var(--jgp-border); padding-top:26px;
	display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
	font-size:13px; color:var(--jgp-muted);
}

/* =========================================================
   10. SIDEBAR
   ========================================================= */
.jgp-sidebar .widget{ margin-bottom:26px; padding:26px; }
.jgp-sidebar .widget-title{ font-size:16px; margin-bottom:18px; position:relative; padding-bottom:12px; }
.jgp-sidebar .widget-title::after{ content:""; position:absolute; left:0; bottom:0; width:40px; height:2px; background:var(--jgp-primary); }
.jgp-sidebar .search-form{ display:flex; gap:8px; }
.jgp-sidebar .search-form input[type=search]{
	flex:1; padding:12px 16px; border-radius:50px; border:1px solid var(--jgp-border); background:rgba(255,255,255,0.05); color:var(--jgp-text);
}
.jgp-sidebar .search-form button{
	width:44px; border-radius:50%; border:none; background:var(--jgp-primary); color:#081018; cursor:pointer;
}
.jgp-sidebar ul li{ padding:10px 0; border-bottom:1px dashed var(--jgp-border); font-size:14px; }
.jgp-sidebar ul li a{ color:var(--jgp-muted); }
.jgp-sidebar ul li a:hover{ color:var(--jgp-primary); }
.jgp-recent-post{ display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px dashed var(--jgp-border); }
.jgp-recent-post img{ width:60px; height:60px; object-fit:cover; border-radius:10px; flex-shrink:0; }
.jgp-recent-post .title{ font-size:14px; color:var(--jgp-text); line-height:1.4; }
.jgp-recent-post .date{ font-size:12px; color:var(--jgp-muted); }

/* =========================================================
   11. BLOG / SINGLE POST
   ========================================================= */
.jgp-content-layout{ display:grid; grid-template-columns:2.4fr 1fr; gap:40px; padding:60px 0; align-items:start; }
.jgp-reading-progress{
	position:fixed; top:0; left:0; height:3px; width:0%; z-index:9999;
	background:linear-gradient(90deg,var(--jgp-primary),var(--jgp-secondary));
	transition:width .1s ease;
}
.jgp-breadcrumbs{ font-size:13px; color:var(--jgp-muted); margin-bottom:24px; }
.jgp-breadcrumbs a{ color:var(--jgp-muted); }
.jgp-breadcrumbs a:hover{ color:var(--jgp-primary); }

.jgp-single-header{ margin-bottom:30px; }
.jgp-single-header h1{ font-size:clamp(28px,4vw,42px); }
.jgp-post-meta{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; color:var(--jgp-muted); font-size:14px; margin-bottom:24px; }
.jgp-post-meta img.avatar{ width:32px; height:32px; border-radius:50%; }
.jgp-featured-image{ border-radius:var(--jgp-radius); overflow:hidden; margin-bottom:36px; }

.jgp-entry-content{ font-size:17px; line-height:1.85; padding:36px; }
.jgp-entry-content h2, .jgp-entry-content h3{ margin-top:36px; }
.jgp-entry-content img{ border-radius:var(--jgp-radius-sm); margin:24px 0; }
.jgp-entry-content blockquote{
	border-left:3px solid var(--jgp-primary); padding:16px 24px; margin:24px 0;
	background:var(--jgp-glass); border-radius:0 var(--jgp-radius-sm) var(--jgp-radius-sm) 0; color:var(--jgp-text);
}
.jgp-entry-content pre{
	background:#060911; border:1px solid var(--jgp-border); padding:20px; border-radius:var(--jgp-radius-sm); overflow:auto;
}
.jgp-entry-content code{ background:rgba(255,255,255,0.08); padding:2px 6px; border-radius:6px; font-size:14px; }
.jgp-entry-content a{ text-decoration:underline; }

.jgp-social-share{ display:flex; gap:10px; align-items:center; padding:20px 0; margin:30px 0; border-top:1px solid var(--jgp-border); border-bottom:1px solid var(--jgp-border); }
.jgp-social-share .label{ font-size:14px; color:var(--jgp-muted); margin-right:6px; }

.jgp-author-box{ display:flex; gap:20px; padding:30px; margin:40px 0; align-items:flex-start; }
.jgp-author-box img{ width:80px; height:80px; border-radius:50%; flex-shrink:0; }
.jgp-author-box h4{ margin-bottom:6px; }

.jgp-related-posts h3{ margin-bottom:24px; }

.jgp-tags-links{ margin:30px 0; display:flex; gap:8px; flex-wrap:wrap; }
.jgp-tags-links a{
	font-size:13px; padding:6px 14px; border-radius:50px; background:var(--jgp-glass); border:1px solid var(--jgp-border); color:var(--jgp-muted);
}
.jgp-tags-links a:hover{ color:var(--jgp-primary); }

/* pagination */
.jgp-pagination{ display:flex; gap:10px; justify-content:center; margin-top:50px; flex-wrap:wrap; }
.jgp-pagination a, .jgp-pagination span{
	min-width:44px; height:44px; display:flex; align-items:center; justify-content:center;
	border-radius:50%; background:var(--jgp-glass); border:1px solid var(--jgp-border); color:var(--jgp-text); font-size:14px;
}
.jgp-pagination .current{ background:var(--jgp-primary); color:#081018; border-color:transparent; }
.jgp-pagination a:hover{ background:var(--jgp-glass-strong); }

/* comments */
.jgp-comments{ padding:36px; margin-top:50px; }
.jgp-comments .comment-list{ list-style:none; margin:0; padding:0; }
.jgp-comments .comment-body{ padding:20px 0; border-bottom:1px solid var(--jgp-border); }
.jgp-comments .comment-author img{ border-radius:50%; margin-right:10px; }
.comment-form input, .comment-form textarea{
	width:100%; padding:14px 18px; border-radius:var(--jgp-radius-sm); border:1px solid var(--jgp-border);
	background:rgba(255,255,255,0.05); color:var(--jgp-text); margin-bottom:16px;
}

/* 404 */
.jgp-404{ text-align:center; padding:140px 0; }
.jgp-404 h1{ font-size:clamp(60px,10vw,140px); background:linear-gradient(135deg,var(--jgp-primary),var(--jgp-secondary)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Scroll reveal base */
.jgp-reveal{ opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s ease; }
.jgp-reveal.is-visible{ opacity:1; transform:translateY(0); }

/* skip link */
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--jgp-primary); color:#081018; padding:12px 20px; z-index:99999; }
.skip-link:focus{ left:10px; top:10px; }

/* screen-reader-text */
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }