/* =========================================================
   MOIT Theme V2 - Typography System
   Ministry of Economy, Industry & Investment
   ========================================================= */


/* =========================================================
   FONT FACE
   ========================================================= */

@font-face {
    font-family: 'ExpoArabic';
    src: url('../fonts/expo/Expo-Arabic-Book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root {

    /* Font Family */
    --moit-font-primary: 'ExpoArabic', sans-serif;

    /* Typography Scale */
    --moit-text-xs: 0.75rem;
    --moit-text-sm: 0.875rem;
    --moit-text-md: 0.9rem;
    --moit-text-lg: 1.125rem;
    --moit-text-xl: 1.375rem;
    --moit-text-2xl: 1.75rem;
    --moit-text-3xl: 2.25rem;

    /* Line Heights */
    --moit-line-tight: 1.4;
    --moit-line-normal: 1.8;
    --moit-line-relaxed: 2;

    /* Font Weights */
    --moit-weight-normal: 400;
    --moit-weight-medium: 500;
    --moit-weight-bold: 700;
}


/* =========================================================
   GLOBAL HTML
   ========================================================= */

html {
    font-family: var(--moit-font-primary);
    font-size: 16px;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    scroll-behavior: smooth;
}


/* =========================================================
   BODY
   ========================================================= */

body {
    font-family: var(--moit-font-primary);
    font-size: var(--moit-text-md);
    font-weight: var(--moit-weight-normal);
    line-height: var(--moit-line-normal);

    direction: rtl;
    text-align: right;

    overflow-wrap: break-word;
}


/* =========================================================
   DRUPAL CORE WRAPPERS
   ========================================================= */

.dialog-off-canvas-main-canvas,
.layout-container,
.page-wrapper,
.region,
.block,
.node,
.view-content,
.views-element-container,
.field {
    font-family: var(--moit-font-primary);
}


/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--moit-font-primary);
    font-weight: var(--moit-weight-bold);
    line-height: var(--moit-line-tight);

    margin-top: 0;
    margin-bottom: 1rem;

    letter-spacing: 0;
}


h1 {
    font-size: var(--moit-text-3xl);
}

h2 {
    font-size: var(--moit-text-2xl);
}

h3 {
    font-size: var(--moit-text-xl);
}

h4 {
    font-size: var(--moit-text-lg);
}

h5 {
    font-size: var(--moit-text-md);
}

h6 {
    font-size: var(--moit-text-sm);
}


/* =========================================================
   PARAGRAPHS & CONTENT
   ========================================================= */

p,
li,
blockquote,
figcaption {
    font-size: var(--moit-text-md);
    line-height: var(--moit-line-relaxed);

    margin-top: 0;
    margin-bottom: 1rem;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    font-family: var(--moit-font-primary);
    text-decoration: none;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}


/* =========================================================
   LISTS
   ========================================================= */

ul,
ol {
    padding-right: 1.5rem;
    margin-bottom: 1.25rem;
}

li {
    margin-bottom: 0rem;
}


/* =========================================================
   TABLES
   ========================================================= */

table {
    width: 100%;
    border-collapse: collapse;

    font-family: var(--moit-font-primary);
    font-size: var(--moit-text-sm);
}

th,
td {
    padding: 0.75rem;
    line-height: var(--moit-line-normal);
}


/* =========================================================
   FORMS
   ========================================================= */

button,
input,
select,
textarea {
    font-family: var(--moit-font-primary);
    font-size: var(--moit-text-md);
    line-height: var(--moit-line-normal);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.menu,
.nav,
.navbar,
.toolbar-menu,
.primary-nav,
.secondary-nav {
    font-family: var(--moit-font-primary);
    font-size: var(--moit-text-md);
}


/* =========================================================
   ARTICLES & CKEDITOR CONTENT
   ========================================================= */

.text-formatted *,
.field--type-text-long *,
.field--type-text-with-summary *,
.ck-content *,
article * {
    font-family: var(--moit-font-primary) !important;
}


/* =========================================================
   MEDIA
   ========================================================= */

img,
svg,
video {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   RESPONSIVE TYPOGRAPHY
   ========================================================= */

@media (max-width: 768px) {

    html {
        font-size: 15px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.3rem;
    }

}