/* ════════════════════════════════════════
   TAXCOGNITION — main.css
   PHP 8.3 | WordPress 6.x
════════════════════════════════════════ */

/* ── CSS VARIABLES (overridden by Customizer) ── */
:root{
  --accent:#c00; --accent2:#e00;
  --hdr-bg:#000; --hdr-text:#fff;
  --flag-bg:#c00; --flag-text:#fff;
  --link-hover:#c00;
  --body-bg:#fff; --body-text:#000;
  --border:#e0e0e0;
  --sec-bg:#000; --sec-text:#fff;
  --more-bg:#000; --more-text:#fff;
  --footer-bg:#000; --footer-text:#aaa;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --text-xs:12px; --text-sm:13px; --text-base:16px;
  --text-lg:18px; --text-xl:22px; --text-2xl:28px;
  --lh-tight:1.2; --lh-body:1.7; --lh-relaxed:1.85;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);font-size:var(--text-base);background:var(--body-bg);color:var(--body-text);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
ul{list-style:none;padding:0;margin:0}
button,input{font-family:inherit}

/* ── CONTENT WRAPPERS ── */
#content-wrapper{background:var(--body-bg)}
#content,#background-wrapper,.container.clearfix{overflow:visible!important;float:none!important}
.container--content{max-width:1216px;margin:0 auto;padding:0 10px}

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */
.site-header{background:var(--hdr-bg);position:sticky;top:0;z-index:500}
.nav-wrapper{border-bottom:1px solid rgba(255,255,255,.1)}
.container--header-nav{
  max-width:1216px;margin:0 auto;padding:0 8px;
  display:flex;align-items:center;justify-content:space-between;
  height:50px;position:relative;
}
.nav-left{display:flex;align-items:center;position:relative;z-index:10}
.nav-right{display:flex;align-items:center;position:relative;z-index:10}

/* Logo center */
#header-logo-wrapper{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none}
#header-logo{margin:0;line-height:1;pointer-events:auto}
#header-logo a{display:flex;align-items:center}
#header-logo .custom-logo{max-height:40px;width:auto;display:block}
#header-logo .site-name-logo{color:#fff;font-size:20px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}

/* Nav buttons */
.nav-header--sections,.nav-header--search{
  background:none;border:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  padding:8px 10px;font-size:15px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;transition:.15s;
}
.nav-header--sections:hover,.nav-header--search:hover{background:rgba(255,255,255,.08)}
.menu-icon-svg{width:18px;height:18px;fill:#fff}
.search-icon-svg{width:16px;height:16px;fill:#fff}

/* Sections dropdown */
#section-nav-wrapper{
  display:none;position:absolute;left:0;top:calc(100% + 1px);
  background:var(--hdr-bg);min-width:200px;
  border-top:2px solid var(--accent);
  box-shadow:0 4px 14px rgba(0,0,0,.5);z-index:600;
}
#section-nav-wrapper.open{display:block}
.menu-main-menu li{border-bottom:1px solid rgba(255,255,255,.07)}
.menu-main-menu a{display:block;color:#fff;padding:11px 16px;font-size:14px;font-weight:600;transition:.15s}
.menu-main-menu a:hover{background:var(--accent)}
.sub-menu{background:rgba(255,255,255,.04)}
.sub-menu a{padding-left:28px;font-weight:400}
.menu-main-menu li{position:relative}
.menu-main-menu .sub-menu{display:none;position:absolute;left:100%;top:0;border-left:2px solid var(--accent);box-shadow:4px 4px 12px rgba(0,0,0,.4);z-index:700;min-width:200px;background:var(--hdr-bg)}
.menu-main-menu li:hover>.sub-menu{display:block}
.menu-main-menu .current-menu-item>a,.menu-main-menu .current-menu-ancestor>a{background:var(--accent);color:#fff!important}

/* Search form */
#nav-search-wrapper{
  display:none;position:absolute;right:0;top:calc(100% + 2px);
  background:var(--hdr-bg);padding:10px;width:280px;
  box-shadow:0 4px 14px rgba(0,0,0,.5);z-index:600;
}
#nav-search-wrapper[aria-hidden="false"]{display:block}
.search__label{display:none}
.search__form{display:flex}
.search__input{flex:1;padding:8px 10px;border:1px solid rgba(255,255,255,.25);border-right:none;background:#1a1a1a;color:#fff;font-size:14px;outline:none}
.search__input::placeholder{color:rgba(255,255,255,.4)}
.search__submit{padding:8px 14px;background:var(--accent);color:#fff;border:none;font-size:13px;font-weight:700;cursor:pointer}
.search__submit:hover{background:var(--accent2)}

/* ════════════════════════════════════════
   CATEGORY FLAG
════════════════════════════════════════ */
.flag-wrapper{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;list-style:none;padding:0}
.flag,.display-flag{
  background:var(--flag-bg,#cc0000) !important;
  color:#fff !important;
  font-size:11px;font-weight:900;
  text-transform:uppercase;letter-spacing:.08em;
  padding:3px 8px;display:inline-block;
}
.flag a,.display-flag a{color:#fff !important;text-decoration:none}

/* ════════════════════════════════════════
   TOP STORIES (Homepage + Video listing)
   .home-top-stories
     ├── .story-1  (big, col 1, row 1-2)
     └── .story-side (col 2, row 1-2)
         ├── .story-small
         └── .story-small
════════════════════════════════════════ */
.top-media-stories.home-top-stories{
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:3px;
  min-height:400px;
  margin-bottom:20px;
}
.story-1{grid-column:1;grid-row:1/span 2;position:relative;overflow:hidden;background:#111}
.story-side{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;gap:3px}
.story-side .story-small{flex:1;position:relative;overflow:hidden;background:#111;min-height:0}
.story-photo-box{position:relative}

/* Thumbnails */
.story-1 .story-thumbnail-wrapper,
.story-side .story-small .story-thumbnail-wrapper{display:block;width:100%;height:100%;overflow:hidden}
.story-1 .story-thumbnail-wrapper img,
.story-side .story-small .story-thumbnail-wrapper img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.story-photo-box:hover .story-thumbnail-wrapper img{transform:scale(1.03)}

/* Big story headline overlay */
.story-1 .headline-wrapper{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.88));
  padding:40px 14px 14px;
}
.story-1 .headline{font-size:22px;font-weight:900;color:#fff;line-height:1.25;margin:6px 0 0}
.story-1 .headline a{color:#fff}
.story-1 .headline a:hover{text-decoration:underline}

/* Small story headline below image */
.story-small .headline-wrapper{padding:6px 8px 8px;background:var(--body-bg)}
.story-small .headline{font-size:15px;font-weight:700;line-height:1.35;color:var(--body-text);margin-top:3px}
.story-small .headline a:hover{color:var(--accent)}

/* Play overlay (video pages) */
.play-overlay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;
  background:rgba(0,0,0,.55);border:3px solid #fff;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;pointer-events:none;transition:.2s;
}
.play-overlay--sm{width:36px;height:36px;font-size:13px;border-width:2px}
.story-photo-box:hover .play-overlay{background:var(--accent);border-color:var(--accent)}

/* ════════════════════════════════════════
   HOME PAGE
════════════════════════════════════════ */
#home-page-wrapper,#section-wrapper{max-width:1216px;margin:0 auto;padding:0 10px}
.section-content h2,.section-heading{
  background:var(--sec-bg);color:var(--sec-text);
  font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  padding:7px 12px;margin-bottom:10px;display:inline-block;
}

/* Article loop (2-col grid) */
.article-loop{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.article.half{display:flex;flex-direction:column;background:var(--body-bg);border:1px solid var(--border);overflow:hidden;transition:.15s}
.article.half.has-border{border-top:3px solid var(--accent)}
.article.half:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
.entry-thumbnail{display:block;overflow:hidden}
.entry-thumbnail picture,.entry-thumbnail img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .3s}
.article.half:hover .entry-thumbnail img{transform:scale(1.03)}
.entry-header{padding:8px 10px 6px}
.entry-heading{font-size:15px;font-weight:700;line-height:1.35;color:var(--body-text)}
.entry-heading a:hover{color:var(--link-hover)}
.entry-meta p{font-size:12px;color:#888;margin-top:4px}
.entry-content{font-size:13px;color:#555;line-height:1.55;padding:0 10px 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* More link button */
.more-link{text-align:center;margin:16px 0}
.more-link button{
  display:inline-block;background:var(--more-bg);color:#fff;
  font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;
  padding:11px 32px;border:none;cursor:pointer;transition:.15s;
}
.more-link button:hover{background:var(--accent)}
.more-link button:disabled{opacity:.5;cursor:not-allowed}

/* ════════════════════════════════════════
   VIDEO LISTING PAGE
════════════════════════════════════════ */
.video-page-wrapper{max-width:1216px;margin:0 auto;padding:0 10px}
.video-listing-section{margin-top:4px}

/* Section bar: ─── TITLE ─── */
.section-bar{display:flex;align-items:center;margin-bottom:14px;font-size:0}
.section-bar::before,.section-bar::after{content:'';flex:1;height:3px;background:#000}
.section-bar span{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#000;padding:0 16px;white-space:nowrap}

/* Video grid — 3 columns */
.video-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px 12px;list-style:none;padding:0;margin:0 0 20px;
}
.video-grid-link{display:block;text-decoration:none;color:inherit}
.video-grid-thumb{position:relative;overflow:hidden;aspect-ratio:4/3;background:#111;border-radius:2px}
.video-grid-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.video-grid-item:hover .video-grid-thumb img{transform:scale(1.04)}
.video-grid-item:hover .play-overlay{background:var(--accent);border-color:var(--accent)}
.video-grid-title{font-size:13px;font-weight:700;line-height:1.4;margin:7px 0 0;color:var(--body-text)}
.video-grid-link:hover .video-grid-title{color:var(--accent)}

/* ════════════════════════════════════════
   SINGLE ARTICLE: content + sidebar
════════════════════════════════════════ */
.single-wrapper{max-width:1216px;margin:0 auto;padding:0 16px 32px}

/* Full-width header */
.article-header{padding:16px 0 12px;border-bottom:1px solid var(--border);margin-bottom:16px}
.article-title{font-size:30px;font-weight:900;line-height:1.2;color:var(--body-text);margin:8px 0 12px}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;color:#888}
.article-meta a{color:#666}
.article-meta a:hover{color:var(--accent)}
.article-date::before{content:"·";margin-right:14px;color:#ccc}

/* Full-width featured image */
.article-featured-image{margin:0 0 20px;overflow:hidden;line-height:0}
.article-featured-image img{width:100%;height:auto;display:block}
.article-featured-image figcaption{font-size:var(--text-xs);color:#888;padding:6px 8px;line-height:1.4;background:#f9f9f9;border-top:1px solid var(--border)}

/* 2-column grid: content | sidebar */
.content-row{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:32px;
  align-items:start;
}

/* Article body */
.content-main{min-width:0}
.article-body{font-size:17px;line-height:1.8;color:#1a1a1a}
.article-body p{margin:0 0 1.2em}
.article-body h2{font-size:1.4em;font-weight:700;line-height:var(--lh-tight);margin:1.8em 0 .6em}
.article-body h3{font-size:1.2em;font-weight:700;line-height:var(--lh-tight);margin:1.5em 0 .5em}
.article-body h4{font-size:1.05em;font-weight:700;margin:1.2em 0 .4em}
.article-body ul,.article-body ol{margin:0 0 1.2em;padding-left:1.6em}
.article-body li{margin-bottom:.4em}
.article-body blockquote{margin:1.5em 0;padding:.8em 1.2em;border-left:4px solid var(--accent);background:#f8f8f8;color:#444;font-style:italic}
.article-body blockquote p{margin:0}
.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.article-body a:hover{color:var(--accent2)}
.article-body img{max-width:100%;height:auto;border-radius:2px;margin:8px 0}
.article-body figure{margin:1.5em 0}
.article-body figcaption{font-size:var(--text-xs);color:#888;margin-top:4px;text-align:center}
.article-body pre{background:#1e1e1e;color:#d4d4d4;padding:16px;overflow-x:auto;border-radius:4px;font-size:14px;line-height:1.5}
.article-body code{background:#f0f0f0;color:#c00;padding:1px 5px;border-radius:3px;font-size:.9em}
.article-body pre code{background:transparent;color:inherit;padding:0}
.article-body table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:var(--text-sm)}
.article-body th{background:#f0f0f0;font-weight:700;padding:8px 12px;border:1px solid #ddd;text-align:left}
.article-body td{padding:7px 12px;border:1px solid #ddd}
.article-body tr:nth-child(even) td{background:#fafafa}
.article-footer{margin-top:24px;padding-top:14px;border-top:1px solid var(--border)}
.article-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--text-sm);color:#888}
.article-tags a{background:#f0f0f0;color:#555;padding:3px 10px;border-radius:20px;transition:.15s}
.article-tags a:hover{background:var(--accent);color:#fff}

/* Sidebar */
.content-sidebar{min-width:0}
.sidebar-inner{position:sticky;top:62px}
.sidebar-ad{
  width:100%;min-height:250px;background:#f8f8f8;
  border:1px dashed #ddd;display:flex;align-items:center;
  justify-content:center;margin-bottom:20px;
}
.sidebar-ad:empty::before{content:'Ad 300×250';font-size:11px;color:#bbb;letter-spacing:.06em;text-transform:uppercase}
.sidebar-widget{border:1px solid var(--border);border-top:3px solid var(--sec-bg);padding:14px;margin-bottom:20px}
.sidebar-widget-title{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--body-text);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.sidebar-post-item{display:flex;gap:10px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #f0f0f0}
.sidebar-post-item:last-child{border:none;margin:0;padding:0}
.sidebar-post-thumb{flex-shrink:0;width:72px;height:50px;overflow:hidden;display:block}
.sidebar-post-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.sidebar-post-item:hover .sidebar-post-thumb img{transform:scale(1.05)}
.sidebar-post-info h4{font-size:15px;font-weight:700;line-height:1.35;margin:0 0 4px}
.sidebar-post-info h4 a{color:var(--body-text)}
.sidebar-post-info h4 a:hover{color:var(--accent)}
.sidebar-post-info time{font-size:10px;color:#aaa}

/* Related articles */
.related-articles{margin-top:28px}
.related-articles .section-heading{background:var(--sec-bg);color:#fff;font-size:var(--text-sm);font-weight:900;text-transform:uppercase;letter-spacing:.05em;padding:7px 12px;display:inline-block;margin-bottom:12px}

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
#page-footer{background:var(--footer-bg);color:var(--footer-text);margin-top:40px}
#footer-wrapper.container{max-width:1216px;margin:0 auto;padding:0 10px}
#footer-legal p{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11px;padding:14px 0;color:var(--footer-text)}
#footer-legal a{color:var(--footer-text);opacity:.7}
#footer-legal a:hover{opacity:1;color:var(--accent)}
#footer-nav-links{display:flex;flex-wrap:wrap;gap:4px 16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
#footer-nav-links a{font-size:13px;font-weight:700;color:var(--footer-text);text-transform:uppercase}
#footer-nav-links a:hover{color:var(--accent)}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media(max-width:960px){
  .content-row{grid-template-columns:1fr 240px;gap:20px}
  .article-body{font-size:var(--text-base)}
}

@media(max-width:768px){
  /* Header */
  .container--header-nav{height:46px;padding:0 4px}
  .nav-text{display:none}
  #header-logo-wrapper{max-width:55vw}
  .site-name-logo{font-size:16px}
  #header-logo .custom-logo{max-height:34px}
  #section-nav-wrapper{position:fixed;top:46px;left:0;right:0;bottom:0;overflow-y:auto;min-width:unset;z-index:600}
  #section-nav-wrapper.open{display:block}
  .menu-main-menu .sub-menu{position:static;left:auto;border-left:none;border-top:1px solid rgba(255,255,255,.07);box-shadow:none;background:rgba(255,255,255,.05)}
  .menu-main-menu li:hover>.sub-menu{display:none}
  .menu-main-menu li.open>.sub-menu{display:block}
  .menu-item-has-children>a::after{content:' ›';font-size:14px;float:right;opacity:.6}
  .menu-item-has-children.open>a::after{transform:rotate(90deg);display:inline-block}
  #nav-search-wrapper{width:calc(100vw - 8px);right:0}

  /* Top stories → 1 cột */
  .top-media-stories.home-top-stories{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:unset}
  .story-1{grid-column:1;grid-row:1}
  .story-side{grid-column:1;grid-row:2;flex-direction:row}
  .story-side .story-small{flex:1}
  .story-1 .story-thumbnail-wrapper{height:240px}
  .story-side .story-small .story-thumbnail-wrapper{height:150px}

  /* Article loop → 1 cột */
  .article-loop{grid-template-columns:1fr}
  .article.half{flex-direction:row;max-height:100px}
  .article.half .entry-thumbnail{width:120px;flex-shrink:0}
  .article.half .entry-thumbnail picture,.article.half .entry-thumbnail img{aspect-ratio:auto;height:100px;width:120px}
  .entry-content{display:none}
  .entry-heading{font-size:15px}

  /* Video grid → 2 cột */
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .video-grid--2col{grid-template-columns:repeat(2,1fr)}

  /* Single article */
  .single-wrapper{padding:0 12px 24px}
  .article-title{font-size:var(--text-xl)}
  .article-body{font-size:var(--text-base)}
  .article-body h2{font-size:1.25em}
  .article-body h3{font-size:1.1em}
  .article-body pre{font-size:12px;padding:12px}
  .article-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Sidebar → dưới content */
  .content-row{grid-template-columns:1fr;gap:0}
  .content-sidebar{border-top:3px solid var(--sec-bg);padding-top:20px;margin-top:24px}
  .sidebar-inner{position:static}
  .sidebar-ad{min-height:90px}

  /* Footer */
  #footer-legal p{gap:4px 10px}
}

@media(max-width:480px){
  .site-name-logo{font-size:14px}
  .story-side{flex-direction:column}
  .story-side .story-small:nth-child(2){display:none}
  .story-1 .story-thumbnail-wrapper{height:200px}
  .story-side .story-small .story-thumbnail-wrapper{height:130px}
  .story-1 .headline{font-size:17px}
  .story-small .headline{font-size:15px}
  .video-grid{grid-template-columns:1fr 1fr;gap:8px 6px}
  .video-grid--2col{grid-template-columns:1fr 1fr;gap:8px 6px}
  .video-grid-title{font-size:15px}
  .article-title{font-size:20px}
  .article-body{font-size:15px}
}