/* The business's WEBSITE frame, worn by its customer pages (site_frame.py, Settings →
   Website). Like the booking widget, this is the business's own look rather than the
   product's design system, so it is a stylesheet of its own and not Tailwind classes.

   The measurements were read off the first business website the frame was built for,
   live, on 2026-11-06 (an Elementor site: a 1400px box, a 75px header, 80px section
   padding, breakpoints at 1025 and 768) — Ross asked for its portal to be "just
   another part of the website". They suit any business website built the usual way;
   what is the BUSINESS's — its colour,
   its ink, its font, its button shape, its letter case — arrives as the variables on
   :root that templates/_site_frame.html writes from settings:

     --sf-accent   the brand colour (Settings → Branding): buttons, links, the bar
     --sf-ink      headings, menu and link text
     --sf-font     the uploaded web font, then the app's own stack
     --sf-radius   30px for pill buttons, 8px for rounded
     --sf-case     uppercase or none, for titles, headings and buttons

   The frame is light only: a business website is one colour scheme, and the portal is
   part of it. */

.sf { --sf-band: #f8f8f8; --sf-line: #e4e4e4; --sf-rule: #898989; --sf-muted: #555555;
      --sf-label: #6b6b6b; --sf-text: #333333;
      color-scheme: light; background: #ffffff; color: var(--sf-text); margin: 0;
      font: 400 14px/20px var(--sf-font); -webkit-font-smoothing: antialiased; }
/* :where() keeps this at a bare element's weight, so every sf- link rule below wins. */
:where(.sf) a { text-decoration: none; color: inherit; }
.sf-box { width: min(1400px, calc(100% - 40px)); margin: 0 auto; }

/* ---- header ---- */
.sf-header { position: sticky; top: 0; z-index: 40; background: #ffffff; margin-bottom: 10px; }
.sf-hwrap { height: 75px; padding-bottom: 10px; display: flex; align-items: flex-start; justify-content: space-between; box-sizing: border-box; }
.sf-logo { flex: none; width: 13%; padding: 22px 0 0 17px; box-sizing: border-box; }
.sf-logo img { display: block; width: 139px; height: auto; }
.sf-logo-text { display: block; font: 700 20px/24px var(--sf-font); color: var(--sf-ink); }
.sf-nav { width: 60%; margin-top: 19px; display: flex; justify-content: center; }
.sf-nav a { display: block; padding: 13px 15px; font: 700 16px/16px var(--sf-font); text-transform: var(--sf-case); color: var(--sf-ink); white-space: nowrap; }
.sf-nav a:hover, .sf-mine:hover { color: var(--sf-accent); }
.sf-right { flex: none; display: flex; align-items: flex-start; }
.sf-mine { margin: 20px 22px 0 0; padding: 12px 4px; font: 700 16px/16px var(--sf-font); text-transform: var(--sf-case); color: var(--sf-ink); white-space: nowrap; }
.sf-cta { margin-top: 20px; display: inline-block; background: var(--sf-accent); color: #ffffff; font: 700 16px/16px var(--sf-font);
          text-transform: var(--sf-case); padding: 12px 24px; border-radius: var(--sf-radius); white-space: nowrap; }
.sf-cta:hover { background: #000000; }
.sf-burger, .sf-menu { display: none; }
.sf-burger { width: 28px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--sf-ink); }
.sf-burger span { display: block; height: 3px; background: currentColor; border-radius: 2px; margin: 0 0 8px; }
.sf-menu { height: 36px; padding: 0 12px; border: 1.5px solid var(--sf-ink); border-radius: 6px; background: #ffffff; color: var(--sf-ink); cursor: pointer;
           font: 700 13px/1 var(--sf-font); letter-spacing: .06em; text-transform: uppercase; align-items: center; }

/* ---- the phone menu, sliding in from the right ---- */
.sf-oc { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .6); }
.sf-oc[hidden] { display: none; }
.sf-ocpanel { position: absolute; top: 0; right: 0; bottom: 0; width: 80%; max-width: 365px; background: #ffffff; padding: 56px 0 24px 20px; box-sizing: border-box; overflow-y: auto; }
.sf-ocx { position: absolute; top: 8px; right: 10px; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: var(--sf-ink);
          display: flex; align-items: center; justify-content: center; }
.sf-ocnav { margin-right: 45px; }
.sf-ocnav a { display: block; font: 700 17px/17px var(--sf-font); letter-spacing: .03em; text-transform: var(--sf-case); padding: 15px 8px; border-bottom: 1px solid #eaeaea; color: var(--sf-ink); }
.sf-ocnav a:hover, .sf-ocmore a:hover { color: var(--sf-accent); }
.sf-ocmore { margin-top: 35px; }
.sf-ocmore a { display: block; font-size: 14px; color: var(--sf-muted); padding: 7px 0; }
.sf-ocsoc { margin-top: 35px; display: flex; gap: 15px; }
.sf-ocsoc .sf-soc { width: 28px; height: 28px; }

/* ---- the page head: photo, bar, title (the website's own inner pages) ---- */
.sf-hero { height: 320px; background: #eeeeee 50% 100% / cover no-repeat; }
.sf-title { padding: 80px 20px; text-align: center; }
.sf-bar { height: 110px; margin-bottom: 20px; display: flex; justify-content: center; }
.sf-bar span { width: 5px; height: 80px; margin-top: 15px; background: var(--sf-accent); }
.sf-title h1 { margin: 0; font: 700 30px/30px var(--sf-font); text-transform: var(--sf-case); color: var(--sf-ink); }
.sf-acct { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 28px; }
.sf-acct a, .sf-acct button { font: 700 14px/20px var(--sf-font); letter-spacing: .04em; text-transform: var(--sf-case); color: var(--sf-ink);
                              background: none; border: 0; padding: 0 0 4px; cursor: pointer; border-bottom: 2px solid transparent; }
.sf-acct a:hover { color: var(--sf-accent); }
.sf-acct a[aria-current="page"] { color: var(--sf-accent); border-bottom-color: var(--sf-accent); }
.sf-acct .sf-out { color: var(--sf-rule); }
.sf-content { max-width: 980px; margin: 25px auto 0; padding: 0 20px 80px; }
.sf-content.sf-narrow { max-width: 640px; }

/* ---- footer ---- */
.sf-foot { background: var(--sf-band); padding: 80px 0; }
.sf-frow1 { display: flex; justify-content: space-between; align-items: flex-start; }
.sf-flogo { padding-left: 17px; }
.sf-flogo img { display: block; width: 139px; height: auto; }
.sf-fcols { width: 759px; max-width: 100%; padding-bottom: 40px; display: grid; grid-template-columns: repeat(3, 232px); column-gap: 32px; row-gap: 24px; }
.sf-fh { margin: 0 0 10px; font: 700 12px/20px var(--sf-font); letter-spacing: .12em; text-transform: uppercase; color: var(--sf-label); }
.sf-fcols ul { list-style: none; margin: 0; padding: 0; }
.sf-fcols li { margin: 0 0 8px; line-height: 20px; }
.sf-fcols li a { font-size: 14px; line-height: 16px; color: var(--sf-ink); }
.sf-fcols li a:hover { color: var(--sf-accent); }
.sf-fmeta { grid-column: 1 / -1; margin-top: 4px; padding-top: 16px; border-top: 1px solid #e6e6e6; display: flex; flex-wrap: wrap; gap: 10px 28px;
            font-size: 13px; line-height: 20px; color: var(--sf-muted); }
.sf-fmeta a { color: var(--sf-accent); font-size: 14px; line-height: 16px; text-decoration: underline; }
.sf-fdiv { margin: 20px 0; padding: 15px 0; }
.sf-fdiv hr { margin: 0; border: 0; border-top: 1px solid var(--sf-rule); }
.sf-frow2 { display: flex; justify-content: space-between; align-items: center; }
.sf-socs { width: 27.413%; display: flex; gap: 8px; }
.sf-soc { width: 30px; height: 30px; border-radius: 50%; background: #000000; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sf-soc svg { width: 60%; height: 60%; }
.sf-pay { width: 30%; text-align: center; }
.sf-pay b { display: block; font: 700 12px/15.6px var(--sf-font); color: #000000; }
.sf-pay span { display: block; margin-top: 12px; font: 400 13px/18px var(--sf-font); color: var(--sf-muted); }
.sf-copy { width: 30%; text-align: right; font-size: 14px; line-height: 14px; color: #000000; }

/* ---- the page itself: the website's cards, headings, buttons and fields ----
   The component library marks its pieces (ui-card, ui-btn, ui-input … in _ui.html) and
   this is the only stylesheet that styles those marks — inside .sf, so the staff app
   never changes. The app's "dark accent" becomes the website's ink here, so every
   heading and link that was navy reads in the website's own text colour. */
.sf { --brand-dark-rgb: var(--sf-ink-rgb); }
.sf .ui-card { border-color: var(--sf-line); border-radius: 8px; box-shadow: none; }
.sf .ui-card-title, .sf .ui-h2 { font: 700 18px/20px var(--sf-font); text-transform: var(--sf-case); color: var(--sf-ink); }
.sf .sf-content h2.text-xl, .sf .sf-content h2.text-2xl { font: 700 18px/20px var(--sf-font); text-transform: var(--sf-case); color: var(--sf-ink); }
.sf .ui-eyebrow { font: 700 12px/20px var(--sf-font); letter-spacing: .12em; text-transform: uppercase; color: var(--sf-label); }
.sf .ui-btn { border-radius: var(--sf-radius); font: 700 14px/16px var(--sf-font); letter-spacing: .03em; text-transform: var(--sf-case); }
.sf .ui-btn.ui-sz-sm, .sf .ui-btn.ui-sz-md, .sf .ui-btn.ui-sz-lg { height: auto; min-height: 40px; padding: 12px 22px; }
.sf .ui-btn-primary { background: var(--sf-accent); color: #ffffff; }
.sf .ui-btn-primary:hover, .sf .ui-btn-primary:active { background: #000000; }
.sf .ui-btn-secondary { background: #ffffff; color: var(--sf-accent); border: 2px solid var(--sf-accent); }
.sf .ui-btn-secondary:hover, .sf .ui-btn-secondary:active { background: var(--sf-accent); color: #ffffff; }
.sf .ui-btn-link { color: var(--sf-accent); letter-spacing: 0; text-transform: none; font-weight: 700; }
.sf input.ui-input, .sf select.ui-input { height: 48px; border-color: #d9d9d9; border-radius: 4px; padding: 0 14px; font-size: 16px; }
.sf textarea.ui-input { border-color: #d9d9d9; border-radius: 4px; font-size: 16px; }
.sf .ui-label { font-size: 13px; line-height: 16px; font-weight: 400; color: var(--sf-muted); margin-bottom: 6px; }

/* ---- tablet ---- */
@media (max-width: 1024px) {
  .sf-header { margin-bottom: 0; }
  .sf-hwrap { height: 91px; padding: 10px 0; gap: 10px; }
  .sf-nav { display: none; }
  .sf-burger { display: block; margin-top: 29px; }
  .sf-logo { padding: 15px 0 0; width: calc((100% - 20px) * .25); }
  .sf-logo img { width: 75%; }
  .sf-cta, .sf-mine { margin-top: 21px; }
  .sf-title { padding: 50px 20px; }
  .sf-foot { padding: 50px 0; }
  .sf-soc { width: 25px; height: 25px; }
}

/* ---- phone ---- */
@media (max-width: 767px) {
  .sf-box { width: calc(100% - 20px); }
  .sf-header .sf-box { width: auto; }
  .sf-hwrap { height: 68px; padding: 11px 16px; }
  .sf-burger, .sf-right { display: none; }
  .sf-logo { width: auto; padding: 0; margin: 3px auto 0 0; }
  .sf-logo img { width: 108px; }
  .sf-menu { display: inline-flex; align-self: center; }
  .sf-hero { height: 190px; }
  .sf-title { padding: 50px 10px; }
  .sf-content { padding: 0 16px 50px; }
  .sf-frow1 { flex-direction: column; gap: 20px; }
  .sf-flogo { padding-left: 6px; }
  .sf-flogo img { width: 108px; }
  .sf-fcols { width: 100%; padding-bottom: 30px; grid-template-columns: 143fr 195fr; }
  .sf-fcols > div:nth-child(3) { grid-column: 1 / -1; }
  .sf-frow2 { flex-direction: column; gap: 20px; }
  .sf-socs { width: auto; gap: 15px; }
  .sf-soc { width: 26px; height: 26px; }
  .sf-pay, .sf-copy { width: auto; text-align: center; }
}