/*
Theme Name: Tripti Replica (v3.5)
Theme URI: https://example.com/tripti-replica
Author: ChatGPT
Description: Tripti-style clone with 3-col layout, hover highlight, cleaned excerpts, clickable ellipsis, PATRIOT footer, dark/light mode toggle, and page template support.
Version: 3.5.0
Text Domain: tripti-replica
*/

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* default = DARK MODE colors */
body {
  margin:0;
  background:#0a0a0a;
  color:#e7e7e7;
  font-family:'Barlow Condensed', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:0.2px;
}
a { color:#e7e7e7; text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; height:auto; display:block; }

.container { width:min(1100px,92%); margin:0 auto; }

/* ── HEADER ─────────────────────────────────────────── */
.site-header {
  background:#0a0a0a;
  border-bottom:4px solid #1a1a1a;
  position:sticky;
  top:0;
  z-index:10;
}
.brand-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:16px 0;
}
.site-title a {
  font-family:'Bebas Neue','Anton','Impact',sans-serif;
  font-size:42px;
  letter-spacing:1px;
  line-height:1;
  display:inline-block;
  color:#e7e7e7;
}
.site-tagline {
  opacity:.7;
  font-size:14px;
  margin-top:2px;
  text-transform:uppercase;
  color:#e7e7e7;
}

.mainnav {
  display:flex;
  gap:18px;
  align-items:center;
  font-weight:700;
  text-transform:uppercase;
}
.mainnav a {
  font-size:18px;
  opacity:.96;
  color:#e7e7e7;
}
/* bump ABOUT specifically (it's the direct .upper link, not the menu <li>) */
.mainnav > a.upper {
  font-size:21px;
  color:#e7e7e7;
}

.header-search { margin-left:6px; }
.header-search input {
  background:#111;
  border:1px solid #2a2a2a;
  color:#eee;
  padding:6px 8px;
  font-size:14px;
}

/* Dark mode toggle button */
.mode-toggle {
  background:#111;
  border:1px solid #2a2a2a;
  color:#eee;
  font-size:12px;
  line-height:1;
  padding:6px 8px;
  cursor:pointer;
  text-transform:uppercase;
  font-family:'Barlow Condensed', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.mode-toggle:hover {
  background:#fff;
  color:#000;
}

.sep {
  display:inline-block;
  width:2px;
  height:12px;
  background:#2a2a2a;
}

/* ── HOME GRID LAYOUT ───────────────────────────────── */
.home-grid {
  display:grid;
  grid-template-columns:1fr 1fr 0.9fr; /* two post columns + sidebar */
  gap:40px;
  padding:28px 0 50px;
}
.post-list {
  grid-column:1 / span 2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 40px;
}
.post-card {
  padding-bottom:14px;
  border-bottom:1px solid #1f1f1f;
}
.post-card h2 {
  font-family:'Bebas Neue','Anton','Impact',sans-serif;
  font-weight:400;
  font-size:28px;
  line-height:1.05;
  letter-spacing:.2px;
  margin:0 0 8px;
  color:#e7e7e7;
}
.post-card h2 a {
  text-decoration:underline;
  transition:all .18s ease-in-out;
  color:#e7e7e7;
}
.post-card h2 a:hover {
  background-color:#ffffff;
  color:#0a0a0a;
  text-decoration:none;
  padding:2px 3px;
  border-radius:2px;
}

.entry-excerpt {
  color:#cfcfcf;
  font-size:16px;
  line-height:1.45;
  max-width:62ch;
}
.entry-excerpt .excerpt-more {
  color:#cfcfcf;
  text-decoration:none;
  font-weight:400;
}
.entry-excerpt .excerpt-more:hover {
  color:#ffffff;
  text-decoration:none;
}

.meta {
  font-size:13px;
  color:#9a9a9a;
  margin-top:8px;
}

/* ── SIDEBAR / COLUMN 3 ─────────────────────────────── */
.sidebar .widget { margin-bottom:32px; }

.widget-title {
  font-family:'Bebas Neue','Anton','Impact',sans-serif;
  font-size:18px;
  letter-spacing:.3px;
  text-transform:uppercase;
  margin-bottom:12px;
  color:#e7e7e7;
}

/* RECENT POSTS widget */
.widget_recent_entries ul {
  list-style:none;
  padding:0;
  margin:0;
}
.widget_recent_entries li {
  margin:0 0 14px 0;
}
.widget_recent_entries a {
  text-decoration:underline;
  font-size:16px;
  font-weight:400;
  line-height:1.2;
  position:relative;
  transition:all .18s ease-in-out;
  color:#e7e7e7;
}
.widget_recent_entries .post-date {
  display:block;
  font-size:12px;
  color:#9a9a9a;
  margin-top:2px;
  text-decoration:none;
}
.widget_recent_entries > .post-date,
.widget_recent_entries > span.post-date {
  display:none;
}

/* Hover invert effect in sidebar titles */
.widget_recent_entries a:hover {
  background-color:#ffffff;
  color:#0a0a0a;
  text-decoration:none;
  padding:2px 3px;
  border-radius:2px;
}

/* fallback Recent Posts (if no widget active) */
.sidebar ul { list-style:none; margin:0; padding:0; }
.sidebar li + li { margin-top:14px; }
.sidebar .recent-item a {
  text-decoration:underline;
  font-size:16px;
  font-weight:400;
  position:relative;
  transition:all .18s ease-in-out;
  color:#e7e7e7;
}
.sidebar .recent-item .date {
  display:block;
  font-size:12px;
  color:#9a9a9a;
  margin-top:2px;
  text-decoration:none;
}
.sidebar .recent-item a:hover {
  background-color:#ffffff;
  color:#0a0a0a;
  text-decoration:none;
  padding:2px 3px;
  border-radius:2px;
}

/* Sidebar search box */
.searchform input[type="text"] {
  width:100%;
  background:#111;
  border:1px solid #2a2a2a;
  color:#eee;
  padding:8px;
  font-size:14px;
}

/* ── SINGLE POST PAGE ───────────────────────────────── */
.single .entry-header {
  padding-top:16px;
  margin-bottom:12px;
}
.single .entry-title {
  font-family:'Bebas Neue','Anton','Impact',sans-serif;
  font-size:42px;
  line-height:1.05;
  margin:0 0 8px;
  color:#e7e7e7;
}
.single .entry-content {
  font-size:18px;
  line-height:1.6;
  color:#ddd;
}
.single .entry-content h2,
.single .entry-content h3 {
  font-family:'Bebas Neue','Anton','Impact',sans-serif;
  line-height:1.1;
  margin-top:28px;
  color:#e7e7e7;
}
.meta-row {
  display:flex;
  align-items:center;
  gap:16px;
  color:#9a9a9a;
  font-size:14px;
}

.notice {
  background:#111;
  border-left:4px solid #e7e7e7;
  padding:14px 16px;
  margin:18px 0;
  color:#d8d8d8;
}

/* ── STATIC PAGE (About, etc.) ─────────────────────── */
.page .entry-header {
  padding-top:16px;
  margin-bottom:12px;
}
.page .entry-title {
  font-family:'Bebas Neue','Anton','Impact',sans-serif;
  font-size:42px;
  line-height:1.05;
  margin:0 0 8px;
  color:inherit;
}
.page .entry-content {
  font-size:18px;
  line-height:1.6;
  color:inherit;
}
.page .entry-content h2,
.page .entry-content h3 {
  font-family:'Bebas Neue','Anton','Impact',sans-serif;
  line-height:1.1;
  margin-top:28px;
  color:inherit;
}

/* pagination under the grid / prev link under single */
.pagination {
  display:flex;
  gap:8px;
  margin:24px 0;
}
.page-numbers {
  padding:6px 10px;
  border:1px solid #333;
  color:#e7e7e7;
}
.page-numbers.current {
  background:#e7e7e7;
  color:#0a0a0a;
  border-color:#e7e7e7;
}

/* ── FOOTER BANNER ("PATRIOT") ──────────────────────── */
.footer-banner {
  background:#000;
  border-top:4px solid #1a1a1a;
  margin-top:40px;
  color:#fff;
}
.footer-big {
  font-family:'Bebas Neue','Anton','Impact',sans-serif !important;
  font-size:240px;
  line-height:0.8;
  text-align:center;
  letter-spacing:2px;
  margin:0;
  padding:40px 0 12px;
  color:#fff;
}
.footer-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  padding:10px 0 40px;
  color:#fff;
}
.footer-col h4 {
  font-family:'Bebas Neue','Anton','Impact',sans-serif;
  font-size:26px;
  margin:0 0 6px;
  color:#fff;
}
.footer-col p {
  margin:0;
  color:#cfcfcf;
}
.site-footer .credits {
  border-top:1px solid #1f1f1f;
  padding:16px 0;
  color:#9a9a9a;
  font-size:13px;
  text-align:center;
  background:#000;
}

/* ── RESPONSIVE ────────────────────────────────────── */
@media (max-width:1100px) {
  .footer-big { font-size:200px; }
}
@media (max-width:900px) {
  .home-grid {
    grid-template-columns:1fr;
    gap:24px;
  }
  .post-list {
    grid-template-columns:1fr;
  }
  .footer-big { font-size:120px; }
  .footer-grid { grid-template-columns:1fr; }
  .brand-row { flex-wrap:wrap; }
}

/* ───────────── LIGHT THEME OVERRIDES ─────────────
   Apply when <body> has class "theme-light".
   Goal: mimic original light Tripti look with black text on white.
--------------------------------------------------- */

body.theme-light {
  background:#ffffff;
  color:#000000;
}

body.theme-light a {
  color:#000000;
}

body.theme-light .site-header {
  background:#ffffff;
  border-bottom:4px solid #000000;
}

body.theme-light .site-title a,
body.theme-light .site-tagline,
body.theme-light .mainnav a,
body.theme-light .mainnav > a.upper {
  color:#000000;
  opacity:1;
}
body.theme-light .site-tagline {
  opacity:1;
  color:#000000;
}

body.theme-light .sep {
  background:#000000;
}

body.theme-light .header-search input {
  background:#ffffff;
  border:1px solid #000000;
  color:#000000;
}

body.theme-light .mode-toggle {
  background:#ffffff;
  border:1px solid #000000;
  color:#000000;
}
body.theme-light .mode-toggle:hover {
  background:#000000;
  color:#ffffff;
}

/* post cards & text */
body.theme-light .post-card {
  border-bottom:1px solid #000000;
}
body.theme-light .post-card h2,
body.theme-light .post-card h2 a {
  color:#000000;
}
body.theme-light .entry-excerpt {
  color:#000000;
}
body.theme-light .entry-excerpt .excerpt-more {
  color:#000000;
}
body.theme-light .meta {
  color:#000000;
}

/* recent posts sidebar */
body.theme-light .widget-title {
  color:#000000;
}
body.theme-light .widget_recent_entries a,
body.theme-light .sidebar .recent-item a {
  color:#000000;
  text-decoration:underline;
}
body.theme-light .widget_recent_entries .post-date,
body.theme-light .sidebar .recent-item .date {
  color:#000000;
}

/* hover invert should flip for light mode: black pill w/ white text */
body.theme-light .post-card h2 a:hover,
body.theme-light .widget_recent_entries a:hover,
body.theme-light .sidebar .recent-item a:hover {
  background-color:#000000;
  color:#ffffff;
  text-decoration:none;
  padding:2px 3px;
  border-radius:2px;
}

/* sidebar search box */
body.theme-light .searchform input[type="text"] {
  background:#ffffff;
  border:1px solid #000000;
  color:#000000;
}

/* single post & static page content */
body.theme-light .single .entry-title,
body.theme-light .single .entry-content,
body.theme-light .single .entry-content h2,
body.theme-light .single .entry-content h3,
body.theme-light .notice,
body.theme-light .meta-row,
body.theme-light .page .entry-title,
body.theme-light .page .entry-content,
body.theme-light .page .entry-content h2,
body.theme-light .page .entry-content h3 {
  color:#000000;
}
body.theme-light .notice {
  background:#ffffff;
  border-left:4px solid #000000;
}

/* pagination */
body.theme-light .page-numbers {
  border:1px solid #000000;
  color:#000000;
}
body.theme-light .page-numbers.current {
  background:#000000;
  color:#ffffff;
  border-color:#000000;
}

/* footer stays dark/white just like Tripti, so NO override */