@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root {
  --clay: #c4714a;
  --clay-light: #f9ede5;
  --clay-mid: #d4896a;
  --sand: #e8d5c4;
  --sand-light: #faf5f0;
  --bark: #3d2b1f;
  --bark-mid: #6b4c38;
  --bark-light: #9a7060;
  --sage: #7d9b76;
  --sage-light: #eef3ed;
  --cream: #fdf8f4;
  --white: #ffffff;
  --text: #2c1810;
  --muted: #8a6f61;
  --border: #e8d9cf;
  --shadow: 0 2px 16px rgba(61,43,31,0.06);
  --shadow-lg: 0 8px 40px rgba(61,43,31,0.12);
}

body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--text);background:var(--cream);line-height:1.65;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
.container{max-width:1280px;margin:0 auto;padding:0 28px;}

/* ==============================
   HEADER — Warm dashboard bar
   ============================== */
.site-header{background:var(--bark);position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,0.15);}
.header-top{display:flex;align-items:center;height:62px;gap:20px;}
.logo{font-family:'Fraunces',serif;font-size:24px;font-weight:700;color:var(--sand);letter-spacing:-0.3px;flex-shrink:0;display:flex;align-items:center;gap:8px;}
.logo-dot{width:8px;height:8px;background:var(--clay);border-radius:50%;display:inline-block;}

.main-nav ul{display:flex;list-style:none;gap:0;height:62px;align-items:center;}
.main-nav ul li{position:relative;height:100%;}
.main-nav ul li a{display:flex;align-items:center;height:100%;padding:0 14px;font-size:13px;font-weight:500;color:rgba(232,213,196,0.75);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all 0.2s;letter-spacing:0.2px;}
.main-nav ul li a:hover{color:var(--sand);border-bottom-color:var(--clay);background:rgba(255,255,255,0.04);}

/* Dropdown */
.vp-dropdown{position:relative;height:100%;}
.vp-dropdown-btn{display:flex;align-items:center;height:100%;padding:0 14px;font-size:13px;font-weight:500;color:rgba(232,213,196,0.75);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;font-family:inherit;gap:5px;transition:all 0.2s;}
.vp-dropdown-btn:hover{color:var(--sand);border-bottom-color:var(--clay);}
.vp-arrow{font-size:9px;transition:transform 0.2s;}
.vp-dropdown.is-open .vp-arrow{transform:rotate(180deg);}
.vp-dropdown.is-open .vp-dropdown-btn{color:var(--sand);}
.vp-dropdown-panel{position:absolute;top:calc(100% + 2px);right:0;background:var(--bark-mid);border:1px solid rgba(255,255,255,0.1);border-radius:10px;min-width:200px;padding:8px 0;z-index:200;box-shadow:0 8px 32px rgba(0,0,0,0.3);}
.vp-dropdown-panel[data-hidden="true"]{display:none!important;}
.vp-dropdown-panel[data-hidden="false"]{display:block!important;}
.vp-dropdown-panel a{display:block;padding:10px 18px;font-size:13px;color:rgba(232,213,196,0.8);transition:all 0.15s;}
.vp-dropdown-panel a:hover{background:rgba(196,113,74,0.2);color:var(--clay-mid);}

.header-right{margin-left:auto;display:flex;align-items:center;}
.header-search{display:flex;align-items:center;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:8px;overflow:hidden;}
.header-search input{border:none;padding:8px 14px;background:transparent;outline:none;font-size:13px;width:180px;color:var(--sand);font-family:inherit;}
.header-search input::placeholder{color:rgba(232,213,196,0.4);}
.header-search button{background:var(--clay);border:none;padding:8px 14px;cursor:pointer;color:white;font-size:14px;transition:background 0.2s;}
.header-search button:hover{background:var(--clay-mid);}
.mobile-toggle{display:none;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:var(--sand);padding:8px 12px;border-radius:6px;cursor:pointer;font-size:18px;}

/* ==============================
   HERO — Dashboard split
   ============================== */
.hn-hero{background:var(--sand-light);padding:0;border-bottom:1px solid var(--border);}
.hn-hero-inner{display:grid;grid-template-columns:1.2fr 1fr;min-height:480px;gap:0;}

/* Left: Stats + featured */
.hn-hero-left{display:flex;flex-direction:column;padding:40px 40px 40px 0;}

.hn-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:32px;}
.hn-stat-card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:4px;}
.hn-stat-num{font-family:'Fraunces',serif;font-size:28px;font-weight:700;color:var(--bark);line-height:1;}
.hn-stat-label{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}
.hn-stat-card.accent{background:var(--clay);border-color:var(--clay);}
.hn-stat-card.accent .hn-stat-num,.hn-stat-card.accent .hn-stat-label{color:white;}

.hn-featured-pill{display:inline-flex;align-items:center;gap:8px;background:var(--clay-light);border:1px solid var(--clay);border-radius:20px;padding:6px 14px;font-size:11px;font-weight:700;color:var(--clay);letter-spacing:0.5px;text-transform:uppercase;margin-bottom:14px;}
.hn-featured-pill span{width:6px;height:6px;background:var(--clay);border-radius:50%;display:inline-block;}

.hn-hero-left h1{font-family:'Fraunces',serif;font-size:32px;font-weight:700;color:var(--bark);line-height:1.25;margin-bottom:12px;}
.hn-hero-left p{font-size:15px;color:var(--muted);line-height:1.65;margin-bottom:20px;}

.hn-hero-meta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);margin-bottom:20px;flex-wrap:wrap;}
.hn-hero-meta .tag{background:var(--sage-light);color:var(--sage);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;}

.hn-read-btn{display:inline-flex;align-items:center;gap:8px;background:var(--bark);color:white;padding:12px 24px;font-size:14px;font-weight:600;border-radius:8px;transition:all 0.2s;font-family:inherit;}
.hn-read-btn:hover{background:var(--bark-mid);transform:translateY(-1px);}

/* Right: Image */
.hn-hero-right{position:relative;overflow:hidden;}
.hn-hero-right img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}
.hn-hero-right:hover img{transform:scale(1.03);}
.hn-hero-right-overlay{position:absolute;bottom:0;left:0;right:0;padding:24px;background:linear-gradient(to top,rgba(61,43,31,0.85) 0%,transparent 100%);}
.hn-quick-reads{display:flex;flex-direction:column;gap:8px;}
.hn-quick-read-item{background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all 0.2s;text-decoration:none;}
.hn-quick-read-item:hover{background:rgba(255,255,255,0.18);}
.hn-qr-num{font-family:'Fraunces',serif;font-size:16px;font-weight:700;color:var(--clay-mid);min-width:20px;}
.hn-qr-text{font-size:13px;color:white;line-height:1.3;font-weight:500;}

/* ==============================
   MOOD TRACKER BAR
   ============================== */
.hn-mood-bar{background:var(--white);border-bottom:1px solid var(--border);padding:20px 0;}
.hn-mood-inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.hn-mood-label{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);flex-shrink:0;}
.hn-mood-topics{display:flex;gap:10px;flex-wrap:wrap;}
.hn-mood-tag{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;background:var(--cream);border:1.5px solid var(--border);border-radius:30px;font-size:13px;font-weight:500;color:var(--bark-mid);transition:all 0.2s;cursor:pointer;}
.hn-mood-tag:hover,.hn-mood-tag.active{background:var(--clay);border-color:var(--clay);color:white;}
.hn-mood-tag .emoji{font-size:15px;}

/* ==============================
   CATEGORIES — Card grid
   ============================== */
.hn-cats-section{padding:40px 0;background:var(--white);}
.hn-cats-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}
.hn-cats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;}
.hn-cat-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px;background:var(--cream);border:1.5px solid var(--border);border-radius:12px;transition:all 0.2s;}
.hn-cat-card:hover{border-color:var(--clay);background:var(--clay-light);transform:translateY(-2px);box-shadow:var(--shadow);}
.hn-cat-icon{font-size:26px;}
.hn-cat-name{font-size:14px;font-weight:600;color:var(--bark);}
.hn-cat-count{font-size:11px;color:var(--muted);}

/* ==============================
   SECTION HEADER
   ============================== */
.hn-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;}
.hn-section-title{display:flex;align-items:center;gap:12px;}
.hn-section-title h2{font-family:'Fraunces',serif;font-size:28px;font-weight:700;color:var(--bark);}
.hn-section-badge{background:var(--clay);color:white;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:4px;}
.hn-see-all{font-size:13px;font-weight:600;color:var(--clay);display:flex;align-items:center;gap:4px;}
.hn-see-all:hover{color:var(--clay-mid);}

/* ==============================
   ARTICLES — Dashboard cards
   ============================== */
.hn-articles-section{padding:50px 0;background:var(--cream);}
.hn-articles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.hn-articles-grid .hn-card:first-child{grid-column:span 2;}

.hn-card{display:block;background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:all 0.25s;}
.hn-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--clay);}

.hn-card-img{overflow:hidden;height:190px;background:var(--sand);}
.hn-articles-grid .hn-card:first-child .hn-card-img{height:220px;}
.hn-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s;}
.hn-card:hover .hn-card-img img{transform:scale(1.05);}

.hn-card-body{padding:18px;}
.hn-articles-grid .hn-card:first-child .hn-card-body{padding:22px;}

.hn-card-cat{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--clay);margin-bottom:8px;background:var(--clay-light);padding:3px 10px;border-radius:20px;}

.hn-card-body h3{font-family:'Fraunces',serif;font-size:16px;font-weight:600;line-height:1.35;margin-bottom:8px;color:var(--bark);}
.hn-articles-grid .hn-card:first-child .hn-card-body h3{font-size:20px;}

.hn-card-body p{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

.hn-card-foot{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);padding-top:12px;border-top:1px solid var(--border);}
.hn-card-author{font-weight:600;color:var(--bark-mid);}
.hn-card-time{display:flex;align-items:center;gap:4px;}

/* Progress indicator */
.hn-card-progress{height:3px;background:var(--border);border-radius:2px;margin-bottom:14px;overflow:hidden;}
.hn-card-progress-bar{height:100%;background:linear-gradient(90deg,var(--clay),var(--sage));border-radius:2px;width:0;transition:width 0.3s;}
.hn-card:hover .hn-card-progress-bar{width:100%;}

/* ==============================
   PAGINATION
   ============================== */
.hn-pagination{display:flex;justify-content:center;gap:8px;margin-top:48px;}
.hn-pagination a,.hn-pagination span{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;font-weight:500;color:var(--bark);transition:all 0.2s;background:var(--white);}
.hn-pagination a:hover{border-color:var(--clay);color:var(--clay);background:var(--clay-light);}
.hn-pagination .current{background:var(--clay);color:white;border-color:var(--clay);}
.hn-pagination .disabled{opacity:0.35;cursor:not-allowed;}

/* ==============================
   TRENDING — Minimal numbered list
   ============================== */
.hn-trending-section{padding:50px 0;background:var(--white);}
.hn-trending-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:28px;}
.hn-trend-card{display:block;padding:20px;background:var(--cream);border:1px solid var(--border);border-radius:12px;transition:all 0.2s;}
.hn-trend-card:hover{border-color:var(--clay);background:var(--clay-light);transform:translateY(-2px);}
.hn-trend-num{font-family:'Fraunces',serif;font-size:40px;font-weight:700;color:var(--border);line-height:1;margin-bottom:10px;transition:color 0.2s;}
.hn-trend-card:hover .hn-trend-num{color:var(--clay-light);}
.hn-trend-cat{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--clay);display:block;margin-bottom:6px;}
.hn-trend-card h4{font-family:'Fraunces',serif;font-size:15px;font-weight:600;color:var(--bark);line-height:1.35;}

/* ==============================
   WELLBEING STRIP
   ============================== */
.hn-wellbeing-strip{background:var(--bark);padding:48px 0;}
.hn-wellbeing-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(255,255,255,0.08);border-radius:16px;overflow:hidden;}
.hn-wb-item{padding:28px;border-right:1px solid rgba(255,255,255,0.08);display:flex;flex-direction:column;gap:10px;}
.hn-wb-item:last-child{border-right:none;}
.hn-wb-icon{font-size:28px;}
.hn-wb-title{font-family:'Fraunces',serif;font-size:18px;font-weight:600;color:var(--sand);}
.hn-wb-desc{font-size:13px;color:rgba(232,213,196,0.6);line-height:1.5;}
.hn-wb-link{font-size:12px;font-weight:600;color:var(--clay-mid);display:inline-flex;align-items:center;gap:4px;margin-top:4px;}
.hn-wb-link:hover{color:var(--clay);}

/* ==============================
   FOOTER
   ============================== */
.hn-footer{background:var(--bark);padding:60px 0 0;margin-top:0;border-top:3px solid var(--clay);}
.hn-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,0.08);}
.hn-footer-brand .logo-foot{font-family:'Fraunces',serif;font-size:26px;font-weight:700;color:var(--sand);margin-bottom:6px;}
.hn-footer-brand .logo-foot span{color:var(--clay);}
.hn-footer-brand .tagline{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--clay-mid);margin-bottom:14px;display:block;}
.hn-footer-brand p{font-size:14px;line-height:1.7;color:rgba(232,213,196,0.5);}
.hn-footer-col h4{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(232,213,196,0.5);margin-bottom:18px;}
.hn-footer-col ul{list-style:none;}
.hn-footer-col ul li{margin-bottom:10px;}
.hn-footer-col ul li a{font-size:14px;color:rgba(232,213,196,0.6);transition:color 0.2s;}
.hn-footer-col ul li a:hover{color:var(--clay-mid);}
.hn-footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:12px;color:rgba(232,213,196,0.3);flex-wrap:wrap;gap:10px;}
.hn-footer-bottom a{color:rgba(232,213,196,0.3);}
.hn-footer-bottom a:hover{color:var(--clay-mid);}

/* ==============================
   ARTICLE PAGE
   ============================== */
.article-page{padding:50px 0;}
.article-layout{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start;}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.breadcrumb a:hover{color:var(--clay);}
.article-cat-tag{display:inline-flex;align-items:center;gap:6px;background:var(--clay-light);color:var(--clay);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:6px 14px;border-radius:20px;margin-bottom:14px;}
.article-header h1{font-family:'Fraunces',serif;font-size:38px;font-weight:700;line-height:1.2;color:var(--bark);margin-bottom:14px;}
.article-excerpt{font-size:18px;color:var(--muted);line-height:1.6;margin-bottom:18px;font-weight:300;}
.article-meta-compact{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);margin-bottom:28px;padding-bottom:20px;border-bottom:2px solid var(--clay);flex-wrap:wrap;}
.article-meta-compact .author-name{font-weight:700;color:var(--bark);}
.article-meta-compact .meta-sep{color:var(--sand);}
.article-hero-img{width:100%;border-radius:12px;margin-bottom:32px;max-height:480px;object-fit:cover;}

.article-body{font-size:17px;line-height:1.8;color:var(--text);}
.article-body h2{font-family:'Fraunces',serif;font-size:26px;font-weight:700;margin:40px 0 16px;color:var(--bark);padding-left:16px;border-left:4px solid var(--clay);}
.article-body h3{font-family:'Fraunces',serif;font-size:21px;font-weight:600;margin:32px 0 12px;color:var(--bark);}
.article-body p{margin-bottom:20px;}
.article-body ul,.article-body ol{margin:16px 0 20px 24px;}
.article-body li{margin-bottom:8px;}
.article-body img{width:100%;border-radius:10px;margin:28px 0;}
.article-body blockquote{border-left:4px solid var(--clay);background:var(--clay-light);padding:20px 24px;margin:28px 0;font-style:italic;font-size:18px;color:var(--bark-mid);border-radius:0 10px 10px 0;}
.article-body table{width:100%;border-collapse:collapse;margin:24px 0;border-radius:10px;overflow:hidden;box-shadow:var(--shadow);}
.article-body th{background:var(--bark);color:white;padding:12px 16px;text-align:left;font-size:13px;font-weight:600;}
.article-body td{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--white);}
.article-body tr:last-child td{border-bottom:none;}
.article-body tr:hover td{background:var(--cream);}
.article-body strong{color:var(--bark);}

.share-section{margin-top:48px;padding-top:28px;border-top:1px solid var(--border);}
.share-section p{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:12px;letter-spacing:1.5px;text-transform:uppercase;}
.share-btns{display:flex;gap:10px;}
.share-fb,.share-tw,.share-wa{padding:10px 20px;font-size:13px;font-weight:600;color:white;border-radius:8px;}
.share-fb{background:#1877f2;}.share-tw{background:#000;}.share-wa{background:#25d366;}

/* Sidebar */
.article-sidebar{}
.sidebar-widget{background:var(--white);padding:22px;margin-bottom:20px;border:1px solid var(--border);border-radius:12px;border-top:3px solid var(--clay);}
.sidebar-widget h3{font-family:'Fraunces',serif;font-size:17px;font-weight:700;margin-bottom:16px;color:var(--bark);}
.related-item{display:block;padding:12px 0;border-bottom:1px solid var(--border);}
.related-item:last-child{border-bottom:none;}
.rel-cat{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--clay);display:block;margin-bottom:4px;}
.related-item h4{font-size:14px;font-weight:600;color:var(--bark);line-height:1.35;}
.related-item:hover h4{color:var(--clay);}

/* ==============================
   SEARCH PAGE
   ============================== */
.search-page{padding:60px 0;}
.search-header{text-align:center;margin-bottom:48px;}
.search-header h1{font-family:'Fraunces',serif;font-size:40px;font-weight:700;color:var(--bark);margin-bottom:8px;}
.search-form-large{max-width:600px;margin:28px auto 0;display:flex;gap:0;border:2px solid var(--bark);border-radius:10px;overflow:hidden;}
.search-form-large input{flex:1;padding:14px 18px;border:none;outline:none;font-size:16px;font-family:inherit;background:var(--white);}
.search-form-large button{padding:14px 28px;background:var(--bark);color:white;border:none;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:background 0.2s;}
.search-form-large button:hover{background:var(--clay);}

/* ==============================
   CATEGORY PAGE
   ============================== */
.category-page{padding:50px 0;}
.category-header{background:linear-gradient(135deg,var(--bark) 0%,var(--bark-mid) 100%);color:white;padding:48px 0;margin-bottom:48px;border-bottom:4px solid var(--clay);}
.category-header h1{font-family:'Fraunces',serif;font-size:42px;font-weight:700;color:var(--sand);}
.category-header p{font-size:16px;color:rgba(232,213,196,0.7);margin-top:8px;}

/* ==============================
   RESPONSIVE
   ============================== */
@media(max-width:1100px){
  .hn-hero-inner{grid-template-columns:1fr;}
  .hn-hero-right{height:300px;}
  .hn-articles-grid{grid-template-columns:repeat(2,1fr);}
  .hn-articles-grid .hn-card:first-child{grid-column:span 2;}
  .hn-trending-grid{grid-template-columns:repeat(3,1fr);}
  .hn-wellbeing-inner{grid-template-columns:repeat(2,1fr);}
  .hn-footer-grid{grid-template-columns:1fr 1fr;}
  .article-layout{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .mobile-toggle{display:block;}
  .main-nav,.header-search{display:none;}
  .main-nav.is-open{display:block;position:absolute;top:100%;left:0;right:0;background:var(--bark-mid);padding:16px;z-index:99;}
  .main-nav.is-open ul{flex-direction:column;height:auto;}
  .main-nav.is-open ul li{height:auto;}
  .main-nav.is-open ul li a{height:auto;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.08);border-bottom-color:rgba(255,255,255,0.08)!important;}
  .hn-hero-stats{grid-template-columns:1fr 1fr;}
  .hn-hero-left{padding:24px;}
  .hn-articles-grid{grid-template-columns:1fr;}
  .hn-articles-grid .hn-card:first-child{grid-column:span 1;}
  .hn-trending-grid{grid-template-columns:1fr 1fr;}
  .hn-wellbeing-inner{grid-template-columns:1fr;}
  .hn-footer-grid{grid-template-columns:1fr;}
  .hn-hero-stats{grid-template-columns:1fr;}
}

/* ====================================== */
/* MOBILE RESPONSIVE FIXES (added later)  */
/* ====================================== */

/* ============================================
   HEALTHNUDGE MOBILE RESPONSIVE FIXES
   Add this CSS to /assets/css/style.css at the END
   ============================================ */

/* ===== HEADER MOBILE FIXES ===== */
@media (max-width: 899px) {
  .header-top {
    height: auto;
    min-height: 60px;
    padding: 10px 0;
    gap: 8px;
  }
  
  .logo {
    font-size: 17px !important;
  }
  
  .main-nav, .header-right { display: none; }
  
  .mobile-toggle, .hn-mobile-search-btn {
    display: flex !important;
  }
}

/* ===== HERO SLIDER MOBILE ===== */
@media (max-width: 899px) {
  .hn-hero {
    height: 380px !important;
  }
  
  .hn-slide-overlay {
    padding: 24px 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  
  .hn-slide-left h1 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  
  .hn-slide-left p {
    font-size: 13px !important;
    -webkit-line-clamp: 2 !important;
  }
  
  .hn-slide-tag {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
  
  .hn-slide-right {
    text-align: left !important;
  }
  
  .hn-author-row {
    justify-content: flex-start !important;
  }
  
  .hn-author-avatar {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
  }
  
  .hn-author-name, .hn-slide-meta {
    font-size: 12px !important;
  }
}

/* Slider arrows smaller on mobile */
@media (max-width: 899px) {
  .hn-arrow {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
  
  .hn-arrow-prev { left: 10px !important; }
  .hn-arrow-next { right: 10px !important; }
  
  .hn-dots {
    bottom: 14px !important;
  }
}

/* ===== CATEGORY TABS MOBILE ===== */
@media (max-width: 899px) {
  .hn-cat-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 16px !important;
    gap: 6px !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }
  
  .hn-cat-tabs::-webkit-scrollbar { display: none; }
  
  .hn-cat-tab {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
}

/* ===== ARTICLES GRID MOBILE ===== */
@media (max-width: 899px) {
  .hn-articles-grid,
  .hn-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .container {
    padding: 0 16px !important;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .hn-articles-grid,
  .hn-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
}

/* ===== ARTICLE CARDS MOBILE ===== */
@media (max-width: 899px) {
  .hn-article-card {
    border-radius: 12px !important;
  }
  
  .hn-article-img,
  .hn-card-img {
    height: 200px !important;
  }
  
  .hn-article-body,
  .hn-card-body {
    padding: 16px !important;
  }
  
  .hn-article-title,
  .hn-card-body h3,
  .hn-card-body h4 {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
  
  .hn-article-excerpt,
  .hn-card-body p {
    font-size: 13px !important;
  }
}

/* ===== SECTIONS GENERIC MOBILE ===== */
@media (max-width: 899px) {
  section {
    padding: 30px 0 !important;
  }
  
  .hn-section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
  }
  
  .hn-section-title,
  h2.section-title {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  
  .hn-section-subtitle {
    font-size: 14px !important;
  }
}

/* ===== PAGINATION MOBILE ===== */
@media (max-width: 899px) {
  .hn-pagination {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  
  .hn-pagination a,
  .hn-pagination span {
    padding: 8px 12px !important;
    font-size: 13px !important;
    min-width: 38px !important;
  }
}

/* ===== FOOTER MOBILE ===== */
@media (max-width: 899px) {
  .hn-footer-grid,
  .site-footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center;
  }
  
  .site-footer {
    padding: 32px 0 24px !important;
  }
}

/* ====================================== */
/* DESKTOP NAV FIX - prevent text wrapping */
/* ====================================== */
@media (min-width: 900px) {
  .main-nav ul li a {
    white-space: nowrap !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
  
  .vp-dropdown-btn {
    white-space: nowrap !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
  
  .header-search input {
    width: 150px !important;
    font-size: 13px !important;
  }
  
  .header-top {
    gap: 12px !important;
  }
  
  .logo {
    font-size: 18px !important;
  }
}

@media (min-width: 1100px) {
  .main-nav ul li a {
    padding: 0 14px !important;
    font-size: 14px !important;
  }
  .vp-dropdown-btn {
    padding: 0 14px !important;
    font-size: 14px !important;
  }
  .header-search input {
    width: 200px !important;
    font-size: 14px !important;
  }
  .logo {
    font-size: 20px !important;
  }
}