/* PPRPress — Blue & Red theme: header + tools sidebar
   Self-contained (does not depend on Tailwind build). */
:root{
  --ppr-blue-900:#172554; --ppr-blue-800:#1e3a8a; --ppr-blue-700:#1d4ed8; --ppr-blue-600:#2563eb;
  --ppr-red-600:#dc2626; --ppr-red-700:#b91c1c; --ppr-red-800:#991b1b;
}

/* ===================== HEADER ===================== */
.ppr-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(90deg,var(--ppr-blue-800) 0%,var(--ppr-blue-700) 55%,var(--ppr-blue-600) 100%);
  border-bottom:4px solid var(--ppr-red-600);
  box-shadow:0 6px 18px rgba(23,37,84,.28);
}
.ppr-header-inner{
  max-width:80rem; margin:0 auto; min-height:68px;
  display:flex; align-items:center; gap:1rem; padding:0 1rem;
}
@media (min-width:640px){ .ppr-header-inner{ padding:0 1.5rem; } }

.ppr-logo-link{
  display:flex; align-items:center; flex-shrink:0;
  background:#fff; border-radius:12px; padding:3px 8px; margin:6px 0;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.ppr-logo-link img{ border-radius:6px; }

.ppr-desktop-nav{ display:none; flex:1 1 0%; min-width:0; align-items:center; gap:.5rem; }
@media (min-width:1024px){ .ppr-desktop-nav{ display:flex; } }
.ppr-push{ margin-left:auto; }

.ppr-nav-btn{
  display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
  background:var(--ppr-red-600); color:#fff !important; text-decoration:none;
  border:1px solid var(--ppr-red-700); border-radius:10px;
  padding:.5rem .85rem; font-size:.875rem; font-weight:700; line-height:1.25rem;
  box-shadow:0 1px 3px rgba(0,0,0,.25); cursor:pointer;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ppr-nav-btn:hover{ background:var(--ppr-red-700); transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.28); }
.ppr-nav-btn:focus-visible,.ppr-menu-btn:focus-visible,.ppr-mobile-link:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.ppr-nav-btn.is-active{ background:var(--ppr-red-800); box-shadow:0 0 0 2px #fff; }

/* Tools dropdown */
.ppr-dropdown{
  position:absolute; left:0; top:100%; z-index:60; width:19rem;
  max-height:min(75vh,34rem); overflow-y:auto;
  background:#fff; border:1px solid #bfdbfe; border-top:4px solid var(--ppr-red-600);
  border-radius:0 0 14px 14px; padding:.5rem; box-shadow:0 18px 40px rgba(23,37,84,.3);
}
.ppr-dd-group{ margin-bottom:.35rem; }
.ppr-dd-label{
  margin:0; padding:.35rem .75rem; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ppr-blue-800); border-left:4px solid var(--ppr-red-600); background:#eff6ff; border-radius:4px;
}
.ppr-dd-item{
  display:block; padding:.45rem .75rem; margin-top:2px; border-radius:8px; text-decoration:none;
  font-size:.875rem; font-weight:500; color:#1e293b; transition:background .12s, color .12s, padding .12s;
}
.ppr-dd-item:hover{ background:#fee2e2; color:var(--ppr-red-700); padding-left:1rem; }
.ppr-dd-all{
  display:block; margin-top:.25rem; padding:.55rem .75rem; border-radius:8px; text-align:center; text-decoration:none;
  font-size:.875rem; font-weight:700; color:#fff; background:var(--ppr-blue-700);
}
.ppr-dd-all:hover{ background:var(--ppr-blue-800); }

/* Mobile */
.ppr-menu-btn{
  margin-left:auto; display:inline-flex; align-items:center; justify-content:center; min-height:40px;
  background:var(--ppr-red-600); color:#fff; border:1px solid var(--ppr-red-700); border-radius:10px;
  padding:0 1rem; font-size:.875rem; font-weight:700; cursor:pointer;
}
@media (min-width:1024px){ .ppr-menu-btn{ display:none; } }
.ppr-mobile-nav{ display:grid; gap:.5rem; padding:.75rem 1rem 1rem; background:var(--ppr-blue-800); border-top:1px solid rgba(255,255,255,.18); }
@media (min-width:1024px){ .ppr-mobile-nav{ display:none; } }
.ppr-mobile-link{
  display:block; text-decoration:none; text-align:center; padding:.75rem 1rem; border-radius:10px;
  background:var(--ppr-red-600); border:1px solid var(--ppr-red-700); color:#fff; font-size:.9rem; font-weight:700;
}
.ppr-mobile-link:hover{ background:var(--ppr-red-700); }
.ppr-mobile-tools{ background:#fff; color:var(--ppr-blue-800); border-color:#fff; }
.ppr-mobile-tools:hover{ background:#dbeafe; }

/* ===================== LEFT SIDEBAR ===================== */
.ppr-side{
  background:linear-gradient(180deg,var(--ppr-blue-700) 0%,#1e40af 55%,var(--ppr-blue-800) 100%);
  color:#fff; border:1px solid var(--ppr-blue-800); border-radius:16px; padding:16px;
  box-shadow:0 12px 28px rgba(30,58,138,.28);
}
.ppr-side-desktop{ display:none; }
@media (min-width:1024px){
  .ppr-side-desktop{ display:block; }
}
.ppr-side-title{
  margin:0 0 14px; padding-bottom:10px; border-bottom:3px solid var(--ppr-red-600);
  font-size:15px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff;
}
.ppr-side-group{ margin-bottom:16px; }
.ppr-side-group:last-child{ margin-bottom:0; }
.ppr-side-head{
  display:flex; align-items:center; justify-content:space-between; margin:0 0 8px;
  background:rgba(15,23,42,.38); border-left:4px solid var(--ppr-red-600); border-radius:10px;
  padding:8px 12px; font-size:13px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#fff;
}
.ppr-side-count{
  min-width:22px; text-align:center; background:#fff; color:var(--ppr-blue-800);
  border-radius:999px; font-size:11px; font-weight:800; padding:1px 7px; letter-spacing:0;
}
.ppr-side-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.ppr-side-btn{
  display:block; background:var(--ppr-red-600); color:#fff !important; text-decoration:none;
  border:1px solid var(--ppr-red-700); border-radius:10px; padding:9px 12px;
  font-size:14px; font-weight:600; line-height:1.3; box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ppr-side-btn:hover{ background:var(--ppr-red-700); transform:translateX(4px); box-shadow:0 4px 10px rgba(0,0,0,.3); }
.ppr-side-btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

.ppr-side-btn.is-current{ background:#fff; color:var(--ppr-red-700) !important; border-color:#fff; box-shadow:0 0 0 2px var(--ppr-red-600); }
.ppr-side-btn.is-current:hover{ background:#fff; transform:none; }

/* ===================== SIDEBAR ON EVERY PAGE (shell) ===================== */
.ppr-shell{ display:block; }
@media (min-width:1024px){
  /* sidebar is flush with the left edge of the screen, directly under the header,
     and stretches the full height of the page body (no white gap left/below) */
  .ppr-shell{ display:grid; grid-template-columns:280px minmax(0,1fr); align-items:stretch; max-width:none; margin:0; padding:0; }
  .ppr-shell > .ppr-side-desktop{
    align-self:stretch; margin:0; border-radius:0; border-width:0 4px 0 0; border-color:var(--ppr-red-600);
    padding:20px 18px 28px; box-shadow:6px 0 24px rgba(30,58,138,.22);
  }
  .ppr-shell-main{ min-width:0; }
}
/* tool page content (single column) */
.ppr-tool-grid{ display:grid; gap:2rem; grid-template-columns:minmax(0,1fr); }

/* ===================== MOBILE: quick access card (homepage tools section) ===================== */
.ppr-quick{
  margin-bottom:1.5rem; border-radius:18px; padding:14px;
  background:linear-gradient(135deg,var(--ppr-blue-800),var(--ppr-blue-700));
  border-bottom:4px solid var(--ppr-red-600); box-shadow:0 10px 24px rgba(30,58,138,.25); color:#fff;
}
@media (min-width:1024px){ .ppr-quick{ display:none; } }
.ppr-quick-top{ display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.ppr-quick-top strong{ font-size:16px; font-weight:800; }
.ppr-quick-top span{ font-size:12px; color:#bfdbfe; }
.ppr-quick-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ppr-quick-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px; cursor:pointer; text-align:left;
  background:var(--ppr-red-600); color:#fff; border:1px solid var(--ppr-red-700); border-radius:12px; padding:10px 12px;
  box-shadow:0 2px 5px rgba(0,0,0,.25); transition:background .15s, transform .1s;
}
.ppr-quick-btn:active{ transform:scale(.97); background:var(--ppr-red-700); }
.ppr-quick-btn span{ font-size:15px; font-weight:800; }
.ppr-quick-btn small{ font-size:11px; color:#fecaca; font-weight:600; }

/* ===================== MOBILE: floating button + slide-in drawer ===================== */
.ppr-fab{
  position:fixed; left:14px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:80;
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px; cursor:pointer;
  background:var(--ppr-red-600); color:#fff; border:2px solid #fff; font-size:14px; font-weight:800;
  box-shadow:0 8px 22px rgba(185,28,28,.45);
  opacity:0; transform:translateY(20px) scale(.9); pointer-events:none; transition:opacity .2s, transform .2s;
}
.ppr-fab.is-show{ opacity:1; transform:none; pointer-events:auto; }
.ppr-fab:active{ background:var(--ppr-red-700); }
.ppr-overlay{
  position:fixed; inset:0; z-index:90; background:rgba(15,23,42,.55); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.ppr-overlay.is-open{ opacity:1; visibility:visible; }
.ppr-drawer{
  position:fixed; top:0; bottom:0; left:0; z-index:100; width:min(86vw,340px);
  display:flex; flex-direction:column; color:#fff;
  background:linear-gradient(180deg,var(--ppr-blue-700) 0%,#1e40af 55%,var(--ppr-blue-800) 100%);
  border-right:4px solid var(--ppr-red-600); box-shadow:12px 0 40px rgba(0,0,0,.35);
  transform:translateX(-102%); visibility:hidden; transition:transform .28s ease, visibility .28s;
  padding-top:env(safe-area-inset-top,0px);
}
.ppr-drawer.is-open{ transform:none; visibility:visible; }
.ppr-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 16px 12px; border-bottom:3px solid var(--ppr-red-600); }
.ppr-drawer-title{ margin:0; font-size:16px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.ppr-drawer-close{
  cursor:pointer; background:var(--ppr-red-600); color:#fff; border:1px solid var(--ppr-red-700);
  border-radius:10px; padding:7px 14px; font-size:13px; font-weight:800;
}
.ppr-drawer-body{ flex:1; overflow-y:auto; padding:14px 14px calc(24px + env(safe-area-inset-bottom,0px)); overscroll-behavior:contain; }
.ppr-drawer-body .ppr-side-btn{ padding:11px 12px; }
@media (min-width:1024px){ .ppr-mt{ display:none; } }

/* homepage wrapper: blue-tinted glow behind sidebar + hero, jump target for /#tools */
.ppr-home-wrap{ scroll-margin-top:72px; border-bottom:1px solid rgba(148,163,184,.25); }

/* 404 page */
.ppr-nf{ max-width:42rem; margin:0 auto; padding:4.5rem 1.25rem 5rem; text-align:center; }
.ppr-nf-code{ margin:0; color:var(--ppr-red-600); font-weight:800; letter-spacing:.1em; font-size:14px; text-transform:uppercase; }
.ppr-nf-title{ margin:.5rem 0 0; font-size:clamp(1.9rem,5vw,2.6rem); font-weight:800; color:var(--ppr-blue-800); letter-spacing:-.01em; }
.ppr-nf-text{ margin:.9rem auto 0; max-width:34rem; color:#475569; line-height:1.65; }
.ppr-nf-btn{ margin-top:1.75rem; padding:.7rem 1.4rem; font-size:.95rem; }

/* ===================== GUIDES (Hinglish how-to pages) ===================== */
.ppr-guide{ max-width:48rem; margin:0 auto; padding:1.75rem 1rem 3.5rem; }
@media (min-width:640px){ .ppr-guide{ padding:2.25rem 1.5rem 4rem; } }
.ppr-crumbs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; font-size:13px; color:#64748b; }
.ppr-crumbs a{ color:var(--ppr-blue-700); text-decoration:none; font-weight:600; }
.ppr-guide h1{ margin:0 0 1rem; font-size:clamp(1.6rem,5.5vw,2.3rem); line-height:1.2; font-weight:800; letter-spacing:-.01em; color:#0f172a; }
.ppr-guide h2{ margin:2rem 0 .8rem; padding-left:.7rem; font-size:1.3rem; line-height:1.3; font-weight:800; color:var(--ppr-blue-800); border-left:4px solid var(--ppr-red-600); }
.ppr-guide h3{ margin:1.1rem 0 .25rem; font-size:1.02rem; font-weight:700; color:#0f172a; }
.ppr-guide p{ margin:0 0 .9rem; font-size:16px; line-height:1.75; color:#334155; }
.ppr-steps{ list-style:none; counter-reset:ppr; margin:0; padding:0; display:grid; gap:.75rem; }
.ppr-steps li{ counter-increment:ppr; position:relative; background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:.95rem 1rem .95rem 3.4rem; font-size:15.5px; line-height:1.65; color:#334155; }
.ppr-steps li::before{ content:counter(ppr); position:absolute; left:.85rem; top:.9rem; width:1.9rem; height:1.9rem; border-radius:50%; background:var(--ppr-red-600); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; }
.ppr-steps strong{ display:block; margin-bottom:2px; color:#0f172a; }
.ppr-guide-cta{ margin:1.6rem 0 .5rem; padding:1.2rem 1rem; border-radius:16px; text-align:center; color:#fff; background:linear-gradient(135deg,var(--ppr-blue-800),var(--ppr-blue-700)); border-bottom:4px solid var(--ppr-red-600); box-shadow:0 10px 24px rgba(30,58,138,.22); }
.ppr-guide-cta p{ margin:0 0 .9rem; color:#dbeafe; }
.ppr-guide-cta .ppr-nav-btn{ min-height:48px; padding:.8rem 1.4rem; font-size:1rem; white-space:normal; justify-content:center; }
.ppr-tips{ margin:0; padding-left:1.25rem; display:grid; gap:.5rem; }
.ppr-tips li{ font-size:16px; line-height:1.7; color:#334155; }
.ppr-guide-links{ margin:0; padding:0; list-style:none; display:grid; gap:.4rem; }
.ppr-guide-links a{ display:block; padding:.7rem .9rem; min-height:44px; background:#fff; border:1px solid #e2e8f0; border-left:4px solid var(--ppr-red-600); border-radius:12px; color:var(--ppr-blue-800); font-weight:600; text-decoration:none; }
.ppr-guide-list{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.8rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:720px){ .ppr-guide-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ppr-guide-card{ display:block; height:100%; padding:1rem; background:#fff; border:1px solid #e2e8f0; border-left:4px solid var(--ppr-red-600); border-radius:14px; text-decoration:none; transition:box-shadow .15s, transform .15s; }
.ppr-guide-card:hover{ box-shadow:0 8px 20px rgba(30,58,138,.15); transform:translateY(-2px); }
.ppr-guide-card strong{ display:block; margin-bottom:.3rem; color:var(--ppr-blue-800); font-size:1.02rem; line-height:1.35; }
.ppr-guide-card span{ font-size:14px; line-height:1.55; color:#475569; }
.ppr-guide-link{ display:inline-block; margin-top:1rem; padding:.6rem 0; color:var(--ppr-blue-700); font-weight:700; font-size:14.5px; text-decoration:underline; }

/* ===================== MOBILE: bigger touch areas for small links (no visible layout change) ===================== */
@media (max-width:1023px){
  nav[aria-label="Breadcrumb"] a, .ppr-crumbs a{ padding:10px 2px; margin:-10px -2px; }
  main a.inline-flex[href="/"]{ padding:10px 0; margin-top:calc(1rem - 10px); margin-bottom:-10px; }
  footer nav a{ display:inline-block; padding:10px 0; margin:-10px 0; }
}