/* ==========================================================================
   Beverly Rockstar — DESIGN TOKENS
   ========================================================================== */
:root {
  /* ---- COLOR: CORE ---- */
  --cb-black:        #0A0A0A;
  --cb-ink:          #16181D;
  --cb-white:        #FFFFFF;
  --cb-paper:        #F5F3EE;
  --cb-paper-soft:   #FAFAF8;
  /* ---- COLOR: NEUTRAL GRAY SCALE ---- */
  --cb-gray-900:     #1A1A1A;
  --cb-gray-700:     #4A4A4A;
  --cb-gray-600:     #55595E;
  --cb-gray-500:     #6E6E6E;
  --cb-gray-400:     #9A9A9A;
  --cb-gray-200:     #E4E4E2;
  --cb-gray-100:     #EFEEEA;

  /* =========================================================================
     TYPE SCALE — REVISED
     Headings pushed larger for more presence; body/caption text pulled
     down to a tighter, quieter 11px so it reads as considered supporting
     text rather than competing with headlines for attention. This is the
     scale contrast international editorial sites lean on: big, confident
     headlines against small, restrained body copy.
     ========================================================================= */
  --cb-text-display: clamp(60px, 8.5vw, 152px);   /* was 56–140px */
  --cb-text-h1:      clamp(48px, 6vw, 84px);       /* was 44–76px */
  --cb-text-h2:      clamp(34px, 4vw, 56px);       /* was 32–50px */
  --cb-text-h3:      30px;                          /* was 28px */
  --cb-text-body-lg: 13px;                          /* was 12px — now distinct from body */
  --cb-text-body:    11px;                          /* was 12px */
  --cb-text-label:   10px;                          /* was 11px */
  --cb-text-caption: 10px;                          /* was 11px */

  --cb-weight-regular:  400;
  --cb-weight-medium:   500;
  --cb-weight-semibold: 600;
  --cb-weight-bold:     700;

  --cb-tracking-tight:  -0.02em;
  --cb-tracking-normal:  0em;
  --cb-tracking-wide:    0.08em;
  --cb-tracking-widest:  0.14em;

  --cb-leading-tight: 1.1;
  --cb-leading-body:  1.6;

  /* ---- SPACING SCALE (4px base) ---- */
  --cb-space-1:  4px;
  --cb-space-2:  8px;
  --cb-space-3:  12px;
  --cb-space-4:  16px;
  --cb-space-5:  20px;
  --cb-space-6:  24px;
  --cb-space-8:  32px;
  --cb-space-10: 40px;
  --cb-space-12: 48px;
  --cb-space-16: 64px;
  --cb-space-20: 80px;
  --cb-space-24: 96px;

  --cb-section-padding-y: clamp(64px, 9vw, 140px);
  --cb-section-padding-x: clamp(20px, 5vw, 64px);

  /* ---- LAYOUT ---- */
  --cb-content-max:    1200px;
  --cb-content-wide:   1400px;
  --cb-content-narrow: 720px;

  /* Max-width specifically for body text blocks (paragraphs, descriptions)
     so long-form copy never stretches to an unreadable line length,
     regardless of how wide its parent container is. ~65–75 characters
     per line is the readable target editorial sites hold to. */
  --cb-text-max-width: 620px;

  /* ---- RADIUS SCALE ---- */
  --cb-radius-sm:   4px;
  --cb-radius-md:   8px;
  --cb-radius-lg:   14px;
  --cb-radius-xl:   20px;
  --cb-radius-full: 999px;

  /* ---- MOTION ---- */
  --cb-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --cb-ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --cb-duration-fast: 0.15s;
  --cb-duration-base: 0.25s;
  --cb-duration-slow: 0.4s;

  /* ---- BUTTON SYSTEM ---- */
  --cb-btn-height:    48px;
  --cb-btn-padding-x: 24px;
  --cb-btn-radius:    var(--cb-radius-md);
}
:where(:root) {
  --cb-space-1: 0.25rem;
  --cb-space-2: 0.5rem;
  --cb-space-3: 0.75rem;
  --cb-space-4: 1rem;
  --cb-space-5: 1.5rem;
  --cb-space-6: 2rem;
  --cb-space-7: 3rem;
  --cb-space-8: 4rem;
  --cb-space-9: 6rem;

  --cb-text-display: clamp(2.375rem, 5.5vw, 5.75rem);
  --cb-text-ui: 0.875rem;
  --cb-text-meta: 0.75rem;
  --cb-leading-display: 1.06;
  --cb-leading-heading: 1.2;
  --cb-leading-body: 1.65;

  --cb-surface-raised: #111111;
  --cb-border-subtle: #303030;
  --cb-text-secondary: #b3b3b3;
  --cb-text-tertiary: #929292;

  --cb-border-width: 1px;
  --cb-focus-width: 2px;
  --cb-control-size: 2.75rem;
  --cb-icon-size: 1rem;
  --cb-icon-stroke: 1.5;
  --cb-measure-heading: 17ch;
  --cb-measure-copy: 46ch;
  --cb-preview-height: clamp(24rem, 65svh, 44rem);

  --cb-duration-fast: 180ms;
  --cb-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
}
html {
  scroll-behavior: smooth;
}
/* ---- BASE TYPOGRAPHY CLASSES ---- */
.cb-display { font-size: var(--cb-text-display); font-weight: var(--cb-weight-medium); letter-spacing: var(--cb-tracking-tight); line-height: var(--cb-leading-tight); }
.cb-h1      { font-size: var(--cb-text-h1);      font-weight: var(--cb-weight-medium); letter-spacing: var(--cb-tracking-tight); line-height: var(--cb-leading-tight); }
.cb-h2      { font-size: var(--cb-text-h2);      font-weight: var(--cb-weight-medium); letter-spacing: var(--cb-tracking-tight); line-height: var(--cb-leading-tight); }
.cb-h3      { font-size: var(--cb-text-h3);      font-weight: var(--cb-weight-semibold); line-height: var(--cb-leading-tight); }
.cb-body-lg { font-size: var(--cb-text-body-lg); font-weight: var(--cb-weight-regular); line-height: var(--cb-leading-body); }
.cb-body    { font-size: var(--cb-text-body);    font-weight: var(--cb-weight-regular); line-height: var(--cb-leading-body); }
.cb-label   { font-size: var(--cb-text-label);   font-weight: var(--cb-weight-semibold); letter-spacing: var(--cb-tracking-normal); font-style: italic; }
.cb-caption { font-size: var(--cb-text-caption); font-weight: var(--cb-weight-regular); color: var(--cb-gray-500); }

/* Utility for constraining any paragraph/body block to a readable
   line length — apply this class (or use --cb-text-max-width directly)
   on long-form copy anywhere it currently has no explicit max-width. */
.cb-prose {
  max-width: var(--cb-text-max-width);
}
/* =========================================================================
   GLOBAL FIX: widen "-head" container max-widths — CORRECTED SELECTOR.
   Was using [class*="-head"] (contains "-head" anywhere in the class
   attribute), which accidentally matched "cb-site-header-bar" and other
   header.html classes too, since "-header-" contains the substring
   "-head-". Switched to [class$="-head"] (class attribute ends with
   "-head" exactly) so it only matches the intended section-head
   containers (cb-svc-head, cb-sc-head, cb-pricing-head, etc.) and
   never touches anything in header.html.
   ========================================================================= */
@media (min-width: 701px) {
  [class$="-head"] {
    max-width: 900px !important;
  }
}
/* ---- BUTTON SYSTEM ---- */
.cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--cb-btn-height);
  padding: 0 var(--cb-btn-padding-x);
  border-radius: var(--cb-btn-radius);
  font-size: var(--cb-text-label);
  font-weight: var(--cb-weight-semibold);
  letter-spacing: var(--cb-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--cb-duration-base) var(--cb-ease-standard),
              color var(--cb-duration-base) var(--cb-ease-standard),
              border-color var(--cb-duration-base) var(--cb-ease-standard),
              transform var(--cb-duration-fast) var(--cb-ease-out);
}
.cb-btn:focus-visible { outline: 2px solid var(--cb-white); outline-offset: 2px; }
.cb-btn-primary { background: var(--cb-white); color: var(--cb-black); }
.cb-btn-primary:hover { background: var(--cb-gray-100); transform: translateY(-1px); }
.cb-btn-dark { background: var(--cb-ink); color: var(--cb-white); }
.cb-btn-dark:hover { background: var(--cb-black); }
.cb-btn-secondary { background: transparent; color: var(--cb-white); border-color: rgba(255, 255, 255, 0.3); }
.cb-btn-secondary:hover { border-color: var(--cb-white); background: rgba(255, 255, 255, 0.06); }
.cb-btn-text {
  height: auto;
  padding: 0;
  border-radius: 0;
  color: var(--cb-white);
  gap: var(--cb-space-2);
  text-underline-offset: 4px;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--cb-duration-base) var(--cb-ease-standard),
              gap var(--cb-duration-base) var(--cb-ease-standard);
}
.cb-btn-text:hover { text-decoration-color: var(--cb-white); gap: var(--cb-space-3); }

/* =========================================================================
   SECTION CTA — final version. Every property forced with !important
   to guarantee it wins over any leftover/duplicate rule from earlier
   edits still sitting elsewhere in this file.
   ========================================================================= */
.cb-section-cta {
  display: inline-block !important;
  background: none !important;
  padding: 0 !important;
  margin: 48px 0 0 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: var(--cb-text-h3) !important;
  font-weight: var(--cb-weight-medium) !important;
  letter-spacing: var(--cb-tracking-normal) !important;
  text-transform: none !important;
  text-decoration: underline !important;
  text-underline-offset: 6px !important;
  text-decoration-thickness: 1px !important;
  cursor: pointer !important;
  transition: opacity var(--cb-duration-base) var(--cb-ease-standard) !important;
}
.cb-section-cta::after,
.cb-section-cta::before {
  content: none !important;
  display: none !important;
}
.cb-section-cta:hover {
  opacity: 0.7 !important;
  transform: none !important;
}
.cb-section-cta.on-dark {
  color: var(--cb-white) !important;
  text-decoration-color: rgba(255, 255, 255, 0.4) !important;
}
.cb-section-cta.on-dark:hover {
  text-decoration-color: var(--cb-white) !important;
}
.cb-section-cta.on-light {
  color: var(--cb-black) !important;
  text-decoration-color: rgba(10, 10, 10, 0.35) !important;
}
.cb-section-cta.on-light:hover {
  text-decoration-color: var(--cb-black) !important;
}
.cb-section-cta.centered {
  display: table !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- GLOBAL: EYEBROWS ALWAYS NORMAL CASE ---- */
[class*="eyebrow"] {
  text-transform: none !important;
  letter-spacing: var(--cb-tracking-normal) !important;
}

/* ---- GLOBAL: BODY-STYLE PARAGRAPHS CONSTRAINED TO A READABLE WIDTH ----
   Applies to any plain <p> that hasn't already been given its own
   explicit max-width by a section's own CSS (section styles loaded
   after this file will still win if they set their own value). */
p {
  max-width: var(--cb-text-max-width);
}

@media (max-width: 700px) {
  .cb-section-cta {
    margin-top: 36px !important;
    font-size: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* ---------------------------------------------------------------
   BLOG POST WIDTH + HEADING OVERRIDE — !important is required here
   because each post file's own <style> block (loaded after
   tokens.css) still contains the original narrow-width rules.
   Without !important, those later, equal-specificity rules would
   keep winning the cascade regardless of what's set here.
   --------------------------------------------------------------- */
.cb-post-meta-row,
.cb-post-h1,
.cb-post-dek,
.cb-post-body,
.cb-post-byline,
.cb-post-cta-wrap {
  max-width: 820px !important;
}

/* Subheadings inside post body (e.g. "The kitchen and the menu
   finally agree") were locked to a small fixed 30px. Now uses the
   same responsive heading scale as homepage section titles. */
.cb-post-body h2 {
  font-size: var(--cb-text-h2) !important;
  line-height: 1.15 !important;
}
/* ---------------------------------------------------------------
   BLOG POST HERO IMAGE — was wider than the text column (1200px
   vs. the 820px text width), making it visually mismatched.
   Matched to the same 820px width, and shortened on desktop for a
   less tall crop.
   --------------------------------------------------------------- */
.cb-post-hero-img-wrap {
  max-width: 820px !important;
  aspect-ratio: 16 / 6 !important;
}