/*
 * Corilus Customer Portal (LWR) - global styles
 *
 * Brand values ported from the Aura site "My Corilus Customer Portal":
 *   - colours and fonts      -> experiences/My_Corilus_Customer_Portal1/brandingSets/jepson.json
 *   - layout and nav colours -> aura/MyCorilusTheme/MyCorilusTheme.css
 *
 * Most of the palette lives in the branding set (Build_Your_Own_LWR), not here.
 * This file covers what branding tokens cannot express: web fonts, the page
 * container, the navigation palette, and the login background.
 *
 * The branding set SiteLogo token is left empty on purpose: it wants a CMS
 * content reference, not a URL, and rejects the /file-asset/ path the Aura
 * site used. corilusThemeLayout renders the logo instead.
 */

/*
 * Fonts come from static resources, not Google Fonts, matching the @font-face
 * rules in the Aura theme's customCSS (themes/jepson.json). No external host
 * and no CSP trusted site needed.
 *
 * The URL needs the site path prefix. Probed against the live Aura site:
 *
 *   /customers/sfsites/c/resource/Amiko    200 application/font-woff  91580
 *   /sfsites/c/resource/Amiko              200 text/html               1704  <- error page
 *
 * So the bare /sfsites/... form the Aura theme used never actually loaded the
 * fonts; it silently fell through to the fallback stack. Each face therefore
 * lists the LWR prefix first, then /customers for after the cutover, then the
 * domain-root forms. A comma-separated src list does fall back, which is why
 * this works where the Aura version (two @font-face rules per family) could not.
 */
@font-face {
  font-family: "Amiko";
  src: url("/customerportalvforcesite/sfsites/c/resource/Amiko") format("woff"),
    url("/customers/sfsites/c/resource/Amiko") format("woff"),
    url("/sfsites/c/resource/Amiko") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Crete Round";
  src: url("/customerportalvforcesite/sfsites/c/resource/CreteRound2")
      format("woff"),
    url("/customers/sfsites/c/resource/CreteRound2") format("woff"),
    url("/sfsites/c/resource/CreteRound2") format("woff");
  font-display: swap;
}

:root {
  /*
     * Font fallbacks. The branding set font tokens reject commas, so BaseFont
     * is the bare string "Amiko" and the heading tokens are "Crete Round".
     * These two lines restore a real fallback stack. Confirm in Experience
     * Builder that they are not overridden by the branding stylesheet.
     */
  --dxp-g-root-font-family: Amiko, "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  --dxp-s-html-font-family: Amiko, "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  /* Corilus palette. Two greens are in use on the Aura site and both are kept:
       --corilus-green is the branding ActionColor, --corilus-green-nav is the
       brighter green MyCorilusTheme.css uses for navigation hover only. */
  --corilus-green: #57c1a5;
  --corilus-green-dark: #40af92;
  --corilus-green-nav: #00bda5;
  --corilus-green-tint: #e6f9f5;

  --corilus-blue: #0088a4;
  --corilus-blue-dark: #00667b;

  --corilus-text: #333333;
  --corilus-text-muted: #666666;
  --corilus-nav-text: #6d6d6d;
  --corilus-border: #d4d4d4;

  --corilus-page-bg: #ffffff;
  --corilus-login-bg: #f4f4f4;

  /* MyCorilusTheme.css: .pageContainer 1440px, .header 1294px, logo 143x50 */
  --corilus-page-width: 1440px;
  --corilus-header-width: 1294px;
  --corilus-header-padding: 16px;
  --corilus-logo-width: 143px;
  --corilus-logo-height: 50px;
}

/*
 * Text on the brand green is white, as on the Aura site. The branding set has
 * no token for this: it derives --dxp-g-brand-contrast from the brand colour and,
 * #57C1A5 being light, picks #072B24. The branding ButtonTextColor tokens cover
 * buttons that read --dxp-s-button-color-contrast; standard components such as
 * community_login:checkEmail read the brand contrast directly. html:root outranks
 * the branding set's own :root rule.
 */
html:root {
  --dxp-g-brand-contrast: #ffffff;
  --dxp-g-brand-contrast-1: #ffffff;
}

html,
body {
  height: 100%;
}

html {
  background: var(--corilus-page-bg);
}

body {
  margin: 0;
}

/*
 * Page container. The branding set caps content at 1440px via
 * MaxContentWidthDesktop; this class is for regions the theme layout owns
 * (header, footer) which sit outside that cap.
 */
.corilus-page-container {
  width: var(--corilus-page-width);
  max-width: 100%;
  margin-inline: auto;
}

.corilus-header-container {
  width: var(--corilus-header-width);
  max-width: 100%;
  margin-inline: auto;
  padding: var(--corilus-header-padding);
  box-sizing: border-box;
}

/*
 * corilusThemeLayout renders the logo as a real <img>, with the src built from
 * @salesforce/community/basePath. A stylesheet cannot read the site prefix and
 * ContentAsset URLs only resolve under it, so this class carries the box only
 * and does not try to fetch the image.
 */
.corilus-logo {
  display: block;
  width: var(--corilus-logo-width);
  height: var(--corilus-logo-height);
  max-width: 100%;
  object-fit: contain;
}

/*
 * Navigation palette, from the .cMyCorilusTheme rules in MyCorilusTheme.css.
 * Those rules targeted the Aura community_navigation component, which does not
 * exist in LWR. The colours are kept here as variables plus a generic rule set
 * so the LWR theme layout can adopt them without rediscovering the values.
 */
.corilus-nav a,
.corilus-nav button {
  color: var(--corilus-nav-text);
  background: transparent;
  text-decoration: none;
}

.corilus-nav a:hover,
.corilus-nav button:hover {
  color: var(--corilus-green-nav);
}

.corilus-nav li:hover {
  background: var(--corilus-green-tint);
}

/*
 * Login, register, forgot password and check password routes. The standard
 * login theme layout takes no class, so the body is matched on the Corilus
 * login component the page holds.
 */
.corilus-login-page,
body:has(c-corilus-login-form),
body:has(c-corilus-login-logo) {
  background: var(--corilus-login-bg);
  min-height: 100%;
}