/*
 * LOEB site theme.
 *
 * Everything here has to be global. The base components render their labels, inputs and checkbox
 * indicators inside their own shadow trees; a rule written in a component's stylesheet is compiled
 * with that component's scoping attribute and so never matches them. This site runs synthetic
 * shadow, where ::part() is inert and the SLDS styling hooks do not cover most of what follows -
 * a document-level stylesheet is the only thing that reaches these elements.
 *
 * Loaded from the site head markup alongside LoebFonts/fonts.css. Bump the ?v= on both when either
 * changes: the resource is served with a 45-day cache.
 */

/*
 * Site-wide type. This is an LWR site, so base components live in native shadow roots that a
 * descendant selector from here can never reach. Custom properties are the exception - they
 * inherit across a shadow boundary - so the family is handed down as tokens rather than rules.
 * Names differ by SLDS/DXP generation; the ones this org does not resolve are inert.
 */
:root {
  --lwc-fontFamily: 'Gotham', Arial, Helvetica, sans-serif;
  --lwc-fontFamilyText: 'Gotham', Arial, Helvetica, sans-serif;
  --lwc-fontFamilyHeading: 'Gotham', Arial, Helvetica, sans-serif;
  --slds-g-font-family-base: 'Gotham', Arial, Helvetica, sans-serif;

  /* LWR / DXP branding tokens */
  --dxp-s-body-font-family: 'Gotham', Arial, Helvetica, sans-serif;
  --dxp-s-text-font-family: 'Gotham', Arial, Helvetica, sans-serif;
  --dxp-s-form-element-label-font-family: 'Gotham', Arial, Helvetica, sans-serif;
  --dxp-s-input-font-family: 'Gotham', Arial, Helvetica, sans-serif;
}

body {
  font-family: 'Gotham', Arial, Helvetica, sans-serif;
}

/*
 * Base components. This site runs synthetic shadow, so a document-level rule does reach inside a
 * component's shadow tree - ::part and inherited font-family do not, because SLDS declares the
 * family explicitly on these classes and an explicit declaration beats anything inherited from
 * the host. Hence the class list and the !important: it is overriding a real declaration, not
 * winning a specificity race.
 */
.slds-form-element,
.slds-form-element__label,
.slds-form-element__help,
.slds-input,
.slds-textarea,
.slds-select,
.slds-combobox_container,
.slds-combobox__input,
.slds-checkbox__label,
.slds-radio__label,
.slds-button,
.slds-listbox__option {
  font-family: 'Gotham', Arial, Helvetica, sans-serif !important;
}

/*
 * Experience Builder text components. These render in the document rather than a component shadow
 * tree and carry dxp- classes, so the slds- list above never reached them - the left-hand column
 * stayed on the system stack while the form beside it was already Gotham.
 *
 * Gotham, not Ivy Ora, even for the headings: the only Ivy Ora face licensed to us is Light
 * Italic, and setting every site heading in italic is a design decision rather than a font swap.
 */
[class*="dxp-text-"],
.dxp-richtext,
.dxp-richtext p,
.dxp-richtext h1,
.dxp-richtext h2,
.dxp-richtext h3 {
  font-family: 'Gotham', Arial, Helvetica, sans-serif !important;
}

/*
 * The display title takes Ivy Ora. It is set italic at 300 in the page, which is not a stylistic
 * flourish - it is the exact and only face we are licensed for, so this is the one place the font
 * renders as drawn rather than as sheared by the browser.
 */
[class*="dxp-text-heading-xlarge"] {
  font-family: 'Ivy Ora Display', Georgia, 'Times New Roman', serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
}

/*
 * Everything else upright. No italic Gotham is licensed, so any italic left on a Gotham element
 * would be synthesised - the browser shearing the upright face and calling it italic.
 */
[class*="dxp-text-"]:not([class*="heading-xlarge"]) {
  font-style: normal !important;
}

/*
 * Consent checkbox, checked state.
 *
 * Not a font rule, but this stylesheet is the only global sheet the site loads, and the styling
 * has to be global: under synthetic shadow the SLDS hooks (--slds-c-checkbox-*) and ::part() are
 * both inert here, so neither the component's own CSS nor a shadow part can reach this element.
 *
 * background-IMAGE rather than background-color, and box-shadow rather than border-color, because
 * those two properties specifically refuse an unlayered !important on this element - measured, not
 * assumed: width and border-radius accept one, background-color and border-color do not. A flat
 * gradient paints the fill and an inset shadow draws the edge, both of which do apply.
 */
.slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux {
  background-image: linear-gradient(#0C112D, #0C112D) !important;
  box-shadow: inset 0 0 0 1px #0C112D !important;
}

.slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux:after {
  border-color: #ffffff !important;
}

/*
 * Form density. The base components ship a 16px label on 24px leading with a 16px gap under every
 * field - roughly 74px of height per row, which on a thirteen-field form is most of a screen of
 * whitespace. loeb.ch sets its form labels at 13px; matching that and tightening the gap takes the
 * card down by about 70px without crowding anything.
 *
 * Global, because these elements live inside the base components' shadow trees where the
 * component's own stylesheet cannot reach them. Input text stays at 16px deliberately: iOS zooms
 * the viewport on focus for anything smaller.
 */
.slds-form-element {
  margin-bottom: 0.5rem !important;
}

.slds-form-element__label {
  font-size: 0.875rem !important;
  line-height: 1.25 !important;
  margin-bottom: 2px !important;
}

/*
 * Colour. The base components and the Experience Builder text components both default to the SLDS
 * ink #1A1B1E, which is a near-black with a green cast - close enough to look like a mistake next
 * to the brand navy rather than a deliberate second colour. loeb.ch uses #0C112D for headings,
 * labels and controls, and #4A545B for running text. Same two values BEACH-293 specifies.
 */
.slds-form-element__label,
.slds-input,
.slds-textarea,
.slds-select,
.slds-combobox__input,
.slds-checkbox__label {
  color: #0C112D !important;
}

[class*="dxp-text-heading-xlarge"] {
  color: #0C112D !important;
}

[class*="dxp-text-"]:not([class*="heading-xlarge"]) {
  color: #4A545B !important;
}