/* ============================================================
   Lyyti Salesforce Knowledge — brand styles
   Source: Lyyti Brandbook 2021 (Typography + Colours sections)

   How to use:
   1. Salesforce Setup → Static Resources → New → upload this file
      as a Static Resource named "LyytiKnowledgeBranding".
      Cache Control: Public.
   2. Experience Builder → Theme → Settings → "Edit CSS"
      OR
      Reference the Static Resource via the Branding panel's
      "CSS Override" or by injecting a <link> via Custom Code.
   3. Publish.

   This stylesheet:
   - Imports Poppins from Google Fonts (Brandbook system typeface)
   - Applies Brandbook headings + body sizes
   - Sets brand colours for text, links, buttons
   - Uses 8-point grid spacing
   ============================================================ */

/* --- 1. Font import: Poppins ---------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,700;1,400;1,700&display=swap");


/* --- 2. CSS variables: brand palette + scale ------------------ */

:root {
  /* Baltic Sea (primary palette) */
  --lyyti-logo:         #045B56;
  --lyyti-text:         #11302E;
  --lyyti-action:       #07A8A0;
  --lyyti-action-dark:  #05756F;
  --lyyti-mint:         #BFEDE4;

  /* Neutrals */
  --lyyti-bg:           #FCF8F3;   /* Sand */
  --lyyti-bg-card:      #FFFFFF;
  --lyyti-muted:        #7A8389;
  --lyyti-divider:      #E3E6E9;

  /* Accents */
  --lyyti-sky:          #CDF2F4;
  --lyyti-sun:          #FEE095;
  --lyyti-sunset:       #F3AF77;
  --lyyti-coral:        #F2828B;

  /* Type scale (Brandbook 2021 §2 Typography) */
  --lyyti-h1: 4rem;       /* 64 px – Heading XL */
  --lyyti-h2: 3rem;       /* 48 px – Heading MD */
  --lyyti-h3: 2.25rem;    /* 36 px – Heading SM */
  --lyyti-h4: 1.875rem;   /* 30 px – Heading XS */
  --lyyti-h5: 1.375rem;   /* 22 px – Heading XXS */
  --lyyti-h6: 1.125rem;   /* 18 px – Heading XXXS */
  --lyyti-body: 1rem;     /* 16 px */
  --lyyti-small: 0.875rem;/* 14 px */
}


/* --- 3. Global typography ------------------------------------- */

body,
.siteforceContentArea,
.cb-section,
.uiOutputRichText {
  font-family: "Poppins", "Helvetica", "Arial", sans-serif !important;
  font-size: var(--lyyti-body);
  line-height: 1.5;
  color: var(--lyyti-text);
  background-color: var(--lyyti-bg);
}


/* --- 4. Headings (sentence case per Brandbook guideline) ----- */

h1, .slds-text-heading_large, .uiOutputRichText h1 {
  font-family: "Poppins", "Helvetica", "Arial", sans-serif !important;
  font-size: var(--lyyti-h1);
  line-height: 1.37;
  font-weight: 700;
  color: var(--lyyti-text);
  margin: 0 0 1.5rem 0;
}

h2, .slds-text-heading_medium, .uiOutputRichText h2 {
  font-family: "Poppins", "Helvetica", "Arial", sans-serif !important;
  font-size: var(--lyyti-h2);
  line-height: 1.41;
  font-weight: 700;
  color: var(--lyyti-text);
  margin: 2.5rem 0 1rem 0;
}

h3, .slds-text-heading_small, .uiOutputRichText h3 {
  font-family: "Poppins", "Helvetica", "Arial", sans-serif !important;
  font-size: var(--lyyti-h3);
  line-height: 1.5;
  font-weight: 700;
  color: var(--lyyti-text);
  margin: 2rem 0 0.75rem 0;
}

h4, .uiOutputRichText h4 {
  font-family: "Poppins", "Helvetica", "Arial", sans-serif !important;
  font-size: var(--lyyti-h4);
  line-height: 1.6;
  font-weight: 700;
  color: var(--lyyti-text);
  margin: 1.5rem 0 0.5rem 0;
}

h5, .uiOutputRichText h5 {
  font-family: "Poppins", "Helvetica", "Arial", sans-serif !important;
  font-size: var(--lyyti-h5);
  line-height: 1.56;
  font-weight: 600;
  color: var(--lyyti-text);
  margin: 1rem 0 0.5rem 0;
}

h6, .uiOutputRichText h6 {
  font-family: "Poppins", "Helvetica", "Arial", sans-serif !important;
  font-size: var(--lyyti-h6);
  line-height: 1.68;
  font-weight: 600;
  color: var(--lyyti-text);
  margin: 1rem 0 0.5rem 0;
}


/* --- 5. Body text & lists ------------------------------------- */

p, li, .uiOutputRichText p, .uiOutputRichText li {
  font-size: var(--lyyti-body);
  line-height: 1.5;
  color: var(--lyyti-text);
  margin: 0 0 1rem 0;
}

ul, ol {
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.5rem;
}

small, .lyyti-small {
  font-size: var(--lyyti-small);
  color: var(--lyyti-muted);
}


/* --- 6. Links ------------------------------------------------- */

a,
.uiOutputRichText a,
.forceCommunityHeaderMenuListItem a {
  color: var(--lyyti-action-dark);
  text-decoration: none;
  font-weight: 500;
}

a:hover,
a:focus,
.uiOutputRichText a:hover {
  color: var(--lyyti-logo);
  text-decoration: underline;
}


/* --- 7. Buttons ----------------------------------------------- */

.slds-button_brand,
.slds-button--brand,
.cb-section button[type="submit"],
.forceCommunityHeaderMenu .slds-button {
  background-color: var(--lyyti-logo) !important;
  border-color: var(--lyyti-logo) !important;
  color: #FFFFFF !important;
  font-family: "Poppins", "Helvetica", "Arial", sans-serif !important;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
}

.slds-button_brand:hover,
.slds-button--brand:hover {
  background-color: var(--lyyti-action-dark) !important;
  border-color: var(--lyyti-action-dark) !important;
}

.slds-button_neutral {
  background-color: #FFFFFF;
  border-color: var(--lyyti-action-dark);
  color: var(--lyyti-action-dark);
  border-radius: 8px;
}


/* --- 8. Cards, sections, dividers ----------------------------- */

.cb-section,
.forceCommunitySection {
  background-color: var(--lyyti-bg-card);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 1.5rem;
}

hr, .slds-divider {
  border: 0;
  border-top: 1px solid var(--lyyti-divider);
  margin: 2rem 0;
}


/* --- 9. Article-specific tweaks (Knowledge content) ----------- */

.knowledgeArticle .article-title,
.knowledgeArticle h1 {
  font-size: var(--lyyti-h1);
  line-height: 1.37;
  margin-bottom: 2rem;
}

.knowledgeArticle .article-body p,
.uiOutputRichText p {
  font-size: var(--lyyti-body);
  line-height: 1.6;
  max-width: 70ch;     /* parempi luettavuus pitkillä tekstirivillä */
}

.knowledgeArticle blockquote {
  border-left: 4px solid var(--lyyti-action);
  background-color: var(--lyyti-mint);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--lyyti-text);
  border-radius: 0 8px 8px 0;
}

.knowledgeArticle code,
.knowledgeArticle pre {
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  background-color: var(--lyyti-divider);
  color: var(--lyyti-text);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.875rem;
}

.knowledgeArticle pre {
  padding: 1rem;
  overflow-x: auto;
  background-color: #F9FAFB;
}


/* --- 10. Header / nav (Experience site chrome) ---------------- */

.forceCommunityHeaderMenu,
.communityHeader {
  background-color: var(--lyyti-logo) !important;
  font-family: "Poppins", "Helvetica", "Arial", sans-serif !important;
}

.forceCommunityHeaderMenu a {
  color: #FFFFFF !important;
}


/* --- 11. Search box ------------------------------------------- */

.forceCommunityGlobalSearchBox input,
.cb-search input[type="text"] {
  font-family: "Poppins", "Helvetica", "Arial", sans-serif;
  font-size: var(--lyyti-body);
  border: 1px solid var(--lyyti-divider);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--lyyti-text);
}

.forceCommunityGlobalSearchBox input:focus,
.cb-search input[type="text"]:focus {
  border-color: var(--lyyti-action);
  outline: none;
  box-shadow: 0 0 0 3px rgba(7, 168, 160, 0.2);
}


/* --- 12. Responsive --- ---------------------------------------- */

@media (max-width: 768px) {
  :root {
    --lyyti-h1: 2.5rem;     /* 40 px mobiilissa */
    --lyyti-h2: 2rem;       /* 32 px */
    --lyyti-h3: 1.5rem;     /* 24 px */
  }

  .cb-section,
  .forceCommunitySection {
    padding: 1.5rem;
  }
}