/*
Theme Name: Technerd Theme
Theme URI: https://technerd.com
Author: Technerd
Author URI: https://technerd.com
Description: A free community platform theme for trades and hands-on skills. Built for Technerd.com — dark theme, amber accents, full BuddyPress and bbPress support.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: technerd
*/

/* ─── CSS VARIABLES ──────────────────────────────────────── */
:root {
  --tn-bg:        #0c0c0c;
  --tn-surface:   #0f0f0f;
  --tn-border:    #1a1a1a;
  --tn-border2:   #141414;
  --tn-text:      #f0ece4;
  --tn-muted:     #888;
  --tn-dim:       #444;
  --tn-amber:     #e8943a;
  --tn-green:     #4adf8a;
  --tn-blue:      #4a9eff;
  --tn-red:       #df4a7a;
  --tn-gold:      #f5c842;
  --tn-font-body: Georgia, 'Palatino Linotype', serif;
  --tn-font-mono: 'Courier New', monospace;
}

/* ─── RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--tn-bg);
  color: var(--tn-text);
  font-family: var(--tn-font-body);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tn-amber); text-decoration: none; transition: opacity .15s; }
a:hover { opacity: .8; }
::selection { background: rgba(232,148,58,.25); color: var(--tn-text); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }

h1, h2, h3, h4, h5, h6 { font-family: var(--tn-font-body); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; color: var(--tn-text); margin: 0 0 .75rem; }
p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; }
code, pre { font-family: var(--tn-font-mono); font-size: .88em; }

/* ─── LAYOUT ──────────────────────────────────────────────── */
.tn-wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
#tn-main { min-height: 60vh; }

/* ─── SITE HEADER ────────────────────────────────────────── */
.tn-site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: #070707;
  border-bottom: 1px solid var(--tn-border);
}
.tn-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.tn-logo {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-weight: 900;
  font-size: 1.15rem;
  font-family: var(--tn-font-body);
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.tn-logo:hover { opacity: 1; }
.tn-logo .tn-logo-accent { color: var(--tn-amber); }
.tn-logo img { max-height: 34px; width: auto; }

.tn-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--tn-border);
  border-radius: 3px;
  color: var(--tn-muted);
  font-size: 1.1rem;
  padding: .35rem .6rem;
  cursor: pointer;
}

.tn-nav ul { list-style: none; display: flex; gap: .15rem; margin: 0; padding: 0; }
.tn-nav li { position: relative; }
.tn-nav a {
  display: block;
  padding: .45rem .8rem;
  color: var(--tn-muted);
  font-family: var(--tn-font-mono);
  font-size: .74rem;
  letter-spacing: .03em;
  border-radius: 3px;
  transition: all .15s;
}
.tn-nav a:hover { color: var(--tn-amber); background: rgba(232,148,58,.08); opacity: 1; }

/* Sub-menu support (dropdowns) */
.tn-nav ul ul {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  flex-direction: column;
  background: #0f0f0f;
  border: 1px solid var(--tn-border);
  border-radius: 6px;
  min-width: 180px;
  padding: .35rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.tn-nav li:hover > ul { display: flex; }
.tn-nav ul ul a { padding: .5rem .65rem; }

.tn-header-cta {
  flex-shrink: 0;
  padding: .5rem 1.1rem;
  background: var(--tn-amber);
  border: 1px solid var(--tn-amber);
  border-radius: 3px;
  color: #0c0c0c !important;
  font-family: var(--tn-font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  transition: background .15s;
}
.tn-header-cta:hover { background: #f5a84a; opacity: 1; }

/* ─── SITE FOOTER ────────────────────────────────────────── */
.tn-site-footer { border-top: 1px solid var(--tn-border); background: #070707; padding: 2.5rem 0 1.5rem; margin-top: 3rem; }
.tn-footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.tn-footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.5rem; }
.tn-footer-brand p { color: var(--tn-dim); font-size: .8rem; font-style: italic; margin: .5rem 0 0; max-width: 320px; }
.tn-footer-nav ul { list-style: none; display: flex; gap: 1.25rem; flex-wrap: wrap; margin: 0; padding: 0; }
.tn-footer-nav a { color: var(--tn-dim); font-size: .78rem; }
.tn-footer-nav a:hover { color: var(--tn-amber); }
.tn-footer-bottom { border-top: 1px solid var(--tn-border2); padding-top: 1rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.tn-footer-bottom span { color: #2a2a2a; font-family: var(--tn-font-mono); font-size: .62rem; letter-spacing: .04em; }
.tn-footer-bottom .tn-tagline { color: var(--tn-amber); font-style: italic; }

/* ─── BUTTONS ────────────────────────────────────────────── */
.tn-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .8rem 1.75rem;
  background: var(--tn-amber);
  border: 1px solid var(--tn-amber);
  border-radius: 3px;
  color: #0c0c0c !important;
  font-family: var(--tn-font-mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .15s;
}
.tn-btn:hover { background: #f5a84a; opacity: 1; }
.tn-btn--outline { background: transparent; color: var(--tn-amber) !important; }
.tn-btn--outline:hover { background: rgba(232,148,58,.1); }

/* ─── HOMEPAGE ───────────────────────────────────────────── */
.tn-hero { position: relative; overflow: hidden; padding: 4.5rem 1.5rem 3.5rem; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(232,148,58,.08) 0%, transparent 70%); }
.tn-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, #1a1a1a 1px, transparent 0); background-size: 28px 28px; opacity: .4; pointer-events: none; }
.tn-hero-inner { position: relative; max-width: 720px; margin: 0 auto; }
.tn-badge { display: inline-block; padding: .3rem .9rem; background: rgba(232,148,58,.1); border: 1px solid rgba(232,148,58,.25); border-radius: 20px; color: var(--tn-amber); font-family: var(--tn-font-mono); font-size: .65rem; letter-spacing: .14em; margin-bottom: 1.5rem; }
.tn-hero h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.08; margin: 0 0 .85rem; }
.tn-hero h1 span { color: var(--tn-amber); }
.tn-hero-sub { color: #666; font-size: 1rem; font-style: italic; max-width: 500px; margin: 0 auto .5rem; }
.tn-hero-desc { color: #444; font-size: .85rem; max-width: 480px; margin: 0 auto 2.25rem; }

.tn-stats { padding: 2rem 1.5rem; border-top: 1px solid var(--tn-border); border-bottom: 1px solid var(--tn-border); background: #0a0a0a; }
.tn-stats-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; text-align: center; }
.tn-stat-icon { font-size: 1.5rem; margin-bottom: .35rem; }
.tn-stat-num { color: var(--tn-amber); font-size: clamp(1.1rem,3vw,1.6rem); font-weight: 900; font-family: var(--tn-font-mono); letter-spacing: -.02em; }
.tn-stat-label { color: var(--tn-dim); font-size: .65rem; font-family: var(--tn-font-mono); letter-spacing: .1em; text-transform: uppercase; margin-top: .25rem; }

.tn-section { max-width: 960px; margin: 0 auto; padding: 3.5rem 1.5rem; }
.tn-section-label { text-align: center; color: var(--tn-amber); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; font-family: var(--tn-font-mono); margin: 0 0 .5rem; }
.tn-section-title { text-align: center; font-size: clamp(1.5rem,4vw,2rem); font-weight: 400; letter-spacing: -.02em; margin: 0 0 2rem; }

.tn-groups-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(255px,1fr)); gap: .65rem; }
.tn-group-card { display: block; padding: 1.15rem; background: var(--tn-surface); border: 1px solid var(--tn-border); border-radius: 6px; transition: border-color .2s, transform .2s; }
.tn-group-card:hover { transform: translateY(-2px); opacity: 1; }
.tn-group-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .45rem; }
.tn-group-icon { width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.tn-group-name { color: #d8d0c0; font-size: .86rem; font-weight: 600; }
.tn-group-members { color: var(--tn-dim); font-size: .62rem; font-family: var(--tn-font-mono); margin-top: .1rem; }
.tn-group-desc { color: var(--tn-muted); font-size: .76rem; line-height: 1.5; margin: 0; }
.tn-browse-all { text-align: center; margin-top: 1.75rem; }

.tn-features { border-top: 1px solid var(--tn-border); background: #080808; }
.tn-features-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 1rem; }
.tn-feature { padding: 1.35rem; background: var(--tn-surface); border: 1px solid var(--tn-border); border-radius: 6px; }
.tn-feature-icon { font-size: 1.5rem; margin-bottom: .6rem; }
.tn-feature-title { color: #d8d0c0; font-size: .92rem; font-weight: 600; margin-bottom: .35rem; }
.tn-feature-desc { color: var(--tn-muted); font-size: .8rem; line-height: 1.6; margin: 0; }

.tn-cta { padding: 3.5rem 1.5rem; text-align: center; border-top: 1px solid var(--tn-border); }
.tn-cta h2 { font-size: clamp(1.4rem,4vw,2rem); margin: 0 0 .5rem; }
.tn-cta p { color: var(--tn-muted); font-style: italic; margin: 0 0 1.5rem; }

/* ─── PAGE / POST CONTENT ────────────────────────────────── */
.tn-page-header { padding: 3rem 1.5rem 1.5rem; text-align: center; border-bottom: 1px solid var(--tn-border); }
.tn-page-header h1 { font-size: clamp(1.6rem,4vw,2.4rem); }
.tn-content { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.tn-content img { border-radius: 6px; margin: 1rem 0; }
.tn-content blockquote { border-left: 3px solid var(--tn-amber); padding-left: 1rem; color: var(--tn-muted); font-style: italic; margin: 1.25rem 0; }

/* ─── 404 ────────────────────────────────────────────────── */
.tn-404 { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 1.5rem; text-align: center; }
.tn-404-num { font-size: clamp(6rem,18vw,9rem); font-weight: 900; color: #111; font-family: var(--tn-font-mono); line-height: 1; letter-spacing: -.04em; }
.tn-404 h1 { font-size: clamp(1.4rem,4vw,2rem); margin: .75rem 0 .5rem; }
.tn-404 p { color: var(--tn-muted); font-style: italic; margin: 0 0 2rem; max-width: 400px; }
.tn-404-actions { display: flex; gap: .65rem; flex-wrap: wrap; justify-content: center; }

/* ─── BUDDYPRESS OVERRIDES ───────────────────────────────── */
#buddypress { font-family: var(--tn-font-body); color: var(--tn-text); max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem; }
#buddypress #activity-stream li.activity-item,
#buddypress ul.item-list li,
#buddypress #group-header,
#buddypress div.item-list-tabs ul {
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  border-radius: 6px;
}
#buddypress #activity-stream li.activity-item { margin-bottom: .65rem; padding: 1.1rem; }
#buddypress ul.item-list li { padding: 1rem; margin-bottom: .5rem; transition: border-color .15s; }
#buddypress ul.item-list li:hover { border-color: #2a2a2a; }
#buddypress #group-header { padding: 1.5rem; margin-bottom: 1.5rem; }
#buddypress #object-nav ul li a,
#buddypress #subnav ul li a,
#buddypress div.item-list-tabs ul li a {
  color: var(--tn-muted);
  font-family: var(--tn-font-mono);
  font-size: .75rem;
  background: transparent;
  border-bottom: 2px solid transparent;
}
#buddypress #object-nav ul li.selected a,
#buddypress #subnav ul li.selected a,
#buddypress div.item-list-tabs ul li.selected a {
  color: var(--tn-amber);
  border-color: var(--tn-amber);
  background: rgba(232,148,58,.08);
}
#buddypress ul.item-list li .item-title a { color: var(--tn-text); font-weight: 600; }
#buddypress a { color: var(--tn-amber); }
#buddypress input[type=text], #buddypress input[type=email], #buddypress input[type=password], #buddypress textarea, #buddypress select {
  background: #111; border: 1px solid #222; color: var(--tn-text); border-radius: 3px; padding: .65rem .85rem;
}
#buddypress .button, #buddypress a.button, #buddypress input[type=submit] {
  background: var(--tn-amber); border: 1px solid var(--tn-amber); color: #0c0c0c; border-radius: 3px;
  font-family: var(--tn-font-mono); font-size: .72rem; font-weight: 700; padding: .5rem 1.1rem;
}

/* ─── BBPRESS OVERRIDES ──────────────────────────────────── */
#bbpress-forums { font-family: var(--tn-font-body); color: var(--tn-text); max-width: 1000px; margin: 0 auto; padding: 1.5rem; }
#bbpress-forums .bbp-forum-title a, #bbpress-forums .bbp-topic-title a, #bbpress-forums .bbp-reply-title a { color: var(--tn-text); font-weight: 600; }
#bbpress-forums li.bbp-header { background: #080808; border: 1px solid var(--tn-border); color: var(--tn-dim); font-family: var(--tn-font-mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
#bbpress-forums ul.bbp-topics li, #bbpress-forums ul.bbp-forums li, #bbpress-forums ul.bbp-replies li { background: var(--tn-surface); border: 1px solid var(--tn-border); }
#bbpress-forums .bbp-reply-content.bbp-reply-accepted { background: rgba(74,223,138,.04); border-left: 3px solid var(--tn-green); padding-left: 1rem; }
#bbpress-forums #bbp_topic_title, #bbpress-forums textarea { background: #111; border: 1px solid #222; color: var(--tn-text); border-radius: 3px; }
#bbpress-forums button, #bbpress-forums input[type=submit] { background: var(--tn-amber); border: 1px solid var(--tn-amber); color: #0c0c0c; border-radius: 3px; font-family: var(--tn-font-mono); font-weight: 700; padding: .55rem 1.2rem; }

/* ─── SEARCH FORM (default WP search widget) ─────────────── */
.search-form { display: flex; }
.search-form input[type=search] { flex: 1; padding: .7rem 1rem; background: #111; border: 1px solid #222; color: var(--tn-text); border-radius: 3px 0 0 3px; }
.search-form input[type=submit] { padding: .7rem 1.2rem; background: var(--tn-amber); border: 1px solid var(--tn-amber); color: #0c0c0c; border-radius: 0 3px 3px 0; font-family: var(--tn-font-mono); font-weight: 700; cursor: pointer; }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 860px) { .tn-stats-grid { grid-template-columns: repeat(2,1fr); gap: 1.5rem; } }
@media (max-width: 780px) {
  .tn-nav-toggle { display: inline-flex; }
  .tn-nav { position: absolute; top: 58px; left: 0; right: 0; background: #0a0a0a; border-bottom: 1px solid var(--tn-border); display: none; }
  .tn-nav.tn-nav-open { display: block; }
  .tn-nav ul { flex-direction: column; padding: .5rem; }
  .tn-nav ul ul { position: static; border: none; background: transparent; padding-left: 1rem; }
  .tn-header-cta { display: none; }
}
@media (max-width: 600px) { .tn-groups-grid { grid-template-columns: 1fr; } }