/*
Theme Name: TREX Child
Theme URI: https://trex-ott.io
Description: Child theme of Blocksy for trex-ott.io / blog.trex-ott.io. Hosts the design tokens, component overrides, and rebuild-era CSS without modifying the parent.
Author: TREX TV
Author URI: https://trex-ott.io
Template: blocksy
Version: 0.2.1
Text Domain: trex-child
*/

/* ============================================================================
   TREX IPTV — Blog skin (blog.trex-ott.io)
   Cinematic dark / premium. Tokens come from assets/tokens.css.
   Goal: make the Blocksy blog visually match trex-ott.io.
   ============================================================================ */

html, body {
  background: var(--trex-bg) !important;
  color: var(--trex-text);
  font-family: var(--font-body);
}

body, .ct-container, #main-container, [data-prefix="single"] .entry-content,
.ct-sidebar, .entry-content {
  color: var(--trex-text);
}

a { color: var(--trex-accent-2); }
a:hover, a:focus { color: var(--trex-accent); }

/* --- Generic Blocksy surfaces → transparent over dark bg --- */
[data-prefix] .ct-container,
.ct-main-styles,
#main,
.site-main,
section,
.ct-content {
  background-color: transparent !important;
}

/* ----------------------------------------------------------------------------
   Blog archive / post grid — cards
   ---------------------------------------------------------------------------- */
.entries,
.ct-listing-loop {
  gap: var(--space-xl) !important;
}

article.post,
.entries > article,
.ct-listing-loop > article,
.entries .entry-card,
.ct-listing-loop .entry-card,
[data-prefix] .entry-card {
  /* Beat Blocksy's [data-prefix="blog"] .entry-card{background:#fff}
     (specificity 0,2,0) so the dark surface — and the theme's white
     card titles — stay readable on archive/blog listings. */
  background: var(--trex-surface) !important;
  border: 1px solid var(--trex-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
article.post:hover,
.entries > article:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: rgba(255, 184, 28, .35);
}
article.post .ct-image-container img,
.entries > article .ct-media-container img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.entry-card-inner,
article.post .entry-content,
article.post .ct-block { padding: var(--space-lg); }

/* Headings */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title {
  color: #fff !important;
  font-family: var(--font-display);
  line-height: var(--lh-tight);
}
.entry-title a { color: #fff !important; }
.entry-title a:hover { color: var(--trex-accent) !important; }

.entry-meta, .ct-meta-element, .post-meta, time {
  color: var(--trex-muted) !important;
  font-size: var(--fs-small);
}

/* Read-more / buttons */
.more-link, .wp-block-button__link, .ct-button, button.ct-button,
input[type="submit"], .read-more {
  background: var(--trex-accent) !important;
  color: #0A0E14 !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease) !important;
}
.more-link:hover, .wp-block-button__link:hover, .ct-button:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
  background: #FFC845 !important;
  box-shadow: 0 12px 28px rgba(255, 184, 28, .35) !important;
}

/* ----------------------------------------------------------------------------
   Single post — readable long-form on dark
   ---------------------------------------------------------------------------- */
.single .entry-content,
.page .entry-content {
  font-size: 1.075rem;
  line-height: var(--lh-body);
  color: var(--trex-text);
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.single .entry-content p,
.page .entry-content p,
.single .entry-content li {
  color: #cfd4dd;
  margin-bottom: 1.15rem;
}
.single .entry-content h2 {
  margin-top: 2.4rem;
  font-size: var(--fs-h2);
  border-left: 4px solid var(--trex-accent);
  padding-left: 14px;
}
.single .entry-content h3 {
  margin-top: 1.8rem;
  font-size: var(--fs-h3);
  color: var(--trex-accent) !important;
}
.single .entry-content a {
  color: var(--trex-accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.single .entry-content a:hover { color: var(--trex-accent); }
.single .entry-content img,
.entry-content figure img {
  border-radius: var(--r-md);
  max-width: 100%;
  height: auto;
}
.single .entry-content blockquote,
.entry-content .wp-block-quote {
  border-left: 4px solid var(--trex-accent-2);
  background: var(--trex-surface);
  padding: 18px 22px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: #e6e8eb;
  font-style: normal;
}
.entry-content ul, .entry-content ol { padding-left: 1.4rem; }
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: var(--trex-surface);
  border-radius: var(--r-md);
  overflow: hidden;
}
.entry-content th, .entry-content td {
  border: 1px solid var(--trex-border);
  padding: 12px 14px;
  text-align: left;
}
.entry-content th { background: var(--trex-elevated); color: #fff; }

/* Pull-out CTA box used inside posts */
.trex-post-cta {
  margin: 2.5rem 0;
  padding: 28px;
  background: linear-gradient(135deg, var(--trex-surface), var(--trex-elevated));
  border: 1px solid rgba(255, 184, 28, .25);
  border-radius: var(--r-lg);
  text-align: center;
  box-shadow: var(--shadow-glow);
}
.trex-post-cta h3 { margin: 0 0 .5rem; color: #fff !important; }
.trex-post-cta p { color: var(--trex-muted); margin: 0 0 1.2rem; }
.trex-post-cta .trex-post-cta__btn {
  display: inline-block;
  background: var(--trex-accent);
  color: #0A0E14 !important;
  font-weight: 700;
  text-decoration: none;
  padding: 13px 30px;
  border-radius: var(--r-pill);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.trex-post-cta .trex-post-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255, 184, 28, .4);
}

/* Page title / archive header band */
.page-header, .ct-page-title, .hero-section {
  background: linear-gradient(180deg, var(--trex-surface), transparent) !important;
  border-bottom: 1px solid var(--trex-border);
}

/* Inputs / search / comments */
input[type="text"], input[type="email"], input[type="search"],
input[type="url"], textarea, select {
  background: var(--trex-surface) !important;
  border: 1px solid var(--trex-border) !important;
  color: var(--trex-text) !important;
  border-radius: var(--r-sm) !important;
}
.comment-body, #comments { color: var(--trex-text); }

/* Pagination */
.ct-pagination a, .page-numbers {
  color: var(--trex-text);
  border-color: var(--trex-border) !important;
}
.ct-pagination .current, .page-numbers.current {
  background: var(--trex-accent) !important;
  color: #0A0E14 !important;
}

/* Hide Blocksy's default header — replaced by TREX Fancy Header (mu-plugin) */
header[data-id="header"],
.ct-header,
header.ct-header-wrapper { display: none !important; }