/* 03-layout.css — App shell, navbar, hero, footer, page structure */

/* ─── Film Grain Overlay ─── */
/* LOAD-BEARING: this is the system's signature, not a per-page decoration.
   DESIGN.md §5: "Fixed-position SVG noise texture at 3.5% opacity, always
   on across the entire viewport. This is the cellar's patina." Removing
   or muting this strips the analog warmth that distinguishes Cask from
   every other dark interface. Do not delete without consulting DESIGN.md. */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ─── App Shell ─── */

.app-shell {
  position: relative;
}

.app-navbar {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-accent);
  z-index: 1030;
}

.navbar-brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  color: var(--ivory-100);
}

.brand-dot {
  color: var(--amber-400);
  margin: 0 0.05em;
  font-weight: 700;
}

.brand-tagline {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 1.35rem;
  color: var(--amber-400);
}

.navbar .nav-link {
  color: var(--ivory-300);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--duration-normal) ease;
  position: relative;
  padding-bottom: 0.6rem;
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
  color: var(--ivory-100);
}

.navbar .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  right: 0.5rem;
  height: 1px;
  background: var(--amber-400);
}

.navbar .btn {
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

.navbar .dropdown-menu {
  background: var(--noir-800);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
}

.navbar .dropdown-item {
  color: var(--ivory-200);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus-visible {
  background: rgba(212, 168, 83, 0.1);
  color: var(--amber-300);
}

.navbar .dropdown-divider {
  border-color: var(--border-default);
}

.navbar-toggler {
  border-color: var(--border-accent-hover);
}

.navbar-toggler-icon {
  filter: invert(1) brightness(0.8);
}

/* ─── Mobile Nav (collapsed state) ─── */

@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--noir-800);
    border-top: 1px solid var(--border-accent);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: var(--space-4) 0;
    margin-top: var(--space-2);
  }

  .navbar-nav {
    padding: 0 var(--space-3);
  }

  .navbar .nav-link {
    padding: 0.75rem var(--space-4);
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
  }

  .navbar .nav-link.active {
    border-left-color: var(--amber-400);
    background: rgba(212, 168, 83, 0.06);
  }

  .navbar .nav-link:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .navbar .d-flex.align-items-center {
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-2);
    border-top: 1px solid var(--border-default);
  }
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  padding: 0.75rem 1.5rem;
  background: var(--amber-400);
  color: var(--noir-950);
  z-index: 2000;
  font-weight: 600;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  border-radius: var(--radius-sm);
  color: var(--noir-950);
}

.app-main {
  padding: 3rem 0 4rem;
}

/* ─── HTMX Indicators ─── */

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline-block;
}

.htmx-request.htmx-indicator {
  display: inline-block;
}

/* ─── Hero (Homepage) ─── */

.hero {
  position: relative;
  padding: 4rem 0 3rem;
  background: var(--noir-950);
  color: var(--ivory-100);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 600px at 20% 50%, rgba(139, 41, 66, 0.2), transparent 70%),
    radial-gradient(ellipse 600px 400px at 80% 30%, rgba(212, 168, 83, 0.15), transparent 70%),
    radial-gradient(ellipse 1200px 800px at 50% 100%, rgba(139, 41, 66, 0.08), transparent 60%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: 1;
  max-width: 56rem;
}

/* Anonymous hero retired its right-column stats panel (the SaaS metric-tile
   cliché PRODUCT.md anti-references warn against). Body text now carries the
   pitch in prose. */
.hero__catalog-line {
  margin-top: var(--space-5);
  font-size: 0.85rem;
  color: var(--ivory-400);
  letter-spacing: 0.02em;
}

.hero__title {
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  margin: 1rem 0 1.5rem;
  letter-spacing: -0.03em;
}

.hero__title em {
  font-style: italic;
  color: var(--amber-400);
}

.hero__lead {
  font-size: 1.15rem;
  color: var(--ivory-300);
  max-width: 32rem;
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* ─── Sections ─── */

.section-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.section-subtitle {
  color: var(--ivory-300);
  margin-bottom: 2rem;
  font-size: 1.05rem;
}

/* ─── Page Header ─── */

/* Browse page header */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--space-5) 0 var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

.page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: -9999px;
  right: -9999px;
  bottom: 0;
  background: linear-gradient(180deg, rgba(139, 41, 66, 0.04) 0%, transparent 100%);
  z-index: -1;
}

.page-header__eyebrow {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--amber-400);
  margin-bottom: var(--space-1);
}

.page-header__title-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.page-header__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ivory-100);
  letter-spacing: -0.02em;
  margin: 0;
}

.page-header__count {
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  font-size: 0.7rem;
  color: var(--ivory-300);
}

.page-header__description {
  font-size: 0.85rem;
  color: var(--ivory-200);
  margin-top: var(--space-1);
  max-width: 360px;
  line-height: 1.5;
}

.page-header h1 {
  font-size: 2.5rem;
}

.page-header p {
  color: var(--ivory-300);
  margin-bottom: 0;
}

/* ─── Footer ─── */

footer {
  background: var(--noir-900);
  color: var(--ivory-300);
  border-top: 1px solid var(--border-default);
}

footer a {
  color: var(--ivory-200);
  transition: color var(--duration-normal) ease;
}

footer a:hover {
  color: var(--amber-400);
}

footer .footer-brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ivory-100);
}

footer h6,
footer .footer__section-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ivory-400);
  margin: 0 0 0.75rem;
  font-weight: 500;
  /* Reset default <h3> top margin — visual rhythm stays identical to the
     prior <h6>. The semantic upgrade is for screen-reader heading flow. */
}

footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer .footer-links li + li {
  margin-top: 0.5rem;
}

footer .footer-links a {
  font-size: 0.9rem;
  color: var(--ivory-300);
}

footer .footer-links a:hover {
  color: var(--amber-400);
}

/* Standalone meta links in the footer brand column (Changelog, etc.) */
footer .footer-meta-link {
  font-size: 0.85rem;
  color: var(--ivory-400);
  text-decoration: none;
  transition: color 120ms ease;
}

footer .footer-meta-link:hover {
  color: var(--amber-400);
}

/* ─── Search Overlay ─── */

.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.search-trigger__kbd {
  font-size: 0.65rem;
  padding: 1px 5px;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  color: var(--ivory-400);
  font-family: var(--font-body);
  margin-left: 4px;
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1070;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.search-overlay[aria-hidden="false"] {
  display: flex;
}

.search-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.search-overlay__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 var(--space-4);
  background: var(--noir-900);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  animation: cellar-rise 0.2s var(--ease-out);
}

.search-overlay__input-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
  color: var(--ivory-400);
}

.search-overlay__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 1rem;
  color: var(--ivory-100);
  font-family: var(--font-body);
  border-radius: var(--radius-sm);
}

.search-overlay__input:focus-visible {
  outline: 2px solid var(--amber-400);
  outline-offset: 2px;
}

.search-overlay__input::placeholder {
  color: var(--ivory-400);
}

.search-overlay__kbd {
  font-size: 0.65rem;
  padding: 1px 6px;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  color: var(--ivory-400);
  font-family: var(--font-body);
}

.search-overlay__results {
  max-height: 400px;
  overflow-y: auto;
}

/* Search results */

.search-results__section {
  padding: var(--space-2) 0;
}

.search-results__section + .search-results__section {
  border-top: 1px solid var(--border-subtle);
}

.search-results__heading {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ivory-400);
  font-weight: 500;
  padding: var(--space-2) var(--space-5);
}

.search-results__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: var(--ivory-100);
  text-decoration: none;
  transition: background var(--duration-fast) ease;
}

.search-results__item:hover,
.search-results__item:focus-visible {
  background: rgba(212, 168, 83, 0.06);
  color: var(--ivory-100);
}

.search-results__item--focused {
  background: rgba(212, 168, 83, 0.08);
  color: var(--ivory-100);
}

.search-results__item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.search-results__item-title {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-results__item-meta {
  font-size: 0.75rem;
  color: var(--ivory-400);
}

.search-results__empty,
.search-results__hint {
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--ivory-400);
  font-size: 0.85rem;
}