/* NotarySuite Theme Layer - site.css
   This file centralizes the public UI styling. Admin controls set CSS variables in header.php. */

:root{
  --ns-bg: #0b1220;
  --ns-surface: rgba(255,255,255,.06);
  --ns-surface2: rgba(255,255,255,.10);
  --ns-text: rgba(255,255,255,.92);
  --ns-muted: rgba(255,255,255,.70);
  --ns-border: rgba(255,255,255,.14);
  --ns-shadow: 0 30px 80px rgba(0,0,0,.35);
  --ns-radius: 18px;
  --ns-radius-sm: 12px;
  --ns-max: 1200px;
  --ns-gap: 18px;
  --ns-pad: 22px;
  --ns-btn-pad-y: 12px;
  --ns-btn-pad-x: 18px;
  --ns-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ns-font);
  color:#0f172a;
  background:#0b1220;
  min-height:100%;
}

/* Layout helpers */
.ns-container{max-width:var(--ns-max); margin:0 auto; padding:0 18px;}
.ns-section{padding:76px 0;}
.ns-grid{display:grid; gap:var(--ns-gap);}
.ns-flex{display:flex; gap:var(--ns-gap);}
.ns-center{text-align:center;}
.ns-muted{color:rgba(15,23,42,.68);}

/* Surface cards */
.ns-card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--ns-radius);
  box-shadow:0 20px 60px rgba(0,0,0,.14);
  overflow:hidden;
}
.ns-card.dark{
  background:rgba(255,255,255,.08);
  border:1px solid var(--ns-border);
  color:var(--ns-text);
}
.ns-card .ns-card-pad{padding:var(--ns-pad);}

/* Buttons */
.ns-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: var(--ns-btn-pad-y) var(--ns-btn-pad-x);
  border-radius: calc(var(--ns-radius-sm) + 6px);
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.92);
  color:#0f172a;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor:pointer;
  user-select:none;
}
.ns-btn:hover{transform: translateY(-1px); box-shadow: 0 14px 32px rgba(0,0,0,.16);}
.ns-btn:active{transform: translateY(0px);}
.ns-btn.primary{
  border:none;
  color:white;
  background: linear-gradient(135deg, var(--primary, #667eea), var(--secondary, #764ba2));
  box-shadow: 0 18px 45px rgba(102,126,234,.25);
}
.ns-btn.ghost{
  background:transparent;
  color: rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.22);
}
.ns-btn.small{padding:10px 14px; border-radius: 14px; font-weight:700;}
.ns-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.90);
  background: rgba(255,255,255,.06);
  font-weight:700;
  font-size:12px;
}

/* Header (structure only; colors handled by header.php vars/classes) */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-header__inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:white;}
.brand img{height:42px; width:auto; border-radius:10px;}
.brand__name{font-weight:900; letter-spacing:.2px;}
.nav{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.nav a{
  color:rgba(255,255,255,.88);
  text-decoration:none;
  padding:10px 12px;
  border-radius: 999px;
  font-weight:800;
  font-size:14px;
  transition: background .15s ease, transform .15s ease;
}
.nav a:hover{background: rgba(255,255,255,.10);}
.header-actions{display:flex; align-items:center; gap:10px;}
.nav-toggle{display:none}

/* Hero */
.ns-hero{
  position:relative;
  padding: 92px 0 70px;
  overflow:hidden;
  color: var(--ns-text);
  background: radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
              radial-gradient(900px 520px at 85% 30%, rgba(255,255,255,.10), transparent 65%),
              linear-gradient(135deg, var(--primary, #667eea), var(--secondary, #764ba2));
}
.ns-hero__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.05);
  opacity: .18;
  transform: scale(1.03);
}
.ns-hero__overlay{position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.50)); opacity:.65;}
.ns-hero__inner{position:relative; z-index:2;}
.ns-hero__grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:28px; align-items:center;}
.ns-h1{font-size: clamp(34px, 4.4vw, 58px); line-height:1.02; margin:14px 0;}
.ns-lead{font-size: clamp(16px, 1.7vw, 20px); color:rgba(255,255,255,.88); max-width: 60ch;}
.ns-hero__cta{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap;}
.ns-hero__side{display:grid; gap:14px;}
.ns-stat{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius: var(--ns-radius);
  padding: 16px 18px;
}
.ns-stat b{font-size:24px; color:white;}
.ns-stat span{display:block; color:rgba(255,255,255,.80); font-weight:700; margin-top:4px;}

/* Slider dots */
.ns-dots{display:flex; gap:8px; margin-top:16px;}
.ns-dot{
  width:10px; height:10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.18);
  cursor:pointer;
}
.ns-dot[aria-current="true"]{background:white; border-color:white;}

/* Section headings */
.ns-kicker{color:rgba(15,23,42,.62); font-weight:900; letter-spacing:.18em; text-transform:uppercase; font-size:12px;}
.ns-title{font-size: clamp(26px, 2.4vw, 38px); line-height:1.12; margin:10px 0 12px; color:#0f172a;}
.ns-title.light{color:white;}
.ns-subtitle{color:rgba(15,23,42,.66); font-weight:600; max-width: 70ch; margin:0 auto;}

/* Feature cards grid */
.ns-features{grid-template-columns: repeat(12, 1fr);}
.ns-feature{grid-column: span 4;}
.ns-feature h3{margin:10px 0 8px; font-size:18px;}
.ns-feature p{margin:0; color:rgba(15,23,42,.66); font-weight:600;}
.ns-icon{
  width:42px; height:42px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(102,126,234,.18), rgba(118,75,162,.18));
  border:1px solid rgba(15,23,42,.12);
}

/* Services list */
.ns-toolbar{display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; margin-top:18px;}
.ns-input{
  width: min(520px, 100%);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.92);
  outline:none;
  font-weight:700;
}
.ns-select{padding:12px 14px; border-radius:14px; border:1px solid rgba(15,23,42,.14); background:rgba(255,255,255,.92); font-weight:800;}
.ns-service-grid{grid-template-columns: repeat(12, 1fr); margin-top:18px;}
.ns-service{grid-column: span 4;}
.ns-service .meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.ns-badge{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.10);
  font-weight:800;
  font-size:12px;
}

/* Booking */
.ns-book-grid{grid-template-columns: 1fr 1fr; gap:18px; align-items:start;}
.ns-panel{background: rgba(255,255,255,.92); border:1px solid rgba(15,23,42,.10); border-radius: var(--ns-radius); box-shadow:0 20px 60px rgba(0,0,0,.14); padding: 18px;}
.ns-panel h3{margin:0 0 12px;}
.ns-form label{font-weight:900; font-size:13px; color:rgba(15,23,42,.78);}
.ns-form input, .ns-form textarea, .ns-form select{
  width:100%;
  padding: 12px 14px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.95);
  font-weight:700;
  outline:none;
}
.ns-form textarea{min-height: 120px; resize:vertical;}
.ns-form .row{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
.ns-form .row3{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px;}
.ns-form .help{font-size:12px; color:rgba(15,23,42,.62); font-weight:700; margin-top:6px;}
.ns-alert{padding:12px 14px; border-radius:14px; border:1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.90); font-weight:800;}
.ns-alert.error{border-color: rgba(220,38,38,.35); background: rgba(220,38,38,.06); color:#7f1d1d;}
.ns-alert.success{border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.08); color:#14532d;}

/* Footer */
.site-footer{
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.86);
  padding: 44px 0;
}
.site-footer a{color:rgba(255,255,255,.92)}
.site-footer__grid{display:grid; grid-template-columns: 1.3fr .7fr .7fr; gap:18px;}
.site-footer small{color:rgba(255,255,255,.70);}

/* Reveal */
[data-reveal]{opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease;}
[data-reveal].is-in{opacity:1; transform: translateY(0px);}

/* Responsive */
@media (max-width: 980px){
  .ns-hero__grid{grid-template-columns:1fr}
  .ns-feature{grid-column: span 6;}
  .ns-service{grid-column: span 6;}
  .ns-book-grid{grid-template-columns:1fr}
  .site-footer__grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav{display:none;}
  .nav-toggle{display:inline-flex;}
  .ns-feature{grid-column: span 12;}
  .ns-service{grid-column: span 12;}
}


/* Service card media */
.ns-service__media{
  width: 100%;
  height: 160px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(15,23,42,.05);
  border: 1px solid rgba(15,23,42,.10);
  margin-bottom: 12px;
}
.ns-service__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Category pills */
.ns-pillbar{display:flex; gap:10px; flex-wrap:wrap;}
.ns-pill{
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.86);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  cursor:pointer;
}
.ns-pill.is-active{
  background: rgba(15,23,42,.92);
  color: rgba(255,255,255,.95);
  border-color: rgba(15,23,42,.92);
}