/**
 * Brand typography (marketing spec 2026-10-14, see CLAUDE.md in the local project).
 * Loaded last by functions.php. !important is needed because Elementor writes per-widget font/color rules
 * with higher specificity, and the theme CSS loads after the child style.css.
 *
 * Colors: headings/text on dark sections (listed in the --dark selectors below) keep white; everywhere else
 * H2 = primary orange, H3/Sub/Text = navy. H1 color is left as each page has it (marketing has not chosen one yet).
 * /vanchuyen/ is a standalone LadiPage and does not load this file.
 */
:root {
  --brand-primary: #fa4216;
  --brand-navy: #0e2a47;
  --brand-white: #ffffff;
  --brand-heading-font: 'Playfair Display', Georgia, serif;
  --brand-text-font: 'Inter', Arial, sans-serif;
}

/* ---------- Heading 1: Playfair Display, bold, uppercase, 35px ---------- */
h1,
h1.elementor-heading-title {
  font-family: var(--brand-heading-font) !important;
  font-size: 35px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
}
/* homepage hero (Slider Revolution layer): on phones the slider box is too small for 35px uppercase, the title
   was clipped and ran over the thumbnails */
@media (max-width: 767px) {
  h1.rs-layer {
    font-size: 22px !important;
  }
}

/* ---------- Heading 2: Playfair Display, bold, uppercase, 25px, orange / white ---------- */
h2:not(.accordion-header),
h2.elementor-heading-title {
  font-family: var(--brand-heading-font) !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  color: var(--brand-primary) !important;
}

/* ---------- Heading 3: Inter, bold, as typed, 22px, white on dark / navy on light ---------- */
h3,
h3.elementor-heading-title,
h3.elementor-image-box-title {
  font-family: var(--brand-text-font) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  color: var(--brand-navy) !important;
}

/* links inside headings take the heading color (hover colors from the theme still apply) */
:is(h1, h2, h3) a:not(:hover) {
  color: inherit !important;
}

/* ---------- Sub: Inter, as typed, 17px, navy / white (eyebrow labels above section titles) ---------- */
.sub-text,
span.sub-title {
  font-family: var(--brand-text-font) !important;
  font-size: 17px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--brand-navy) !important;
}
.sub-text.white {
  color: var(--brand-white) !important;
}
/* the Elementor heading that wraps an eyebrow is an h3: size it like the eyebrow, not like an H3
   (h3.sub-title on the contact page is a real heading and keeps the H3 style) */
.elementor-heading-title:has(> .sub-text) {
  font-size: 17px !important;
  line-height: 1.5 !important;
}

/* ---------- Text: Inter, as typed, 15px, navy ---------- */
p,
.elementor-widget-text-editor li,
.blog-details-text li,
.ft-service-details-text-wrapper li {
  font-family: var(--brand-text-font) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
:is(p, .elementor-widget-text-editor li, .blog-details-text li, .ft-service-details-text-wrapper li):not(:is(
  .why-choose-us, .client-testimonials-section, .transportation-services-section-2,
  .ft-breadcrumb-section, footer, .service-block-one
) *) {
  color: var(--brand-navy) !important;
}

/* FAQ questions are h2 in the theme markup but are accordion buttons, not section titles */
.accordion-header .accordion-button {
  font-family: var(--brand-text-font) !important;
}

/* ---------- Dark sections: headings stay white ---------- */
:is(.why-choose-us, .client-testimonials-section, .transportation-services-section-2,
    .ft-breadcrumb-section, footer, .service-block-one) :is(h2, h3) {
  color: var(--brand-white) !important;
}