/* =========================================================
   PKL Logistics - Unified Localization + RTL/LTR + Typography
   File: public/assets/pkl/css/pkl-localization.css
   English: Season VF + Raleway
   Arabic: Tajawal
   Target pages: About / Values / Mission & Vision
   ========================================================= */

/* 1) ENGLISH FONTS */
@font-face {
    font-family: "PKL Season";
    src: url("../fonts/SeasonCollectionVF-TRIAL.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
}

@font-face {
    font-family: "PKL Raleway";
    src: url("../fonts/Raleway-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "PKL Raleway";
    src: url("../fonts/Raleway-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

/* 2) ARABIC FONT - TAJAWAL */
@font-face {
    font-family: "PKL Tajawal";
    src: url("../fonts/Tajawal-ExtraLight.ttf") format("truetype");
    font-style: normal;
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: "PKL Tajawal";
    src: url("../fonts/Tajawal-Light.ttf") format("truetype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "PKL Tajawal";
    src: url("../fonts/Tajawal-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "PKL Tajawal";
    src: url("../fonts/Tajawal-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "PKL Tajawal";
    src: url("../fonts/Tajawal-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "PKL Tajawal";
    src: url("../fonts/Tajawal-ExtraBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "PKL Tajawal";
    src: url("../fonts/Tajawal-Black.ttf") format("truetype");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

/* 3) VARIABLES */
:root {
    --pkl-font-en: "PKL Season", "Arial Narrow", Arial, sans-serif;
    --pkl-font-en-ui: "PKL Raleway", "PKL Season", Arial, sans-serif;
    --pkl-font-ar: "PKL Tajawal", Tahoma, Arial, sans-serif;

    --pkl-hero-en: clamp(32px, 3.4vw, 48px);
    --pkl-hero-ar: clamp(32px, 3.4vw, 48px);

    --pkl-section-en: clamp(32px, 3.1vw, 46px);
    --pkl-section-ar: clamp(30px, 3vw, 44px);

    --pkl-card-en: clamp(20px, 1.7vw, 25px);
    --pkl-card-ar: clamp(21px, 1.75vw, 26px);

    --pkl-lead-en: clamp(17px, 1.45vw, 21px);
    --pkl-lead-ar: clamp(18px, 1.5vw, 22px);

    --pkl-body-en: 15px;
    --pkl-body-ar: 16px;

    --pkl-line-hero-en: 1.12;
    --pkl-line-hero-ar: 1.25;
    --pkl-line-section-en: 1.18;
    --pkl-line-section-ar: 1.30;
    --pkl-line-card-en: 1.28;
    --pkl-line-card-ar: 1.40;
    --pkl-line-lead-en: 1.65;
    --pkl-line-lead-ar: 1.85;
    --pkl-line-body-en: 1.80;
    --pkl-line-body-ar: 1.90;
}

/* 4) HTML / BODY DIRECTION */
html[lang^="ar"],
html[dir="rtl"] { direction: rtl; }

html[lang^="en"],
html[dir="ltr"] { direction: ltr; }

html[lang^="ar"] body,
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: var(--pkl-font-ar);
}

html[lang^="en"] body,
html[dir="ltr"] body {
    direction: ltr;
    text-align: left;
    font-family: var(--pkl-font-en);
}

/* 5) GLOBAL LANGUAGE FONTS */
html[lang^="en"] h1,
html[lang^="en"] h2,
html[lang^="en"] h3,
html[lang^="en"] h4,
html[lang^="en"] h5,
html[lang^="en"] h6,
html[lang^="en"] p,
html[lang^="en"] li,
html[lang^="en"] span,
html[lang^="en"] label,
html[lang^="en"] input,
html[lang^="en"] textarea,
html[lang^="en"] select {
    font-family: var(--pkl-font-en);
}

html[lang^="en"] .nav-area,
html[lang^="en"] .nav-area a,
html[lang^="en"] .header-one,
html[lang^="en"] .header-one button,
html[lang^="en"] .pkl-auth-btn,
html[lang^="en"] .pkl-language-switcher,
html[lang^="en"] .pkl-language-switcher a {
    font-family: var(--pkl-font-en-ui);
}

html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3,
html[lang^="ar"] h4,
html[lang^="ar"] h5,
html[lang^="ar"] h6,
html[lang^="ar"] p,
html[lang^="ar"] li,
html[lang^="ar"] a,
html[lang^="ar"] span,
html[lang^="ar"] label,
html[lang^="ar"] button,
html[lang^="ar"] input,
html[lang^="ar"] textarea,
html[lang^="ar"] select {
    font-family: var(--pkl-font-ar);
    letter-spacing: 0 !important;
}

/* 6) TARGET PAGE ROOTS */
:is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) {
    width: 100%;
}

html[lang^="ar"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) {
    direction: rtl !important;
    text-align: right !important;
}

html[lang^="en"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) {
    direction: ltr !important;
    text-align: left !important;
}

/* 7) HERO */
html[lang^="en"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) h1 {
    font-family: var(--pkl-font-en) !important;
    font-size: var(--pkl-hero-en) !important;
    line-height: var(--pkl-line-hero-en) !important;
    font-weight: 500 !important;
    text-align: left !important;
}

html[lang^="ar"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) h1 {
    font-family: var(--pkl-font-ar) !important;
    font-size: var(--pkl-hero-ar) !important;
    line-height: var(--pkl-line-hero-ar) !important;
    font-weight: 500 !important;
    text-align: right !important;
}

/* 8) SECTION TITLES */
html[lang^="en"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) h2 {
    font-family: var(--pkl-font-en) !important;
    font-size: var(--pkl-section-en) !important;
    line-height: var(--pkl-line-section-en) !important;
    font-weight: 500 !important;
    text-align: left !important;
}

html[lang^="ar"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) h2 {
    font-family: var(--pkl-font-ar) !important;
    font-size: var(--pkl-section-ar) !important;
    line-height: var(--pkl-line-section-ar) !important;
    font-weight: 500 !important;
    text-align: right !important;
}

/* 9) CARD TITLES */
html[lang^="en"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) h3 {
    font-family: var(--pkl-font-en) !important;
    font-size: var(--pkl-card-en) !important;
    line-height: var(--pkl-line-card-en) !important;
    font-weight: 500 !important;
    text-align: left !important;
}

html[lang^="ar"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) h3 {
    font-family: var(--pkl-font-ar) !important;
    font-size: var(--pkl-card-ar) !important;
    line-height: var(--pkl-line-card-ar) !important;
    font-weight: 500 !important;
    text-align: right !important;
}

/* 10) LEAD */
html[lang^="en"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv)
:is(.lead, [class*="lead"], [class*="__lead"], .pklca-lead, .pklv-lead, .pklmv-lead, .pklca-purpose__lead) {
    font-family: var(--pkl-font-en) !important;
    font-size: var(--pkl-lead-en) !important;
    line-height: var(--pkl-line-lead-en) !important;
    font-weight: 400 !important;
    text-align: left !important;
}

html[lang^="ar"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv)
:is(.lead, [class*="lead"], [class*="__lead"], .pklca-lead, .pklv-lead, .pklmv-lead, .pklca-purpose__lead) {
    font-family: var(--pkl-font-ar) !important;
    font-size: var(--pkl-lead-ar) !important;
    line-height: var(--pkl-line-lead-ar) !important;
    font-weight: 400 !important;
    text-align: right !important;
}

/* 11) BODY */
html[lang^="en"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) p,
html[lang^="en"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) li {
    font-family: var(--pkl-font-en) !important;
    font-size: var(--pkl-body-en) !important;
    line-height: var(--pkl-line-body-en) !important;
    font-weight: 400 !important;
    text-align: left !important;
}

html[lang^="ar"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) p,
html[lang^="ar"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) li {
    font-family: var(--pkl-font-ar) !important;
    font-size: var(--pkl-body-ar) !important;
    line-height: var(--pkl-line-body-ar) !important;
    font-weight: 400 !important;
    text-align: right !important;
}

/* 12) LISTS */
html[lang^="ar"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) ul,
html[lang^="ar"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) ol {
    direction: rtl !important;
    text-align: right !important;
    padding-right: 1.25rem !important;
    padding-left: 0 !important;
}

html[lang^="en"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) ul,
html[lang^="en"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv) ol {
    direction: ltr !important;
    text-align: left !important;
    padding-left: 1.25rem !important;
    padding-right: 0 !important;
}

/* 13) GENERIC GRID DIRECTION */
html[lang^="ar"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv)
:is(.row, [class*="__grid"], [class*="-grid"], [class*="__cards"], [class*="-cards"]) {
    direction: rtl !important;
}

html[lang^="en"] :is(#pkl-company-about, #pkl-values, #mission-vision, .pklca, .pklv, .pklmv)
:is(.row, [class*="__grid"], [class*="-grid"], [class*="__cards"], [class*="-cards"]) {
    direction: ltr !important;
}

/* 14) ABOUT PAGE */
html[lang^="ar"] #pkl-company-about .pklca-hero__grid,
html[lang^="ar"] #pkl-company-about .pklca-about__grid,
html[lang^="ar"] #pkl-company-about .pklca-focus__grid,
html[lang^="ar"] #pkl-company-about .pklca-purpose__grid,
html[lang^="ar"] #pkl-company-about .pklca-why__grid {
    direction: rtl !important;
}

html[lang^="en"] #pkl-company-about .pklca-hero__grid,
html[lang^="en"] #pkl-company-about .pklca-about__grid,
html[lang^="en"] #pkl-company-about .pklca-focus__grid,
html[lang^="en"] #pkl-company-about .pklca-purpose__grid,
html[lang^="en"] #pkl-company-about .pklca-why__grid {
    direction: ltr !important;
}

/* 15) VALUES PAGE */
html[lang^="ar"] #pkl-values .pklv-hero__grid,
html[lang^="ar"] #pkl-values .pklv-intro__grid,
html[lang^="ar"] #pkl-values .pklv-values-grid,
html[lang^="ar"] #pkl-values .pklv-principles__grid,
html[lang^="ar"] #pkl-values .pklv-practice__grid {
    direction: rtl !important;
}

html[lang^="en"] #pkl-values .pklv-hero__grid,
html[lang^="en"] #pkl-values .pklv-intro__grid,
html[lang^="en"] #pkl-values .pklv-values-grid,
html[lang^="en"] #pkl-values .pklv-principles__grid,
html[lang^="en"] #pkl-values .pklv-practice__grid {
    direction: ltr !important;
}

/* 16) MISSION & VISION PAGE */
html[lang^="ar"] #mission-vision .pklmv-hero__grid,
html[lang^="ar"] #mission-vision .pklmv-statement__grid,
html[lang^="ar"] #mission-vision .pklmv-focus__cards,
html[lang^="ar"] #mission-vision .pklmv-vision__grid,
html[lang^="ar"] #mission-vision .pklmv-values__grid,
html[lang^="ar"] #mission-vision .pklmv-real__grid {
    direction: rtl !important;
}

html[lang^="en"] #mission-vision .pklmv-hero__grid,
html[lang^="en"] #mission-vision .pklmv-statement__grid,
html[lang^="en"] #mission-vision .pklmv-focus__cards,
html[lang^="en"] #mission-vision .pklmv-vision__grid,
html[lang^="en"] #mission-vision .pklmv-values__grid,
html[lang^="en"] #mission-vision .pklmv-real__grid {
    direction: ltr !important;
}

/* 17) ACTIONS */
html[lang^="ar"] :is(#pkl-company-about, #pkl-values, #mission-vision)
:is(.pklca-actions, .pklv-actions, .pklmv-actions) {
    direction: rtl !important;
    justify-content: flex-start;
}

html[lang^="en"] :is(#pkl-company-about, #pkl-values, #mission-vision)
:is(.pklca-actions, .pklv-actions, .pklmv-actions) {
    direction: ltr !important;
    justify-content: flex-start;
}

/* 18) TEXT BLOCKS */
html[lang^="ar"] :is(#pkl-company-about, #pkl-values, #mission-vision)
:is([class*="__copy"], [class*="__text"], [class*="__body"], [class*="__title"], .pklca-heading, .pklv-heading, .pklmv-heading) {
    direction: rtl !important;
    text-align: right !important;
}

html[lang^="en"] :is(#pkl-company-about, #pkl-values, #mission-vision)
:is([class*="__copy"], [class*="__text"], [class*="__body"], [class*="__title"], .pklca-heading, .pklv-heading, .pklmv-heading) {
    direction: ltr !important;
    text-align: left !important;
}

/* 19) LTR CONTENT INSIDE ARABIC */
html[lang^="ar"] .pkl-ltr,
html[lang^="ar"] [dir="ltr"] {
    direction: ltr !important;
    unicode-bidi: isolate;
    text-align: left;
}

/* 20) TABLET */
@media (min-width: 768px) and (max-width: 1199px) {
    :root {
        --pkl-hero-en: clamp(32px, 4vw, 42px);
        --pkl-hero-ar: clamp(32px, 4vw, 42px);
        --pkl-section-en: clamp(29px, 3.5vw, 38px);
        --pkl-section-ar: clamp(29px, 3.5vw, 38px);
        --pkl-card-en: clamp(20px, 2.2vw, 24px);
        --pkl-card-ar: clamp(21px, 2.3vw, 25px);
        --pkl-lead-en: clamp(17px, 1.8vw, 20px);
        --pkl-lead-ar: clamp(18px, 1.9vw, 21px);
    }
}

/* 21) MOBILE */
@media (min-width: 481px) and (max-width: 767px) {
    :root {
        --pkl-hero-en: clamp(28px, 7vw, 36px);
        --pkl-hero-ar: clamp(28px, 7vw, 36px);
        --pkl-section-en: clamp(26px, 6vw, 32px);
        --pkl-section-ar: clamp(26px, 6vw, 32px);
        --pkl-card-en: clamp(20px, 5vw, 23px);
        --pkl-card-ar: clamp(21px, 5.2vw, 24px);
        --pkl-lead-en: 17px;
        --pkl-lead-ar: 18px;
        --pkl-body-en: 15px;
        --pkl-body-ar: 16px;
    }
}

/* 22) SMALL MOBILE */
@media (max-width: 480px) {
    :root {
        --pkl-hero-en: 29px;
        --pkl-hero-ar: 29px;
        --pkl-section-en: 26px;
        --pkl-section-ar: 26px;
        --pkl-card-en: 20px;
        --pkl-card-ar: 21px;
        --pkl-lead-en: 17px;
        --pkl-lead-ar: 18px;
        --pkl-body-en: 15px;
        --pkl-body-ar: 16px;
    }
}

/* 23) LARGE 27/32 SCREENS */
@media (min-width: 1600px) {
    :root {
        --pkl-hero-en: 48px;
        --pkl-hero-ar: 48px;
        --pkl-section-en: 46px;
        --pkl-section-ar: 44px;
        --pkl-card-en: 25px;
        --pkl-card-ar: 26px;
        --pkl-lead-en: 21px;
        --pkl-lead-ar: 22px;
        --pkl-body-en: 15px;
        --pkl-body-ar: 16px;
    }
}

/* 24) RENDERING */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}