/* =========================
   DESIGN TOKENS (your palette)
   ========================= */
   @import url('./hero.css');
   @import url('./base.css');
   @import url('./header.css');

:root{
  --bg:#ffffff; --bg-alt:#f8f8f6; --card:#ffffff;
  --ink:#191917; --ink-strong:#101010; --ink-muted:#666;
  --line:#e0e0e0;
  --accent:#98cb32; --accent2:#3b4b1b;
  --shadow:0 10px 30px rgba(0,0,0,.1);
  --radius:16px;
  --wrap:min(1200px,92vw);
  --space:clamp(16px,2vw,24px);
  --space-lg:clamp(32px,6vw,96px);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
     font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.65}
h1,h2,h3,h4{font-family:'Noto Serif Ethiopic','Times New Roman',Times,serif;font-stretch:condensed;color:var(--ink-strong);line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(36px,5vw,60px)} h2{font-size:clamp(28px,3.6vw,40px)} h3{font-size:clamp(20px,2.6vw,26px)}
a{color:var(--accent);text-decoration:none} a:hover{opacity:.92}
.wrap{width:var(--wrap);margin:0 auto}
.section{padding:var(--space-lg) 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.small{font-size:.95rem;color:var(--ink-muted)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.2rem;border-radius:12px;font-weight:700;border:1px solid transparent}
.btn.primary{background:var(--accent);color:#fff} .btn.primary:hover{transform:translateY(-1px)}
.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}

/* =========================
   TOP BLACK STRIP
   ========================= */
.topbar{background:#0c0c0c;color:#fff;font-size:.95rem}
.topbar__row{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0}
.topbar__links{display:flex;gap:1.25rem;flex-wrap:wrap}
.topbar__link{color:#fff;opacity:.9}
.topbar__link:hover{opacity:1}
.topbar__right{display:flex;align-items:center;gap:1rem}
.social{display:flex;gap:.5rem}
.social__btn{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#222;color:#fff;font-size:.8rem}
.social__btn:hover{background:#2e2e2e}
.whatsapp img{display:block}

/* =========================
   MAIN HEADER / NAV
   ========================= */
.site-header{position:sticky;top:0;z-index:1000;background:var(--bg);border-bottom:1px solid var(--line)}
.nav {
    display: flex;
    align-items: center;
    gap: 14px;
    /* 👈 yahi space laata hai */
}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--ink)}
.brand__logo{width:54px;height:auto}
.brand__text{display:flex;flex-direction:column;font-weight:700;line-height:1}
.brand__text small{font-weight:600;color:var(--ink-muted)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle .bar{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}

/* menu base */
.menu{display:flex;align-items:center;gap:22px}
.nav-link{color:var(--ink);font-weight:700;display:inline-flex;align-items:center;gap:.35rem}
.caret{font-size:.8rem;opacity:.9}

/* DROPDOWN BASE */
.dropdown{position:relative}
.dropdown-menu{position:absolute;left:0;top:calc(100% + 12px);background:var(--card);border:1px solid var(--line);
  border-radius:8px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease}
.dropdown:hover>.dropdown-menu,
.dropdown:focus-within>.dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}

/* simple list (About) */
.dropdown--simple{min-width:240px}
.dropdown--simple a{display:block;padding:.85rem 1rem;color:var(--ink);border-bottom:1px solid var(--bg)}
.dropdown--simple a:last-child{border-bottom:0}
.dropdown--simple a:hover{background:var(--accent);color:#fff}

/* MEGA MENU (Services & Articles) */
.dropdown--mega{display:flex;gap:0;min-width:720px}
.mega-cats{list-style:none;margin:0;padding:0;min-width:280px;border-right:1px solid var(--line);background:#fff}
.mega-cat > a{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem;color:var(--ink);border-bottom:1px solid var(--bg)}
.mega-cat.is-active > a,
.mega-cat > a:hover{background:var(--accent);color:#fff}
.mega-panels{min-width:440px;display:grid;align-content:start;background:#fff}
.mega-panel{display:none;padding:.5rem 0}
.mega-panel a{display:block;padding:1rem 1.1rem;border-bottom:1px solid var(--bg);color:var(--ink)}
.mega-panel a:last-child{border-bottom:0}
.mega-panel a:hover{background:var(--bg-alt);color:var(--accent2)}
.mega-panel.shown{display:block}

/* pure CSS: show the right panel on cat hover (order matters) */
/* Services */
.dropdown--mega .mega-cats li:nth-child(1):hover ~ .mega-panels #panel-ip{display:block}
.dropdown--mega .mega-cats li:nth-child(2):hover ~ .mega-panels #panel-criminal{display:block}
.dropdown--mega .mega-cats li:nth-child(3):hover ~ .mega-panels #panel-company{display:block}
.dropdown--mega .mega-cats li:nth-child(4):hover ~ .mega-panels #panel-family{display:block}
/* Articles */
.dropdown--mega .mega-cats li:nth-child(1):hover ~ .mega-panels #panel-art-criminal{display:block}
.dropdown--mega .mega-cats li:nth-child(2):hover ~ .mega-panels #panel-art-family{display:block}
.dropdown--mega .mega-cats li:nth-child(3):hover ~ .mega-panels #panel-art-ip{display:block}
.dropdown--mega .mega-cats li:nth-child(4):hover ~ .mega-panels #panel-art-corp{display:block}
.dropdown--mega .mega-cats li:nth-child(5):hover ~ .mega-panels #panel-art-knowledge{display:block}
/* hide defaults when hovering */
.dropdown--mega .mega-panels .mega-panel{display:none}


/* MOBILE */
@media (max-width:980px){
  .nav-toggle{display:block}
  .menu{position:fixed;inset:72px 0 auto 0;background:color-mix(in oklab, var(--bg) 96%, white);
        border-bottom:1px solid var(--line);flex-direction:column;gap:10px;padding:12px 4vw 18px;
        transform:translateY(-120%);opacity:0;pointer-events:none}
  .menu.open{transform:translateY(0);opacity:1;pointer-events:auto;transition:all .28s ease}
  .dropdown-menu{position:static;transform:none;opacity:1;visibility:visible;border:0;box-shadow:none}
  .dropdown--mega{flex-direction:column;min-width:0;width:100%}
  .mega-cats{border-right:0}
}


/* ===== Booking Calendar Popup (refined) ===== */
.booking-modal{
  position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
}
.booking-modal.show{ display:flex; }
.booking-modal__overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
  animation:bm-fade .2s ease;
}
.booking-modal__sheet{
  position:relative; z-index:1;
  width:min(980px, 92vw); height:min(82vh, 920px);
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 18px 48px rgba(0,0,0,.24);
  display:flex; flex-direction:column; overflow:hidden;
  animation:bm-pop .22s ease;
}
.booking-modal__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px 10px; background:var(--card);
}
.booking-modal__title{display:flex; flex-direction:column; line-height:1.15}
.booking-modal__title strong{font:800 1.05rem/1.15 'Noto Sans',system-ui}
.booking-modal__title small{color:var(--muted); font-weight:600}
.booking-modal__close{
  appearance:none; border:0; background:transparent; color:var(--ink);
  font-size:28px; line-height:1; cursor:pointer; border-radius:8px; padding:2px 6px;
}
.booking-modal__close:hover{ background:rgba(0,0,0,.05) }
html[data-theme="dark"] .booking-modal__close:hover{ background:rgba(255,255,255,.06) }

.booking-modal__accent{
  height:3px; background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.booking-modal__body{ position:relative; flex:1; }
.booking-frame{
  position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--card);
}

/* Loading overlay */
.booking-loading{
  position:absolute; inset:0; display:grid; place-items:center; gap:10px;
  background:linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, transparent), transparent);
  color:var(--muted); z-index:2;
}
.spinner{
  width:28px; height:28px; border-radius:999px; border:3px solid #d1d5db;
  border-top-color:var(--accent); animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bm-pop{from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:none}}
@keyframes bm-fade{from{opacity:0} to{opacity:1}}

/* Mobile: full-screen bottom sheet feel */
@media (max-width:640px){
  .booking-modal__sheet{
    width:100vw; height:100vh; border-radius:0;
  }
  .booking-modal__header{ padding:14px 12px }
  .booking-modal__title strong{ font-size:1rem }
}


/* ========================================================
   PRACTICE AREAS CAROUSEL CARD
   ==================================================== */
.p-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all .3s ease;
}

.p-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

.p-media-link {
  display: block;
  overflow: hidden;
}

.p-media-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform .4s ease;
}

.p-card:hover .p-media-img {
  transform: scale(1.06);
}

.p-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.p-title {
  margin: 0 0 .75rem;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--ink-strong);
}

.p-desc {
  margin: 0 0 1rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ink-muted);
}

.p-more {
  margin-top: auto;
  font-size: .95rem;
  color:white !important
}

/* =========================
   CAROUSEL TRACK & DOTS
   ========================= */
.carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: .5rem 0;
  scroll-behavior: smooth;
}

.track::-webkit-scrollbar { display: none; }

.p-card {
  flex: 0 0 calc(100% / 3 - 1rem);
  scroll-snap-align: start;
}

@media (max-width: 980px) {
  .p-card { flex: 0 0 calc(50% - .5rem); }
}
@media (max-width: 640px) {
  .p-card { flex: 0 0 calc(100% - 1rem); }
}

/* Dots */
.dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.5rem;
}

.dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  border: 0;
  cursor: pointer;
  transition: background .3s;
}

.dots button.active {
  background: var(--accent);
}

/* Progress bar */
.auto-progress {
  height: 3px;
  background: #eee;
  margin-top: 1rem;
  overflow: hidden;
  border-radius: 2px;
}

.auto-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  width: 0;
  transition: width 0s linear;
}

/* =========================
   SINGLE PRACTICE PAGE
   ========================= */
.p-detail {
  padding: 2rem;

}

.p-header {
  margin-bottom: 2rem;
  text-align: center;
}

.p-header h1 {
  margin-bottom: .5rem;
}

.p-featured-img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
}

.p-lead {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 4px solid var(--accent);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-muted);
  line-height: 1.6;
}

.p-content {
  line-height: 1.8;
  margin-bottom: 2rem;
}

.p-footer {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--accent);
  font-weight: 600;
  font-size: .95rem;
}

.back-link:hover {
  text-decoration: underline;
}

/* =========================
   EMPTY & 404 STATES
   ========================= */
.empty-state,
.not-found {
  text-align: center;
  padding: 4rem 1rem;
}

.empty-state i,
.not-found i {
  font-size: 4rem;
  color: #ddd;
  margin-bottom: 1rem;
  display: block;
}

.not-found i {
  color: #e74c3c;
}

.empty-state p,
.not-found p {
  color: var(--ink-muted);
}


/* Error box */
.error-box{
  background: color-mix(in oklab, #ffcccc 85%, var(--card));
  color: #b00000;
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: var(--space);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Main Card */
.area-card{
  padding: 0;
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  border:1px solid var(--line);
  background: var(--card);
  transition: box-shadow .3s ease;
}

.area-card:hover{
  box-shadow: 0 28px 60px rgba(0,0,0,.12);
}

/* Accent bar */
.area-header-accent{
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

/* Blog-style vertical layout */
.area-row{
  display: flex;
  flex-direction: column;
}

/* Image section */
.area-img-col{
  width: 100%;
}

.area-img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 0; 
}

@media (min-width: 768px){
  .area-img{
    height: 350px;
  }
}

/* Text section */
.area-content{
  padding: 2rem 2rem 3rem;
  display: flex;
  flex-direction: column;
}

.area-title{
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 1rem;
  font-weight: 700;
  position: relative;
  color: var(--ink);
}

.area-title::after{
  content:'';
  width: 55px;
  height: 3px;
  background: var(--accent);
  display: block;
  margin-top: .5rem;
  border-radius: 6px;
}

.area-desc{
  margin-top: 1rem;
  margin-bottom: 2rem;
  color: var(--ink-muted);
  line-height: 1.75;
  font-size: 1.05rem;
  /* max-width: 650px; */
}

/* CTA button */
.area-btn{
  align-self: start;
  font-size: 1rem;
  padding: .8rem 1.4rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transition: background .25s, transform .25s, box-shadow .25s;
}

.area-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}


/* PRACTISE AREA SINGLE END */



/* PRACTICE AREAS END ==================== --> */