@charset "UTF-8";
/* ==========================================================================
   THE SKAGIT CASINO RESORT — RESTAURANT MENUS
   Rendered by [skagit_menu] (inc/shortcode-menu.php).
   --------------------------------------------------------------------------
   Reads as a printed menu rather than a list of products: sections with rule
   headings, dish names leading to a price on the right, description beneath.

   THE LEADER RULE
   The dotted line between a dish and its price is a repeating-linear-gradient
   on an empty <span>, marked aria-hidden. It is NOT a run of "." characters —
   a screen reader announces those individually ("dot dot dot dot…"), which
   turns every price into several seconds of noise. It also is not a
   border-bottom on the row, because the leader has to stop where the price
   begins, not run under it.

   The row is a 3-column flex line: name / leader (flex:1) / price. The leader
   absorbs all remaining space, so the price is always hard right and the name
   never collides with it however long either gets.
   ========================================================================== */

.skagit-menu {
  --sk-menu-ink: var(--sk-charcoal, #2B3038);
  --sk-menu-soft: var(--sk-slate, #5B646F);
  --sk-menu-rule: rgba(212, 175, 55, 0.42);
  --sk-menu-gold: #7C6218;          /* AA on white; the dark-ground twin is
                                       #E8C766, do not swap them */
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--sk-menu-ink);
}

.skagit-menu__title {
  margin: 0 0 clamp(1.25rem, 2.4vw, 2rem);
  text-align: center;
  text-wrap: balance;
}


/* ==========================================================================
   0. THE VENUE CONTENT COLUMN

   `.skagit-venue-intro` is emitted by single-menu-venue.php and had NO styles
   anywhere in the theme, so it inherited the full 1430px of
   `.xtra-custom-container`. That left prose running about 155 characters a line
   on a 1440px screen — roughly twice a comfortable measure.

   >>> IT IS NOT A PROSE WRAPPER. <<<

   This div holds EVERYTHING the venue body renders: the paragraphs, the dish
   list, and the galleries. A `max-width` in `ch` on the div itself therefore
   shrinks the whole page, not just the text — it squeezed the menu from 650px to
   587px and the gallery thumbnails from 383px to 177px, which is what made the
   page look tiny on a desktop. The measure has to go on the PARAGRAPHS.

   So there are two separate jobs here:

     - the div gets a CONTENT COLUMN, wide enough for a two-column menu and a
       three-column gallery to breathe. 68rem lands the menu columns at ~512px
       and the gallery cells at ~347px, against 264px and 177px before;
     - the paragraphs get the READING MEASURE, and only they.

   68ch matches the lede measure used for intro copy in skagit-home.css and
   skagit-place.css, so the text reads like the rest of the site.
   ========================================================================== */
.skagit-venue-intro {
  max-width: 68rem;
  margin-inline: auto;
}

/* Direct children only: prose at the top level of the body. The gallery's own
   intro sentence is nested inside `.skagit-gallery` and keeps its own measure. */
.skagit-venue-intro > p {
  max-width: 68ch;
}


/* --------------------------------------------------------------------------
   A HEADING AN EDITOR TYPES INTO THE VENUE BODY

   Tacos & Tequila and Express both write `<h3>The menu</h3>` above their
   [skagit_menu] shortcode, to separate the opening prose from the dishes. That
   heading had no styles of its own, so it fell through to the global heading
   rule and landed at 28px Playfair in near-black -- LARGER than the menu's own
   "Food", "Drinks" and "Beer" section titles at 25.6px, and with none of their
   treatment. The label outranked the things it labelled while looking less
   designed than them, which reads as an accident rather than a decision.

   The fix is hierarchy, not size. This is the lead-in for the whole menu, so it
   keeps its seniority over the section titles, and earns it with the brass rule
   the rest of the site uses to close a section header (see
   `.promo-text-header .header-gold-divider`). Centring it separates the reading
   column above from the two-column dish grid below, which the left-aligned
   version did not do.

   Direct children only. An <h3> inside the gallery or inside the menu markup
   itself belongs to those components and must keep their styling.
   -------------------------------------------------------------------------- */
.skagit-venue-intro > h2,
.skagit-venue-intro > h3,
.skagit-venue-intro > h4 {
  margin-block: clamp(2.25rem, 5vw, 3.5rem) clamp(1rem, 2vw, 1.5rem);

  /* >>> LETTERFORMS COPIED FROM THE PAGE TITLE, ON PURPOSE. <<< The family was
     never different -- the hero title and this heading both resolve to Playfair
     Display through --sk-font-display, and only the 600 and 700 faces are
     downloaded, so both were already painting with the same physical face. What
     made them look like different type was the SETTING: the hero runs at
     line-height 1.08 and -0.015em, this ran at 1.2 and -0.01em, and looser
     tracking on a serif at display size reads as a different, plainer font.

     These three values are copied from `.skagit-page-hero__title` in
     skagit-place.css so the two are set identically and differ only in size and
     ink. Change them there and change them here. */
  font-family: var(--sk-font-display);
  font-size: clamp(1.5rem, 0.95rem + 1.35vw, 2rem);
  /* 600, not --sk-weight-bold (700) and not the hero's literal 500. The hero
     declares 500, but only the 600 and 700 faces are downloaded, so CSS font
     matching resolves that 500 UP to the 600 face -- 600 is therefore what
     the page title actually paints with, and stating it here matches the
     rendering while naming a weight that exists. --sk-weight-bold rendered
     this visibly heavier than the title it was supposed to echo. */
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;

  text-align: center;
  text-wrap: balance;
  color: var(--sk-navy-900);
}

/* No runaway gap when a body opens on a heading instead of prose. */
.skagit-venue-intro > :is(h2, h3, h4):first-child {
  margin-block-start: 0;
}

.skagit-venue-intro > h2::after,
.skagit-venue-intro > h3::after,
.skagit-venue-intro > h4::after {
  content: "";
  display: block;
  width: clamp(56px, 8vw, 92px);
  height: 2px;
  margin: clamp(0.6rem, 1.2vw, 0.9rem) auto 0;
  border-radius: 2px;
  background: var(--sk-grad-brass);
  box-shadow: 0 1px 8px rgba(212, 175, 55, 0.4);
}

/* The dark menu variant inverts the ground; the navy ink would vanish. */
.skagit-menu--dark .skagit-venue-intro > h2,
.skagit-menu--dark .skagit-venue-intro > h3,
.skagit-menu--dark .skagit-venue-intro > h4 { color: #fff; }


/* ==========================================================================
   1. SECTION
   ========================================================================== */
.skagit-menu__section + .skagit-menu__section {
  margin-block-start: clamp(2rem, 4vw, 3.25rem);
}

/* Heading with a rule that fills the remaining width — a menu convention, and
   it makes the section boundary obvious when scanning quickly. */
.skagit-menu__section-title {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 clamp(0.9rem, 1.8vw, 1.4rem);
  font-size: clamp(1.15rem, 0.6rem + 1.1vw, 1.6rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sk-menu-gold);
}

.skagit-menu__section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--sk-menu-rule) 0%, rgba(212, 175, 55, 0) 100%);
}

/* --------------------------------------------------------------------------
   SERVING HOURS beside a section heading, e.g. "BREAKFAST  served daily 8am to
   noon". Deliberately quieter than the heading: it is the answer to a question,
   not a second heading, so it takes the body face at normal weight and case
   while the heading keeps its uppercase gold.

   `flex-shrink: 0` and `white-space: nowrap` keep "8am to noon" from breaking
   across two lines and pushing the gold rule onto its own row. On a narrow
   screen the whole heading wraps instead, which is handled below.
   -------------------------------------------------------------------------- */
.skagit-menu__section-hours {
  flex: 0 0 auto;
  font-family: var(--sk-font-ui, inherit);
  font-size: 0.72em;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  color: var(--sk-menu-muted, currentColor);
  opacity: 0.85;
}

/* Under ~30em "BREAKFAST served daily 8am to noon" plus a rule does not fit on
   one line. Let the heading wrap and drop the rule's minimum so it still ends
   the row rather than being squeezed to nothing. */
@media (max-width: 30em) {
  .skagit-menu__section-title { flex-wrap: wrap; }
  .skagit-menu__section-hours { white-space: normal; }
}


/* ==========================================================================
   2. THE LIST
   ========================================================================== */
.skagit-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Two columns from tablet up. `break-inside: avoid` stops a dish splitting
   across the column boundary, which would orphan a price from its name.

   48em (768px) rather than the 900px this used to be. At 768 the venue column is
   708px, and one column that wide left the dotted leader stretching 300px-plus
   between a short dish name and its price, with the descriptions using only
   about 60% of the measure and whitespace down the right. Two columns of ~338px
   put the price back near the name it belongs to. Matches the theme's tablet
   breakpoint in skagit-responsive.css (B.3) instead of a number of its own. */
@media (min-width: 48em) {
  .skagit-menu--cols-2 .skagit-menu__list {
    column-count: 2;
    column-gap: clamp(2rem, 4vw, 4rem);
  }

  .skagit-menu--cols-2 .skagit-menu__item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
}

.skagit-menu__item {
  display: flex;
  gap: 1rem;
  padding-block: clamp(0.7rem, 1.2vw, 1rem);
  border-bottom: 1px solid rgba(43, 48, 56, 0.09);
}

.skagit-menu__item:last-child { border-bottom: 0; }

.skagit-menu__body { flex: 1 1 auto; min-width: 0; }


/* ==========================================================================
   3. NAME / LEADER / PRICE
   ========================================================================== */
.skagit-menu__row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

.skagit-menu__name {
  font-weight: var(--sk-weight-semi, 600);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.3;
}

/* Absorbs the slack, so the price is always flush right. */
.skagit-menu__leader {
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 1px;
  transform: translateY(-0.28em);
  background-image: radial-gradient(circle, rgba(43, 48, 56, 0.36) 1px, transparent 1px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  background-position: left bottom;
}

.skagit-menu__price {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;   /* prices align down the column */
  color: var(--sk-menu-gold);
  white-space: nowrap;
}

.skagit-menu__desc {
  margin: 0.3rem 0 0;
  max-width: 56ch;
  color: var(--sk-menu-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
}


/* ==========================================================================
   4. DIETARY FLAGS
   Text labels, not bare initials. "V" could be vegetarian or vegan, and a key
   printed once at the top of a long menu is invisible by the time you need it.
   ========================================================================== */
.skagit-menu__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.45rem 0 0;
}

.skagit-menu__flag {
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(43, 48, 56, 0.18);
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sk-menu-soft);
  white-space: nowrap;
}

.skagit-menu__flag--v,
.skagit-menu__flag--vg {
  border-color: rgba(31, 122, 71, 0.4);
  color: #1F7A47;                       /* 4.6:1 on white */
}

.skagit-menu__flag--gf {
  border-color: rgba(11, 61, 104, 0.35);
  color: var(--sk-navy-700, #0B3D68);
}

.skagit-menu__flag--spicy {
  border-color: rgba(178, 45, 32, 0.4);
  color: #B22D20;                       /* 5.3:1 on white */
}


/* ==========================================================================
   5. CHEF'S PICK + PHOTOS
   ========================================================================== */
.skagit-menu__pick {
  margin-inline-start: 0.3rem;
  color: var(--sk-menu-gold);
  font-size: 0.9em;
}

/* A picked dish gets a brass edge rather than a filled panel — a fill would
   fight the two-column rhythm and read as a different kind of content. */
.skagit-menu__item.is-featured {
  padding-inline-start: 0.9rem;
  border-inline-start: 2px solid var(--sk-menu-rule);
}

.skagit-menu__photo {
  flex: 0 0 auto;
  width: clamp(64px, 9vw, 92px);
}

.skagit-menu__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--sk-radius-sm, 6px);
}


/* ==========================================================================
   6. ON A DARK GROUND
   The venue pages are light today, but the shortcode is usable inside any
   band. Scoped to an explicit opt-in class so it can never fire by accident.
   ========================================================================== */
.skagit-menu--on-dark {
  --sk-menu-ink: #FFFFFF;
  --sk-menu-soft: #C3CEDA;
  --sk-menu-gold: #F0D480;
}

.skagit-menu--on-dark .skagit-menu__item {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.skagit-menu--on-dark .skagit-menu__leader {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.34) 1px, transparent 1px);
}

.skagit-menu--on-dark .skagit-menu__flag {
  border-color: rgba(255, 255, 255, 0.24);
  color: #C3CEDA;
}


/* ==========================================================================
   7. PRINT
   People print menus. Drop the photos and the columns, keep the leaders.
   ========================================================================== */
@media print {
  .skagit-menu__photo { display: none; }
  .skagit-menu--cols-2 .skagit-menu__list { column-count: 1; }
  .skagit-menu { color: #000; }
  .skagit-menu__price,
  .skagit-menu__section-title { color: #000; }
}


/* ==========================================================================
   EMPTY VENUE
   A venue whose dishes are not published yet. Says so plainly instead of
   leaving a silent gap under the venue header — see the zero case in
   inc/shortcode-menu.php.
   ========================================================================== */

.skagit-menu--empty {
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px dashed rgba(11, 61, 104, 0.28);
  border-radius: var(--sk-radius-lg, 14px);
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.skagit-menu__empty {
  margin: 0;
  color: var(--sk-text-muted, #56616E);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Only editors see this, so it is allowed to look like an instruction. */
.skagit-menu__empty-hint {
  margin: 0.75rem 0 0;
  color: var(--sk-text-faint, #6B7684);
  font-size: 0.875rem;
}