/* ==========================================================================
   Design tokens — Street Sense Daily Help Center
   --------------------------------------------------------------------------
   Every token is declared as   var(--dxp-*, <fallback>)   on purpose.

   `--dxp-*` is the Experience Cloud / LWR branding namespace. When this design
   is deployed as an LWR site, the theme's Branding Set supplies the --dxp-*
   values and this stylesheet inherits them automatically. Running the
   prototype standalone (no Salesforce), the fallbacks kick in and you see the
   intended design. That means: zero colour rewrites at port time.

   Salesforce branding panel  ->  token
     Accent                   ->  --dxp-g-brand
     Site background          ->  --dxp-g-root
     Text                     ->  --dxp-g-root-contrast
     Header font / Body font  ->  --dxp-s-*-font-family
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- brand -----------------------------------------------------------
     Marketing site (streetsensedaily.com): charcoal editorial + amber accent.
     Links/accents use --ssd-brand; buttons and the hero/body divider use --ssd-cta. */
  --ssd-brand:            var(--dxp-g-brand, #c8a259);
  --ssd-brand-strong:     var(--dxp-g-brand-1, #b08f3f);
  --ssd-brand-stronger:   var(--dxp-g-brand-2, #8f6f28);
  --ssd-brand-contrast:   var(--dxp-g-brand-contrast, #0a0a0a);
  --ssd-brand-tint:       color-mix(in srgb, var(--ssd-brand) 12%, transparent);
  --ssd-brand-tint-2:     color-mix(in srgb, var(--ssd-brand) 22%, transparent);

  /* amber CTA / divider */
  --ssd-cta:              #c8a259;
  --ssd-cta-strong:       #b08f3f;
  --ssd-cta-contrast:     #0a0a0a;
  --ssd-support-cta-bg:   #c8a259;

  /* market semantics — this is a trading brand, up/down carry meaning */
  --ssd-up:               #16a34a;
  --ssd-down:             #dc2626;

  /* ---- logo ------------------------------------------------------------ */
  --ssd-logo-accent:      #c8a259;
  --ssd-logo-ink-on-dark: #ffffff;
  --ssd-logo-ink:         #0a0a0a;

  /* ---- surfaces -------------------------------------------------------
     Fixed light values — do NOT map to --dxp-g-root. Experience Branding
     often sets Site Background to dark (for the hero), which would turn the
     whole light body dark and leave dark text unreadable. Accent still
     follows --dxp-g-brand. */
  --ssd-bg:               #ffffff;
  --ssd-bg-sunken:        #f4f4f2;
  --ssd-bg-raised:        #ffffff;
  --ssd-bg-inset:         #ebebe8;

  /* charcoal band (hero + footer) — Street Sense Daily editorial */
  --ssd-ink:              #121212;
  --ssd-ink-2:            #0a0a0a;
  --ssd-ink-3:            #2a2a2a;

  /* ---- text -----------------------------------------------------------
     Do NOT map body text to --dxp-g-root-contrast. Builder themes often set
     contrast to white (for dark chrome); that washes out the light body bands.
     Light / dark values are also written inline by ssdHelpHeader.applyTheme(). */
  --ssd-text:             #121212;
  --ssd-text-muted:       #4a4a4a;
  --ssd-text-subtle:      #6b6b6b;
  --ssd-text-on-ink:      #f5f5f0;
  --ssd-text-on-ink-mute: #a8a8a0;

  /* ---- lines ---------------------------------------------------------- */
  --ssd-border:           #dfe6ee;
  --ssd-border-strong:    #c4d0dd;
  --ssd-border-faint:     #edf1f6;

  /* ---- radius --------------------------------------------------------- */
  --ssd-r-sm: 8px;
  --ssd-r-md: 12px;
  --ssd-r-lg: 16px;
  --ssd-r-xl: 22px;
  --ssd-r-pill: 999px;

  /* ---- elevation ------------------------------------------------------ */
  --ssd-shadow-1: 0 1px 2px rgba(16, 31, 49, .06), 0 1px 3px rgba(16, 31, 49, .04);
  --ssd-shadow-2: 0 2px 4px rgba(16, 31, 49, .05), 0 8px 20px -6px rgba(16, 31, 49, .10);
  --ssd-shadow-3: 0 4px 8px rgba(16, 31, 49, .06), 0 18px 40px -12px rgba(16, 31, 49, .18);
  --ssd-shadow-brand: 0 10px 30px -10px color-mix(in srgb, var(--ssd-brand) 55%, transparent);

  /* ---- type ----------------------------------------------------------- */
  /* --dxp-s-html-font-family is the documented "Base Font Family" hook.
     Headings follow the --dxp-s-<level>-font-family pattern. */
  --ssd-font-body: var(--dxp-s-html-font-family,
    "Source Sans 3", "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
  --ssd-font-head: var(--dxp-s-text-heading-large-font-family,
    "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif);
  --ssd-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --ssd-fs-display: clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem);
  --ssd-fs-h1:      clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --ssd-fs-h2:      clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
  --ssd-fs-h3:      1.125rem;
  --ssd-fs-body:    1rem;
  --ssd-fs-sm:      .875rem;
  --ssd-fs-xs:      .78rem;

  --ssd-lh-tight: 1.15;
  --ssd-lh-snug:  1.35;
  --ssd-lh-body:  1.7;

  /* ---- layout --------------------------------------------------------- */
  --ssd-maxw: 1240px;
  --ssd-maxw-prose: 74ch;
  --ssd-gutter: clamp(1rem, .4rem + 2.2vw, 2.5rem);
  --ssd-header-h: 68px;

  /* ---- motion --------------------------------------------------------- */
  --ssd-ease: cubic-bezier(.22, .61, .36, 1);
  --ssd-dur: 180ms;
}

/* ---------------------------------------------------------------- dark ---- */

:root[data-theme="dark"],
html[data-theme="dark"] {
  --ssd-logo-ink:      var(--ssd-logo-ink-on-dark);
  --ssd-bg:            #0a0a0a;
  --ssd-bg-sunken:     #121212;
  --ssd-bg-raised:     #1a1a1a;
  --ssd-bg-inset:      #222222;

  --ssd-text:          #f5f5f0;
  --ssd-text-muted:    #b0b0a8;
  --ssd-text-subtle:   #8a8a82;

  --ssd-border:        #333333;
  --ssd-border-strong: #444444;
  --ssd-border-faint:  #1f1f1f;

  --ssd-brand:         #dbb43a;
  --ssd-brand-strong:  #e8c65a;
  --ssd-brand-stronger:#f0d57a;
  --ssd-cta:           #dbb43a;
  --ssd-cta-strong:    #e8c65a;
  --ssd-cta-contrast:  #0a0a0a;
  --ssd-support-cta-bg:#1a1a1a;

  --ssd-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --ssd-shadow-2: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 20px -6px rgba(0, 0, 0, .5);
  --ssd-shadow-3: 0 4px 8px rgba(0, 0, 0, .35), 0 18px 40px -12px rgba(0, 0, 0, .6);
}

/* Dark mode only via [data-theme="dark"] (header toggle). Do not follow
   prefers-color-scheme — Experience Preview often reports dark and washes out
   the intended light body under the dark hero. */

/* Loaded via Experience Builder Head Markup so --ssd-* inherit into LWC shadow DOM.
   Surfaces follow --ssd-bg so the header theme toggle (data-theme) flips them. */
html {
  color-scheme: light;
  background: var(--ssd-bg, #ffffff);
  /* Experience Branding often sets Heading 1–6 to white (for dark chrome).
     Map them to --ssd-text so light body headings stay readable. Dark hero
     titles still use explicit on-ink colors in component CSS. */
  --dxp-s-text-heading-extra-large-color: var(--ssd-text, #0f1a24);
  --dxp-s-text-heading-large-color: var(--ssd-text, #0f1a24);
  --dxp-s-text-heading-medium-color: var(--ssd-text, #0f1a24);
  --dxp-s-text-heading-small-color: var(--ssd-text, #0f1a24);
  --dxp-s-text-heading-extra-small-color: var(--ssd-text, #0f1a24);
  --dxp-s-text-heading-extra-extra-small-color: var(--ssd-text, #0f1a24);
  --dxp-s-body-text-color: var(--ssd-text, #0f1a24);
  --dxp-s-body-small-text-color: var(--ssd-text-muted, #4a5d73);
}
html[data-theme='dark'] {
  color-scheme: dark;
}
body {
  margin: 0;
  font-family: var(--ssd-font-body);
  color: var(--ssd-text, #0f1a24) !important;
  background: var(--ssd-bg, #ffffff) !important;
}
/* Soften default Experience/SLDS page chrome when our components own the design */
.comm-page-home,
.siteforceThemeLayoutContainer,
.ui-widget,
.forceCommunitySection,
.cb-section {
  background: var(--ssd-bg, #ffffff) !important;
  color: var(--ssd-text, #0f1a24) !important;
}
/* Light-DOM headings outside LWC shadow (Builder text blocks, etc.) */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  color: var(--ssd-text, #0f1a24);
}

/* Full-bleed home: kill LWR section/column gutters that inset header + hero */
.comm-page-home .slds-col,
.comm-page-home .cb-section,
.comm-page-home .cb-section_row,
.comm-page-home .cb-section_column,
.comm-page-home .forceCommunitySection,
.comm-page-home .forceCommunitySection__content,
.comm-page-home .ui-widget,
.siteforceContentArea .comm-layout-column,
.siteforceContentArea .slds-large-size_12-of-12,
.siteforceContentArea .slds-col,
.forceCommunityThemeNav,
body .siteforceThemeLayoutStarter,
body .comm-layout-column {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

/* Some LWR themes wrap the main slot in a constrained content width */
.siteforceContentArea,
.forceCommunitySection,
.cb-section {
  max-width: none !important;
  width: 100% !important;
}

.stt-shell {
  width: min(100% - 2 * var(--ssd-gutter), var(--ssd-maxw));
  margin-inline: auto;
}