﻿/* WalterHennery — Shared Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Inter:wght@400;500;600;700;800&family=Noto+Color+Emoji&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{--ink:#111827;--ink2:#374151;--muted:#6b7280;--light:#f9fafb;--border:#e5e7eb;--blue:#1d4ed8;--blue2:#dbeafe;--red:#dc2626;--red2:#fee2e2;--green:#16a34a;--green2:#dcfce7;--gold:#b45309;--gold2:#fef3c7;--purple:#7c3aed;--purple2:#ede9fe;--white:#fff;--shadow:0 1px 4px rgba(0,0,0,0.07)}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'Inter',system-ui,sans-serif;background:#f3f4f6;color:var(--ink);line-height:1.6;font-size:15px}
.brk-bar{background:var(--red);color:#fff;padding:7px 0;font-size:0.78rem;font-weight:700;overflow:hidden}
.brk-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:14px}
.brk-label{background:#fff;color:var(--red);padding:2px 10px;border-radius:3px;font-size:0.72rem;font-weight:800;white-space:nowrap;letter-spacing:.5px}
.brk-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header{background:#fff;border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:999}
.hdr-top{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.logo-name{font-family:'Merriweather',serif;font-size:1.75rem;font-weight:700;color:var(--ink);letter-spacing:-1px;line-height:1;text-decoration:none;display:block}
.logo-tag{font-size:0.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-weight:600;display:block;margin-top:2px}
.hdr-search{display:flex;border:1.5px solid var(--border);border-radius:6px;overflow:visible;background:#f9fafb;margin:0;position:relative;}
.hdr-search input{border:none;background:transparent;padding:7px 12px;font-size:0.85rem;outline:none;width:180px;font-family:inherit;color:var(--ink);border-radius:4px 0 0 4px}
.hdr-search button{background:var(--ink);color:#fff;border:none;padding:7px 14px;cursor:pointer;font-size:0.8rem;font-weight:700;border-radius:0 4px 4px 0}
.nav-bar{background:var(--ink)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;overflow-x:auto}
.nav-inner::-webkit-scrollbar{display:none}
.nav-inner a{color:rgba(255,255,255,.82);text-decoration:none;padding:10px 15px;font-size:0.78rem;font-weight:700;white-space:nowrap;border-right:1px solid rgba(255,255,255,.08);transition:background .15s;text-transform:uppercase;letter-spacing:.4px;display:block}
.nav-inner a:hover,.nav-inner a.active{background:var(--blue);color:#fff}
.nav-inner a.hl{background:var(--red);color:#fff}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.main-grid{display:grid;grid-template-columns:1fr 300px;gap:28px;padding:24px 0 48px}
.art-page{display:grid;grid-template-columns:1fr 300px;gap:28px;padding:24px 0 48px}
.sec-label{display:flex;align-items:center;gap:10px;margin:24px 0 16px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.sec-label span{font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;background:var(--ink);color:#fff;padding:3px 10px;border-radius:3px}
.sec-label .ln{flex:1;height:1px;background:var(--border)}
.art-cat{font-size:0.68rem;font-weight:700;padding:3px 9px;border-radius:3px;text-transform:uppercase;letter-spacing:.4px;display:inline-block;margin-bottom:8px}
.cat-money{background:var(--green2);color:var(--green)}
.cat-health{background:var(--red2);color:var(--red)}
.cat-tech{background:var(--purple2);color:var(--purple)}
.cat-finance{background:var(--blue2);color:var(--blue)}
.cat-howto{background:var(--gold2);color:var(--gold)}
.cat-sports{background:#fef3c7;color:#b45309}
.meta{display:flex;align-items:center;gap:10px;font-size:0.74rem;color:var(--muted);flex-wrap:wrap}
.meta .au{font-weight:700;color:var(--ink)}
.dot{color:#d1d5db}
.art{background:#fff;border:1px solid var(--border);border-radius:8px;padding:28px 32px;margin-bottom:24px}
.art h1{font-family:'Merriweather',serif;font-size:1.65rem;font-weight:700;line-height:1.35;color:var(--ink);margin-bottom:10px}
.art h2{font-family:'Merriweather',serif;font-size:1.5rem;font-weight:700;line-height:1.35;color:var(--ink);margin-bottom:10px}
.art h2 a{color:inherit;text-decoration:none}
.art h2 a:hover{color:var(--blue);text-decoration:underline}
.art .lede{font-size:1rem;color:var(--ink2);line-height:1.8;margin:14px 0 20px;font-weight:400;border-left:3px solid var(--ink);padding-left:16px}
.art h3{font-family:'Merriweather',serif;font-size:1.05rem;font-weight:700;color:var(--ink);margin:24px 0 10px;border-bottom:1px solid var(--border);padding-bottom:6px}
.art h4{font-size:0.95rem;font-weight:700;color:var(--ink);margin:16px 0 8px}
.art p{font-size:0.93rem;color:var(--ink2);line-height:1.85;margin-bottom:14px}
.art ul,.art ol{padding-left:22px;margin-bottom:16px}
.art li{font-size:0.93rem;color:var(--ink2);line-height:1.8;margin-bottom:6px}
.art strong{color:var(--ink);font-weight:700}
.art table{width:100%;border-collapse:collapse;margin:16px 0;font-size:0.88rem}
.art th{background:var(--ink);color:#fff;padding:10px 14px;text-align:left;font-weight:700;font-size:0.8rem}
.art td{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--ink2)}
.art tr:nth-child(even) td{background:#f9fafb}
.art table{overflow-x:auto;display:block;}
.callout{background:var(--blue2);border-left:3px solid var(--blue);border-radius:0 6px 6px 0;padding:14px 18px;margin:18px 0;font-size:0.9rem;color:var(--ink2);line-height:1.7}
.callout strong{color:var(--blue)}
.warn{background:var(--gold2);border-left:3px solid var(--gold);border-radius:0 6px 6px 0;padding:14px 18px;margin:18px 0;font-size:0.9rem;color:var(--ink2);line-height:1.7}
.warn strong{color:var(--gold)}
.success{background:var(--green2);border-left:3px solid var(--green);border-radius:0 6px 6px 0;padding:14px 18px;margin:18px 0;font-size:0.9rem;color:var(--ink2);line-height:1.7}
.success strong{color:var(--green)}
.art-footer{border-top:1px solid var(--border);padding-top:14px;margin-top:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.share-row{display:flex;gap:6px}
.sbtn{padding:6px 12px;border-radius:4px;font-size:0.73rem;font-weight:700;border:none;cursor:pointer}
.s-fb{background:#1877f2;color:#fff}
.s-tw{background:#000;color:#fff}
.s-rd{background:#ff4500;color:#fff}
.s-cp{background:var(--light);color:var(--ink);border:1px solid var(--border)}
.tri-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:24px}
.tri-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:18px;transition:box-shadow .2s}
.tri-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08)}
.tri-card .ico{font-size:2.5rem;margin-bottom:10px;display:block}
.tri-card h3{font-family:'Merriweather',serif;font-size:0.88rem;font-weight:700;line-height:1.4;margin-bottom:8px}
.tri-card h3 a{color:var(--ink);text-decoration:none}
.tri-card h3 a:hover{color:var(--blue)}
.tri-card p{font-size:0.8rem;color:var(--muted);line-height:1.6}
.sidebar{display:flex;flex-direction:column;gap:20px}
.widget{background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.w-head{background:var(--ink);color:#fff;padding:10px 16px;font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.w-body{padding:16px}
.rel-list{list-style:none}
.rel-list li{padding:10px 0;border-bottom:1px solid var(--border)}
.rel-list li:last-child{border-bottom:none;padding-bottom:0}
.rel-list a{color:var(--ink);text-decoration:none;font-size:0.85rem;font-weight:600;line-height:1.4;display:block}
.rel-list a:hover{color:var(--blue)}
.rel-list span{font-size:0.72rem;color:var(--muted);display:block;margin-top:2px}
.nl-box{padding:18px;background:linear-gradient(135deg,#0f172a,#1e3a8a);color:#fff}
.nl-box h3{font-size:0.95rem;font-weight:700;margin-bottom:6px}
.nl-box p{font-size:0.8rem;opacity:.75;margin-bottom:12px;line-height:1.55}
.nl-input{width:100%;padding:9px 12px;border:none;border-radius:4px;font-size:0.85rem;margin-bottom:8px;font-family:inherit;outline:none}
.nl-btn{width:100%;padding:10px;background:#dc2626;color:#fff;border:none;border-radius:4px;font-weight:800;cursor:pointer;font-size:0.88rem;font-family:inherit}
.nl-btn:hover{background:#b91c1c}
.topic-cloud{display:flex;flex-wrap:wrap;gap:6px}
.t-chip{padding:5px 11px;background:var(--light);border:1px solid var(--border);border-radius:4px;font-size:0.76rem;font-weight:600;color:var(--ink2);text-decoration:none;transition:all .15s}
.t-chip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.back-btn{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-size:0.85rem;font-weight:700;text-decoration:none;margin-bottom:16px}
.back-btn:hover{text-decoration:underline}
footer{background:var(--ink);color:rgba(255,255,255,.55);margin-top:20px}
.footer-top{padding:40px 0 32px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
.ft-brand .fn{font-family:'Merriweather',serif;font-size:1.3rem;color:#fff;display:block;margin-bottom:4px}
.ft-brand .ft{font-size:0.68rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:1.2px;display:block;margin-bottom:12px}
.ft-brand p{font-size:0.82rem;line-height:1.7;color:rgba(255,255,255,.48)}
.f-col h4{font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#fff;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}
.f-col ul{list-style:none}
.f-col li{margin-bottom:8px}
.f-col a{color:rgba(255,255,255,.48);text-decoration:none;font-size:0.82rem;transition:color .15s}
.f-col a:hover{color:#fff}
.footer-btm{border-top:1px solid rgba(255,255,255,.08);padding:16px 0;display:flex;justify-content:space-between;font-size:0.78rem;flex-wrap:wrap;gap:8px}

/* Toast Notification */
#toast { visibility:hidden; min-width:250px; background-color:#16a34a; color:#fff; text-align:center; border-radius:6px; padding:12px 20px; position:fixed; z-index:9999; left:50%; bottom:20px; transform:translateX(-50%); font-size:0.95rem; font-weight:700; opacity:0; transition:opacity 0.3s, bottom 0.3s; box-shadow:0 4px 12px rgba(0,0,0,0.15); pointer-events:none; }
#toast.show { visibility:visible; opacity:1; bottom:40px; }
#toast.error { background-color:#dc2626; }

/* Hero Slider */
.hero-slider{position:relative;border-radius:10px;overflow:hidden;margin-bottom:28px;background:#0f172a;min-height:420px;}
.hero-slide{display:none;position:relative;min-height:420px;}
.hero-slide.active{display:grid;grid-template-columns:55% 45%;animation:fadeIn .5s ease;}
.hero-slide-content{padding:40px 40px 40px 44px;display:flex;flex-direction:column;justify-content:center;color:#fff;z-index:2;background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 65%,#312e81 100%);}
.hero-slide-content h2{font-family:'Merriweather',serif;font-size:1.55rem;font-weight:700;line-height:1.35;margin:12px 0 10px;}
.hero-slide-content h2 a{color:#fff;text-decoration:none;}
.hero-slide-content h2 a:hover{text-decoration:underline;}
.hero-slide-content p{font-size:0.92rem;opacity:.85;line-height:1.7;margin-bottom:14px;max-width:480px;}
.hero-slide-img{position:relative;background-size:cover;background-position:center;}
.hero-slide-img::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.1) 100%);z-index:1;}
.hero-meta{display:flex;align-items:center;gap:8px;font-size:0.78rem;opacity:.7;margin-bottom:18px;}
.hero-meta span{color:#fff;}
.hero-btn{display:inline-block;background:rgba(255,255,255,0.15);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.25);color:#fff;padding:10px 24px;border-radius:6px;font-size:0.85rem;font-weight:700;text-decoration:none;width:fit-content;transition:all .2s;}
.hero-btn:hover{background:rgba(255,255,255,0.25);transform:translateX(4px);}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.15);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:2rem;width:48px;height:48px;border-radius:50%;cursor:pointer;z-index:10;transition:all .2s;display:flex;align-items:center;justify-content:center;}
.hero-arrow:hover{background:rgba(255,255,255,0.3);transform:translateY(-50%) scale(1.1);}
.hero-prev{left:16px;}
.hero-next{right:16px;}
.hero-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10;}
.hero-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:all .2s;}
.hero-dot.active{background:#fff;transform:scale(1.2);}
.hero-dot:hover{background:rgba(255,255,255,0.6);}
@keyframes fadeIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}
@media(max-width:768px){
.hero-slider{min-height:auto;}
.hero-slide.active{grid-template-columns:1fr;min-height:auto;}
.hero-slide-img{height:250px;display:block;}
.hero-slide-content{padding:28px 24px;}
.hero-slide-content h2{font-size:1.25rem;}
.hero-arrow{width:36px;height:36px;font-size:1.4rem;}
}
@media(min-width:769px) and (max-width:1024px){
.hero-slide.active{grid-template-columns:1fr 1fr;}
.hero-slide-img{height:350px;}
}

/* Directory link styles */
.dir-link{display:block;padding:.8rem;background:var(--gold2);border-left:4px solid var(--gold);border-radius:6px;text-decoration:none;color:inherit;font-weight:600;font-size:0.88rem;transition:all .15s}
.dir-link:hover{background:#fde68a;transform:translateX(4px);box-shadow:0 2px 8px rgba(0,0,0,0.06)}

/* Search highlight */
.dir-link.search-hidden{display:none!important}

/* Category card hover */
.tri-card{transition:transform .2s,box-shadow .2s}
.tri-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.1)}

/* Article card hover */
.art-card{transition:box-shadow .2s}
.art-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08)}

/* Article Gallery Cards */
.article-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px;}
.article-card{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;transition:all .25s;display:flex;flex-direction:column;}
.article-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.1);transform:translateY(-4px);}
.article-card-img{height:180px;background-size:cover;background-position:center;position:relative;}
.article-card-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(transparent,rgba(0,0,0,0.1));}
.article-card-body{padding:16px 18px;flex:1;display:flex;flex-direction:column;}
.article-card-body h3{font-family:'Merriweather',serif;font-size:0.95rem;font-weight:700;line-height:1.4;margin:8px 0 8px;color:var(--ink);}
.article-card:hover h3{color:var(--blue);}
.article-card-body p{font-size:0.82rem;color:var(--muted);line-height:1.5;margin-bottom:10px;flex:1;}
.article-card-body .meta{margin-top:auto;}

/* Category Gallery Cards */
.category-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px;}
.category-card{position:relative;border-radius:12px;overflow:hidden;text-decoration:none;color:#fff;height:160px;display:block;transition:all .25s;}
.category-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.2);}
.category-card-img{position:absolute;top:0;left:0;right:0;bottom:0;background-size:cover;background-position:center;}
.category-card-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.4) 100%);transition:background .25s;}
.category-card:hover .category-card-overlay{background:linear-gradient(135deg,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.5) 100%);}
.category-card-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);font-size:3.8rem;z-index:2;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4));transition:transform .3s;line-height:1;background:rgba(255,255,255,0.12);border-radius:50%;width:80px;height:80px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);border:2px solid rgba(255,255,255,0.15);}
.category-card:hover .category-card-icon{transform:translate(-50%,-65%) scale(1.18);background:rgba(255,255,255,0.2);}
.category-card-body{position:absolute;bottom:0;left:0;right:0;padding:16px 18px;z-index:2;background:linear-gradient(transparent,rgba(0,0,0,0.6));}
.category-card-body h3{font-family:'Merriweather',serif;font-size:1rem;font-weight:700;margin-bottom:2px;}
.category-card-body p{font-size:0.75rem;opacity:.8;}

/* Small Article Cards */
.article-card-sm .article-card-body{padding:12px 14px;}
.article-card-sm .article-card-body h3{font-size:0.82rem;margin:4px 0 6px;}
.article-card-sm .article-card-img{height:120px;}

/* Responsive: Tablet */
@media(max-width:960px){
  .category-gallery{grid-template-columns:repeat(2,1fr);}
  .article-gallery{grid-template-columns:repeat(2,1fr);}
  .main-grid,.art-page{grid-template-columns:1fr;}
  .hero-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .tri-grid{grid-template-columns:1fr 1fr;}
}

/* Responsive: Mobile */
@media(max-width:640px){
  .category-gallery{grid-template-columns:1fr;}
  .article-gallery{grid-template-columns:1fr;}
  .tri-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
  .art{padding:20px 18px;}
  .art h1{font-size:1.3rem;}
  .art h2{font-size:1.2rem;}
  .hdr-top{flex-direction:column;gap:12px;align-items:flex-start;}
  .hdr-search{width:100%;display:flex;}
  .hdr-search input{flex:1;width:100%;}
  .hero-slide-content{padding:24px 20px;}
  .hero-slide-content h2{font-size:1.15rem;}
  .hero-slide-content p{font-size:0.85rem;}
  .hero-arrow{width:32px;height:32px;font-size:1.2rem;}
  .hero-prev{left:8px;}
  .hero-next{right:8px;}
  .hero-slide-img{height:200px;}
  .category-card{height:140px;}
  .category-card-icon{font-size:2.8rem;width:60px;height:60px;}
  .category-card-body{padding:12px 14px;}
  .category-card-body h3{font-size:0.9rem;}
  .article-card-img{height:160px;}
  .article-card-body h3{font-size:0.88rem;}
  .article-card-sm .article-card-img{height:100px;}
  .wrap{padding:0 14px;}
  .sec-label span{font-size:0.62rem;padding:2px 8px;}
  .nl-box{padding:14px;}
  .dir-wrap{padding:0 14px;}
}

/* Responsive: Very small phones */
@media(max-width:400px){
  .logo-name{font-size:1.4rem;}
  .logo-tag{font-size:0.6rem;}
  .nav-inner a{padding:8px 10px;font-size:0.7rem;}
  .hero-slide-content{padding:20px 16px;}
  .hero-slide-content h2{font-size:1.05rem;}
  .category-card{height:120px;}
  .category-card-icon{font-size:2.2rem;width:50px;height:50px;}
}

/* Search Dropdown */
.srch-drop{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,0.15);z-index:1000;max-height:420px;overflow-y:auto;margin-top:4px;}
.srch-item{display:flex;align-items:center;gap:10px;padding:10px 14px;text-decoration:none;color:#111;border-bottom:1px solid #f3f4f6;transition:background .15s;cursor:pointer;}
.srch-item:hover{background:#f9fafb;}
.srch-item:last-child{border-bottom:none;}
.srch-emoji{font-size:1.4rem;flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.04);border-radius:6px;}
.srch-text{display:flex;flex-direction:column;min-width:0;}
.srch-title{font-size:0.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.srch-title b{color:#1d4ed8;}
.srch-cat{font-size:0.72rem;color:#6b7280;}
.srch-empty{color:#6b7280;font-size:0.85rem;justify-content:center;}
.srch-more{color:#1d4ed8;font-weight:600;font-size:0.82rem;justify-content:center;cursor:pointer;}
.srch-more:hover{background:#eff6ff;}
