: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;
}
/* === FINAL - SMALL COMPACT NO RED === */
.breaking { display: block !important; background: #333536 !important; border: 0 !important; padding: 0 !important; overflow: hidden; width: 100%; }
.breaking > span:first-child { display: block !important; background: #0e73b9 !important; color: #fff !important; font-size: 13px !important; font-weight: 800 !important; padding: 6px 30px 6px 14px !important; width: 30% !important; min-width: 130px; clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%) !important; border: 0 !important; }
.headline-viewport { background: #333536 !important; padding: 8px 14px !important; }
.headline-track { background: #333536 !important; min-height: 20px; }
.headline-track span, .headline-item { color: #fff !important; font-size: 14px !important; font-weight: 600 !important; background: transparent !important; line-height: 1.2; }
/* ANIMATION - SAME PA RIN */
.headline-item { opacity: 0; transform: translateY(8px); }
.headline-enter { animation: headline-ease-in .7s ease-in-out forwards; }
@keyframes headline-ease-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* MOBILE - GAWING 2 LINES */
@media (max-width: 600px) {
  .headline-viewport {
    padding: 6px 10px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
  }
  .headline-track {
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
  }
  .headline-track span, 
  .headline-item {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
    font-size: 12px !important;
  }
}


.news-tag {
  display: inline-flex; /* mas maganda kaysa inline-block */
  align-items: center;
  width: fit-content;
  max-width: max-content;
  padding: 4px 8px;
  margin: 2px; /* DATI 0 KAYA DIKIT */
  background: #4599ff;
  color: #fff;
  border-radius: 4px;
  font-size: 9px;
  line-height: 1.1;
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* 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);max-height:92vh;display:flex;flex-direction:column;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;overflow-y:auto;min-height:0}.video-modal-info p{margin:6px 0 0;line-height:1.5;opacity:.8;white-space:pre-wrap}.clickable-news{cursor:pointer}.clickable-news:hover{transform:translateY(-2px)}

/* Minimal story carousel/share enhancements */
.headline-item{display:block;color:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headline-enter{animation:headlineEase .7s ease-in both}@keyframes headlineEase{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.hero-story{touch-action:pan-y}.hero-slider-track,.hero-slide{height:100%;width:100%}.hero-slide{display:block;position:relative;color:#fff;text-decoration:none;overflow:hidden}.hero-slide img{width:100%;height:100%;object-fit:cover}.hero-slide-next{animation:heroRightLeft .55s ease both}.hero-slide-prev{animation:heroLeftRight .55s ease both}@keyframes heroRightLeft{from{opacity:.25;transform:translateX(55px)}to{opacity:1;transform:translateX(0)}}@keyframes heroLeftRight{from{opacity:.25;transform:translateX(-55px)}to{opacity:1;transform:translateX(0)}}.hero-dots,.side-dots{display:flex;gap:5px;justify-content:center;position:absolute;z-index:4}.hero-dots{bottom:10px;right:14px}.hero-dot,.side-dot{width:7px;height:7px;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.45);cursor:pointer}.hero-dot.active,.side-dot.active{background:#fff}.side-stories{position:relative;overflow:hidden;touch-action:pan-y;min-height:220px}.side-slider-track{height:100%;display:flex;align-items:stretch}.side-slider-track .mini-story{width:100%;flex:none;animation:sideUp .5s ease both}@keyframes sideUp{from{opacity:.15;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}.side-dots{bottom:3px;right:5px}.most-read-list-index{display:grid}.most-read-list-index .most-read{display:grid;grid-template-columns:24px 62px 1fr;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--border);text-decoration:none;color:inherit}.most-read-list-index .most-read img{width:62px;height:45px;object-fit:cover;border-radius:6px}.most-read-list-index .most-read p{font-size:11px;margin:0;line-height:1.3}.most-read-list-index .most-read small{font-size:9px;color:var(--muted)}.most-read-empty{font-size:11px;color:var(--muted)}
@media(max-width:680px){.hero-story{height:315px}.side-stories{min-height:105px}.most-read-list-index .most-read{grid-template-columns:22px 58px 1fr}}





/* === FIX - 3 VIDEOS KITA Tapos SLIDE UP === */
.side-stories{
  min-height: 365px !important;
  overflow: hidden !important;
}
.side-slider-viewport{
  height: 351px !important;
  overflow: hidden !important;
}
.side-slider-track{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  height: auto !important;
  transform: translateY(0);
  transition: transform 0.6s ease-in-out !important;
}
.side-slider-track .mini-story{
  width: 100% !important;
  flex: none !important;
  animation: none !important;
}


.side-slider-viewport{
  height: 351px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none;
}
.side-slider-viewport::-webkit-scrollbar{ display:none; }
.side-slider-track{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transform: none !important; /* alisin transform para native scroll */
}




/* === Minimal additions: professional news loading screen + universal tags === */
#newsLoadingScreen{position:fixed;inset:0;z-index:100000;background:#0b0f14;display:grid;place-items:center;opacity:1;visibility:visible;transition:opacity .22s ease,visibility .22s ease}
#newsLoadingScreen.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.news-loader{width:min(360px,86vw);text-align:center;color:#fff}.news-loader-mark{width:78px;height:78px;margin:0 auto 18px;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 14px 45px rgba(0,0,0,.35);animation:newsLoaderPulse 1.15s ease-in-out infinite}.news-loader-mark img{width:100%;height:100%;object-fit:contain;padding:7px}.news-loader-name{font-family:"Playfair Display",serif;font-size:24px;letter-spacing:.2px}.news-loader-line{height:2px;width:100%;margin:18px auto 10px;background:rgba(255,255,255,.14);overflow:hidden}.news-loader-line:after{content:"";display:block;height:100%;width:38%;background:#e51d2a;animation:newsLoaderLine 1.05s ease-in-out infinite}.news-loader-caption{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#aab2bd}@keyframes newsLoaderPulse{0%,100%{transform:scale(.96);opacity:.88}50%{transform:scale(1);opacity:1}}@keyframes newsLoaderLine{0%{transform:translateX(-120%)}100%{transform:translateX(290%)}}
.news-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.news-tag{display:inline-flex;align-items:center;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);border-radius:999px;padding:3px 8px;font-size:9px;font-weight:800;line-height:1.2}.article-tags{margin:0 0 20px}.share-btn.icon-only{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%;gap:0}.share-btn.icon-only i{font-size:15px}.share-btn.icon-only span{display:none}
@media(prefers-reduced-motion:reduce){#newsLoadingScreen,.news-loader-mark,.news-loader-line:after{animation:none!important;transition:none!important}}












body.pwa-banner-show{ padding-top:48px; }
#pwaBanner{ display:none; }
#pwaBanner.show{ display:flex; }









@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}
}

/* Fix anchor para di matakpan ng header */
#LocalNews{scroll-margin-top:90px}
@media(max-width:680px){
  #LocalNews{scroll-margin-top:75px}
}