/* moon/style.css and tabs.css are loaded via <link> tags in head-links.htm — no @import waterfall */

:root {
  --app-inner-size: 1280px;
  --primary-color: hsla(219, 45%, 46%, 1);
  --secondary-color: hsla(215, 67%, 20%, 1);
  --water-color: #69d1d8;
  --bg-color: #fff;
  --extra-light-gray: hsl(0, 0%, 93%);
  --gray-light: hsl(0, 0%, 69%);
  --gray-medium: hsl(0, 0%, 58%);
  --gray-dark: hsl(0, 0%, 43%);
  --gray-dark-extra: hsl(0, 0%, 31%);
  --gray-black: hsl(0, 0%, 17%);
  --black: #525252;
  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 600;
  --headerHeight: 160px;
  --grid-columns: 3;
  --grid-columns-md: 2;
  --grid-columns-sm: 1;
  --padding-card: 20px;
  --spacer-1: 4px;
  --spacer-2: 8px;
  --spacer-3: 16px;
  --spacer-4: 24px;
  --spacer-5: 32px;
  --spacer-6: 64px;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 16px;
  --radius-4: 24px;
  --shadow-card: 0 4px 25px rgba(0, 0, 0, 0.10);
  --shadow-card-2: 0 0 15px 0 rgba(0, 0, 0, 0.04);
  --font-size-title-lg: clamp(2rem, 5vw, 2.8rem);
  --font-size-title-md: clamp(1.6rem, 4vw, 2.2rem);
  --font-size-title-sm: clamp(1.3rem, 4vw, 1.8rem);
  --font-size-body-lg: clamp(1.3rem, 3.5vw, 1.8rem);
  --font-size-body-md: clamp(1.3rem, 3vw, 1.6rem);
  --font-size-body-sm: clamp(1.1rem, 2.5vw, 1.4rem);
  --font-main: "Tajawal", sans-serif;
  --padding-section: 50px;
}

.bg-pattern > .section, .section:not(:first-child) {padding-block: var(--padding-section);}

html {scroll-behavior: smooth;}

body {font-family: var(--font-main);background-color: var(--bg-color);line-height: 1.5;font-weight: var(--font-normal);}

@font-face {font-family: Tajawal;src: url("../../assets/font/Tajawal-ExtraLight.ttf") format("truetype");font-weight: 100;font-display: swap;}

@font-face {font-family: Tajawal;src: url("../../assets/font/Tajawal-Light.ttf") format("truetype");font-weight: 200;font-display: swap;}

@font-face {font-family: Tajawal;src: url("../../assets/font/Tajawal-Regular.ttf") format("truetype");font-weight: 300;font-display: swap;}

@font-face {font-family: Tajawal;src: url("../../assets/font/Tajawal-Medium.ttf") format("truetype");font-weight: 400;font-display: swap;}

@font-face {font-family: Tajawal;src: url("../../assets/font/Tajawal-Bold.ttf") format("truetype");font-weight: 500;font-display: swap;}

@font-face {font-family: Tajawal;src: url("../../assets/font/Tajawal-ExtraBold.ttf") format("truetype");font-weight: 600;font-display: swap;}

@font-face {font-family: Tajawal;src: url("../../assets/font/Tajawal-Black.ttf") format("truetype");font-weight: 700;font-display: swap;}

@font-face {font-family: NotoSansHebrew;src: url("../../assets/font/NotoSansHebrew-VariableFont_wdth,wght.ttf") format("truetype");font-display: swap;}

html[lang=he] body {--font-main: NotoSansHebrew;}

@media (min-width: 768px) {
  .mobile-only {
    display: none
  }
}

main {min-height: 70vh;}

.app-wrapper {width: var(--app-inner-size);max-width: 100%;margin: 0 auto;}

.bg-pattern > .section {position: relative;z-index: 1;}

.section-description {font-size: clamp(1.5rem, 3vw, 1.6rem);color: var(--black);text-align: start;line-height: 1.4;}

.section-preview__title, .section-title {font-weight: 500;font-size: var(--font-size-title-md);}

.section-title {text-align: start;color: var(--secondary-color);line-height: 1.5;margin-bottom: 8px;}

html[lang=he] .section-title {font-weight: 700;}

.social-media {position: fixed;inset-inline-end: 0;top: 200px;z-index: 11;}

.social-media .social-list {display: flex;flex-direction: column;gap: 6px;list-style: none;}

.social-media .social-item a {text-decoration: unset;color: var(--secondary-color);font-size: 18px;background: #fff;display: flex;align-items: center;justify-content: center;width: 33px;aspect-ratio: 1;border-radius: 0 var(--radius-2) var(--radius-2) 0;transition: .4s;background-color: hsl(from var(--secondary-color) h s 96%);}

.social-media .social-item a:hover {background-color: hsl(from var(--secondary-color) h s 90%);}

.a11y-action {background: #fff;position: fixed;inset-inline-end: 20px;bottom: 20px;z-index: 11;border-radius: 50%;width: 60px;aspect-ratio: 1;display: flex;align-items: center;justify-content: center;box-shadow: 0 0 10px #0000002b;}

.a11y-action img {max-width: 35px;}

.news-section .card-link {padding: 20px;gap: 10px;}

.card-link {display: flex;flex-direction: column;text-decoration: unset;color: inherit;box-shadow: var(--shadow-card);height: 100%;border-radius: var(--radius-2);}

.card-time {color: var(--gray-dark);}

.card-title {color: var(--primary-color);font-weight: 500;}

.card-desc {color: var(--gray-dark-extra);}

.pagination-list__item > a, .publish-date, .read-more {color: var(--primary-color);}

.main-grid-section .cards-wrapper {display: grid;grid-template-columns:repeat(4, 1fr);gap: 16px;}

.pagination-list {display: flex;align-items: center;gap: 10px;list-style: none;justify-content: center;}

.news-section .links-wrapper .link-item, .pagination-list__item > a {align-items: center;border: 1px solid var(--extra-light-gray);text-decoration: unset;}

.pagination-list__item > a {width: 36px;aspect-ratio: 1;display: flex;justify-content: center;font-size: 12px;font-family: sans-serif;background: #fff;transition: .4s;border-radius: var(--radius-2);}

.pagination-list__item:not(:has(span[class*=icon])) a {border: unset;}

.pagination-list__item.active a {background: hsl(from var(--primary-color) 205 100% 39% / .05);font-weight: 700;}

.pagination-list__item:has(span[class*=icon]) > a:hover {background: var(--primary-color);color: #fff;border-color: transparent;}

.media-wrapper {display: grid;grid-template-columns:1fr 1fr 1fr 1fr;gap: 20px;}

.media-item {aspect-ratio: 1/1;width: 300px;overflow: hidden;}

.lg-item {inset: 0;}

.inner-page {--padding-section: 35px;}

.section-preview__title {color: var(--gray-black);margin-top: 4px;margin-bottom: 10px;}

.section.section-preview {padding-bottom: 0;}

.section.media-section {padding: 0;}

.section-file-title {font-size: var(--font-size-body-md);margin-bottom: 6px;color: var(--primary-color);}

.articles-section .image-wrapper {height: 200px;overflow: hidden;}

.articles-section .card-inner {padding: 20px;display: flex;flex-direction: column;gap: 6px;}

.articles-section .card-time {position: absolute;inset-inline-start: 14px;top: 14px;background: var(--primary-color);color: #fff;padding: 6px 12px;border-radius: var(--radius-3);font-size: 1.2rem;}

.articles-section .card-link {position: relative;overflow: hidden;}

.news-section .links-wrapper {display: grid;grid-template-columns:1fr 1fr 1fr;gap: 20px;}

.news-section .links-wrapper .link-item {display: flex;color: #000;gap: 12px;padding: 16px;border-radius: var(--radius-2);}

.news-section .links-wrapper .link-item .icon-wrapper > * {display: flex;align-items: center;justify-content: center;width: 60px;aspect-ratio: 1;border: 1px solid var(--extra-light-gray);border-radius: 50%;font-size: 3rem;}

.news-section .links-wrapper .link-item .icon-press {font-size: 32px;}

.news-section .links-wrapper .link-item .read-more {display: flex;align-items: baseline;gap: 4px;align-self: end;margin-inline-start: auto;}

.news-section .links-wrapper .link-item .icon-arrow-small {display: flex;align-items: center;justify-content: center;border: 1px solid var(--primary-color);border-radius: 50%;width: 25px;aspect-ratio: 1;font-size: 1.1rem;}

.floating-social-media {position: fixed;inset-inline-end: 0;top: 210px;list-style: none;display: flex;flex-direction: column;gap: 4px;z-index: 374;}

.floating-social-media .social-item > a {display: flex;align-items: center;justify-content: center;width: 40px;aspect-ratio: 1/1;text-decoration: unset;box-shadow: 5px 0 10px 0 rgba(0, 0, 0, .05);border-radius: 0 var(--radius-2) var(--radius-2) 0;color: var(--primary-color);font-size: 17px;background: #fff;}

.image-wrapper.no-image {display: flex;align-items: center;justify-content: center;}

.image-wrapper.no-image img {width: auto !important;height: auto !important;}

@media (max-width: 1200px) {
  .main-grid-section .cards-wrapper, .media-wrapper {
    grid-template-columns:1fr 1fr
  }
}

@media (max-width: 767px) {
  .inner-page, :root {
    --padding-section: 25px
  }

  .a11y-action {
    width: 50px;
    bottom: 130px
  }

  .a11y-action img {
    max-width: 30px
  }

  .mobile-nav .floating-social-media {
    position: absolute;
    top: unset;
    z-index: 11;
    bottom: 108%;
    inset-inline-end: 50%;
    transform: translate(-50%, 100%);
    opacity: 0;
    transition: opacity .3s, transform .4s
  }

  .mobile-nav .floating-social-media.active {
    transform: translate(-50%, 0);
    opacity: 1
  }

  .mobile-nav .list-item.social-action {
    position: relative
  }

  .mobile-nav .social-item > a {
    border-radius: var(--radius-2)
  }

  .main-grid-section .cards-wrapper, .media-wrapper, .news-section .links-wrapper {
    grid-template-columns:1fr
  }

  .news-section .links-wrapper .card-title {
    width: calc(100% - 80px)
  }

  .news-section .links-wrapper .link-item {
    flex-wrap: wrap
  }

  .news-section .links-wrapper .link-item .read-more {
    margin-top: 20px
  }
}