/**
 * Restaurant Menu Plugin — Frontend Stylesheet
 *
 * Typography (headings, body text, font sizes) is intentionally not set
 * here. All heading and paragraph elements inherit from the active theme
 * so the menu integrates seamlessly with the site's type scale.
 *
 * Override layout and colour tokens via CSS custom properties:
 *   --rm-color-text, --rm-color-text-muted, --rm-color-border,
 *   --rm-color-leader, --rm-gap-section, --rm-gap-item
 *
 * Prefix: rm-  (all class names are prefixed to avoid conflicts)
 *
 * @package RestaurantMenu
 * @version 2.0.1
 */

/* ==========================================================================
   CSS Custom Properties
   Override these from your theme stylesheet or via the Customizer.
   ========================================================================== */
:root {
	/* Colour — dark mode (default) */
	--rm-color-text:            #1a1a1a;
	--rm-color-text-muted:      #666666;
	--rm-color-border:          #e0e0e0;
	--rm-color-leader:          #bbbbbb;

	/* Colour — light mode */
	--rm-color-text-light:             #f5f5f5;
	--rm-color-text-light-muted:       rgba(245, 245, 245, 0.65);
	--rm-color-border-light:           rgba(245, 245, 245, 0.2);
	--rm-color-leader-light:           rgba(245, 245, 245, 0.35);

	/* Spacing */
	--rm-gap-section:           2.5rem;
	--rm-gap-item:              0.875rem;

	/* Section label — retained because it is a plugin-specific UI
	   element (uppercase tracking) with no equivalent in most themes */
	--rm-size-section-label:    1.1999rem;
}

/* ==========================================================================
   Menu Container
   ========================================================================== */
.rm-menu {
	max-width:      760px;
	margin-inline:  auto;
	padding:        0;
}

/* Light text variant */
.rm-menu--light {
	color:                  var(--rm-color-text-light);
	--rm-color-text-muted:  var(--rm-color-text-light-muted);
	--rm-color-border:      var(--rm-color-border-light);
	--rm-color-leader:      var(--rm-color-leader-light);
}

/* ==========================================================================
   Menu Header
   ========================================================================== */
.rm-menu__header {
	margin-block-end:   var(--rm-gap-section);
	padding-block-end:  1.25rem;
	border-block-end:   2px solid currentColor;
}

.rm-menu__title {
	margin: 0;
}

.rm-menu__description {
	margin-block-start: 0.5rem;
	color:              var(--rm-color-text-muted);
	line-height:        1.5;
}

/* ==========================================================================
   Menu Content + Sections
   ========================================================================== */
.rm-menu__content {
	display:        flex;
	flex-direction: column;
	gap:            var(--rm-gap-section);
}

.rm-menu__section-title {
	font-size:       var(--rm-size-section-label);
	letter-spacing:  0.14em;
	color:           var(--rm-color-text-muted);
	margin:          0 0 0.75rem;
	padding-block-end: 0.375rem;
	border-block-end:  1px solid var(--rm-color-border);
}

/* ==========================================================================
   Items List
   ========================================================================== */
.rm-menu__items {
	list-style:   none;
	margin:       0;
	padding:      0;
}

.rm-menu__item {
	padding-block:  var(--rm-gap-item);
	border-block-end: 1px solid var(--rm-color-border);
}

.rm-menu__item:first-child {
	padding-block-start: 0;
}

.rm-menu__item:last-child {
	border-block-end: none;
}

/* ==========================================================================
   Item Row — Dotted Leader Layout
   ========================================================================== */
.rm-menu__item-row {
	display:     flex;
	align-items: baseline;
	gap:         0.25rem;
}

.rm-menu__item-name-wrap {
	display:      inline-flex;
	align-items:  baseline;
	flex-wrap:    wrap;
	gap:          0.3rem;
	flex-shrink:  0;
	max-width:    65%;
}

.rm-menu__item-name {
	line-height: 1.3;
}

/* Dotted leader line: the visual connective tissue between name and price */
.rm-menu__item-leader {
	flex:          1;
	align-self:    flex-end;
	border-block-end: 1px dotted var(--rm-color-leader);
	margin-inline: 0.375rem;
	margin-block-end: 3px; /* Align with text baseline */
	min-width:     0.75rem;
}

.rm-menu__item-price {
	white-space: nowrap;
	flex-shrink: 0;
}

/* ==========================================================================
   Item Description
   ========================================================================== */
.rm-menu__item-description {
	margin:      0.375rem 0 0;
	color:       var(--rm-color-text-muted);
	line-height: 1.55;
}

/* ==========================================================================
   Dietary Badges
   ========================================================================== */
.rm-menu__item-badges {
	display:         inline-flex;
	align-items:     center;
	gap:             3px;
	vertical-align:  baseline;
}

.rm-badge {
	display:         inline-block;
	font-size:       0.85rem;
	font-weight:     700;
	line-height:     1;
	padding:         2px 5px;
	border-radius:   2px;
	letter-spacing:  0.04em;
	vertical-align:  middle;
	white-space:     nowrap;
}

.rm-badge--vegetarian  { background-color: #e8f5e9; color: #2d7a2d; }
.rm-badge--vegan       { background-color: #c8e6c9; color: #1a5c1a; }
.rm-badge--gluten_free { background-color: #e3f2fd; color: #0d5aa7; }
.rm-badge--dairy_free  { background-color: #e0f7fa; color: #006876; }
.rm-badge--nuts        { background-color: #fff3e0; color: #bf5b00; }
.rm-badge--special     { background-color: #fff8e1; color: #a07000; }

/* Slightly brighter badges on dark backgrounds */
.rm-menu--light .rm-badge {
	filter: brightness(1.15) saturate(1.1);
}

/* ==========================================================================
   Chef's Pick — Special Item
   ========================================================================== */
.rm-menu__item--special > .rm-menu__item-row > .rm-menu__item-name-wrap > .rm-menu__item-name {
	/* Subtle distinction without being garish */
}

/* ==========================================================================
   Dietary Key / Legend
   ========================================================================== */
.rm-menu__key {
	margin-block-start:  2rem;
	padding-block-start: 1rem;
	border-block-start:  1px solid var(--rm-color-border);
}

.rm-menu__key-title {
	font-size:       1rem;
	font-weight:     600;
	letter-spacing:  0.12em;
	text-transform:  uppercase;
	color:           var(--rm-color-text-muted);
	margin:          0 0 0.5rem;
}

.rm-menu__key-list {
	list-style:  none;
	margin:      0;
	padding:     0;
	display:     flex;
	flex-wrap:   wrap;
	gap:         0.375rem 1rem;
}

.rm-menu__key-list li {
	display:     flex;
	align-items: center;
	gap:         0.35rem;
	font-size:   1.1rem;
	color:       var(--rm-color-text-muted);
}

/* ==========================================================================
   Error Notice (visible to editors only via PHP capability check)
   ========================================================================== */
.rm-error {
	border-inline-start: 3px solid #d63638;
	padding:             0.75rem 1rem;
	background:          #fcf0f0;
	color:               #d63638;
	font-size:           0.875rem;
	border-radius:       0 2px 2px 0;
}

/* ==========================================================================
   Two-column grid for all menu sections.
   Collapses to single column on narrow viewports.
   ========================================================================== */
.rm-menu__items--two-col {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap:            3rem;
}

/* On narrow viewports collapse back to single column */
@media (max-width: 600px) {
	.rm-menu__items--two-col {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
	.rm-menu__item,
	.rm-menu__section {
		break-inside: avoid;
	}
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */