/*
  Global variables and responsive font sizing
  - Color variables grouped by category
  - Typography variables use `rem` units and numeric font-weights
  - Responsive `html` font-size driven by `--base-font-size` as requested
*/

@font-face {
  font-family: "RAK-Regular";
  src: url("/wp-content/themes/PortalTheme/fonts/otf/RAK-Regular.otf")
    format("opentype");
  src: url("/wp-content/themes/PortalTheme/fonts/woff/RAK-Regular.woff")
    format("woff");
  src: url("../fonts/woff2/RAKRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "RAK-Bold";
  src: url("/wp-content/themes/PortalTheme/fonts/otf/RAK-Bold.otf")
    format("opentype");
  src: url("/wp-content/themes/PortalTheme/fonts/woff/RAK-Bold.woff")
    format("woff");
  src: url("../fonts/woff2/RAKBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "RAK-Medium";
  src: url("/wp-content/themes/PortalTheme/fonts/otf/RAK-Medium.otf")
    format("opentype");
  src: url("/wp-content/themes/PortalTheme/fonts/woff/RAK-Medium.woff")
    format("woff");
  src: url("../fonts/woff2/RAKMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

:root {
  --mobile-screen-size: 768px;
  --tablet-screen-size: 1024px;
  --desktop-screen-size: 1440px;
}
:root {
  /* UI controls */
  --base-font-size: 0px;
  --filterValue: none;
  --filterImages: none;

  /* ---------- Colors (grouped) ---------- */
  /* Pinks / Reds */
  --color-pink-1: #ed6b8a;
  --color-pink-2: #ff4787;
  --color-pink-3: #ea4c7d;
  --color-magenta: #e40386;
  --color-red: #f90000;

  /* Blues */
  --color-blue: #007bff;
  --color-light-blue: #00d6ff;

  /* Greens / Teal */
  --color-teal: #00b6a2;
  --color-teal-2: #00c9cf;

  /* Neutrals */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-muted: #979797;
  --color-dark-1: #212529;
  --color-light-1: #efefef;
  --color-gray-2: #6c757c;
  --color-gray-background-1: #e9e9e9;
  --color-gray-background-2: #eaeaea;

  /* ---------- Typography variables (rem + numeric font-weights) ---------- */
  /* Headers */
  --fs-h1: 2.25rem;
  --fw-h1: 800;
  --fs-h2: 1.75rem;
  --fw-h2: 700;
  --fs-h3: 1.5rem;
  --fw-h3: 700;
  --fs-h4: 1.25rem;
  --fw-h4: 600;
  --fs-h5: 1rem;
  --fw-h5: 600;
  --fs-h6: 0.875rem;
  --fw-h6: 600;

  /* Body / misc */
  --fs-p: 1rem;
  --fw-p: 400;
  --fs-small: 0.875rem;
  --fw-small: 300;
  --fs-link: 1rem;
  --fw-link: 600;
  --fs-li: 1rem;
  --fw-li: 400;
  --fs-span: 0.95rem;
  --fw-span: 400;
}

/* Arabic font */
html[lang="ar"],
html[dir="rtl"] {
  font-family: "RAK-Medium", sans-serif;
}

html[lang="en"],
html [dir="ltr"] {
  font-family: "Linotype - FrutigerLTPro-Roman", Arial, sans-serif;
}

/* body :lang(ar) {
    font-family: 'RAK-Medium', sans-serif;
}

body :lang(en) {
    font-family: 'Linotype - FrutigerLTPro-Roman', Arial, sans-serif;
} */
body
  :lang(ar):not(i):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(
    .eicon
  ):not([class*="icon"]) {
  font-family: "RAK-Medium", sans-serif;
}

body
  :lang(en):not(i):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(
    .eicon
  ):not([class*="icon"]) {
  font-family: "Linotype - FrutigerLTPro-Roman", Arial, sans-serif;
}

/* Root-driven responsive font sizing (matches provided calculations) */
html {
  font-size: calc(var(--base-font-size) + 16px);
  filter: var(--filterValue);
}
main.site-main {
  padding-bottom: 80px;
}
@media (max-width: 768px) {
  main.site-main {
    padding-bottom: 40px;
  }
}
img {
  filter: var(--filterImages);
}
.img-fluid {
  max-width: 100%;
  height: auto;
}

img {
  vertical-align: middle;
  border-style: none;
}
img {
  border: none;
  -webkit-tap-highlight-color: transparent;
}
/* @media (max-width: 768px) {
  html, body { font-size: calc(5px + var(--base-font-size) + .368vw) !important; }
}

@media (max-width: 1200px) {
  html, body { font-size: calc(4px + var(--base-font-size) + .468vw) !important; }
  html[lang=ar], body { font-size: calc(5px + var(--base-font-size) + .468vw) !important; }
}

@media (max-width: 1920px) {
html, body { font-size: calc(2px + var(--base-font-size) + .677085vw) !important; }
html[lang=ar], body { font-size: calc(3px + var(--base-font-size) + .677085vw) !important; }
} */

/* ---------- Element defaults using variables (rem units will scale with html font-size) ---------- */
h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  color: var(--color-dark-1);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  color: var(--color-dark-1);
}
h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  color: var(--color-dark-1);
}
h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-h4);
  color: var(--color-dark-1);
}
h5 {
  font-size: var(--fs-h5);
  font-weight: var(--fw-h5);
  color: var(--color-dark-1);
}
h6 {
  font-size: var(--fs-h6);
  font-weight: var(--fw-h6);
  color: var(--color-dark-1);
}

p {
  font-size: var(--fs-p);
  font-weight: var(--fw-p);
  color: var(--color-dark-1);
  line-height: 1.6;
}

a {
  font-size: var(--fs-link);
  font-weight: var(--fw-link);
  text-decoration: none;
}

ul,
ol {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
  unicode-bidi: isolate;
}
li {
  font-size: var(--fs-li);
  font-weight: var(--fw-li);
  color: var(--color-dark-1);
  line-height: 1.6;
}

span {
  font-size: var(--fs-span);
  font-weight: var(--fw-span);
  color: inherit;
}

/* Utility classes */
.h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
}
.h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
}
.h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
}
.h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-h4);
}
.h5 {
  font-size: var(--fs-h5);
  font-weight: var(--fw-h5);
}
.h6 {
  font-size: var(--fs-h6);
  font-weight: var(--fw-h6);
}
.p {
  font-size: var(--fs-p);
  font-weight: var(--fw-p);
}
.small {
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
}
.link {
  color: var(--color-blue);
  font-weight: var(--fw-link);
  text-decoration: underline;
}
.muted {
  color: var(--color-muted);
}
.text-primary {
  color: var(--color-blue);
}
.text-accent {
  color: var(--color-pink-2);
}
.bg-light {
  background-color: var(--color-light-1);
}

/* Buttons */
.btn-secondary {
  color: var(--color-white);
  background-color: var(--color-gray-2);
  border-color: var(--color-gray-2);
}

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
button,
select {
  text-transform: none;
}
button,
input {
  overflow: visible;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button {
  border-radius: 0;
}
input[type="button"],
input[type="reset"],
input[type="submit"],
button {
  min-width: 6em;
  padding: 7px 10px;
  border: 1px solid #ababab;
  background-color: #fdfdfd;
  background-color: #fdfdfd;
  margin-left: 10px;
  font-family: "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
  font-size: 11px;
  color: #444;
}
input,
select,
label,
textarea,
button,
option {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  vertical-align: middle;
}