/*
Theme Name: XXXNITE
Theme URI: https://xxxnite.com
Author: Annie
Description: Custom lightweight theme for XXXNITE.
Version: 1.0.0
Text Domain: xxxnite
*/

:root{
  --brand-pink:#E20074;
  --brand-yellow:#FFE000;
  --text:#fff;
  --bg:#0A0A0A;
}

html,body{margin:0;padding:0;background:var(--bg);color:var(--text);}
a{color:#fff;text-decoration:none}
a:hover{opacity:.85}
img{max-width:100%;height:auto;display:block}

/* Remove all list bullets */
ul, ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* simple utility */
.wrap{max-width:1200px;margin:0 auto;padding:12px 16px; text-align: center;}

/* Header/Nav */
.site-header{position:sticky;top:0;z-index:50;background:var(--brand-pink);box-shadow:0 2px 12px rgba(0,0,0,.25)}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{height:36px}
.brand__name{font-weight:800;letter-spacing:.5px}

.primary-nav{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.primary-nav a{padding:8px 12px;border-radius:8px;transition:all 0.3s ease}
.primary-nav .current-menu-item>a,
.primary-nav a:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}

.menu-btn{display:none;margin-left:auto;width:42px;height:42px;border:0;background:transparent;color:#fff;cursor:pointer;border-radius:8px;transition:all 0.3s ease}
.menu-btn:hover{background:rgba(255,255,255,.1)}
.menu-icon,.menu-icon:before,.menu-icon:after{display:block;width:22px;height:2px;background:#fff;border-radius:2px;position:relative;margin:auto;transition:all 0.3s ease}
.menu-icon:before,.menu-icon:after{content:"";position:absolute;left:0}
.menu-icon:before{top:-7px}
.menu-icon:after{top:7px}

/* Hamburger animation */
.menu-btn[aria-expanded="true"] .menu-icon{background:transparent}
.menu-btn[aria-expanded="true"] .menu-icon:before{transform:rotate(45deg);top:0}
.menu-btn[aria-expanded="true"] .menu-icon:after{transform:rotate(-45deg);top:0}

@media (max-width:820px){
  /* Hide desktop navigation on mobile */
  .primary-nav{
    position:fixed !important;
    top:60px !important;
    left:0 !important;
    right:0 !important;
    background:var(--brand-pink) !important;
    display:none !important;
    flex-direction:column !important;
    padding:20px !important;
    gap:8px !important;
    box-shadow:0 4px 20px rgba(0,0,0,.3) !important;
    border-radius:0 0 12px 12px !important;
    z-index:9999 !important;
    margin:0 !important;
  }
  
  .primary-nav.is-open{
    display:flex !important;
  }
  
  .menu-btn{
    display:inline-grid !important;
    place-items:center !important;
    background:rgba(255,255,255,.1) !important;
    border-radius:8px !important;
    transition:all 0.3s ease !important;
  }
  
  .menu-btn:hover{
    background:rgba(255,255,255,.2) !important;
  }
  
  .primary-nav a{
    padding:12px 16px !important;
    border-radius:8px !important;
    margin:2px 0 !important;
    text-align:center !important;
    font-weight:600 !important;
    font-size:1rem !important;
    transition:all 0.3s ease !important;
    background:rgba(255,255,255,.1) !important;
    display:block !important;
    color:#fff !important;
    text-decoration:none !important;
  }
  
  .primary-nav a:hover{
    background:rgba(255,255,255,.2) !important;
    transform:translateY(-1px) !important;
  }
}

@keyframes slideDown{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}

/* Content */
main{padding:24px 16px}
.post{max-width:820px;margin:0 auto 40px;background:#111;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden}
.post__inner{padding:20px}
.post h1,.post h2, .post h3 {margin:0; padding: 0;}
section.post h1,
section.post h2,
section.post h3 {
  margin: 0 !important;
  padding: 0 !important;
}
.post .meta{opacity:.7;font-size:.9rem;margin-bottom:12px}

/* Footer */
.site-footer{background:var(--brand-pink);color:#fff;text-align:center;padding:24px 12px}
.site-footer a{text-decoration:underline}
.site-footer a:hover{text-decoration:none}
.site-footer .fine{opacity:.8;font-size:.85rem;margin-top:6px};

.comingsoon {
	padding: 30px 0 !important;
	background:#0A0A0A;
}

section.comingsoon h1,
section.comingsoon h2,
section.comingsoon h3 {
  margin: 0 !important;
  padding: 0 !important;
}

.cam_wrap {
    padding: 20px 0 !important;
    margin: 0 !important;
}

.wrap:has(.cam_wrap) {
    padding: 20px 0 !important;
}

.wrap .cam_wrap {
    padding: 20px 0 !important;
    margin: 0 !important;
}