/*
 Theme Name:   TauntSwap
 Theme URI:    https://tauntswap.com
 Description:  TauntSwap Child Theme for Kadence
 Author:       TauntSwap
 Template:     kadence
 Version:      1.0.0
*/

/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  --ts-bg:       #0F0F13;
  --ts-surface:  #16161C;
  --ts-border:   #22222E;
  --ts-blue:     #4F8EF7;
  --ts-cyan:     #00D4FF;
  --ts-gray:     #8892A4;
  --ts-text:     #E8EAF0;
  --ts-muted:    #555B6E;
}

/* ============================================
   GOOGLE FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ============================================
   GLOBAL BASE
   ============================================ */
body {
  background-color: var(--ts-bg) !important;
  color: var(--ts-text) !important;
  font-family: 'Inter', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.post-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  color: var(--ts-text) !important;
  letter-spacing: 0.01em;
}

p, li, td, input, textarea {
  font-family: 'Inter', sans-serif !important;
  color: var(--ts-gray) !important;
}

a {
  color: var(--ts-text) !important;
  text-decoration: none !important;
  transition: color 0.15s;
}

a:hover {
  color: var(--ts-cyan) !important;
}

/* ============================================
   HEADER / NAV
   ============================================ */
.site-header,
#masthead,
.kadence-sticky-header {
  background-color: rgba(15, 15, 19, 0.95) !important;
  border-bottom: 1px solid var(--ts-border) !important;
  backdrop-filter: blur(8px);
}

/* ============================================
   LOGO — Taunt(white) Swap(cyan)
   Uses gradient text trick, no JavaScript needed
   ============================================ */
.site-title a,
.site-branding .site-title a,
.site-branding a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: transparent !important;
  background: linear-gradient(90deg, #E8EAF0 55%, #00D4FF 55%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.site-title,
.site-branding .site-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 26px !important;
}

/* Primary nav links */
.main-navigation a,
.nav-primary a,
#site-navigation a {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ts-gray) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.main-navigation a:hover,
.nav-primary a:hover,
#site-navigation a:hover {
  color: var(--ts-text) !important;
}

/* Dropdown menus */
.main-navigation .sub-menu,
.nav-drop-wrap .dropdown-nav-wrap {
  background-color: var(--ts-surface) !important;
  border: 1px solid var(--ts-border) !important;
}

/* ============================================
   CONTENT AREA
   ============================================ */
.site-main,
.content-area,
main#primary {
  background-color: var(--ts-bg) !important;
}

/* ============================================
   CARDS & POST ENTRIES
   ============================================ */
.entry-card,
.kadence-post-loop-wrap article,
article.post,
.wp-block-kadence-posts .kadence-post-loop article {
  background-color: var(--ts-surface) !important;
  border: none !important;
  border-radius: 0 !important;
  transition: background 0.15s !important;
}

.entry-card:hover,
.kadence-post-loop-wrap article:hover,
article.post:hover {
  background-color: #1a1a22 !important;
}

/* Featured/lead post — cyan left border signature element */
.kadence-post-loop-wrap article:first-child,
.featured-post,
.post-featured {
  border-left: 3px solid var(--ts-cyan) !important;
}

.entry-title a,
.post-title a {
  color: var(--ts-text) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
}

.entry-title a:hover,
.post-title a:hover {
  color: var(--ts-cyan) !important;
}

/* Post meta (date, author, read time) */
.entry-meta,
.entry-meta span,
.entry-meta a,
.post-meta {
  font-size: 12px !important;
  color: var(--ts-muted) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Category labels / eyebrows */
.entry-categories,
.cat-links,
.post-categories a,
.kadence-post-loop-wrap .entry-taxonomies a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ts-blue) !important;
}

/* Post excerpt */
.entry-summary,
.entry-content p {
  color: var(--ts-gray) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* ============================================
   SIDEBAR
   ============================================ */
.widget-area,
#secondary {
  background-color: var(--ts-bg) !important;
}

.widget {
  background-color: var(--ts-surface) !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: 0 !important;
  padding: 20px !important;
  margin-bottom: 2px !important;
}

.widget-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ts-gray) !important;
  border-bottom: 1px solid var(--ts-border) !important;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
}

/* ============================================
   SINGLE POST PAGE
   ============================================ */
.single .entry-content,
.page .entry-content {
  color: var(--ts-gray) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  max-width: 720px;
}

.single .entry-content h2,
.single .entry-content h3 {
  color: var(--ts-text) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  margin-top: 2em !important;
}

.single .entry-content a {
  color: var(--ts-blue) !important;
  border-bottom: 1px solid rgba(79, 142, 247, 0.3);
}

.single .entry-content a:hover {
  color: var(--ts-cyan) !important;
  border-bottom-color: var(--ts-cyan);
}

blockquote {
  border-left: 3px solid var(--ts-cyan) !important;
  background: var(--ts-surface) !important;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
  color: var(--ts-text) !important;
  font-style: normal !important;
}

/* ============================================
   DIVIDERS
   ============================================ */
hr,
.wp-block-separator {
  border-color: var(--ts-border) !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.wp-block-button__link,
.button,
.btn,
input[type="submit"] {
  background-color: var(--ts-blue) !important;
  color: #fff !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 10px 20px !important;
  transition: background 0.15s !important;
}

.wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover {
  background-color: var(--ts-cyan) !important;
  color: #0F0F13 !important;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer,
#colophon {
  background-color: var(--ts-bg) !important;
  border-top: 1px solid var(--ts-border) !important;
  color: var(--ts-muted) !important;
}

.site-footer a,
#colophon a {
  color: var(--ts-gray) !important;
}

.site-footer a:hover,
#colophon a:hover {
  color: var(--ts-cyan) !important;
}

/* ============================================
   SEARCH
   ============================================ */
.search-form input[type="search"] {
  background-color: var(--ts-surface) !important;
  border: 1px solid var(--ts-border) !important;
  color: var(--ts-text) !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
}

.search-form input[type="search"]:focus {
  border-color: var(--ts-blue) !important;
  outline: none !important;
}

/* ============================================
   COMMENTS
   ============================================ */
.comment-list .comment-body {
  background-color: var(--ts-surface) !important;
  border: 1px solid var(--ts-border) !important;
  padding: 16px !important;
  margin-bottom: 2px !important;
}

.comment-author .fn {
  color: var(--ts-text) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
}

.comment-metadata a {
  color: var(--ts-muted) !important;
  font-size: 12px !important;
}

.comment-content p {
  color: var(--ts-gray) !important;
}

textarea#comment,
input#author,
input#email,
input#url {
  background-color: var(--ts-surface) !important;
  border: 1px solid var(--ts-border) !important;
  color: var(--ts-text) !important;
  border-radius: 0 !important;
}