/* =============================================================
   TruthSearch.news — Subtheme CSS (inner pages only)
   Front page has its own inline template styles.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --ts-navy:    #0b1a2e;
  --ts-navy2:   #132340;
  --ts-gold:    #c8a84b;
  --ts-gold-lt: #e0c06a;
  --ts-white:   #f8f9fa;
  --ts-light:   #eef2f7;
  --ts-text:    #1a1f2e;
  --ts-muted:   #6b7280;
  --ts-border:  #dde2ea;
  --ts-card:    #ffffff;
  --ts-link:    #1a3a6e;
  --ts-radius:  6px;
  --ts-shadow:  0 2px 12px rgba(0,0,0,0.09);
  --ts-shadow2: 0 6px 28px rgba(0,0,0,0.16);
  --ts-head:    'Playfair Display', Georgia, serif;
  --ts-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ts-max:     1100px;
}

/* ── Base ────────────────────────────────────────────────── */
body { font-family: var(--ts-body); color: var(--ts-text); background: var(--ts-light); }
*, *::before, *::after { box-sizing: border-box; }

h1,h2,h3,h4 { font-family: var(--ts-head); color: var(--ts-navy); line-height: 1.25; margin: 0 0 0.6em; }
h1 { font-size: clamp(1.7rem,3vw,2.6rem); }
h2 { font-size: clamp(1.3rem,2.2vw,1.9rem); }
h3 { font-size: 1.2rem; }
a  { color: var(--ts-link); text-decoration: none; transition: color .2s; }
a:hover { color: var(--ts-gold); }
img { max-width:100%; height:auto; display:block; }
p { margin: 0 0 1em; }

/* ── Page wrapper ────────────────────────────────────────── */
.page-wrapper { background: var(--ts-light) !important; }

/* ── Sticky header ───────────────────────────────────────── */
#header,
#header.w3-theme-l4 {
  background: var(--ts-navy) !important;
  border-bottom: 3px solid var(--ts-gold) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.45) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 900 !important;
  padding: 0 !important;
}

#header-inner {
  max-width: var(--ts-max) !important;
  margin: 0 auto !important;
  padding: 14px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#header .site-name a,
#header .site-name {
  font-family: var(--ts-head) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: var(--ts-white) !important;
  text-shadow: 0 0 30px rgba(200,168,75,0.35) !important;
}

#header .site-name a:hover { color: var(--ts-gold) !important; }
#header .site-slogan { font-size: 11px; color: rgba(200,168,75,0.7) !important; letter-spacing:.15em; text-transform:uppercase; }

#header img { max-height: 52px !important; width: auto !important; }

/* ── Nav bar ─────────────────────────────────────────────── */
#main-navigation-h,
#main-navigation-h.w3-theme {
  background: var(--ts-navy2) !important;
  border-bottom: 1px solid rgba(200,168,75,0.2) !important;
  padding: 0 !important;
}

#main-navigation-inner-h {
  max-width: var(--ts-max) !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
}

#main-navigation-h nav ul,
#main-navigation-h .menu {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#main-navigation-h nav ul li a,
#main-navigation-h .menu li a {
  display: block !important;
  padding: 13px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: rgba(248,249,250,0.82) !important;
  border-bottom: 3px solid transparent !important;
  transition: all .2s !important;
}

#main-navigation-h nav ul li a:hover,
#main-navigation-h .menu li.is-active > a {
  color: var(--ts-gold) !important;
  border-bottom-color: var(--ts-gold) !important;
}

/* ── Page title ──────────────────────────────────────────── */
#page-title,
#page-title.w3-theme-d5 {
  background: var(--ts-navy) !important;
  border-bottom: 3px solid var(--ts-gold) !important;
  padding: 30px 28px !important;
}

#page-title-inner {
  max-width: var(--ts-max) !important;
  margin: 0 auto !important;
}

#page-title h1,
#page-title .page-title {
  color: var(--ts-white) !important;
  margin: 0 !important;
}

/* ── Main content ────────────────────────────────────────── */
#main-container,
#main-container.w3-theme-l5 { background: var(--ts-light) !important; padding: 40px 0 !important; }

#main-container-inner {
  max-width: var(--ts-max) !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  display: flex !important;
  gap: 32px !important;
  align-items: flex-start !important;
}

/* Article teaser cards */
.node--view-mode-teaser,
article.node--teaser {
  background: var(--ts-card) !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: var(--ts-radius) !important;
  box-shadow: var(--ts-shadow) !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
  transition: box-shadow .25s, transform .25s !important;
  display: flex !important;
}

.node--view-mode-teaser:hover { box-shadow: var(--ts-shadow2) !important; transform: translateY(-2px) !important; }

.node--view-mode-teaser .field--name-field-image { flex: 0 0 200px !important; overflow: hidden !important; }
.node--view-mode-teaser .field--name-field-image img { width:100% !important; height:145px !important; object-fit:cover !important; transition: transform .35s !important; }
.node--view-mode-teaser:hover .field--name-field-image img { transform: scale(1.05) !important; }

.node--view-mode-teaser .node__content,
.node--view-mode-teaser > .node__content { padding: 20px 24px !important; flex: 1 !important; }

.node--view-mode-teaser h2 { font-size: 1.15rem !important; margin-bottom: 8px !important; }
.node--view-mode-teaser h2 a { color: var(--ts-navy) !important; }
.node--view-mode-teaser h2 a:hover { color: var(--ts-gold) !important; }

.node--view-mode-teaser .node__meta,
.node--view-mode-teaser .submitted { font-size: 12px !important; color: var(--ts-muted) !important; margin-bottom: 8px !important; }

.node--view-mode-teaser .field--name-body {
  font-size: 0.9rem !important; color: #4a5568 !important; line-height: 1.6 !important;
  display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
}

/* Full node page */
.node--view-mode-full {
  background: var(--ts-card) !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: var(--ts-radius) !important;
  padding: 40px 48px !important;
  box-shadow: var(--ts-shadow) !important;
}

.node--view-mode-full h1 { font-size: clamp(1.7rem,2.8vw,2.5rem) !important; margin-bottom: 16px !important; }
.node--view-mode-full .field--name-body { font-size: 1.05rem !important; line-height: 1.85 !important; color: #2d3748 !important; }

/* ── Sidebars ────────────────────────────────────────────── */
.w3-sidebar-first > div,
.w3-sidebar-second > div { background: transparent !important; }

.w3-sidebar-first .block,
.w3-sidebar-second .block {
  background: var(--ts-card) !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: var(--ts-radius) !important;
  padding: 20px 22px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--ts-shadow) !important;
}

.block-title, h2.block-title {
  font-family: var(--ts-head) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--ts-navy) !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--ts-gold) !important;
  margin-bottom: 14px !important;
}

/* ── Top / Bottom containers ─────────────────────────────── */
#top-container,
#top-container.w3-theme-l4 { background: var(--ts-light) !important; padding: 36px 28px !important; }

#top-container-inner {
  max-width: var(--ts-max) !important;
  margin: 0 auto !important;
  display: flex !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.top-box { flex: 1 1 260px !important; }
.top-box > div {
  background: var(--ts-card) !important;
  border: 1px solid var(--ts-border) !important;
  border-radius: var(--ts-radius) !important;
  box-shadow: var(--ts-shadow) !important;
  padding: 24px 26px !important;
  height: 100% !important;
  transition: box-shadow .25s, transform .25s !important;
}
.top-box > div:hover { box-shadow: var(--ts-shadow2) !important; transform: translateY(-3px) !important; }

/* ── Footer ──────────────────────────────────────────────── */
#footer-container,
#footer-container.w3-theme-d3 {
  background: var(--ts-navy2) !important;
  padding: 48px 28px 32px !important;
  border-top: 3px solid var(--ts-gold) !important;
}

#footer-container-inner {
  max-width: var(--ts-max) !important;
  margin: 0 auto !important;
  display: flex !important;
  gap: 40px !important;
  flex-wrap: wrap !important;
}

.footer-box > div { background: transparent !important; border: none !important; padding: 0 !important; }
.footer-box .block-title { color: var(--ts-gold) !important; border-bottom-color: rgba(200,168,75,0.3) !important; }
.footer-box p, .footer-box a { color: rgba(248,249,250,0.65) !important; font-size: 0.9rem !important; }
.footer-box a:hover { color: var(--ts-gold) !important; }

#footer-menu,
#footer-menu.w3-theme-d4 { background: var(--ts-navy) !important; padding: 14px 28px !important; border-top: 1px solid rgba(200,168,75,0.15) !important; }

#footer-menu-inner {
  max-width: var(--ts-max) !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

#footer-menu nav ul li a,
#footer-menu a { color: rgba(200,168,75,0.7) !important; font-size: 11px !important; letter-spacing: .08em !important; text-transform: uppercase !important; padding: 6px 14px !important; }
#footer-menu a:hover { color: var(--ts-gold) !important; }

#copyright,
#copyright.w3-theme-d5 { background: #060d1a !important; padding: 12px 28px !important; }

#copyright-inner {
  max-width: var(--ts-max) !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#copyright p { color: rgba(248,249,250,0.35) !important; font-size: 12px !important; margin: 0 !important; }

/* ── Search results page (/truth) ────────────────────────── */
.gsc-control-cse { background: transparent !important; border: none !important; }
.gsc-input-box { border-radius: var(--ts-radius) !important; border: 1px solid var(--ts-border) !important; }
.gsc-search-button-v2 { background: var(--ts-gold) !important; border: none !important; border-radius: 0 var(--ts-radius) var(--ts-radius) 0 !important; padding: 10px 18px !important; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.w3-breadcrumb { background: transparent !important; padding: 10px 0 !important; margin-bottom: 16px !important; }
nav.breadcrumb ol { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ts-muted); list-style: none; padding: 0; margin: 0; }
nav.breadcrumb ol li + li::before { content: "›"; margin-right: 6px; color: var(--ts-muted); }
nav.breadcrumb a { color: var(--ts-muted); }
nav.breadcrumb a:hover { color: var(--ts-gold); }

/* ── Pager ───────────────────────────────────────────────── */
.pager__items { display: flex; justify-content: center; gap: 6px; list-style: none; padding: 28px 0 0; margin: 0; flex-wrap: wrap; }
.pager__item a, .pager__item.is-active span {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid var(--ts-border); border-radius: var(--ts-radius);
  font-size: 13px; font-weight: 500; background: var(--ts-card); color: var(--ts-navy);
  text-decoration: none; transition: all .2s;
}
.pager__item a:hover { background: var(--ts-navy); color: var(--ts-white); border-color: var(--ts-navy); }
.pager__item.is-active span { background: var(--ts-gold); border-color: var(--ts-gold); color: var(--ts-navy); font-weight: 700; }

/* ── Forms ───────────────────────────────────────────────── */
.form-text, .form-email, textarea, select {
  width: 100%; padding: 10px 14px; border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius); font-family: var(--ts-body); font-size: 0.95rem;
  color: var(--ts-text); background: #fff; outline: none; transition: border-color .2s, box-shadow .2s;
}
.form-text:focus, .form-email:focus, textarea:focus {
  border-color: var(--ts-gold); box-shadow: 0 0 0 3px rgba(200,168,75,0.15);
}
.button, input[type="submit"], .form-submit {
  background: var(--ts-navy); color: var(--ts-white); border: none;
  border-radius: var(--ts-radius); padding: 11px 22px;
  font-family: var(--ts-body); font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: background .2s;
}
.button:hover, input[type="submit"]:hover { background: var(--ts-gold); color: var(--ts-navy); }

/* ── Messages ────────────────────────────────────────────── */
.messages--status { background: #ecfdf5; border-left: 4px solid #10b981; color: #065f46; padding: 14px 18px; border-radius: 0 var(--ts-radius) var(--ts-radius) 0; margin-bottom: 20px; }
.messages--warning { background: #fffbeb; border-left: 4px solid var(--ts-gold); color: #92400e; padding: 14px 18px; border-radius: 0 var(--ts-radius) var(--ts-radius) 0; margin-bottom: 20px; }
.messages--error { background: #fef2f2; border-left: 4px solid #c0392b; color: #991b1b; padding: 14px 18px; border-radius: 0 var(--ts-radius) var(--ts-radius) 0; margin-bottom: 20px; }

/* ── W3CSS colour overrides (neutralise) ─────────────────── */
.w3-theme,.w3-theme-l1,.w3-theme-l2,.w3-theme-l3,.w3-theme-l4,.w3-theme-l5,
.w3-theme-d1,.w3-theme-d2,.w3-theme-d3,.w3-theme-d4,.w3-theme-d5 {
  background-color: transparent !important; color: inherit !important;
}
#header.w3-theme,#header .w3-theme,#main-navigation-h.w3-theme { background-color: var(--ts-navy) !important; }

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:900px) {
  #main-container-inner { flex-direction: column !important; padding: 0 20px !important; }
  .node--view-mode-teaser { flex-direction: column !important; }
  .node--view-mode-teaser .field--name-field-image { flex: none !important; width: 100% !important; }
  .node--view-mode-teaser .field--name-field-image img { height: 200px !important; }
  #top-container-inner, #footer-container-inner { flex-direction: column !important; }
  .node--view-mode-full { padding: 24px 20px !important; }
}

@media(max-width:600px) {
  #header-inner { padding: 12px 16px !important; }
  #page-title { padding: 22px 16px !important; }
}