/*
Theme Name: SuaraLutim Red
Theme URI: https://suaralutim.local
Author: DaSCeo
Description: Portal berita lokal SuaraLutim dengan warna dominan merah.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: suaralutim-red
*/

:root {
  --sl-red: #d71920;
  --sl-red-dark: #8b0000;
  --sl-black: #111111;
  --sl-muted: #666666;
  --sl-bg: #f5f5f5;
  --sl-white: #ffffff;
}

body {
  margin: 0;
  background: var(--sl-bg);
  color: var(--sl-black);
  font-family: Arial, Helvetica, sans-serif;
}

a { color: var(--sl-red); text-decoration: none; }
a:hover { color: var(--sl-red-dark); }

.sl-topbar {
  background: var(--sl-red-dark);
  color: #fff;
  font-size: 13px;
  padding: 8px 0;
}

.sl-container {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.sl-header {
  background: #fff;
  border-bottom: 4px solid var(--sl-red);
}

.sl-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 0 8px;
}

.sl-logo-link {
  display: inline-flex;
  align-items: center;
}

.sl-logo-img {
  display: block;
  width: min(215px, 55vw);
  height: auto;
}

.sl-tagline {
  color: var(--sl-muted);
  margin-top: 4px;
  font-weight: 700;
  font-size: 14px;
}

.sl-nav {
  background: var(--sl-red);
  color: #fff;
}

.sl-nav ul {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 12px 0;
}

.sl-nav a { color: #fff; font-weight: 700; }

.sl-breaking {
  background: #fff;
  border-left: 8px solid var(--sl-red);
  margin: 18px 0;
  padding: 12px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.sl-breaking strong {
  color: var(--sl-red);
  margin-right: 10px;
}

.sl-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}

.sl-card {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(0,0,0,.07);
}

.sl-section-title {
  border-bottom: 3px solid var(--sl-red);
  padding-bottom: 10px;
  margin-top: 0;
}

.sl-hero-title {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.08;
  margin: 0 0 12px;
}

.sl-meta {
  color: var(--sl-muted);
  font-size: 14px;
  margin-bottom: 16px;
}

.sl-category {
  display: inline-block;
  background: var(--sl-red);
  color: #fff;
  padding: 5px 9px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.sl-list { display: grid; gap: 14px; }
.sl-list article { border-bottom: 1px solid #eee; padding-bottom: 12px; }
.sl-list h3 { margin: 0 0 6px; font-size: 18px; }

.sl-footer {
  margin-top: 40px;
  background: #111;
  color: #fff;
  padding: 28px 0;
}

.sl-footer a { color: #fff; }

@media (max-width: 800px) {
  .sl-grid { grid-template-columns: 1fr; }
  .sl-nav ul { gap: 12px; font-size: 14px; }
}

/* Single article */
.sl-article { padding: 26px; }
.sl-article-title { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.12; margin: 0 0 12px; }
.sl-article-hero { margin: 0 0 20px; }
.sl-article-hero img { width: 100%; height: auto; border-radius: 10px; display: block; }
.sl-article-hero figcaption { color: #666; font-size: 12.5px; margin-top: 7px; line-height: 1.5; }
.sl-article-body { font-size: 17.5px; line-height: 1.78; }
.sl-article-body h2 { font-size: 25px; margin: 30px 0 12px; border-left: 5px solid #d71920; padding-left: 12px; line-height: 1.25; }
.sl-article-body h3 { font-size: 20px; margin: 24px 0 10px; }
.sl-article-body p { margin: 0 0 17px; }
.sl-article-body ul, .sl-article-body ol { margin: 0 0 18px 22px; padding: 0; }
.sl-article-body li { margin-bottom: 9px; }
.sl-article-body a { text-decoration: underline; }
.sl-article-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15.5px; }
.sl-article-body th, .sl-article-body td { border: 1px solid #ddd; padding: 9px 11px; text-align: left; }
.sl-article-body th { background: #fafafa; }
.sl-article-summary { background: #fdf5f5; border-left: 5px solid #d71920; padding: 16px 18px; border-radius: 8px; margin: 0 0 24px; }
.sl-article-summary h2 { border: 0; padding: 0; font-size: 19px; margin: 0 0 10px; }
.sl-article-summary ul { margin: 0 0 0 20px; }
.sl-article-tags { margin-top: 24px; font-size: 14px; color: #666; }
.sl-author-box { margin-top: 26px; padding: 18px; background: #fafafa; border-radius: 10px; border-top: 3px solid #d71920; }
.sl-author-name { font-weight: 800; margin-bottom: 6px; }
.sl-author-box p { margin: 0; color: #444; font-size: 15px; line-height: 1.65; }
.sl-archive-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 20px; }
.sl-archive-item { border-bottom: 1px solid #eee; padding-bottom: 20px; }
.sl-archive-item h2 { font-size: 21px; margin: 8px 0 6px; line-height: 1.3; }
.sl-archive-thumb img { width: 100%; height: auto; border-radius: 10px; display: block; }
.sl-archive-item p { color: #444; line-height: 1.65; }
@media (max-width: 800px) {
  .sl-archive-grid { grid-template-columns: 1fr; }
  .sl-article { padding: 18px; }
  .sl-article-body { font-size: 16.5px; }
}
/* SL-LOGO-OVERRIDE */
.sl-logo { padding: 12px 0; }
.sl-logo-img { width: min(240px, 62vw); }
.sl-tagline { display: none !important; }

/* SL-SHARE v2 */
.sl-share { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 6px 0 20px; padding: 13px 0; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; }
.sl-share-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: #6b6b6b; margin-right: 3px; }
.sl-share-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; font-family: inherit; color: #fff; border: 0; border-radius: 999px; padding: 9px 15px; cursor: pointer; text-decoration: none; line-height: 1; }
.sl-share-btn svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.sl-share-btn:hover { opacity: .87; color: #fff; }
.sl-share-copy { background: #ececec; color: #222; }
.sl-share-copy:hover { color: #222; }
.sl-share-wa { background: #25d366; }
.sl-share-ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.sl-share-li { background: #0a66c2; }
.sl-share-x { background: #111111; }
.sl-share-th { background: #000000; }
.sl-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); background: #16213e; color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 13.5px; line-height: 1.45; max-width: min(520px, 90vw); box-shadow: 0 8px 26px rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; z-index: 99999; }
.sl-toast.sl-on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 620px) {
  .sl-share { gap: 7px; padding: 11px 0; }
  .sl-share-label { width: 100%; margin-bottom: 3px; }
  .sl-share-btn { font-size: 12px; padding: 9px 12px; }
}