/* =========================================================================
   DH THEME — Design System
   Digital Hangover · Elementor-first
   Contains: brand tokens, base, navbar, footer, and the FULL service-page
   component library (hero, band, capability grid, lead card, case study,
   why-us, FAQ, chips). Because these live here, page markup pasted into an
   Elementor HTML widget needs NO <style> block (WordPress strips those).
   ====================================================================== */

/* ---------- 1. BRAND TOKENS ---------- */
:root{
  --dh-black:#0A0A0A;      /* Pour Black    */
  --dh-gold:#FFCF35;       /* Hangover Gold */
  --dh-mustard:#E0A800;    /* Mustard Mug   */
  --dh-maple:#B8860B;      /* Maple         */
  --dh-cream:#FFF7E0;      /* Cream         */
  --dh-ink:#171717;
  --dh-mut:#5c5c5c;
  --dh-line:#e9e9e9;
  --dh-soft:#f7f6f2;
  --dh-radius:12px;
  --dh-max:1120px;
  --dh-font-head:'Archivo','Segoe UI',Arial,sans-serif;
  --dh-font-body:'Inter','Segoe UI',Arial,sans-serif;
  --dh-font-mono:'JetBrains Mono',Consolas,monospace;
}

/* ---------- 2. BASE ---------- */
body.dh-theme{margin:0;font-family:var(--dh-font-body);color:var(--dh-ink);line-height:1.6;font-size:16px;background:#fff;-webkit-font-smoothing:antialiased;}
body.dh-theme h1,body.dh-theme h2,body.dh-theme h3,body.dh-theme h4,body.dh-theme h5{font-family:var(--dh-font-head);line-height:1.15;color:var(--dh-black);margin:0;font-weight:800;}
.dh-theme a{color:var(--dh-maple);text-decoration:none;font-weight:600;}
.dh-theme a:hover{text-decoration:underline;}
.dh-theme img{max-width:100%;height:auto;}
.dh-skip{position:absolute;left:-9999px;top:0;background:var(--dh-gold);color:var(--dh-black);padding:10px 16px;z-index:999;font-weight:800;}
.dh-skip:focus{left:8px;top:8px;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);}

/* Container. NOTE: never use width:100vw — it causes ~17px horizontal
   overflow on Windows because of the scrollbar. Use max-width + margin auto. */
.dh{max-width:var(--dh-max);margin-left:auto;margin-right:auto;padding-left:22px;padding-right:22px;}

/* Elementor pages: no theme wrapper constraints — Elementor containers own layout. */
.dh-entry--full{width:100%;max-width:none;padding:0;margin:0;}
.dh-page--elementor{margin:0;}

.dh-kicker{color:var(--dh-maple);font-weight:800;text-transform:uppercase;letter-spacing:2.5px;font-size:12px;}
.dh-lead{font-size:18px;color:#2c2c2c;max-width:820px;}
.dh-mut{color:var(--dh-mut);}

/* Buttons */
.dh-btn{display:inline-block;background:var(--dh-gold);color:var(--dh-black);font-weight:800;padding:13px 24px;border-radius:8px;border:none;cursor:pointer;font-size:14.5px;transition:transform .15s ease;font-family:var(--dh-font-head);}
.dh-btn:hover{transform:translateY(-2px);text-decoration:none;color:var(--dh-black);}
.dh-btn--dark{background:var(--dh-black);color:var(--dh-gold);}
.dh-btn--ghost{background:transparent;color:#fff;border:2px solid var(--dh-gold);}

/* ---------- 3. NAVBAR (fallback header) ---------- */
.dh-topbar{background:var(--dh-black);position:sticky;top:0;z-index:500;border-bottom:1px solid #1f1f1f;}
.dh-topbar__inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.dh-brand__text{color:#fff;font-family:var(--dh-font-head);font-weight:800;letter-spacing:1px;font-size:18px;}
.dh-brand__text b{color:var(--dh-gold);}
.dh-brand__text:hover{text-decoration:none;}
.dh-brand img{max-height:44px;width:auto;}
.dh-nav{display:flex;align-items:center;gap:20px;}
.dh-menu{list-style:none;display:flex;align-items:center;gap:20px;margin:0;padding:0;}
.dh-menu li{position:relative;}
.dh-menu a{color:#e6e6e6;font-weight:600;font-size:14.5px;font-family:var(--dh-font-head);}
.dh-menu a:hover{color:var(--dh-gold);text-decoration:none;}
.dh-menu .current-menu-item > a{color:var(--dh-gold);}
/* Dropdown (sub-menu) */
.dh-menu .sub-menu{display:none;position:absolute;top:100%;left:-14px;background:#fff;border:1px solid var(--dh-line);border-radius:10px;padding:8px;min-width:220px;box-shadow:0 14px 34px rgba(0,0,0,.18);list-style:none;margin:0;z-index:600;}
.dh-menu li:hover > .sub-menu,.dh-menu li.dh-open > .sub-menu{display:block;}
.dh-menu .sub-menu a{display:block;color:var(--dh-ink);padding:9px 12px;border-radius:6px;font-size:14px;}
.dh-menu .sub-menu a:hover{background:var(--dh-soft);color:var(--dh-black);}
.dh-menu .menu-item-has-children > a::after{content:" \25BE";color:var(--dh-gold);}
.dh-nav__phone{color:var(--dh-gold);font-weight:800;font-size:14px;}
.dh-navtoggle{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.dh-navtoggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:.2s;}
.dh-navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.dh-navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.dh-navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- 4. FOOTER (fallback) ---------- */
.dh-footer{background:var(--dh-black);color:#cfcfcf;padding:52px 0 24px;}
.dh-footer__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;}
.dh-footer h4{color:#fff;font-size:15px;margin-bottom:12px;}
.dh-brand__text--footer{font-size:20px;display:block;margin-bottom:8px;}
.dh-footer__tagline{font-size:14px;color:#9d9d9d;margin:0 0 12px;}
.dh-footer__contact{font-size:14px;line-height:1.9;}
.dh-footer__contact a{color:var(--dh-gold);}
.dh-footer__menu{list-style:none;margin:0;padding:0;}
.dh-footer__menu a{color:#bdbdbd;font-weight:500;font-size:14px;display:block;padding:4px 0;}
.dh-footer__menu a:hover{color:var(--dh-gold);text-decoration:none;}
.dh-footer__bottom{border-top:1px solid #222;margin-top:30px;padding-top:18px;font-size:12.5px;color:#8a8a8a;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

/* ---------- 5. SERVICE-PAGE COMPONENTS (use in Elementor HTML widgets) ---------- */
/* Hero */
.dh-hero{background:var(--dh-black);color:#fff;padding:8px 0 60px;}
.dh-crumb{font-size:12.5px;color:#8a8a8a;padding:14px 0 6px;}
.dh-crumb a{color:#8a8a8a;font-weight:500;}
.dh-herogrid{display:grid;grid-template-columns:1.35fr .9fr;gap:40px;align-items:start;margin-top:14px;}
.dh-hero h1{color:#fff;font-size:46px;letter-spacing:-.5px;}
.dh-hero h1 span{color:var(--dh-gold);}
.dh-hero__sub{color:#cfcfcf;font-size:18px;margin-top:16px;max-width:560px;}
.dh-hero__mini{margin-top:22px;display:flex;gap:22px;flex-wrap:wrap;color:#bdbdbd;font-size:13.5px;}
.dh-hero__mini b{color:var(--dh-gold);font-size:20px;display:block;font-family:var(--dh-font-head);}

/* Lead card (form) */
.dh-leadcard{background:#fff;color:var(--dh-ink);border-radius:14px;padding:24px;box-shadow:0 16px 40px rgba(0,0,0,.3);}
.dh-leadcard h3{font-size:21px;}
.dh-leadcard p{font-size:13.5px;color:var(--dh-mut);margin:6px 0 14px;}
.dh-form{display:grid;gap:9px;}
.dh-form input,.dh-form textarea{padding:11px 13px;border:1px solid #dcdcdc;border-radius:8px;font-size:14.5px;font-family:inherit;background:#fcfcfc;width:100%;}
.dh-form button{width:100%;margin-top:2px;}
.dh-leadcard__call{font-size:13px;color:var(--dh-mut);text-align:center;margin-top:10px;}

/* Sections + statement band */
.dh-sec{padding:60px 0;}
.dh-sec--alt{background:var(--dh-soft);}
.dh-band{background:var(--dh-black);color:#fff;padding:54px 0;}
.dh-band h2{color:#fff;font-size:30px;max-width:900px;}
.dh-band h2 em{color:var(--dh-gold);font-style:normal;}
.dh-band p{color:#cfcfcf;max-width:820px;}
.dh-badges{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px;}
.dh-badge{border:1px solid var(--dh-line);border-radius:30px;padding:9px 18px;font-weight:700;font-size:13.5px;background:#fff;}

/* Capability grid */
.dh-grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin-top:26px;}
.dh-cap{border:1px solid var(--dh-line);border-radius:var(--dh-radius);padding:22px;background:#fff;transition:box-shadow .15s,transform .15s;}
.dh-cap:hover{box-shadow:0 10px 26px rgba(0,0,0,.07);transform:translateY(-3px);}
.dh-cap h4{font-size:17px;margin-bottom:6px;}
.dh-cap h4 .dh-num{color:var(--dh-gold);-webkit-text-stroke:.4px var(--dh-black);margin-right:8px;}
.dh-cap p{font-size:14px;color:#4a4a4a;margin:0;}
.dh-cap__metric{display:inline-block;margin-top:10px;background:var(--dh-cream);color:#7a5c00;font-weight:800;font-size:12px;padding:4px 10px;border-radius:20px;}

/* Case study band */
.dh-case{background:linear-gradient(135deg,#0A0A0A,#1e1e1e);color:#fff;border-radius:16px;padding:40px;}
.dh-case h3{color:#fff;font-size:26px;max-width:640px;}
.dh-case__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0;}
.dh-case__stat{background:#181818;border:1px solid #2c2c2c;border-radius:12px;padding:18px;text-align:center;}
.dh-case__stat b{color:var(--dh-gold);font-size:26px;display:block;font-family:var(--dh-font-head);}
.dh-case__stat span{color:#bdbdbd;font-size:12.5px;}
.dh-case__q{border-left:3px solid var(--dh-gold);padding-left:16px;color:#e4e4e4;font-style:italic;}
.dh-case__who{font-style:normal;font-weight:800;color:#fff;margin-top:6px;font-size:13.5px;}
.dh-case__who span{display:block;color:#9d9d9d;font-weight:500;}

/* Why-us */
.dh-why{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px;}
.dh-wcard{border-top:3px solid var(--dh-gold);background:#fff;border-radius:0 0 10px 10px;padding:18px;box-shadow:0 2px 12px rgba(0,0,0,.05);}
.dh-wcard h4{font-size:16px;}
.dh-wcard p{font-size:13.5px;color:#555;margin:6px 0 0;}

/* Chips */
.dh-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.dh-chip{border:1px solid var(--dh-line);border-radius:24px;padding:9px 16px;font-weight:700;font-size:14px;background:#fff;color:var(--dh-ink);}
.dh-chip:hover{border-color:var(--dh-gold);text-decoration:none;}

/* FAQ (native <details> — no JS needed) */
.dh-faq details{border:1px solid var(--dh-line);border-radius:10px;padding:2px 18px;margin:10px 0;background:#fff;}
.dh-faq summary{font-weight:700;cursor:pointer;padding:15px 0;font-size:16px;list-style:none;font-family:var(--dh-font-head);}
.dh-faq summary::-webkit-details-marker{display:none;}
.dh-faq summary::before{content:"+";color:var(--dh-gold);-webkit-text-stroke:1px var(--dh-black);font-weight:800;margin-right:10px;}
.dh-faq details[open] summary::before{content:"\2013";}
.dh-faq p{margin:0 0 14px;color:#444;font-size:15px;}

/* ---------- 6. BLOG ---------- */
.dh-prose{max-width:760px;}
.dh-prose h2{font-size:26px;margin:30px 0 8px;}
.dh-prose h3{font-size:20px;margin:22px 0 6px;}
.dh-prose p{margin:12px 0;}
.dh-prose ul,.dh-prose ol{margin:12px 0 12px 22px;}
.dh-page-head,.dh-single-head,.dh-archive-head{padding:44px 0 10px;}
.dh-page-title{font-size:38px;}
.dh-meta{color:var(--dh-mut);font-size:13.5px;margin-top:8px;}
.dh-featured{margin:20px auto;}
.dh-post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:20px 0 50px;}
.dh-card-post{border:1px solid var(--dh-line);border-radius:var(--dh-radius);overflow:hidden;background:#fff;}
.dh-card-post__img img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;}
.dh-card-post__body{padding:18px;}
.dh-card-post__title{font-size:18px;margin:6px 0;}
.dh-card-post__title a{color:var(--dh-black);}
.dh-card-post__excerpt{font-size:14px;color:#555;}
.dh-404{padding:80px 0;text-align:center;}
.dh-searchform{display:flex;gap:8px;max-width:420px;margin:14px auto;}
.dh-searchform input{flex:1;padding:11px 13px;border:1px solid var(--dh-line);border-radius:8px;}

/* ---------- 7. RESPONSIVE ---------- */
@media (max-width:1024px){
  .dh-grid{grid-template-columns:1fr 1fr;}
  .dh-why,.dh-post-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .dh-herogrid,.dh-footer__cols,.dh-case__stats{grid-template-columns:1fr;}
  .dh-hero h1{font-size:33px;}
  .dh-band h2{font-size:24px;}
  .dh-case{padding:26px;}
  .dh-page-title{font-size:28px;}

  /* Mobile nav */
  .dh-navtoggle{display:block;}
  .dh-nav{position:fixed;inset:64px 0 auto 0;background:var(--dh-black);flex-direction:column;align-items:flex-start;gap:0;padding:16px 22px 26px;border-bottom:1px solid #222;transform:translateY(-120%);transition:transform .25s ease;max-height:calc(100vh - 64px);overflow-y:auto;}
  .dh-nav.dh-nav--open{transform:translateY(0);}
  .dh-menu{flex-direction:column;align-items:flex-start;gap:0;width:100%;}
  .dh-menu > li{width:100%;border-bottom:1px solid #1e1e1e;}
  .dh-menu a{display:block;padding:13px 0;width:100%;}
  .dh-menu .sub-menu{position:static;display:none;box-shadow:none;border:0;background:#141414;border-radius:0;padding:0 0 6px 12px;min-width:0;}
  .dh-menu li.dh-open > .sub-menu{display:block;}
  .dh-menu .sub-menu a{color:#cfcfcf;}
  .dh-nav__phone,.dh-nav__cta{margin-top:14px;}
}
@media (max-width:600px){
  .dh-grid,.dh-why,.dh-post-grid{grid-template-columns:1fr;}
}