/*
Theme Name: IPTVJoy
Theme URI: https://iptvjoy.co.uk/blog
Description: Custom IPTVJoy Blog Theme — matches the main Next.js site design exactly.
Author: IPTVJoy
Version: 1.0.0
Text Domain: iptvjoy
*/

/* ─── Color Palette ─────────────────────────────── */
:root {
  --navy:         #1E2233;
  --rust:         #C87010;
  --primary:      #E89A1E;
  --accent:       #F5B935;
  --bg:           #FFF7E6;
  --bg-card:      #FFF3D6;
  --slate:        #4E4E6A;
  --border:       #E8D8B4;
  --border-light: #F0E8D0;
  --grad-gold:    linear-gradient(135deg,#C87010,#E89A1E,#F5B935);
  --grad-cta:     linear-gradient(135deg,#C87010,#E89A1E);
  --shadow-sm:    0 1px 3px rgba(30,34,51,.06);
  --shadow-md:    0 4px 12px rgba(30,34,51,.08);
  --shadow-lg:    0 8px 24px rgba(30,34,51,.12);
  --shadow-gold:  0 4px 20px rgba(232,154,30,.30);
  --r-sm: 6px; --r-md: 12px; --r-lg: 16px; --r-full: 9999px;
}

/* ─── Reset / Base ───────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--navy);line-height:1.6;font-size:16px}
a{color:inherit;text-decoration:none;transition:color .2s}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{font-family:'Poppins',sans-serif;color:var(--navy);line-height:1.2}
ul{list-style:none}
::selection{background:rgba(232,154,30,.15);color:var(--navy)}

/* ─── Container ──────────────────────────────────── */
.container-main{width:100%;max-width:1280px;margin:0 auto;padding:0 1.5rem}
@media(min-width:1024px){.container-main{padding:0 2rem}}

/* ─── HEADER ─────────────────────────────────────── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(255,247,230,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--border-light);box-shadow:var(--shadow-sm)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
@media(min-width:1024px){.nav-inner{height:80px}}

/* Logo */
.site-logo{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.logo-text{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.25rem;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1}

/* Desktop Nav */
.nav-links{display:none;align-items:center;gap:.25rem}
@media(min-width:1024px){.nav-links{display:flex}}
.nav-links li{position:relative}
.nav-links a{display:block;padding:.5rem 1rem;border-radius:8px;font-size:.875rem;font-weight:500;color:var(--navy);transition:color .2s,background .2s}
.nav-links a:hover{background:rgba(30,34,51,.04)}
.nav-links a.active{color:var(--primary)}
.nav-links a.active::after{content:'';position:absolute;bottom:2px;left:1rem;right:1rem;height:2px;border-radius:1px;background:var(--primary)}

/* WhatsApp CTA desktop */
.wa-cta-desktop{display:none}
@media(min-width:1024px){.wa-cta-desktop{display:inline-flex}}

/* Hamburger */
.hamburger{display:flex;align-items:center;justify-content:center;padding:.5rem;border:none;background:transparent;cursor:pointer;border-radius:8px;transition:background .2s;color:var(--navy)}
.hamburger:hover{background:rgba(30,34,51,.05)}
@media(min-width:1024px){.hamburger{display:none}}

.header-spacer{height:64px}
@media(min-width:1024px){.header-spacer{height:80px}}

/* ─── BUTTONS ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;border-radius:var(--r-md);font-weight:600;font-size:.875rem;line-height:1;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);border:none;text-decoration:none;font-family:'Inter',sans-serif}
.btn-primary{background:var(--grad-cta);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{box-shadow:var(--shadow-gold);transform:translateY(-1px);color:#fff}
.btn-primary:active{transform:translateY(0)}

/* ─── MOBILE DRAWER ───────────────────────────────── */
.mobile-drawer{position:fixed;top:0;right:0;bottom:0;width:300px;max-width:85vw;background:var(--bg);z-index:200;transform:translateX(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;box-shadow:-4px 0 40px rgba(30,34,51,.15)}
.mobile-drawer.open{transform:translateX(0)}
.drawer-overlay{position:fixed;inset:0;background:rgba(30,34,51,.45);z-index:199;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-overlay.open{opacity:1;pointer-events:all}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-light)}
.drawer-close{background:transparent;border:none;cursor:pointer;padding:.5rem;border-radius:8px;color:var(--navy);transition:background .2s}
.drawer-close:hover{background:rgba(30,34,51,.05)}
.drawer-links{padding:1rem;flex:1}
.drawer-links a{display:block;padding:.875rem 1rem;border-radius:8px;font-weight:500;color:var(--navy);transition:background .2s,color .2s;font-size:1rem}
.drawer-links a:hover,.drawer-links a.active{color:var(--primary);background:rgba(232,154,30,.07)}
.drawer-footer{padding:1.5rem;border-top:1px solid var(--border-light)}
.drawer-wa{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%}

/* ─── FOOTER ──────────────────────────────────────── */
.site-footer{background:var(--bg-card);border-top:1px solid var(--border);position:relative;z-index:30}
.footer-inner{padding-top:clamp(3rem,6vw,6rem);padding-bottom:clamp(3rem,6vw,6rem)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:repeat(4,1fr);gap:3rem}}
.footer-brand p{margin-top:1rem;font-size:.875rem;line-height:1.7;color:var(--slate)}
.footer-col h3{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--navy);margin-bottom:1rem;font-family:'Poppins',sans-serif}
.footer-col ul li{margin-bottom:.625rem}
.footer-col ul a{font-size:.875rem;color:var(--slate);transition:color .2s}
.footer-col ul a:hover{color:var(--primary)}
.footer-spacer{margin-top:1.5rem}
.footer-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem}
@media(min-width:768px){.footer-bottom{flex-direction:row}}
.footer-bottom p{font-size:.75rem;color:var(--slate)}

/* ─── BLOG LISTING ────────────────────────────────── */
.blog-page{padding:clamp(3rem,6vw,6rem) 0}
.blog-heading{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(1.75rem,3.5vw,2.5rem);color:var(--navy);margin-bottom:.75rem;letter-spacing:-.01em}
.blog-subheading{font-size:1rem;color:var(--slate);margin-bottom:3rem}
.posts-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:640px){.posts-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.posts-grid{grid-template-columns:repeat(3,1fr)}}

/* Post card */
.post-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .25s,transform .25s;display:flex;flex-direction:column}
.post-card:hover{box-shadow:0 12px 32px rgba(30,34,51,.13);transform:translateY(-2px)}
.post-card-thumb{width:100%;aspect-ratio:16/9;object-fit:cover}
.post-thumb-placeholder{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,var(--bg-card),var(--border-light));display:flex;align-items:center;justify-content:center}
.post-card-body{padding:1.5rem;flex:1;display:flex;flex-direction:column}
.post-card-meta{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.post-cat{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--primary);background:rgba(232,154,30,.1);padding:.2rem .6rem;border-radius:var(--r-full)}
.post-date{font-size:.75rem;color:var(--slate)}
.post-card-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.125rem;color:var(--navy);margin-bottom:.75rem;line-height:1.35;flex:1}
.post-card-title a{color:inherit;transition:color .2s}
.post-card-title a:hover{color:var(--primary)}
.post-card-excerpt{font-size:.875rem;color:var(--slate);line-height:1.6;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.read-more{font-size:.8rem;font-weight:600;color:var(--primary);display:inline-flex;align-items:center;gap:.25rem;margin-top:auto;transition:gap .2s,color .2s}
.read-more:hover{gap:.5rem;color:var(--rust)}
.pagination{display:flex;justify-content:center;gap:.5rem;margin-top:3rem;flex-wrap:wrap}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;padding:0 .75rem;border-radius:8px;font-size:.875rem;font-weight:500;color:var(--navy);background:var(--bg-card);border:1px solid var(--border-light);transition:all .2s;text-decoration:none}
.pagination .page-numbers:hover,.pagination .page-numbers.current{background:var(--grad-cta);color:#fff;border-color:transparent}
.no-posts{text-align:center;padding:4rem 0;color:var(--slate)}

/* ─── SINGLE POST ─────────────────────────────────── */
.single-post{padding:clamp(3rem,6vw,6rem) 0}
.single-container{max-width:800px;margin:0 auto;padding:0 1.5rem}
.back-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--slate);font-size:.875rem;font-weight:500;margin-bottom:2rem;transition:color .2s}
.back-link:hover{color:var(--primary)}
.post-cat-badge{display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--primary);background:rgba(232,154,30,.1);padding:.25rem .75rem;border-radius:var(--r-full);margin-bottom:1rem}
.post-title{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(1.75rem,4vw,2.75rem);color:var(--navy);line-height:1.15;letter-spacing:-.02em;margin-bottom:1.5rem}
.post-meta-bar{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border);font-size:.875rem;color:var(--slate);margin-bottom:2rem}
.post-author-wrap{display:flex;align-items:center;gap:.5rem}
.author-avatar{width:32px;height:32px;border-radius:50%;background:var(--grad-cta);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;color:#fff;flex-shrink:0;font-family:'Poppins',sans-serif}
.post-featured-img{border-radius:var(--r-lg);overflow:hidden;margin-bottom:2rem;box-shadow:var(--shadow-md)}
.post-featured-img img{width:100%}
.post-content{font-size:1.0625rem;line-height:1.8;color:var(--navy)}
.post-content h2{font-size:1.625rem;font-weight:700;margin:2.5rem 0 1rem}
.post-content h3{font-size:1.25rem;font-weight:600;margin:2rem 0 .75rem}
.post-content p{margin-bottom:1.5rem}
.post-content a{color:var(--primary);text-decoration:underline}
.post-content a:hover{color:var(--rust)}
.post-content ul,.post-content ol{margin:0 0 1.5rem 1.5rem;list-style:revert}
.post-content li{margin-bottom:.5rem}
.post-content blockquote{border-left:4px solid var(--primary);margin:2rem 0;padding:1.25rem 1.5rem;background:rgba(232,154,30,.06);border-radius:0 var(--r-md) var(--r-md) 0;font-style:italic;color:var(--slate)}
.post-content img{border-radius:var(--r-md);box-shadow:var(--shadow-sm);max-width:100%}
.post-content code{background:var(--bg-card);border:1px solid var(--border-light);padding:.1em .4em;border-radius:4px;font-size:.875em}
.post-content pre{background:#1E2233;color:#FFF7E6;padding:1.5rem;border-radius:var(--r-md);overflow-x:auto;margin-bottom:1.5rem}
.post-content pre code{background:none;border:none;color:inherit;font-size:.875rem;padding:0}
.post-tags{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.post-tags-label{font-size:.875rem;font-weight:600;color:var(--navy);margin-right:.5rem}
.tag-pill{display:inline-block;font-size:.75rem;font-weight:600;color:var(--slate);background:var(--bg-card);border:1px solid var(--border-light);padding:.25rem .75rem;border-radius:var(--r-full);margin:.25rem .25rem .25rem 0;transition:all .2s}
.tag-pill:hover{border-color:var(--primary);color:var(--primary)}

/* ─── STATIC PAGE ─────────────────────────────────── */
.page-wrapper{padding:clamp(3rem,6vw,6rem) 0}
.page-container{max-width:800px;margin:0 auto;padding:0 1.5rem}
.page-title-heading{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(1.75rem,4vw,2.75rem);color:var(--navy);margin-bottom:2rem}

/* ─── 404 ─────────────────────────────────────────── */
.page-404{padding:clamp(3rem,6vw,6rem) 0;text-align:center}
.page-404 .error-code{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(5rem,15vw,10rem);background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:.5rem}
.page-404 h2{font-size:1.5rem;color:var(--navy);margin-bottom:.75rem}
.page-404 p{color:var(--slate);margin-bottom:2rem}

/* ─── ARCHIVE / CATEGORY ──────────────────────────── */
.archive-header{margin-bottom:3rem}
.archive-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--primary);margin-bottom:.5rem}
.archive-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(1.75rem,3.5vw,2.5rem);color:var(--navy)}