/* ==========================================================================
   NABOR — Navarre Area Board of REALTORS®
   Demo site design system
   Palette + type lifted from the association's own brand kit
   (extracted from navarrerealtors.org design data).
   ========================================================================== */

/* ---------- Fonts (real files from the NABOR site) ---------- */
@font-face{font-family:'Glacial Indifference';src:url('../fonts/ec26e7beaebbc19630f94cac9da4fc7a.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/622cf94615e69b95d8832e3a0e24ebd0.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/5d8a1c84ab97a44a1df6e539c0e283a1.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Literata';src:url('../fonts/5ca52e079b43273ba74c3a806bcdf749.woff') format('woff');font-weight:700;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* brand */
  --blue:#3572af;
  --blue-600:#2d6394;
  --navy:#1b4298;
  --navy-deep:#023392;
  --orange:#e75900;
  --orange-600:#c74c00;
  --green:#1e7245;

  /* surfaces + ink */
  --bg:#ffffff;
  --bg-tint:#f5f8fb;
  --bg-tint-2:#eef3f8;
  --ink:#292828;
  --ink-2:#444d53;
  --muted:#6b747b;
  --line:#dde5ec;
  --line-strong:#c6d3de;

  --band:#16324f;          /* deep band used for footer / feature strips */

  /* type */
  --display:'Glacial Indifference','Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Literata',Georgia,serif;

  /* metrics */
  --wrap:1180px;
  --gutter:clamp(1rem,4vw,2.5rem);
  --r:6px;
  --r-lg:12px;
  --shadow-1:0 1px 2px rgba(22,50,79,.06),0 2px 8px rgba(22,50,79,.05);
  --shadow-2:0 6px 24px rgba(22,50,79,.10);
  --t-fast:.16s ease;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 1rem/1.65 var(--body);
  text-wrap:pretty;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.12;margin:0 0 .5em;color:var(--navy-deep);text-wrap:balance}
h1{font-size:clamp(2rem,5vw,3.25rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
h4{font-size:1.05rem}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.6rem 1rem;box-shadow:var(--shadow-2)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Eyebrow / definition flourish (from NABOR's dictionary motif) ---------- */
.eyebrow{
  font:700 .72rem/1 var(--body);letter-spacing:.13em;text-transform:uppercase;
  color:var(--orange);margin:0 0 .8rem
}
.deftag{font-family:var(--serif);color:var(--navy);letter-spacing:.04em}
.rule{height:3px;width:56px;background:var(--orange);border:0;margin:1.1rem 0}

/* ---------- Header ---------- */
.topbar{background:var(--band);color:#dbe6f1;font-size:.8rem}
.topbar .wrap{display:flex;gap:1.25rem;align-items:center;justify-content:space-between;min-height:38px;flex-wrap:wrap}
.topbar a{color:#dbe6f1}
.topbar-links{display:flex;gap:1.25rem;flex-wrap:wrap}
.topbar-links a:hover{color:#fff}

.masthead{background:#fff;border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;gap:1.5rem;min-height:96px}
.brand{display:flex;align-items:center;gap:.9rem;flex:0 0 auto}
.brand img{width:172px;height:auto}
.brand-text{display:flex;flex-direction:column;border-left:1px solid var(--line);padding-left:.9rem}
.brand-text b{font-family:var(--display);font-weight:400;font-size:1.02rem;color:var(--navy-deep);letter-spacing:.01em}
.brand-text span{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.mast-actions{margin-left:auto;display:flex;gap:.6rem;align-items:center}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.15rem;border-radius:var(--r);border:1px solid transparent;
  font:700 .9rem/1 var(--body);cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
  min-height:44px
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-600)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-600)}
.btn-ghost{border-color:var(--line-strong);color:var(--navy);background:#fff}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-sm{padding:.5rem .8rem;font-size:.82rem;min-height:38px}

/* ---------- Primary nav ---------- */
.navbar{background:var(--blue);position:relative}
.navbar .wrap{display:flex;align-items:stretch;gap:.15rem;flex-wrap:wrap}
.navbar a{
  color:#fff;font:700 .875rem/1 var(--body);padding:1rem .85rem;display:block;
  border-bottom:3px solid transparent
}
.navbar a:hover,.navbar a[aria-current="page"]{background:rgba(0,0,0,.14);border-bottom-color:var(--orange);text-decoration:none}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--band);color:#fff;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,33,53,.94) 0%,rgba(11,33,53,.78) 46%,rgba(11,33,53,.35) 100%);
  pointer-events:none
}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hero .wrap{position:relative;z-index:1;padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.hero h1{color:#fff;max-width:19ch}
.hero p.lede{font-size:clamp(1.02rem,1.6vw,1.22rem);max-width:60ch;color:#e4edf6}
.hero .eyebrow{color:#ffb27f}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.6rem}

/* stat strip under hero */
.stats{background:var(--navy-deep);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0}
.stats div{padding:1.15rem 1.25rem;border-left:1px solid rgba(255,255,255,.16)}
.stats div:first-child{border-left:0;padding-left:0}
.stats b{display:block;font-family:var(--display);font-size:1.6rem;color:#fff}
.stats span{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#a9c2dc}

/* ---------- Quick actions ---------- */
.quick{background:var(--bg-tint);border-bottom:1px solid var(--line)}
.quick .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line)}
.quick a{
  background:#fff;padding:1.5rem 1.35rem;display:flex;flex-direction:column;gap:.35rem;
  transition:background var(--t-fast)
}
.quick a:hover{background:var(--bg-tint-2);text-decoration:none}
.quick strong{font-family:var(--display);font-weight:400;font-size:1.12rem;color:var(--navy-deep)}
.quick small{color:var(--muted);font-size:.85rem}
.quick .arrow{color:var(--orange);font-weight:700;margin-top:.5rem}

/* ---------- Sections ---------- */
section{padding:clamp(2.5rem,5vw,4rem) 0}
.sec-head{display:flex;align-items:flex-end;gap:1.5rem;justify-content:space-between;flex-wrap:wrap;margin-bottom:1.75rem}
.sec-head p{max-width:62ch;color:var(--ink-2);margin:0}
.band{background:var(--bg-tint)}
.band-2{background:var(--bg-tint-2)}
.band-dark{background:var(--band);color:#dde7f1}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark p{color:#c9d8e6}

/* 3-column feed (Events / Education / News) — the Tampa/Orlando pattern */
.feed{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.75rem}
.feed > div > h3{font-size:.78rem;font-family:var(--body);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--orange);margin-bottom:1rem}
.feed-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;background:var(--line)}
.feed-list li{background:#fff;padding:1rem 1.1rem}
.band .feed-list li{background:#fff}
.feed-list .when{font:700 .72rem/1 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:.35rem}
.feed-list .what{font-family:var(--display);font-size:1.03rem;color:var(--navy-deep);display:block}
.feed-list .meta{font-size:.82rem;color:var(--muted)}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:1.25rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;box-shadow:var(--shadow-1)}
.card h3{margin-bottom:.35rem}
.card p:last-child{margin-bottom:0}
.card .kicker{font:700 .72rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.6rem}

/* data table (fee schedule, board roster) */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:560px}
caption{text-align:left;padding:1rem 1.1rem;font:700 .78rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
th,td{padding:.7rem 1.1rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
thead th{background:var(--bg-tint-2);color:var(--navy-deep);font-weight:700;position:sticky;top:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafcfe}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* definition list for member types */
.defs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.defs > div{background:#fff;padding:1.25rem 1.4rem}
.defs dt{font-family:var(--display);font-size:1.1rem;color:var(--navy-deep);margin-bottom:.25rem}
.defs dd{margin:0;color:var(--ink-2);font-size:.93rem}
.defs .price{float:right;font:700 .95rem/1 var(--body);color:var(--orange)}

/* affiliate directory */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.25rem}
.chip{
  border:1px solid var(--line-strong);background:#fff;border-radius:999px;padding:.42rem .85rem;
  font:700 .8rem/1 var(--body);color:var(--ink-2);cursor:pointer;transition:all var(--t-fast);min-height:34px
}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.aff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1rem}
.aff{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem}
.aff .cat{font:700 .68rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.aff h3{font-size:1.06rem;margin:0}
.aff .who{font-size:.86rem;color:var(--muted)}
.aff .contact{font-size:.88rem;margin-top:.25rem}
.aff .contact a{display:block}
[hidden]{display:none!important}

/* documents / link lists */
.doclist{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.doclist li{background:#fff;padding:.85rem 1.1rem;display:flex;gap:1rem;align-items:baseline;justify-content:space-between}
.doclist .fmt{font:700 .68rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.doclist .pages{color:var(--muted);font-size:.82rem}

/* callout */
.callout{border-left:4px solid var(--orange);background:#fff7f2;padding:1.1rem 1.3rem;border-radius:0 var(--r) var(--r) 0}
.callout strong{color:var(--navy-deep)}
.note{border-left:4px solid var(--blue);background:#f2f7fc;padding:1.1rem 1.3rem;border-radius:0 var(--r) var(--r) 0}

/* sponsor tiers */
.tiers{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tier{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:1.5rem}
.tier h3{color:var(--orange);font-size:.8rem;font-family:var(--body);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.tier ul{list-style:none;margin:0;padding:0}
.tier li{padding:.55rem 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.tier li:last-child{border-bottom:0}

/* brand mark row (REALTOR® / NAR) */
.marks{display:flex;gap:2rem;align-items:center;flex-wrap:wrap}
.marks img{height:64px;width:auto}

/* breadcrumb */
.crumb{background:var(--bg-tint);border-bottom:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.crumb .wrap{padding-top:.7rem;padding-bottom:.7rem}

/* page header */
.page-head{background:var(--bg-tint-2);border-bottom:1px solid var(--line)}
.page-head .wrap{padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(2rem,4vw,3rem)}
.page-head p{max-width:66ch;color:var(--ink-2);font-size:1.05rem;margin-bottom:0}

/* ---------- Footer ---------- */
footer{background:var(--band);color:#c9d8e6;font-size:.9rem}
footer h4{color:#fff;font-family:var(--body);font-weight:700;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .9rem}
.foot-main{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2rem;padding:clamp(2.25rem,5vw,3.25rem) 0}
.foot-main a{color:#c9d8e6}
.foot-main a:hover{color:#fff}
.foot-main ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot-brand img{width:190px;background:#fff;padding:.6rem;border-radius:var(--r);margin-bottom:1rem}
.foot-contact{display:grid;gap:.4rem;margin-top:1rem}
.foot-bot{border-top:1px solid rgba(255,255,255,.14);padding:1.1rem 0;display:flex;gap:1.25rem;justify-content:space-between;flex-wrap:wrap;font-size:.8rem;color:#9db4cd}
.foot-bot a{color:#9db4cd}

@media (max-width:900px){
  .foot-main{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .foot-main{grid-template-columns:1fr}
  .brand img{width:140px}
  .brand-text{display:none}
  .navbar .wrap{overflow-x:auto;flex-wrap:nowrap}
}

/* motion discipline */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* print */
@media print{
  .topbar,.navbar,.mast-actions,.hero-actions,.filters{display:none}
  body{color:#000}
  a{color:#000}
}