/* Hedgwatch — base theme + layout (HW mockup)
   Dark Zacks-like header + dropdowns + publishing styles
*/

:root{
  /* Palette (slightly lighter dark for long reading) */
  --bg:#141824;
  --panel:#1a2030;
  --panel2:#161d2c;

  --txt:#e9edf5;
  --muted:#b8c0d4;
  --muted2:#94a0bb;

  /* Accents (softer, less eye strain) */
  --accent:#3f8cff;
  --accent2:#7fb7ff;
  --ok:#3bd6a0;
  --warn:#f4c76f;
  --danger:#ff6b86;

  /* Common tokens */
  --bd:rgba(255,255,255,.10);
  --bd2:rgba(255,255,255,.14);
  --shadow:0 18px 46px rgba(0,0,0,.55);
  --r16:16px;

  /* Alias used by some blocks */
  --bad: var(--danger);
  --link: var(--accent2);
}

*{ box-sizing:border-box; max-width:100%; }
html, body{ height:100%; overflow-x:hidden; }
html{ font-size:17px; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size:16px;
  color:var(--txt);
  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(63,140,255,.10), transparent 55%),
    radial-gradient(900px 500px at 80% -20%, rgba(59,214,160,.07), transparent 60%),
    var(--bg);
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }
a.hw-link{ color:var(--link); }
a.hw-link:hover{ color:#d7fff0; }

/* =========================
   CENTERED SHELL
   ========================= */
.shell{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:14px;
}

/* =========================
   HEADER / NAV
   ========================= */
.hw-header{
  position:sticky;
  top:0;
  z-index:999;
  border-bottom:1px solid var(--bd);
  backdrop-filter: blur(10px);
  background: linear-gradient(#0c0e12, rgba(12,14,18,.92));
}

.hw-header-inner{
  padding-left:14px;
  padding-right:14px;
}

.hw-topbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--bd);
  min-width:0;
}

/* Brand (no button look) */
.hw-brandtab{
  display:flex;
  align-items:center;
  padding:10px 10px;
  font-weight:450;
  letter-spacing:.2px;
  font-size:21px;
  color:var(--txt);
  border:none;
  background:transparent;
  border-radius:0;
  white-space:nowrap;
  flex:0 0 auto;
  opacity:.95;
}
.hw-brandtab:hover{ opacity:1; }
.hw-brandtab:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(127,183,255,.18);
  border-radius:10px;
}

/* burger */
.hw-burger{
  display:none;
  width:44px;
  border:1px solid var(--bd);
  background: linear-gradient(#1a1c21, #101217);
  border-radius:12px;
  cursor:pointer;
  padding:10px;
  flex:0 0 auto;
}
.hw-burger span{
  display:block; height:2px; background:var(--txt); margin:4px 0; border-radius:2px;
}

/* NAV (horizontal) */
.hw-nav{
  display:flex;
  align-items:stretch;
  gap:0;
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:thin;
  padding-bottom:2px;
}
.hw-nav::-webkit-scrollbar{ height:8px; }
.hw-nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius:999px; }

.hw-dd{ position:relative; display:flex; flex:0 0 auto; }

.hw-tab{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  color:var(--txt);
  font-weight:850;
  font-size:15px;
  border:1px solid var(--bd);
  border-right:none;
  background: linear-gradient(#1a1c21, #101217);
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
}
.hw-tab:hover{ background: linear-gradient(#232632, #141722); }

.hw-nav .hw-dd:last-child .hw-tab{
  border-right:1px solid var(--bd);
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
}

.hw-caret{ font-size:12px; opacity:.85; }

/* dropdown */
.hw-menu{
  position:absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 250px;
  background: linear-gradient(#0f1115, #0b0d10);
  border:1px solid var(--bd2);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:10px;
  z-index:9999;

  opacity:0;
  visibility:hidden;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
  pointer-events:none;
}
.hw-menu::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-10px;
  height:10px;
  background:transparent;
}
.hw-dd.is-open .hw-menu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
  pointer-events:auto;
}
@media (min-width:980px){
  .hw-dd:hover .hw-menu{
    opacity:1;
    visibility:visible;
    transform: translateY(0);
    pointer-events:auto;
  }
}

.hw-menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  color:var(--txt);
  font-weight:850;
}
.hw-menu a:hover{ background: rgba(255,255,255,.06); }
.hw-menu small{ color:var(--muted2); font-weight:700; white-space:nowrap; }
.hw-menu .hw-sep{ height:1px; background: rgba(255,255,255,.08); margin:8px 4px; }

/* search */
.hw-search{
  display:flex;
  align-items:center;
  gap:0;
  flex:0 0 320px;
  max-width:42vw;
  margin-left:6px;
}
.hw-search input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--bd);
  border-right:none;
  border-top-left-radius:18px;
  border-bottom-left-radius:18px;
  outline:none;
  background:#0f1115;
  color:var(--txt);
  min-width:140px;
  font-size:15px;
}
.hw-search button{
  padding:10px 12px;
  border:1px solid var(--bd);
  border-top-right-radius:18px;
  border-bottom-right-radius:18px;
  background:#0f1115;
  color:var(--txt);
  cursor:pointer;
  flex:0 0 auto;
}

/* utility row */
.hw-subbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  background: rgba(15,17,21,.55);
  min-width:0;
}
.hw-util{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:14px;
  white-space:nowrap;
  font-weight:800;
  flex:0 0 auto;
}
.hw-util a{ color:var(--muted); }
.hw-util a:hover{ color:var(--txt); }
.hw-util .sep{ opacity:.45; }

/* =========================
   PAGE LAYOUT
   ========================= */
.hw-page{ padding:16px 0 40px 0; }
.grid{
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:16px;
  align-items:start;
  min-width:0;
}
main, aside{ min-width:0; }
@media (max-width:1220px){
  .grid{ grid-template-columns:1fr; }
}

/* =========================
   CARDS / PRIMITIVES
   ========================= */
.card{
  background: linear-gradient(#131722, #0f131b);
  border:1px solid var(--bd);
  border-radius: var(--r16);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  max-width:100%;
}
.pad{ padding:14px; }
.title{
  font-weight:950;
  letter-spacing:.2px;
  font-size:16px;
  margin:0 0 10px 0;
}
.muted{ color:var(--muted); }

.kicker{
  color:var(--muted2);
  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.h1{
  font-weight:950;
  font-size:36px;
  letter-spacing:.2px;
  margin:8px 0 8px 0;
}
.lead{
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
  margin:0;
}

.hr{ height:1px; background: rgba(255,255,255,.08); margin:12px 0; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--txt);
  font-weight:950;
  cursor:pointer;
}
.btn:hover{ background: rgba(255,255,255,.08); }
.btn.primary{ background: rgba(79,227,164,.12); border-color: rgba(79,227,164,.30); }
.btn.primary:hover{ background: rgba(79,227,164,.18); }
.btn.secondary{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.btn.danger{ background: rgba(255,92,122,.10); border-color: rgba(255,92,122,.24); }
.btn.ghost{ background: transparent; }

/* Inputs */
.input, select.input, textarea.input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(15,17,21,.8);
  color:var(--txt);
  outline:none;
  font-size:15px;
}
.input:focus{
  border-color: rgba(79,227,164,.35);
  box-shadow: 0 0 0 4px rgba(79,227,164,.10);
}
.formrow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width:860px){
  .formrow{ grid-template-columns:1fr; }
}

/* =========================
   NEWS LIST / ARTICLE READING
   ========================= */
.news-list{ display:flex; flex-direction:column; gap:10px; }
.news-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.news-item:hover{ background: rgba(255,255,255,.05); }

.news-item h3{
  margin:0 0 6px 0;
  font-size:19px;
  letter-spacing:.1px;
  line-height:1.2;
}
.news-meta{
  color:var(--muted2);
  font-weight:850;
  font-size:14px;
  margin:0 0 8px 0;
  opacity:.95;
}
.news-item p{
  margin:0;
  color:var(--muted);
  font-size:16.5px;
  line-height:1.75;
}

.news-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(79,227,164,.10);
  border:1px solid rgba(79,227,164,.22);
  color:#eafff6;
  font-weight:900;
  font-size:12px;
}

.article-prose{
  color:var(--txt);
  font-size:18px;
  line-height:1.85;
}
.article-prose h1, .article-prose h2, .article-prose h3{ color:var(--txt); }
.article-prose table{ width:100%; border-collapse:collapse; margin:12px 0; }
.article-prose th, .article-prose td{ border:1px solid rgba(255,255,255,.14); padding:8px; }
.article-prose th{ background: rgba(255,255,255,.06); }
.article-prose a{ color:var(--accent2); text-decoration:none; }
.article-prose a:hover{ text-decoration:underline; }

.small{ color:var(--muted2); font-size:13px; font-weight:800; }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:980px){
  .hw-burger{ display:inline-flex; flex-direction:column; justify-content:center; }
  .hw-search{ flex:1 1 auto; max-width:none; }

  .hw-nav{
    display:none;
    position:absolute;
    left:14px; right:14px;
    top:58px;
    background: linear-gradient(#0f1115, #0b0d10);
    border:1px solid var(--bd2);
    border-radius:16px;
    padding:10px;
    flex-direction:column;
    gap:8px;
    box-shadow: var(--shadow);
    overflow:visible;
  }
  .hw-nav.is-open{ display:flex; }

  .hw-dd{ width:100%; }
  .hw-tab{
    width:100%;
    border-radius:14px !important;
    border-right: 1px solid var(--bd);
  }

  .hw-menu{
    position:static;
    margin-top:8px;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
    display:none;
  }
  .hw-dd.is-open .hw-menu{ display:block; }
  .hw-menu::before{ display:none; }

  .hw-subbar{ flex-direction:column; align-items:flex-start; }
  .hw-util{ white-space:normal; flex-wrap:wrap; }
}

/* Ensure header can anchor the mobile drawer */
.hw-header-inner {
    position: relative;
}

/* Desktop default */
.hw-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hw-burger {
    display: none;
}

/* Hover dropdowns only on real hover devices (desktop) */
@media (hover: hover) and (pointer: fine) {
    .hw-dd:hover .hw-menu {
        display: block;
    }
}

/* Mobile: collapse nav into a drawer */
@media (max-width: 900px) {
    .hw-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        padding: 0 12px;
        border: 1px solid var(--bd);
        border-radius: 10px;
        background: var(--panel);
        color: var(--txt);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .hw-nav {
        display: none;
        position: absolute;
        top: 54px;
        left: 0;
        right: 0;
        z-index: 60;
        background: var(--panel);
        border-top: 1px solid var(--bd);
        padding: 12px 12px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

        .hw-nav.is-open {
            display: flex;
        }

    .hw-dd {
        width: 100%;
    }

    .hw-tab {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Mobile dropdown menu becomes inline, not absolute */
    .hw-menu {
        position: static;
        width: 100%;
        display: none;
        margin-top: 6px;
        border: 1px solid var(--bd);
        border-radius: 12px;
        overflow: hidden;
        background: var(--panel2);
    }

    .hw-dd.open .hw-menu {
        display: block;
    }

    .hw-search {
        width: 100%;
    }

        .hw-search input {
            width: 100%;
        }

    .hw-util {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* =========================================
   DESKTOP DROPDOWNS MUST FLOAT OVER PAGE
   (fix clipping + z-index + “inside div”)
   ========================================= */

/* Keep header above page content */
.hw-header {
    position: sticky;
    top: 0;
    z-index: 5000;
}

    /* MOST IMPORTANT: allow menus to escape the header container */
    .hw-header,
    .hw-header .hw-header-inner,
    .hw-header .hw-topbar,
    .hw-header .shell {
        overflow: visible !important;
    }

        /* If you have a backdrop/gradient layer on the header, force it behind */
        .hw-header::before,
        .hw-header::after {
            pointer-events: none;
            z-index: 0;
        }

.hw-header-inner {
    position: relative;
    z-index: 1;
}

/* Proper dropdown positioning */
.hw-dd {
    position: relative;
}

.hw-menu {
    display: none; /* default closed */
    position: absolute; /* FLOAT */
    top: calc(100% + 8px); /* below the tab */
    left: 0;
    min-width: 260px;
    z-index: 6000; /* above everything */
}

/* Open on hover for real desktop pointers */
@media (hover: hover) and (pointer: fine) {
    .hw-dd:hover .hw-menu {
        display: block;
    }
}

/* Also open when tab is focused (keyboard) */
.hw-dd:focus-within .hw-menu {
    display: block;
}

/* =========================================
   KILL THE “SECOND SCROLLBAR” (nested scroll)
   ========================================= */

/* Find any container that was made scrollable and neutralize it */
.hw-topbar {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.hw-page {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

    /* If your .shell class has overflow/height tricks, stop them in page body */
    .hw-page.shell {
        height: auto !important;
        overflow: visible !important;
    }

/* =========================================
   MOBILE: you can keep the drawer behavior
   (menus become inline INSIDE the drawer)
   ========================================= */
@media (max-width: 900px) {
    .hw-menu {
        position: static;
        min-width: 0;
        margin-top: 6px;
        display: none;
        z-index: auto;
    }

    .hw-dd.open .hw-menu {
        display: block;
    }
}