/* ============================================================================
   SOUTH JAZZ KITCHEN - Philadelphia, PA

   Upscale Southern fare and Philadelphia's best jazz club.

   Brand: copper (#a96623) on white, with charcoal navy (#282b33) for text
          and structure.
   Fonts: English Grotesque (the venue's own webfont) for headings, nav and
          body; Cormorant Garamond for show dates, echoing their menu cards.
   Source: https://www.southjazzkitchen.com
   ============================================================================ */

/* FONTS
   English Grotesque is self-hosted on the venue's BentoBox CDN.
   Cormorant Garamond comes from Google Fonts, as it does on their site.
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap');

@font-face {
  font-family: "English Grotesque";
  font-display: swap;
  font-weight: 300;
  src: url("https://media-cdn.getbento.com/accounts/775065cf8cbcd4570dfef1fbb38a0b04/media/N4Y4qsKORIa1XtEcrTVd_english-grotesque-300.otf") format("opentype");
}

@font-face {
  font-family: "English Grotesque";
  font-display: swap;
  font-weight: 500;
  src: url("https://media-cdn.getbento.com/accounts/775065cf8cbcd4570dfef1fbb38a0b04/media/rY4JzXqtQUCqalwWO1Zx_english-grotesque-500.otf") format("opentype");
}

@font-face {
  font-family: "English Grotesque";
  font-display: swap;
  font-weight: 700;
  src: url("https://media-cdn.getbento.com/accounts/775065cf8cbcd4570dfef1fbb38a0b04/media/3w0froqlRKi5Bie1FSRl_english-grotesque-700.otf") format("opentype");
}

:root {
  /* ========================================================================
     BRAND COLORS - South's copper accent and charcoal navy
     ======================================================================== */

  --color-brand: rgb(169, 102, 35);            /* Copper - links, buttons, accents */
  --color-brand-secondary: rgb(40, 43, 51);    /* Charcoal navy - text and structure */


  /* ========================================================================
     NEUTRAL COLORS - Light theme, white page like southjazzkitchen.com
     ======================================================================== */

  --color-light: rgb(245, 243, 240);   /* Warm off-white for panels */
  --color-dark: var(--color-brand-secondary);
  --color-white: rgb(255, 255, 255);
  --color-black: rgb(0, 0, 0);


  /* ========================================================================
     FONT FAMILIES - English Grotesque with Cormorant Garamond for dates
     ======================================================================== */

  --font-family-heading: "English Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-body: "English Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-nav: "English Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-display: "Cormorant Garamond", Georgia, serif;


  /* ========================================================================
     BUTTON STYLING
     ======================================================================== */

  --button-primary-color: var(--color-brand);
  --button-primary-label-color: var(--color-white);
  --button-primary-font-family: var(--font-family-heading);


  /* ========================================================================
     HEADER & NAVIGATION
     ======================================================================== */

  --header-primary-color: var(--color-white);
  --header-line-color: transparent;
  --header-link-color: var(--color-dark);
  --header-link-color-hover: var(--color-brand);
  --header-logo-width: 150px;

  --primary-nav-font-family: var(--font-family-nav);
  --primary-nav-font-size: 18px;
  --primary-nav-font-weight: 500;


  /* ========================================================================
     THEME COLORS
     ======================================================================== */

  --primary-theme-color: var(--color-brand);
  --secondary-theme-color: var(--color-brand-secondary);
  --primary-theme-bg-color: var(--color-white);


  /* ========================================================================
     CALENDAR
     ======================================================================== */

  --calendar-primary-color: var(--color-dark);
  --calendar-secondary-color: var(--color-white);


  /* ========================================================================
     TYPOGRAPHY
     ======================================================================== */

  --primary-heading-font-family: var(--font-family-heading);
  --primary-text-font-family: var(--font-family-body);
  --show-date-font-family: var(--font-family-display);


  /* ========================================================================
     FOOTER
     ======================================================================== */

  --footer-primary-color: var(--color-brand);


  /* ========================================================================
     GUEST UI OVERRIDES
     ======================================================================== */

  /* Body & Backgrounds */
  --g-bg-input: var(--color-light);
  --g-body-checkout-sidebar: var(--color-light);
}

.guest-ui #show-date,
.guest-ui .day-of-week {
  color: var(--color-brand);
}