/* ==========================================================================
   Gulf Publications — Typography
   --------------------------------------------------------------------------
   Self-hosted IBM Plex Sans (moved out of the static build's assets/font) and
   the site-wide weight scale. Loaded after style.css and responsive.css so the
   scale defined here is the last word on font-weight.

   The scale is deliberately narrow — only three weights are used:

     700  Bold      h1, h2 and display numbers
     600  SemiBold  h3–h6, card titles, section subtitles, labels and tags
     400  Regular   body copy, and every button / CTA

   Buttons are the one special case. The design calls for the Medium cut, but
   the declared weight has to stay 400 — so the Medium file is registered under
   its own family name ('IBM Plex Sans Medium') at weight 400. Buttons switch
   family instead of weight: Medium letterforms, `font-weight: 400` in CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   @font-face — IBM Plex Sans, self-hosted from assets/fonts
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Buttons only: the Medium cut registered at weight 400, so a CTA renders as
   Medium while its rule still reads `font-weight: 400`. */
@font-face {
    font-family: 'IBM Plex Sans Medium';
    src: url('../fonts/IBMPlexSans-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Medium';
    src: url('../fonts/IBMPlexSans-MediumItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
    --gp-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --gp-font-medium: 'IBM Plex Sans Medium', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --gp-weight-bold: 700;
    --gp-weight-semibold: 600;
    --gp-weight-regular: 400;
}

/* --------------------------------------------------------------------------
   Body / paragraphs — Regular 400
   -------------------------------------------------------------------------- */
body,
input,
select,
textarea,
button {
    font-family: var(--gp-font-sans);
}

body {
    font-weight: var(--gp-weight-regular);
}

p,
li,
dd,
dt,
blockquote,
figcaption,
small,
address {
    font-weight: var(--gp-weight-regular);
}

/* --------------------------------------------------------------------------
   Main headings — Bold 700
   -------------------------------------------------------------------------- */
h1,
h2,
.gp-hero-title,
.gp-review-hero-title,
.gp-sd-title,
.gp-section-title,
.gp-cta-title,
.gp-cta-dark-title,
.gp-legal-wrap h1,
.gp-legal-wrap h2,
.gp-ty-box h1 {
    font-weight: var(--gp-weight-bold);
}

/* Display figures read as headings, not as body copy. */
.gp-stat-number,
.gp-rev-stat-number,
.gp-step-num,
.gp-brand,
.gp-footer-brand {
    font-weight: var(--gp-weight-bold);
}

/* --------------------------------------------------------------------------
   Sub-headings, card titles, section subtitles, labels — SemiBold 600
   -------------------------------------------------------------------------- */
h3,
h4,
h5,
h6,
.gp-legal-wrap h3,
.gp-legal-wrap h4,
.gp-legal-wrap h5,
.gp-legal-wrap h6 {
    font-weight: var(--gp-weight-semibold);
}

/* Card titles. */
.gp-feature-title,
.gp-service-title,
.gp-step-title,
.gp-pub-title,
.gp-review-name,
.gp-office-name,
.gp-consultant-card h3,
.gp-leader-tile h4,
.gp-spec h4,
.gp-form-card h3 {
    font-weight: var(--gp-weight-semibold);
}

/* Section subtitles and the small label / eyebrow / tag family. */
.gp-section-sub,
.gp-form-sub,
.gp-stat-label,
.gp-rev-stat-label,
.gp-legacy-tile p,
.gp-since-tag,
.gp-sd-tag,
.gp-consultant-tag,
.gp-consultant-role,
.gp-pub-cat,
.gp-pub-badge,
.gp-pub-tag,
.gp-review-field,
.gp-legal-updated,
.gp-field label,
.gp-error,
.gp-service-link,
.gp-step-link,
.gp-contact-list a,
.gp-review-avatar {
    font-weight: var(--gp-weight-semibold);
}

/* --------------------------------------------------------------------------
   Buttons / CTAs — Medium letterforms, weight 400
   -------------------------------------------------------------------------- */
.btn,
.gp-btn-yellow,
.gp-btn-green,
.gp-btn-outline-white,
.gp-btn-outline-green,
.gp-btn-outline-yellow,
.gp-step-btn,
.gp-consult-form button[type='submit'],
button,
input[type='submit'],
input[type='button'] {
    font-family: var(--gp-font-medium);
    font-weight: var(--gp-weight-regular);
}

/* Navigation reads as a control row rather than body copy, so it takes the
   same Medium-at-400 treatment as the buttons. */
.gp-nav-links .nav-link,
.gp-nav-links .nav-link.active,
.gp-dropdown-menu .dropdown-item,
.gp-footer-list a {
    font-family: var(--gp-font-medium);
    font-weight: var(--gp-weight-regular);
}