/* ==========================================================================
   Saran Law Firm — Service Page Template
   Banner -> [content | sticky form + CTA] -> footer
   ========================================================================== */

:root{
  --navy:#152238;
  --navy-2:#1e304d;
  --gold:#a9834c;
  --gold-light:#c9a06a;
  --paper:#000;
  --ink:#1c1e24;
  --muted:#6b7076;
  --line:#e7e3d8;
  --card:#ffffff;
  --radius-lg:20px;
  --radius-md:14px;
  --shadow-soft:0 12px 30px rgba(21,34,56,.08);
  --font-head:'Lora', Georgia, serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
}
.service-content p {
    color: #000 !important;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12151b; --ink:#eceae4; --muted:#9a9ca3; --line:#262a32; --card:#1a1e26;
  }
}
:root[data-theme="dark"]{
  --paper:#12151b; --ink:#eceae4; --muted:#9a9ca3; --line:#262a32; --card:#1a1e26;
}

.service-page{ background:#fff; color:#000; font-family:var(--font-body); }
.service-page *{ box-sizing:border-box; }

/* ---------------- Banner ---------------- */
.service-banner{
  /* --banner-image is set inline per-page by page-service.php: the page's
     Featured Image if one is set, otherwise a shared placeholder photo.
     The gradient sits on top as a scrim so the white heading text stays
     readable over any photo. */
  background:
    radial-gradient(1200px 420px at 85% -10%, rgba(169,131,76,.35), transparent 60%),
    linear-gradient(180deg, rgba(21,34,56,.90) 0%, rgba(30,48,77,.94) 100%),
    var(--banner-image) center center / cover no-repeat;
  background-color:var(--navy); /* fallback while the image loads */
  padding:56px 24px 72px;
  color:#fff;
}
.service-banner__inner{ max-width:1300px; margin:0 auto; }
.service-layout {;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 44px;
    padding: 52px 24px 90px;
    align-items: start;
    max-width: 1300px !important;
}

.service-breadcrumb{ font-size:13px; color:rgba(255,255,255,.65); margin-bottom:22px; }
.service-breadcrumb a{ color:rgba(255,255,255,.75); text-decoration:none; }
.service-breadcrumb a:hover{ color:#fff; text-decoration:underline; }
.service-breadcrumb span[aria-hidden]{ margin:0 8px; opacity:.5; }

.service-eyebrow{
  display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.3px;
  color:#2a2115; background:var(--gold-light); padding:6px 14px; border-radius:999px;
  margin-bottom:18px;
}

.service-title{
  font-family:var(--font-head); font-weight:600; font-size:clamp(30px, 4.2vw, 46px);
  line-height:1.15; margin:0 0 14px; max-width:18ch;
}
.service-subheading{ font-size:17px; line-height:1.6; color:rgba(255,255,255,.82); max-width:60ch; margin:0; }

/* ---------------- Two-column layout ---------------- */
.service-layout {;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 44px;
    padding: 52px 24px 90px;
    align-items: start;
    max-width: 1300px !important;
}
.service-form-card .wpcf7-response-output {
    color: #fff !important;
}
.service-form-card p, .service-form-card h3, .service-form-card label {
    color: #fff !important;
}

.service-form-card input, .service-form-card select, .service-form-card textarea {
    color: #000 !important;
}
.service-form-card__body select#svc-service, .service-form-card__body textarea {
    color: #000 !important;
}
/* Left: content */
.service-content{ min-width:0; max-width:70ch; font-size:16px; line-height:1.75; }

.service-content h2{
  font-family:var(--font-head); font-size:26px; font-weight:600; color:var(--navy);
  margin:44px 0 16px; padding-top:6px;
}
:root[data-theme="dark"] .service-content h2{ color:#fff; }
.service-content h2:first-child{ margin-top:0; }



.service-content p{ margin:0 0 16px; color:var(--ink); }

.service-content ul, .service-content ol{ margin:0 0 20px; padding-left:0; list-style:none; }
.service-content ul li {
    position: relative;
    padding: 8px 0 8px 30px;
    color: #0f2c5c;
}
.service-content ul li:last-child{ border-bottom:none; }
.service-content ul li::before{
  content:"✓"; position:absolute; left:0; top:8px; color:var(--gold); font-weight:700;
}
.service-content ol{ counter-reset:svc-step; }
.service-content ol li{
  position:relative; padding:8px 0 8px 34px; counter-increment:svc-step;
}
.service-content ol li::before{
  content:counter(svc-step); position:absolute; left:0; top:6px; width:22px; height:22px;
  background:var(--navy); color:#fff; border-radius:50%; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

.service-content blockquote{
  margin:24px 0; padding:16px 20px; background:#fbf3e6; border-left:4px solid var(--gold);
  border-radius:var(--radius-md); color:#3a2c14; font-size:14.5px;
}
:root[data-theme="dark"] .service-content blockquote{ background:#241c0f; color:#f0e4cf; }

.service-content table{
  width:100%; border-collapse:collapse; margin:20px 0; font-size:14.5px;
  background:var(--card); border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.service-content table caption{ display:none; }
.service-content thead th{
  background:var(--navy); color:#fff; text-align:left; padding:12px 14px; font-weight:600;
}
.service-content tbody td{ padding:11px 14px; border-top:1px solid var(--line); }
.service-content tbody tr:nth-child(even){ background:rgba(0,0,0,.015); }
.service-content .table-scroll{ overflow-x:auto; }

/* Right: sticky sidebar */
.service-sidebar{ min-width:0; }
.service-sidebar__sticky{
  position:sticky; top:24px; display:flex; flex-direction:column; gap:20px;
}

.service-form-card {
    background: #0f2c5c;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 26px 24px;
}
.service-form-card__heading{
  font-family:var(--font-head); font-size:19px; font-weight:600; color:var(--navy);
  margin:0 0 16px;
}
:root[data-theme="dark"] .service-form-card__heading{ color:#fff; }
.service-form-placeholder{ font-size:13.5px; color:var(--muted); margin:0; }

/* Loosen up common form-plugin defaults so they inherit the card's rhythm */
.service-form-card__body input[type="text"],
.service-form-card__body input[type="email"],
.service-form-card__body input[type="tel"],
.service-form-card__body textarea,
.service-form-card__body select{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  font-family:var(--font-body); font-size:14px; margin-bottom:12px; background:#fff; color:var(--ink);
}
.service-form-card__body button,
.service-form-card__body input[type="submit"]{
  width:100%; padding:12px 16px; background:var(--gold); color:#1c1408; border:none;
  border-radius:10px; font-weight:600; font-size:14.5px; cursor:pointer; transition:background .15s ease;
}
.service-form-card__body button:hover,
.service-form-card__body input[type="submit"]:hover{ background:var(--gold-light); }

.service-cta-card{
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff; border-radius:var(--radius-lg); padding:26px 24px; box-shadow:var(--shadow-soft);
}
.service-cta-card__heading{ font-family:var(--font-head); font-size:19px; margin:0 0 8px; }
.service-cta-card__text{ font-size:14px; color:rgba(255,255,255,.82); line-height:1.6; margin:0 0 18px; }
.service-cta-card__btn{
  display:inline-block; width:100%; text-align:center; padding:12px 16px;
  background:var(--gold); color:#1c1408; border-radius:10px; text-decoration:none;
  font-weight:600; font-size:14.5px; transition:background .15s ease;
}
.service-cta-card__btn:hover{ background:var(--gold-light); }


.service-sidebar__sticky .svc-form-label, .service-sidebar__sticky .service-form-card__heading {
    color: #fff !important;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 980px){
  .service-layout{
    grid-template-columns:1fr;
    gap:32px;
  }
  /* Show the form + CTA right after the banner on mobile, ahead of the long-form content */
  .service-sidebar{ order:1; }
  .service-content{ order:2; max-width:none; }
  .service-sidebar__sticky{ position:static; }
}

@media (max-width: 560px){
  .service-banner{ padding:40px 18px 52px; }
  .service-layout{ padding:36px 18px 60px; }
  .service-title{ font-size:28px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .service-form-card__body button, .service-cta-card__btn{ transition:none; }
}
.service-sidebar {
    min-width: 0;
    position: sticky !important;
    top: 160px !important;
}