/* ==========================================================================
   THE CAKE BAKE SHOP — RESPONSIVE MENU STYLESHEET
   Shared by every menu page (Breakfast, Lunch, Dinner, Desserts, Drinks).

   SHOPIFY SETUP
   1. Upload every file in /assets to Shopify > Content > Files.
   2. Copy the CDN URL of any one file, e.g.
      https://cdn.shopify.com/s/files/1/0123/4567/files/orn-swash.png
   3. In the :root block below, replace  assets/  with your CDN prefix, e.g.
      https://cdn.shopify.com/s/files/1/0123/4567/files/
   4. Upload this file to Shopify > Online Store > Themes > Edit code > Assets.
   5. In theme.liquid, just before </head>, add:
      {{ 'menu.css' | asset_url | stylesheet_tag }}
   6. Paste each menu's HTML block into its Shopify page (Page > ... > Edit HTML).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&display=swap');

:root {
  /* ---- ORNAMENT PATHS - edit this one block after uploading to Shopify ---- */
  --dbw-sprig-l:    url("https://pixie.thecakebakeshop.com/menus/assets/orn-sprig-l.png");
  --dbw-sprig-r:    url("https://pixie.thecakebakeshop.com/menus/assets/orn-sprig-r.png");
  --dbw-swash:      url("https://pixie.thecakebakeshop.com/menus/assets/orn-swash.png");

  /* ---- Palette (sampled from the print menus) ---- */
  --dbw-cream:      #ffffff;
  --dbw-ink:        #231f20;
  --dbw-muted:      #6f7175;
  --dbw-gold:       #b0995c;   /* section titles, rules */
  --dbw-gold-lt:    #c5b689;   /* page title, hairlines */
  --dbw-gold-dk:    #9c8646;   /* italic accent lines */

  /* ---- Type ---- */
  --dbw-serif: "Baskervville", "Baskerville", "Libre Baskerville", Georgia,
               "Times New Roman", serif;
}

/* ==========================================================================
   1. SHEET
   ========================================================================== */

.dbw-menu {
  --pad: 34px;
  box-sizing: border-box;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--pad);
  background-color: var(--dbw-cream);
  font-family: var(--dbw-serif);
  color: var(--dbw-ink);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.dbw-menu *,
.dbw-menu *::before,
.dbw-menu *::after { box-sizing: border-box; }

.dbw-sheet {
  padding: 34px 30px 28px;
}

/* ==========================================================================
   2. MASTHEAD
   ========================================================================== */

.dbw-head { text-align: center; margin: 6px 0 34px; }

.dbw-logo {
  display: block;
  width: 190px;
  max-width: 55%;
  height: auto;
  margin: 0 auto 18px;
}

.dbw-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 30px);
  margin: 0;
  font-weight: 400;
  font-size: clamp(2rem, 6.5vw, 3.4rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dbw-gold-lt);
  line-height: 1.1;
}

.dbw-title::before,
.dbw-title::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(48px, 12vw, 104px);
  aspect-ratio: 377 / 145;
  background: var(--dbw-sprig-l) center/contain no-repeat;
}
.dbw-title::after { background-image: var(--dbw-sprig-r); }

.dbw-subtitle {
  margin: 12px auto 0;
  max-width: 46ch;
  font-style: italic;
  font-size: .82rem;
  color: var(--dbw-gold-dk);
}

/* ==========================================================================
   2b. MENU TABS  (links to this location's other menus)
   ========================================================================== */

.dbw-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 26px;
}

.dbw-tabs__link {
  font-family: var(--dbw-serif);
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dbw-gold-dk);
  background: #FAF6EC;
  padding: 9px 18px;
  border: 1px solid var(--dbw-gold-lt);
  border-radius: 6px;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.dbw-tabs__link:hover { border-color: var(--dbw-gold); background: #F3ECDA; }

.dbw-tabs__link.is-active {
  color: #fff;
  font-weight: 600;
  background: var(--dbw-gold);
  border-color: var(--dbw-gold-dk);
}

@media (max-width: 640px) {
  .dbw-tabs__link { padding: 8px 13px; font-size: .74rem; }
}

@media (max-width: 400px) {
  .dbw-tabs__link { padding: 7px 10px; font-size: .68rem; letter-spacing: .05em; }
}

/* ==========================================================================
   3. COLUMN GRID  (collapses to a single column on mobile)
   ========================================================================== */

.dbw-cols {
  display: grid;
  gap: 0 46px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 760px) {
  .dbw-cols--2 { grid-template-columns: 1fr 1fr; }
  .dbw-cols--3 { grid-template-columns: 1fr 1fr; }
  .dbw-cols--2 > .dbw-col + .dbw-col,
  .dbw-cols--3 > .dbw-col + .dbw-col { border-left: 1px solid var(--dbw-gold-lt); padding-left: 46px; }
}

@media (min-width: 1040px) {
  .dbw-cols--3 { grid-template-columns: repeat(3, 1fr); gap: 0 38px; }
  .dbw-cols--3 > .dbw-col + .dbw-col { padding-left: 38px; }
}

.dbw-col > :first-child { margin-top: 0; }

/* a full-width band that spans every column */
.dbw-band { grid-column: 1 / -1; }

/* horizontal rule used between stacked blocks */
.dbw-rule {
  border: 0;
  border-top: 1px solid var(--dbw-gold-lt);
  margin: 34px 0;
}

/* ==========================================================================
   4. SECTIONS
   ========================================================================== */

.dbw-sect { margin: 0 0 34px; }

.dbw-sect__title {
  margin: 34px 0 0;
  font-weight: 400;
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--dbw-gold);
  line-height: 1.25;
}
.dbw-col > .dbw-sect:first-child > .dbw-sect__title { margin-top: 0; }

/* the calligraphic swash beneath every section title */
.dbw-sect__title::after {
  content: "";
  display: block;
  width: 74px;
  height: 20px;
  margin: 8px auto 0;
  background: var(--dbw-swash) center/contain no-repeat;
}
.dbw-sect__title--plain::after { display: none; }

.dbw-sect__note {
  margin: 10px auto 0;
  max-width: 44ch;
  text-align: center;
  font-style: italic;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--dbw-gold-dk);
}

/* ==========================================================================
   5. MENU ITEMS
   ========================================================================== */

.dbw-item { margin: 24px 0 0; text-align: center; }

.dbw-item__name {
  margin: 0;
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--dbw-ink);
}

.dbw-item__desc {
  margin: 5px auto 0;
  max-width: 42ch;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--dbw-muted);
}

.dbw-item__price {
  margin: 7px 0 0;
  font-size: .95rem;
  color: var(--dbw-ink);
}

/* small dietary marks and add-on lines */
.dbw-tag {
  font-style: italic;
  font-size: .78em;
  color: var(--dbw-gold-dk);
  white-space: nowrap;
}

.dbw-add {
  margin: 5px auto 0;
  max-width: 42ch;
  font-style: italic;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--dbw-gold-dk);
}

/* ---- price-on-the-right list (drinks, wine, spirits) ---- */
.dbw-list { margin: 18px 0 0; }

.dbw-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  align-items: baseline;
  margin: 0 0 12px;
  text-align: left;
}
.dbw-row__name { font-size: 1rem; line-height: 1.3; }
.dbw-row__price { font-size: 1rem; white-space: nowrap; }
.dbw-row__desc {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--dbw-muted);
}
.dbw-row__desc em { color: var(--dbw-gold-dk); font-style: italic; }

.dbw-list__head {
  margin: 22px 0 10px;
  font-size: .82rem;
  font-style: italic;
  letter-spacing: .04em;
  color: var(--dbw-gold-dk);
  border-bottom: 1px solid var(--dbw-gold-lt);
  padding-bottom: 4px;
  overflow: hidden;
}
.dbw-list__units {
  float: right;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .72rem;
}

/* ---- inline "a la carte" style runs ---- */
.dbw-inline {
  margin: 16px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: .92rem;
  line-height: 1.9;
}
.dbw-inline .sep { color: var(--dbw-gold-lt); padding: 0 6px; }

/* ==========================================================================
   6. BOXED FEATURE BLOCKS
   ========================================================================== */

.dbw-box {
  border: 1px solid var(--dbw-gold);
  padding: 22px 20px 26px;
  margin: 22px 0 0;
}
.dbw-box .dbw-sect__title { margin-top: 0; }

/* ==========================================================================
   7. ITEMS WITH A PHOTO  (desserts)
   ========================================================================== */

.dbw-plate {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: 4px 22px;
  margin: 30px 0 0;
  text-align: center;
}
.dbw-plate__img { width: min(230px, 62%); height: auto; display: block; }
.dbw-plate__body { max-width: 42ch; }

@media (min-width: 620px) {
  .dbw-plate { grid-template-columns: 220px 1fr; justify-items: stretch; text-align: left; }
  .dbw-plate__img { width: 100%; max-width: 220px; }
  .dbw-plate__body .dbw-item__desc,
  .dbw-plate__body .dbw-add { margin-left: 0; margin-right: 0; }
  .dbw-plate__body .dbw-item__name,
  .dbw-plate__body .dbw-item__desc,
  .dbw-plate__body .dbw-item__price { text-align: left; }

  /* alternate: photo on the right */
  .dbw-plate--flip { grid-template-columns: 1fr 220px; }
  .dbw-plate--flip .dbw-plate__img { grid-column: 2; grid-row: 1; }
  .dbw-plate--flip .dbw-plate__body { grid-column: 1; grid-row: 1; }
  .dbw-plate--flip .dbw-plate__body .dbw-item__name,
  .dbw-plate--flip .dbw-plate__body .dbw-item__desc,
  .dbw-plate--flip .dbw-plate__body .dbw-item__price,
  .dbw-plate--flip .dbw-plate__body .dbw-add { text-align: right; }
  .dbw-plate--flip .dbw-plate__body .dbw-item__desc,
  .dbw-plate--flip .dbw-plate__body .dbw-add { margin-left: auto; margin-right: 0; }
}

/* free-standing hero / character illustrations */
.dbw-figure { margin: 26px 0; text-align: center; }
.dbw-figure img { width: min(300px, 74%); height: auto; }

.dbw-chars {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 10px 26px;
  margin: 30px 0 6px;
}
.dbw-chars img { width: clamp(72px, 17vw, 150px); height: auto; }

/* ==========================================================================
   8. FOOTER / LEGAL
   ========================================================================== */

.dbw-foot {
  margin: 40px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--dbw-gold-lt);
  text-align: center;
  color: var(--dbw-gold-dk);
}
.dbw-foot p { margin: 0 auto 8px; max-width: 76ch; font-size: .72rem; line-height: 1.6; }
.dbw-foot strong { font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.dbw-foot .dbw-legal { color: var(--dbw-muted); font-style: italic; }

/* ==========================================================================
   9. RESPONSIVE TUNING
   ========================================================================== */

@media (max-width: 640px) {
  .dbw-menu {
    --pad: 16px;
    font-size: 16px;
  }
  .dbw-sheet { padding: 22px 12px 18px; }
  .dbw-head { margin-bottom: 26px; }
  .dbw-logo { width: 150px; }
  .dbw-title { letter-spacing: .08em; }
  .dbw-sect { margin-bottom: 26px; }
  .dbw-item { margin-top: 20px; }
  .dbw-inline { text-align: center; line-height: 2.1; }
  .dbw-plate { margin-top: 24px; }
}

@media (max-width: 400px) {
  .dbw-title::before,
  .dbw-title::after { display: none; }
}

/* ==========================================================================
   10. PRINT
   ========================================================================== */

@media print {
  .dbw-menu { max-width: none; padding: 12mm; }
  .dbw-sect, .dbw-plate, .dbw-box { break-inside: avoid; }
  .dbw-tabs { display: none; }
}