/*
Theme Name: Built On Long Island
Theme URI: https://www.builtonlongisland.com
Author: Built On LI
Description: Civic-tech identity & directory theme for Built On Long Island. Custom Post Type "business" with the Built On LI Verified seal, Nassau/Suffolk filtering, and the brand wordmark / seal SVGs. Mirrors the React prototype 1:1.
Version: 0.2.0
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: built-on-li
*/

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap");

/* Brand tokens — keep in sync with React app (src/styles.css) */
:root{
  --ink:#0A1620;
  --navy:#001B2A;
  --steel:#36454F;
  --sand:#CBA46E;
  --ocean:#2A6F97;
  --fog:#E6E7EB;
  --paper:#F4F1EA;
  --stone:#ECE7DC;
  --rule:rgba(0,27,42,.18);
  --hairline:rgba(0,27,42,.14);
  --font-display:"Inter","Helvetica Neue",system-ui,sans-serif;
  --font-condensed:"Oswald","Anton","Helvetica Neue Condensed","Impact",sans-serif;
}

*{box-sizing:border-box}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-display);
  margin:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;margin:0 0 .4em}

.font-condensed{font-family:var(--font-condensed);font-weight:600;letter-spacing:.02em;text-transform:uppercase}

.wordmark{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.18em}
.wordmark-light{font-weight:300}
.wordmark-bold{font-weight:800;letter-spacing:.14em}

.eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--steel)}

.boli-container{max-width:80rem;margin:0 auto;padding:0 1.5rem}

.boli-header{position:sticky;top:0;z-index:40;background:rgba(244,241,234,.92);backdrop-filter:blur(8px)}
.boli-header .accent{height:2px;background:var(--sand)}
.boli-header .row{display:flex;align-items:center;justify-content:space-between;height:80px;border-bottom:1px solid var(--hairline)}
.boli-header nav a{margin:0 1.25rem;color:var(--ink);text-decoration:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;opacity:.8}
.boli-header nav a:hover{opacity:1}
.boli-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--navy);color:var(--paper);padding:.65rem 1.25rem;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;text-decoration:none;border-radius:2px}
.boli-cta:hover{background:var(--ocean)}

/* Cards */
.boli-card{display:block;border:1px solid rgba(0,27,42,.16);background:#FBF9F4;padding:1.75rem;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}
.boli-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px -18px rgba(0,27,42,.35)}
.boli-card .card-eyebrow{display:flex;justify-content:space-between;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--steel)}
.boli-card .card-num{color:var(--sand)}
.boli-card .card-name{font-family:var(--font-condensed);font-size:24px;text-transform:uppercase;line-height:1.05;margin:1rem 0 .5rem;letter-spacing:.01em}
.boli-card .card-loc{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--steel)}
.boli-card .card-loc .dot{color:var(--sand)}
.boli-card .card-desc{margin-top:1.25rem;font-size:14px;color:rgba(10,22,32,.75);line-height:1.5}
.boli-card .card-divider{margin-top:1.5rem;height:1px;background:rgba(0,27,42,.12)}
.boli-card .card-foot{margin-top:1rem;display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.22em}
.boli-card:hover .card-foot .view{color:var(--ocean)}

.boli-chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(0,27,42,.25);background:rgba(0,27,42,.06);color:var(--navy);padding:2px 10px;border-radius:9999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.18em}

/* Utilities */
.blueprint-grid{
  background-image:
    linear-gradient(to right, rgba(0,27,42,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,27,42,.07) 1px, transparent 1px);
  background-size:24px 24px;
}
.blueprint-grid-navy{
  background-image:
    linear-gradient(to right, rgba(244,241,234,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,241,234,.08) 1px, transparent 1px);
  background-size:32px 32px;
}
.section-rule{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.hairline{border-color:var(--hairline)}
.seal-watermark{position:absolute;pointer-events:none;opacity:.06;color:var(--paper)}

/* Hero */
.boli-hero{position:relative;background:var(--navy);color:var(--paper);overflow:hidden;min-height:90vh;display:flex;align-items:center}
.boli-hero .glow{position:absolute;left:50%;top:50%;width:820px;height:820px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side, rgba(203,164,110,.18), transparent 70%)}
.boli-hero h1{font-family:var(--font-condensed);font-size:clamp(72px,14vw,220px);line-height:.85;letter-spacing:.01em;margin:0;text-transform:uppercase;text-shadow:0 4px 40px rgba(0,0,0,.35)}
.boli-hero .top-rule{display:flex;justify-content:center;align-items:center;gap:1rem;margin-bottom:2.5rem}
.boli-hero .top-rule .line{display:block;width:56px;height:1px;background:var(--sand)}
.boli-hero .top-rule span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.32em;color:var(--sand)}
.boli-hero .built-on{font-family:var(--font-condensed);font-size:14px;text-transform:uppercase;letter-spacing:.5em;color:var(--sand);margin:0 0 .75rem}
.boli-hero .underline{margin:1.5rem auto 0;width:160px;height:2px;background:var(--sand)}
.boli-hero .tagline{margin-top:1.5rem;font-family:var(--font-condensed);font-size:28px;text-transform:uppercase;letter-spacing:.2em;color:var(--sand)}
.boli-hero .lead{margin:2.5rem auto 0;max-width:42rem;font-size:18px;line-height:1.6;color:rgba(244,241,234,.78)}
.boli-hero form{margin:2.5rem auto 0;display:flex;max-width:40rem;border:2px solid var(--sand);background:rgba(244,241,234,.96)}
.boli-hero form input{flex:1;height:56px;border:0;padding:0 20px;background:transparent;font-size:16px;color:var(--ink);outline:none}
.boli-hero form button{height:56px;padding:0 28px;background:var(--navy);color:var(--paper);border:0;font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:11px;cursor:pointer}
.boli-hero .actions{margin-top:1.5rem;display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.boli-hero .actions a{padding:.7rem 1.25rem;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;text-decoration:none}
.boli-hero .actions .primary{background:var(--sand);color:var(--navy)}
.boli-hero .actions .ghost{border:1px solid rgba(244,241,234,.4);color:var(--paper)}
.boli-hero .stats{margin:4rem auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:48rem;border-top:1px solid rgba(244,241,234,.18);border-bottom:1px solid rgba(244,241,234,.18);padding:1.5rem 0}
.boli-hero .stats .v{font-family:var(--font-condensed);font-size:36px;color:var(--sand);text-transform:uppercase}
.boli-hero .stats .l{margin-top:.25rem;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.28em;color:rgba(244,241,234,.6)}

/* CTA */
.boli-cta-section{position:relative;background:var(--navy);color:var(--paper);overflow:hidden}
.boli-cta-section .inner{position:relative;max-width:64rem;margin:0 auto;padding:7rem 1.5rem;text-align:center}
.boli-cta-section h2{font-family:var(--font-condensed);font-size:clamp(40px,7vw,80px);line-height:.95;text-transform:uppercase;letter-spacing:.01em}
.boli-cta-section h2 .accent{color:var(--sand)}
.boli-cta-section .lead{margin:2rem auto 0;max-width:38rem;font-size:18px;line-height:1.6;color:rgba(244,241,234,.8)}
.boli-cta-section .cta{display:inline-flex;align-items:center;gap:.75rem;margin-top:2.5rem;padding:1rem 2rem;background:var(--sand);color:var(--navy);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.24em;text-decoration:none}

/* Footer */
.boli-footer{position:relative;background:var(--navy);color:var(--paper);overflow:hidden}
.boli-footer .accent{height:2px;background:var(--sand)}
.boli-footer .grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:3rem;padding:5rem 1.5rem;max-width:80rem;margin:0 auto}
.boli-footer .brand{grid-column:span 5}
.boli-footer .col{grid-column:span 2}
.boli-footer h4{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.24em;color:var(--sand);margin:0 0 1.25rem}
.boli-footer ul{list-style:none;padding:0;margin:0}
.boli-footer ul li{margin-bottom:.75rem}
.boli-footer ul a{color:rgba(244,241,234,.75);text-decoration:none;font-size:14px}
.boli-footer ul a:hover{color:var(--sand)}
.boli-footer .legal{position:relative;border-top:1px solid rgba(244,241,234,.12);padding:1.5rem;text-align:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:rgba(244,241,234,.55)}
.boli-footer .tag{margin-top:2rem;font-family:var(--font-condensed);font-size:22px;text-transform:uppercase;letter-spacing:.06em;color:var(--sand)}

@media (max-width:780px){
  .boli-footer .grid{grid-template-columns:repeat(2,1fr)}
  .boli-footer .brand{grid-column:span 2}
  .boli-footer .col{grid-column:span 1}
}

/* ============================================================
   Identity Amplification Pass — depth grammar, restraint rules.
   Mirrors src/styles.css additions in the React app.
   ============================================================ */
:root{
  --shadow-plate:
    0 1px 0 0 rgba(0,27,42,.06),
    0 2px 4px -2px rgba(0,27,42,.14),
    0 18px 38px -22px rgba(0,27,42,.42);
  --shadow-stamp:
    inset 0 0 0 1px rgba(0,27,42,.20),
    0 1px 2px rgba(0,27,42,.18);
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --vignette-navy:radial-gradient(ellipse at center, transparent 0%, transparent 45%, rgba(0,0,0,.35) 100%);
  --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Depth utilities */
.surface-raised{
  background:#FBF9F4;
  border:1px solid rgba(0,27,42,.14);
  box-shadow:var(--shadow-plate);
  position:relative;
}
.surface-sunk{
  background:var(--stone);
  box-shadow:
    inset 0 1px 0 rgba(0,27,42,.12),
    inset 0 -1px 0 rgba(0,27,42,.08);
}
.field-navy{
  position:relative;
  background:var(--navy);
  color:var(--paper);
  isolation:isolate;
}
.field-navy::before{
  content:"";position:absolute;inset:0;
  background-image:var(--vignette-navy);
  pointer-events:none;z-index:0;
}
.field-navy::after{
  content:"";position:absolute;inset:0;
  background-image:var(--noise);
  background-size:160px 160px;
  opacity:.03;mix-blend-mode:overlay;
  pointer-events:none;z-index:0;
}
.field-navy > *{position:relative;z-index:1}

.edge-rule-top{
  border-top:1px solid rgba(0,27,42,.35);
  box-shadow:0 -3px 0 -1px var(--sand);
}
.edge-rule-bottom{
  border-bottom:1px solid rgba(0,27,42,.35);
  box-shadow:0 3px 0 -1px var(--sand);
}

/* Premium card pass */
.boli-card{ /* augment existing card */
  background:#FBF9F4;
  border:1px solid rgba(0,27,42,.14);
  box-shadow:var(--shadow-plate);
}
.boli-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--sand);transition:height .3s ease;
}
.boli-card:hover::before{height:3px}
.boli-card .card-name{font-size:28px}
.boli-card .card-human{margin-top:.4rem;font-style:italic;font-size:13px;color:rgba(10,22,32,.7)}

/* Civic header microtext */
.boli-microtext{
  display:none;
  border-bottom:1px solid var(--hairline);
  background:rgba(244,241,234,.6);
}
@media (min-width:768px){ .boli-microtext{display:block} }
.boli-microtext .row{
  max-width:80rem;margin:0 auto;padding:6px 1.5rem;
  display:flex;justify-content:space-between;
  font-family:var(--font-mono);font-size:9px;
  text-transform:uppercase;letter-spacing:.32em;color:var(--sand);
}

/* Town ticker */
.boli-town-ticker{
  border-top:1px solid rgba(244,241,234,.12);
  padding:1.25rem 1.5rem;text-align:center;
  font-family:var(--font-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.28em;
  color:rgba(244,241,234,.55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.boli-town-ticker .sep{color:var(--sand);margin:0 .75rem}

/* Civic plate footer rule */
.boli-civic-plate{height:2px;background:var(--sand)}

/* SealDivider */
.boli-seal-divider{display:flex;align-items:center;gap:1rem;max-width:48rem;margin:2.5rem auto;padding:0 1.5rem}
.boli-seal-divider .line{flex:1;height:1px;background:rgba(203,164,110,.6)}

/* Drag-and-drop logo upload */
.boli-dropzone{position:relative;border:1.5px dashed var(--rule);background:#FBF9F4;padding:1.75rem 1.25rem;text-align:center;transition:border-color .15s,background .15s;cursor:pointer}
.boli-dropzone[data-state="dragover"]{border-color:var(--sand);background:rgba(203,164,110,.08)}
.boli-dropzone[data-state="filled"]{border-style:solid;border-color:rgba(0,27,42,.35);background:var(--paper);text-align:left;padding:1rem}
.boli-dropzone.is-error{border-color:#b3261e}
.boli-dropzone-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.boli-dropzone-empty svg{color:var(--steel);margin-bottom:.5rem}
.boli-dropzone-title{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.boli-dropzone-title span{color:var(--ocean);text-decoration:underline;text-underline-offset:3px}
.boli-dropzone-meta{margin:.4rem 0 0;font-size:12px;color:var(--steel)}
.boli-dropzone-preview{display:flex;align-items:center;gap:1rem;position:relative;z-index:1}
.boli-dropzone-thumb{width:56px;height:56px;object-fit:cover;border:1px solid var(--rule);background:var(--stone)}
.boli-dropzone-info{display:flex;flex-direction:column;min-width:0}
.boli-dropzone-name{font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32ch}
.boli-dropzone-size{font-size:12px;color:var(--steel)}
.boli-dropzone-clear{margin-left:auto;background:transparent;border:1px solid var(--rule);width:28px;height:28px;font-size:18px;line-height:1;cursor:pointer;color:var(--steel);position:relative;z-index:2}
.boli-dropzone-clear:hover{color:#b3261e;border-color:#b3261e}