:root{
  --bg:#f5f6f7;--surface:#fff;--surface2:#f0f2f5;--text:#17191c;--muted:#69707a;
  --border:#e1e4e8;--accent:#0b66c3;--accent2:#e51d2a;--shadow:0 2px 12px rgba(0,0,0,.07);
  --header:rgba(255,255,255,.94);--max:1180px;
}
html.dark{
  --bg:#18191a;--surface:#242526;--surface2:#3a3b3c;--text:#e4e6eb;--muted:#b0b3b8;
  --border:#3e4042;--accent:#4599ff;--accent2:#ff5964;--shadow:0 2px 12px rgba(0,0,0,.35);
  --header:rgba(24,25,26,.94);
}



.brand-logo {
  height: 52px;
  width: 230px; /* gawin mong 250px kung gusto mo mas mahaba pa */
  display: block;
  object-fit: fill; /* ito yung mag-stretch palapad */
}

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.45;transition:background .2s,color .2s}img{display:block;width:100%;object-fit:cover}a{text-decoration:none;color:inherit}
.topline{height:30px;background:#111;color:#fff;text-align:center;font-size:10px;letter-spacing:.8px;padding:8px 10px}
.site-header{position:sticky;top:0;z-index:100;background:var(--header);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.header-inner{max-width:var(--max);height:68px;margin:auto;padding:0 18px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:7px;font-weight:800;white-space:nowrap}.brand-main{font-size:24px;letter-spacing:-1px}.brand-sub{font-size:10px;background:var(--accent);color:#fff;padding:4px 6px;border-radius:3px}
.desktop-nav{display:flex;gap:21px;align-items:center;flex:1}.desktop-nav a{font-size:13px;font-weight:600;color:var(--muted)}.desktop-nav a:hover{color:var(--accent)}
.header-actions{display:flex;gap:6px;align-items:center}.icon-btn{width:38px;height:38px;border:0;border-radius:50%;background:var(--surface2);color:var(--text);cursor:pointer}.menu-btn{display:none}
.mobile-menu{display:none;max-width:var(--max);margin:auto;padding:0 18px 15px;gap:8px;flex-wrap:wrap}.mobile-menu a{background:var(--surface2);padding:9px 12px;border-radius:8px;font-size:13px;font-weight:600}
.mobile-menu.open{display:flex}.search-panel{display:none;border-top:1px solid var(--border);padding:12px}.search-panel.open{display:block}.search-wrap{max-width:var(--max);margin:auto;display:flex;align-items:center;gap:10px;background:var(--surface2);border-radius:10px;padding:0 12px}.search-wrap input{flex:1;border:0;outline:0;background:transparent;color:var(--text);padding:12px}.close-search{border:0;background:none;color:var(--muted);cursor:pointer}
.page{max-width:var(--max);margin:auto;padding:16px 18px 60px}.breaking{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);padding:4px 0 13px;margin-bottom:16px;font-size:12px}.breaking span{background:var(--accent2);color:#fff;font-weight:800;padding:5px 8px;border-radius:3px;font-size:9px;letter-spacing:.5px}.breaking p{margin:0;color:var(--muted)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.8fr);gap:16px;margin-bottom:25px}.hero-story{height:430px;position:relative;border-radius:10px;overflow:hidden;background:#222}.hero-story img{height:100%}.hero-overlay{position:absolute;inset:auto 0 0;padding:55px 28px 25px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.9))}.hero-overlay h1{font-size:31px;line-height:1.12;margin:7px 0}.hero-overlay p{margin:0;color:#ddd;font-size:13px}.kicker{font-size:10px;font-weight:800;letter-spacing:1.2px;color:var(--accent)}
.side-stories{display:flex;flex-direction:column;gap:12px}.mini-story{display:grid;grid-template-columns:125px 1fr;gap:12px;border-bottom:1px solid var(--border);padding-bottom:12px}.mini-story img{height:105px;border-radius:7px}.mini-story h3{font-size:14px;line-height:1.25;margin:4px 0}.mini-story small,.card small,.story small{font-size:10px;color:var(--muted)}.category{font-size:9px;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:25px}.section-head{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--text);margin-bottom:13px}.section-head h2{font-family:"Playfair Display",serif;font-size:22px;margin:0 0 7px}.section-head a{font-size:11px;color:var(--accent);font-weight:700}.section-space{margin-top:34px}
.news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.card,.story,.widget{background:var(--surface);border:1px solid var(--border);border-radius:9px;overflow:hidden;box-shadow:var(--shadow)}.card img{height:185px}.card-body{padding:13px}.card h3{font-size:16px;line-height:1.25;margin:5px 0}.card p{font-size:12px;color:var(--muted);margin:5px 0 10px}.four-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.story{padding-bottom:12px}.story img{height:145px}.story h3{font-size:13px;line-height:1.25;margin:9px 10px 4px}.story small{margin:0 10px}
.sidebar{display:flex;flex-direction:column;gap:16px}.widget{padding:15px}.widget-title{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:9px;margin-bottom:12px}.widget-title h3{font-size:14px;margin:0}.widget-title i{color:var(--accent)}.weather-main{display:flex;align-items:center;gap:15px}.weather-main strong{font-size:42px}.weather-main span{font-size:11px;color:var(--muted)}.forecast{display:flex;justify-content:space-between;margin-top:15px;padding-top:12px;border-top:1px solid var(--border);font-size:10px;color:var(--muted);text-align:center}.forecast b{color:var(--text);font-size:13px}.ranked{padding:0;margin:0;list-style:none}.ranked li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:11px}.ranked li:last-child{border:0}.ranked b{color:var(--accent);font-size:14px}.ad-box{height:180px;border:1px dashed var(--border);display:grid;place-items:center;color:var(--muted);font-size:9px;letter-spacing:1px}.most-read{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--border)}.most-read:last-child{border:0}.most-read span{font-size:18px;font-weight:800;color:var(--accent)}.most-read p{font-size:11px;margin:0}
.newsletter{margin-top:38px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:25px;display:flex;align-items:center;justify-content:space-between;gap:25px}.newsletter h2{font-size:22px;margin:4px 0}.newsletter p{font-size:12px;color:var(--muted);margin:0}.newsletter form{display:flex;min-width:390px}.newsletter input{flex:1;min-width:0;padding:12px;border:1px solid var(--border);background:var(--surface2);color:var(--text);outline:0;border-radius:7px 0 0 7px}.newsletter button{border:0;background:var(--accent);color:#fff;font-weight:700;padding:0 17px;border-radius:0 7px 7px 0;cursor:pointer}
footer{background:#111;color:#ddd;padding:40px 18px 18px}.footer-grid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}.footer-grid p{color:#999;font-size:11px;max-width:280px}.footer-grid h4{font-size:12px;margin:0 0 12px;color:#fff}.footer-grid>div>a:not(.brand){display:block;color:#999;font-size:11px;margin:8px 0}.footer-brand{margin-bottom:12px}.socials{display:flex;gap:8px}.socials a{width:31px!important;height:31px;border-radius:50%;background:#222;display:grid!important;place-items:center;color:#ddd!important;margin:0!important}.copyright{max-width:var(--max);margin:30px auto 0;padding-top:15px;border-top:1px solid #292929;color:#777;font-size:9px}
.theme-toggle{position:fixed;right:20px;bottom:20px;z-index:200;border:1px solid var(--border);background:var(--surface);color:var(--text);box-shadow:0 5px 18px rgba(0,0,0,.18);border-radius:999px;padding:10px 14px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:11px;cursor:pointer}.theme-toggle i{color:var(--accent)}
.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;background:#111;color:#fff;padding:10px 15px;border-radius:7px;font-size:12px;pointer-events:none;transition:.25s;z-index:300}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.desktop-nav{gap:12px}.content-grid{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,1fr)}.ad-box{display:none}.four-grid{grid-template-columns:repeat(2,1fr)}.newsletter{flex-direction:column;align-items:flex-start}.newsletter form{width:100%;min-width:0}}
@media(max-width:680px){.topline{font-size:8px;height:27px;padding:7px 4px}.header-inner{height:58px;padding:0 12px;gap:9px}.menu-btn{display:block}.desktop-nav{display:none}.login-btn{display:inline-flex;align-items:center;justify-content:center}.brand-main{font-size:20px}.header-actions{margin-left:auto}.page{padding:12px 11px 75px}.breaking{align-items:flex-start}.breaking p{font-size:10px}.hero-grid{grid-template-columns:1fr;gap:12px}.hero-story{height:315px}.hero-overlay{padding:60px 17px 18px}.hero-overlay h1{font-size:23px}.hero-overlay p{font-size:11px}.mini-story{grid-template-columns:100px 1fr}.mini-story img{height:86px}.mini-story h3{font-size:12px}.news-grid{grid-template-columns:1fr;gap:12px}.card img{height:190px}.four-grid{grid-template-columns:1fr 1fr;gap:9px}.story img{height:120px}.story h3{font-size:12px;margin:7px 8px 3px}.story small{margin:0 8px}.sidebar{grid-template-columns:1fr}.newsletter{padding:18px}.newsletter h2{font-size:19px}.newsletter form{display:flex}.newsletter button{padding:0 12px}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.theme-toggle{right:12px;bottom:12px;padding:9px 12px}.theme-toggle span{display:none}}
@media(max-width:380px){.hero-story{height:290px}.hero-overlay h1{font-size:20px}.four-grid{grid-template-columns:1fr}.story img{height:155px}.newsletter form{display:block}.newsletter input,.newsletter button{width:100%;height:42px;border-radius:7px}.newsletter button{margin-top:7px}.footer-grid{grid-template-columns:1fr}.mini-story{grid-template-columns:90px 1fr}.mini-story img{height:78px}}

/* Dynamic Firestore news presentation */
.news-meta{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.news-meta span:first-child{overflow:hidden;text-overflow:ellipsis}.card h3,.story h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.card p,.story p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;white-space:normal}.mini-story h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.hero-overlay h1{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.story-category{display:block;margin:9px 10px 0}.story .news-meta{margin:6px 10px 0}.hero-overlay .kicker{color:#fff}.hero-story{cursor:default}



/* TOPLINE - NAKA LOCK SA PINAKA TAAS */
.topline{
  width:100%;
  height:25px;
  background: linear-gradient(90deg, #0e6e1d 0%, #1b4723 40%, #0d1a0a 100%);
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  display:flex;
  align-items:center;
  padding:0;
  box-sizing:border-box;
  font-size:12px;
  font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  letter-spacing:.3px;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
}

/* HEADER - NAKA LOCK DIN SA ILALIM NG TOPLINE */
.site-header{
  position:fixed !important;
  top:25px !important;
  left:0;
  right:0;
  z-index:9998;
  background:var(--header);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}

/* PARA HINDI MATAKPAN NG FIXED HEADER YUNG CONTENT */
.page{
  margin-top:93px; /* 25px topline + 68px header */
}

.marquee-track{
  display:inline-block;
  white-space:nowrap;
  animation:marquee 30s linear infinite;
}

@keyframes marquee{
  from{transform:translateX(50vw)}
  to{transform:translateX(-100%)}
}

.footer-logo{
  height: 42px;
  width: 220px;
  object-fit: contain;
  display: block;
}

.footer-brand{
  display: flex;
  align-items: center;
}
/* =========================================================
   DYNAMIC HEADLINES
========================================================= */
.breaking {
  overflow: hidden;
}
.headline-viewport {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
.headline-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-width: 100%;
  animation: headlines-scroll 38s linear infinite;
}
.headline-track:hover {
  animation-play-state: paused;
}
.headline-item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-right: 18px;
  font-weight: 700;
}
.headline-item b {
  color: var(--accent);
}
@keyframes headlines-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .headline-track { animation: none; }
}

/* Video items inside the latest side stories */
.mini-story .category.video-label {
  color: var(--accent2);
}

/* Video popup / clickable public stories */
.video-modal{position:fixed;inset:0;background:rgba(0,0,0,.84);display:none;align-items:center;justify-content:center;padding:20px;z-index:99999}.video-modal.open{display:flex}.video-modal-box{width:min(1000px,96vw);background:#111;border-radius:16px;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,.5)}.video-modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;color:#fff}.video-modal-head h3{margin:0;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px}.video-close{border:0;background:rgba(255,255,255,.12);color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1.1rem}.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.video-modal-info{color:#ddd;padding:12px 16px 16px}.video-modal-info p{margin:6px 0 0;line-height:1.5;opacity:.8}.clickable-news{cursor:pointer}.clickable-news:hover{transform:translateY(-2px)}