/* =============================================================================
   THE C LOUNGE — MOBILE ELITE LAYER
   Made By Eng Nayer Nader
   Loaded after main.css. Refines the handheld experience only: safe areas,
   dynamic viewport units, scroll locking, tap ergonomics and a properly
   choreographed navigation drawer. Desktop is untouched.
   ============================================================================= */

/* --------------------------------------------------------------------------
   1. Foundations — applies at every width, costs nothing on desktop
   -------------------------------------------------------------------------- */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --vh-unit: 1vh;                 /* replaced with a real pixel value by JS */
  --tap: 44px;                    /* Apple HIG minimum target */
  --nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* Never let a stray element create a horizontal scrollbar on a phone. */
html, body { max-width: 100%; }

a, button, [role="button"], input, select, textarea, label {
  touch-action: manipulation;
}

/* Scroll lock that survives iOS Safari and preserves scroll position. */
body.cl-scroll-locked {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Keyboard users always see where they are. */
:focus-visible {
  outline: 2px solid var(--gold-bright, #d8b978);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   2. Navigation drawer — the centrepiece of the handheld experience
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {

  .nav {
    padding-top: var(--safe-top);
    transition: background 0.5s var(--nav-ease), backdrop-filter 0.5s var(--nav-ease);
  }

  .nav-inner {
    padding-left: max(0px, var(--safe-left));
    padding-right: max(0px, var(--safe-right));
  }

  /* Hamburger: a real 48px target with a calm, precise morph. */
  .nav-toggle {
    width: 48px;
    height: 48px;
    gap: 6px;
    border-radius: 999px;
    position: relative;
    z-index: 3;
    transition: background 0.4s var(--nav-ease);
  }
  .nav-toggle::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: border-color 0.45s var(--nav-ease), background 0.45s var(--nav-ease);
  }
  .nav-toggle:active::before { background: rgba(198, 166, 106, 0.10); }
  .nav-toggle.open::before { border-color: rgba(198, 166, 106, 0.32); }
  .nav-toggle span {
    width: 22px;
    transition: transform 0.5s var(--nav-ease), opacity 0.25s var(--nav-ease), width 0.5s var(--nav-ease);
  }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 22px; }

  /* Drawer surface. */
  .nav-mobile {
    position: fixed;
    inset: 0;
    z-index: 1;
    padding:
      calc(var(--safe-top) + 104px)
      calc(var(--safe-right) + 26px)
      calc(var(--safe-bottom) + 34px)
      calc(var(--safe-left) + 26px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    background:
      radial-gradient(120% 90% at 78% 4%, rgba(198, 166, 106, 0.10), transparent 62%),
      rgba(5, 8, 14, 0.985);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
    backdrop-filter: blur(26px) saturate(140%);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 0, 0);
    transition:
      opacity 0.42s var(--nav-ease),
      visibility 0.42s linear;
    will-change: opacity;
  }

  .nav-mobile.open { opacity: 1; visibility: visible; }

  /* A hairline of gold that draws itself as the drawer opens. */
  .nav-mobile::before {
    content: "";
    position: absolute;
    left: calc(var(--safe-left) + 26px);
    right: calc(var(--safe-right) + 26px);
    top: calc(var(--safe-top) + 92px);
    height: 1px;
    background: linear-gradient(90deg, rgba(198, 166, 106, 0.62), rgba(198, 166, 106, 0));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s var(--nav-ease) 0.08s;
  }
  .nav-mobile.open::before { transform: scaleX(1); }

  /* Each row rises in sequence — the small detail that reads as expensive. */
  .nav-mobile > a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--tap);
    padding: 15px 2px;
    font-family: var(--font-display);
    font-size: clamp(19px, 5.6vw, 26px);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ivory, #f3efe7);
    border-bottom: 1px solid var(--line-faint, rgba(255,255,255,0.07));
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
      opacity 0.5s var(--nav-ease),
      transform 0.62s var(--nav-ease),
      color 0.3s ease;
  }

  .nav-mobile.open > a { opacity: 1; transform: translate3d(0, 0, 0); }
  .nav-mobile.open > a:nth-child(1) { transition-delay: 0.06s; }
  .nav-mobile.open > a:nth-child(2) { transition-delay: 0.11s; }
  .nav-mobile.open > a:nth-child(3) { transition-delay: 0.16s; }
  .nav-mobile.open > a:nth-child(4) { transition-delay: 0.21s; }
  .nav-mobile.open > a:nth-child(5) { transition-delay: 0.26s; }
  .nav-mobile.open > a:nth-child(6) { transition-delay: 0.31s; }
  .nav-mobile.open > a:nth-child(7) { transition-delay: 0.38s; }

  .nav-mobile > a:active { color: var(--gold-bright, #d8b978); }

  /* Numbered index on the right, quiet and typographic. */
  .nav-mobile { counter-reset: nav-item; }
  .nav-mobile > a:not(.nav-mobile-cta)::after {
    content: "0" counter(nav-item);
    counter-increment: nav-item;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    color: var(--gold-soft, rgba(198,166,106,0.62));
    opacity: 0.75;
  }
  .nav-mobile > a::before { content: none !important; }

  /* Current page gets a gold marker rather than a colour change alone. */
  .nav-mobile > a[aria-current="page"] {
    color: var(--gold-bright, #d8b978);
  }
  .nav-mobile > a[aria-current="page"]::after {
    color: var(--gold-bright, #d8b978);
    opacity: 1;
  }

  .nav-mobile .nav-mobile-cta {
    border-bottom: 0;
    margin-top: auto;
    padding-top: 28px;
  }
  .nav-mobile .nav-mobile-cta .btn {
    width: 100%;
    min-height: 54px;
    justify-content: center;
  }

  /* The drawer previously rendered an authorship line here via ::after.
     Removed at the owner's request: the signature lives in source comments
     and the copyright meta tag, never in the visitor-facing interface. */

  /* Background content is inert while the drawer is open. */
  body.cl-nav-open main,
  body.cl-nav-open footer,
  body.cl-nav-open .chat-widget { pointer-events: none; }
  body.cl-nav-open .chat-widget { opacity: 0; transition: opacity 0.3s ease; }
}

/* --------------------------------------------------------------------------
   3. Handheld ergonomics
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {

  /* Every interactive element clears the 44px minimum. */
  .btn,
  .nav-cta,
  .link-arrow,
  .chat-quick button,
  .chat-send,
  .chat-close,
  .footer-links a,
  .index-item {
    min-height: var(--tap);
  }

  /* 16px inputs stop iOS from zooming the whole page on focus. */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Long words and email addresses never blow out the layout. */
  h1, h2, h3, p, li, a, dd, dt {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Horizontal rails scroll with intent and snap cleanly. */
  .chat-quick,
  .contact-hud,
  .services-index {
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }
  .chat-quick > *,
  .services-index .index-item { scroll-snap-align: start; }

  /* Bottom-of-screen breathing room on gesture-bar phones. */
  .site-footer,
  footer { padding-bottom: calc(28px + var(--safe-bottom)); }
}

/* --------------------------------------------------------------------------
   4. Viewport height correctness (older iOS + address-bar collapse)
   -------------------------------------------------------------------------- */
@supports not (height: 100dvh) {
  @media (max-width: 1080px) {
    .hero { min-height: calc(var(--vh-unit) * 100); }
    .nav-mobile { height: calc(var(--vh-unit) * 100); }
  }
}

/* --------------------------------------------------------------------------
   5. Concierge panel on a phone
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .chat-panel {
    top: calc(var(--safe-top) + 88px);
    bottom: calc(max(10px, var(--safe-bottom)) + 70px);
    overscroll-behavior: contain;
  }
  .chat-body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .chat-form input {
    font-size: 16px !important;
  }
  .chat-toggle {
    width: 58px;
    height: 58px;
  }
  body.cl-scroll-locked .chat-panel { position: fixed; }
}

/* --------------------------------------------------------------------------
   6. Performance & battery on handhelds
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .hero-canvas { display: none; }        /* particle canvas is desktop-only */
  .cursor-spotlight { display: none; }
  .grain { opacity: 0.02; }
  img, video { content-visibility: auto; }
}

@media (prefers-reduced-data: reduce) {
  .hero-video { display: none; }
}

/* --------------------------------------------------------------------------
   7. Print — a clean, signed document
   -------------------------------------------------------------------------- */
@media print {
  .nav, .nav-mobile, .chat-widget, .preloader, .hero-video { display: none !important; }
  body { background: #fff; color: #000; }
  main::after {
    content: "The C Lounge";
    display: block;
    margin-top: 24px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
}

/* Keyboard-safe chat viewport: visualViewport shrinks when the iOS/Android
   keyboard opens, so the concierge follows the visible viewport rather than
   sitting underneath the keyboard. */
@media (max-width: 640px) {
  .chat-panel {
    max-height: calc(var(--cl-viewport-height, 100dvh) - var(--chat-nav-clearance) - var(--chat-edge) - var(--chat-toggle-size) - 14px);
  }

  body.cl-keyboard-open .chat-panel {
    top: var(--chat-nav-clearance);
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    max-height: calc(var(--cl-viewport-height, 100dvh) - var(--chat-nav-clearance) - 8px);
  }

  body.cl-keyboard-open .chat-toggle {
    opacity: 0;
    pointer-events: none;
    transform: scale(.92);
  }
}

/* =============================================================================
   V58 — additive mobile hardening
   Made By Eng Nayer Nader
   Nothing below changes desktop rendering. Every rule is either a fallback for
   an older engine or a fix for a defect observed in the handheld layer.
   ========================================================================== */

/* `inert` is applied by mobile-elite.js to everything behind the open drawer.
   Modern engines neutralise pointer and focus themselves; this is the safety
   net for engines that parse the attribute but do not implement the behaviour,
   and it makes the intent visible in the stylesheet. */
[inert] {
  pointer-events: none !important;
  user-select: none !important;
  cursor: default !important;
}
[inert] * {
  pointer-events: none !important;
}

@media (max-width: 1080px) {
  /* The drawer scrolls independently on short phones in landscape. Without
     overscroll containment a flick past the last item chains to the locked
     body and iOS shows the rubber-band gap behind the panel. */
  .nav-mobile {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-mobile::-webkit-scrollbar { display: none; }

  /* A hidden drawer must be unreachable by assistive tech and by Tab even in
     the frame before the JS sets aria-hidden. */
  .nav-mobile:not(.open) {
    pointer-events: none;
  }

  /* 44x44 is the Apple Human Interface Guidelines minimum hit target. The
     visual size of these controls is smaller by design, so the target is
     enlarged with padding rather than by growing the artwork. */
  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .nav-mobile > a {
    min-height: 44px;
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

/* Landscape phones: the drawer's vertical rhythm is tuned for portrait and
   overflows a 380px-tall viewport. Compress it rather than let it clip. */
@media (max-width: 1080px) and (max-height: 480px) and (orientation: landscape) {
  .nav-mobile {
    justify-content: flex-start;
    padding-top: max(4.5rem, env(safe-area-inset-top));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .nav-mobile > a {
    font-size: clamp(1.1rem, 4.2vh, 1.6rem);
    min-height: 40px;
  }
  /* Staggered reveal delays feel slow when there is little travel distance. */
  .nav-mobile.open > a { transition-delay: 0.04s !important; }
}

/* Respect the user's motion setting in the drawer as well as the page body. */
@media (prefers-reduced-motion: reduce) {
  .nav-mobile,
  .nav-mobile > a,
  .nav-mobile::before,
  .nav-mobile::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* When the on-screen keyboard is up, the floating concierge button overlaps the
   input it belongs to. mobile-elite.js sets .cl-keyboard-open on <body>. */
@media (max-width: 640px) {
  body.cl-keyboard-open .chat-fab,
  body.cl-keyboard-open .chat-launcher {
    opacity: 0;
    pointer-events: none;
  }
}

/* Signature — Made By Eng Nayer Nader */