/*
 * components.css — hand-written styles for shared UI injected by JS:
 *   - the header search overlay (js/search.js)
 *   - the request modal: Portfolio / Book a Meeting / Request Tasting (js/forms.js)
 *
 * NOT generated by Tailwind. Uses the design tokens defined in :root by the
 * compiled css/<page>.css (so this file must be linked AFTER it). Class prefix
 * `mcn-` to avoid collisions. Linking this on every page is all that's needed to
 * style the search/modal during site-wide propagation.
 */

/* ============================================================= *
 *  Shared primitives
 * ============================================================= */
.mcn-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  background: rgba(8, 8, 8, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
  z-index: 10080;
}
.mcn-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease;
}
body.mcn-lock { overflow: hidden; }

.mcn-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.mcn-icon-btn:hover { color: var(--primary); }

/* ============================================================= *
 *  Header search trigger (desktop nav)
 * ============================================================= */
.mcn-search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--foreground);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
}
.mcn-search-trigger:hover { color: var(--primary); }
.mcn-search-trigger iconify-icon { font-size: 1.25rem; }

/* ============================================================= *
 *  Search overlay (command-palette style)
 * ============================================================= */
.mcn-search { align-items: flex-start; padding: 12vh 1rem 1rem; }

.mcn-search-panel {
  width: min(92vw, 640px);
  background: var(--popover, #111111);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  transform: translateY(-14px);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  max-height: 76vh;
}
.mcn-search.is-open .mcn-search-panel { transform: translateY(0); }

.mcn-search-inputwrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.15rem 1.35rem;
  border-bottom: 1px solid var(--border);
}
.mcn-search-inputwrap iconify-icon {
  font-size: 1.35rem;
  color: var(--muted-foreground);
  flex-shrink: 0;
}
.mcn-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}
.mcn-search-input::placeholder { color: var(--muted-foreground); opacity: 0.55; }
.mcn-search-esc {
  flex-shrink: 0;
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  background: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.mcn-search-esc:hover { color: var(--primary); border-color: var(--primary); }

.mcn-search-results { overflow-y: auto; -webkit-overflow-scrolling: touch; }

.mcn-search-group-label {
  padding: 0.85rem 1.35rem 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  opacity: 0.6;
}

.mcn-search-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 1.35rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--foreground);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.mcn-search-item:hover,
.mcn-search-item.is-active {
  background: rgba(236, 223, 204, 0.06);
}
.mcn-search-item.is-active { box-shadow: inset 2px 0 0 var(--primary); }
.mcn-search-item-icon {
  font-size: 1.15rem;
  color: var(--muted-foreground);
  flex-shrink: 0;
}
.mcn-search-item.is-active .mcn-search-item-icon { color: var(--primary); }
.mcn-search-item-body { flex: 1; min-width: 0; }
.mcn-search-item-title {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcn-search-item-desc {
  font-size: 0.78rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}
.mcn-search-item-type {
  flex-shrink: 0;
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.2rem 0.45rem;
}

.mcn-search-empty {
  padding: 2.5rem 1.35rem;
  text-align: center;
  color: var(--muted-foreground);
  font-size: 0.9rem;
}

.mcn-search-hint {
  display: flex;
  gap: 1.25rem;
  padding: 0.7rem 1.35rem;
  border-top: 1px solid var(--border);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  opacity: 0.7;
}
.mcn-search-hint span { white-space: nowrap; }

/* ============================================================= *
 *  Request modal (Portfolio / Meeting / Tasting)
 * ============================================================= */
.mcn-modal-overlay { align-items: flex-start; padding: 5vh 1rem; overflow-y: auto; z-index: 10090; }

.mcn-modal {
  position: relative;
  width: min(94vw, 600px);
  margin: auto;
  background: #141414;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7);
  padding: 2.25rem clamp(1.25rem, 4vw, 2.5rem) 2.5rem;
  transform: translateY(16px) scale(0.99);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--foreground);
}
.mcn-modal-overlay.is-open .mcn-modal { transform: translateY(0) scale(1); }
.mcn-modal input { color-scheme: dark; }

.mcn-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.4rem;
}

.mcn-modal-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.75rem;
}
.mcn-modal-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.1;
  color: var(--foreground);
  margin-bottom: 0.6rem;
}
.mcn-modal-subtitle {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
}

/* Segmented switcher */
.mcn-tabs {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.mcn-tab {
  flex: 1;
  padding: 0.7rem 0.4rem;
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.mcn-tab:last-child { border-right: none; }
.mcn-tab:hover { color: var(--foreground); }
.mcn-tab.is-active {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* Fields */
.mcn-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; }
.mcn-field { position: relative; display: flex; flex-direction: column; gap: 0.4rem; }
.mcn-field.mcn-col-2 { grid-column: 1 / -1; }
.mcn-label {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.mcn-label .mcn-req { color: var(--primary); margin-left: 0.15rem; }

.mcn-input,
.mcn-select,
.mcn-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.7rem 0.75rem;
  outline: none;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.mcn-input::placeholder, .mcn-textarea::placeholder { color: var(--muted-foreground); opacity: 0.35; }
.mcn-input:focus,
.mcn-select:focus,
.mcn-textarea:focus {
  border-bottom-color: var(--primary);
  background: rgba(255, 255, 255, 0.06);
}
.mcn-textarea { resize: vertical; min-height: 5.5rem; }
.mcn-select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%), linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%); background-position: calc(100% - 18px) 1.15rem, calc(100% - 13px) 1.15rem; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.mcn-select option { background: #1a1a1a; color: var(--foreground); }
.mcn-input.mcn-invalid,
.mcn-select.mcn-invalid,
.mcn-textarea.mcn-invalid { border-bottom-color: var(--destructive); }

/* Checkbox groups */
.mcn-checks { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mcn-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--foreground);
  transition: border-color 0.25s ease, background-color 0.25s ease;
  user-select: none;
}
.mcn-check:hover { border-color: var(--muted-foreground); }
.mcn-check input { accent-color: var(--primary); width: 0.95rem; height: 0.95rem; }
.mcn-check.is-checked { border-color: var(--primary); background: rgba(236, 223, 204, 0.06); }

.mcn-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--foreground);
}
.mcn-inline-check input { accent-color: var(--primary); width: 1rem; height: 1rem; }

.mcn-note {
  font-size: 0.78rem;
  color: var(--muted-foreground);
  opacity: 0.8;
  margin-top: 0.35rem;
}

/* Validation tooltip (modal-scoped) */
.mcn-tip {
  position: absolute;
  left: 0;
  top: 100%;
  transform: translateY(4px);
  background: var(--destructive);
  color: var(--primary-foreground);
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  z-index: 5;
  white-space: nowrap;
}

/* Submit button (mirrors #send-inquiry-btn invert-on-hover) */
.mcn-submit {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0.5rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border: 2px solid var(--primary);
  padding: 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.4s ease, border-color 0.4s ease;
}
.mcn-submit:hover:not(:disabled) { background: transparent; color: var(--primary); }
.mcn-submit:disabled { cursor: default; opacity: 0.85; }
.mcn-submit.is-sent { background: transparent; color: var(--muted-foreground); border-color: var(--border); }

.mcn-form-error {
  grid-column: 1 / -1;
  background: var(--destructive);
  color: var(--primary-foreground);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-size: 0.85rem;
  text-align: center;
}

/* Mobile */
@media (max-width: 560px) {
  .mcn-form { grid-template-columns: 1fr; }
  .mcn-search { padding-top: 8vh; }
  .mcn-modal { padding: 2rem 1.25rem 2.25rem; }
  .mcn-search-item-desc { display: none; }
}