:root{
  --container: 1180px;
  --bg: #0b0c10;
  --panel: #11131a;
  --panel2:#0f1117;
  --text:#e9ecf1;
  --muted:#a8b0c0;
  --line: rgba(255,255,255,.08);
  --accent:#ff2a2a;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --r: 18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(255,42,42,.12), transparent 60%),
              radial-gradient(1200px 600px at 80% 10%, rgba(255,255,255,.06), transparent 60%),
              var(--bg);
  color:var(--text);
  line-height:1.7;
}

a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 16px}
.hr{height:1px;background:var(--line);margin:18px 0}

/* Accessibility */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto; padding:10px 12px;
  background: rgba(0,0,0,.8); border:1px solid var(--line); border-radius:12px;
  z-index:9999;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(11,12,16,.55);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:12px;
}
.brand{
  display:flex; align-items:center; gap:12px; min-width:200px;
}
.brand .site-title{font-weight:900; letter-spacing:.2px}
.brand .site-desc{color:var(--muted); font-size:.9rem}

.nav{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
}
.nav a{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--text);
}
.nav a:hover{
  border-color:var(--line);
  background: rgba(255,255,255,.04);
}

/* Hero */
.hero{
  margin:18px 0 8px;
  padding:18px;
  border:1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.hero h1{margin:0 0 6px; font-size:1.7rem}
.hero p{margin:0; color:var(--muted)}

/* Panel */
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel .panel-pad{padding:18px}

/* Grid cards */
.grid{
  display:grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap:16px;
}
@media (min-width: 640px){
  .grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (min-width: 980px){
  .grid{grid-template-columns: repeat(3, minmax(0, 1fr))}
}

.card{
  border:1px solid var(--line);
  background: rgba(15,17,23,.7);
  border-radius: 16px;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,42,42,.35);
}
.card-media{
  aspect-ratio: 16/10;
  background: rgba(255,255,255,.04);
  overflow:hidden;
}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:14px}
.card-title{margin:0 0 6px;font-weight:900; line-height:1.25}
.card-meta{color:var(--muted);font-size:.85rem}
.card-excerpt{color:#d6d9e2;margin:10px 0 0; font-size:.95rem}
.badge{
  display:inline-flex; align-items:center;
  border:1px solid var(--line);
  padding:4px 10px; border-radius:999px;
  font-size:.8rem; color:var(--muted);
}

/* Single / Page */
.entry h1{margin:0 0 10px; font-size:2rem; line-height:1.2}
.entry .meta{color:var(--muted); font-size:.95rem}
.entry .content{margin-top:14px}
.entry .content p{margin: 0 0 14px}
.entry .panel-pad{
  max-width: 900px;
  margin: 0 auto;
}

/* Gutenberg blocks */
.wp-block-image{margin: 0 0 16px}
.wp-block-quote{
  border-left: 4px solid var(--accent);
  margin: 18px 0;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border-radius: 14px;
}

/* Pagination */
.navigation.pagination{
  display:flex;
  justify-content:center;
}
.nav-links{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
}
.page-numbers{
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.03);
}
.page-numbers.current{
  border-color: rgba(255,42,42,.45);
  color: var(--text);
}

/* Footer */
.site-footer{
  border-top:1px solid var(--line);
  padding:22px 0;
  color:var(--muted);
  margin-top: 26px;
}
.footer-links a{margin-left:10px}

/* Search form */
.search-form{
  display:flex; gap:8px; margin: 10px 0 0;
}
.search-field{
  flex:1;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
}
.search-submit{
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
}
.search-submit:hover{border-color: rgba(255,42,42,.35)}

/* --- Menus (fix bullets + dropdown) --- */
.site-nav{position:relative}
.menu, .footer-menu, .menu ul, .footer-menu ul{list-style:none;margin:0;padding:0}
.menu{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}
.menu > li{position:relative}
.menu a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--text);
  white-space:nowrap;
}
.menu a:hover{
  border-color:var(--line);
  background: rgba(255,255,255,.04);
}

/* Submenu */
.menu .sub-menu{
  position:absolute;
  left:0;
  top:100%;
  min-width: 220px;
  background: rgba(15,17,23,.98);
  border:1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding:8px;
  display:none;
  z-index:100;
}
.menu .sub-menu li a{
  display:flex;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
}
.menu li:hover > .sub-menu,
.menu li:focus-within > .sub-menu{
  display:block;
}

/* Mobile toggle */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav-toggle__bar{
  display:block;
  width:18px;
  height:2px;
  background: var(--text);
  margin:3px 0;
  border-radius:2px;
}
@media (max-width: 860px){
  .header-inner{flex-wrap:wrap}
  .nav-toggle{display:inline-flex}
  .site-nav{width:100%}
  .menu{
    width:100%;
    justify-content:flex-start;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    display:none; /* opened via JS */
    padding-top: 8px;
  }
  .menu > li{width:100%}
  .menu a{width:100%; justify-content:space-between}
  .menu .sub-menu{
    position:static;
    display:block; /* always visible inside */
    background: rgba(255,255,255,.02);
    border-color: rgba(255,255,255,.06);
    box-shadow:none;
    margin-top:6px;
    padding:6px;
  }
  body.nav-open .menu{display:flex}
}

/* Footer menu */
.footer-inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;}
.footer-menu{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.footer-menu a{
  display:inline-flex;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid transparent;
}
.footer-menu a:hover{border-color:var(--line); background: rgba(255,255,255,.04);}

/* ===== Menu reset & layout (robust) ===== */
.site-header ul,
.site-header ol,
.site-header li,
.site-footer ul,
.site-footer li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Desktop menu */
.site-nav{margin-left:auto}
.site-nav .xlife-menu{
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.site-nav .xlife-menu > li{position:relative}
.site-nav .xlife-menu a{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  white-space:nowrap;
}
.site-nav .xlife-menu a:hover{
  border-color:var(--line);
  background: rgba(255,255,255,.04);
}

/* Dropdown */
.site-nav .xlife-menu .sub-menu{
  position:absolute;
  left:0;
  top:100%;
  min-width:220px;
  background: rgba(15,17,23,.98);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:8px;
  display:none;
  z-index:200;
}
.site-nav .xlife-menu .sub-menu a{
  display:flex;
  padding:10px 10px;
  border-radius:12px;
}
.site-nav .xlife-menu li:hover > .sub-menu,
.site-nav .xlife-menu li:focus-within > .sub-menu{display:block}

/* Mobile toggle */
@media (max-width: 900px){
  .header-inner{flex-wrap:wrap}
  .nav-toggle{display:inline-flex}
  .site-nav{width:100%}
  .site-nav .xlife-menu{
    display:none !important;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:6px;
    padding-top:8px;
  }
  body.nav-open .site-nav .xlife-menu{display:flex !important}
  .site-nav .xlife-menu a{width:100%; justify-content:space-between}
  .site-nav .xlife-menu .sub-menu{
    position:static;
    display:block;
    background: rgba(255,255,255,.02);
    border-color: rgba(255,255,255,.06);
    box-shadow:none;
    margin-top:6px;
    padding:6px;
  }
}

/* Footer menu */
.footer-inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;}
.xlife-footer-menu{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.xlife-footer-menu a{
  display:inline-flex;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid transparent;
}
.xlife-footer-menu a:hover{border-color:var(--line); background: rgba(255,255,255,.04);}

/* ===== Fixed header (no layout shift) ===== */
.site-header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100%;
}
/* Give page space for fixed header */
main#content{ padding-top: 86px; }

/* Keep header one-line */
.header-inner{flex-wrap:nowrap !important;}

/* Mobile menu should overlay, not push content */
@media (max-width: 900px){
  .site-nav{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(11,12,16,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    padding: 10px 16px 14px;
    display: none;
  }
  body.nav-open .site-nav{display:block}
  .site-nav .xlife-menu{display:flex !important; padding-top:0;}
  /* prevent header wrap due to nav width */
  .brand{min-width:0;}
}

/* Small screens header height tweak */
@media (max-width: 520px){
  main#content{ padding-top: 92px; }
}

/* ===== Header not sticky (override) ===== */
.site-header{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
}
main#content{ padding-top: 0 !important; }

/* Logo size handled by Customizer (defaults to 150px) */
.custom-logo-link img{display:block;}

/* Dropdown hover bridge */
.site-nav .xlife-menu > li{ padding-bottom: 8px; }
.site-nav .xlife-menu > li > a{ margin-bottom: -8px; }

/* ===== Modern search bar ===== */
.xlife-search{
  display:flex;
  gap:10px;
  align-items:stretch;
  margin-top: 10px;
}
.xlife-search__label{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
}
.xlife-search__icon{
  position:absolute;
  left:12px;
  color: var(--muted);
  font-size: 14px;
  pointer-events:none;
}
.xlife-search__field{
  width:100%;
  padding:12px 12px 12px 34px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline: none;
}
.xlife-search__field:focus{
  border-color: rgba(255,42,42,.45);
  box-shadow: 0 0 0 4px rgba(255,42,42,.12);
}
.xlife-search__submit{
  padding:12px 16px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,42,42,.22), rgba(255,42,42,.12));
  color: var(--text);
  cursor:pointer;
  white-space:nowrap;
}
.xlife-search__submit:hover{
  border-color: rgba(255,42,42,.45);
}

/* Make hero cleaner on small screens */
@media (max-width: 640px){
  .hero{padding:14px}
  .hero h1{font-size:1.35rem}
  .xlife-search{
    flex-direction:column;
    gap:8px;
  }
  .xlife-search__submit{width:100%}
}

/* ===== Responsive improvements ===== */
/* Prevent header overflow on small screens */
@media (max-width: 720px){
  .header-inner{gap:10px}
  .brand{min-width:0}
  .custom-logo-link img{max-width:120px !important; max-height:120px !important;}
}

/* Cards: better image aspect ratio on very small screens */
@media (max-width: 420px){
  .card-media{aspect-ratio: 16/11;}
  .card-title{font-size:1.05rem}
}

/* Grid: ensure no horizontal scroll */
.grid{min-width:0}
.card, .panel, .hero{min-width:0}

/* ===== Mobile overflow hardening ===== */
html, body{overflow-x:hidden}
.container{min-width:0}
.panel-pad, .content, .entry{min-width:0}
h1,h2,h3,p,a,li{overflow-wrap:anywhere}
img, video, iframe{max-width:100%}

/* ===== Nav toggle as text ===== */
.nav-toggle{
  display:none;
  padding:10px 14px;
  height:auto;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  font-weight:800;
  letter-spacing:.2px;
}
@media (max-width: 900px){
  .nav-toggle{display:inline-flex}
}

/* ===== Comments styling ===== */
.xlife-comments__title{
  margin: 0 0 10px;
  font-weight: 900;
}
.xlife-comment-list{
  margin: 0;
  padding-left: 18px;
}
.xlife-comment-list .comment{
  margin: 0 0 14px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(15,17,23,.55);
  border-radius: 16px;
}
.xlife-comment-list .comment .comment-meta{
  color: var(--muted);
  font-size: .9rem;
}
.xlife-comment-list .comment a{color: var(--text)}
.xlife-comment-list .comment a:hover{color: var(--accent)}
.xlife-comment-list .comment-content{
  margin-top: 8px;
}
.xlife-comment-form input[type="text"],
.xlife-comment-form input[type="email"],
.xlife-comment-form input[type="url"],
.xlife-comment-form textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline: none;
}
.xlife-comment-form textarea{min-height: 120px; resize: vertical}
.xlife-comment-form input:focus,
.xlife-comment-form textarea:focus{
  border-color: rgba(255,42,42,.45);
  box-shadow: 0 0 0 4px rgba(255,42,42,.12);
}
.xlife-comment-form .form-submit{margin: 10px 0 0}
.xlife-comment-form input[type="submit"]{
  width:100%;
  padding:12px 16px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,42,42,.22), rgba(255,42,42,.12));
  color: var(--text);
  cursor:pointer;
  font-weight: 800;
}
.xlife-comment-form input[type="submit"]:hover{
  border-color: rgba(255,42,42,.45);
}

/* ===== Mobile menu button spacing ===== */
@media (max-width: 900px){
  .nav-toggle{
    margin-left: auto;
    margin-right: 10px; /* keep away from the edge */
  }
  .header-inner{
    padding-right: 10px; /* extra breathing room on the right */
  }
}
@media (max-width: 420px){
  .nav-toggle{
    margin-right: 14px;
  }
}