/*
Theme Name: Metro Online
Theme URI: https://metroonline.id/
Author: Metro Online
Description: Tema portal berita responsif dengan headline, berita terbaru, kategori, dan area iklan.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: metro-online
*/
:root{--mo-red:#c82026;--mo-dark:#171717;--mo-muted:#68707d;--mo-border:#e7e7e7;--mo-bg:#f6f6f6;--mo-width:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#191919;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.55}a{color:inherit;text-decoration:none}a:hover{color:var(--mo-red)}img{max-width:100%;height:auto;display:block}.wrap{width:min(var(--mo-width),calc(100% - 32px));margin-inline:auto}.site-top{background:#f5f5f5;border-bottom:1px solid var(--mo-border);font-size:12px;color:#666;padding:7px 0}.top-inner{display:flex;justify-content:space-between;gap:12px}.site-header{background:#fff;border-bottom:1px solid #ddd}.branding{display:flex;align-items:center;gap:12px;padding:18px 0}.custom-logo{max-height:66px;width:auto}.site-title{font-size:34px;line-height:1;font-weight:900;letter-spacing:-1.2px;color:var(--mo-red);margin:0}.site-title a{color:inherit}.site-description{font-size:12px;color:#666;margin:5px 0 0}.main-nav{border-top:1px solid #eee}.main-nav .wrap{display:flex;align-items:center;min-height:46px}.menu-toggle{display:none;background:var(--mo-red);color:#fff;border:0;border-radius:4px;padding:9px 12px}.primary-menu,.primary-menu ul{list-style:none;margin:0;padding:0}.primary-menu{display:flex;align-items:center;gap:0;flex-wrap:wrap}.primary-menu li{position:relative}.primary-menu a{display:block;padding:13px 15px;font-size:13px;font-weight:700}.primary-menu>li:first-child a{padding-left:0}.primary-menu a:hover,.primary-menu .current-menu-item>a{color:var(--mo-red)}.primary-menu ul{display:none;position:absolute;z-index:10;top:100%;left:0;background:#fff;min-width:190px;border:1px solid var(--mo-border);box-shadow:0 8px 20px #0001}.primary-menu li:hover>ul,.primary-menu li:focus-within>ul{display:block}.primary-menu ul a{padding:10px 13px}.ticker{margin:18px auto;background:#f4f4f4;border-left:5px solid var(--mo-red);padding:10px 14px;display:flex;gap:12px;align-items:center;overflow:hidden}.ticker-label{font-size:12px;font-weight:800;color:var(--mo-red);white-space:nowrap}.ticker-content{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.section-title{font-size:19px;font-weight:800;border-bottom:2px solid var(--mo-red);padding-bottom:9px;margin:0 0 17px}.section-title span{display:inline-block}.home-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px, .95fr);gap:28px;margin:24px auto}.headline{position:relative;margin-bottom:22px}.headline img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#eee}.headline-label{position:absolute;top:14px;left:14px;background:var(--mo-red);color:#fff;font-size:11px;font-weight:800;padding:6px 10px;text-transform:uppercase}.headline h2{font-size:27px;line-height:1.22;margin:12px 0 8px;font-weight:800}.excerpt{color:var(--mo-muted);font-size:14px;margin:0}.meta{color:#888;font-size:11px;text-transform:uppercase;letter-spacing:.2px;margin:7px 0}.side-list{display:grid;gap:17px}.side-story{border-bottom:1px solid var(--mo-border);padding-bottom:14px}.side-story h3{font-size:16px;line-height:1.35;margin:0 0 6px}.side-story .excerpt{font-size:12px}.ad-box{border:1px dashed #ccc;background:#fafafa;color:#777;min-height:110px;display:flex;align-items:center;justify-content:center;text-align:center;margin:22px 0;padding:14px;font-size:12px}.news-list{display:grid;gap:17px}.news-card{display:grid;grid-template-columns:180px minmax(0,1fr);gap:15px;padding-bottom:17px;border-bottom:1px solid var(--mo-border)}.news-card img{width:180px;height:118px;object-fit:cover;background:#eee}.news-card h3{font-size:18px;line-height:1.3;margin:0 0 6px}.category-tag{color:var(--mo-red);font-weight:800;font-size:10px;text-transform:uppercase}.two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.small-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#eee}.small-card h3{font-size:16px;line-height:1.3;margin:8px 0}.site-footer{margin-top:45px;background:#171717;color:#ddd;padding:32px 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr;gap:25px}.footer-title{color:#fff;font-size:22px;font-weight:900}.site-footer p{font-size:13px;color:#bbb}.footer-links{display:flex;gap:12px;flex-wrap:wrap;font-size:12px}.copyright{border-top:1px solid #333;margin-top:22px;padding-top:14px;font-size:12px;color:#aaa}.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;margin:28px auto}.entry-title{font-size:32px;line-height:1.2;margin:8px 0}.entry-content{font-size:17px;line-height:1.8}.entry-content img{margin:18px 0}.pagination{display:flex;gap:7px;margin:24px 0}.pagination a,.pagination span{border:1px solid var(--mo-border);padding:8px 12px}.pagination .current{background:var(--mo-red);color:#fff}.search-form{display:flex;gap:6px}.search-form input{min-width:0;flex:1;padding:10px;border:1px solid #ddd}.search-form button{border:0;background:var(--mo-red);color:#fff;padding:10px 14px}.screen-reader-text{position:absolute;left:-9999px}
@media(max-width:760px){.wrap{width:calc(100% - 24px)}.site-title{font-size:27px}.branding{padding:14px 0}.top-inner{font-size:10px}.menu-toggle{display:block;margin:8px 0}.main-nav .wrap{display:block;padding-bottom:8px}.primary-menu{display:none;flex-direction:column;align-items:stretch}.primary-menu.is-open{display:flex}.primary-menu a,.primary-menu>li:first-child a{padding:10px 4px;border-bottom:1px solid #eee}.primary-menu ul{display:block;position:static;box-shadow:none;border:0;padding-left:14px}.ticker{margin:12px auto}.home-grid,.content-layout{grid-template-columns:1fr;gap:22px;margin:18px auto}.headline h2{font-size:23px}.sidebar{display:grid;grid-template-columns:1fr}.news-card{grid-template-columns:120px minmax(0,1fr);gap:11px}.news-card img{width:120px;height:88px}.news-card h3{font-size:15px}.news-card .excerpt{font-size:12px}.two-column{gap:13px}.small-card h3{font-size:14px}.footer-grid{grid-template-columns:1fr}.entry-title{font-size:27px}}
