/* =====================
   DreamiHome — GLOBAL CSS
   One file to style the entire site
   ===================== */

/* 1) Design tokens */
:root{
  /* fonts */
  --dh-font-sans: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --dh-font-serif: ui-serif, Georgia, "Times New Roman", serif;
  --dh-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* colors */
  --dh-text: #0f172a;       /* slate-900 */
  --dh-muted: #475569;      /* slate-600 */
  --dh-bg: #ffffff;
  --dh-bg-alt: #f8fafc;     /* slate-50 */
  --dh-line: #e2e8f0;       /* slate-200 */

  --dh-brand: #0ea5e9;      /* sky-500 */
  --dh-brand-600: #0284c7;  /* sky-600 */
  --dh-accent: #10b981;     /* emerald-500 */
  --dh-danger: #ef4444;     /* red-500 */
  --dh-warning: #f59e0b;    /* amber-500 */
  --dh-success: #22c55e;    /* green-500 */

  /* layout */
  --dh-max: 1200px;
  --dh-gap: 24px;
  --dh-radius: 14px;
  --dh-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --dh-shadow-md: 0 8px 24px rgba(2,6,23,.08);

  /* motion & focus */
  --dh-speed: .2s;
  --dh-ease: cubic-bezier(.2,.8,.2,1);
  --dh-focus: 2px solid var(--dh-brand);
}

/* 2) Modern reset (low specificity) */
*{ box-sizing:border-box; }
*::before,*::after{ box-sizing:inherit; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; min-height:100svh; color:var(--dh-text); background:var(--dh-bg); font:16px/1.6 var(--dh-font-sans); }
img,svg,video,canvas{ display:block; max-width:100%; height:auto; }
input,button,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; }
[hidden]{ display:none !important; }
:focus-visible{ outline:var(--dh-focus); outline-offset:2px; }

/* 3) Typography scale */
p{ margin-block:0 1em; color:var(--dh-text); }
small{ font-size:.875rem; color:var(--dh-muted); }

h1,h2,h3,h4,h5,h6{ margin:0 0 .5em; font-weight:700; line-height:1.2; }
h1{ font-size:clamp(2rem, 1.1rem + 2.6vw, 3rem); }
h2{ font-size:clamp(1.625rem, 1rem + 1.8vw, 2.25rem); }
h3{ font-size:clamp(1.375rem, .9rem + 1.2vw, 1.75rem); }
h4{ font-size:1.125rem; }
h5{ font-size:1rem; }
h6{ font-size:.95rem; letter-spacing:.01em; }

/* Links */
a{ color:var(--dh-brand); text-decoration:none; }
a:hover{ color:var(--dh-brand-600); text-decoration:underline; }

/* 4) Layout helpers */
.dh-container{ width:min(var(--dh-max), 100% - 32px); margin-inline:auto; }
.dh-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--dh-gap); }

/* 5) Header/Footer shell */
.dh-header{ border-bottom:1px solid var(--dh-line); background:var(--dh-bg); position:relative; z-index:10; }
.dh-header .dh-container{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.dh-logo{ font-weight:800; letter-spacing:.2px; color:inherit; }
.dh-nav .dh-menu{ list-style:none; display:flex; gap:18px; margin:0; padding:0; }
.dh-nav .dh-menu a{ display:block; padding:8px 10px; border-radius:10px; color:inherit; text-decoration:none; }
.dh-nav .dh-menu a:hover{ background:#f1f5f9; }

.dh-footer{ margin-top:40px; border-top:1px solid var(--dh-line); background:var(--dh-bg); }
.dh-footer .dh-container{ padding:18px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.dh-footer-menu{ list-style:none; display:flex; gap:14px; margin:0; padding:0; }

/* 6) Cards */
.dh-card{ border:1px solid var(--dh-line); border-radius:var(--dh-radius); padding:16px; background:#fff; box-shadow:var(--dh-shadow-sm); transition:transform var(--dh-speed) var(--dh-ease), box-shadow var(--dh-speed) var(--dh-ease); }
.dh-card:hover{ transform:translateY(-2px); box-shadow:var(--dh-shadow-md); }
.dh-card__thumb img{ width:100%; height:auto; border-radius:12px; }
.dh-card__title{ font-size:1.1rem; margin:.6rem 0; }
.dh-card__excerpt{ color:var(--dh-muted); }

/* ===== Buttons 2.0 — premium pill with gradient + shine + lift ===== */
.dh-btn{
  /* base tokens */
  --bg:#fff; --fg:var(--dh-text); --bd:var(--dh-line);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:12px 18px;
  border:1px solid var(--bd);
  border-radius:9999px; /* pill */
  background:var(--bg); color:var(--fg);
  text-decoration:none; font-weight:700; line-height:1; white-space:nowrap;
  box-shadow:0 1px 2px rgba(2,6,23,.08), 0 8px 24px rgba(2,6,23,.06);
  transition:
    transform var(--dh-speed) var(--dh-ease),
    box-shadow var(--dh-speed) var(--dh-ease),
    background .35s var(--dh-ease),
    border-color .35s var(--dh-ease),
    filter .35s var(--dh-ease);
}
.dh-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(2,6,23,.12); }
.dh-btn:active{ transform:translateY(0); box-shadow:0 2px 6px rgba(2,6,23,.10); }
.dh-btn:disabled{ opacity:.6; cursor:not-allowed; }

/* Shine sweep */
.dh-btn::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.5) 48%, transparent 55%);
  transform:translateX(-120%);
  transition:transform .85s cubic-bezier(.19,1,.22,1);
  pointer-events:none;
}
.dh-btn:hover::after{ transform:translateX(120%); }

/* Soft press ripple */
.dh-btn::before{
  content:""; position:absolute; inset:-20%; border-radius:inherit;
  background:radial-gradient(40% 40% at 50% 50%, rgba(255,255,255,.45), transparent 70%);
  transform:scale(0); opacity:0; pointer-events:none;
  transition:transform .45s ease, opacity .45s ease;
}
.dh-btn:active::before{ transform:scale(1); opacity:1; transition:none; }

/* Variants */
.dh-btn--primary{
  --bd:transparent;
  background:linear-gradient(135deg, #22d3ee 0%, #0ea5e9 40%, #2563eb 100%);
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.18);
  filter:saturate(1.02);
}
.dh-btn--primary:hover{ filter:saturate(1.08) brightness(1.02); }

.dh-btn--secondary{
  --bd: var(--dh-brand);
  background:rgba(14,165,233,.06); /* subtle brand tint */
  color:var(--dh-brand);
  box-shadow:inset 0 0 0 1px rgba(14,165,233,.35);
}
.dh-btn--secondary:hover{
  background:rgba(14,165,233,.12);
  box-shadow:inset 0 0 0 1px rgba(14,165,233,.55), 0 6px 20px rgba(2,6,23,.08);
}

.dh-btn--ghost{ --bd:transparent; background:transparent; color:var(--dh-text); }
.dh-btn--danger{ --bd:transparent; background:linear-gradient(135deg,#fb7185 0%, #ef4444 60%, #dc2626 100%); color:#fff; }

/* Sizes */
.dh-btn--sm{ padding:9px 14px; font-weight:700; }
.dh-btn--lg{ padding:14px 22px; font-size:1.05rem; }

/* Optional: icon slot */
.dh-btn .dh-ic{ display:inline-flex; width:1.1em; height:1.1em; line-height:1; }


/* 8) Forms (global) */
.dh-field{ display:flex; flex-direction:column; gap:6px; }
.dh-label{ font-weight:600; }
.dh-input, .dh-select, .dh-textarea{
  width:100%; padding:10px 12px; border:1px solid var(--dh-line); border-radius:10px; background:#fff;
}
.dh-input:focus, .dh-select:focus, .dh-textarea:focus{ outline:var(--dh-focus); outline-offset:2px; }

/* 9) Utility classes */
.u-flex{ display:flex; }
.u-center{ display:grid; place-items:center; }
.u-gap-sm{ gap:10px; } .u-gap{ gap:var(--dh-gap); }
.u-mt-0{ margin-top:0; } .u-mt-1{ margin-top:.5rem; } .u-mt-2{ margin-top:1rem; } .u-mt-3{ margin-top:1.5rem; }
.u-mb-0{ margin-bottom:0; } .u-mb-1{ margin-bottom:.5rem; } .u-mb-2{ margin-bottom:1rem; } .u-mb-3{ margin-bottom:1.5rem; }
.u-text-muted{ color:var(--dh-muted); }
.u-hide{ display:none !important; }

/* 10) WP niceties */
.alignwide{ width:min(1400px, 100% - 32px); margin-inline:auto; }
.alignfull{ width:100%; }
.wp-caption{ color:var(--dh-muted); font-size:.9rem; text-align:center; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); padding:0; border:0; height:1px; width:1px; overflow:hidden; }

/* 11) Sections */
.dh-hero{ padding:48px 0; background:var(--dh-bg-alt); border-bottom:1px solid var(--dh-line); }

/* 12) Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}






/* ===== Header component (stunning, glassy, responsive) ===== */
.dh-skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.dh-skip:focus{ left:16px; top:16px; width:auto; height:auto; padding:8px 12px; background:#fff; border:1px solid var(--dh-line); border-radius:10px; z-index:2000; }


.dh-header--frost{ position:sticky; top:0; background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--dh-line); box-shadow:0 6px 24px rgba(2,6,23,.04); }
.dh-header__bar{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:10px 0; }
.dh-logo__img{ height:36px; width:auto; }
.dh-header__center{ justify-self:center; }
.dh-ctas{ display:flex; align-items:center; gap:10px; margin-right:8px; }


/* Burger */
.dh-burger{ display:none; width:38px; height:38px; border:1px solid var(--dh-line); border-radius:12px; background:#fff; box-shadow:var(--dh-shadow-sm); align-items:center; justify-content:center; }
.dh-burger__bar{ display:block; width:18px; height:2px; background:var(--dh-text); margin:3px 0; transition:transform var(--dh-speed) var(--dh-ease), opacity var(--dh-speed) var(--dh-ease); }


/* Mobile drawer */
.dh-mobile{ position:fixed; inset:0; z-index:1400; display:grid; grid-template-columns:1fr; }
.dh-mobile[hidden]{ display:none; }
.dh-mobile__overlay{ position:absolute; inset:0; background:rgba(15,23,42,.45); border:0; }
.dh-mobile__panel{ position:absolute; right:0; top:0; height:100%; width:min(90vw, 360px); background:#fff; border-left:1px solid var(--dh-line); padding:20px; transform:translateX(100%); transition:transform var(--dh-speed) var(--dh-ease); overflow:auto; display:flex; flex-direction:column; gap:18px; }
.dh-mobile__nav .dh-mobile-menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.dh-mobile__nav .dh-mobile-menu a{ display:block; padding:12px; border-radius:10px; color:inherit; text-decoration:none; }
.dh-mobile__nav .dh-mobile-menu a:hover{ background:#f1f5f9; }
.dh-mobile__ctas{ display:flex; flex-direction:column; gap:10px; margin-top:auto; }


/* Open states */
body.nav-open{ overflow:hidden; }
body.nav-open .dh-mobile__panel{ transform:translateX(0); }
body.nav-open .dh-burger__bar:nth-child(1){ transform:translateY(5px) rotate(45deg); }
body.nav-open .dh-burger__bar:nth-child(2){ opacity:0; }
body.nav-open .dh-burger__bar:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }


/* Responsive */
@media (max-width: 992px){
.dh-header__center{ display:none; }
.dh-ctas{ display:none; }
.dh-burger{ display:inline-flex; }
}




/* Full-width header container */
.dh-container--fluid{ width:100%; max-width:none; margin:0; padding-inline:20px; }

/* Keep menu perfectly centered between left & right areas */
.dh-header__bar{
  display:grid;
  grid-template-columns:1fr auto 1fr; /* left | center | right */
  align-items:center; gap:16px; padding:12px 0;
}
.dh-header__left{ justify-self:start; }
.dh-header__center{ justify-self:center; }
.dh-header__right{ justify-self:end; display:flex; align-items:center; gap:10px; }

/* Admin bar offset for sticky header */
body.admin-bar .dh-header--frost{ top:32px; }
@media (max-width:782px){
  body.admin-bar .dh-header--frost{ top:46px; }
}



/* Top-level menu */
.dh-nav .dh-menu{ list-style:none; margin:0; padding:0; display:flex; gap:22px; }
.dh-nav .dh-menu > li{ position:relative; }
.dh-nav .dh-menu > li > a{
  display:block; padding:10px 12px; border-radius:10px; color:#111; text-decoration:none;
}
.dh-nav .dh-menu > li > a:hover{ background:#f1f5f9; }

/* Dropdown */
.dh-nav .sub-menu{
  position:absolute; top:calc(100% + 12px); left:0; min-width:220px;
  list-style:none; margin:0; padding:8px;
  background:#fff; border:1px solid var(--dh-line); border-radius:14px;
  box-shadow:var(--dh-shadow-md); z-index:1200;
  opacity:0; transform:translateY(6px) scale(.98); pointer-events:none;
  transition:opacity var(--dh-speed) var(--dh-ease), transform var(--dh-speed) var(--dh-ease);
}
.dh-nav .sub-menu li a{
  display:block; padding:10px 12px; border-radius:10px; color:inherit; text-decoration:none;
}
.dh-nav .sub-menu li a:hover{ background:#f1f5f9; }

/* Show dropdown on hover/focus */
.dh-nav .dh-menu > li:hover > .sub-menu,
.dh-nav .dh-menu > li:focus-within > .sub-menu{
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}

/* Mobile: hide desktop nav, show burger */
@media (max-width:992px){
  .dh-header__center{ display:none; }
  .dh-ctas{ display:none; }
  .dh-burger{ display:inline-flex; }
}