/* ============================================================
   SHARED GLOBAL STYLES (HEADER / NAV / FOOTER / MODALS)
   ============================================================ */

:root{
  --blue:#3a7bd5;
  --nav-bg:#b3b1ac;
  --ink:#222;
}

/* RESET */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }

/* ============================================================
   NOTICE BAR
   ============================================================ */
.notice{
  position:sticky;
  top:0;
  z-index:3000;
  background:#0e1523;
  color:#fff;
  padding:.6rem .8rem;
  text-align:center;
  font-size:.95rem;
}
.notice a{ color:#bfe0ff }

/* ============================================================
   HEADER
   ============================================================ */
header{
  background:var(--blue);
  color:#fff;
  text-align:center;
  padding:1.1rem 0 1rem;
}
header h1{
  margin:0;
  font-size:2.4rem;
}
header p{
  margin:.3rem 0 0;
  opacity:.95;
}

/* ============================================================
   NAVBAR (FIXED — NO SCROLL)
   ============================================================ */
nav{
  background:var(--nav-bg);
  border-bottom:2px solid #222;
  position:relative;
  z-index:2000;
}

/* Wrapper — centered, NOT scrollable */
.navbar-wrap{
  max-width:1200px;
  margin:0 auto;
  overflow:visible;           /* ✅ FIX */
}

/* Actual navbar */
.navbar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.7rem;
  padding:.35rem .6rem;
  white-space:normal;         /* ✅ FIX */
  flex-wrap:wrap;             /* ✅ FIX */
}

/* Links */
.nav-link{
  font-family:Georgia, serif;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  padding:.6rem .9rem;
  border-radius:.9rem .9rem 0 0;
}
.nav-link:hover{
  background:#f7fafc;
  color:#222;
}

/* ============================================================
   DROPDOWN (Web Apps)
   ============================================================ */
.nav-link.dropdown{
  position:relative;
}

.dropbtn{
  cursor:pointer;
}

/* Menu */
.dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  min-width:240px;
  border-radius:10px;
  box-shadow:0 14px 32px rgba(0,0,0,.25);
  z-index:5000;
}

.dropdown-menu a{
  display:block;
  padding:.7rem 1.1rem;
  color:#222;
  text-decoration:none;
  font-weight:600;
}
.dropdown-menu a:hover{
  background:#f2f5f8;
}

/* Desktop hover */
@media (min-width:801px){
  .nav-link.dropdown:hover .dropdown-menu{
    display:block;
  }
}

/* Mobile click */
.nav-link.dropdown.open .dropdown-menu{
  display:block;
}

/* ============================================================
   FOOTER (CLEAN & CENTERED)
   ============================================================ */

.site-footer{
  text-align:center;
  padding:28px 16px 20px;
  color:#444;
  font-size:.95rem;
}

.site-footer a{
  color:var(--blue);
  text-decoration:none;
}
.site-footer a:hover{
  text-decoration:underline;
}

.footer-line{
  font-weight:500;
  margin-bottom:12px;
}

.footer-meta{
  line-height:1.55;
  margin-bottom:12px;
}

.footer-meta em{
  color:#666;
  font-size:.9rem;
}

.footer-visits{
  font-size:.9rem;
  color:#666;
}


/* ============================================================
   MODAL — FIXED SCROLLABLE CONTENT
   ============================================================ */

.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15,25,45,.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  overflow-y: auto;          /* ✅ allow page-level scroll */
  padding: 24px 0;           /* breathing space on small screens */
}

.modal{
  background: #fff;
  width: 92vw;
  max-width: 760px;
  max-height: 88vh;          /* ✅ critical */
  overflow-y: auto;          /* ✅ enable scrolling */
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  position: relative;
}

/* Close button */
.modal .modal-close{
  position:absolute;
  top:14px;
  right:16px;
  border:none;
  background:#fff;
  font-size:1.4rem;
  cursor:pointer;
  color:#555;
  border-radius:50%;
  width:36px;
  height:36px;
}
.modal .modal-close:hover{
  background:#f2f5f8;
  color:#000;
}


/* Headings */
.modal h1{
  font-size:1.9rem;
  color:#0a2540;
  margin-top:0;
  margin-bottom:1rem;
}
.modal h2{
  font-size:1.25rem;
  color:#0a2540;
  margin-top:1.6rem;
  margin-bottom:.4rem;
}

/* Body text */
.modal p{
  font-size:1rem;
  line-height:1.65;
  color:#222;
  margin-bottom:.9rem;
}

/* Divider */
.modal hr{
  border:none;
  border-top:1px solid #e3e6eb;
  margin:1.6rem 0;
}

/* Links */
.modal a{
  color:#3a7bd5;
  text-decoration:none;
  font-weight:500;
}
.modal a:hover{
  text-decoration:underline;
}

.modal .note{
  font-size:.92rem;
  color:#555;
  margin-top:1.2rem;
}

/* ============================================================
   PROGRESS BAR — INDETERMINATE
   ============================================================ */

.progress-wrap{
  display:none;
  margin-top:.75rem;
}

.progress{
  height:10px;
  background:#e8edf3;
  border-radius:999px;
  overflow:hidden;
  position:relative;
}

.progress .bar{
  height:100%;
  background:linear-gradient(
    90deg,
    #3a7bd5,
    #67b2f3,
    #3a7bd5
  );
}

.progress .bar.indeterminate{
  width:40%;
  position:absolute;
  left:-40%;
  animation:progress-slide 1.2s linear infinite;
}

@keyframes progress-slide{
  from{ left:-40% }
  to{ left:100% }
}

/* ============================================================
   RESULT VIEW
   ============================================================ */

.result-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
}

.result-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.6rem;
  width:100%;
  max-width:1000px;
}

.result-box{
  border:1px solid #dbe2ef;
  border-radius:12px;
  padding:.6rem;
  background:#fafcff;
  height:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.result-title{
  font-weight:700;
  margin-bottom:.4rem;
  color:#3a7bd5;
}

.result-img{
  max-width:100%;
  max-height:260px;
  object-fit:contain;
  border-radius:12px;
  display:none;
}

.result-text{
  text-align:center;
  font-size:1.05rem;
  line-height:1.6;
}

.download-btn{
  display:inline-block;
  margin-top:.6rem;
  padding:.5rem 1.2rem;
  background:#3a7bd5;
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
}
.download-btn:hover{
  background:#215b99;
}

/* Mobile */
@media (max-width:768px){
  .result-grid{
    grid-template-columns:1fr;
  }
  .result-box{
    height:260px;
  }
}