/* ============================================================
   TNE.ai — light skin for inner pages (theme + Bootstrap 3)
   Loaded after site.css; replaces the role of style.default.css
   so blog / FAQ / content / list pages render in the light system.
   ============================================================ */

/* ---- Page shell ---- */
#all { position: relative; z-index: 0; }
#content { padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 8vw, 96px); position: relative; }
#content .container { max-width: var(--maxw); }

/* ---- Headings / text inside content ---- */
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
  font-family: var(--font-display); color: var(--text); letter-spacing: -0.02em; line-height: 1.15;
}
#content h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 .6em; }
#content h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 1.4em 0 .5em; }
#content h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin: 1.3em 0 .5em; }
#content p, #content li { color: var(--dim); }
#content a { color: color-mix(in oklab, var(--c2) 78%, white); transition: color .2s; }
#content a:hover { color: var(--text); }
#content strong, #content b { color: var(--text); }
#content hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); margin: 2em 0; }
#content img { border-radius: var(--radius); }
#content blockquote {
  border-left: 2px solid color-mix(in oklab, var(--c1) 60%, transparent);
  background: var(--surface); color: var(--text);
  padding: 14px 20px; margin: 1.4em 0; border-radius: 0 10px 10px 0;
}
#content code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--surface-3); color: color-mix(in oklab, var(--c2) 70%, white);
  padding: 2px 6px; border-radius: 6px;
}
#content pre {
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; overflow: auto;
}
#content pre code { background: none; color: var(--text); padding: 0; }
#content table, #content .table {
  width: 100%; border-collapse: collapse; color: var(--dim); margin: 1.4em 0;
}
#content table th, #content table td, #content .table th, #content .table td {
  border: 1px solid var(--border); padding: 10px 14px; text-align: left;
}
#content table th, #content .table th { color: var(--text); background: var(--surface-2); font-family: var(--font-display); }

/* ---- Section intro (list landing) ---- */
.section-intro h1 { font-family: var(--font-display); }

/* ---- Section-listing cards (replaces light inline styles) ---- */
.section-card {
  display: flex; gap: 1.5em; margin-bottom: 1.25em; padding: 1.5em;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(17,26,46,0.04), 0 16px 40px -30px rgba(17,26,46,0.5);
  align-items: flex-start; transition: border-color .3s, transform .3s, box-shadow .3s;
}
.section-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--c1) 30%, var(--border)); }
.section-card h3 { margin-top: 0; }
.section-card h3 a { color: var(--text); }
.section-card p { color: var(--dim); }
.section-card .thumb { flex: 0 0 180px; }
.section-card .thumb img { width: 180px; height: 120px; object-fit: cover; border-radius: 8px; }
.section-card .thumb .gfx { width: 180px; height: 120px; border-radius: 10px; overflow: hidden; }
.section-card .thumb .gfx > i { font-size: 34px; }
@media (max-width: 560px){ .section-card .thumb, .section-card .thumb .gfx { width: 100%; } }

/* ---- Buttons (theme classes mapped to new pills) ---- */
.btn-template-main, .btn-template-primary, .btn-template-transparent-primary,
.btn-template-transparent-black, .btn-light, .read-more .btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  padding: 12px 22px; border-radius: 999px; line-height: 1;
  border: 1px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s;
}
.btn-template-main, .btn-template-primary {
  color: #ffffff !important; background: var(--grad);
  box-shadow: 0 8px 30px -8px color-mix(in oklab, var(--c1) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-template-main:hover, .btn-template-primary:hover {
  color: #ffffff !important; transform: translateY(-2px);
  box-shadow: 0 14px 44px -8px color-mix(in oklab, var(--c1) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-template-transparent-black, .btn-template-transparent-primary, .btn-light {
  color: var(--text) !important; background: var(--surface-2); border-color: var(--border-strong); backdrop-filter: blur(8px);
}
.btn-template-transparent-black:hover, .btn-template-transparent-primary:hover, .btn-light:hover {
  color: var(--text) !important; transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--c2) 60%, var(--border-strong)); background: var(--surface-3);
}
.btn-sm { padding: 9px 16px; font-size: 0.86rem; }

/* ---- Blog list ---- */
section.post { padding: 0 0 32px; margin-bottom: 32px; border-bottom: 1px solid var(--border); }
section.post .image img { border-radius: var(--radius); border: 1px solid var(--border); }
.post .author-category, .post .date-comments, .post .author-category a, .post .date-comments a { color: var(--faint); font-size: 0.85rem; }
.post .author-category a:hover, .post .date-comments a:hover { color: var(--dim); }
.post h2 a { color: var(--text); font-family: var(--font-display); }
.post h2 a:hover { color: color-mix(in oklab, var(--c2) 70%, white); }
.post .intro { color: var(--dim); }

/* ---- Single post meta ---- */
#blog-post .text-muted, #post-content .text-muted { color: var(--faint) !important; }
#post-content ul, #post-content ol { padding-left: 1.3em; }

/* ---- Breadcrumbs ---- */
.breadcrumb { background: transparent; padding: 14px 0; margin: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; }
.breadcrumb > li { display: inline; color: var(--faint); }
.breadcrumb > li a { color: var(--dim); }
.breadcrumb > li a:hover { color: var(--text); }
.breadcrumb > .active { color: var(--faint); }
.breadcrumb > li + li::before { color: var(--faint); content: "/\00a0"; }

/* ---- Pager / pagination ---- */
.pager { margin: 40px 0 0; padding: 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.pager li > a, .pagination > li > a {
  display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text);
}
.pager li > a:hover, .pagination > li > a:hover { background: var(--surface-3); border-color: color-mix(in oklab, var(--c2) 55%, var(--border-strong)); }
.pager .disabled > a { opacity: .4; }
.pagination { display: inline-flex; gap: 8px; padding: 0; }
.pagination > .active > a, .pagination > .active > span { background: var(--grad); color: #ffffff; border-color: transparent; }

/* ---- Sidebar widgets ---- */
#sidebar .widget, .sidebar .widget { margin-bottom: 28px; }
#sidebar h4, #sidebar h5, .sidebar h4, .sidebar h5 { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; color: var(--faint); margin-bottom: 14px; }
#sidebar ul, .sidebar ul { list-style: none; padding: 0; display: grid; gap: 9px; }
#sidebar ul a, .sidebar ul a { color: var(--dim); }
#sidebar ul a:hover, .sidebar ul a:hover { color: var(--text); }
#sidebar .form-control, #sidebar input[type="text"] { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); border-radius: 10px; }

/* ---- Forms (contact, search) ---- */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], textarea, select, .form-control {
  background: #ffffff; border: 1px solid var(--border-strong); color: var(--text);
  border-radius: 12px; padding: 12px 16px; font-family: var(--font-body);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus, .form-control:focus {
  outline: none; border-color: color-mix(in oklab, var(--c2) 60%, var(--border-strong)); box-shadow: none;
}
label { color: var(--dim); }

/* ---- Misc theme blocks that may appear in content ---- */
.bar { background: transparent; color: var(--text); padding: clamp(40px,6vw,72px) 0; }
.bar.color-white, .bar .color-white { color: var(--text); }
.box, .box-simple { color: var(--text); }
.box-simple .icon i, .box .icon i { color: color-mix(in oklab, var(--c2) 80%, white); }
.text-muted { color: var(--faint) !important; }
.alert { border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); }