/* ================================================================
   HIG DESIGN SYSTEM — v5.1  |  guest.css
   ================================================================
   SCOPE: Guest / public shell ONLY (layout.twig → not user['auth'])
   Loads after base.css. Do NOT load auth.css on guest pages.

   Contains
   ─────────────────────────────────────────────────────────────
   §7  Guest nav  (#guest-nav, .navbar-brand, .nav-link)
   §7  Guest footer (#guest-footer, .gf-*)
   §7  Guest content (#guest-content padding)
   ================================================================ */

/* ================================================================
   7. GUEST LAYOUT
   ================================================================ */

/* ── Guest nav (glass via §3) ── */
#guest-nav {
  min-height:       52px;
  border-block-end: 1px solid var(--glass-border);
}

#guest-nav .navbar-brand {
  font-weight:    700;
  font-size:      14.5px;
  letter-spacing: -0.02em;
  color:          var(--ink-primary);
}
#guest-nav .nav-link {
  font-size:      13px;
  font-weight:    500;
  letter-spacing: -0.01em;
  color:          var(--ink-secondary);
  padding-inline: 0.7rem;
  padding-block:  0.35rem;
  border-radius:  8px;
  transition:     color var(--dur-fast), background-color var(--dur-fast);
}
#guest-nav .nav-link:hover                        { color: var(--ink-primary); background: var(--hover-light); }
[data-bs-theme="dark"] #guest-nav .nav-link:hover { background: var(--hover-dark); }
#guest-nav .nav-link.active                       { color: var(--ink-accent); font-weight: 600; }

#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(--dur-fast);
}
#guest-nav .navbar-toggler:hover                        { background-color: var(--hover-light); }
[data-bs-theme="dark"] #guest-nav .navbar-toggler:hover { background-color: var(--hover-dark); }
#guest-nav .navbar-toggler:focus                        { box-shadow: var(--focus-ring); outline: none; }

[data-bs-theme="light"] #guest-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%235A5A6E' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] #guest-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%238E8E9A' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Animated hamburger (progressive enhancement — hides default icon if .toggler-icon present) */
#guest-nav .navbar-toggler:has(.toggler-icon) .navbar-toggler-icon { display: none; }

#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(--ink-secondary);
  transition:
    top       var(--dur-base) var(--ease-smooth),
    transform var(--dur-base) var(--ease-smooth),
    opacity   var(--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(--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(--ink-primary);
}

/* ── Guest footer (glass via §3) ── */
#guest-footer {
  border-block-start: 1px solid var(--glass-border);
  padding-block:      22px;
}
.gf-brand-name {
  font-size:      12px;
  font-weight:    700;
  color:          var(--ink-primary);
  letter-spacing: -0.02em;
}
.gf-brand {
  color:           var(--ink-primary);
  text-decoration: none;
}
.gf-brand:hover { color: var(--ink-primary); }
.gf-link {
  font-size:       11px;
  font-weight:     500;
  color:           var(--ink-tertiary);
  text-decoration: none;
  transition:      color var(--dur-fast);
}
.gf-link:hover { color: var(--ink-accent); }
.gf-dot {
  width:         3px;
  height:        3px;
  border-radius: 50%;
  background:    var(--ink-tertiary);
  opacity:       0.35;
}
.gf-copy { font-size: 11px; color: var(--ink-tertiary); white-space: nowrap; }


/* ── Guest content area ── */
#guest-content {
  padding: 0;
}

/*
  Guest pages use Bootstrap container inside #guest-content.
  Add vertical breathing room so the glass nav doesn't collide with the content.
*/
#guest-content > .container,
#guest-content > .container-fluid {
  padding-block-start: 48px;
  padding-block-end:   48px;
}

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