/*
Theme Name: Teras Premium
Theme URI: https://terasnasional.com
Author: Teras Nasional
Author URI: https://terasnasional.com
Description: Tema WordPress premium untuk portal berita — masthead ruang redaksi, ticker breaking news, dan kartu artikel berkode warna kategori. Dibangun untuk kecepatan baca dan skimmability tinggi.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: teras-premium
Tags: news, blog, one-column, two-columns, grid-layout, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   0. Design tokens
   ========================================================================== */
:root{
  --ink:#12161D;
  --ink-soft:#242B36;
  --paper:#EEF0F3;
  --paper-raised:#FFFFFF;
  --line:#D9DCE1;
  --slate:#5B6472;
  --slate-light:#8890A0;
  --red:#D2232A;
  --red-dark:#A81920;
  --gold:#B8901F;
  --green:#2F7A4F;
  --blue:#2A5CA8;
  --purple:#6E4B9E;

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius:2px;
  --shadow-card:0 1px 2px rgba(18,22,29,.06), 0 1px 1px rgba(18,22,29,.04);
  --shadow-raised:0 8px 24px rgba(18,22,29,.12);
  --maxw:1240px;
}

/* Category color helper classes (assigned via PHP kategori hash) */
.cat-red{--cat:var(--red);} .cat-gold{--cat:var(--gold);} .cat-green{--cat:var(--green);}
.cat-blue{--cat:var(--blue);} .cat-purple{--cat:var(--purple);} .cat-ink{--cat:var(--ink);}

/* ==========================================================================
   1. Reset & base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0 0 .4em;}
p{margin:0 0 1.1em;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);overflow:hidden;height:1px;width:1px;}

/* Eyebrow / label style shared across the theme */
.eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cat, var(--slate));font-weight:600;
}

/* ==========================================================================
   2. Top utility bar + Breaking ticker
   ========================================================================== */
.topbar{background:var(--ink);color:#C9CDD6;font-family:var(--font-mono);font-size:12px;}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:34px;}
.topbar .date-line{letter-spacing:.03em;}
.topbar .topbar-links a{margin-left:16px;color:#C9CDD6;opacity:.85;}
.topbar .topbar-links a:hover{opacity:1;color:#fff;}

.ticker{background:var(--red);color:#fff;overflow:hidden;position:relative;}
.ticker .container{display:flex;align-items:stretch;padding:0;max-width:var(--maxw);}
.ticker-label{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;background:var(--red-dark);
  padding:9px 16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;font-weight:700;
}
.ticker-label .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}
.ticker-track-wrap{flex:1;overflow:hidden;position:relative;}
.ticker-track{display:flex;white-space:nowrap;animation:ticker 32s linear infinite;padding:9px 0;}
.ticker-track:hover{animation-play-state:paused;}
.ticker-track a{margin-right:48px;font-size:13.5px;font-weight:500;}
.ticker-track a::before{content:"●";font-size:6px;margin-right:10px;vertical-align:middle;opacity:.6;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ==========================================================================
   3. Masthead
   ========================================================================== */
.masthead{background:var(--paper-raised);border-bottom:3px solid var(--ink);}
.masthead .container{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;}
.site-logo{display:flex;flex-direction:column;}
.site-logo a{font-family:var(--font-display);font-weight:700;font-size:34px;letter-spacing:-.01em;color:var(--ink);}
.site-logo .tagline{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-top:2px;}
.masthead-tools{display:flex;align-items:center;gap:18px;}
.tool-btn{
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:transparent;
  display:flex;align-items:center;justify-content:center;color:var(--ink);transition:.15s;
}
.tool-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.tool-btn svg{width:17px;height:17px;}

.teras-search-panel{background:var(--ink);padding:0;max-height:0;overflow:hidden;transition:max-height .2s ease;}
.teras-search-panel:not([hidden]){max-height:90px;}
.teras-search-panel .container{padding:18px 24px;}
.teras-search-panel input[type=search]{background:var(--ink-soft);border-color:transparent;color:#fff;}
.teras-search-panel input[type=search]::placeholder{color:#9AA1AD;}

/* Primary nav */
.primary-nav{background:var(--ink);}
.primary-nav .container{display:flex;align-items:center;}
.nav-menu-toggle{display:none;background:transparent;border:0;color:#fff;padding:14px 4px;}
.primary-nav ul.menu{display:flex;flex-wrap:wrap;}
.primary-nav ul.menu > li > a{
  display:block;padding:13px 18px;color:#E7E9ED;font-size:13.5px;font-weight:600;
  letter-spacing:.02em;border-right:1px solid rgba(255,255,255,.08);transition:.15s;
}
.primary-nav ul.menu > li:first-child > a{color:#fff;background:var(--red);}
.primary-nav ul.menu > li > a:hover,.primary-nav ul.menu > li.current-menu-item > a{background:var(--ink-soft);color:#fff;}

/* ==========================================================================
   4. Hero grid (front page)
   ========================================================================== */
.hero-section{padding:32px 0 8px;}
.hero-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;}
.hero-lead{position:relative;background:var(--ink);color:#fff;border-radius:var(--radius);overflow:hidden;}
.hero-lead a.hero-lead-link{display:block;}
.hero-lead img{width:100%;height:460px;object-fit:cover;opacity:.82;}
.hero-lead-body{position:absolute;left:0;right:0;bottom:0;padding:28px 30px 26px;background:linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.35) 65%,transparent 100%);}
.hero-lead-body .eyebrow{color:#fff;background:var(--cat,var(--red));display:inline-block;padding:3px 9px;border-radius:2px;margin-bottom:12px;}
.editor-pick-badge{color:var(--ink);background:#fff;display:inline-block;padding:3px 9px;border-radius:2px;margin-bottom:12px;margin-left:6px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;}
.hero-lead-body h1{font-size:34px;color:#fff;margin-bottom:10px;max-width:640px;}
.hero-lead-body .excerpt{color:#D9DCE1;font-size:14.5px;max-width:560px;margin-bottom:10px;}
.hero-lead-body .meta{font-family:var(--font-mono);font-size:11.5px;color:#B7BCC6;}

.hero-secondary{display:flex;flex-direction:column;gap:18px;}
.hero-sec-card{display:flex;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line);}
.hero-sec-card:last-child{border-bottom:0;padding-bottom:0;}
.hero-sec-card .thumb{flex:0 0 108px;width:108px;height:78px;overflow:hidden;border-radius:var(--radius);}
.hero-sec-card .thumb img{width:100%;height:100%;object-fit:cover;}
.hero-sec-card .body h3{font-size:15.5px;margin-bottom:6px;}
.hero-sec-card .body h3 a:hover{color:var(--cat,var(--red));}
.hero-sec-card .eyebrow{margin-bottom:5px;display:block;}

/* ==========================================================================
   5. Section headers + category rows
   ========================================================================== */
.section{padding:36px 0;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;border-bottom:2px solid var(--ink);padding-bottom:10px;}
.section-head h2{font-size:22px;border-left:5px solid var(--cat,var(--red));padding-left:12px;}
.section-head .see-all{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);}
.section-head .see-all:hover{color:var(--red);}

.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.article-card{background:var(--paper-raised);border-left:3px solid var(--cat,var(--line));box-shadow:var(--shadow-card);border-radius:var(--radius);overflow:hidden;transition:transform .15s, box-shadow .15s;}
.article-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-raised);}
.article-card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--paper);}
.article-card .thumb img{width:100%;height:100%;object-fit:cover;}
.article-card .card-body{padding:14px 16px 18px;}
.article-card h3{font-size:16px;margin-bottom:8px;}
.article-card h3 a:hover{color:var(--cat,var(--red));}
.article-card .meta{font-family:var(--font-mono);font-size:10.5px;color:var(--slate-light);text-transform:uppercase;letter-spacing:.03em;}

/* ==========================================================================
   6. Content layout: main + sidebar
   ========================================================================== */
.content-layout{display:grid;grid-template-columns:1fr 340px;gap:36px;align-items:start;padding:32px 0 56px;}
.main-col .article-card.horizontal{display:flex;border-left:3px solid var(--cat,var(--line));margin-bottom:20px;}
.article-card.horizontal .thumb{flex:0 0 220px;aspect-ratio:auto;height:150px;}
.article-card.horizontal .card-body{flex:1;}

.sidebar-widget{background:var(--paper-raised);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:22px;margin-bottom:24px;}
.sidebar-widget h2.widget-title{font-size:16px;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:16px;}
.popular-list li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);}
.popular-list li:last-child{border-bottom:0;}
.popular-list .rank{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--line);width:32px;flex:0 0 32px;line-height:1;}
.popular-list li:nth-child(-n+3) .rank{color:var(--red);}
.popular-list .ptitle{font-size:13.5px;line-height:1.4;}
.popular-list .ptitle a:hover{color:var(--red);}

.widget_categories ul li,.widget_archive ul li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px;}
.widget_categories ul li a:hover{color:var(--red);}

.newsletter-box{background:var(--ink);color:#fff;border-radius:var(--radius);padding:24px;margin-bottom:24px;}
.newsletter-box h2.widget-title{color:#fff;border-bottom-color:rgba(255,255,255,.25);}
.newsletter-box p{font-size:13px;color:#C9CDD6;}
.newsletter-box form{display:flex;gap:8px;margin-top:12px;}
.newsletter-box input[type=email]{flex:1;padding:10px 12px;border:0;border-radius:2px;font-size:13px;}
.newsletter-box button{background:var(--red);color:#fff;border:0;padding:10px 16px;border-radius:2px;font-weight:700;font-size:12px;letter-spacing:.03em;}
.newsletter-box button:hover{background:var(--red-dark);}

/* ==========================================================================
   7. Single article
   ========================================================================== */
.article-header{padding:36px 0 18px;border-bottom:1px solid var(--line);}
.article-header .eyebrow{background:var(--cat,var(--red));color:#fff;padding:4px 10px;border-radius:2px;}
.article-header h1{font-size:40px;margin:16px 0 14px;max-width:820px;}
.article-header .subdeck{font-size:17px;color:var(--slate);max-width:760px;margin-bottom:16px;}
.article-meta{display:flex;align-items:center;gap:16px;font-family:var(--font-mono);font-size:12px;color:var(--slate);flex-wrap:wrap;}
.article-meta .author{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;}
.article-meta .author img{width:30px;height:30px;border-radius:50%;object-fit:cover;}
.article-featured-img{margin:26px 0;border-radius:var(--radius);overflow:hidden;}
.article-featured-img figcaption{font-size:12.5px;color:var(--slate);padding-top:8px;font-family:var(--font-mono);}

.article-body{font-size:18px;line-height:1.75;max-width:760px;}
.article-body p{margin-bottom:1.3em;}
.article-body h2{font-size:26px;margin-top:1.4em;}
.article-body h3{font-size:21px;margin-top:1.2em;}
.article-body blockquote{border-left:4px solid var(--red);margin:1.6em 0;padding:.2em 0 .2em 22px;font-family:var(--font-display);font-style:italic;font-size:22px;color:var(--ink-soft);}
.article-body img{border-radius:var(--radius);margin:1.4em 0;}
.article-body a{color:var(--red);text-decoration:underline;text-underline-offset:3px;}

.share-bar{display:flex;align-items:center;gap:10px;margin:30px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.share-bar span.lbl{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-right:6px;}
.share-bar a{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.share-bar a:hover{background:var(--ink);color:#fff;border-color:var(--ink);}

.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0;}
.tag-list a{font-family:var(--font-mono);font-size:11.5px;background:var(--paper);border:1px solid var(--line);padding:6px 12px;border-radius:20px;color:var(--slate);}
.tag-list a:hover{background:var(--ink);color:#fff;}

.author-box{display:flex;gap:16px;background:var(--paper);padding:22px;border-radius:var(--radius);margin:30px 0;}
.author-box img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 64px;}
.author-box h3{font-size:16px;margin-bottom:4px;}
.author-box p{font-size:13.5px;color:var(--slate);margin:0;}

.related-posts{margin-top:44px;}

/* ==========================================================================
   8. Comments
   ========================================================================== */
.comments-area{max-width:760px;margin-top:44px;}
.comments-title{font-size:22px;border-top:3px solid var(--ink);padding-top:20px;}
.comment-list{margin-top:20px;}
.comment-list .comment-body{padding:18px 0;border-bottom:1px solid var(--line);}
.comment-author{font-weight:700;font-size:14px;}
.comment-metadata{font-family:var(--font-mono);font-size:11px;color:var(--slate-light);margin-bottom:8px;}
.comment-form input,.comment-form textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:2px;font-family:var(--font-body);font-size:14px;margin-bottom:12px;}
.comment-form textarea{min-height:120px;}
.comment-form .form-submit input{width:auto;background:var(--ink);color:#fff;font-weight:700;padding:11px 26px;border:0;}
.comment-form .form-submit input:hover{background:var(--red);}

/* ==========================================================================
   9. Footer
   ========================================================================== */
.site-footer{background:var(--ink);color:#C9CDD6;margin-top:20px;}
.footer-top{padding:52px 0 36px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand .site-logo a{color:#fff;font-size:26px;}
.footer-brand p{font-size:13.5px;color:#9AA1AD;margin-top:12px;max-width:280px;}
.footer-col h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;font-family:var(--font-mono);}
.footer-col ul li{margin-bottom:10px;font-size:13.5px;}
.footer-col ul li a:hover{color:#fff;}
.footer-bottom{padding:20px 0;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:#828A97;}
.footer-social{display:flex;gap:10px;}
.footer-social a{width:32px;height:32px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.footer-social a:hover{background:var(--red);border-color:var(--red);}

.back-to-top{position:fixed;right:24px;bottom:24px;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;border:0;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-raised);opacity:0;pointer-events:none;transition:.2s;z-index:40;}
.back-to-top.visible{opacity:1;pointer-events:auto;}

/* ==========================================================================
   10. Pagination / misc
   ========================================================================== */
.pagination{display:flex;gap:8px;margin-top:32px;justify-content:center;}
.pagination a,.pagination span{padding:9px 15px;border:1px solid var(--line);border-radius:2px;font-family:var(--font-mono);font-size:13px;background:var(--paper-raised);}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink);}
.pagination a:hover{border-color:var(--ink);}

.ad-slot{background:var(--paper-raised);border:1px dashed var(--line);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--slate-light);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:24px;min-height:60px;padding:12px;text-align:center;overflow:hidden;}
.ad-slot img{max-width:100%;height:auto;}
.ad-slot .ad-label{color:var(--slate-light);font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;}
.ad-slot-in_content{margin:24px 0;}

/* Dark mode */
body.dark-mode{--paper:#161B22;--paper-raised:#1E242D;--ink:#F2F3F5;--ink-soft:#D9DCE1;--line:#2E3540;--slate:#9AA1AD;--slate-light:#6B7280;}
body.dark-mode .masthead{border-bottom-color:#2E3540;}
body.dark-mode .site-logo a{color:var(--ink);}
body.dark-mode .hero-lead-body h1{color:#fff;}

/* ==========================================================================
   11. Responsive
   ========================================================================== */

/* ---- Tablet (≤1024px) ---- */
@media (max-width:1024px){
  .content-layout{grid-template-columns:1fr;}
  .content-layout .sidebar-col{max-width:520px;}
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;row-gap:32px;}
  .hero-grid{grid-template-columns:1.3fr 1fr;gap:20px;}
  .hero-lead img{height:380px;}
}

/* ---- Small tablet / large phone (≤820px): guard against menu overflow
       before the hamburger takes over at 760px ---- */
@media (max-width:820px) and (min-width:761px){
  .primary-nav ul.menu{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .primary-nav ul.menu::-webkit-scrollbar{display:none;}
  .primary-nav ul.menu > li > a{white-space:nowrap;}
}

/* ---- Mobile (≤760px) ---- */
@media (max-width:760px){
  body{font-size:15px;}
  .container{padding:0 16px;}

  /* Topbar: keep it compact, drop secondary links */
  .topbar .container{height:auto;padding:8px 16px;flex-wrap:wrap;gap:4px;}
  .topbar .date-line{font-size:10.5px;}
  .topbar .topbar-links a{margin-left:0;margin-right:14px;font-size:10.5px;}

  /* Ticker: shrink label, keep it single-line and legible */
  .ticker-label{padding:8px 10px;font-size:10.5px;gap:6px;}
  .ticker-track{padding:8px 0;}
  .ticker-track a{font-size:12.5px;margin-right:32px;}

  /* Masthead */
  .masthead .container{padding:14px 16px;}
  .site-logo a{font-size:24px;}
  .site-logo .tagline{font-size:9px;}
  .masthead-tools{gap:10px;}
  .tool-btn{width:40px;height:40px;}
  .teras-search-panel .container{padding:14px 16px;}

  /* Primary nav → slide-down mobile menu */
  .primary-nav .container{flex-wrap:wrap;padding:0 16px;}
  .nav-menu-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:auto;}
  .primary-nav ul.menu{display:none;flex-direction:column;width:100%;flex-wrap:nowrap;overflow-x:visible;}
  .primary-nav.open ul.menu{display:flex;padding-bottom:8px;}
  .primary-nav ul.menu > li{width:100%;}
  .primary-nav ul.menu > li > a{
    padding:14px 4px;font-size:15px;border-right:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .primary-nav ul.menu > li:first-child > a{padding-left:12px;border-radius:2px;}
  .primary-nav ul.menu > li:last-child > a{border-bottom:0;}

  /* Hero */
  .hero-section{padding:20px 0 4px;}
  .hero-grid{grid-template-columns:1fr;gap:16px;}
  .hero-lead img{height:260px;}
  .hero-lead-body{padding:20px 18px 18px;}
  .hero-lead-body h1{font-size:22px;line-height:1.2;}
  .hero-lead-body .excerpt{display:none;} /* keep the mobile hero compact */
  .hero-secondary{gap:14px;}
  .hero-sec-card{gap:12px;padding-bottom:14px;}
  .hero-sec-card .thumb{flex-basis:92px;width:92px;height:68px;}
  .hero-sec-card .body h3{font-size:14.5px;}

  /* Section headers + card grids */
  .section{padding:26px 0;}
  .section-head{margin-bottom:14px;}
  .section-head h2{font-size:18px;padding-left:10px;}
  .card-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .article-card .card-body{padding:10px 12px 14px;}
  .article-card h3{font-size:14px;}

  /* Content layout / archive rows */
  .content-layout{padding:20px 0 40px;gap:28px;}
  .article-card.horizontal{flex-direction:column;}
  .article-card.horizontal .thumb{width:100%;height:190px;flex-basis:auto;}

  /* Sidebar */
  .sidebar-widget{padding:18px;}
  .ad-slot{min-height:60px;}
  .newsletter-box form{flex-direction:column;}
  .newsletter-box button{width:100%;}

  /* Single article */
  .article-header{padding:24px 0 14px;}
  .article-header h1{font-size:25px;}
  .article-header .subdeck{font-size:15px;}
  .article-meta{gap:10px;font-size:11px;}
  .article-body{font-size:16px;line-height:1.7;}
  .article-body blockquote{font-size:18px;padding-left:16px;}
  .share-bar{flex-wrap:wrap;gap:8px;}
  .author-box{flex-direction:column;text-align:center;}
  .author-box img{margin:0 auto;}
  .related-posts .card-grid{grid-template-columns:1fr 1fr!important;}

  /* Comments */
  .comment-form .form-submit input{width:100%;}

  /* Footer */
  .footer-top{grid-template-columns:1fr;padding:32px 0;gap:28px;}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center;padding:16px 0 24px;}
  .back-to-top{right:16px;bottom:16px;width:42px;height:42px;}
}

/* ---- Small phone (≤480px) ---- */
@media (max-width:480px){
  .card-grid{grid-template-columns:1fr;}
  .related-posts .card-grid{grid-template-columns:1fr!important;}
  .hero-sec-card{align-items:flex-start;}
  .article-card.horizontal .thumb{height:170px;}
  .site-logo a{font-size:21px;}
  .article-header h1{font-size:22px;}
  .popular-list .rank{font-size:22px;width:26px;flex-basis:26px;}
}

/* ---- Ensure tap targets stay comfortable on touch devices ---- */
@media (hover:none) and (pointer:coarse){
  .primary-nav ul.menu > li > a,
  .footer-col ul li a,
  .widget_categories ul li a,
  .pagination a{padding-top:12px;padding-bottom:12px;}
  .tool-btn,.share-bar a,.footer-social a{min-width:40px;min-height:40px;}
}