/*
 * One type family for the whole enerpize hub.
 *
 * Alongside `Poppins` (real 400/500/600/700/800 cuts) and `Rb` (real 400/700),
 * the theme ships PoppinsRegular / PoppinsMedium / PoppinsSemiBold /
 * PoppinsBold / PoppinsExtraBold and RbRegular / RbBold as separate families
 * that each hold a SINGLE face declared `font-weight: normal`. Asking one of
 * them for 600+ — which the hub does in a dozen places — makes the browser
 * synthesise bold on top of an already-heavy cut instead of loading the real
 * one, and it leaves several typefaces mixed within a single column.
 *
 * Keeping the hub on the one `Poppins, Rb` stack lets every numeric weight
 * resolve to a real face: Poppins carries latin, Rb carries arabic. The rules
 * below then restore, as a numeric weight, the weight that each of those alias
 * families used to carry in its name.
 *
 * Loaded only for enerpize hub pages, so daftra and online-invoices keep the
 * fonts they render today.
 */

body.en-hub,
body.en-hub :is(
    h1, h2, h3, h4, h5, h6,
    p, ul, ol, li, dl, dt, dd,
    a, span, div, section, article, aside, nav, header, footer, main,
    button, label, input, select, textarea,
    table, thead, tbody, tr, td, th,
    blockquote, figure, figcaption, small, strong, b, em, time
):not([class*="fa-"]):not([class~="fa"]):not([class~="fas"]):not([class~="far"]):not([class~="fab"]):not([class~="fal"]):not([class*="entypo"]) {
    /* !important because the alias families are themselves set with !important
       in multi_language/css/app.css and themed/style.css */
    font-family: Poppins, Rb, Arial, Helvetica, sans-serif !important;
}

/* ---------------------------------------------- weight, restored as a number --- */

/* was var(--poppinsExtraBold) */
body.en-hub .blog-title,
body.en-hub .article-info h2,
body.en-hub .subscribe-content h2,
body.en-hub .subscribe-content button,
body.en-hub .blog-post h1.intro__title,
body.en-hub .article-sidebar h2,
body.en-hub .article-details h1,
body.en-hub .article-details h2,
/* not an alias user, but it is the only other 28px heading on the listing page
   and sat at 700 while the card titles beside it resolved to 800 */
body.en-hub .blog-articles .section-header h2 {
    font-weight: 800;
}

/* was var(--poppinsSemiBold) */
body.en-hub .how-to-manage-business .filters h3,
body.en-hub .article-sidebar ul a,
body.en-hub .article-details p.info-title,
body.en-hub .article-details h3,
body.en-hub .article-details h4 {
    font-weight: 600;
}

/* was PoppinsBold — the header's "Get started for free" call to action */
body.en-hub .main-btn {
    font-weight: 700;
}

/* was RbRegular: body copy, which should read at a normal weight */
body.en-hub .article-info .article-desc,
body.en-hub .article-details > div,
body.en-hub .article-details p,
body.en-hub .article-details ul,
body.en-hub .article-details ol {
    font-weight: 400;
}

body.en-hub .tableOfContent .table_of_content_list {
    font-family: Poppins, Rb, Arial, Helvetica, sans-serif !important;
    font-weight: 400;
}

/* ------------------------------------------------------------- leading --- */

/* Both default/css/app.css and multi_language/css/app.css carry
   `.h1,...,h6 { line-height: 1 !important }`, so every heading on the hub is
   set solid: two-line card titles collide and arabic loses its descenders.
   Nothing can out-specify an element-level !important, so restore a readable
   ratio the same way. Components under .enh set their own on top of this. */
body.en-hub :is(h1, h2, h3, h4, h5, h6),
body.en-hub :is(.h1, .h2, .h3, .h4, .h5, .h6) {
    line-height: 1.4 !important;
}

/* --------------------------------------------------------------- width --- */

/*
 * The hub header is a full-bleed flex row with only the page gutter either
 * side, while `.container-xl` caps the page body at 1185px. At 1855px that is
 * a 1815px navbar over an 1185px article, and the logo and the article's first
 * character are ~320px apart.
 *
 * Give both the same measure so the two line up. 1440px is the narrowest that
 * still leaves the nav room to breathe: the menu lays out at 1187px and the
 * logo takes 176px, so 1410px of content box keeps ~47px of slack rather than
 * squeezing the items together. `.header-fixed` keeps the white bar full-bleed;
 * only what sits inside it is constrained.
 */
body.en-hub {
    --en-hub-width: 1440px;
}

/* the article pages use .container-xl, the listing and the footer use
   .container (capped at 1180px by the inline block in hub_layout.ctp) */
body.en-hub .container,
body.en-hub .container-xl {
    max-width: var(--en-hub-width);
    margin-inline: auto;
}

/* `.header-fixed` carries the header's 20px gutter, which would leave the logo
   inset differently from the article text. Move that gutter onto the header so
   it resolves to the same content box as `.container-xl` (15px). Left alone
   below 992px, where the mobile bar has its own layout. */
@media (min-width: 992px) {
    body.en-hub .header-fixed {
        padding-inline: 0;
    }

    body.en-hub .header {
        max-width: var(--en-hub-width);
        margin-inline: auto;
        padding-inline: 15px;
    }
}