/* Branad fixes v1: shared layout overrides for the static Berna's Bakery & Cafe site.
   custom-5ec39b6f.css ships unchanged in an open PR, so new site-wide rules go here.
   This file is linked on every page right after custom-5ec39b6f.css so it can override it. */

/* 1. Header offset. Squarespace's header JS set the first section's top padding to the measured header
   height; the static clone keeps an 80px fallback, so content started under the logo. */
/* Phones: 12px under the logo, and the header box ends where the content starts (no dead tap strip). */
@media screen and (max-width: 767px) {
  #header .header-announcement-bar-wrapper { padding-bottom: 12px; }
  main .sections:first-child .page-section:first-child { padding-top: calc(6vw + 72px); }
}
/* 768-799 px and touch tablets up to 1024 px show the burger header with 6vw padding around a 100px
   logo (192-223 px tall). Give it the desktop header's padding (131-141 px tall) and start the content
   where the header ends, since the logo is centred here and sits over centred first images. */
@media only screen and (pointer: coarse) and (min-width: 768px) and (max-width: 1024px),
       screen and (min-width: 768px) and (max-width: 799px) {
  #header .header-announcement-bar-wrapper { padding-top: 2vw; padding-bottom: 2vw; }
  main .sections:first-child .page-section:first-child { padding-top: calc(4vw + 100px); }
}
/* Phones in landscape: compact header (60px logo) so it does not take half of a 340-430 px tall screen. */
@media only screen and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px),
       screen and (orientation: landscape) and (max-height: 500px) and (max-width: 799px) {
  #header .header-announcement-bar-wrapper { padding-top: 2vw; padding-bottom: 12px; }
  .header-title-logo a, .header-title-logo img { max-height: 60px; }
  main .sections:first-child .page-section:first-child { padding-top: calc(2vw + 72px); }
}

/* 2. Tap targets on touch screens. */
@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
  .header-burger-btn { min-height: 44px; }
}
@media screen and (max-width: 767px) {
  /* 40px hit area on a 40px pitch, no layout shift */
  footer .sqs-html-content a { display: inline-block; padding-block: 8px; margin-block: -8px; }
  .menu-block .menu-selector .menu-select-labels { display: inline-block; padding-block: 10px; }
}

/* 3. Footer, 768-1439 px: hour and link columns were 3 grid columns wide, so every time wrapped and
   drifted from its day label. Link columns now start on the Monday row at every desktop width. */
@media screen and (min-width: 768px) {
  footer .fe-block-yui_3_17_2_1_1771094973723_74081,
  footer .fe-block-59b0bfe77cbe4af35992 { grid-row: 4 / 8; }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  footer .fe-block-9a02fba54063a67de2ef { grid-column: 2 / 8; }
  footer .fe-block-yui_3_17_2_1_1762654429698_6172 { grid-column: 8 / 14; }
  footer .fe-block-yui_3_17_2_1_1771094973723_74081 { grid-column: 15 / 21; }
  footer .fe-block-59b0bfe77cbe4af35992 { grid-column: 21 / 26; }
  footer .fe-block-b636beeaa369fa92a832 { grid-area: 8 / 15 / 10 / 21; }
  footer .fe-block-612132c0247777d723d1 { grid-area: 8 / 21 / 10 / 26; }
  footer .fe-block-b636beeaa369fa92a832 .sqs-block,
  footer .fe-block-612132c0247777d723d1 .sqs-block { justify-content: flex-start; }
}
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  footer .fe-block-9a02fba54063a67de2ef { grid-column: 2 / 7; }
  footer .fe-block-yui_3_17_2_1_1762654429698_6172 { grid-column: 7 / 12; }
  footer .fe-block-yui_3_17_2_1_1771094973723_74081 { grid-column: 13 / 18; }
  footer .fe-block-59b0bfe77cbe4af35992 { grid-column: 18 / 21; }
}

/* 4. Phone numbers never split at the hyphen. */
a[href^="tel:"] { white-space: nowrap; }

/* 5. Headings: no one-word last line. Line count stays the same (balance only redistributes). The cafe
   hero H1 pair is excluded on purpose: its split heading is an owner decision. */
h1, h2, h3, h4 { text-wrap: balance; }
.fe-block-yui_3_17_2_1_1770782649448_3424 h1 { text-wrap: wrap; }

/* 6. Links inside the lunch article code blocks look like the other body links. */
.gc-wrap a { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }

/* 7. Google rating pill stays one row (its grid block is narrower than the pill on tablet and desktop). */
@media screen and (min-width: 360px) { .bb-google-badge { white-space: nowrap; } }

/* 8. One-line button labels, 901-980 px: the CALL (425) 657-0664 label plus 24px padding was 215px in a
   199-210px block, so the pill overflowed toward VIEW MENU. */
@media screen and (min-width: 901px) and (max-width: 980px) {
  .fluid-engine .sqs-block-button-element { padding-left: 16px !important; padding-right: 16px !important; }
}
/* Below 375 px the 32px side padding wrapped READ ALL GOOGLE REVIEWS onto two lines. */
@media screen and (max-width: 374px) {
  .fluid-engine .sqs-block-button-element { padding-left: 16px !important; padding-right: 16px !important; }
}

/* 9. Hero CALL button on the restaurant and breakfast pages sits on the photo from 768 px up; the outline
   style (dark text, no fill) was unreadable there. Same pill, the two site button colours swapped. */
@media screen and (min-width: 768px) {
  .fe-block-yui_3_17_2_1_1771096296376_4397 .sqs-block-button-element,
  .fe-block-fb87d14eabd1e24f8eba .sqs-block-button-element {
    background-color: #E5E9FD !important; border-color: #E5E9FD !important; color: #4C2929 !important;
  }
}

/* 10. Portrait tablets: the 66vh section minimum (676-902 px) left 180-550 px empty bands around short
   sections. Content keeps the section's own 6.6vmax padding. */
@media screen and (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  .page-section.section-height--medium:not(.content-collection):not(.gallery-section):not(.user-items-list-section) { min-height: 0; }
}

/* 11. Contact form: fields and button in the site's style (Work Sans, brown text, pill primary button). */
.branad-contact-form .branad-cf-field { margin-bottom: 18px; }
.branad-contact-form label { display: block; margin-bottom: 6px; font-weight: 400; }
.branad-contact-form .branad-cf-field input,
.branad-contact-form .branad-cf-field textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 13px 15px;
  border: 1px solid #4C2929; border-radius: 5px; background: #fff; color: #4C2929;
  font-family: inherit; font-size: 16px;
}
.branad-contact-form .branad-cf-field input:focus,
.branad-contact-form .branad-cf-field textarea:focus { outline: 2px solid #4C2929; outline-offset: 2px; }
.branad-contact-form button[type="submit"] {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 59px;
  padding: 0 32px; border: 0; border-radius: 300px; background: #4C2929; color: #E5E9FD;
  font-family: "Work Sans", sans-serif; font-size: 16px; font-weight: 400; letter-spacing: normal;
  text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: opacity .1s linear;
}
.branad-contact-form button[type="submit"]:hover { opacity: .8; }
.branad-contact-form button[type="submit"]:focus-visible { outline: 2px solid #4C2929; outline-offset: 3px; }
.branad-contact-form button[type="submit"][disabled] { opacity: .6; cursor: default; }
.branad-cf-status--error {
  margin: 0 0 18px; padding: 12px 15px; border-left: 3px solid #c8202f; background: rgba(200, 32, 47, .06);
  color: #4C2929; line-height: 1.5;
}
.branad-cf-status a { color: inherit; text-decoration: underline; }
.branad-cf-thanks {
  display: flex; align-items: center; justify-content: center; min-height: inherit; box-sizing: border-box;
  padding: 28px; text-align: center; font-size: 1.05rem; line-height: 1.6;
}
.branad-cf-thanks:focus { outline: none; }

/* Branad: Back to top button (branad-back-to-top-v1.js). Round, theme-dark, bottom right; it moves above a floating
   order dock when one is on screen and hides while the mobile menu is open. */
.branad-top { position: fixed; right: 16px; bottom: 16px; z-index: 99989; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: hsla(var(--black-hsl, 20, 10%, 10%), .9); color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s, visibility .2s, transform .2s, bottom .2s; }
.branad-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.branad-top:hover { background: hsla(var(--black-hsl, 20, 10%, 10%), 1); }
.branad-top:focus-visible { outline: 3px solid hsla(var(--black-hsl, 20, 10%, 10%), 1); outline-offset: 3px; }
body.header--menu-open .branad-top { display: none; }
@media (prefers-reduced-motion: reduce) { .branad-top { transition: none; } }
@media print { .branad-top { display: none; } }

/* Re-check leftovers. Footer hours at 320px: times wrapped with 'pm' alone and ran 5px past their column, and 'Tuesday - Thursday' broke onto two lines, so days and times drifted apart. 85% text keeps both columns at one line per day. */
@media screen and (max-width: 374px) {
  footer .fe-block-9a02fba54063a67de2ef .sqs-html-content,
  footer .fe-block-yui_3_17_2_1_1762654429698_6172 .sqs-html-content { font-size: 85%; }
  footer .fe-block-9a02fba54063a67de2ef .sqs-html-content p,
  footer .fe-block-yui_3_17_2_1_1762654429698_6172 .sqs-html-content p { white-space: nowrap; }
}
/* Menu tab labels: 44px tap height on touch tablets and phone landscape too, not only below 768px. */
@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 767px) {
  .menu-block .menu-selector .menu-select-labels { display: inline-block; padding-top: 10px; padding-bottom: 10px; }
}

/* Skip to Content: keep it for keyboard users (it only appears while focused), but as a compact label rather than
   a large header-sized button. */
.header-skip-link { font-size: 14px !important; line-height: 1.3 !important; padding: .55em 1em !important; }