/* ==========================================================================
   Vedic Village typography: the type roles (type system v5, user 2026-10-11).

   docs/design-system/typography.md is the rulebook and spec; a change to a
   role lands there in the same commit.

   ROLES   .vv-role-<style>   Fourteen, one per style, no others (lint: roles).
                              Family, weight, case, and the size, leading and
                              tracking tokens (--vv-text-*, --vv-leading-*,
                              --vv-tracking-* in vv-tokens.css, which step at
                              Framer's cuts), and the role's one default colour.

   A component sets a --vv-color-text-* token (or a colour) only where its text
   differs from the role's default, in its own stylesheet; states (hover,
   current, selected) live there too. A colour is never a new role. Component
   CSS never sets font properties.

   Loaded after vv-primitives.css (functions.php), so a role's typography wins
   over the band's heading reset. Primitives with their own class
   (.vv-button, .vv-textlink, .vv-index, .vv-chips) and editor rich text
   (.vv-prose, .vv-r-article__body) take their type from here too.
   ========================================================================== */

/* ---------- Serif ---------- */

/* Hero and banner titles; room page titles. */
.vv-role-display {
  font-family: var(--vv-family-display);
  font-style: normal;
  font-weight: var(--vv-weight-display);
  font-size: var(--vv-text-display);
  line-height: var(--vv-leading-display);
  letter-spacing: var(--vv-tracking-display);
  text-transform: var(--vv-case-display);
  color: var(--vv-color-text-emphasised);
}

/* Page titles; article titles; stat values. */
.vv-role-heading-1 {
  font-family: var(--vv-family-heading-1);
  font-style: normal;
  font-weight: var(--vv-weight-heading-1);
  font-size: var(--vv-text-heading-1);
  line-height: var(--vv-leading-heading-1);
  letter-spacing: var(--vv-tracking-heading-1);
  text-transform: var(--vv-case-heading-1);
  color: var(--vv-color-text-emphasised);
}

/* Section headings; page and place headings; h2 in rich text. */
.vv-role-heading-2,
.vv-prose :where(h2),
.vv-r-article__body :where(h2) {
  font-family: var(--vv-family-heading-2);
  font-style: normal;
  font-weight: var(--vv-weight-heading-2);
  font-size: var(--vv-text-heading-2);
  line-height: var(--vv-leading-heading-2);
  letter-spacing: var(--vv-tracking-heading-2);
  text-transform: var(--vv-case-heading-2);
  color: var(--vv-color-text-emphasised);
}

/* Subheadings; h3 in rich text. */
.vv-role-heading-3,
.vv-prose :where(h3),
.vv-r-article__body :where(h3) {
  font-family: var(--vv-family-heading-3);
  font-style: normal;
  font-weight: var(--vv-weight-heading-3);
  font-size: var(--vv-text-heading-3);
  line-height: var(--vv-leading-heading-3);
  letter-spacing: var(--vv-tracking-heading-3);
  text-transform: var(--vv-case-heading-3);
  color: var(--vv-color-text-emphasised);
}

/* Every card, row, tile and award title; band labels; the closing card's and
   newsletter's titles; the open menu's links; dialog titles; index numbers;
   the text logo; h4–h6 in rich text. */
.vv-role-heading-4,
.vv-index,
.vv-prose :where(h4, h5, h6),
.vv-r-article__body :where(h4, h5, h6) {
  font-family: var(--vv-family-heading-4);
  font-style: normal;
  font-weight: var(--vv-weight-heading-4);
  font-size: var(--vv-text-heading-4);
  line-height: var(--vv-leading-heading-4);
  letter-spacing: var(--vv-tracking-heading-4);
  text-transform: var(--vv-case-heading-4);
  color: var(--vv-color-text-emphasised);
}

/* Rich-text headings often arrive wrapped in <strong>; the heading's role sets
   the weight, not the tag (user, 2026-10-12). */
:is(.vv-prose, .vv-r-article__body) :where(h2, h3, h4, h5, h6) :where(strong, b) { font-weight: inherit; }

/* Leads; pull quotes and blockquotes; hero slide lines; room subtitles;
   accordion titles. */
.vv-role-standout,
.vv-prose :where(blockquote),
.vv-r-article__body :where(blockquote) {
  font-family: var(--vv-family-standout);
  font-style: normal;
  font-weight: var(--vv-weight-standout);
  font-size: var(--vv-text-standout);
  line-height: var(--vv-leading-standout);
  letter-spacing: var(--vv-tracking-standout);
  text-transform: var(--vv-case-standout);
  color: var(--vv-color-text-default);
}
/* An Experiences item's name is standout in the medium weight (user,
   2026-10-11). */
.vv-r-split__item .vv-role-standout { font-weight: var(--vv-weight-medium); }

/* Running text in bands and cards; intros; dialog copy; the footer's links;
   an article's running text (user, 2026-10-12). */
.vv-role-body,
.vv-r-article__body :where(p, li, th, td) {
  font-family: var(--vv-family-body);
  font-style: normal;
  font-weight: var(--vv-weight-body);
  font-size: var(--vv-text-body);
  line-height: var(--vv-leading-body);
  letter-spacing: var(--vv-tracking-body);
  text-transform: var(--vv-case-body);
  color: var(--vv-color-text-default);
}

/* Notes, footnotes, captions, dialog intros. */
.vv-role-body-small,
.vv-prose :where(figcaption),
.vv-r-article__body :where(figcaption) {
  font-family: var(--vv-family-body-small);
  font-style: normal;
  font-weight: var(--vv-weight-body-small);
  font-size: var(--vv-text-body-small);
  line-height: var(--vv-leading-body-small);
  letter-spacing: var(--vv-tracking-body-small);
  text-transform: var(--vv-case-body-small);
  color: var(--vv-color-text-default);
}

/* ---------- Sans ---------- */

/* Eyebrows over headings; tabs; the footer's group headings; section and
   intro labels; the property switcher; prices. */
.vv-role-eyebrow {
  font-family: var(--vv-family-eyebrow);
  font-style: normal;
  font-weight: var(--vv-weight-eyebrow);
  font-size: var(--vv-text-eyebrow);
  line-height: var(--vv-leading-eyebrow);
  letter-spacing: var(--vv-tracking-eyebrow);
  text-transform: var(--vv-case-eyebrow);
  color: var(--vv-color-text-default);
}

/* Text links, card meta, ratings, bylines, categories, filters, job lines,
   room stats, the header's menu and sub-nav links. */
.vv-role-label,
.vv-textlink {
  font-family: var(--vv-family-label);
  font-style: normal;
  font-weight: var(--vv-weight-label);
  font-size: var(--vv-text-label);
  line-height: var(--vv-leading-label);
  letter-spacing: var(--vv-tracking-label);
  text-transform: var(--vv-case-label);
}
.vv-role-label { color: var(--vv-color-text-default); }   /* .vv-textlink takes its own colour (vv-primitives.css) */

/* A quieter label, 13: the ratings' "Loved by everyone" (user, 2026-11-11). */
.vv-role-label-small {
  font-family: var(--vv-family-label-small);
  font-style: normal;
  font-weight: var(--vv-weight-label-small);
  font-size: var(--vv-text-label-small);
  line-height: var(--vv-leading-label-small);
  letter-spacing: var(--vv-tracking-label-small);
  text-transform: var(--vv-case-label-small);
  color: var(--vv-color-text-default);
}

/* Every button, the Fluent Forms submit included. Colour: the button's
   --vv-cta-* (vv-primitives.css). Padding is there too. */
.vv-role-button,
.vv-button,
.vv-form .fluentform .ff-btn-submit {
  font-family: var(--vv-family-button);
  font-style: normal;
  font-weight: var(--vv-weight-button);
  font-size: var(--vv-text-button);
  line-height: var(--vv-leading-button);
  letter-spacing: var(--vv-tracking-button);
  text-transform: var(--vv-case-button);
}

/* Phone, email and WhatsApp lines, always with their icon (vv_contact_icon()); FAQ questions. */
.vv-role-text-cta {
  font-family: var(--vv-family-text-cta);
  font-style: normal;
  font-weight: var(--vv-weight-text-cta);
  font-size: var(--vv-text-text-cta);
  line-height: var(--vv-leading-text-cta);
  letter-spacing: var(--vv-tracking-text-cta);
  text-transform: var(--vv-case-text-cta);
  color: var(--vv-color-text-default);
}

/* Form fields and labels (15 on every device; user, 2026-10-12); FAQ
   answers; job summaries; error and success messages; the filter select;
   the date picker's month, year and days. */
.vv-role-body-sans,
.vv-form .fluentform .ff-el-input--label label,
.vv-form .fluentform .ff-el-form-control,
.vv-form .fluentform .ff-el-form-control:focus,
.vv-form .fluentform .choices__inner,
.vv-form .fluentform .choices__list--single .choices__item,
.vv-form .fluentform .choices__list--dropdown .choices__item,
.vv-form .fluentform .choices__input,
.vv-form .fluentform .ff-el-form-check-label,
.vv-form .fluentform .error,
.vv-form .ff-message-success,
.vv-calendar .flatpickr-current-month span.cur-month,
.vv-calendar .flatpickr-current-month input.cur-year,
.vv-calendar .flatpickr-day {
  font-family: var(--vv-family-body-sans);
  font-style: normal;
  font-weight: var(--vv-weight-body-sans);
  font-size: var(--vv-text-body-sans);
  line-height: var(--vv-leading-body-sans);
  letter-spacing: var(--vv-tracking-body-sans);
  text-transform: var(--vv-case-body-sans);
  color: var(--vv-color-text-default);
}

/* The footer's address and copyright; form help; chips (a row given its own
   role, such as a job posting's facts, keeps it: :where() adds no weight);
   the date picker's weekdays. */
.vv-role-body-small-sans,
:where(.vv-chips),
.vv-form .fluentform .ff-el-help-message,
.vv-calendar span.flatpickr-weekday {
  font-family: var(--vv-family-body-small-sans);
  font-style: normal;
  font-weight: var(--vv-weight-body-small-sans);
  font-size: var(--vv-text-body-small-sans);
  line-height: var(--vv-leading-body-small-sans);
  letter-spacing: var(--vv-tracking-body-small-sans);
  text-transform: var(--vv-case-body-small-sans);
  color: var(--vv-color-text-default);
}

/* ---------- Rules every role shares ---------- */

/* No text-wrap here. balance and pretty both rebreak lines, which is exactly
   what a replica must not do: line breaks have to fall where the source puts
   them. Removed 2026-09-23 after the destination header wrapped to 552px
   against the live 769px with identical text and identical width. */

/* No bold (user, 2026-10-11): <strong> and <b> set in their text's weight.
   The one exception is an article's running text, below. */
strong,
b { font-weight: inherit; }
.vv-r-article__body :where(p, li, th, td, blockquote) :where(strong, b) { font-weight: var(--vv-weight-semibold); }

/* No italics anywhere (user, 2026-10-07): the browser's own italic elements
   stand upright too. Zero specificity, so any role still decides. */
:where(em, i, cite, dfn, var, address) { font-style: normal; }

/* An emphasised phrase in a heading ("A Warm Welcome"), and the header's
   `accent` word: upright, the heading's weight, the highlight colour
   (no italics, user 2026-10-07; on olive the role re-points). */
.vv-accent { font-style: normal; color: var(--vv-color-text-highlight); }

/* A state, not a style: the switcher's current property is set a weight up,
   600 (one of the two bolds, user 2026-10-11). */
.vv-ph__switch-link[aria-current] { font-weight: var(--vv-weight-current); }

/* Index numbers: lining, equal-width figures, so they line up. */
.vv-index { font-variant-numeric: lining-nums tabular-nums; }

/* Pull quotes: an opening quote mark hangs outside the text edge where the
   browser supports it. */
.vv-prose :where(blockquote),
.vv-r-article__body :where(blockquote) { hanging-punctuation: first last; }

/* An email address is never set in capitals, whatever its line's case, and so
   takes no caps tracking (user, 2026-10-10). */
a[href^="mailto:"] { text-transform: none; letter-spacing: var(--vv-tracking-body); }

/* Forms. GeneratePress colours fields by element and type (input[type="text"],
   plus a :focus variant) in inline CSS that prints after this file. :root
   lifts the role above both, the same way vv-primitives.css handles the body
   background. */
:root :is(input, select, textarea).vv-role-body-sans,
:root :is(input, select, textarea).vv-role-body-sans:focus { color: var(--vv-color-text-default); }
.vv-role-body-sans::placeholder { color: var(--vv-color-text-default); opacity: 1; }
/* A required field's asterisk (one colour for all). */
.vv-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: var(--vv-color-text-cta-hover); }
/* Messages. Pair each with an icon or wording that says what happened, so
   the meaning never rests on colour alone. */
.vv-form .fluentform .error { color: var(--vv-color-text-error); }
.vv-form .ff-message-success { color: var(--vv-color-text-success); }