/*
Theme Name: Denver1 Edge v8
Theme URI: https://denver1news.com
Author: Mr. Ruziev
Author URI: https://denver1news.com
Description: Lean dark news grid theme with threaded comments, 400-char expand, and 8,000-char limit.
Version: 8.9.1
License: GPL-2.0+
Text Domain: denver1news
*/

/* === Vars === */
:root{
  --container:860px;
  --gap:16px;
  --text:#fff;
  --muted:#c8c8c8;
  --accent:#6ea8fe;
  --border:#1f1f1f;
  --dropdown-bg:#0f0f0f;
  --active-underline:#0b2a66;
}

/* === Base === */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#000; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";
  color:var(--text); line-height:1.5;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* === Header === */
.header{
  position:sticky; top:0; z-index:20; background:#000;
  border-bottom:1px solid var(--border); width:100%;
}
.header-inner{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  width:100%; padding:4px var(--gap);
}
.brand a{ display:flex; }
.custom-logo{ height:60px; width:auto; display:block; }

.header-center{ display:flex; justify-content:center; }
.header-center .nav{ display:flex; }

.header-right{ justify-self:end; display:flex; gap:10px; align-items:center; }

/* icon strips (header + footer socials) */
.header-top-icons,
.footer-icons{ display:flex; gap:10px; align-items:center; justify-content:flex-end; }
.header-top-icons a,
.footer-icons a{ display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; }
.header-top-icons svg,
.footer-icons svg{ width:20px; height:20px; fill:#fff; }

/* === Desktop nav & dropdowns === */
.nav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.header-center .nav .nav-item.has-dropdown,
.header-center .nav .menu-item-has-children{ position:relative; }

.header-center .nav .nav-item.has-dropdown > .dropdown-menu,
.header-center .nav .menu-item-has-children > .sub-menu{
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  z-index:500; margin:0; padding:6px; list-style:none;
  background:var(--dropdown-bg); border:1px solid var(--border); border-radius:8px;
  width:max-content; min-width:0;
}

.header-center .nav .nav-item.has-dropdown:hover > .dropdown-menu,
.header-center .nav .nav-item.has-dropdown:focus-within > .dropdown-menu,
.header-center .nav .menu-item-has-children:hover > .sub-menu,
.header-center .nav .menu-item-has-children:focus-within > .sub-menu{ display:block; }

.header-center .nav .nav-item.has-dropdown > .dropdown-menu a,
.header-center .nav .menu-item-has-children > .sub-menu a{
  display:block; padding:6px 10px; border-radius:6px;
  color:#fff; font-weight:800; text-align:center; text-decoration:none;
}
.header-center .nav .nav-item.has-dropdown > .dropdown-menu a:hover,
.header-center .nav .menu-item-has-children > .sub-menu a:hover{ background:#fff; color:#000; }

.nav-item > a{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  color:#fff; padding:6px 10px; border-radius:6px; font-weight:800;
}
.nav-item > a:hover{ background:#fff; color:#000; }
.nav-item > a.active::after{
  content:""; position:absolute; left:8px; right:8px; bottom:-6px; height:4px;
  background:var(--active-underline); border-radius:2px;
}

/* === Header controls (search + hamburger in header only) === */
.header .icon-btn,
.header .hamburger{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:6px;
  background:transparent; padding:0; cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease, color .2s ease;
}
.header .icon-btn svg,
.header .hamburger svg{ width:18px; height:18px; fill:var(--muted); transition:fill .2s ease; }
.header .icon-btn:hover,
.header .icon-btn:focus,
.header .hamburger:hover,
.header .hamburger:focus{ border-color:#fff; background:var(--active-underline); color:#fff; }
.header .icon-btn:hover svg,
.header .icon-btn:focus svg,
.header .hamburger:hover svg,
.header .hamburger:focus svg{ fill:#fff; }

/* === Mobile panel === */
.mobile-panel{
  display:none; position:absolute; top:100%; right:var(--gap); left:var(--gap);
  background:#000; border:1px solid var(--border); border-radius:12px; padding:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); z-index:200;
}
.mobile-panel.open{ display:block; }
.mobile-panel .mobile-nav{ display:grid; grid-template-columns:1fr; gap:10px; }
.mobile-panel .mobile-nav a{
  color:#fff; padding:8px 10px; border-radius:8px; border:1px solid var(--border);
  text-align:center; font-weight:800;
}
.mobile-panel .mobile-nav a:hover{ background:#fff; color:#000; }

@media (min-width:1025px){
  .mobile-panel{
    inset:auto !important; top:calc(100% + 8px) !important; right:var(--gap) !important;
    width:360px !important; max-width:min(360px, calc(100vw - 2*var(--gap))) !important; padding:12px !important;
  }
  .hamburger{ display:none; }
}

/* === Search panel === */
.header-search-panel{
  position:absolute; left:0; right:0; top:100%;
  background:#000; border-top:1px solid rgba(255,255,255,.1); padding:12px 16px; z-index:9999;
}
.header-search-panel[hidden]{ display:none !important; }
.header-search-panel .search-form{
  max-width:720px; margin:0 auto;
  display:grid; grid-template-columns:1fr auto; gap:8px;
}
.header-search-panel .search-field{
  width:100%; padding:10px 12px; font-size:16px; color:#fff; background:#111;
  border:1px solid rgba(255,255,255,.2); border-radius:8px;
}
.header-search-panel .search-submit{
  display:inline-flex; align-items:center; justify-content:center; padding:0 14px;
  border:1px solid rgba(255,255,255,.2); background:#04164c; color:#fff; border-radius:8px;
}
.header-search-panel .search-submit svg{ width:18px; height:18px; fill:#fff; }

/* === Layout === */
.main{ max-width:var(--container); margin:0 auto; padding:16px var(--gap) 80px; }
.article{ padding-top:8px; }
.h1{ font-size:28px; margin:10px 0; font-weight:800; color:#fff; }

/* === Content defaults === */
.article .content p{ margin:12px 0; }
.article .content img{ max-width:100%; height:auto; display:block; }
.article .content figure{ margin:16px 0; } /* reset UA figure margins */

/* === Share bar === */
.sharebar{ margin-top:18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sharebar .label{ font-weight:800; color:#fff; margin-right:4px; }
.sharebar a{ display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center; }
.sharebar svg{ width:26px; height:26px; fill:#fff; }

/* === Footer (socials only) === */
.footer{ border-top:1px solid var(--border); color:var(--muted); background:#000; }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:12px var(--gap); margin:0 auto; font-size:14px;
}
.copy{ margin-right:auto; }
.footer-icons{ margin-left:auto; }

/* === Grid / Cards === */
.list.grid{ display:grid; width:100%; margin:0 auto; grid-template-columns:repeat(3,1fr); gap:2px; }
@media (max-width:1023.98px){ .list.grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:699.98px){ .list.grid{ grid-template-columns:1fr; } }

.card{ position:relative; border:none; border-radius:0; overflow:hidden; background:#000; }
.card-link{ display:block; color:inherit; }
.card-media{ position:relative; overflow:hidden; }
.card-media::before{ content:""; display:block; width:100%; aspect-ratio:16/9; }
.card-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#111; display:block;
  filter:brightness(.92); transition:transform .25s ease, filter .25s ease;
}
.card:hover .card-img{ transform:scale(1.035); filter:brightness(1); }
.card-media::after{
  content:""; position:absolute; inset:-1px;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,0) 100%);
  z-index:2; pointer-events:none;
}
.card-overlay{ display:none !important; }
.card-title{
  position:absolute; left:12px; right:120px; bottom:12px; margin:0; font-size:18px; font-weight:800; color:#fff; z-index:3; pointer-events:none;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}
.card-time{
  position:absolute; right:12px; bottom:12px; color:var(--muted); font-size:13px; z-index:3; pointer-events:none;
  text-shadow:0 1px 6px rgba(0,0,0,.85), 0 3px 12px rgba(0,0,0,.5);
}

/* === Byline === */
.article .content::after{ content:""; display:block; clear:both; }
.ubn-byline-top{
  clear:both; display:flex; align-items:center; gap:8px; padding:6px 8px; color:#fff; margin:12px 0 14px; font-size:.92em; width:100%;
}
.ubn-byline-top img{ width:40px; height:40px; border-radius:50%; object-fit:cover; display:block; flex:0 0 auto; }
.ubn-byline-top .name{ font-weight:400; white-space:nowrap; }
.ubn-byline-top .posted{ font-style:italic; font-size:.9em; color:var(--muted); margin-top:2px; }

/* === Page containers === */
.home .main{ padding:8px 0 48px !important; max-width:none !important; }
main.main.article{ max-width:var(--container) !important; margin:0 auto !important; padding:16px var(--gap) 80px !important; }

/* === Small tweaks === */
@media (max-width:680px){
  .custom-logo{ height:46px; }
  .header-inner{ padding:1px 1px; gap:1px; }
}

/* === Home hover === */
.home .list.grid .card{ transition: box-shadow .18s ease; }
.home .list.grid .card:is(:hover, :focus-within, :active){
  box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(255,255,255,.35);
}
@media (hover:none),(pointer:coarse),(max-width:1024px){
  .home .list.grid .card,
  .home .list.grid .card:is(:hover, :focus-within, :active){
    box-shadow:none !important; transform:none !important; filter:brightness(.92) !important;
  }
}

/* === Contact === */
.contact .container{ max-width:var(--container); margin:0 auto; padding:16px; }
.contact-form .row{ display:flex; gap:var(--gap); flex-wrap:wrap; }
.contact-form label{ display:block; flex:1 1 280px; margin:0 0 12px; }
.contact-form input,.contact-form textarea{
  width:100%; padding:12px; background:#0a0a0a; border:1px solid var(--border); color:var(--text); border-radius:8px;
}
.contact-form .btn{ display:inline-block; padding:12px 16px; background:var(--accent); color:#000; border:0; border-radius:12px; cursor:pointer; }
.contact-form .btn:hover{ filter:brightness(1.1); }
.contact-form .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.notice.success{ background:#0d2; color:#000; padding:12px; border-radius:8px; margin:12px 0; }
.notice.error{ background:#300; color:#f66; padding:12px; border-radius:8px; margin:12px 0; }
.small.muted{ color:var(--muted); font-size:.9rem; }

/* === Comments (minimal) === */
.comments{ margin-top:24px; clear:both; }
.c-title{ font-size:18px; font-weight:800; margin:0 0 12px; color:#fff; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-list .children{ list-style:none; margin-left:16px; padding-left:16px; border-left:1px solid var(--border); }
.c-wrap{ padding:12px; border:1px solid var(--border); border-radius:8px; background:#000; margin-bottom:10px; }
.c-meta{ display:flex; gap:10px; align-items:baseline; font-size:14px; color:var(--muted); margin-bottom:6px; }
.c-author{ color:#fff; font-weight:800; }
.c-time{ font-size:12px; color:var(--muted); }
.c-body{ color:#fff; }
.c-more{ margin-top:6px; background:transparent; border:1px solid var(--border); color:#fff; padding:4px 8px; border-radius:6px; cursor:pointer; }
.c-actions .comment-reply-link{ color:#fff; text-decoration:none; font-size:.95em; }
.c-actions .comment-reply-link:hover{ text-decoration:underline; }

/* Form */
.comment-form label{ display:block; margin-bottom:4px; color:#fff; font-weight:600; }
.comment-form input[type="text"], .comment-form textarea{
  width:100%; padding:10px 12px; background:#0a0a0a; border:1px solid var(--border);
  color:#fff; border-radius:8px; font:inherit;
}
.comment-form .submit{
  display:inline-block; padding:10px 14px; background:#000; color:#fff;
  border:1px solid #fff; border-radius:10px; cursor:pointer; font-weight:800;
}
.comment-form .submit:hover{ background:#fff; color:#000; }
.c-remaining{ display:block; margin-top:6px; font-size:12px; color:#777; }
.c-moderation{ display:block; font-size:12px; color:#f6a; }

/* Cancel reply under the title line */
.comment-reply-title small,
#cancel-comment-reply-link{ display:block; margin-top:4px; }

/* Hide WP cookie checkbox in form */
.comment-form-cookies-consent,
#wp-comment-cookies-consent,
label[for='wp-comment-cookies-consent']{ display:none !important; }
/* Comment author styling to match request */
.comments .c-by { font-size: 12px; } /* ensures the row uses the same base size as time */
.comments .c-by .c-author,
.comments .c-by .c-author a{
  color: var(--accent) !important;  /* light blue like links */
  font-style: italic;               /* italicized name */
  font-size: 12px;                  /* match .c-time */
  text-decoration: none;
}

/* === Single Post: Mobile/Tablet full-bleed images without cropping === */
@media (max-width:1024px){
  .single-post .article .content{ overflow-x: visible; }

  /* Make common image containers full viewport width */
  .single-post .article .content .wp-block-image,
  .single-post .article .content figure.wp-block-image,
  .single-post .article .content > p > img,
  .single-post .article .content img.size-full,
  .single-post .article .content img.alignwide,
  .single-post .article .content .wp-post-image {
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
  }

  /* Ensure the actual <img> scales to natural height */
  .single-post .article .content figure.wp-block-image img,
  .single-post .article .content > p > img {
    width:100% !important;
    height:auto !important;
    object-fit:contain !important; /* never crop */
    display:block !important;
  }

  .single-post .article .content figure.wp-block-image figcaption{
    padding:8px 16px;
    text-align:center;
  }
}

.search .main{ padding:8px 0 48px !important; max-width:none !important; }

/* === Mobile/Tablet header: hide inline nav, show hamburger === */
@media (max-width:1024px){
  .header-center .nav{ display:none !important; }
  .header .hamburger{ display:inline-flex !important; }
}

/* === Single Post: Desktop scale images to content width === */
@media (min-width:1025px){
  .single-post .article .content figure.wp-block-image,
  .single-post .article .content figure.wp-block-image img,
  .single-post .article .content > p > img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    display:block !important;
  }
}
/* Threads glyph uses the same 26x26 box as other icons */
.sharebar .share-threads .glyph{font-weight:800;font-size:24px;line-height:1;display:block;color:#fff;}
.sharebar .share-threads:hover .glyph,
.sharebar .share-threads:focus .glyph{ color:#fff; }
/* === Threads social icon (@) === */
.header .soc-threads,
.footer .soc-threads{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  font-weight:800; font-size:18px; line-height:1; text-decoration:none;
  color:#fff;
}
.header .soc-threads:hover,
.header .soc-threads:focus,
.footer .soc-threads:hover,
.footer .soc-threads:focus{ color:#000; background:#fff; }


/* === v8.8 hotfix: Threads share, nav hover underline, and icon hover === */

/* Share bar: enlarge Threads glyph, white/bold, no underline, top-aligned with neighbors */
.sharebar { align-items: flex-start; }
.sharebar a { text-decoration: none; } /* prevent underline on hover via global a:hover */
.sharebar a:hover, .sharebar a:focus { text-decoration: none; }

.sharebar .share-threads { width: auto; height: auto; align-items: flex-start; }
.sharebar .share-threads .glyph {
  font-weight: 800;
  font-size: 52px; /* roughly 2x the 26px icon box */
  line-height: 1;
  color: #fff;
  display: block;
}

/* Header & mobile menus: never underline on hover */
.header .nav a,
.header .nav a:hover,
.header .nav a:focus,
.mobile-nav a,
.mobile-nav a:hover,
.mobile-nav a:focus {
  text-decoration: none !important;
}

/* Hamburger / menu buttons are buttons; ensure no underline visuals anywhere in header */
.header a:hover, .header a:focus { text-decoration: none; }

/* Threads social buttons (header/footer): remove invert-on-hover */
.header .soc-threads:hover,
.header .soc-threads:focus,
.footer .soc-threads:hover,
.footer .soc-threads:focus {
  color: #fff;
  background: transparent;
}

/* Ensure consistency for icon-only buttons in header/footer */
.header .icon-btn:hover svg,
.header .icon-btn:focus svg {
  text-decoration: none;
}


/* v8.9: Adopt Threads @ size from v9.5 (only size) */
.sharebar .share-threads .glyph { font-size: 24px !important; }


/* v8.9: Tighten header social icon spacing uniformly */
.header-right{ gap:6px !important; }
.header-right > a,
.header-right .icon-btn,
.header-right .soc-threads{ margin:0 !important; }


/* v8.9.1: Set header social icon spacing to 50% of previous (6.0px -> 3.0px) */
.header-right { gap:3.0px !important; }
.header-right > a,
.header-right .icon-btn,
.header-right .soc-threads { margin:0 !important; }


/* v8.9.1r: Threads 0px border + 2px header spacing (no icon size changes) */
.header-right { gap:2px !important; }
.header-right > a,
.header-right .icon-btn,
.header-right .soc-threads { margin:0 !important; }

/* Zero border on Threads button in header and footer */
.header .soc-threads,
.footer .soc-threads { border:0 !important; }


/* v8.9.1s: Make header social icons ultra-tight and even */
/* Collapse spacing on the actual container that holds the icons */
.header-top-icons{ gap:1px !important; }
.header-top-icons a{ margin:0 !important; display:inline-flex; align-items:center; justify-content:center; }

/* Make the Threads "@" box match the other icons' footprint so spacing is even */
.header .soc-threads{
  width:20px !important;
  height:20px !important;
  border:0 !important;        /* keep borderless per your request */
  font-weight:800;
  font-size:18px !important;  /* fits cleanly inside 20x20 */
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}


/* v8.9.1t: increase header social icon gap to 4px */
.header-top-icons{ gap:4px !important; }