/* ============================================
   DICE DROP TAVERN — MENU STYLESHEET
   Edit :root variables to change fonts & sizes globally
   ============================================ */

:root {
  /* --- Font Families --- */
  --font-display:    "Arvo", Georgia, serif;
  --font-body:       "Josefin Sans", sans-serif;
  --font-decorative: "Amatic SC", cursive;

    /* --- Font Sizes (12px minimum) --- */
  --fs-tavern-name:      2.1rem;
  --fs-tagline:          2rem;
  --fs-tab:              1rem;
  --fs-sec-title:        1.8rem;
  --fs-item-name:        1.3rem;
  --fs-price:            1.1rem;
  --fs-note:             1.2rem;
  --fs-pill:             1.2rem;
  --fs-cocktail-name:     1.3rem;
  --fs-cocktail-price:   1.1rem;
  --fs-lore:             1.2rem;
  --fs-components-label: 1rem;
  --fs-components:       1.1rem;
  --fs-mead-name:        1.3rem;
  --fs-mead-price:       1.1rem;
  --fs-mead-lore:        1.2rem;
  --fs-footer:           1.6rem;

  /* --- Brand Colors --- */
  --color-green:      #174C38;
  --color-green-mid:  #3A7264;
  --color-green-lt:   #518D80;
  --color-green-pale: #C4D9D2;
  --color-gold:       #B9975B;
  --color-cream:      #F5EEDD;
  --color-cream-mid:  #EBD9BB;
  --color-white:      #ffffff;
  --color-ink:        #2F2F30;
  --color-coral:      #B93A2E;

  /* --- Cocktail accent colors --- */
  --color-goblin:     #3A7264;
  --color-health:     #B93A2E;
  --color-mana:       #16586C;
}

/* ============================================ RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--color-cream);
  font-family: var(--font-body);
  color: var(--color-ink);
  font-size: var(--fs-item-name);
  line-height: 1.5;
}

/* ============================================ LAYOUT */
.outer { max-width: 980px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }

/* ============================================ HEADER */
.header {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
  border-bottom: 3px solid var(--color-gold);
  margin-bottom: 2rem;
}
.logo-img { width: 180px; height: auto; display: block; margin: 0 auto 1.2rem; }
a.logo-img {
    text-decoration: none;
}
.tavern-name {
  font-family: var(--font-display);
  font-size: var(--fs-tavern-name);
  font-weight: 700;
  color: var(--color-green);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.tagline {
  font-family: var(--font-decorative);
  font-size: var(--fs-tagline);
  color: var(--color-ink);
  letter-spacing: 0.15em;
  font-weight: bold;
}

/* ============================================ TABS */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2rem; justify-content: center; }
.tab {
  padding: 9px 24px;
  border: 2px solid var(--color-green);
  font-family: var(--font-display);
  font-size: var(--fs-tab);
  letter-spacing: 0.12em;
  cursor: pointer;
  background: transparent;
  color: var(--color-green);
  text-transform: uppercase;
  font-weight: 700;
  transition: background 0.15s, color 0.15s;
}
.tab:hover { background: var(--color-green-mid); color: var(--color-cream); }
.tab.active { background: var(--color-green); color: var(--color-cream); }

/* ============================================ SECTIONS */
.section { display: none; }
.section.active { display: block; }

/* ============================================ SECTION TITLES */
.subhead{
  font-size: var(--fs-note);
  color: var(--color-coral);
  font-style: italic;
  margin-bottom: 0.8rem;
  line-height: 1.6;
  text-align: center;
  text-transform: capitalize; 
}
.sec-title {
  font-family: var(--font-display);
  font-size: var(--fs-sec-title);
  letter-spacing: 0.2em;
  color: var(--color-green);
  margin: 2rem 0 0.7rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sec-title::before, .sec-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.6;
}
.sec-note {
  font-size: var(--fs-note);
  color: var(--color-green-lt);
  font-style: italic;
  margin-bottom: 0.8rem;
  line-height: 1.6;
  text-align: center;
}
.sec-note strong { color: var(--color-green); font-style: normal; }

/* ============================================ ITEM CARDS */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 0.5rem; }
.card {
  background: var(--color-white);
  border: 1px solid rgba(185,151,91,0.3);
  border-left: 3px solid var(--color-green);
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s;
}
.card:hover { border-color: var(--color-gold); border-left-color: var(--color-gold); }
.item-name { font-family: var(--font-body); font-size: var(--fs-item-name); font-weight: 700; color: var(--color-green); line-height: 1.3; }
.price { font-family: var(--font-display); font-size: var(--fs-price); font-weight: 700; color: var(--color-gold); white-space: nowrap; }

/* ============================================ WING FLAVORS */
.flavor-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 0.8rem; }
.flavor-pill {
  background: var(--color-green);
  color: var(--color-gold);
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: var(--fs-pill);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wing-note { font-size: var(--fs-note); color: var(--color-green-lt); font-style: italic; line-height: 1.7; margin-top: 0.5rem; }
.wing-note strong { color: var(--color-green); font-style: normal; }
.sauce-note {
  font-size: var(--fs-note);
  color: var(--color-green);
  font-style: italic;
  margin-top: 1.2rem;
  padding: 10px 16px;
  border: 1px solid rgba(185,151,91,0.4);
  background: var(--color-white);
  text-align: center;
  letter-spacing: 0.04em;
}

/* ============================================ DRESSINGS */
.dress-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0.5rem 0 0.8rem; }
.dress-pill {
  background: transparent;
  border: 1px solid var(--color-green);
  padding: 5px 13px;
  font-family: var(--font-display);
  font-size: var(--fs-pill);
  font-weight: 700;
  color: var(--color-green);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ============================================ COCKTAIL CARDS */
.cocktail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.cocktail-card {
  background: var(--color-white);
  border: 1px solid rgba(185,151,91,0.3);
  border-top: 4px solid var(--color-green);
  padding: 20px;
}
.goblin-card  { border-top-color: var(--color-goblin); }
.health-card  { border-top-color: var(--color-health); }
.mana-card    { border-top-color: var(--color-mana); }
.c-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.c-name  { font-family: var(--font-display); font-size: var(--fs-cocktail-name); font-weight: 700; color: var(--color-green); }
.c-price { font-family: var(--font-display); font-size: var(--fs-cocktail-price); font-weight: 700; color: var(--color-gold); white-space: nowrap; margin-left: 8px; }
.c-lore {
  font-size: var(--fs-lore);
  color: var(--color-green-lt);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(185,151,91,0.3);
  padding-bottom: 12px;
}
.c-components-label { font-family: var(--font-display); font-size: var(--fs-components-label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 4px; }
.c-components { font-size: var(--fs-components); color: var(--color-green); line-height: 1.6; }

/* ============================================ MEAD CARDS */
.mead-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400, 1fr)); gap: 16px; }
.mead-card { background: var(--color-green); padding: 20px; }
.mead-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.mead-name  { font-family: var(--font-display); font-size: var(--fs-mead-name); font-weight: 700; color: var(--color-gold); }
.mead-price { font-family: var(--font-display); font-size: var(--fs-mead-price); font-weight: 700; color: var(--color-cream); }
.mead-lore  { font-size: var(--fs-mead-lore); color: var(--color-green-pale); line-height: 1.7; font-style: italic; }

/* ============================================ FOOTER */
.footer {
  text-align: center;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--color-green);
  font-family: var(--font-decorative);
  font-size: var(--fs-footer);
  color: var(--color-ink);
  letter-spacing: 0.12em;
  font-weight: bold;

}
.footer-divider { color: var(--color-gold); margin: 0 0.5rem; }