/* Bennett Design Studio — site stylesheet.
   Loaded after assets/tokens.css. The page markup carries inline styles from the
   design source, so the responsive layer below uses !important by necessity. */

/* ── base (lifted from the design's own <helmet> block) ─────────────────── */
body { margin: 0; background: #0e0f10; color: #f2f2f3; font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: var(--color-accent-400); text-decoration: none; }
a:hover { color: var(--color-accent-300); }
img { max-width: 100%; }
::selection { background: var(--color-accent-800); }
:focus-visible { outline: 1px solid var(--color-accent-400); outline-offset: 3px; }
select option { color: #1d1f20; }

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #0e0f10; color: #f2f2f3; padding: 12px 18px;
  border: 1px solid var(--color-accent-400);
  font: 400 11px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
}
.skip:focus { left: 8px; top: 8px; }

/* ── hover states (were style-hover attributes in the design source) ────── */
.hv1:hover, .hv1:focus-visible { background:rgba(255,255,255,.06) !important; }
.hv2:hover, .hv2:focus-visible { background:rgba(255,255,255,.06) !important; color:var(--color-accent-400) !important; }
.hv3:hover, .hv3:focus-visible { border-color:var(--color-accent-400) !important; color:var(--color-accent-400) !important; }
.hv4:hover, .hv4:focus-visible { color:var(--color-accent-400) !important; }

/* ── responsive layer ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* the four-column index/title/detail/meta rows get cramped before the
     full single-column collapse */
  [style*="grid-template-columns:70px minmax(0,1.1fr)"] { grid-template-columns: 70px minmax(0,1fr) !important; }
  [style*="grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,240px)"] { grid-template-columns: minmax(0,240px) minmax(0,1fr) !important; }
}

@media (max-width: 860px) {
  /* every multi-column grid stacks, except the tiny icon/label pairs */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0,1fr) !important; }
  [style*="grid-template-columns:34px 1fr"] { grid-template-columns: 34px 1fr !important; }
  /* image grids stay two-up rather than dropping to one giant column */
  [style*="repeat(2,1fr)"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(4,1fr)"],
  [style*="repeat(5,1fr)"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* page gutters */
  [style*="px 40px"],
  [style*="px 56px"],
  [style*="padding:56px"] { padding-left: 22px !important; padding-right: 22px !important; }
  [style*="padding:96px"],
  [style*="padding:88px"],
  [style*="padding:80px"],
  [style*="padding:72px"] { padding-top: 56px !important; padding-bottom: 48px !important; }

  /* vertical rules between former columns become horizontal separators */
  [style*="border-right:1px solid"] { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; }
  [style*="border-left:1px solid"] { border-left: 0 !important; }

  /* header wraps instead of overflowing, and stays shallow enough that the
     sticky bar does not eat the viewport */
  header > div { flex-wrap: wrap !important; gap: 12px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  header nav { flex-wrap: wrap !important; gap: 16px !important; width: 100%; }
  header nav a:last-child { padding: 9px 14px !important; }

  /* section side-rails stop sticking once they are stacked */
  [style*="position:sticky"][style*="top:120px"] { position: static !important; }

  /* full-bleed panels shrink */
  [style*="min-height:88vh"] { min-height: 0 !important; }
  [style*="min-height:520px"],
  [style*="min-height:480px"],
  [style*="min-height:460px"],
  [style*="min-height:440px"],
  [style*="min-height:360px"] { min-height: 260px !important; }

  /* hero media column: let the cover image become a block so the overlay
     panels below it flow in document order instead of covering the photo */
  .hero-media { min-height: 0 !important; overflow: visible !important; }
  .hero-media > img { position: relative !important; height: 300px !important; }
  .hero-panel {
    position: static !important; width: auto !important; max-width: none !important;
    backdrop-filter: none !important; margin-top: 14px !important;
  }
}

@media (max-width: 520px) {
  [style*="repeat(3,1fr)"],
  [style*="repeat(4,1fr)"],
  [style*="repeat(5,1fr)"] { grid-template-columns: minmax(0,1fr) !important; }
}

@media (max-width: 560px) {
  /* the "Residential Design - So. Cal" strapline beside the wordmark */
  header a[href="/"] span + span { display: none !important; }
}

@media (max-width: 420px) {
  h1 { font-size: 38px !important; }
  h2 { font-size: 28px !important; }
}

@media print {
  header, footer, .skip { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* contact form */
/* `button` MUST be in this list. Without appearance:none the browser paints its
   own native button chrome - on some platforms a white fill - underneath the
   near-white label, which makes the text invisible. */
.cf input, .cf select, .cf textarea, .cf button { -webkit-appearance: none; appearance: none; }
.cf input:focus, .cf select:focus, .cf textarea:focus { border-bottom-color: var(--color-accent-400); }
.cf ::placeholder { color: rgba(242,242,243,.3); }
.cf select option { background: #1d1f20; color: #f2f2f3; }
.cf button[type=submit] {
  cursor: pointer; background-color: transparent; color: #f2f2f3; font-family: inherit;
}
/* Windows High Contrast / forced-colors ignores author colours entirely; hand it
   system colours so the label stays readable there too. */
@media (forced-colors: active) {
  .cf button[type=submit] { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
}
.cf button[type=submit]:hover:not(:disabled),
.cf button[type=submit]:focus-visible:not(:disabled) {
  border-color: var(--color-accent-400) !important; color: var(--color-accent-400) !important;
}
.cf button[type=submit]:disabled { opacity: .5; cursor: default; }
.cf-note { display: none; margin-top: 22px; font-size: 14px; line-height: 1.7; }
.cf-note.show { display: block; }
.cf-note.ok { color: var(--color-accent-300); }
.cf-note.bad { color: #e9a1a1; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) { .cf-row { grid-template-columns: minmax(0,1fr) !important; } }