/* ==========================================================================
   My Directory on the Feed World website (resources/views/designs/feed/directory.blade.php)
   1. The website navbar and footer around the directory design: the same reset as
      kyj/css/site/frame.css, so they look as on every other page. Load after the design's
      sheets and before navbar.css / footer.css.
   2. The directory under the fixed navbar (the design fills one screen on desktop).
   3. FEED WORLD additions: the "Post Your Suggestion" box and dialog, "Suggest an edit" on
      cards, and the classes used instead of the design's inline styles.
   ========================================================================== */

/* ---- 1. Navbar and footer ------------------------------------------------ */

/* ---- FEED's base styles, kept to the navbar and footer -------------------
   The FEED app resets every element to no margin or padding and the Outfit
   font, and its components were designed on that plus the browser defaults.
   KYJ's own base styles (base/reset.css, base/typography.css) are rolled back
   here. Specificity stays at zero, or one element, so every rule in the
   FEED stylesheets still wins. */

:where(.fw-services-overlay, .fw-nav-root, .fw-mobile-backdrop, .fw-mobile-panel, .new-footer) {
  font-size: 16px;
  line-height: normal;
  color: CanvasText;
  font-feature-settings: normal;
  text-rendering: auto;
}

:where(.fw-services-overlay, .fw-nav-root, .fw-mobile-backdrop, .fw-mobile-panel, .new-footer),
:where(.fw-nav-root, .fw-mobile-panel, .new-footer) * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Outfit', 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

:where(.fw-nav-root, .fw-mobile-panel, .new-footer) :is(h1, h2, h3, h4) {
  font-family: 'Outfit', 'Inter', sans-serif;
  color: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

:where(.fw-nav-root, .fw-mobile-panel, .new-footer) :is(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: normal;
}

:where(.fw-nav-root, .fw-mobile-panel, .new-footer) :is(strong, b) {
  font-weight: bolder;
}

:where(.fw-nav-root, .fw-mobile-panel, .new-footer) :is(img, svg) {
  display: revert;
  max-width: revert;
}

:where(.fw-nav-root, .fw-mobile-panel, .new-footer) a {
  color: revert;
  text-decoration: revert;
}

:where(.fw-nav-root, .fw-mobile-panel, .new-footer) :is(button, input) {
  font: revert;
  font-family: 'Outfit', 'Inter', sans-serif;
  color: revert;
}

:where(.fw-nav-root, .fw-mobile-panel, .new-footer) button {
  background: revert;
  border: revert;
  cursor: revert;
}

:where(.fw-nav-root, .fw-mobile-panel, .new-footer) :focus-visible {
  outline: revert;
  outline-offset: revert;
  border-radius: revert;
}


/* ---- 2. The directory under the fixed navbar ----------------------------- */

.dir-page {
  /* The navbar is fixed 10px from the top and 68px tall; leave 10px clear below it. */
  --dir-nav-offset: 88px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Matches the navbar's own breakpoint, where it drops to 60px (navbar.css). */
@media (max-width: 1200px) {
  .dir-page {
    --dir-nav-offset: 80px;
  }
}

.dir-page > .app {
  flex: 1 0 auto;
}

.dir-page .hero {
  padding-top: calc(46px + var(--dir-nav-offset));
}

/* Desktop: the hero and finder still fill one screen, now below the navbar
   (fit-screen.css sizes everything in --u, 1/56.27 of the screen's height). */
@media (min-width: 1100px) {
  .dir-page .landing {
    --u: min(1cqw, calc((100vh - var(--dir-nav-offset)) * 0.01777));
    padding-top: var(--dir-nav-offset);
  }

  .dir-page .hero {
    padding-top: calc(3.2 * var(--u));
  }
}

/* ---- 3. FEED WORLD additions -------------------------------------------- */

/* Shown when JavaScript is off (was an inline style in the design) */
.dir-noscript {
  margin: 0;
  padding: 12px 16px;
  background: #fff4d9;
  color: #5a4300;
  text-align: center;
  font: 14px/1.5 var(--font-body);
}

/* "Suggest an edit" at the foot of each card */
.entry-suggest {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #dbe8ff;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-suggest:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.entry-suggest:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* The suggestion box under the directory */
.dir-suggest {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-top: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--brand-50), var(--brand-100));
  border: 1px solid var(--brand-200);
}

.dir-suggest-icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #fff;
  color: var(--brand-600);
  box-shadow: var(--shadow-xs);
}

.dir-suggest-text {
  flex: 1 1 260px;
  display: grid;
  gap: 2px;
}

.dir-suggest-text strong {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--brand-900);
}

.dir-suggest-text span {
  font-size: 14px;
  color: var(--ink-600);
}

.dir-suggest-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 10px 22px -12px rgba(15, 95, 60, 0.85);
  transition: transform 0.18s var(--ease), filter 0.18s;
}

.dir-suggest-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.dir-suggest-btn:disabled {
  opacity: 0.6;
  transform: none;
  cursor: progress;
}

.dir-suggest-btn:focus-visible {
  outline: 3px solid rgba(21, 122, 71, 0.35);
  outline-offset: 2px;
}

/* The dialog */
.suggest-dialog {
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--ink-800);
  box-shadow: var(--shadow-lg);
  overflow: auto;
}

.suggest-dialog::backdrop {
  background: rgba(6, 43, 27, 0.45);
  backdrop-filter: blur(2px);
}

.suggest-panel {
  padding: 24px 26px 22px;
}

.suggest-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.suggest-head h3,
.suggest-done h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--brand-900);
}

.suggest-head p {
  margin: 0;
  color: var(--ink-500);
  font-size: 14px;
}

.suggest-close {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-600);
}

.suggest-close:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}

.suggest-form {
  display: grid;
  gap: 14px;
}

.suggest-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.suggest-alert {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--danger-50);
  color: var(--danger);
  font-weight: 600;
}

.suggest-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.suggest-topics legend {
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  font-weight: 700;
  color: var(--ink-700);
}

.suggest-topic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
}

.suggest-topic:has(input:checked) {
  border-color: var(--brand-500);
  background: var(--brand-50);
  color: var(--brand-800);
}

.suggest-topic input {
  accent-color: var(--brand-600);
  margin: 0;
}

.suggest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.suggest-field {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
}

.suggest-field label {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink-700);
}

.suggest-optional {
  font-weight: 500;
  color: var(--ink-400);
}

.suggest-field input,
.suggest-field select,
.suggest-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 14px;
  color: var(--ink-800);
}

.suggest-field textarea {
  font: inherit; /* the design's base.css sets this for input, select and button only */
  resize: vertical;
  min-height: 104px;
  line-height: 1.5;
}

.suggest-field :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--ring);
}

.suggest-field [aria-invalid='true'] {
  border-color: var(--danger);
}

.suggest-count {
  justify-self: end;
  font-size: 12px;
  color: var(--ink-400);
}

.suggest-error {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--danger);
}

.suggest-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

.suggest-cancel {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  font-weight: 600;
  color: var(--ink-600);
}

.suggest-cancel:hover {
  background: var(--surface-2);
}

.suggest-done {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 36px 26px 30px;
  text-align: center;
}

.suggest-done[hidden],
.suggest-panel[hidden] {
  display: none;
}

.suggest-done-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-600);
}

.suggest-done p {
  max-width: 420px;
  margin: 0 0 12px;
  color: var(--ink-600);
}

@media (max-width: 560px) {
  .suggest-panel {
    padding: 20px 16px 18px;
  }

  .dir-suggest-btn {
    width: 100%;
  }
}