/* =========================================================
   BASE / MINIMAL RESET
   - Normalizes layout defaults and typography
   - Ensures smooth scrolling and consistent box-sizing
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  color: #0f1222;
  background: #0c0b12; /* global dark background */
}

/* =========================================================
   THEME VARIABLES
   - Defines colors, radius, shadows and container width
   - Easily reusable for dark/light themes
========================================================= */
:root{
  --bg: #0f0e17;            /* page background */
  --panel: #ffffff;         /* panels / cards background */
  --muted: #6b7280;         /* secondary text color */
  --brand-900:#1b1038;
  --brand-800:#2a1857;
  --brand-700:#3b1f7a;
  --brand-600:#5126a6;      /* primary brand color */
  --brand-500:#6b2dd3;
  --brand-400:#8f66ea;
  --accent-1: #cbb6ff; /* light purple (highlight) */
  --accent-2: #6b2dd3; /* deep purple (brand) */
  --ring: rgba(107,45,211,.35); /* focus ring color */
  --radius: 16px;           /* default border radius */
  --shadow: 0 10px 25px rgba(16,24,40,.12), 0 2px 8px rgba(16,24,40,.08);
  --container: 1200px;      /* max layout width */
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark){
  body { color: #e8eaf6; }
  :root{
    --panel: #151426;
    --muted: #a3a6bd;
  }
}

/* =========================================================
   UTILITIES
   - Basic reusable classes for layout and buttons
========================================================= */
.container{
  width: min(var(--container), 100% - 2rem);
  margin-inline: auto;
}

.btn{
  display: inline-flex; align-items:center; gap:.5rem;
  padding: .7rem 1rem; border-radius: 999px;
  background: var(--brand-600); color: #fff; text-decoration: none;
  border: 0; cursor: pointer; font-weight: 600;
  box-shadow: 0 6px 16px rgba(107,45,211,.35);
}

.btn:focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px; }

.pill{
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:999px;
  font-size:.8rem;
  background: rgba(107,45,211,.14);
  color: #3b1f7a;      
  font-weight: 600;
  border: 1px solid rgba(107,45,211,.28);
  /* optional: micro-glass */
  backdrop-filter: blur(3px);
}


/* =========================================================
   HEADER / NAVIGATION BAR
   - Sticky top navigation with logo, links, and search
========================================================= */
header{
  position: sticky; top:0; z-index:50;
  backdrop-filter: saturate(120%) blur(8px);
  background: linear-gradient(180deg, rgba(12,11,18,.9), rgba(12,11,18,.65));
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  height: 64px;
}

.brand{
  display:flex; align-items:center; gap:.75rem;
  color:#fff; text-decoration:none; font-weight:800;
  letter-spacing:.3px;
}

/* --- BRAND BADGE (logo square with initials) --- */
.brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px; /* rounded corners */
  background: linear-gradient(135deg, #7b2ff7, #9c27b0); /* violet gradient */
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.5px;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Subtle hover pop effect */
.brand-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(123,47,247,0.4);
}

.brand-title{
  font-weight: 800;
  color:#fff;
  letter-spacing:.3px;
}

/* Gradient text: fallback color + gradient clip */
.brand-accent{
  /* fallback if background-clip:text is missing */
  color: var(--brand-400);
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; /* Safari/Chrome */
  text-fill-color: transparent;         /* standard */
}

.nav-links{
  display:flex; gap:1rem; align-items:center;
}

.nav-links a{
  color:#e8eaf6; text-decoration:none; padding:.5rem .75rem; border-radius:12px;
}
.nav-links a:hover{ background: rgba(255,255,255,.06); }

.search{
  position: relative; display:flex; align-items:center;
}
.search input{
  width: 240px;
  padding:.6rem .9rem .6rem 2.2rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
}
.search svg{ position:absolute; left:.6rem; width:18px; height:18px; opacity:.7; }

.burger{
  display:none; background:none; border:0; color:#fff; font-size:1.5rem;
}

/* Responsive: hide links and show burger on small screens */
@media (max-width: 980px){
  .nav-links{ display:none; }
  .burger{ display:block; }
}

/* =========================================================
   MOBILE MENU (dropdown on small screens)
========================================================= */
.mobile-menu {
  display: grid;
  gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(12,11,18,.96);
  border-radius: 0 0 18px 18px;
}

/* Hidden state */
.mobile-menu[hidden] { display: none !important; }

/* Link styling */
.mobile-menu a {
  display: block;
  padding: .8rem 1rem;
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 500;
  letter-spacing: .2px;
  transition: background .2s ease, color .2s ease;
}

/* Hover state: light gray highlight */
.mobile-menu a:hover {
  background: rgba(255,255,255,.08);
  color: #e5e5e5;
}

/* Hide completely on desktop view */
@media (min-width: 981px) {
  .mobile-menu { display: none !important; }
}

/* =========================================================
   HERO SECTION
   - Intro area with gradient background and image
========================================================= */
.hero{
  position: relative; isolation:isolate;
  color:#fff; padding: 72px 0;
  background:
    radial-gradient(1200px 400px at 0% -10%, rgba(107,45,211,.45), transparent 60%),
    radial-gradient(900px 400px at 100% 10%, rgba(139,92,246,.35), transparent 60%),
    linear-gradient(180deg, var(--brand-900), var(--brand-800));
}
.hero-inner{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items:center;
}
@media (max-width: 980px){ .hero-inner{ grid-template-columns: 1fr; } }

.hero h1{
  margin: 0 0 .5rem; font-size: clamp(2rem, 4vw, 3rem); line-height:1.1;
}
.hero p{ margin: 0 0 1.25rem; color: #d8d9ff; }

.hero-figure{
  border-radius: var(--radius);
  overflow:hidden;
  min-height: 260px;
  background:
    radial-gradient(600px 180px at 80% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    url('https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.08);
}

/* Brand variant legible on dark */
.hero .pill{
  color:#fff;
  background: linear-gradient(135deg, rgba(139,92,246,.35), rgba(107,45,211,.28));
  border-color: rgba(199, 181, 255, .45);
}

/* =========================================================
   MAIN LAYOUT
   - Main content area, grid for posts + sidebar
========================================================= */
main{ margin-top: -28px; /* overlap hero curve */ }

.main-offset {
  margin-top: 2rem; /* same offset as sidebar */
}

.shell{
  background: #f5f7fb;
  padding: 28px 0 64px;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  box-shadow: 0 -20px 60px rgba(0,0,0,.25) inset;
}

/* Dark theme variant */
@media (prefers-color-scheme: dark){
  .shell{ background: #0f0e17; box-shadow: none; }
}

.grid{
  display:grid; grid-template-columns: 1fr 320px; gap: 2rem;
}
/* If the sidebar is not visible, the main section takes up the full width */
.grid.full {
  grid-template-columns: 1fr; /* a single column */
}
.grid.full .main-offset {
  margin-inline: auto;
  width: 100%;
}
@media (max-width: 1100px){ .grid{ grid-template-columns: 1fr; } }

/* =========================================================
   CARDS / POSTS GRID
   - Generic card component for blog posts or items
========================================================= */
.section-title{
  display:flex; align-items:center; justify-content:space-between;
  margin: 8px 0 16px;
}
.cards{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
}
@media (max-width: 900px){ .cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .cards{ grid-template-columns: 1fr; } }

.card{
  background: var(--panel);
  border-radius: 18px;
  overflow: clip;
  border: 1px solid rgba(2,8,23,.06);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 14px 28px rgba(16,24,40,.18); }

.thumb{
  aspect-ratio: 16/9;
  background: #eee;
  display:block;
  background-size: cover;
  background-position: center;
}

.card-body{ padding: 14px 16px 16px; }

.meta{
  display:flex; align-items:center; gap:.6rem;
  font-size:.85rem; color:var(--muted);
  margin-bottom: .4rem;
}
.title{
  margin: 0 0 .3rem; font-size: 1.1rem; line-height:1.3;
}
.excerpt{ margin: 0; color: var(--muted); font-size:.96rem; }

/* =========================================================
   SIDEBAR WIDGETS
   - Categories, trending posts, newsletter, etc.
========================================================= */
aside{ display:flex; flex-direction:column; gap:1.2rem; }

.sidebar-offset { margin-top: 2rem; /* adjustable offset */ }

.widget{
  background: var(--panel);
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(2,8,23,.06);
  box-shadow: var(--shadow);
}
.widget h3{ margin: 0 0 .75rem; font-size: 1.05rem; }

.cat-list, .trend-list{
  list-style:none; padding:0; margin:0; display:grid; gap:.4rem;
}
.cat-list a, .trend-list a{
  color: inherit; text-decoration:none;
  display:flex; justify-content:space-between;
  padding:.5rem .6rem; border-radius:10px;
}
.cat-list a:hover, .trend-list a:hover{ background: rgba(107,45,211,.08); }

.newsletter input{
  width:100%; padding:.7rem .9rem;
  border-radius:12px; border:1px solid #e5e7eb;
  margin-bottom:.6rem;
  background: #fff; color:#111827;
}
@media (prefers-color-scheme: dark){
  .newsletter input{ background:#0f0e17; border-color: rgba(255,255,255,.08); color:#e8eaf6; }
}

/* =========================================================
   FOOTER
   - Bottom area with social links and copyright
========================================================= */
footer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #0f0e17, #0a0913);
  color:#c7c9df;
  padding: 40px 0 60px;
}

.foot{
  display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 2rem;
}
@media (max-width: 900px){ .foot{ grid-template-columns: 1fr; } }

.social{
  display:flex; gap:.6rem; flex-wrap:wrap;
}
.social a{
  width:38px; height:38px; border-radius:999px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  color:#fff; text-decoration:none;
}
.copyright{
  opacity:.7; font-size:.9rem; margin-top:1rem;
}

/* =========================================================
   PAGINATION
   - Navigation buttons for paged content
========================================================= */
.pagination {
  display:flex; justify-content:center; gap:.5rem;
  flex-wrap:wrap; margin-top:18px;
}
.pagination a, .pagination span {
  padding:.45rem .7rem; border-radius:10px; text-decoration:none;
  background: rgba(2,8,23,.04);        /* gray chip on light bg */
  color: #0f1222;                      /* dark text */
  border: 1px solid rgba(2,8,23,.12);  /* subtle border */
  font: inherit;
}
.pagination a:hover { background: rgba(2,8,23,.08); }
.pagination .active {
  background: #6b2dd3; color:#fff; border-color: transparent; /* active page */
}
.pagination .disabled { opacity:.55; cursor:default; }

/* Dark theme version */
@media (prefers-color-scheme: dark) {
  .pagination a, .pagination span {
    background: rgba(255,255,255,.06);
    color:#fff;
    border-color: transparent;
  }
  .pagination a:hover { background: rgba(255,255,255,.12); }
}







/* EXTRA CSS*/

/* =========================================================
   HALLOWEEN THEME – Tech Magazine
   Palette: Pumpkin (#ff7a18 → #ff3d00), Deep Violet (#1a0f24),
            Slime Lime (#a3ff12) for highlights, Bone (#eae7df)
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.6;
  color:#EEE9FF;                 /* warm light text */
  background:#0c0b12;            /* very dark global background */
}

/* =========================================================
   THEME TOKENS
========================================================= */
:root{
  --bg:#120a1a;                  /* page background (violet/black) */
  --panel:#1a1324;               /* dark panels/cards */
  --muted:#b6acc8;               /* warm secondary text */

  /* Brand (pumpkin) */
  --brand-900:#2a0e00;
  --brand-800:#3b1500;
  --brand-700:#5a2405;
  --brand-600:#ff7a18;           /* pumpkin primary */
  --brand-500:#ff5a14;
  --brand-400:#ff3d00;

  /* Accent for brand-accent (gradient text “Magazine”) */
  --accent-1:#ffc371;            /* light pumpkin */
  --accent-2:#ff5f6d;            /* rust/warm pink */

  /* Extra seasonal accents */
  --slime:#a3ff12;               /* “slime” green for micro-highlights */
  --bone:#eae7df;                /* bone / warm gray */
  --ink:#0c0b12;                 /* deep black */

  --ring: rgba(255, 122, 24, .38); /* orange focus ring */
  --radius:16px;
  --shadow: 0 10px 25px rgba(16,24,40,.18), 0 2px 8px rgba(16,24,40,.12);
  --container:1200px;
}

@media (prefers-color-scheme: dark){
  :root{
    --panel:#161020;
    --muted:#cfc6e2;
  }
}

/* =========================================================
   UTILITIES
========================================================= */
.container{ width:min(var(--container), 100% - 2rem); margin-inline:auto; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:999px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
  color:#1a0f06; text-decoration:none; border:0; cursor:pointer; font-weight:700;
  box-shadow: 0 8px 20px rgba(255,93,0,.28), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }

.pill{
  display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.8rem;
  background: rgba(255, 122, 24, .15);
  color: #ffd9c1; font-weight:700; border:1px solid rgba(255,122,24,.32);
  backdrop-filter: blur(3px);
}

/* =========================================================
   HEADER / NAV
========================================================= */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: saturate(120%) blur(8px);
  background: linear-gradient(180deg, rgba(18,10,26,.95), rgba(18,10,26,.70));
  border-bottom: 1px dashed rgba(255,122,24,.25); /* costume-like stitch */
}

.nav{ display:flex; align-items:center; justify-content:space-between; height:64px; }

.brand{
  display:flex; align-items:center; gap:.75rem;
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.3px;
}

/* Glowing pumpkin badge */
.brand-badge{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px;
  background: radial-gradient(120% 120% at 30% 20%, #ffd4a1 0%, #ff7a18 45%, #ff3d00 100%);
  color:#2b0e02; font-weight:800; font-size:.95rem; letter-spacing:.5px; user-select:none;
  box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 12px rgba(255,95,0,.25);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.brand-badge:hover{ transform: translateY(-2px) rotate(-1deg); filter: brightness(1.07); }

.brand-title{ font-weight:800; color:#fff; letter-spacing:.3px; }

/* “Magazine” text with Halloween gradient */
.brand-accent{
  color: var(--accent-2);
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; text-fill-color:transparent;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

.nav-links{ display:flex; gap:1rem; align-items:center; }
.nav-links a{ color:#f8f5ff; text-decoration:none; padding:.5rem .75rem; border-radius:12px; }
.nav-links a:hover{ background: rgba(255,255,255,.06); }

.search{ position:relative; display:flex; align-items:center; }
.search input{
  width:240px; padding:.6rem .9rem .6rem 2.2rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color:#fff;
}
.search svg{ position:absolute; left:.6rem; width:18px; height:18px; opacity:.75; }

.burger{ display:none; background:none; border:0; color:#fff; font-size:1.5rem; }
@media (max-width:980px){ .nav-links{ display:none; } .burger{ display:block; } }

/* Mobile menu */
.mobile-menu{
  display:grid; gap:.5rem; padding:.75rem 1rem;
  border-top:1px dashed rgba(255,122,24,.25);
  background: rgba(18,10,26,.96); border-radius:0 0 18px 18px;
}
.mobile-menu[hidden]{ display:none !important; }
.mobile-menu a{
  display:block; padding:.8rem 1rem; color:#fff; text-decoration:none; border-radius:12px;
  font-weight:600; letter-spacing:.2px; transition: background .2s ease, transform .2s ease;
}
.mobile-menu a:hover{ background: rgba(255,122,24,.10); transform: translateX(2px); }
@media (min-width:981px){ .mobile-menu{ display:none !important; } }

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative; isolation:isolate; color:#fff; padding:72px 0;
  background:
    radial-gradient(1200px 420px at 0% -10%, rgba(255,122,24,.40), transparent 60%),
    radial-gradient(900px 420px at 100% 10%, rgba(163,255,18,.16), transparent 60%), /* light slime veil */
    linear-gradient(180deg, #1a0f24, #100918);
}
.hero-inner{ display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; align-items:center; }
@media (max-width:980px){ .hero-inner{ grid-template-columns:1fr; } }

.hero h1{ margin:0 0 .5rem; font-size:clamp(2rem, 4vw, 3rem); line-height:1.1; }
.hero p{ margin:0 0 1.25rem; color:#f0eaff; opacity:.9; }

.hero-figure{
  border-radius:var(--radius); overflow:hidden; min-height:260px;
  background:
    radial-gradient(600px 180px at 80% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    url('https://images.unsplash.com/photo-1604881981720-1463be1f0f6b?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.08);
}

/* Pill in hero: higher contrast */
.hero .pill{
  color:#fff;
  background: linear-gradient(135deg, rgba(255,122,24,.35), rgba(255,61,0,.28));
  border-color: rgba(255,200,150,.55);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Small “spiderweb” ornament (very subtle) */
.hero::after{
  content:"";
  position:absolute; inset:auto 2% 8% auto; width:160px; height:160px; opacity:.08;
  background:
    radial-gradient(closest-side, transparent 65%, rgba(255,255,255,.12) 66% 67%, transparent 68%) 50% 50%/100% 100% no-repeat,
    conic-gradient(from 0deg, transparent 0 8%, rgba(255,255,255,.15) 8% 9%, transparent 9% 17%, rgba(255,255,255,.15) 17% 18%, transparent 18% 26%, rgba(255,255,255,.15) 26% 27%, transparent 27% 35%, rgba(255,255,255,.15) 35% 36%, transparent 36% 44%, rgba(255,255,255,.15) 44% 45%, transparent 45% 53%, rgba(255,255,255,.15) 53% 54%, transparent 54% 62%, rgba(255,255,255,.15) 62% 63%, transparent 63% 71%, rgba(255,255,255,.15) 71% 72%, transparent 72% 100%);
  filter: blur(.2px);
}

/* =========================================================
   MAIN LAYOUT
========================================================= */
main{ margin-top:-28px; }

.main-offset{ margin-top:2rem; }

.shell{
  background: #120a1a; /* consistent dark */
  padding:28px 0 64px;
  border-top-left-radius:28px; border-top-right-radius:28px;
  box-shadow: 0 -20px 60px rgba(0,0,0,.25) inset;
}
@media (prefers-color-scheme: dark){ .shell{ background:#100918; box-shadow:none; } }

.grid{ display:grid; grid-template-columns: 1fr 320px; gap:2rem; }
.grid.full{ grid-template-columns:1fr; }
.grid.full .main-offset{ margin-inline:auto; width:100%; }
@media (max-width:1100px){ .grid{ grid-template-columns:1fr; } }

/* =========================================================
   CARDS
========================================================= */
.section-title{ display:flex; align-items:center; justify-content:space-between; margin:8px 0 16px; }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:900px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .cards{ grid-template-columns:1fr; } }

.card{
  background: var(--panel); border-radius:18px; overflow:clip;
  border: 1px solid rgba(250, 240, 220, .06);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(255,122,24,.18);
  border-color: rgba(255,122,24,.22);
}

.thumb{ aspect-ratio:16/9; background:#22172e; display:block; background-size:cover; background-position:center; }

.card-body{ padding:14px 16px 16px; }
.meta{
  display:flex; align-items:center; gap:.6rem; font-size:.85rem; color:var(--muted); margin-bottom:.4rem;
}
.title{ margin:0 0 .3rem; font-size:1.1rem; line-height:1.3; color:#fff; }
.excerpt{ margin:0; color:var(--muted); font-size:.96rem; }

/* =========================================================
   SIDEBAR
========================================================= */
aside{ display:flex; flex-direction:column; gap:1.2rem; }
.sidebar-offset{ margin-top:2rem; }

.widget{
  background: var(--panel); border-radius:18px; padding:16px;
  border:1px solid rgba(250,240,220,.06); box-shadow: var(--shadow);
}
.widget h3{ margin:0 0 .75rem; font-size:1.05rem; }

.cat-list, .trend-list{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.cat-list a, .trend-list a{
  color:inherit; text-decoration:none; display:flex; justify-content:space-between;
  padding:.5rem .6rem; border-radius:10px;
}
.cat-list a:hover, .trend-list a:hover{
  background: rgba(255,122,24,.10);
}

/* Newsletter input – rounded corners like the other themes */
.widget.newsletter input{
  width:100%;
  padding:.7rem .9rem;
  border-radius:12px;                 /* ⟵ rounded corners */
  border:1px solid rgba(250,240,220,.14);
  margin-bottom:.6rem;
  background:#120a1a;
  color:#EEE9FF;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  appearance: none;
}

@media (prefers-color-scheme: dark){
  .widget.newsletter input{
    background:#100918;
    border-color:rgba(255,255,255,.12);
    color:#f4f0ff;
  }
}

.widget.newsletter input:focus{
  border-color: rgba(255,122,24,.45);
  box-shadow: 0 0 0 3px rgba(255,122,24,.25);
}

/* =========================================================
   FOOTER
========================================================= */
footer{
  border-top: 1px dashed rgba(255,122,24,.25);
  background: linear-gradient(180deg, #120a1a, #0a0710);
  color:#e7ddf9; padding:40px 0 60px;
}
.foot{ display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:2rem; }
@media (max-width:900px){ .foot{ grid-template-columns:1fr; } }

.social{ display:flex; gap:.6rem; flex-wrap:wrap; }
.social a{
  width:38px; height:38px; border-radius:999px; display:grid; place-items:center;
  background: rgba(255,255,255,.06); color:#fff; text-decoration:none;
}
.copyright{ opacity:.7; font-size:.9rem; margin-top:1rem; }

/* =========================================================
   PAGINATION
========================================================= */
.pagination{ display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; margin-top:18px; }
.pagination a, .pagination span{
  padding:.45rem .7rem; border-radius:10px; text-decoration:none;
  background: rgba(255,255,255,.04); color:#fff; border:1px solid rgba(255,255,255,.08);
  font:inherit;
}
.pagination a:hover{ background: rgba(255,122,24,.12); }
.pagination .active{
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
  color:#1a0f06; border-color: transparent;
}
.pagination .disabled{ opacity:.55; cursor:default; }

/* =========================================================
   ACCESSIBILITY TWEAKS
========================================================= */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--ring); outline-offset:2px;
}


/* EXTRA CSS*/

/* ===== ARTICLE (Halloween style) ===== */
.article-title{
    font-size: clamp(1.3rem, 0.9rem + 1.2vw, 1.8rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 .35rem;
    color: inherit; /* inherit headline color from theme */
}
.article-date{
    font-size:.95rem;
    color: var(--muted);
    margin: 0 0 1rem;
    text-align:left;
}

/* Article cover image with subtle frame */
.article-image{
    display:block;
    width:100%;
    height:auto;
    margin: 18px auto;
    max-width:100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid rgba(250,240,220,.08); /* warm bone stroke */
}
@media (prefers-color-scheme: dark){
    .article-image{ border-color: rgba(255,255,255,.08); }
}

/* Rich post content */
.article-content{
    font-size: clamp(1rem, .96rem + .5vw, 1.08rem);
    line-height:1.7;
    color: inherit;
}
.article-content img{
    display:block;
    margin:.4rem auto;
    max-width:100%;
    height:auto;
    border-radius:12px;
}
.article-content img.note-float-left{ float:left;  margin:.3rem 1rem .3rem 0; }
.article-content img.note-float-right{ float:right; margin:.3rem 0 .3rem 1rem; }
.clear-float{ clear:both; }

/* ===== SOCIAL / HASHTAGS ===== */
.social-share-buttons{ display:flex; gap:.6rem; flex-wrap:wrap; margin: 18px 0; }
.social-share-buttons img{ width:44px; height:auto; transition: transform .2s ease; }
.social-share-buttons img:hover{ transform: scale(1.06); }

/* Hashtag chip with seasonal accents */
.hashtags-section{
    margin-top:16px; padding:12px;
    background: var(--panel);
    border:1px solid rgba(250,240,220,.10);
    border-radius:12px;
}
.hashtags-section h3{ margin:0 0 .35rem; font-size:1.05rem; }
.hashtags-section p{
    margin:0;
    color: var(--slime);    /* slime lime highlight */
    font-weight:600;
}
@media (prefers-color-scheme: dark){
    .hashtags-section{ border-color: rgba(255,255,255,.08); }
}

/* ===== MESSAGES ===== */
.message-success{ color:#22c55e; font-weight:700; } /* keep green for clarity */
.message-error{ color:#ef4444; font-weight:700; }  /* red reads better for errors */

/* ===== COMMENT FORM ===== */
.comment-form{ margin-top: 18px; display:grid; gap:.6rem; }
.comment-form input,
.comment-form textarea{
    width:100%;
    padding:.8rem 1rem;
    border-radius:12px;
    border:1px solid rgba(250,240,220,.14);
    background:#120a1a;
    color:#EEE9FF;
    outline:none;
    transition: box-shadow .15s ease, border-color .2s ease;
}
.comment-form textarea{ resize:vertical; }
/* Pumpkin focus glow */
.comment-form input:focus,
.comment-form textarea:focus{
    border-color: var(--brand-400);
    box-shadow: 0 0 0 3px var(--ring);
}
.comment-form button{ padding:.7rem 1.1rem; border-radius:12px; }
.comment-form img{
    margin:.4rem 0;
    border-radius:10px;
    border:1px solid rgba(250,240,220,.12);
}
@media (prefers-color-scheme: dark){
    .comment-form input,
    .comment-form textarea{
        background:#100918; color:#e8eaf6; border-color: rgba(255,255,255,.12);
    }
}

/* ===== COMMENTS LIST (bubble thread) ===== */
.comments-section{ margin-top: 22px; font-size: 1rem; overflow: hidden; }

.comment-list{
    list-style:none; padding:0; margin:.4rem 0 0;
    display:flex; flex-direction:column; gap:.9rem;
}

.comment{
    background: var(--panel);
    border:1px solid rgba(250,240,220,.10);
    border-radius:16px;
    padding:16px 18px;
    box-shadow: var(--shadow);
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.comment:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(255,122,24,.18);
    border-color: rgba(255,122,24,.22); /* pumpkin edge on hover */
}

.comment .meta{
    display:flex; align-items:center; gap:.5rem;
    font-size:.92rem; color:var(--muted);
    margin-bottom:.35rem;
}
/* Pill aligned to pumpkin palette */
.comment .meta .pill{
    background: color-mix(in srgb, var(--brand-600) 18%, transparent);
    color: #ffd9c1;
    border:1px solid color-mix(in srgb, var(--brand-400) 38%, transparent);
    padding:.18rem .5rem; border-radius:999px; font-weight:700;
}

.comment .excerpt{
    color:var(--muted);
    margin:.25rem 0 0;
    line-height:1.6;
    word-wrap:break-word; overflow-wrap:anywhere;
}

/* Center the label inside the comment form button */
.comment-form .btn{
    justify-content: center;
    line-height: 1;
    text-align: center;
}

/* Optional: make submit full width */
.comment-form .btn.is-full { width: 100%; }

/* Reply link with pumpkin underline */
.reply-icon{ width:18px; height:18px; vertical-align:middle; margin-right:6px; opacity:.85; }
.reply-link{
    display:inline-block;
    font-weight:600; text-decoration:none;
    border-bottom:1px dashed color-mix(in srgb, var(--brand-400) 60%, transparent);
    padding-bottom:1px;
}
.reply-link:hover{ border-bottom-style:solid; }

/* Replies thread connector and bubble */
.replies{
    list-style:none; padding-left:14px; margin:12px 0 0;
    display:grid; gap:.6rem; position:relative;
}
.replies::before{
    content:""; position:absolute; left:4px; top:6px; bottom:6px; width:2px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--brand-400) 35%, transparent),
        rgba(2,8,23,.06));
    border-radius:2px;
}
.reply{
    padding:12px 14px;
    background: color-mix(in srgb, var(--panel) 88%, var(--brand-400) 12%);
    border:1px solid rgba(250,240,220,.12);
    border-radius:12px;
}

/* Compact pagination inside article context */
.pagination{
    display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin-top:12px;
}
.pagination a, .pagination span.active{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:34px; height:34px; padding:0 .5rem;
    border-radius:10px; text-decoration:none;
    border:1px solid rgba(250,240,220,.12);
    background: var(--panel);
    color:inherit; font-weight:600; font-size:.95rem;
    transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.pagination a:hover{
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--brand-400) 45%, transparent);
}
.pagination .active{
    background: color-mix(in srgb, var(--brand-400) 16%, var(--panel) 84%);
    border-color: color-mix(in srgb, var(--brand-400) 50%, transparent);
}

iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    border: none;
    display: block;
}

/* Dark mode refinements */
@media (prefers-color-scheme: dark){
    .article-image{ border-color: rgba(255,255,255,.08); }
    .comment{ border-color: rgba(255,255,255,.08); }
    .comment:hover{ border-color: rgba(255,122,24,.28); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
    .comment .excerpt{ color:#e8eaf6; }
    .reply{
        background: color-mix(in srgb, var(--panel) 86%, var(--brand-400) 14%);
        border-color: rgba(255,255,255,.10);
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
    .comment, .pagination a{ transition:none; }
}


/* ===== Fix for pasted content (override inline colors) ===== */
:root{
  /* tweak these variables if you want different shades */
  --article-text: #EEE9FF;
  --article-muted: #cfc6e2;
  --article-link: #ffc371;
  --article-hr: rgba(255,255,255,.12);
}

.article-content{
  color: var(--article-text);
}

/* Reset colors/backgrounds from pasted content (wins over inline) */
.article-content *{
  color: inherit !important;
  background-color: transparent !important;
}

/* Basic typography inside content */
.article-content p,
.article-content li,
.article-content span{ color: var(--article-text) !important; }

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6{
  color: #fff !important;
  margin-top: 1.2em;
  margin-bottom: .4em;
}

/* Links */
.article-content a{
  color: var(--article-link) !important;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.35);
}
.article-content a:hover{
  text-decoration-thickness: 2px;
}

/* Blockquotes */
.article-content blockquote{
  margin: 1rem 0;
  padding: .8rem 1rem;
  border-left: 3px solid var(--brand-400);
  background: color-mix(in srgb, var(--panel) 88%, var(--brand-400) 12%);
  color: var(--article-text) !important;
  border-radius: 12px;
}

/* Code / pre */
.article-content code{
  padding: .15rem .35rem;
  border-radius: 8px;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1);
}
.article-content pre{
  padding: .9rem 1rem;
  border-radius: 12px;
  overflow:auto;
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.12);
}

/* Tables */
.article-content table{
  width:100%;
  border-collapse: collapse;
  margin: 1rem 0;
  color: var(--article-text) !important;
}
.article-content th,
.article-content td{
  border: 1px solid rgba(255,255,255,.12) !important;
  padding: .6rem .7rem;
}
.article-content thead th{
  background: color-mix(in srgb, var(--brand-400) 14%, var(--panel) 86%) !important;
}

/* Separators */
.article-content hr{
  border: none;
  height: 1px;
  background: var(--article-hr) !important;
  margin: 1.2rem 0;
}

/* ===========================
   AVATAR + BRAND ALIGNMENT
   =========================== */

/* Avatar image */
.nav-avatar img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  vertical-align: middle;
}

/* Hover effect (slight zoom and glow) */
.nav-avatar img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(107, 45, 211, 0.35);
}

/* Keep avatar and brand glued together on the left */
.nav-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Optional: small breathing space between main blocks in header */
.nav {
  gap: 1rem;
}

/* ===========================
   RESPONSIVE BEHAVIOR
   =========================== */
@media (max-width: 680px) {
  /* Stack avatar and brand vertically on narrow viewports */
  .nav-left {
    flex-direction: column;
    gap: 0.4rem;
    text-align: center;
  }

  .nav-avatar img {
    width: 44px;
    height: 44px;
  }

  .brand-title {
    font-size: 1.1rem;
  }
}

/* =========================================================
   RESPONSIVE HEADER FIX – HIDE BRAND & AVATAR ON MOBILE
   (Same logic as purple.css)
========================================================= */

/* Hard hide brand AND avatar on <=900px, keep search visible */
@media (max-width: 900px){
  .brand,
  .nav-avatar { 
    display: none !important;
  }

  /* Switch layout to grid: [ search | burger ] */
  .nav{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "search burger";
    align-items: center;
    gap: .5rem;
    height: 56px; /* slightly shorter header on mobile */
  }

  .search{
    grid-area: search;
    min-width: 0;
  }

  .search input{
    width: 100% !important;
    max-width: none;
    min-width: 0;
    padding: .55rem .9rem .55rem 2rem;
  }

  .search svg{
    left: .6rem;
  }

  .burger{
    grid-area: burger;
    justify-self: end;
    width: 44px;
    height: 44px; /* guaranteed tap target */
  }
}

/* XS safety: ensure burger never overflows viewport */
@media (max-width: 520px){
  .search input{
    max-width: calc(100vw - 3.25rem - 24px); /* burger + padding */
  }
}

/* Prevent vertical stacking of left group on narrow screens */
@media (max-width: 680px){
  .nav-left{
    flex-direction: row !important;
    gap: .5rem;
  }
}


/* ===== Base (scoped) Maintenance THEME — Halloween (pumpkin/slime) ===== */
.mnt-page, .mnt-page *, .mnt-page *::before, .mnt-page *::after { box-sizing: border-box; }

.mnt-page{
  margin:0;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
  color:#EEE9FF;
  background:#0c0b12;
  min-height:100svh;
  display:grid;
  place-items:center;
}
.mnt-page:focus-within{ scroll-behavior:smooth; }

/* Theme tokens (localized to Halloween palette) */
.mnt-page{
  --bg:#120a1a;
  --panel:#1a1324;
  --muted:#cfc6e2;

  --brand-900:#2a0e00;
  --brand-800:#3b1500;
  --brand-700:#5a2405;
  --brand-600:#ff7a18;  /* pumpkin */
  --brand-500:#ff5a14;
  --brand-400:#ff3d00;

  --accent-1:#ffc371;  /* light pumpkin */
  --accent-2:#ff5f6d;  /* warm rust/rose */

  --slime:#a3ff12;
  --bone:#eae7df;
  --ring:rgba(255,122,24,.38);

  --radius:16px;
  --shadow:0 10px 25px rgba(16,24,40,.22), 0 2px 8px rgba(16,24,40,.18);
  --container:880px;
}

.mnt-wrap{ width:min(var(--container), 100% - 2rem); margin-inline:auto; }

.mnt-card{
  background: linear-gradient(180deg, #17101f, #120a1a);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:var(--shadow);
  overflow:clip;
}

/* Hero */
.mnt-hero{
  position:relative; isolation:isolate;
  padding:48px 24px 18px;
  background:
    radial-gradient(1000px 320px at 0% -10%, rgba(255,122,24,.36), transparent 60%),
    radial-gradient(700px 320px at 100% 10%, rgba(163,255,18,.14), transparent 60%),
    linear-gradient(180deg, #1a0f24, #100918);
  color:#fff; text-align:center;
  border-bottom:1px dashed rgba(255,122,24,.25);
}

.mnt-brand{
  display:inline-flex; align-items:center; gap:.75rem;
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.3px;
}
.mnt-brand-badge{
  display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px;
  background: radial-gradient(120% 120% at 30% 20%, #ffd4a1 0%, #ff7a18 45%, #ff3d00 100%);
  color:#2b0e02; font-weight:800; font-size:1rem;
  box-shadow:0 4px 12px rgba(255,95,0,.35), 0 0 12px rgba(255,95,0,.22);
  user-select:none;
}
.mnt-brand-accent{
  color:var(--accent-2);
  background:linear-gradient(135deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; text-fill-color:transparent;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
}

.mnt-title{
  margin:16px 0 10px;
  font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  line-height:1.15;
}
.mnt-lead{
  margin:0; color:#f0eaff; opacity:.9;
  max-width:56ch; margin-inline:auto;
}

.mnt-main{ padding:18px 24px 28px; }

.mnt-panel{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:18px;
  color:#EEE9FF;
}

.mnt-grid{ display:grid; gap:1rem; grid-template-columns:1.2fr .8fr; }
@media (max-width:860px){ .mnt-grid{ grid-template-columns:1fr; } }

.mnt-status-row{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  flex-wrap:wrap; margin:.25rem 0 .5rem;
}

/* Pill */
.mnt-pill{
  display:inline-block; padding:.25rem .6rem; border-radius:999px;
  font-size:.82rem; font-weight:700; letter-spacing:.2px;
  background: rgba(255,122,24,.18);
  color:#ffd9c1; border:1px solid rgba(255,200,150,.38);
  backdrop-filter: blur(3px);
}

/* Progress */
.mnt-meter{
  width:100%; height:12px; border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden; border:1px solid rgba(255,255,255,.08);
}
.mnt-meter>span{
  display:block; height:100%; width:12%;
  background: linear-gradient(90deg, #ff7a18, #ff3d00);
  box-shadow: inset 0 0 8px rgba(0,0,0,.25);
  transition: width .4s ease;
}

.mnt-info{ color:var(--muted); font-size:.96rem; }

.mnt-list{ list-style:none; padding:0; margin:.2rem 0 0; display:grid; gap:.35rem; }
.mnt-list li{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:.6rem .75rem;
}

/* Actions */
.mnt-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.mnt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1rem; border-radius:999px; border:0; cursor:pointer;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
  color:#1a0f06; font-weight:800; text-decoration:none;
  box-shadow:0 8px 20px rgba(255,93,0,.28), inset 0 0 0 1px rgba(255,255,255,.06);
}
.mnt-btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }

/* Footer override inside scope */
.mnt-footer{ text-align:center; color:#cfc6e2; font-size:.95rem; padding:18px 0 8px; }

.mnt-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; white-space:nowrap; }

/* Neutralize global styles inside maintenance scope */
.mnt-page main{ margin-top:0 !important; }
.mnt-page footer{
  border-top:0 !important;
  background:none !important;
  color:#cfc6e2 !important;
  padding:18px 0 8px !important;
}


/* --- Editor's Pick (Random Post) --- */
.editors-pick .ep-card{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  background: var(--panel);
  border: 1px solid rgba(2,8,23,.06);
  border-radius: 14px;
  overflow: clip;
  box-shadow: var(--shadow);
}

/* Thumbnail */
.editors-pick .ep-thumb{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}

/* Body */
.editors-pick .ep-body{ padding: 12px 14px 14px; }
.editors-pick .ep-meta{
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: .25rem;
}

.editors-pick .ep-title{
  margin: 0 0 .35rem;
  font-size: 1rem;
  line-height: 1.25;
}
.editors-pick .ep-title a{
  color: inherit;
  text-decoration: none;
}
.editors-pick .ep-title a:hover{ text-decoration: underline; }

.editors-pick .ep-excerpt{
  margin: 0 0 .6rem;
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.5;
}

.editors-pick .ep-btn{
  width: 100%;
  justify-content: center;
}

/* Spacing between multiple Editor’s Pick cards */
.editors-pick .ep-card + .ep-card {
  margin-top: 16px;   /* Adds vertical space between stacked cards */
}

/* Dark mode tweaks */
@media (prefers-color-scheme: dark){
  .editors-pick .ep-card{ border-color: rgba(255,255,255,.08); }
  .editors-pick .ep-excerpt{ color: #e8eaf6; opacity: .85; }
}