/*
 * Shared "this opens something" affordance for the guest menus, plus the
 * right-to-left corrections Arabic needs. Loaded by every demo menu and by
 * the live /dereiziger page.
 *
 * It replaces the red dotted underline the wine names and pairings used to
 * carry. Dotted-underline-in-an-accent-colour is the convention for a
 * definition or a footnote, not for a control: on a phone it read as decoration
 * and guests did not try tapping it. So the text goes back to the menu's own
 * ink colour and the affordance is carried by two things a reader already knows
 * mean "control": a solid rule under the words that fills in on press, and a
 * round chevron chip after them. Nothing about it is colour-dependent, which is
 * also what keeps it legible for the ~8% of men with a red/green deficiency.
 */

.cc-open {
  /* inherits the dish name's own ink — black on every one of the three demos */
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
  text-align: inherit;
  text-decoration: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  border-bottom: 1.5px solid var(--cc-open-rule, rgba(0, 0, 0, 0.24));
  padding-bottom: 0.06em;
  transition: border-color 0.15s ease;
}

.cc-open:hover,
.cc-open:focus-visible {
  border-bottom-color: var(--cc-open-rule-strong, rgba(0, 0, 0, 0.65));
}

.cc-open-icon {
  flex: 0 0 auto;
  /* Clamped rather than a flat em: the pairing line sets this at 11-12px, where
     a proportional chip disappears, and a wine name in the fine-dining menu sets
     it at 22px, where a proportional chip grew wide enough to push the price
     onto its own line. The clamp keeps it a legible dot at both ends. */
  width: clamp(13px, 1.02em, 17px);
  height: clamp(13px, 1.02em, 17px);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-open-chip, rgba(0, 0, 0, 0.08));
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.cc-open-icon svg {
  width: clamp(7px, 0.56em, 9px);
  height: clamp(7px, 0.56em, 9px);
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cc-open:hover .cc-open-icon,
.cc-open:focus-visible .cc-open-icon {
  background: var(--cc-open-chip-strong, rgba(0, 0, 0, 0.17));
}

.cc-open:active .cc-open-icon {
  transform: translateX(1px);
}

/* The chevron points the way the text runs. */
[dir="rtl"] .cc-open-icon svg {
  transform: scaleX(-1);
}
[dir="rtl"] .cc-open:active .cc-open-icon {
  transform: translateX(-1px);
}

/* ------------------------------------------------------------------ *
 * The pairing line under a dish: a quiet label, then the wine itself
 * as the control. Only the wine name is dressed as tappable, because
 * only the wine name is what the guest is being invited to look at.
 * ------------------------------------------------------------------ */
.cc-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
  border: 0;
  background: none;
  padding: 0.35em 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: start;
}

/* A long wine name has to break inside the column rather than run past it. An
   inline-flex box will not shrink below its content unless it is told it may,
   which is how the fine-dining menu's pairing line ended up outside the card. */
.cc-pair {
  max-width: 100%;
}

.cc-open {
  max-width: 100%;
  min-width: 0;
}

.cc-open > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cc-pair-label {
  font-size: 0.85em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  white-space: nowrap;
}

/* Arabic is not an uppercase script and letter-spacing breaks its joins. */
[dir="rtl"] .cc-pair-label {
  text-transform: none;
  letter-spacing: 0;
}

.cc-pair .cc-open {
  font-weight: 600;
}

/* A quieter cut of the same line, for menus where the default weight made the
   pairing compete with the dish it sits under. Only the weight, the size and
   the label's contrast come down; both affordances — the rule under the wine
   name and the chevron chip after it — are untouched, because they are what
   tells a guest this is a control rather than a footnote.

   The label also stops shouting: small caps at 0.14em tracking beside a bold
   name was three typographic signals doing one job.

   The size is set here and not as a utility class on the button, because
   .cc-pair above resets `font` to the parent's and takes the call site's
   font-size with it. A menu that wants its own size overrides this; the
   fine-dining one sets 16px italic. */
.cc-pair--quiet {
  font-size: 12.5px;
}

.cc-pair--quiet .cc-pair-label {
  font-size: max(11px, 0.8em);
  font-weight: 500;
  letter-spacing: 0.09em;
  /* Not lower: at .45 this measures 3.26:1 on De Reiziger's paper and 3.94:1 on
     the fine-dining menu's white, both short of WCAG AA. The line is quietened
     by weight and size instead; .6 leaves 5.4:1 and 5.7:1. */
  opacity: 0.6;
}

.cc-pair--quiet .cc-open {
  font-weight: 400;
}

/* ------------------------------------------------------------------ *
 * Right-to-left corrections
 * ------------------------------------------------------------------ */

/* The <select> chevrons are absolutely positioned against the right edge in
   every demo header; under RTL the control's own arrow area is on the left. */
[dir="rtl"] .cc-sel-chev {
  right: auto;
  left: var(--cc-sel-chev-inset, 0px);
}
[dir="rtl"] .cc-sel {
  padding-right: 0.6rem;
  padding-left: 1.5rem;
}

/* De Reiziger's postcards pin their flag to the outer top corner and reserve
   room for it on the dish title. Both have to swap sides. */
[dir="rtl"] .cc-postcard-flag {
  right: auto;
  left: -0.75rem;
  transform: rotate(-6deg);
}
[dir="rtl"] .cc-postcard-title {
  padding-right: 0;
  padding-left: 2rem;
}

/* The order-count badge hangs off the tab it belongs to; each demo offsets it
   differently, so the distance travels with the element. */
[dir="rtl"] .cc-tab-badge {
  right: auto;
  left: var(--cc-badge-inset, -1rem);
}

/* Leaflet lays its own controls out left-to-right; letting them mirror puts
   the zoom buttons and the attribution on top of each other. */
[dir="rtl"] .leaflet-container {
  direction: ltr;
}

/* Arabic reads better with a touch more line height at these sizes, and the
   display faces used here have no Arabic glyphs, so the fallback stack does
   the work — see each demo's Tailwind config.

   Scoped to the menu wrap rather than :root because that is where the demos set
   lang; see applyDirection() in public/app.js for why it cannot be <html>. */
[lang="ar"] .cocarte-phone-screen {
  line-height: 1.75;
}

/* Several partners: a dish with three wines, or a wine three dishes call for.
   The line is then a label and a few controls rather than one control, so only
   the names take the pointer, set a little further apart than label and name
   so each reads as its own target. */
.cc-pair--many {
  cursor: default;
  column-gap: 0.9em;
  row-gap: 0.2em;
}

.cc-pair--many .cc-open {
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  margin: 0;
  padding: 0 0 0.06em;
  cursor: pointer;
  text-align: start;
}

/*
 * Back to top: a round button that sits just above the bottom tab bar, on the
 * right. It is absolutely positioned inside the sticky <nav>, so it rides along
 * with the tab bar both on a phone (document scrolls) and inside the desktop
 * device frame (frame scrolls) without a fixed overlay. Each demo colours it in
 * its own markup; this only handles placement and the fade (app.js toggles
 * .is-visible once the guest is about a screen down).
 */
.cc-top {
  position: absolute;
  right: 1rem;
  bottom: calc(100% + 0.25rem);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.92);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.cc-top.is-visible {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
.cc-top:active { transform: scale(0.92); }
.cc-top svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
  .cc-top, .cc-top.is-visible { transition: none; }
}

/*
 * Full-screen map (CoCarteMenu.syncMapScreen). Above the tab bar (z-40) and
 * the sheets (z-50); the pin panel inside it sits at z-60. Each menu sets the
 * colours on the elements themselves.
 */
.cc-map-screen {
  position: fixed;
  inset: 0;
  z-index: 55;
  overflow: hidden;
}
.cc-map-canvas {
  position: absolute;
  inset: 0;
}
/* Physical right, also in Arabic: Leaflet's zoom buttons stay top-left. */
.cc-map-close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  right: calc(env(safe-area-inset-right) + 12px);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.45);
}
.cc-map-close:active { transform: scale(0.92); }
.cc-map-close svg { width: 20px; height: 20px; }
/* Clear of Leaflet's attribution line in the bottom-right corner. */
.cc-map-hint {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + 30px);
  z-index: 10;
  margin: 0 auto;
  max-width: 22rem;
  pointer-events: none;
  text-align: center;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.4);
}