/* DPN Core Theme styles (mobile-first)
   Goal: search-first hero, readable contrast, modular sections.
*/

:root{
  --dpn-navy: #0a2f57;
  --dpn-gold: #f5a623;
  --dpn-bg: #ffffff;
  --dpn-ink: #0b1220;
  --dpn-muted: rgba(11,18,32,.68);
  --dpn-card: #ffffff;
  --dpn-border: rgba(11,18,32,.10);
  --dpn-radius: 18px;
  --dpn-shadow: 0 18px 45px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--dpn-bg); color: var(--dpn-ink);}
img{max-width:100%;height:auto;display:block}

a{color:var(--dpn-navy);text-decoration:none}
a:hover{color:var(--dpn-gold)}

.screen-reader-text{position:absolute;left:-9999px}

.dpn-container{max-width: 1180px; padding: 0 20px; margin: 0 auto;}
.dpn-section{padding: 34px 0;}
.dpn-section--muted{background: #f6f8fb;}

.dpn-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.dpn-h2{margin:0;font-size: 24px;letter-spacing:-0.02em}
.dpn-muted{color:var(--dpn-muted)}

/* Header */
.dpn-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, rgba(10,47,87,1) 0%, rgba(10,47,87,.96) 100%); border-bottom: 1px solid rgba(255,255,255,.08)}
.dpn-header__inner{display:flex;align-items:center;justify-content:space-between;gap:18px; padding: 14px 0}
.dpn-brand{display:flex;align-items:center;gap:14px}
.dpn-brand img{height:44px;width:auto}

.dpn-nav{display:none;gap:18px;align-items:center}
.dpn-nav a{color:rgba(255,255,255,.9);font-weight:600;font-size:14px}
.dpn-nav a:hover{color:var(--dpn-gold)}

.dpn-menuBtn{display:inline-flex;align-items:center;justify-content:center; width:44px; height:44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.10); color:#fff; cursor:pointer}

/* Dropdown behavior (desktop) */
.dpn-nav .menu-item-has-children{position:relative}
.dpn-nav .sub-menu{display:none; position:absolute; right:0; top: 28px; min-width: 240px; padding: 10px; background: rgba(10,47,87,.98); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; box-shadow: var(--dpn-shadow)}
.dpn-nav .sub-menu a{display:block;padding:10px 10px;border-radius:10px;font-weight:600}
.dpn-nav .menu-item-has-children:hover > .sub-menu,
.dpn-nav .menu-item-has-children:focus-within > .sub-menu{display:block}

/* Mobile drawer */
.dpn-drawer{position:fixed; inset:0; z-index:80; display:none}
.dpn-drawer.is-open{display:block}
.dpn-drawer__backdrop{position:absolute; inset:0; background: rgba(0,0,0,.55)}
.dpn-drawer__panel{position:absolute; right:0; top:0; height:100%; width:min(86vw, 360px); background: #071e36; color:#fff; padding: 16px; overflow:auto}
.dpn-drawer__panel a{color:rgba(255,255,255,.92)}
.dpn-drawer__panel a:hover{color:var(--dpn-gold)}
.dpn-drawer__close{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; cursor:pointer}

/* Hero */
.dpn-hero{background: radial-gradient(900px 420px at 70% 40%, rgba(245,166,35,.18), transparent 60%), linear-gradient(180deg, rgba(9,38,70,1) 0%, rgba(5,29,55,1) 100%); color:#fff}
.dpn-hero__inner{padding: 58px 0 46px}
.dpn-hero__copy{max-width: 860px; margin: 0 auto; text-align:center}
.dpn-hero__title{margin:0;font-size: 52px; letter-spacing:-0.03em}
.dpn-hero__sub{margin: 10px 0 20px; color: rgba(255,255,255,.82); font-size: 18px}

.dpn-hero__bar{display:flex;justify-content:center}
.dpn-home-search{display:flex; gap: 12px; align-items:center; width: min(860px, 100%);}
.dpn-home-search__input{flex:1; min-width: 240px; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10); color:#fff; font-size:16px; outline:none}
.dpn-home-search__input::placeholder{color: rgba(255,255,255,.65)}
.dpn-home-search__input:focus{border-color: rgba(245,166,35,.85); box-shadow: 0 0 0 4px rgba(245,166,35,.18)}
.dpn-home-search__btn{height:52px; padding: 0 18px; border-radius: 14px; border:0; font-weight:800; background: var(--dpn-gold); color:#1b1306; cursor:pointer}
.dpn-home-search__btn:hover{filter:brightness(.96)}

.dpn-chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top: 16px}
.dpn-chip{display:inline-flex; align-items:center; gap:8px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.08); color: rgba(255,255,255,.92); font-weight:700; font-size: 13px}
.dpn-chip--link{cursor:pointer}

/* Recent */
.dpn-recent{display:flex; flex-wrap:wrap; gap:10px}
.dpn-chiplink{display:inline-flex; align-items:center; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--dpn-border); background: #fff; color: var(--dpn-ink); font-weight:700; font-size: 13px}
.dpn-chiplink:hover{border-color: rgba(10,47,87,.35)}

/* Cards */
.dpn-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px}
@media (max-width: 980px){ .dpn-grid{grid-template-columns: repeat(2, minmax(0,1fr));} }
@media (max-width: 640px){ .dpn-grid{grid-template-columns: 1fr;} .dpn-hero__title{font-size:38px} .dpn-home-search{flex-direction:column; align-items:stretch} .dpn-home-search__btn{width:100%}}

.dpn-card2{background: var(--dpn-card); border:1px solid var(--dpn-border); border-radius: var(--dpn-radius); overflow:hidden; box-shadow: 0 10px 24px rgba(0,0,0,.06)}
.dpn-card2__img{display:block; background: #f1f3f7; height: 180px; overflow:hidden}
.dpn-card2__img img{width:100%; height:100%; object-fit:contain}
.dpn-card2__body{padding: 14px}
.dpn-card2__h{margin:0 0 8px; font-size: 18px; letter-spacing:-0.02em}
.dpn-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 12px 16px; border-radius: 14px; background: var(--dpn-navy); color:#fff; font-weight:800}
.dpn-btn:hover{filter:brightness(1.05); color:#fff}
.dpn-btn--sm{padding: 10px 12px; border-radius: 12px; font-size: 13px}

/* Tiles */
.dpn-tiles{display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px}
@media (max-width: 980px){ .dpn-tiles{grid-template-columns: repeat(3, minmax(0,1fr));} }
@media (max-width: 640px){ .dpn-tiles{grid-template-columns: repeat(2, minmax(0,1fr));} }
.dpn-tile{display:flex; align-items:center; justify-content:center; text-align:center; padding: 14px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--dpn-border); font-weight:800; color: var(--dpn-ink)}
.dpn-tile:hover{border-color: rgba(10,47,87,.35)}

/* Layout with right sidebar */
.dpn-layout{display:grid; grid-template-columns: minmax(0,1fr) 320px; gap: 22px}
@media (max-width: 980px){ .dpn-layout{grid-template-columns: 1fr;} }
.dpn-content{min-width:0}

.dpn-sidebar{min-width:0}
.dpn-widget{background:#fff; border:1px solid var(--dpn-border); border-radius: var(--dpn-radius); padding: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.06); margin-bottom: 16px}
.dpn-widget__title{margin:0 0 10px; font-size: 16px}

/* Post list */
.dpn-posts{display:flex; flex-direction:column; gap: 14px}
.dpn-post{display:grid; grid-template-columns: 180px minmax(0,1fr); gap: 14px; padding: 12px; border:1px solid var(--dpn-border); border-radius: var(--dpn-radius); background:#fff}
@media (max-width: 640px){ .dpn-post{grid-template-columns: 1fr;} }
.dpn-post__thumb{border-radius: 14px; overflow:hidden; background:#f1f3f7}
.dpn-post__thumb img{width:100%; height:100%; object-fit:cover}
.dpn-post__thumb--empty{display:block; height: 140px}
.dpn-post__h{margin:0 0 6px; font-size: 20px}
.dpn-post__meta{color:var(--dpn-muted); font-size: 13px; margin-bottom: 8px}

/* Footer */
.dpn-footer{border-top:1px solid var(--dpn-border); padding: 26px 0; background:#fff}
.dpn-footer__inner{display:flex; flex-wrap:wrap; gap: 12px; align-items:center; justify-content:space-between}

/* Desktop nav */
@media (min-width: 880px){
  .dpn-nav{display:flex}
  .dpn-menuBtn{display:none}
}