/* ================================================================
   GUEST.CSS — v6.0  (optimized)
   SCOPE: Guest / public shell ONLY
   Loads after base.css. لا تُحمّل auth.css مع guest pages.

   Contains
   ──────────────────────────────────────────────────────────────
   §1  Glass layer   (#guest-nav · #guest-footer)
   §2  Guest nav     (navbar · brand · links · animated hamburger)
   §3  Guest footer  (#guest-footer · .gf-*)
   §4  Guest content (#guest-content padding)
   §5  Accessibility & focus rings
   §6  Responsive
   ================================================================
   CHANGELOG v6.0
   — FIX color: focus rings موحدة حول var(--comp-focus-outline)
             من base.css §1c بدلاً من var(--bs-primary) مباشرة.
             --comp-focus-outline = var(--app-ink-accent) ويتحدث
             تلقائياً مع dark mode.
   — FIX 02: SCOPE RULE موثق — guest shell لا تستخدم shell tokens
             الخاصة بـ auth (#app-wrapper dimensions).
   — ALIGN: متوافق مع base.css v6.0 (component tokens في §1c).
   — OPT:   دمج @supports الثانية داخل الأولى (كانت مكررة في §6).
   ================================================================
   SCOPE RULE (مرجع):
   ┌─────────────────────────────────────────────────────────────┐
   │  guest.css يستضيف فقط:                                     │
   │  - #guest-nav styles                                        │
   │  - #guest-footer styles                                     │
   │  - #guest-content padding                                   │
   │                                                             │
   │  guest.css لا يستضيف:                                       │
   │  - shell tokens (تنتمي لـ #app-wrapper في auth.css §0)      │
   │  - page-specific CSS                                        │
   └─────────────────────────────────────────────────────────────┘
   ================================================================ */


/* ================================================================
   §1  GLASS LAYER
   Fallback أولاً في القاعدة العادية،
   ثم @supports يُعيد تعريف الخاصية للمتصفحات الداعمة.
   المتصفحات المتقدمة (LG+): يُدمج mobile override هنا أيضاً
   بدلاً من تكرار feature query في §6.
   ================================================================ */

#guest-nav,
#guest-footer {
  background: var(--app-vibrancy-regular-fallback);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  #guest-nav,
  #guest-footer {
    background:              var(--app-vibrancy-regular-bg);
    backdrop-filter:         var(--app-vibrancy-regular-blur);
    -webkit-backdrop-filter: var(--app-vibrancy-regular-blur);
  }

  /* Mobile collapsed menu — مدمج هنا بدلاً من تكرار @supports في §6 */
  @media (max-width: 991.98px) {
    #guest-nav #guest-navbar {
      background:              var(--app-vibrancy-regular-bg);
      backdrop-filter:         var(--app-vibrancy-regular-blur);
      -webkit-backdrop-filter: var(--app-vibrancy-regular-blur);
    }
  }
}


/* ================================================================
   §2  GUEST NAV
   ================================================================ */

#guest-nav {
  position:         sticky;
  top:              0;
  z-index:          1020;
  min-height:       52px;
  border-block-end: 1px solid var(--app-border);
}

#guest-nav .navbar-brand {
  font-weight:    700;
  font-size:      var(--app-fs-lg);
  letter-spacing: -0.02em;
  color:          var(--app-ink-primary);
}

#guest-nav .nav-link {
  font-size:      var(--app-fs-md);
  font-weight:    500;
  letter-spacing: var(--app-ls-normal);
  color:          var(--nav-link-color);
  padding-inline: 0.7rem;
  padding-block:  0.35rem;
  border-radius:  8px;
  transition:     color var(--app-dur-fast), background-color var(--app-dur-fast);
}
#guest-nav .nav-link:hover {
  color:      var(--nav-link-color-hover);
  background: var(--nav-link-bg-hover);
}
#guest-nav .nav-link.active {
  color:       var(--nav-link-color-active);
  font-weight: 600;
}

/* —— Navbar toggler —— */
#guest-nav .navbar-toggler {
  --bs-navbar-toggler-border-color:  transparent;
  --bs-navbar-toggler-border-radius: var(--bs-border-radius);
  --bs-navbar-toggler-focus-width:   0;
  transition: background-color var(--app-dur-fast);
}
#guest-nav .navbar-toggler:hover { background-color: var(--app-hover-light); }
[data-bs-theme="dark"] #guest-nav .navbar-toggler:hover {
  background-color: var(--app-hover-dark);
}

/*
 * NOTE: هذا الـ override يعمل فقط إذا كان الـ HTML يحتوي على:
 * <button class="navbar-toggler">
 *   <span class="toggler-icon" aria-hidden="true">
 *     <span class="toggler-line"></span>
 *   </span>
 * </button>
 * Bootstrap's default toggler-icon يُفعَّل بـ background-image:none.
 */
#guest-nav .navbar-toggler-icon {
  background-image: none;
}

/* —— Animated hamburger —— */
#guest-nav .navbar-toggler .toggler-icon {
  position: relative;
  display:  block;
  width:    22px;
  height:   16px;
  margin:   auto;
}
#guest-nav .navbar-toggler .toggler-icon::before,
#guest-nav .navbar-toggler .toggler-icon .toggler-line,
#guest-nav .navbar-toggler .toggler-icon::after {
  content:            '';
  display:            block;
  position:           absolute;
  inset-inline-start: 0;
  width:              100%;
  height:             1.5px;
  border-radius:      2px;
  background:         var(--app-ink-secondary);
  transition:
    top       var(--app-dur-base) var(--app-ease-smooth),
    transform var(--app-dur-base) var(--app-ease-smooth),
    opacity   var(--app-dur-fast) linear;
}
#guest-nav .navbar-toggler .toggler-icon::before    { top: 0; }
#guest-nav .navbar-toggler .toggler-icon .toggler-line { top: 7px; }
#guest-nav .navbar-toggler .toggler-icon::after     { top: 14px; }

#guest-nav .navbar-toggler[aria-expanded="true"] .toggler-icon::before {
  top:        7px;
  transform:  rotate(45deg);
  background: var(--app-ink-primary);
}
#guest-nav .navbar-toggler[aria-expanded="true"] .toggler-icon .toggler-line {
  opacity:   0;
  transform: scaleX(0);
}
#guest-nav .navbar-toggler[aria-expanded="true"] .toggler-icon::after {
  top:        7px;
  transform:  rotate(-45deg);
  background: var(--app-ink-primary);
}


/* ================================================================
   §3  GUEST FOOTER
   ================================================================ */

#guest-footer {
  border-block-start: 1px solid var(--app-border);
  padding-block:      22px;
}

.gf-brand-name {
  font-size:      var(--app-fs-sm);
  font-weight:    700;
  color:          var(--app-ink-primary);
  letter-spacing: -0.02em;
}
.gf-brand       { color: var(--app-ink-primary); text-decoration: none; }
.gf-brand:hover { color: var(--app-ink-primary); }

.gf-link {
  font-size:       var(--app-fs-xs);
  font-weight:     500;
  color:           var(--app-ink-tertiary);
  text-decoration: none;
  transition:      color var(--app-dur-fast);
}
.gf-link:hover { color: var(--app-ink-accent); }

/* .gf-dot → see .app-sep-dot in base.css §5 */
.gf-copy {
  font-size:   var(--app-fs-xs);
  color:       var(--app-ink-tertiary);
  white-space: nowrap;
}


/* ================================================================
   §4  GUEST CONTENT
   ================================================================ */

#guest-content {
  scroll-behavior: smooth;
}

#guest-content > .container,
#guest-content > .container-fluid {
  padding-block-start: 48px;
  padding-block-end:   48px;
}


/* ================================================================
   §5  ACCESSIBILITY & FOCUS RINGS
   ——————————————————————————————————————————————————————————————
   FIX color v6.0: توحيد حول var(--comp-focus-outline) بدل
   var(--bs-primary) مباشرة.
   --comp-focus-outline = var(--app-ink-accent) من base.css §1c
   ويتحدث تلقائياً مع dark mode (#7464fc في dark).
   ================================================================ */

#guest-nav .nav-link:focus-visible,
#guest-nav .navbar-toggler:focus-visible {
  outline:        2px solid var(--comp-focus-outline);
  outline-offset: 3px;
  box-shadow:     none !important;
}
.gf-link:focus-visible {
  outline:        2px solid var(--comp-focus-outline);
  outline-offset: 3px;
  box-shadow:     none !important;
}
.gf-brand:focus-visible {
  outline:        2px solid var(--comp-focus-outline);
  outline-offset: 3px;
  border-radius:  4px;
}


/* ================================================================
   §6  RESPONSIVE
   ================================================================ */

@media (max-width: 991.98px) {
  #guest-nav #guest-navbar {
    background:         var(--app-vibrancy-regular-fallback);
    border-block-start: 1px solid var(--app-border);
    margin-block-start: 4px;
    padding-block:      8px 12px;
  }
  #guest-nav .navbar-nav { gap: 2px; }
  #guest-nav .nav-link {
    padding-inline: 12px;
    padding-block:  9px;
    border-radius:  8px;
    margin-inline:  4px;
  }
  #guest-footer .gf-inner {
    flex-direction: column;
    align-items:    flex-start;
  }
}

@media (max-width: 767.98px) {
  #guest-content > .container,
  #guest-content > .container-fluid {
    padding-block-start: 28px;
    padding-block-end:   28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #guest-nav .navbar-toggler .toggler-icon::before,
  #guest-nav .navbar-toggler .toggler-icon .toggler-line,
  #guest-nav .navbar-toggler .toggler-icon::after,
  .gf-link,
  #guest-nav .nav-link {
    transition: none !important;
  }
  #guest-content {
    scroll-behavior: auto;
  }
}