/* style.css - bravoscientific.com. Shared by index.php and contact.php.
 *
 * Copyright (c) 2026, Gordon Elliott d/b/a Bravo Digital Arts
 */

:root{
  --bg:#ffffff;
  --bg-alt:#f6f8fa;
  --fg:#16202e;
  --fg-muted:#5a6779;
  --fg-faint:#8a94a4;
  --rule:#e2e7ee;
  --accent:#0b6fa4;
  --accent-soft:#e8f2f8;
  --ok-bg:#e7f5ec; --ok-fg:#1c6b3a; --ok-br:#b7e0c6;
  --err-bg:#fdecec; --err-fg:#9b2226; --err-br:#f2c2c2;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1420; --bg-alt:#141c2b; --fg:#e8edf4; --fg-muted:#9aa7b8;
    --fg-faint:#6b7889; --rule:#233046; --accent:#54b3e4; --accent-soft:#16263a;
    --ok-bg:#12301f; --ok-fg:#7fd6a0; --ok-br:#1f5436;
    --err-bg:#3a1a1c; --err-fg:#f2a6a8; --err-br:#6b2b2e;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1420; --bg-alt:#141c2b; --fg:#e8edf4; --fg-muted:#9aa7b8;
  --fg-faint:#6b7889; --rule:#233046; --accent:#54b3e4; --accent-soft:#16263a;
  --ok-bg:#12301f; --ok-fg:#7fd6a0; --ok-br:#1f5436;
  --err-bg:#3a1a1c; --err-fg:#f2a6a8; --err-br:#6b2b2e;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:46rem;margin:0 auto;padding:0 16px;}

/* ---- masthead ---- */
header{padding:clamp(3rem,9vw,5.5rem) 0 clamp(1.75rem,4vw,2.5rem);}
header.compact{padding:clamp(2.25rem,6vw,3.25rem) 0 clamp(1.25rem,3vw,1.75rem);}
.mark{display:flex;align-items:center;gap:.85rem;margin-bottom:1.6rem;}
.mark svg{display:block;flex:none;}
h1{font-size:clamp(1.9rem,6vw,2.6rem);line-height:1.12;letter-spacing:-.02em;font-weight:650;margin:0;}
header.compact h1{font-size:clamp(1.5rem,4.5vw,1.9rem);}
h1 a{color:inherit;text-decoration:none;}
.byline{
  margin:.55rem 0 0;font-size:.95rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg-faint);font-weight:550;
}
.lede{
  margin:1.9rem 0 0;font-size:clamp(1.05rem,2.6vw,1.2rem);line-height:1.6;
  color:var(--fg-muted);max-width:34rem;
}

/* ---- sections ---- */
section{padding:clamp(2.25rem,5vw,3rem) 0;border-top:1px solid var(--rule);}
h2{
  font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-faint);font-weight:650;margin:0 0 1.75rem;
}
ul.caps{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem;}
@media (min-width:38rem){ul.caps{grid-template-columns:1fr 1fr;gap:1.9rem 2.5rem;}}
ul.caps li{margin:0;}
.cap-name{display:block;font-weight:620;font-size:1.02rem;margin-bottom:.3rem;letter-spacing:-.005em;}
.cap-name::before{
  content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:1px;
  background:var(--accent);margin-right:.6rem;vertical-align:.12em;
}
.cap-body{color:var(--fg-muted);font-size:.95rem;line-height:1.58;margin:0;}

/* ---- contact form ---- */
.contact-card{
  background:var(--bg-alt);border:1px solid var(--rule);border-radius:10px;
  padding:clamp(1.4rem,4vw,1.9rem);
}
.contact-card > p.intro{margin:0 0 1.4rem;color:var(--fg-muted);font-size:.98rem;}
.field{display:grid;gap:.4rem;margin-bottom:1.05rem;}
.field label{
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-faint);font-weight:650;
}
.field input,.field textarea{
  font:inherit;font-size:.97rem;color:var(--fg);background:var(--bg);
  border:1px solid var(--rule);border-radius:7px;padding:.6rem .7rem;
  width:100%;transition:border-color .12s ease, box-shadow .12s ease;
}
.field textarea{resize:vertical;min-height:8.5rem;line-height:1.55;}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
button[type=submit]{
  font:inherit;font-weight:620;font-size:.95rem;cursor:pointer;
  color:#fff;background:var(--accent);border:1px solid var(--accent);
  border-radius:7px;padding:.62rem 1.5rem;
}
button[type=submit]:hover{filter:brightness(1.08);}
button[type=submit]:focus-visible{
  outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.form-foot{margin:1rem 0 0;font-size:.82rem;color:var(--fg-faint);}
.alt-contact{
  margin:1.4rem 0 0;padding-top:1.1rem;border-top:1px solid var(--rule);
  font-size:.9rem;color:var(--fg-muted);
}

/* Honeypot: off-screen for humans, irresistible to bots. Not display:none,
   which some bots specifically skip. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* ---- notices ---- */
.notice{
  border-radius:8px;padding:.8rem 1rem;margin:0 0 1.5rem;
  font-size:.95rem;border:1px solid transparent;
}
.notice.ok{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-br);}
.notice.err{background:var(--err-bg);color:var(--err-fg);border-color:var(--err-br);}

/* ---- links ---- */
a.q{
  color:var(--accent);text-decoration:none;font-weight:550;
  border-bottom:1px solid transparent;
}
a.q:hover,a.q:focus-visible{border-bottom-color:var(--accent);}

/* ---- footer ---- */
footer{
  padding:2.25rem 0 3rem;border-top:1px solid var(--rule);color:var(--fg-faint);
  font-size:.84rem;display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;justify-content:space-between;
}
footer p{margin:0;}
footer nav{display:flex;gap:1.25rem;}
footer nav a{color:var(--fg-muted);text-decoration:none;}
footer nav a:hover,footer nav a:focus-visible{color:var(--accent);}