/* ============================================
   NOCIV.CO — shared styles
   Two surfaces used across the site:
   - .light  : off-white / grey manifesto pages (About, Clothing)
   - .dark   : black pages (Community, Tech, Zines)
   ============================================ */

@font-face {
  font-family: 'Nociv Marker';
  src: local('Marker Felt'), local('Comic Sans MS');
}

:root {
  --paper: #efefef;
  --paper-dim: #d8d8d8;
  --ink: #1a1a1a;
  --grey: #8a8a8a;
  --grey-dark: #444;
  --black: #0a0a0a;
  --white: #f2f2f2;
  --red: #d94f3d;
  --gold: #d1a13e;
  --green: #3c6b4a;
  --max: 900px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--paper);
  color: var(--ink);
}

body.dark {
  background: var(--black);
  color: var(--white);
}

a { color: inherit; text-decoration: none; }

/* ---------- HEADER & BRANDING ---------- */
.nociv-header {
  text-align: center;
  padding: 0;
  position: relative;
}

.nociv-header .torn-header-img {
  width: 100%;
  display: block;
}

/* ============================================
   FLAT MANILA FOLDER NAVIGATION (NOCIV STYLE)
   ============================================ */

/* Main tab row container */
nav.tabs {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  padding: 24px 16px 0 16px;
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
  z-index: 10;
  font-family: Arial, Helvetica, sans-serif;
}

/* Individual Folder Tab shape */
nav.tabs a.img-tab {
  position: relative;
  background: #e5cb9b; /* Standard Manila folder base */
  color: #1a1a1a !important;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85rem;
  text-align: center;
  padding: 12px 18px 10px 18px;
  border: 1.5px solid #a88e63;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-shadow: none;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 120px;
  min-width: 100px;
  text-decoration: none;
  transform: skewX(8deg);
}

/* Counter-skew inner text/images */
nav.tabs a.img-tab > span,
nav.tabs a.img-tab img {
  transform: skewX(-8deg);
  display: inline-block;
  max-width: 100%;
  max-height: 32px;
}

/* Hover state */
nav.tabs a.img-tab:hover {
  background: #f0dbb3;
}

/* Selected Tab: Melts seamlessly into the subnav panel */
nav.tabs a.img-tab.active {
  background: #cbb183; /* Darker pressed tab tone */
  color: #000000 !important;
  border-color: #987d52;
  border-bottom: 2px solid #cbb183; /* Matches tab fill to seamlessly fuse down */
  margin-bottom: -2px;
  z-index: 12;
  font-weight: 900;
}

/* ---------- SUB-NAV: Manila Folder Body Panel ---------- */
.subnav {
  position: relative;
  z-index: 5;
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding: 12px 16px;
  background: #e5cb9b; /* Manila folder interior base */
  border: 1.5px solid #a88e63;
  margin-top: -2px; /* Pulls up under active top tab */
  box-shadow: none;
  min-height: 52px;
  align-items: center;
}

/* Dark mode folder overrides */
body.dark nav.tabs a.img-tab {
  background: #2d2820;
  color: #e5cb9b !important;
  border-color: #443c30;
}
body.dark nav.tabs a.img-tab.active {
  background: #3e382e;
  border-color: #584f40;
  border-bottom: 2px solid #3e382e;
}
body.dark .subnav {
  background: #2d2820;
  border-color: #443c30;
}

/* Sub-Tab buttons */
.subnav button {
  flex: 0 0 auto;
  background: #f0dbb3; /* Slightly lighter inner folder card */
  color: #1a1a1a;
  border: 1.5px solid #a88e63;
  border-radius: 2px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 16px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.subnav button:hover {
  background: #ffffff;
  color: #000000;
}

/* Active Sub-Tab */
.subnav button.active {
  background: var(--red);
  color: #ffffff;
  border: 1.5px solid #b83c2c;
  font-weight: 900;
}

.subpanel { display: none; }
.subpanel.show, .subpanel.active { display: block; }

/* Community's Stall Wall / Directory / Share panels */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- NESTED SUB-TABS (Directory: Verified / Opportunity Board) ---------- */
.dir-subnav {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  max-width: 420px; margin: 0 auto 24px;
}
.dir-subnav button {
  background: none; color: #999; border: 1px solid #333;
  font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 8px 14px; cursor: pointer; transition: all 0.2s ease;
}
.dir-subnav button:hover { color: #fff; border-color: #666; }
.dir-subnav button.active { background: var(--red); color: #fff; border-color: var(--red); font-weight: 700; }

.dir-subpanel { display: none; }
.dir-subpanel.active { display: block; }

/* ---------- SHARED CARD / FORM STYLES ---------- */
.mark-card {
  max-width: 460px; margin: 0 auto; background: #141414;
  border: 2px solid var(--red); padding: 28px 24px; text-align: center;
  color: var(--white); border-radius: 6px;
}
.mark-card h3 { letter-spacing: 2px; margin: 0 0 18px; color: var(--white); }
.mark-card select, .mark-card textarea, .mark-card input[type="text"], .mark-card input[type="date"] {
  width: 100%; background: #0d0d0d; color: #ddd; border: 1px solid #333;
  padding: 12px; font-size: 1rem; margin-bottom: 12px; box-sizing: border-box;
}
.mark-card textarea { resize: vertical; }
.mark-card label { display: block; text-align: left; font-size: 0.8rem; opacity: .7; margin-bottom: 6px; color: var(--white); }

.cta-btn {
  width: 100%; background: var(--red); color: #fff; border: none; padding: 14px;
  font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9rem; cursor: pointer;
  transition: background 0.15s ease;
}
.cta-btn:hover { background: #b83c2c; }
.confirm-msg { display: none; color: #6fbf8f; font-weight: 700; margin-top: 14px; }

/* ---------- SHARED PILLS ---------- */
.cat-pill-row, .filter-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 640px; margin: 0 auto 24px; }
.cat-pill, .filter-pill { border: 1px solid #333; padding: 7px 14px; font-size: 0.8rem; cursor: pointer; background: #111; color: #aaa; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.cat-pill.active, .filter-pill.active { background: #fff; color: #111; border-color: #fff; font-weight: 700; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.cat-wall { background: #d94f3d; }
.cat-workshop { background: #4a7fd9; }
.cat-share { background: #3c9d5c; }
.cat-call { background: var(--gold); }
.cat-space { background: #a35fd9; }
.cat-meetup { background: #e08a3e; }
.cat-clothing { background: #d94f3d; }
.cat-tech { background: #4a7fd9; }
.cat-books { background: var(--gold); }
.cat-art { background: #3c9d5c; }

/* ---------- SHARED CARDS ---------- */
.board-list { max-width: 600px; margin: 0 auto; }
.board-card { border: 1px solid #262626; border-left: 4px solid #666; padding: 16px; margin-bottom: 12px; background: #141414; text-align: left; color: #ddd; border-radius: 4px; }
.board-card.wall { border-left-color: #d94f3d; }
.board-card.workshop { border-left-color: #4a7fd9; }
.board-card.share { border-left-color: #3c9d5c; }
.board-card.call { border-left-color: var(--gold); }
.board-card.space { border-left-color: #a35fd9; }
.board-card.meetup { border-left-color: #e08a3e; }
.board-card.clothing { border-left-color: #d94f3d; }
.board-card.tech { border-left-color: #4a7fd9; }
.board-card.books { border-left-color: var(--gold); }
.board-card.art { border-left-color: #3c9d5c; }
.board-card .board-card-title { font-weight: 900; font-size: 1rem; }
.board-card .board-card-meta { font-size: 0.75rem; opacity: .6; margin: 4px 0 8px; }
.board-card .board-card-desc { font-size: 0.9rem; opacity: .9; white-space: pre-wrap; }
.board-card a.board-card-link { color: var(--gold); font-size: 0.8rem; display: inline-block; margin-top: 8px; }

.interest-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.interest-btn { background: #1c1c1c; color: #ddd; border: 1px solid #444; padding: 6px 12px; font-size: 0.75rem; cursor: pointer; letter-spacing: 0.03em; }
.interest-btn.clicked { background: var(--gold); color: #1a1a1a; border-color: var(--gold); cursor: default; font-weight: bold; }
.interest-count { font-size: 0.75rem; opacity: .6; }

.directory-grid { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 600px; margin: 0 auto; }
@media (min-width: 560px) { .directory-grid { grid-template-columns: 1fr 1fr; } }
.directory-card { border: 1px solid #262626; background: #141414; padding: 18px; text-align: left; color: #ddd; border-radius: 4px; transition: border-color 0.15s ease; }
.directory-card:hover { border-color: var(--gold); }
.directory-card .dc-name { font-weight: 900; font-size: 1.05rem; color: var(--gold); }
.directory-card .dc-neighborhood { font-size: 0.75rem; opacity: .6; margin-bottom: 8px; }
.directory-card .dc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.directory-card .dc-tag { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 7px; background: #222; color: #aaa; border: 1px solid #333; }
.directory-card .dc-desc { font-size: 0.85rem; opacity: .85; margin-bottom: 10px; }
.directory-card a.dc-link { color: var(--gold); font-size: 0.8rem; text-decoration: underline; }
.directory-empty { opacity: .5; font-style: italic; font-size: 0.85rem; text-align: center; grid-column: 1 / -1; }

/* ---------- SHARED SECTION LABELS / BANNER ART ---------- */
.board-title { letter-spacing: 3px; font-size: 1.3rem; margin-bottom: 6px; }
.board-sub { opacity: .65; font-size: 0.85rem; max-width: 460px; margin: 0 auto 24px; }
.section-divider { border: 0; border-top: 1px solid #333; max-width: 500px; margin: 40px auto; }
.subsection-label { letter-spacing: 2px; font-size: 1.05rem; font-weight: 900; color: var(--gold); margin: 10px 0 6px; text-align: center; }
.top-banner-art { width: 100%; max-width: 500px; display: block; margin: 0 auto; }
.top-icon-art { width: 100%; max-width: 220px; display: block; margin: 0 auto; }

/* ---------- COMING SOON ---------- */
.coming-soon {
  opacity: .6;
  font-style: italic;
  padding: 24px 20px;
  text-align: center;
  border: 1px dashed #999;
  max-width: 500px;
  margin: 0 auto;
}
body.dark .coming-soon { border-color: #444; }

/* ---------- REDIRECT CARD ---------- */
.redirect-card {
  max-width: 420px; margin: 30px auto; text-align: center;
  border: 1px dashed #999; padding: 30px 20px; border-radius: 6px;
}
body.dark .redirect-card { border-color: #444; }
.redirect-card p { opacity: .75; font-size: 0.95rem; margin: 16px 0 18px; }
.redirect-card a.cta-btn { display: block; text-decoration: none; }

/* ---------- TORN PAPER DIVIDER ---------- */
.torn {
  height: 40px;
  width: 100%;
  background: var(--paper);
  clip-path: polygon(
    0% 40%, 3% 20%, 6% 45%, 10% 15%, 14% 50%, 18% 25%, 22% 55%,
    26% 20%, 30% 48%, 34% 18%, 38% 52%, 42% 22%, 46% 45%, 50% 15%,
    54% 50%, 58% 20%, 62% 55%, 66% 25%, 70% 48%, 74% 18%, 78% 52%,
    82% 22%, 86% 45%, 90% 15%, 94% 50%, 97% 25%, 100% 40%, 100% 100%, 0% 100%
  );
}
.torn.dark-to-light { background: var(--paper); }
.torn.light-to-dark { background: var(--black); }

/* ---------- SECTION WRAP ---------- */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 20px;
}

.eyebrow {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  padding: 6px 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  text-transform: uppercase;
  margin-bottom: 16px;
}
body.dark .eyebrow { background: var(--white); color: var(--black); }

.checklist { list-style: none; padding: 0; margin: 30px 0; }
.checklist li { font-size: 1.1rem; margin-bottom: 18px; padding-left: 34px; position: relative; }
.checklist li::before {
  content: '✓'; position: absolute; left: 0; color: var(--red); font-weight: 900; font-size: 1.3rem;
}

footer.nociv-footer {
  text-align: center;
  padding: 40px 20px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--grey);
  text-transform: uppercase;
}

/* ---------- POP-UP SHOP CARD ---------- */
.popup-card-img {
  width: 100%;
  max-width: 360px;
  display: block;
  margin: 0 auto;
  cursor: pointer;
}
.join-btn-img {
  width: 100%;
  max-width: 260px;
  display: block;
  margin: 16px auto 0;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease;
}
.join-btn-img:hover { transform: scale(1.03); }
.join-btn-img.clicked { filter: grayscale(1) brightness(1.3); transform: scale(0.97); }