/*
Theme Name: Surinder Shastri - Astrologer Delhi
Theme URI: https://vashikaranspecialistsurindershastri.com/
Author: Hemant Chaudhary
Author URI: https://hemantchaudhary.info/
Description: A fast single-page theme for Vashikaran Specialist Surinder Shastri, astrologer in Rohini, Delhi. Includes LocalBusiness and FAQ schema, isometric SVG infographics, click-to-call and WhatsApp buttons, and a Delhi location keyword footer. Phone number, address and coordinates are editable under Appearance then Customize.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vss
Tags: one-column, custom-colors, custom-logo, custom-menu, translation-ready
*/

:root{
  --ink:#0E1330;
  --ink-2:#161C42;
  --ink-3:#1F2758;
  --brass:#C6952E;
  --gold:#EFCB68;
  --marigold:#E2622A;
  --parchment:#F5EFE2;
  --parchment-2:#EBE2CE;
  --mist:#B9BEDC;
  --line:rgba(198,149,46,.28);
  --maxw:1180px;
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--mist);
  font-family:"Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.72;overflow-x:hidden;
}
h1,h2,h3,h4,.display{font-family:"Marcellus",Georgia,serif;font-weight:400;color:var(--parchment);letter-spacing:.01em;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.4vw,3.9rem)}
h2{font-size:clamp(1.65rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.15rem,2vw,1.42rem)}
p{margin:0 0 1.05em}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:4px}
img,svg{max-width:100%}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px
}
.skip-link:focus{
  position:fixed!important;top:10px;left:10px;z-index:200;width:auto;height:auto;clip:auto;clip-path:none;
  background:var(--gold);color:#241A02;padding:11px 18px;border-radius:8px;font-weight:700
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{
  font-family:"Noto Sans",sans-serif;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);font-weight:700;margin:0 0 .9rem;display:flex;align-items:center;gap:.7rem
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}
.sec{padding:86px 0;position:relative}
.sec--light{background:var(--parchment);color:#3A3520}
.sec--light h2,.sec--light h3{color:#1B1F45}
.sec--light .eyebrow{color:#9A6A18}
.sec--light a{color:#8A5A10}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:60;background:rgba(14,19,48,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)
}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 22px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand__mark{width:34px;height:34px;flex:none}
.brand__txt{min-width:0}
.brand__lead{
  display:block;font-family:"Noto Sans",sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--brass);line-height:1.5
}
.brand__name{
  display:block;font-family:"Marcellus",serif;color:var(--parchment);
  font-size:1.14rem;line-height:1.1;letter-spacing:.01em
}
.brand__txt small{display:block;font-family:"Noto Sans",sans-serif;font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:#8E93B4;margin-top:2px}
.brand img.custom-logo{max-height:46px;width:auto}
.topbar__cta{display:flex;gap:9px;flex:none}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:11px 19px;border-radius:100px;
  font-weight:700;font-size:.88rem;border:1px solid transparent;white-space:nowrap;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease
}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn--call{background:linear-gradient(150deg,var(--gold),var(--brass));color:#241A02;box-shadow:0 8px 22px rgba(198,149,46,.3)}
.btn--wa{background:#1FA855;color:#fff;box-shadow:0 8px 22px rgba(31,168,85,.28)}
.btn--ghost{border-color:var(--line);color:var(--gold);background:transparent}
.btn svg{width:17px;height:17px;flex:none}

/* ---------- hero ---------- */
.hero{position:relative;padding:74px 0 90px;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(760px 420px at 76% 24%,rgba(198,149,46,.17),transparent 62%),
    radial-gradient(600px 500px at 8% 82%,rgba(226,98,42,.11),transparent 60%);
  pointer-events:none
}
.hero__grid{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:54px;align-items:center}
.hero__lede{font-size:1.1rem;max-width:44ch}
.hero h1 em{font-style:normal;color:var(--gold);display:block}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 22px}
.hero__addr{font-size:.9rem;border-left:2px solid var(--brass);padding-left:14px;color:var(--mist);font-style:normal}
.hero__addr strong{color:var(--parchment);display:block;font-weight:600}

/* ---------- isometric stage ---------- */
.iso-stage{perspective:1500px;display:flex;justify-content:center;align-items:center;min-height:400px}
.iso{
  position:relative;width:min(420px,86vw);
  transform:rotateX(52deg) rotateZ(45deg);transform-style:preserve-3d;
  animation:vssfloat 9s ease-in-out infinite
}
@keyframes vssfloat{0%,100%{transform:rotateX(52deg) rotateZ(45deg) translateZ(0)}50%{transform:rotateX(52deg) rotateZ(45deg) translateZ(26px)}}
.iso__layer{position:absolute;inset:0;transform-style:preserve-3d}
.iso__layer--base{transform:translateZ(-46px);filter:blur(1px);opacity:.42}
.iso__layer--mid{transform:translateZ(-22px);opacity:.6}
.iso__layer--top{position:relative;transform:translateZ(4px)}
.iso__cap{
  position:absolute;left:50%;bottom:-96px;transform:translateX(-50%);
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:700;white-space:nowrap
}

/* ---------- trust strip ---------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2)}
.strip__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.strip__cell{background:var(--ink-2);padding:26px 20px;text-align:center}
.strip__n{font-family:"Marcellus",serif;font-size:1.9rem;color:var(--gold);display:block;line-height:1.1}
.strip__l{font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mist)}

/* ---------- grids ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.grid-2--stretch{align-items:stretch;margin-top:34px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.card{
  background:linear-gradient(165deg,var(--ink-2),var(--ink));
  border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;position:relative;overflow:hidden;
  transition:transform .22s ease,border-color .22s ease
}
.card:hover{transform:translateY(-5px);border-color:rgba(239,203,104,.55)}
.card__ico{width:46px;height:46px;margin-bottom:16px}
.card h3{margin-bottom:.45em}
.card p{font-size:.94rem;margin:0}
.card__kw{display:block;margin-top:14px;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--brass);font-weight:700}
.sec--light .card{background:#fff;border-color:rgba(154,106,24,.28)}
.sec--light .card p{color:#3A3520}
.sec--light .card__kw{color:#9A6A18}

/* ---------- answer blocks (AEO) ---------- */
.answer-block{
  background:rgba(198,149,46,.08);border:1px solid var(--line);border-left:3px solid var(--brass);
  border-radius:10px;padding:20px 24px;margin:26px 0
}
.answer-block p:last-child{margin-bottom:0}
.answer-block strong{color:var(--parchment)}
.sec--light .answer-block{background:rgba(154,106,24,.09);border-color:rgba(154,106,24,.3);border-left-color:#9A6A18}
.sec--light .answer-block strong{color:#1B1F45}
.lede-w{max-width:72ch}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
.step{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:24px 20px;position:relative}
.step__n{
  font-family:"Marcellus",serif;font-size:.9rem;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--gold);color:#241A02;font-weight:700;margin-bottom:14px
}
.step h3{font-size:1.05rem}
.step p{font-size:.9rem;margin:0}

/* ---------- koota table ---------- */
.koota{width:100%;border-collapse:collapse;margin-top:26px;font-size:.93rem}
.koota th,.koota td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(154,106,24,.22)}
.koota th{font-family:"Marcellus",serif;font-size:1rem;color:#1B1F45;border-bottom-width:2px}
.koota td:last-child,.koota th:last-child{text-align:right;font-weight:700;white-space:nowrap}
.koota tfoot td{font-weight:700;color:#1B1F45;border-bottom:none}

/* ---------- areas ---------- */
.areas{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.areas a{
  border:1px solid rgba(154,106,24,.35);border-radius:100px;padding:7px 15px;font-size:.85rem;
  color:#5A4A22;transition:.18s ease
}
.areas a:hover{background:rgba(154,106,24,.12);border-color:#9A6A18;text-decoration:none}

/* ---------- faq ---------- */
.faq{margin-top:32px;border-top:1px solid rgba(154,106,24,.3)}
.faq details{border-bottom:1px solid rgba(154,106,24,.3)}
.faq summary{
  cursor:pointer;padding:19px 42px 19px 0;position:relative;list-style:none;
  font-family:"Marcellus",serif;font-size:1.1rem;color:#1B1F45
}
.faq summary:hover{color:#8A5A10}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;color:#8A5A10;font-size:1.5rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{font-size:.96rem;padding-bottom:6px;max-width:78ch;color:#3A3520}

/* ---------- contact ---------- */
.contact-card{
  background:linear-gradient(160deg,var(--ink-2),var(--ink-3));border:1px solid var(--line);
  border-radius:20px;padding:38px 34px
}
.contact-row{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)}
.contact-row:last-of-type{border-bottom:none}
.contact-row svg{width:21px;height:21px;flex:none;margin-top:4px;color:var(--gold)}
.contact-row span.lbl{display:block;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--brass);font-weight:700}
.contact-row .big{font-size:1.28rem;font-family:"Marcellus",serif}
.contact-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}
.map-embed{border:1px solid var(--line);border-radius:20px;overflow:hidden;min-height:340px;height:100%}
.map-embed iframe{display:block;width:100%;height:100%;min-height:340px;border:0;filter:grayscale(.3) contrast(1.05)}

/* ---------- footer ---------- */
.foot{background:#090D24;border-top:1px solid var(--line);padding:64px 0 28px}
.foot h4{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-family:"Noto Sans",sans-serif;font-weight:700;margin-bottom:14px}
.foot__cols{display:grid;grid-template-columns:repeat(5,1fr);gap:30px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:7px}
.foot li a{color:#8E93B4;font-size:.82rem}
.foot li a:hover{color:var(--gold)}
.foot__base{
  margin-top:46px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.8rem;color:#6E739A
}
.disclaimer{
  background:rgba(226,98,42,.07);border:1px solid rgba(226,98,42,.24);border-radius:12px;
  padding:18px 22px;margin-top:34px;font-size:.85rem;color:#9AA0C4
}
.disclaimer strong{color:var(--parchment)}
.narrow{max-width:900px}

/* ---------- sticky mobile bar ---------- */
.mobar{display:none}

@media (max-width:980px){
  .hero__grid,.grid-2{grid-template-columns:1fr;gap:40px}
  .cards,.steps{grid-template-columns:repeat(2,1fr)}
  .strip__grid{grid-template-columns:repeat(2,1fr)}
  .foot__cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .sec{padding:62px 0}
  .cards,.steps{grid-template-columns:1fr}
  .topbar__cta .btn span{display:none}
  .topbar__cta .btn{padding:11px 14px}
  .brand__txt small{display:none}
  .brand__name{font-size:1rem}
  .brand__lead{font-size:.55rem;letter-spacing:.15em}
  .brand__mark{width:30px;height:30px}
  .foot__cols{grid-template-columns:1fr}
  body{padding-bottom:68px}
  .mobar{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;bottom:0;left:0;right:0;z-index:70;
    padding:10px 12px;background:rgba(9,13,36,.97);border-top:1px solid var(--line)
  }
  .mobar .btn{justify-content:center;width:100%}
  .iso{width:min(320px,80vw)}
  .iso__cap{bottom:-78px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- admin bar offset ---------- */
body.admin-bar .topbar{top:32px}
@media (max-width:782px){body.admin-bar .topbar{top:46px}}