/* Luminous / Deli side preview — isolated from Bootstrap premium.css.
   Tailwind utilities are loaded via CDN in deli.html; this file provides the warm theme tokens + glass utilities.
   Q1 keep gold heroic: --gold stays for heritage accents; sage (#929783) isolated to AI widget only.
   Q4 typography: Poppins 500 for display, Inter for body, Cormorant Garamond for the brand wordmark. */
:root {
  --radius: 1.25rem;
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --radius-4xl: calc(1.25rem + 16px);
  --background: oklch(0.977 0.011 95);
  --foreground: oklch(0.245 0.018 90);
  --card: oklch(0.993 0.006 95);
  --card-foreground: oklch(0.245 0.018 90);
  --popover: oklch(0.993 0.006 95);
  --popover-foreground: oklch(0.245 0.018 90);
  --primary: oklch(0.51 0.058 132);
  --primary-foreground: oklch(0.98 0.012 95);
  --secondary: oklch(0.945 0.021 105);
  --secondary-foreground: oklch(0.33 0.035 120);
  --muted: oklch(0.949 0.014 100);
  --muted-foreground: oklch(0.53 0.02 105);
  --accent: oklch(0.895 0.05 118);
  --accent-foreground: oklch(0.31 0.04 125);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.98 0.012 95);
  --border: oklch(0.905 0.014 100);
  --input: oklch(0.905 0.014 100);
  --ring: oklch(0.51 0.058 132);
  --glass: oklch(1 0 0 / 0.16);
  --glass-strong: oklch(1 0 0 / 0.55);
  --glass-border: oklch(1 0 0 / 0.35);
  --onmedia: oklch(0.99 0.008 95);
  --onmedia-muted: oklch(0.9 0.012 95 / 0.82);
  --gradient-warm: linear-gradient(145deg, oklch(0.965 0.03 100) 0%, oklch(0.94 0.035 122) 55%, oklch(0.955 0.025 85) 100%);
  --shadow-glass: 0 24px 60px -24px oklch(0.3 0.04 120 / 0.35);
  --shadow-soft: 0 12px 40px -20px oklch(0.3 0.04 120 / 0.28);
  /* Brand bridge: heritage gold (kept) + AI sage (isolated) + charcoal */
  --gold: #c5a059;
  --gold-hover: #b08d4a;
  --sage: #929783;
  --sage-hover: #82876f;
  --sage-soft-bg: #f4f8e8;
  --sage-soft-border: #d6ddc1;
  --sage-soft-text: #6b6f60;
  --charcoal: #373e4f;
  --body-muted: #6d7998;
  --input-border: #cdd1de;
  /* usedeli.com pastel dual-glow for hero search */
  --glow-blue: #9ac7e8b3;
  --glow-purple: #bc88ceb3;
  --glow-blue-strong: #9ac7e8f2;
  --glow-purple-strong: #bc88cef2;
}
.deli-scope { color: var(--foreground); background: var(--background); font-family: "Inter", "Noto Sans Devanagari", ui-sans-serif, system-ui, "Nirmala UI", Mangal, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.deli-scope h1, .deli-scope h2, .deli-scope h3 { font-family: "Poppins", "Noto Sans Devanagari", ui-sans-serif, system-ui, "Nirmala UI", sans-serif; font-weight: 500; letter-spacing: -0.02em; }
/* Unified brand lockup — Image 1 placement, Image 2 type: Cormorant wordmark + gold subline.
   Nav fragments also carry these as inline styles so the lockup survives stale CSS caches. */
.pmh-brand-name { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: .14em; color: #1f2748; white-space: nowrap; line-height: 1.1; }
.pmh-brand-sub { font-family: Inter, system-ui, sans-serif; font-weight: 600; letter-spacing: .32em; color: #c5a059; text-transform: uppercase; white-space: nowrap; line-height: 1.2; }
.warm-canvas { background-image: var(--gradient-warm); }
.glass { background: var(--glass); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass); }
.glass-panel { background: color-mix(in oklab, var(--card) 55%, transparent); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border: 1px solid color-mix(in oklab, white 60%, var(--border)); box-shadow: var(--shadow-soft); transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background 200ms ease; }
.glass-panel:hover { transform: translateY(-2px); }
.glass-pill { background: var(--glass); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--glass-border); }
.glow-ring { box-shadow: 4px 0 16px var(--glow-blue), -4px 0 16px var(--glow-purple), 0 0 0 1px oklch(1 0 0 / 0.5); transition: box-shadow 200ms ease; }
.glow-ring:hover, .glow-ring:focus-within { box-shadow: 6px 0 26px var(--glow-blue-strong), -6px 0 26px var(--glow-purple-strong), 0 0 0 1px oklch(1 0 0 / 0.6); }
.text-onmedia { color: var(--onmedia); }
.text-onmedia-muted { color: var(--onmedia-muted); }
.bg-glass-strong { background: var(--glass-strong); }
.rounded-4xl { border-radius: var(--radius-4xl); }

/* Sage AI badge (isolated — not site gold) */
.sage-badge { background: var(--sage-soft-bg); border: 1px solid var(--sage-soft-border); color: var(--sage-soft-text); }
.sage-btn { background: var(--sage); color: #fff; transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease; }
.sage-btn:hover { background: var(--sage-hover); transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(130,135,111,.7); }
.gold-accent { color: var(--gold); }

/* Hero search pill — borderless white like the reference: soft pastel glow, no edge at all. */
.hero-search-pill { background: #fff; border: 1px solid transparent; box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 14px 44px -12px rgba(126,134,190,.55), 0 2px 10px rgba(20,24,40,.10); }
.hero-search-pill input::placeholder { color: #818eae; letter-spacing: -0.01em; }
/* Focus glow lives on the pill only — the bare input never paints its own ring or border. */
.hero-search-pill:focus-within {
  border-color: transparent !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 16px 54px -12px rgba(126,134,190,.7), 0 2px 12px rgba(20,24,40,.12) !important;
}
#search-bar:focus-within, #mind-form:focus-within {
  border-color: var(--sage) !important;
  box-shadow: 0 0 0 3px rgba(146, 151, 131, 0.16) !important;
}
/* The text field is invisible chrome in every state — kills the inner grey box, resting and focused. */
.hero-search-pill input, #search-bar input, #mind-form input {
  border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important;
}
.deli-scope .hero-search-pill input:focus, .deli-scope #search-bar input:focus, .deli-scope #mind-form input:focus {
  border-color: transparent !important; box-shadow: none !important; outline: none !important;
}
/* Scroll cue */
@keyframes deliBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.animate-bounce-soft { animation: deliBounce 1.6s ease-in-out infinite; }

/* Card hover system */
.lift { transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background 200ms ease; }
.lift:hover { transform: translateY(-4px); }
.icon-tile { transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease; }
.group:hover .icon-tile { transform: translateY(-4px) rotate(-6deg); background: var(--sage); color: #fff; box-shadow: 0 10px 20px -10px rgba(130,135,111,.8); }
.icon-tile svg { width: 20px; height: 20px; }

/* Dark glass section (usedeli #properties) */
.dark-band { background: #171b24; }
.dark-card { border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease; }
.dark-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.dark-card .icon-tile { background: rgba(255,255,255,.10); color: #fff; }
.dark-card:hover .icon-tile { background: var(--sage); }

/* FAQ smooth accordion (native details, modern) */
.deli-faq details::details-content { height: 0; overflow: hidden; transition: height .3s ease, content-visibility .3s allow-discrete; }
.deli-faq details[open]::details-content { height: auto; }
.deli-faq details summary::-webkit-details-marker { display: none; }
.deli-faq details summary .chev { transition: transform 200ms ease; }
.deli-faq details[open] summary .chev { transform: rotate(180deg); }

/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .animate-bounce-soft { animation: none; }
}

/* Focus visibility */
.deli-scope a:focus-visible, .deli-scope button:focus-visible, .deli-scope summary:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 9999px; }
.deli-faq details summary:focus-visible { border-radius: 12px; }
/* Calm text-entry focus (overrides the generic input ring above): soft sage glow, never a harsh outline.
   Covers mouse-focus too (:focus, not just :focus-visible) — that's where the black border came from. */
.deli-scope input[type="text"], .deli-scope input[type="search"], .deli-scope input[type="email"],
.deli-scope input[type="password"], .deli-scope input[type="tel"], .deli-scope input[type="number"],
.deli-scope input:not([type]), .deli-scope textarea, .deli-scope select { outline: none; }
.deli-scope input:focus, .deli-scope textarea:focus, .deli-scope select:focus {
  outline: none !important;
  border-color: var(--sage) !important;
  box-shadow: 0 0 0 3px rgba(146, 151, 131, 0.22) !important;
}

/* Constant strip nav — solid, full-width, sticky (replaces floating glass pill) */
.pmh-strip{position:sticky;top:0;z-index:50;background:#ffffff;border-bottom:1px solid #e6e8ee;}
/* Locked to 68px to match the fixed premium nav on all other pages */
.pmh-strip-inner{max-width:72rem;margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1.25rem;min-height:68px;box-sizing:border-box;}
.deli-scope section[id]{scroll-margin-top:84px;}
.sage-btn{transition:transform .12s ease, box-shadow .2s ease, background .2s ease;}
.sage-btn:active{transform:scale(.97);}

/* Auth buttons: alive feedback (shared by login/register/verify) */
.pmh-btn-busy{opacity:.75;pointer-events:none;}
.pmh-spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;vertical-align:-2px;margin-right:8px;animation:pmh-spin .7s linear infinite;}
@keyframes pmh-spin{to{transform:rotate(360deg);}}
.pmh-btn-pulse{animation:pmh-pulse 1.6s ease-in-out infinite;}
@keyframes pmh-pulse{0%,100%{box-shadow:0 0 0 0 rgba(146,151,131,.45);}50%{box-shadow:0 0 0 7px rgba(146,151,131,0);}}
@media (prefers-reduced-motion:reduce){.pmh-btn-pulse{animation:none;}.pmh-spinner{animation-duration:1.4s;}}