/* ============================================================================
 * Ludus patron nav — pure CSS port of the Tailwind utilities that
 * ludus-next uses in its patron nav Blade components:
 *   resources/views/components/patron-nav.blade.php
 *   resources/views/components/navigation/desktop-nav-link.blade.php
 *   resources/views/components/navigation/mobile-nav.blade.php
 *   resources/views/components/navigation/mobile-nav-link.blade.php
 *
 * Class names below mirror the Tailwind class names verbatim so the legacy
 * markup uses the same class strings as next. Each rule is scoped under
 * .ln-nav so these generic-looking utility names cannot leak to the rest
 * of the legacy patron pages, and so specificity (0,2,0) beats the legacy
 * inline `a:link, a:visited { !important }` block at head.php:404.
 *
 * Put `ln-nav` on the outer <header>. All CSS vars (--header-*, --logo-*)
 * are set inline on that same element from $site_design.
 * ============================================================================ */


/* ---- Display ---- */
.ln-nav .flex        { display: flex; }
.ln-nav .inline-flex { display: inline-flex; }
.ln-nav .inline      { display: inline; }
.ln-nav .block       { display: block; }
.ln-nav .hidden      { display: none; }

/* Root <header> carries `ln-nav sticky ...` together */
.ln-nav.sticky { position: sticky; }
.ln-nav.w-full { width: 100%; }
.ln-nav.h-\[var\(--header-height\)\] { height: var(--header-height); }
.ln-nav.top-0  { top: 0; }
.ln-nav.z-\[9999999\] { z-index: 9999999; }
.ln-nav.bg-\[var\(--header-background\)\] { background-color: var(--header-background); }
.ln-nav.shadow-\[0_1px_3px_0_rgb\(60_66_87_\/_10\%\)\,_0_3px_6px_0_rgb\(0_0_0_\/_0\%\)\] {
  box-shadow: 0 1px 3px 0 rgb(60 66 87 / 10%),
              0 3px 6px 0 rgb(0 0 0 / 0%);
}


/* ---- Position ---- */
.ln-nav .fixed  { position: fixed; }
.ln-nav .top-0    { top: 0; }
.ln-nav .left-0   { left: 0; }
.ln-nav .right-0  { right: 0; }
.ln-nav .bottom-0 { bottom: 0; }
.ln-nav .top-\[var\(--header-height\)\] { top: var(--header-height); }
.ln-nav .z-\[100000\] { z-index: 100000; }


/* ---- Sizing ---- */
.ln-nav .w-full  { width: 100%; }
.ln-nav .h-full  { height: 100%; }
.ln-nav .w-auto  { width: auto; }
.ln-nav .h-\[50px\] { height: 50px; }
.ln-nav .h-\[var\(--header-height\)\] { height: var(--header-height); }
.ln-nav .h-\[var\(--logo-height\)\]   { height: var(--logo-height); }
.ln-nav .max-w-\[400px\] { max-width: 400px; }


/* ---- Flexbox ---- */
.ln-nav .flex-1         { flex: 1 1 0%; }
.ln-nav .flex-shrink-0  { flex-shrink: 0; }
.ln-nav .justify-between { justify-content: space-between; }
.ln-nav .justify-center  { justify-content: center; }
.ln-nav .items-center    { align-items: center; }
.ln-nav .gap-4 { gap: 1rem; }
.ln-nav .space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }
.ln-nav .space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.25rem; }


/* ---- Margin / Padding ---- */
.ln-nav .mx-auto { margin-left: auto; margin-right: auto; }
.ln-nav .ml-1 { margin-left: 0.25rem; }
.ln-nav .ml-2 { margin-left: 0.5rem; }
.ln-nav .ml-3 { margin-left: 0.75rem; }
.ln-nav .mt-5 { margin-top: 1.25rem; }
.ln-nav .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.ln-nav .px-2 { padding-left: 0.5rem;  padding-right: 0.5rem; }
.ln-nav .pt-0 { padding-top: 0; }


/* ---- Typography ---- */
.ln-nav .text-\[15px\] { font-size: 15px; }
.ln-nav .text-\[18px\] { font-size: 18px; }
.ln-nav .text-\[20px\] { font-size: 20px; }
.ln-nav .font-semibold { font-weight: 600; }
.ln-nav .font-bold     { font-weight: 700; }
.ln-nav .leading-\[2\]    { line-height: 2; }
.ln-nav .leading-\[50px\] { line-height: 50px; }
.ln-nav .no-underline { text-decoration-line: none; }
.ln-nav .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Color — Tailwind emits this WITHOUT !important, but in legacy context the
 * inline `a:link, a:visited { color: X !important }` at head.php:404 would
 * win specificity (0,1,1). Bump to !important here so anchors color right. */
.ln-nav .text-\[var\(--header-tab-font\)\] { color: var(--header-tab-font) !important; }

/* Color (Tailwind `!` prefix -> !important). Scoped .ln-nav bump
 * (0,2,0)+!important beats legacy `a:link { !important }` (0,1,1). */
.ln-nav .\!text-\[var\(--header-tab-font\)\] { color: var(--header-tab-font) !important; }


/* ---- Backgrounds ---- */
.ln-nav .bg-\[var\(--header-background\)\]     { background-color: var(--header-background); }
.ln-nav .bg-\[var\(--header-tab-background\)\] { background-color: var(--header-tab-background); }
.ln-nav .\!bg-\[var\(--header-tab-background\)\] { background-color: var(--header-tab-background) !important; }


/* ---- Effects ---- */
.ln-nav .opacity-95 { opacity: 0.95; }
.ln-nav .cursor-pointer { cursor: pointer; }
.ln-nav .transition-colors {
  transition-property: color, background-color, border-color,
                       text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ln-nav .duration-200 { transition-duration: 200ms; }

.ln-nav button {
  background-color: transparent;
  background-image: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}


/* ---- sr-only ---- */
.ln-nav .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.ln-nav .whitespace-nowrap { white-space: nowrap; }
.ln-nav .inline-flex       { white-space: nowrap; }


/* ---- Position + z ---- */
.ln-nav .relative       { position: relative; }
.ln-nav .absolute       { position: absolute; }
.ln-nav .top-0          { top: 0; }
.ln-nav .left-0         { left: 0; }
.ln-nav .right-0        { right: 0; }
.ln-nav .z-20           { z-index: 20; }

/* ---- Min-w / widths ---- */
.ln-nav .min-w-0        { min-width: 0; }
.ln-nav .w-\[38px\]     { width: 38px; }

/* ---- Flex justification ---- */
.ln-nav .justify-start  { justify-content: flex-start; }
.ln-nav .justify-end    { justify-content: flex-end; }
/* Tailwind arbitrary value `justify-[safe_center]` → CSS `safe center` fallback:
 * centers items when they fit, packs left-flush when they overflow so
 * horizontal scroll works normally (scrollLeft can reach both extents). */
.ln-nav .justify-\[safe_center\] { justify-content: safe center; }

/* ---- Overflow / scrollbar hide ---- */
.ln-nav .overflow-x-auto { overflow-x: auto; }
.ln-nav .\[scrollbar-width\:none\] { scrollbar-width: none; }
.ln-nav .ln-nav-strip { scrollbar-width: none; }
.ln-nav .ln-nav-strip::-webkit-scrollbar { display: none; }

/* ---- Padding ---- */
.ln-nav .pl-1 { padding-left: 0.25rem; }
.ln-nav .pr-1 { padding-right: 0.25rem; }

/* ---- Icon font sizes ---- */
.ln-nav .text-\[16px\] { font-size: 16px; }

/* ---- Scroll-cue arrows (patron nav) ---- */
/* Mirrors ludus-next admin-nav.css .nav-scroll-arrow but colored via CSS vars
 * so it works over the site-configured header background/tab colors. */
.ln-nav .ln-nav-scroll-arrow {
    position: absolute;
    top: 0;
    height: 100%;
    width: 38px;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 20;
}
.ln-nav .ln-nav-scroll-arrow.hidden { display: none; }
.ln-nav .ln-nav-scroll-arrow-right {
    right: 0;
    justify-content: flex-end;
    padding-right: 4px;
    background: linear-gradient(to right, transparent, var(--header-background) 60%);
}
.ln-nav .ln-nav-scroll-arrow-left {
    left: 0;
    justify-content: flex-start;
    padding-left: 4px;
    background: linear-gradient(to left, transparent, var(--header-background) 60%);
}
.ln-nav .ln-nav-scroll-arrow i {
    color: var(--header-tab-font);
    font-size: 16px;
}
.ln-nav .ln-nav-scroll-arrow-right i {
    animation: lnNavArrowNudge 1.2s ease-in-out infinite;
}
.ln-nav .ln-nav-scroll-arrow-left i {
    animation: lnNavArrowNudgeLeft 1.2s ease-in-out infinite;
}
@keyframes lnNavArrowNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(3px); }
}
@keyframes lnNavArrowNudgeLeft {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-3px); }
}


/* ---- Hover states ---- */
.ln-nav .hover\:bg-\[\#8DBD3D\]:hover { background-color: #8DBD3D; }
.ln-nav .hover\:no-underline:hover    { text-decoration-line: none; }
.ln-nav .hover\:\!bg-\[var\(--header-tab-background\)\]:hover {
  background-color: var(--header-tab-background) !important;
}


/* ============================================================================
 * Responsive breakpoints (ported from tailwind.config.js custom screens)
 *   patron-mobile:      min-width 950px
 *   patron-compact:     min-width 1170px
 *   max-patron-compact: max-width 1169.98px
 * ============================================================================ */

@media (min-width: 950px) {
  .ln-nav .patron-mobile\:flex   { display: flex; }
  .ln-nav .patron-mobile\:inline { display: inline; }
  .ln-nav .patron-mobile\:hidden { display: none; }
}

@media (min-width: 1170px) {
  .ln-nav .patron-compact\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (max-width: 1169.98px) {
  .ln-nav .max-patron-compact\:space-x-1 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0.25rem;
  }
}