@charset "utf-8";
/* ===================================================================
   The Bellevue Tavern - layout helpers and responsive rules.

   styles.css is the Square1 concept's stylesheet, unchanged. The Square1
   pages are built for a 1620px viewport; at 1600px and wider the site
   looks exactly like the concept. Below that, these rules (all scoped to
   bt-* classes used in the CP-stored header, footer and page content)
   adapt it:
     1599px  smaller header nav so it fits beside the logo
     1279px  mobile header (logo + MENU button), stacked footer, 2-up cards
     1023px  welcome section and contact columns stack
      767px  phones: single column, smaller type
   =================================================================== */

/* ---------- Banner: header over the slide show / random header picture */
.bt-banner {
  position: relative;
  vertical-align: top;
  background-color: #151312;
  background-position: center top;
  background-repeat: no-repeat;
}
.bt-banner-inner { position: relative; z-index: 1; }
.bt-banner-fade { background: url(../images/homepagesliderfade.png) no-repeat left top; }
.bt-slides { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: 0; }
/* Slider track as on deblasioassociates.square1server.com: slides sit side by
   side and the track is moved left with translateX (see layouts/app). */
.bt-slides-track { display: flex; height: 100%; transition: transform 0.6s ease-in-out; }
.bt-slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  background-position: center top; background-repeat: no-repeat;
}
.bt-slide-dots {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 2;
}
.bt-slide-dot {
  display: inline-block; width: 12px; height: 12px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.5);
}
.bt-slide-dot.is-active { background: #FFFFFF; }

/* Mobile-only header rows (MENU button + menu panel). */
.bt-mobile-only { display: none; }
/* Mobile header icons (as on DeBlasio): tap-to-call and the menu button,
   the same call.png / menu.png images tinted white for the dark header.
   Hidden on desktop, where the full nav shows. */
.bt-mobile-actions { display: none; align-items: center; gap: 10px; }
.bt-mobile-phone { display: block; }
.site-header-toggle { display: block; padding: 0; border: 0; background: transparent; cursor: pointer; }
.bt-mobile-icon {
  display: block; width: auto; height: 60px;
  filter: brightness(0) invert(1);
  transition: filter 0.2s;
}
.bt-mobile-actions a:hover .bt-mobile-icon,
.site-header-toggle:hover .bt-mobile-icon,
.site-header-toggle[aria-expanded="true"] .bt-mobile-icon {
  /* Square1's yellow link hover, #FDEF6B */
  filter: brightness(0) saturate(100%) invert(93%) sepia(53%) saturate(704%) hue-rotate(323deg) brightness(103%) contrast(98%);
}
.bt-mobile-nav { display: none; background: #151312; text-align: center; padding: 6px 0 12px; }
.bt-mobile-nav.is-open { display: block; }
.bt-mobile-nav a { display: block; font-size: 20px; line-height: 46px; border-bottom: 1px solid #2A2725; }
.bt-mobile-nav a:last-child { border-bottom: 0; }

/* ---------- Buttons (Square1's 56px maroon / black blocks) */
.bt-btn,
a.bt-btn:link,
a.bt-btn:visited {
  display: inline-block;
  background-color: #780714;
  color: #FFFFFF;
  font-family: "Barlow", sans-serif;
  font-size: 20px;
  line-height: 56px;
  padding: 0 30px;
  margin: 0 12px 12px 0;
  border: 0;
  text-decoration: none;
  cursor: pointer;
}
.bt-btn:hover, a.bt-btn:hover { color: #FDEF6B; }
.bt-btn-dark, a.bt-btn-dark:link, a.bt-btn-dark:visited { background-color: #151312; }
.bt-btn-row { line-height: normal; }

/* ---------- Page content */
img.bt-fluid,
.bt-content img.bt-img-right { max-width: 100%; height: auto; }
.bt-content img.bt-img-right { margin: 0 0 25px 35px; }
.bt-content hr { border: 0; border-top: 1px solid #E5DCD2; margin: 25px 0; }
.bt-content iframe { max-width: 100%; }
.bt-welcome-image { background-size: cover; background-position: center; }
.bt-buttons td[bgcolor] { height: 56px; }
.bt-card td.bgcenter { background-size: cover; background-position: center; }
ul.bt-sitemap li { line-height: 44px; }
ul.bt-sitemap li.bt-sitemap-group { color: #7A7370; }
ul.bt-sitemap ul { list-style-type: circle; margin: 4px 0 0; }

/* ---------- Contact form */
.bt-form-title { padding: 18px 10px; }
.bt-form { padding: 25px; }
.bt-form input,
.bt-form textarea {
  display: block; width: 100%; box-sizing: border-box;
  font-family: "Barlow", sans-serif; font-size: 18px; color: #151312;
  padding: 12px; margin: 0 0 15px; border: 1px solid #D8CDBF; background: #FFFFFF;
}
.bt-captcha { margin: 0 0 15px; }
.bt-form .bt-btn { margin: 0; }

/* =================================================================== */
/* Header nav stays Square1's exact 24px Barlow wherever the desktop header
   shows. Below 1440px the two link groups no longer fit beside the logo
   with Square1's spacing, so only the gaps tighten (not the type); below
   1366px the mobile header takes over. */
@media screen and (min-width: 1366px) and (max-width: 1439px) {
  .bt-nav { word-spacing: -1.5px; white-space: nowrap; }
  .bt-nav a { word-spacing: normal; }
  .bt-nav img { width: 12px; }
}

@media screen and (max-width: 1365px) {
  /* Header: logo with the phone / menu icons beside it. */
  .bt-header-side { display: none; }
  .bt-mobile-only { display: table-row; }

  /* Inner-page banner: the header is shorter here, so show the bottom of
     the picture (the food) rather than its black top band. */
  .bt-banner:not(.bt-banner-home) { background-position: center bottom; }

  /* One row: logo on the left, phone + menu icons on the right, the icons
     in the header's top red band (headerbg.png, ~58px tall). */
  .bt-header-logo {
    display: flex; align-items: flex-start; justify-content: space-between;
    width: 100%; padding: 6px 24px 4px 16px; box-sizing: border-box;
  }
  .bt-header-logo .bt-logo-link img { display: block; width: 200px; height: auto; }
  .bt-mobile-actions { display: flex; }
  .bt-mobile-icon { height: 46px; }
}

@media screen and (max-width: 1279px) {
  /* Hero */
  .bt-hero .size60 { font-size: 46px; line-height: 1.15; }
  .bt-hero-spacer { height: 440px; }

  /* Footer: logo above the centred links. */
  .bt-footer-inner { width: 100% !important; }
  .bt-footer-inner > tbody > tr > td { display: block; width: 100% !important; text-align: center !important; }
  .bt-footer-info > table { width: 100% !important; }
  .bt-footer-info td { text-align: center !important; padding-left: 16px; padding-right: 16px; }
  .bt-footer-logo a img { width: 240px; height: auto; }

  /* Favorites: two per row. */
  .bt-cards, .bt-cards > tbody { display: block; width: 100%; }
  .bt-cards > tbody > tr { display: block; }
  .bt-cards > tbody > tr:nth-child(2) {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; padding: 0 25px;
  }
  .bt-cards td.bt-gap { display: none; }
  .bt-cards td.bt-card { display: block; width: calc(50% - 15px) !important; box-sizing: border-box; }
}

@media screen and (max-width: 1023px) {
  /* Welcome: picture above the text. */
  .bt-welcome, .bt-welcome > tbody, .bt-welcome > tbody > tr { display: block; width: 100%; }
  .bt-welcome > tbody > tr > td { display: block; width: 100% !important; box-sizing: border-box; }
  .bt-welcome > tbody > tr > td.bt-gap { display: none; }
  .bt-welcome-image { height: 380px; }
  .bt-welcome-spacer { display: none; }
  .bt-welcome-text { padding: 10px 30px 30px; }

  /* Contact: form under the details. */
  .bt-contact-info, .bt-contact-form { display: block; width: 100% !important; }
  .bt-content > tbody > tr > td.bt-gap { display: none; }
  .bt-contact-form { padding-top: 20px; }
}

@media screen and (max-width: 767px) {
  body, td, th { font-size: 18px; }
  h1 { font-size: 38px; line-height: 1.2; }
  h2 { font-size: 30px; line-height: 1.25; }
  h3 { font-size: 24px; line-height: 1.3; }
  h4 { font-size: 20px; line-height: 1.4; }
  .medspacing { line-height: 32px; }

  /* Header */
  .bt-header-logo .bt-logo-link img { width: 150px; }
  .bt-header-logo { padding: 6px 14px 3px 12px; }
  .bt-mobile-icon { height: 46px; }
  .bt-mobile-actions { gap: 4px; }
  .bt-banner-gap img { height: 70px; }

  /* Hero */
  .bt-banner-home { background-size: cover; background-position: 65% bottom; }
  .bt-slide { background-size: cover; background-position: 65% bottom; }
  .bt-slide-dots { bottom: 8px; } /* clear of the hero buttons */
  .bt-hero-gap { width: 16px !important; }
  .bt-hero-gap img { width: 16px; }
  .bt-hero-spacer { height: 340px; }
  .bt-hero > tbody > tr > td:last-child { padding-right: 16px; }
  .bt-hero .size60 { font-size: 32px; }
  .bt-hero .size24 { font-size: 18px; line-height: 28px; }
  .bt-hero-text br { display: none; }
  .bt-hero-buttons { width: 100% !important; max-width: 443px; }
  .bt-hero-buttons img { width: 100%; height: auto; }

  /* Welcome buttons: one per line. */
  .bt-welcome-image { height: 260px; }
  .bt-welcome-text { padding: 5px 16px 25px; }
  .bt-buttons, .bt-buttons > tbody, .bt-buttons > tbody > tr { display: block; width: 100% !important; }
  .bt-buttons > tbody > tr > td { display: block; width: 100% !important; line-height: 56px; margin-bottom: 10px; }
  .bt-buttons td.bt-gap { display: none; }

  /* Favorites: one per row. */
  .bt-favorites { padding: 0 16px; }
  .bt-cards > tbody > tr:nth-child(2) { padding: 0; gap: 35px; }
  .bt-cards td.bt-card { width: 100% !important; }

  /* Inner pages */
  .bt-content { width: 100% !important; }
  .bt-content > tbody > tr > td { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
  .bt-content img.bt-img-right { float: none; display: block; margin: 0 auto 20px; }
  .bt-btn, a.bt-btn:link, a.bt-btn:visited { display: block; text-align: center; margin-right: 0; padding: 0 15px; }
  .bt-content iframe { height: 380px; }
  .bt-form { padding: 18px; }

  /* Footer */
  .bt-footer-line { display: none; }
  .bt-footer-contact a.size26 { display: block; font-size: 22px; line-height: 40px; }
  .bt-footer-social { display: block; margin-top: 10px; }
  .bt-footer-nav a { display: inline-block; line-height: 34px; padding: 0 6px; }
  .bt-footer-logo a img { width: 200px; }
}