/* Ghanti Bajyo App Styles (PWA-plugin friendly) */
:root{
  --primary: #0094DA;
  --primary-dark: #0077B3;
  --shadow: rgba(0, 0, 0, 0.15);
  --bg: var(--primary);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}

body.ghanti-app{
  font-family: ui-serif, Georgia, 'Times New Roman', serif;
  background: var(--bg);
  min-height:100vh;
  overflow:hidden;
  touch-action: manipulation;
  position:relative;
}
body.ghanti-app::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.06) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.04) 0%, transparent 50%);
  pointer-events:none;
}

.gz-app{position:relative; height:100vh; width:100%}
.gz-container{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1000px;
}

/* Top controls */
.gz-topbar{
  position:absolute;
  top:16px; left:16px; right:16px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
.gz-topbar > *{ pointer-events:auto; }

.gz-sound-group{ display:flex; align-items:center; gap:8px; }
.gz-sound-label{
  color: rgba(255,255,255,.85);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
}
.gz-sound-select{
  appearance:none;
  border: 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: #0b4c6d;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.gz-sound-select:focus-visible{
  outline:3px solid rgba(255,255,255,.7);
  outline-offset:2px;
}

.gz-enable-motion-btn{
  background: rgba(255,255,255,.95);
  color: var(--primary);
  border:0;
  padding:10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.gz-enable-motion-btn.hidden{ opacity:0; transform: translateY(-8px); pointer-events:none; }

/* Bell */
.gz-bell-wrapper{
  border:0;
  background:transparent;
  cursor:pointer;
  user-select:none;
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .06s ease-out;
}
.gz-bell-wrapper:focus-visible{
  outline:3px solid rgba(255,255,255,.7);
  outline-offset:8px;
  border-radius:999px;
}
.gz-white-circle{
  width:min(80vw, 80vh, 420px);
  height:min(80vw, 80vh, 420px);
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 20px 60px var(--shadow), 0 0 0 1px rgba(255,255,255,.1) inset;
  position:relative;
  overflow:visible;
}
.gz-ripple{
  position:absolute;
  border-radius:50%;
  border:2px solid rgba(0,148,218,.4);
  animation: gz-ripple 1s ease-out forwards;
  pointer-events:none;
}
@keyframes gz-ripple{
  from{width:60%; height:60%; opacity:1}
  to{width:120%; height:120%; opacity:0}
}
.gz-bell-svg{
  width:50%;
  height:50%;
  filter: drop-shadow(0 8px 16px var(--shadow));
  transform-origin:center 20%;
  will-change:transform;
}
.gz-bell-fill{ fill: var(--primary); }

/* Swing animations */
@keyframes gz-swing-light{0%,100%{transform:rotate(0)}25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}}
@keyframes gz-swing-medium{0%,100%{transform:rotate(0)}25%{transform:rotate(6deg)}75%{transform:rotate(-6deg)}}
@keyframes gz-swing-heavy{0%,100%{transform:rotate(0)}25%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}}
@keyframes gz-swing-intense{0%,100%{transform:rotate(0)}25%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}}
.gz-bell-svg.swing-light{ animation: gz-swing-light .8s ease-in-out; }
.gz-bell-svg.swing-medium{ animation: gz-swing-medium .7s ease-in-out; }
.gz-bell-svg.swing-heavy{ animation: gz-swing-heavy .6s ease-in-out; }
.gz-bell-svg.swing-intense{ animation: gz-swing-intense .5s ease-in-out; }

.gz-instructions{
  position:absolute;
  bottom:10vh;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  color: rgba(255,255,255,.7);
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 800;
  letter-spacing: .6px;
  padding: 0 18px;
  max-width: 92vw;
}

/* Modal (kept, optional) */
.gz-permission-prompt{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding: 20px;
}
.gz-permission-prompt.show{ display:flex; }

.gz-prompt-content{
  background:#fff;
  padding: clamp(22px, 6vw, 38px);
  border-radius: 16px;
  max-width: 420px;
  width: 92%;
  text-align:center;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.gz-prompt-content h2{
  font-size: clamp(18px, 5vw, 26px);
  color: var(--primary-dark);
  margin-bottom: 10px;
}
.gz-prompt-content p{
  color:#666;
  font-size: clamp(14px, 3.5vw, 16px);
  line-height: 1.55;
  margin-bottom: 18px;
}
.gz-prompt-button{
  width:100%;
  background: var(--primary);
  color:#fff;
  border:0;
  padding: 13px 18px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 900;
  cursor:pointer;
}

.gz-toast{
  position:absolute;
  bottom:16px;
  left:50%;
  transform: translate(-50%, 10px);
  max-width:min(520px, 92vw);
  background: rgba(0,0,0,.38);
  color:#fff;
  padding:10px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.3;
  opacity:0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.gz-toast.show{ opacity:1; transform: translate(-50%, 0); }

@media (hover:none){
  .gz-bell-wrapper:active{ transform: scale(.96); }
}

@media (prefers-reduced-motion: reduce){
  .gz-bell-svg.swing-light,
  .gz-bell-svg.swing-medium,
  .gz-bell-svg.swing-heavy,
  .gz-bell-svg.swing-intense{ animation:none !important; }
  .gz-ripple{ animation:none !important; opacity:0; }
}


/* =========================
   Header / Footer (Responsive)
   ========================= */
body{
  margin:0;
  background: var(--bg);
  color:#fff;
}

body{
  display:flex;
  min-height:100vh;
  flex-direction:column;
}

.gz-site-header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.gz-header-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.gz-site-title{
  text-decoration:none;
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  font-size:18px;
  line-height:1;
}

.gz-site-title:focus{outline:2px solid rgba(255,255,255,.8); outline-offset:4px; border-radius:10px;}

.gz-site-nav{ position:relative; }

.gz-nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  cursor:pointer;
}

.gz-nav-toggle-bars{
  width:18px; height:2px; background:#fff; position:relative; display:block;
}
.gz-nav-toggle-bars:before,
.gz-nav-toggle-bars:after{
  content:"";
  position:absolute; left:0;
  width:18px; height:2px; background:#fff;
}
.gz-nav-toggle-bars:before{ top:-6px; }
.gz-nav-toggle-bars:after{ top:6px; }

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

.gz-nav-menu{
  position:absolute;
  right:0;
  top:52px;
  min-width: 190px;
  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  display:none;
}

.gz-nav-menu.is-open{ display:block; }

.gz-menu{ list-style:none; margin:0; padding:8px; display:flex; flex-direction:column; gap:4px; }
.gz-menu a{
  display:block;
  padding:10px 12px;
  border-radius: 12px;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  background: rgba(255,255,255,.06);
}
.gz-menu a:hover{ background: rgba(255,255,255,.12); }

@media (min-width: 720px){
  .gz-nav-toggle{ display:none; }
  .gz-nav-menu{
    position:static;
    display:block !important;
    background: transparent;
    border:none;
    box-shadow:none;
    min-width:auto;
  }
  .gz-menu{ flex-direction:row; padding:0; gap:10px; }
  .gz-menu a{ background: rgba(255,255,255,.10); }
}

.gz-site-footer{
  margin-top:auto;
  padding: 18px 16px;
  background: rgba(0,0,0,.12);
  border-top: 1px solid rgba(255,255,255,.15);
  color:#fff;
  text-align:center;
}

.gz-footer-inner{
  max-width:1100px;
  margin:0 auto;
  font-size:14px;
  opacity:.95;
}

/* Blog layout */
.gz-content{ flex:1; width:100%; }
.gz-content-inner{
  max-width:1100px;
  margin: 0 auto;
  padding: 22px 16px 36px;
  color:#fff;
}

.gz-page-title{ font-size:28px; margin-bottom:10px; }
.gz-post-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 700px){
  .gz-post-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1020px){
  .gz-post-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.gz-post-card{
  border:1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(0,0,0,.18);
}

.gz-post-link{ display:block; color:#fff; text-decoration:none; padding:14px; }
.gz-post-title{ font-size:18px; margin: 10px 0 8px; }
.gz-post-excerpt{ opacity:.92; line-height:1.5; }
.gz-post-meta{ display:inline-block; margin-top:10px; opacity:.85; font-size:13px; }

.gz-thumb img, .gz-single-thumb img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 14px;
}

.gz-pagination{ margin-top: 18px; }
.gz-pagination .page-numbers{
  display:inline-block;
  margin: 4px 6px 0 0;
  padding: 8px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  text-decoration:none;
  background: rgba(255,255,255,.08);
}
.gz-pagination .current{ background: rgba(255,255,255,.18); }

.gz-single{ border:1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.18); border-radius: 20px; padding: 18px; }
.gz-single-title{ font-size:30px; margin-bottom: 8px; }
.gz-single-meta{ opacity:.85; margin-bottom: 14px; }
.gz-single-content{ line-height:1.7; }
.gz-single-content a{ color:#fff; text-decoration:underline; }
.gz-single-nav{ margin-top: 18px; }
.gz-single-nav a{ color:#fff; }