/* styles.css
   Clean, minimal law-firm aesthetic inspired by reference site.
   Fonts: Merriweather (serif) for headings, Montserrat (sans) for UI.
*/

/* Reset & base */
:root{
  --navy:#10243a;
  --gold:#b58b37;
  --muted:#6b6f74;
  --bg:#fafafa;
  --card:#ffffff;
  --shadow: 0 6px 18px rgba(16,36,58,0.08);
  --radius:8px;
  --max-width:1100px;
  --secondary-one: #00FFFF;
  --secondary-two: #800080;
  --secondary-three: #000000;
  --secondary-four: #0000FF;
  --secondary-five: #8A2BE2;
  --secondary-six: #FF0000;
  --secondary-seven: #7FFF00;
  --secondary-eight: #006400;
  --secondary-nine: #FFA500;
  --secondary-ten: #00FF7F;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,#fbfbfb 0,#f7f7f8 100%);
  color:var(--navy);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}


/* Layout */
.container{
  width:92%;
  max-width:var(--max-width);
  margin:0 auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,0.96);
  backdrop-filter: blur(4px);
  border-bottom:1px solid #e9e9ea;
}

.header-inner{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:14px 0;
}

.brand{display:flex;gap:12px;align-items:center}
.logo-mark{
  width:56px;height:56px;border-radius:8px;background:linear-gradient(180deg,var(--navy),#13324b);
  color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Merriweather',serif;font-size:18px;
  box-shadow:var(--shadow);
}
.firm-name{font-family:'Merriweather',serif;font-weight:700}
.firm-tag{font-size:12px;color:var(--muted)}

/* Nav */
.nav{margin-left:auto;display:flex;gap:18px;align-items:center}
.nav-link{color:var(--navy);text-decoration:none;font-weight:600;padding:8px;border-radius:6px}
.nav-link:hover{background:#f2f4f6}

/* Admin toggle (small, unobtrusive) */
.admin-toggle{margin-left:12px;background:transparent;border:0;font-size:18px;cursor:pointer;color:var(--muted)}

/* Hero */
.hero{padding:42px 0 16px}
.hero-inner{display:flex;flex-direction:column;gap:8px}
.hero h1{font-family:'Merriweather',serif;font-weight:700;margin:0;font-size:28px}
.lead{color:var(--muted);margin:0}

/* Documents Section */
.docs-section{padding:18px 0 40px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.section-head h2{margin:0;font-family:'Merriweather',serif}
.search-actions{display:flex;gap:8px;align-items:center}
.search-actions input,
.search-actions select{
  padding:8px 10px;border-radius:8px;border:1px solid #e3e5e7;background:white;min-width:160px;
}

/* Grid */
.docs-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(1,1fr);
}

.doc-card{
  background:var(--card);
  padding:14px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:flex;
  gap:12px;
  align-items:flex-start;
  transition:transform .18s ease,box-shadow .18s ease;
}
.doc-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(16,36,58,0.08)}
.doc-figure{
  width:96px;height:96px;border-radius:6px;flex:0 0 96px;background:#f7f8fa;border:1px solid #eef1f3;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--navy);
}
.doc-body{flex:1;display:flex;flex-direction:column;gap:8px}
.doc-title{font-weight:700;font-family:'Merriweather',serif}
.doc-desc{color:var(--muted);font-size:14px}
.doc-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.price{font-weight:700;color:var(--navy)}
.doc-actions{display:flex;gap:8px}
.btn{
  padding:8px 12px;
  border-radius:8px;
  border:1px solid transparent;
  background:#fff;
  color:var(--navy);
  cursor:pointer;
  font-weight:600;
  min-width:88px;
  text-align:center;
  transition: all 0.25s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn.primary{background:var(--navy);color:white;border-color:rgba(0,0,0,0.04)}
.btn.ghost{background:transparent;border:1px solid #e5e7ea}

/* About / Contact sections */
.about-section, .contact-section{padding:18px 0;border-top:1px solid #f0f0f1;margin-top:12px}

/* Footer */
.site-footer{
    padding:18px 0;
    border-top:1px solid #e9e9ea;
    background:linear-gradient(180deg,#ffffff, #fbfbfb);
    
    color: #111;
    padding: 20px 0;
    
}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer-links a{margin-left:12px;color:var(--muted);text-decoration:none;font-size:14px}

/* Modal */
.modal{
  position:fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(2,8,15,0.45);
  z-index:80;
}
.modal[aria-hidden="false"]{display:flex}
.modal-panel{
  width:100%;
  background:var(--card);
  padding:28px;
  border-radius:16px;
  box-shadow:0 20px 50px rgba(2,8,15,0.35);
  animation:pop .14s ease;
  backdrop-filter: blur(12px);
  width: 100%;
  max-width: 720px;
}
@keyframes pop{from{transform:translateY(8px) scale(.995);opacity:0}to{transform:none;opacity:1}}

.modal-close{position:absolute;right:18px;top:18px;border:0;background:transparent;font-size:22px;color:var(--muted);cursor:pointer}
.preview-body{max-height:48vh;overflow:auto;padding:6px;border-radius:6px;border:1px solid #f0f0f1;background:#fafafa;color:#222}

/* Payment form styling */
.payment-form .form-row{margin-bottom:10px}
.form-row label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.form-row input, .form-row textarea, .form-row select{width:100%;padding:10px;border-radius:8px;border:1px solid #e6e8ea;background:white}
.form-row.split{display:flex;gap:10px}
.form-row.split>div{flex:1}

/* Admin panel */
.admin-panel{
  position:fixed;right:18px;bottom:18px;width:360px;background:var(--card);border-radius:12px;padding:12px;box-shadow:0 10px 32px rgba(16,36,58,0.12);display:none;z-index:90;
}
.admin-panel[aria-hidden="false"]{display:block}
.admin-form .form-row{margin-bottom:10px}

/* Utilities */
.muted{color:var(--muted)}
.small{font-size:13px}

/* Responsive */
@media(min-width:720px){
  .docs-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){
  .docs-grid{grid-template-columns:repeat(3,1fr)}
  .hero h1{font-size:34px}
}


/*OWN*/
/*Top Bar Styles*/
.top-bar {
  background-color: #0b2c4d; /* dark navy blue */
  padding: 8px 0;
  font-family: Arial, sans-serif;
}

.top-bar .contact-link {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 25px; /* space between items */
}

.top-bar .contact-link li {
  display: flex;
  align-items: center;
}

.top-bar .contact-link li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

/* Icons */
.top-bar .contact-link li i {
  font-size: 14px;
}

/* Hover effect */
.top-bar .contact-link li a:hover {
  color: #25d366; /* subtle green hover (WhatsApp style) */
}

/* Optional: special styling for icons only (WhatsApp & Email) */
.top-bar .whatsapp-number a,
.top-bar .email-address a {
  font-size: 16px;
}

/* Align container properly */
.contact-link-part {
  display: flex;
  justify-content: flex-start;
}

/* Responsive tweak */
@media (max-width: 768px) {
  .top-bar .contact-link {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* General icon style */
.top-bar .contact-link li i {
  font-size: 13px;
  margin-right: 6px;
}

/* Phone icon */
.top-bar .phone-number i {
  color: #ffffff;
}

/* WhatsApp icon (green like in image) */
.top-bar .whatsapp-number i {
  color: #25d366;
  font-size: 16px;
}

/* Email icon */
.top-bar .email-address i {
  color: #ffffff;
  font-size: 15px;
}

/* Optional: make icon-only items slightly separated */
.top-bar .whatsapp-number,
.top-bar .email-address {
  margin-left: 5px;
}

.top-bar .whatsapp-number a,
.top-bar .email-address a {
  width: 30px;
  height: 30px;
  display: inline-flex;          /* better than flex for inline elements */
  align-items: center;           /* vertical centering */
  justify-content: center;       /* horizontal centering */
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  line-height: 1;                /* 🔥 removes vertical offset */
  padding: 0;                    /* 🔥 prevent shift */
}

.top-bar .whatsapp-number a:hover {
  background: #25d366;
  color: #fff;
}

.top-bar .email-address a:hover {
  background: #ffffff;
  color: #0b2c4d;
}

/* Remove any weird spacing from icons */
.top-bar .contact-link li i {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* Optional: specify a width smaller than the container */
}

.call-us-now {
  color: var(--navy);
  padding-bottom: 1rem;
}

.call-us-now:hover {
  color: #25d366;
}

.small-container {
  background: #ffffff;
  border-radius: 12px;
  padding: 10px;
  margin: 0;
  
  /* Glow effect */
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08),
              0 0 20px rgba(0, 123, 255, 0.15);
  
  transition: all 0.3s ease;
}

/* Optional hover glow boost */
.small-container:hover {
  box-shadow: 0 0 10px rgba(0,123,255,0.3),
            0 0 25px rgba(0,123,255,0.2),
            0 0 40px rgba(0,123,255,0.1);
  transform: translateY(-3px);
}

/* Remove card border so container stands out */
.small-container .card {
  border: none;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* Push button to bottom */
.small-container .card a.btn {
  margin-top: auto;
  align-self: flex-start; /* left align */
}

section::after {
  content: "\A";
  white-space: pre;
}


/* ================= MOBILE RESPONSIVE FIXES ================= */

/* General small devices */
@media (max-width: 768px) {

  /* Header layout */
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .nav {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
  }

  .nav-link {
    padding: 6px 8px;
    font-size: 14px;
  }

  /* Top bar */
  .top-bar .contact-link {
    flex-direction: column;
    align-items: flex-start;
    max-height: 50px;
  }

  /* Hero */
  .hero h1 {
    font-size: 22px;
  }

  .lead {
    font-size: 14px;
  }

  /* Search section */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-actions {
    width: 100%;
    flex-direction: column;
  }

  .search-actions input,
  .search-actions select {
    width: 100%;
  }

  /* Cards */
  .doc-card {
    flex-direction: column;
  }

  .doc-figure {
    width: 100%;
    height: 140px;
  }

  /* Why us section cards */
  .small-container {
    margin: 8px 0;
  }

  /* About image */
  .team-image {
    width: 100%;
  }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}


/* Extra small devices */
@media (max-width: 480px) {

  body {
    font-size: 14px;
  }

  .hero h1 {
    font-size: 20px;
  }

  .doc-title {
    font-size: 16px;
  }

  .btn {
    width: 100%;
  }

  .doc-actions {
    flex-direction: column;
  }

  .form-row.split {
    flex-direction: column;
  }
}


.doc-figure {
  width: 100%;
  height: 140px;
  background: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  overflow: hidden;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}


.preview-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.preview-image {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 8px;
}

.preview-placeholder {
  width: 100%;
  height: 200px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: bold;
  border-radius: 8px;
}

.preview-details h4 {
  margin: 0;
}

.preview-price {
  font-weight: bold;
  font-size: 18px;
  color: #2c7;
}

.st-btn {
  margin-top: 1rem;
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 per row */
  gap: 16px;
}

/* Mobile: 1 per row */
@media (max-width: 768px) {
  .why-us-grid {
    grid-template-columns: 1fr;
  }
}

/* DARK */
.btn-outline-dark {
  border: 1px solid #222;
  color: #222;
  background: transparent;
}
.btn-outline-dark:hover {
  background: #222;
  color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* PRIMARY */
.btn-outline-primary {
  border: 1px solid #0d6efd;
  color: #0d6efd;
}
.btn-outline-primary:hover {
  background: #0d6efd;
  color: #fff;
  box-shadow: 0 0 12px rgba(13,110,253,0.4);
}

/* WARNING */
.btn-outline-warning {
  border: 1px solid #f59e0b;
  color: #f59e0b;
}
.btn-outline-warning:hover {
  background: #f59e0b;
  color: #fff;
  box-shadow: 0 0 12px rgba(245,158,11,0.4);
}

/* SECONDARY */
.btn-outline-secondary {
  border: 1px solid #6c757d;
  color: #6c757d;
}
.btn-outline-secondary:hover {
  background: #6c757d;
  color: #fff;
  box-shadow: 0 0 10px rgba(108,117,125,0.4);
}

/* SUCCESS */
.btn-outline-success {
  border: 1px solid #198754;
  color: #198754;
}
.btn-outline-success:hover {
  background: #198754;
  color: #fff;
  box-shadow: 0 0 12px rgba(25,135,84,0.4);
}

/* INFO */
.btn-outline-info {
  border: 1px solid #0dcaf0;
  color: #0dcaf0;
}
.btn-outline-info:hover {
  background: #0dcaf0;
  color: #fff;
  box-shadow: 0 0 12px rgba(13,202,240,0.4);
}

.btn-sm {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
}

/* Bigger modal */
.large-modal {
  max-width: 1000px;
  width: 95%;
}

/* Layout */
.all-docs-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.all-docs-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 per row */
  gap: 12px;
  max-height: 70vh;
  overflow-y: auto;
}

/* Smaller cards inside modal */
.all-doc-card {
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: 0.2s;
}

.all-doc-card:hover {
  transform: translateY(-3px);
}

/* Mobile */
@media (max-width: 768px) {
  .all-docs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Image container */
.doc-image {
  width: 100%;
  height: 120px;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* Image */
.doc-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text */
.text {
  font-size: 16px;
}

/* Icon */
.icon {
  font-size: 18px;
  transition: transform 0.3s ease;
}


/*MPESA / PAYMENT MODAL*/
/* BACKDROP BLUR */
.modalTwo {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* MODAL PANEL */
.modal-panel-two {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: fadeIn .25s ease;
}

/* MPESA HEADER */
.mpesa-header {
  text-align: center;
  margin-bottom: 20px;
}

.mpesa-header img {
  width: 120px;
  margin-bottom: 10px;
}

/* INPUT */
.payment-form input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  outline: none;
}

.payment-form input:focus {
  border-color: #00a651;
  box-shadow: 0 0 0 3px rgba(0,166,81,0.15);
}

/* MPESA BUTTON */
.mpesa-btn {
  background: #00a651;
  border: none;
  color: white;
  font-weight: 600;
}

.mpesa-btn:hover {
  background: #008f45;
}

/* ANIMATION */
@keyframes fadeIn {
  from {opacity:0; transform: translateY(10px);}
  to {opacity:1; transform: translateY(0);}
}

/* BACKDROP BLUR */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
}

/* MODAL PANEL */
.mpesa-modal {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(15px);
  border-radius: 18px;
  padding: 30px;
  max-width: 420px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}

.modal .powered-by {
  margin-top: 18px;
  text-align: center !important;
  font-size: 12px;
  color: #6b6f74; /* muted tone */
  letter-spacing: 0.5px;
  position: relative;
  opacity: 0.85;
}

/* Optional divider line above */
.powered-by::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: #e0e3e7;
  margin: 0 auto 8px auto;
}

/* Highlight Safaricom slightly */
.modal .powered-by strong {
  color: #00a651 !important; /* M-Pesa green */
  font-weight: 600;
}

.powered-by:hover {
  opacity: 1;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}