/* BASE READY 2026-10-17 19:37 +08 */
/* 2026-10-18 (polish agent, owner-approved): nav fit fix. Width-banded #pbNav overrides of the shared nav partial (site_nav/_nav_partial2.php, unchanged), see "Nav fit" at the end of this file: guests 992-1319.98px, signed-in members 992-1359.98px. Stops "Order Online" running off the bar and "About Us" wrapping. Other widths unchanged. */
/* 2026-10-17 (home agent, approved by the lead): added smooth scrolling for anchor and scripted scrolls, as the live Bootstrap :root rule. */
/* Shared base for every rebuilt page. Owned by the shell; pages put their own rules in css/pages/<page>.css.
   Holds only the values the live (Joomla/Helix/Bootstrap) pages actually give visible elements globally,
   measured with getComputedStyle + CDP cascade winners on the live pages, 2026-10-17. */

@font-face { font-family: 'Druk Bold'; src: url('/images/fonts/druk-bold.woff2') format('woff2'); }
@font-face { font-family: 'Druk Medium'; src: url('/images/fonts/druk-medium.woff2') format('woff2'); }
@font-face { font-family: 'Belguri'; src: url('/images/fonts/belguri.woff') format('woff'), url('/images/fonts/belguri.otf') format('opentype'); }
@font-face { font-family: 'Authora'; src: url('/images/fonts/authora.woff2') format('woff2'); }

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

/* Body: Bootstrap's system font stack at 16px/1.5 (the Helix "Helvetica 36px" body_font is never emitted). */
body {
  margin: 0;
  position: relative;
  overflow-x: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  line-height: 1.5;
  color: #252525;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; font-weight: 500; line-height: 1.2; }
h1 { font-size: calc(1.375rem + 1.5vw); }
h2 { font-size: calc(1.325rem + .9vw); }
h3 { font-size: calc(1.3rem + .6vw); }
h4 { font-size: calc(1.275rem + .3vw); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
@media (min-width: 1200px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.75rem; }
  h4 { font-size: 1.5rem; }
}
p { margin: 0 0 1rem; }
ul, ol, dl { margin-top: 0; margin-bottom: 1rem; }
ul, ol { padding-left: 2rem; }
ul ul, ul ol, ol ul, ol ol { margin-bottom: 0; }
dt { font-weight: 700; }
address { margin-bottom: 1rem; }
b, strong { font-weight: bolder; }
small, code, kbd { font-size: .875em; }
code { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: #d63384; word-wrap: break-word; }
a > code { color: inherit; }
hr { margin: 20px 0; border: 0; border-top: 1px solid; color: inherit; opacity: .25; }

a { color: #cb333b; text-decoration: none; transition: color 400ms, background-color 400ms; }
a:hover, a:focus, a:active { color: #171d99; }

img { display: block; max-width: 100%; height: auto; vertical-align: middle; }
svg { vertical-align: middle; }

button, input, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, select { text-transform: none; }
button { border-radius: 0; }
button, [type="button"], [type="submit"], [type="reset"] { -webkit-appearance: button; }
button:not(:disabled), [type="button"]:not(:disabled), [type="submit"]:not(:disabled), [role="button"] { cursor: pointer; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
textarea { resize: vertical; }
label { display: inline-block; font-weight: normal; }

/* Text-type fields and selects: the Helix template's site-wide field look. The selector keeps the
   live specificity (0,2,1) so partial CSS wins or loses exactly as before. The padding keeps its
   !important because on the live site it overrides the partials' own field padding (users see 8px). */
input:is([type="text"], [type="email"], [type="url"], [type="date"], [type="password"], [type="search"], [type="tel"], [type="number"]):not(.form-control),
select:not(.form-select):not(.form-control) {
  display: block; width: 100%; padding: .5rem !important; font-size: 1rem; line-height: 1.25;
  color: #495057; background-color: #fff; background-image: none; background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .15); border-radius: .25rem;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
input:is([type="text"], [type="email"], [type="url"], [type="date"], [type="password"], [type="search"], [type="tel"], [type="number"]):not(.form-control):focus,
select:not(.form-select):not(.form-control):focus { color: #495057; background-color: #fff; border-color: #80bdff; outline: 0; }
input:is([type="text"], [type="email"], [type="url"], [type="date"], [type="password"], [type="search"], [type="tel"], [type="number"]), textarea { outline: none; box-shadow: none !important; }
select:not([multiple]) { height: calc(2.25rem + 2px); }
[hidden] { display: none !important; }

/* ---- Site chrome (layout.php) ---- */

/* Header slot: the nav partial is position:fixed; this slot reserves the 60px (50px on phones) the
   Helix header row took, fades in like it (spFadeIn .5s) and keeps its stacking level (z-index 99). */
.pb-site-header { position: relative; z-index: 99; height: 60px; animation: pb-fade-in .5s; }
@media (max-width: 575px) { .pb-site-header { height: 50px; } }
@keyframes pb-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Footer slot: full viewport width (the live .fullwidth-footer breakout), 14px white text,
   white links (#E0E0E0 on hover) at id specificity like the live #sp-ft rules, stacked above
   page sections (z-index 21, below the header's 99). */
.pb-site-footer { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); font-size: 14px; color: #fff; }
#pb-ft .pb-footer { position: relative; z-index: 21; }
#pb-ft a { color: #fff; }
#pb-ft a:hover { color: #e0e0e0; }

/* Smooth anchor/scripted scrolling, as live (Bootstrap reboot, only when the visitor allows motion). */
@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } }

/* ---- Nav fit (2026-10-18) ----
   The shared nav partial sizes its desktop bar for 16px links at >=1200px and 15px links at 992-1199.98px.
   Measured with Trebuchet MS (Windows/Mac/iOS), the guest bar needs a 1148px window at 15px and 1316px at 16px
   (signed-in members, whose points chip is wider: about 1212px and 1361px). Below those widths "About Us" wrapped
   and "Order Online" ran past the bar's right edge (by 55px at 1200px, 67px at 1024px). Fixed below, per band:
     tight  = smaller gaps/padding, 14px links, 13px buttons, 28px logo: guests 992-1167.98, members 992-1231.98
              (members also get a smaller points chip and link gap, sized for a 5-digit balance such as 12,345)
     medium = the partial's own 992-1199.98 sizing, kept up to: guests 1319.98, members 1359.98
   #pbNav (id) is needed to beat the partial's own <style>, which comes later in the page; .is-member (one more
   class) lets the member bands win where they overlap the guest ones. */
@media (min-width: 992px) and (max-width: 1167.98px) {
  #pbNav .pb-nav__row { padding: 0 20px; }
  #pbNav .pb-nav__row .pb-nav__logo img { height: 28px; }
  #pbNav .pb-nav__row .pb-nav__links { gap: 24px; margin-left: 20px; }
  #pbNav .pb-nav__row .pb-nav__links .pb-nav__item + .pb-nav__item::before { left: -12px; }
  #pbNav .pb-nav__row .pb-nav__links .pb-nav__item a { font-size: 14px; }
  #pbNav .pb-nav__row .pb-nav__rewards-btn a,
  #pbNav .pb-nav__row .pb-nav__order .pb-nav__dropdown-toggle { gap: 6px; padding: 9px 12px; font-size: 13px; }
  #pbNav .pb-nav__row .pb-nav__order { margin-left: 8px; }
}
@media (min-width: 992px) and (max-width: 1231.98px) {
  #pbNav .pb-nav__row.is-member { padding: 0 16px; }
  #pbNav .pb-nav__row.is-member .pb-nav__logo img { height: 28px; }
  #pbNav .pb-nav__row.is-member .pb-nav__links { gap: 20px; margin-left: 16px; }
  #pbNav .pb-nav__row.is-member .pb-nav__links .pb-nav__item + .pb-nav__item::before { left: -10px; }
  #pbNav .pb-nav__row.is-member .pb-nav__links .pb-nav__item a { font-size: 14px; }
  #pbNav .pb-nav__row.is-member .pb-nav__order .pb-nav__dropdown-toggle { gap: 6px; padding: 9px 12px; font-size: 13px; }
  #pbNav .pb-nav__row.is-member .pb-nav__order { margin-left: 8px; }
  #pbNav .pb-nav__row.is-member .pb-nav__pts-logo { height: 18px; }
  #pbNav .pb-nav__row.is-member .pb-nav__pts-chip { padding: 6px 8px; }
  #pbNav .pb-nav__row.is-member .pb-nav__pts-num { font-size: 18px; }
}
@media (min-width: 1200px) and (max-width: 1319.98px) {
  #pbNav .pb-nav__row .pb-nav__logo img { height: 30px; }
  #pbNav .pb-nav__row .pb-nav__links { gap: 48px; margin-left: 36px; }
  #pbNav .pb-nav__row .pb-nav__links .pb-nav__item + .pb-nav__item::before { left: -24px; }
  #pbNav .pb-nav__row .pb-nav__links .pb-nav__item a { font-size: 15px; }
  #pbNav .pb-nav__row .pb-nav__rewards-btn a,
  #pbNav .pb-nav__row .pb-nav__order .pb-nav__dropdown-toggle { padding: 9px 14px; font-size: 14px; }
}
@media (min-width: 1232px) and (max-width: 1359.98px) {
  #pbNav .pb-nav__row.is-member .pb-nav__logo img { height: 30px; }
  #pbNav .pb-nav__row.is-member .pb-nav__links { gap: 48px; margin-left: 36px; }
  #pbNav .pb-nav__row.is-member .pb-nav__links .pb-nav__item + .pb-nav__item::before { left: -24px; }
  #pbNav .pb-nav__row.is-member .pb-nav__links .pb-nav__item a { font-size: 15px; }
  #pbNav .pb-nav__row.is-member .pb-nav__order .pb-nav__dropdown-toggle { padding: 9px 14px; font-size: 14px; }
}

/* Stacked cards (assets/js/stack-cards.js, desktop >= 992px, 2026-10-18): only while <html> has .pb-stacking.
   The spacer is real content because sticky cards only stay stuck within their container's content box. */
@media (min-width: 992px) {
  .pb-stacking .pb-stack-card { position: sticky; }
  .pb-stacking .pb-stack::after { content: ""; display: block; height: var(--ft-h, 0px); }
  .pb-stacking #pb-ft { margin-top: calc(-1 * var(--ft-h, 0px)); }
}

/* Lenis smooth wheel scrolling (assets/js/smooth-scroll.js): the library's recommended base rules; its own smoothing
   replaces CSS smooth scrolling while it runs. Inert on pages without it. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }