/* =====================================================================
   Beyond Journey - the site's type: one face, three weights (2026-10-01)
   ---------------------------------------------------------------------
   The owner: the fonts, the bold and the greys are the complaint - go
   over the whole site and set them properly.

   An audit of 22 pages (4,500 pieces of text) found the cause was three
   accidents rather than sixty separate decisions:

     1. TWO FACES. Headings asked for 'Inter', which no page delivered, so
        every heading was drawn in Arial beside Poppins text.
     2. NO SEMIBOLD. Poppins was loaded at 300/400/500/700. Every rule
        asking for 600 was therefore drawn in Bold, and 56% of all text on
        the site came out bold - labels, chips, links, questions, all of it.
     3. TWO GREYS. The template's #777 on some pages, the site's own muted
        #5a6377 on the rest.

   THE SCALE, for anything new as much as for what is here:

       400  Regular    running text, descriptions, sub-lines
       500  Medium     the furniture: field labels, eyebrows, chips, tabs,
                       sort pills, text links, FAQ questions
       600  SemiBold   headings, prices, names, and the label on a filled
                       button (white on orange needs the weight)

   There is no 700, and no 300. css/style.css loads Poppins at 400, 500
   and 600 only, so a rule that asks for 700 or 800 is drawn at 600 - that
   single line is what takes the weight off every page, including pages
   nobody has written yet. Do not add 700 back to make one thing heavier.

   WHERE EACH PART LIVES
     css/style.css   the @import (the three cuts), the heading face, and
                     the template grey turned into the site's muted colour
     the --*-display tokens in bj-listing / bj-detail / bj-golden
                     now Poppins, at source
     this file       what cannot be said once at source: the heading face
                     held against any page that names another, and the
                     furniture taken from SemiBold down to Medium

   Loaded from Shared/header.cshtml, so every page has it. As in
   css/bj-phone-buttons.css, pages put their own <style> after the header,
   so every selector starts `html body` and every value is !important.
   ===================================================================== */

/* ---- 1. One face -------------------------------------------------- */
/* A page that names its own display face for a heading does not get it.
   (Icons inside a heading keep theirs: they set a family on the <i>.) */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

/* ---- 2. The furniture, at Medium ---------------------------------- */
/* Everything below was SemiBold or Bold and is none of: a heading, a
   price, a name, the label on a button. Set at 500 it still stands apart
   from the 400 text beside it, and the page stops shouting.
   The lists are by component, in the order the pages use them. */

/* 2a. Eyebrows and kickers: the small line over a heading */
html body .section-title h4,
html body .hp-hero__kicker,
html body .hotel-hero__kicker,
html body .bjf-hero__kicker,
html body .gj-hero__kicker,
html body .spj-hero__kicker,
html body .bja-hero__kicker,
html body .bjct-hero__kicker,
html body .bjlg-hero__kicker,
html body .bjd-hero__kicker,
html body .bjl-kicker,
html body .bja-kicker,
html body .bjct-kicker,
html body .spj-kicker,
html body .spj-cta__kicker,
html body .bj-cta-band__kicker,
html body .bjta-bandhead__kicker,
html body .bjc-eyebrow,
html body .gj-eyebrow,
html body .gj-promise__eyebrow,
html body .bj-gsummary__eyebrow,
html body .hp-faq__label,
html body .bjf-faq__label,
html body .hp-scroll,
/* ...and the small-caps labels: a step number, a column head, a caption
   over a figure */
html body .bjc-step,
html body .spj-how__num,
html body .bjf-step__no,
html body .bjl-price__from,
html body .bjd-hero__from,
html body .bjd-start__lbl,
html body .bjd-gal__day,
html body .bjd-calc__h,
html body .bjd-table th,
html body .bjl-filters__top h2,
html body .bjta-quick__h,
html body .bjta-seo__col h3,
html body .bjb-thead span,
html body .bjlg-toc__title,
html body .bjlg-toc__n,
html body .bjlg-gl__more-label,
html body .bjlg-related span,
html body .bjpol-label,
html body .bjtc-stat__num span,
html body .bjct-way__title,
html body .bja-member__role,
html body .bja-stat__label,
html body .bja-do__more,
html body .bjho-code span,
html body .bjf-offer__code span,
html body .bjf-inspire__region,
/* the footer's column heads and office labels */
html body .bjft__h,
html body .bjft__office b,
html body .bjft__reach a {
  font-weight: 500 !important;
}

/* 2b. The caption over a form field */
html body .hp-field__label,
html body .label-text,
html body .bjl-dd__label,
html body .bjb-srch__cell .k,
html body .bjct-label,
html body .bjb-sortbar__label,
html body .quick-routes__label,
html body .hotel-quick > span,
html body .bjf-airline-more__label,
html body .bjhp-more__label,
/* ...and the unit after a figure ("2 guests", "/adult") */
html body .main-val small,
html body .hp-field__value small,
html body .bjb-fare__per,
html body .bjb-srch__cell strong .add,
html body :is(.bjf-hero, .bjf-panel) .disabled-box .sub-text {
  font-weight: 500 !important;
}

/* 2c. Chips, tags and badges */
html body .bjl-row__flag,
html body .bjl-pill,
html body .hp-pack-card__badge,
html body .hp-pack-card__save,
html body .bj-pack-card__duration,
html body .bj-offer-card__tag,
html body .bj-theme-card__flag,
html body .style-flag,
html body .bjta-lcard__flag,
html body .bjta-offer__tag,
html body .bjta-chip,
html body .bjho-card__tag,
html body .bjhp-card__tag,
html body .bjf-offer__tag,
html body .bjf-badge,
html body .bjf-deal__off,
html body .bjb-ribbon,
html body .spj-jc__badge,
html body .bja-office__tag,
html body .bjct-office__tag,
html body .bjct-chip span,
html body .bjlg-chip,
html body .bjpol-chip,
html body .bjpol-tier__flag,
html body .bjpol-window__tag,
html body .bjtc-paycard__flag,
html body .bjtc-paycard__when,
html body .bj-gsummary__badge,
html body .bjd-railprice .off,
html body .bjd-hero__fig em,
html body .hp-offers__tag span,
html body .hp-offers__more,
html body .bjc-chips li,
html body .bja-mv__tags li,
html body .bjtc-law__tags li,
html body .bjtc-services li,
html body .bjtc-methods li,
html body .bjhp-more__list li,
html body .bjf-airline-more__list span,
html body .bjf-airline-more__count,
html body .bj-cta-band__trust li,
html body .bj-cta-band__trust a,
html body .spj-cta__trust li,
html body .spj-cta__trust a {
  font-weight: 500 !important;
}

/* 2d. Tabs, sort pills and quick picks - the chosen one is marked by its
       fill, not by getting heavier */
html body .bjl-sort,
html body .bjb-sort,
html body .bj-dtab,
html body .bjhd-tab,
html body .bjta-tab,
html body .bjd-tabs a,
html body .spj-reg,
html body .spj-reg span,
html body .trip-tabs label span,
html body .bjf-route-filter button,
html body .quick-routes__rail a,
html body .hotel-quick button {
  font-weight: 500 !important;
}

/* 2e. Links written as text ("Details", "Expand all", "Get directions") */
html body .bjho-link,
html body .bjf-offer__link,
html body .bjl-linkbtn,
html body .bjl-more,
html body .bjb-linkbtn,
html body .hp-review-card__link,
html body .bja-office__map,
html body .bjct-link,
html body .bjct-faq__all,
html body .bjct-privacy a,
html body .bjgb__link,
html body .bjgb__long,
html body .bjta-faqgrid__link,
html body .bjta-faq a,
html body .gj-faq__item a,
html body .bjlg-help__mail,
html body .bjlg-related a,
html body .bjtc-more,
html body .bjtc-rules a,
html body .bj-theme-card__more em {
  font-weight: 500 !important;
}

/* 2f. A question in a list of questions. Six of them in a row at
       SemiBold read as six headings. */
html body .bj-faq__q,
html body .hp-faq-q,
html body .hp-faq-q span,
html body .bjf-faq__q,
html body .bjf-faq__q span,
html body .gj-faq__item summary,
html body .spj-faq__q,
html body .bjta-faq > summary,
html body .bjhs-faq summary,
html body .bjct-card summary,
html body .accrodion-title h5 {
  font-weight: 500 !important;
}

/* 2g. The small print round a figure: nights in a route, a duration, a
       review's date, "from" before a fare */
html body .bjl-stops b,
html body .bjb-path__dur,
html body .bjb-path__stops.nonstop,
html body .bjb-pop b,
html body .bjb-tw b,
html body .bjb-fcal__k span,
html body .bjf-route__dur,
html body .bjf-route__city small,
html body .bj-review-card__foot,
html body .hp-review-card__verified,
html body .bjta-mq__txt small,
html body .bjta-citymeta__from,
html body .bjlg-toc__pct,
html body .bjpol-track span,
html body .bjd-gal__count,
html body .bjx-pill__txt small,
html body .bja-story__badge span,
html body .gj-faq__pic figcaption,
html body .hp-faq__pic figcaption,
html body .bjhp-more__count {
  font-weight: 500 !important;
}
/* ...but the fare inside "from Rs 1,886" stays a figure */
html body .bjta-citymeta__from b {
  font-weight: 600 !important;
}

/* ---- 3. What is typed into a field -------------------------------- */
/* A value somebody typed or picked is a figure: SemiBold, ink. The hint
   standing in for it before then is Medium, so an empty field does not
   read as a filled one. */
html body .hp-field__value::placeholder,
html body .main-val::placeholder,
html body .dest-input::placeholder,
html body .bjl-dd__value::placeholder,
html body .bjty-host .bjty-input::placeholder,
html body .bjb-srch__in::placeholder {
  font-weight: 500 !important;
}
/* The hotel search's city box loses its own rule to the template's
   input[type=text] - an attribute selector outranks a single class - so
   what was typed came out Light and grey beside SemiBold dates and guests. */
html body .dest-input {
  font-weight: 600 !important;
  color: #17233e !important;
}

/* ---- 4. Sizes that had drifted from the scale ---------------------- */
/* The scale itself is css/bj-space.css's: a section's title 26px, the
   kicker over it 12px in capitals, the sentence under it 13.5px; a page
   title 34px over a search panel and 40px on a page that tells a story;
   running text 13-14px. These are the places that had left it. Phone and
   tablet sizes stay the page's own, hence the min-widths. */

@media (min-width: 992px) {
  /* 34px on Holidays, Hotels and Tours; Flights had 42 */
  html body .bjf-hero__text h1 { font-size: 34px !important; }
}

@media (min-width: 768px) {
  /* the hotels page wrote two of its five section titles as h3, which
     bj-space.css sets at 20px, and its closing band ran to 30 */
  html body .bjho .section-title h3,
  html body .section-title h3#bjhp-title,
  html body .bjhs-cta h2 { font-size: 26px !important; line-height: 1.25 !important; }
}

/* the hotels page's four promises under the search panel: 24px headings
   that broke over two lines, and a sub-line on the template's loose
   leading. Sized as the other pages' strips are. */
html body .bjhs-strip__item strong { font-size: 18px !important; line-height: 1.3 !important; }
html body .bjhs-strip__item span { display: block; margin-top: 4px; line-height: 1.5 !important; }

@media (min-width: 576px) {
  /* the flights page's three steps were left on the template's 16px */
  html body .about-us .step-subtitle { font-size: 14px !important; line-height: 1.7 !important; }
}

/* two kickers on the tours page sat outside .section-title, so they came
   out as 18px orange headings; they are kickers like the rest */
html body .bjta-how__head h4,
html body .bjta-faqgrid__aside h4 {
  font-size: 12px !important; font-weight: 500 !important;
  letter-spacing: 1.2px; text-transform: uppercase;
  margin-bottom: 8px !important;
}

/* ---- 5. The travellers picker on the search panels (2026-10-03) ---- */
/* Home, Holidays and Tours each style it in their own <style>, with no
   size of its own, so it took the panel's 15-16px for everything and
   drew the counts and APPLY in SemiBold at the same size. The owner:
   "itne bade bade fonts ki jarurat nahi". Sized as the site's other
   dropdowns are. */
html body .hp-drop { width: 248px !important; padding: 6px !important; }
html body .hp-counter-row { padding: 7px 8px !important; font-size: 13px !important; line-height: 1.3 !important; }
html body .hp-counter-row > span { font-weight: 500 !important; color: #17233e !important; }
html body .hp-counter-row > span small { margin-top: 1px; font-size: 11px !important; font-weight: 400 !important; }
html body .hp-counter-row .hp-btns { gap: 8px !important; }
html body .hp-counter-row .hp-btns strong { min-width: 12px; text-align: center; font-size: 13.5px !important; font-weight: 600 !important; }
html body .hp-count-btn {
  display: inline-grid !important; place-items: center; padding: 0 !important;
  width: 24px !important; height: 24px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important;
}
html body .hp-apply {
  margin-top: 4px !important; padding: 7px !important; border-radius: 8px !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: .06em;
}