/* DLLD LLC Notary - site styles (ASCII-only punctuation) */

:root{
  --bg:#0b1220;           /* deep slate for hero bg */
  --page:#0f172a;         /* slate-900 */
  --page-bg:#e5e7eb;      /* light grey for page background */
  --card:#ffffff;
  --ink:#0f172a;          /* body text */
  --muted:#6b7280;        /* gray-500 */
  --line:#e5e7eb;         /* gray-200 */
  --brand:#2563eb;        /* blue-600 */
  --brand-ink:#0b1220;
  --accent:#22c55e;       /* green-500 for success */
  --danger:#dc2626;       /* red-600 */
  --shadow: 0 10px 30px rgba(2,6,23,.12);
  /* header height for fixed header */
  --header-h: 64px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  color:var(--ink);
  background:var(--page-bg);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* offset content under fixed header */
  padding-top: var(--header-h);
}

/* Ensure anchor jumps are not hidden behind fixed header */
.hero, .section { scroll-margin-top: var(--header-h); }

a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width:min(1100px, 92vw);
  margin-inline:auto;
}

.button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1rem; border-radius:.75rem; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-weight:600; letter-spacing:.01em;
  box-shadow: var(--shadow);
  transition: transform .06s ease, box-shadow .2s ease, background .2s;
}
.button:hover{ transform: translateY(-1px); text-decoration:none; }
.button:active{ transform: translateY(0); }
.button.primary{
  background:var(--brand); border-color:transparent; color:#fff;
}
.button.ghost{
  background:transparent; border-color:rgba(255,255,255,.3); color:#fff;
  box-shadow:none;
}

/* Header - now fixed so it stays visible at all times */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height: var(--header-h);
  display:block;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(229,231,235,.90);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:100%;
  padding:.75rem 0;
}
.brand{ display:flex; align-items:center; gap:.5rem; font-weight:800; color:var(--ink); }
.brand-mark{ width:28px; height:28px; display:inline-grid; place-items:center; background:var(--brand); color:#fff; border-radius:8px; box-shadow: var(--shadow); }
.brand-text{ letter-spacing:.3px; }

.nav{ display:flex; gap:.75rem; align-items:center; }
.nav a{ padding:.5rem .75rem; border-radius:.5rem; color:var(--ink); }
.nav a:hover{ background:rgba(37,99,235,.08); text-decoration:none; }
.nav .ghost{ margin-left:.25rem; }

/* Hero */
.hero{
  position:relative; color:#fff; background: radial-gradient(1200px 400px at 20% -20%, #3b82f6 0, rgba(59,130,246,0) 60%), var(--bg);
  overflow:hidden;
}
.hero-bg{
  height:40px; background:linear-gradient(0deg, var(--page-bg), transparent));
}
.hero-inner{
  min-height:64vh; display:grid; grid-template-columns: 1.3fr 1fr; gap:2rem; align-items:center; padding:3.5rem 0 2rem;
}
.hero-copy h1{ font-size: clamp(28px, 3.2vw, 44px); line-height:1.1; margin:0 0 1rem;}
.lead{ color:#e5e7eb; font-size:1.1rem; margin:0 0 1.25rem; max-width:60ch; }
.hero-ctas{ display:flex; gap:.75rem; margin:.75rem 0 1rem;}
.trust{ display:flex; gap:1rem; flex-wrap:wrap; padding:0; margin:1rem 0 0; list-style:none; color:#cbd5e1; font-size:.95rem; }

.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.18);
  border-radius:1rem; padding:1.25rem; transform: translateY(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; text-align:center; }
.stats strong{ display:block; font-size:1.6rem; }
.stats span{ color:#cbd5e1; font-size:.9rem; }

/* Sections */
.section{ padding:3.5rem 0; }
.section.alt{ background:var(--page-bg); }
.section h2{ font-size: clamp(24px, 2.6vw, 34px); margin:0 0 1rem; }
.section-sub{ color:var(--muted); margin:0 0 1.5rem; }

/* Cards grid */

.grid{ display:grid; gap:1rem; }
.cards{ grid-template-columns: repeat(3, 1fr); }
/* NEW: form row helpers for the Book an Appointment layout */
.grid.three-col { grid-template-columns: repeat(3, 1fr); }
.grid.two-col   { grid-template-columns: repeat(2, 1fr); }

/* Responsive stacking */
@media (max-width: 900px) {
  .grid.three-col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid.three-col,
  .grid.two-col   { grid-template-columns: 1fr; }
}

@media (max-width: 1000px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-card{display:none;}
  .cards{grid-template-columns: repeat(2,1fr);}
}
@media (max-width: 640px){ .cards{ grid-template-columns: 1fr; } }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:1rem; padding:1rem 1.1rem;
  box-shadow: var(--shadow);
}
.card h3{ margin:.2rem 0 .4rem; font-size:1.1rem; }

/* Pricing */
.pricing{ grid-template-columns: repeat(2,1fr); }
@media (max-width: 700px){ .pricing{ grid-template-columns: 1fr; } }
.price-card{
  background:var(--card); border:1px solid var(--line); border-radius:1rem; padding:1.25rem; box-shadow:var(--shadow);
}
.price-card.highlight{ border-color: rgba(37,99,235,.35); outline:2px solid rgba(37,99,235,.15); }
.price{ display:flex; align-items:baseline; gap:.5rem; margin:.5rem 0 1rem; }
.amount{ font-size:1.8rem; font-weight:800; }
.unit{ color:var(--muted); }

/* Form */
.form{ padding:1.25rem; }
.form-grid{ grid-template-columns: repeat(2,1fr); }
@media (max-width: 700px){ .form-grid{ grid-template-columns: 1fr; } }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field span{ font-weight:600; }

/* Keep custom styling on text inputs/selects/textarea, but NOT on checkboxes/radios */
input:not([type="checkbox"]):not([type="radio"]), select, textarea{
  appearance:none; width:100%; padding:.7rem .8rem; border-radius:.7rem;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  box-shadow: 0 1px 0 rgba(2,6,23,.04) inset;
  transition:border-color .15s ease, box-shadow .15s ease;
}
/* Restore native checkbox/radio look + spacing */
input[type="checkbox"],
input[type="radio"]{
  appearance:auto;
  width:auto; height:auto;
  margin-right:.4rem;
  vertical-align:middle;
}

input:focus, select:focus, textarea:focus{ outline:none; border-color:rgba(37,99,235,.6); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.error{ color:var(--danger); display:none; font-size:.85rem; }
input:invalid + .error, select:invalid + .error{ display:block; }
textarea{ resize:vertical; }

.form-actions{ display:flex; align-items:center; gap:1rem; margin-top:1rem; }
.form-msg{ margin:0; font-weight:600; }
.form-msg.success{ color:var(--accent); }
.form-msg.error{ color:var(--danger); }

/* Footer */
.site-footer{ background:var(--page-bg); border-top:1px solid var(--line); }
.footer-inner{ padding:2rem 0; }
.footer-brand{ font-weight:800; display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.footer-cols{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
@media (max-width: 700px){ .footer-cols{ grid-template-columns: 1fr; } }
.muted{ color:var(--muted); font-weight:600; }
.fine{ color:var(--muted); font-size:.9rem; margin-top:1rem; }

/* Replace letter "D" brand mark with the scroll icon */
.brand-mark, .site-brand-mark, .brand-logo, .navbar-brand .brand-initial {
  width: 32px;
  height: 32px;
  display: inline-block;
  text-indent: -9999px;           /* hide letter fallback */
  overflow: hidden;
  background-image: url('/icons/notary-scroll-lightnavy-round-32.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 8px;             /* keep it nicely rounded */
}

/* Larger variant if your header expects a bigger mark */
.header .brand-mark,
.navbar .brand-mark {
  width: 48px;
  height: 48px;
  background-image: url('/icons/notary-scroll-lightnavy-round-48.png');
}