/* ============================================================
   base.css — shared across every page (index, blog, blog-detail)
   Contains: web fonts, design tokens, reset, layout primitives,
   nav, footer, button system, iconify-icon sizing.
   Page-specific styles live in assets/css/pages/*.css
   ============================================================ */

/* ───── Pretendard — canonical orioncactus CDN ───── */
/* Variable font: one file covers every weight 45–920 (best perf). */
@font-face{
  font-family:'Pretendard Variable';
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
}
/* Static fallbacks per weight, with local() so the OS copy is used when present. */
@font-face{ font-family:'Pretendard'; font-weight:100; font-display:swap; src:local('Pretendard Thin'),       url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Thin.woff2')       format('woff2'); }
@font-face{ font-family:'Pretendard'; font-weight:200; font-display:swap; src:local('Pretendard ExtraLight'), url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-ExtraLight.woff2') format('woff2'); }
@font-face{ font-family:'Pretendard'; font-weight:300; font-display:swap; src:local('Pretendard Light'),      url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Light.woff2')      format('woff2'); }
@font-face{ font-family:'Pretendard'; font-weight:400; font-display:swap; src:local('Pretendard Regular'),    url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2')    format('woff2'); }
@font-face{ font-family:'Pretendard'; font-weight:500; font-display:swap; src:local('Pretendard Medium'),     url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2')     format('woff2'); }
@font-face{ font-family:'Pretendard'; font-weight:600; font-display:swap; src:local('Pretendard SemiBold'),   url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-SemiBold.woff2')   format('woff2'); }
@font-face{ font-family:'Pretendard'; font-weight:700; font-display:swap; src:local('Pretendard Bold'),       url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2')       format('woff2'); }
@font-face{ font-family:'Pretendard'; font-weight:800; font-display:swap; src:local('Pretendard ExtraBold'),  url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-ExtraBold.woff2')  format('woff2'); }
@font-face{ font-family:'Pretendard'; font-weight:900; font-display:swap; src:local('Pretendard Black'),      url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Black.woff2')      format('woff2'); }

/* ───── Complex-script fonts (Noto Sans, variable, weight 100–900) ─────
   Pretendard не содержит этих письменностей → раньше рендер падал на системный
   фолбэк (разный на каждой машине, часто с поломанным шейпингом). Здесь — Noto
   Sans с полноценными OpenType-таблицами шейпинга для каждого скрипта.

   unicode-range делает подключение zero-cost: браузер скачивает woff2 ТОЛЬКО
   когда на странице реально присутствуют символы соответствующего диапазона.
   Страница без бирманского текста не грузит ни байта Myanmar-шрифта.

   Расширение: новый язык = ещё один блок (свой unicode-range) + имя семейства
   в стек `body` ниже + код языка в :lang()-список в конце файла. */
@font-face{ font-family:'Noto Sans Myanmar';    font-weight:100 900; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/noto-sans-myanmar:vf@latest/myanmar-wght-normal.woff2')       format('woff2-variations');
  unicode-range:U+1000-109F,U+A9E0-A9FF,U+AA60-AA7F,U+116D0-116E3,U+200C-200D,U+25CC; }
@font-face{ font-family:'Noto Sans Thai';       font-weight:100 900; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/noto-sans-thai:vf@latest/thai-wght-normal.woff2')             format('woff2-variations');
  unicode-range:U+0E00-0E7F,U+200C-200D,U+25CC; }
@font-face{ font-family:'Noto Sans Khmer';      font-weight:100 900; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/noto-sans-khmer:vf@latest/khmer-wght-normal.woff2')           format('woff2-variations');
  unicode-range:U+1780-17FF,U+19E0-19FF,U+200C-200D,U+25CC; }
@font-face{ font-family:'Noto Sans Lao';        font-weight:100 900; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/noto-sans-lao:vf@latest/lao-wght-normal.woff2')               format('woff2-variations');
  unicode-range:U+0E80-0EFF,U+200C-200D,U+25CC; }
@font-face{ font-family:'Noto Sans Sinhala';    font-weight:100 900; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/noto-sans-sinhala:vf@latest/sinhala-wght-normal.woff2')       format('woff2-variations');
  unicode-range:U+0D80-0DFF,U+200C-200D,U+25CC; }
@font-face{ font-family:'Noto Sans Devanagari'; font-weight:100 900; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/noto-sans-devanagari:vf@latest/devanagari-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0900-097F,U+1CD0-1CFF,U+A8E0-A8FF,U+200C-200D,U+25CC; }
@font-face{ font-family:'Noto Sans Bengali';    font-weight:100 900; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/noto-sans-bengali:vf@latest/bengali-wght-normal.woff2')       format('woff2-variations');
  unicode-range:U+0980-09FF,U+200C-200D,U+25CC; }
@font-face{ font-family:'Noto Sans Tamil';      font-weight:100 900; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/noto-sans-tamil:vf@latest/tamil-wght-normal.woff2')           format('woff2-variations');
  unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC; }
@font-face{ font-family:'Noto Sans Arabic';     font-weight:100 900; font-style:normal; font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/noto-sans-arabic:vf@latest/arabic-wght-normal.woff2')         format('woff2-variations');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200D,U+25CC; }

/* ───── Tokens ───── */
:root{
  --navy: rgb(35, 34, 100);
  --pink: #fc7cb4;
  --ink: #0f1020;
  --ink-2: #4a4b5e;
  --ink-3: #8a8b99;
  --line: #ececef;
  --bg-soft: #f5f5f7;
  --bg-softer: #fafafb;
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --container: 1240px;
  --nav-height: 76px;
}

/* ───── Reset ───── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body{
  font-family:
    'Pretendard Variable', 'Pretendard',
    'Noto Sans Myanmar', 'Noto Sans Thai', 'Noto Sans Khmer', 'Noto Sans Lao',
    'Noto Sans Sinhala', 'Noto Sans Devanagari', 'Noto Sans Bengali',
    'Noto Sans Tamil', 'Noto Sans Arabic',
    -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.02em;
  line-height: 1.5;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ───── Complex scripts: снимаем latin-трекинг ─────
   `letter-spacing: -0.02em` на body настроен под латиницу/корейский. Для
   сложных письменностей отрицательный трекинг слипает кластеры — медиали и
   огласовки наезжают друг на друга (как было на бирманском заголовке).
   :lang() имеет специфичность выше, чем селектор типа `body`, и наследуется
   вниз по дереву, поэтому корректно перекрывает значение из body.

   ВАЖНО: требует корректного языка в разметке — `<html lang="my">` или
   `lang="my"` на блоке с текстом (для бирманского именно `my`, не `ko`).
   Для блоков без lang-атрибута применяй утилиту `.cx-text`. */
:lang(my), :lang(th), :lang(km), :lang(lo), :lang(si),
:lang(hi), :lang(mr), :lang(ne), :lang(sa),
:lang(bn), :lang(as), :lang(ta), :lang(te), :lang(kn), :lang(ml), :lang(gu), :lang(pa),
:lang(ar), :lang(fa), :lang(ur), :lang(he){
  letter-spacing: normal;
  word-spacing: normal;
  font-variant-ligatures: normal;
}
/* Письменности со стэкингом требуют больше вертикали */
:lang(my), :lang(km), :lang(si), :lang(bn), :lang(ta){ line-height: 1.7; }

/* Фолбэк-утилита, если у блока нет своего lang-атрибута */
.cx-text{ letter-spacing: normal; word-spacing: normal; }

/* ───── Iconify Solar icons via CDN web component ───── */
iconify-icon{
  display: inline-flex;
  width: 1em; height: 1em;
  vertical-align: -0.125em;
  line-height: 1;
}

/* ───── Layout ───── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ───── Buttons ───── */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px;
  border-radius: 999px; font-weight: 700; font-size: 15px;
  border: 0; transition: transform .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
  font-family: inherit;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--navy); color: #fff; }
.btn-primary:hover{ background: #1a1958; }
.btn-pink{ background: var(--pink); color: #fff; }
.btn-pink:hover{ background: #f96aa9; }
.btn-ghost{ background: var(--bg-soft); color: var(--ink); }
.btn-ghost:hover{ background: #ececf0; }
.btn-outline{ background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-lg{ height: 60px; padding: 0 30px; font-size: 17px; }

/* ───── Top nav (sticky) ───── */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  height: var(--nav-height);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.brand{
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 22px; letter-spacing: -0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand .dot{
  width: 10px; height: 10px; border-radius: 999px; background: var(--pink);
  display: inline-block;
}
.nav-menu{
  display: flex; gap: 4px; align-items: center;
  font-weight: 600; font-size: 15px;
}
.nav-menu a{
  padding: 9px 16px; border-radius: 999px;
  color: var(--ink-2); white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.nav-menu a:hover{ background: var(--bg-soft); color: var(--ink); }
.nav-menu a.on{ background: #fef1f7; color: #c8307c; font-weight: 700; }

.nav-cta{
  display: flex; gap: 10px; align-items: center;
}
.nav-cta .btn{ height: 44px; }

/* ───── Language switcher ───── */
.lang-wrap{ position: relative; display: inline-flex; }
.lang-switch{
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink);
  font-family: inherit; font-weight: 700; font-size: 14px;
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease;
}
.lang-switch:hover{ background: var(--bg-soft); border-color: #d8d8df; }
.lang-switch .fi{ font-size: 17px; border-radius: 3px; }
.lang-switch iconify-icon{ color: var(--ink-3); transition: transform .18s ease; }
.lang-menu{
  position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 40px -16px rgba(15,16,32,0.25);
  min-width: 200px; padding: 6px; z-index: 60;
}
.lang-menu a{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--ink-2); font-size: 14px; font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.lang-menu a:hover{ background: var(--bg-soft); color: var(--ink); }
.lang-menu a.current{ background: #fef1f7; color: #c8307c; font-weight: 700; }
.lang-menu a .fi{ font-size: 18px; border-radius: 3px; }

/* ───── Footer (4-column rich) ───── */
.site-footer{
  background: #ffffff;
  padding: 80px 0 56px;
  border-top: 1px solid var(--line);
}
.foot-top{
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px;
  margin-bottom: 64px;
}
.foot-brand .brand{ margin-bottom: 16px; }
.foot-brand p{ color: var(--ink-2); font-size: 14px; line-height: 1.65; max-width: 320px;}
.foot-col h4{
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 18px;
}
.foot-col ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 12px;}
.foot-col ul a{ font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.foot-col ul a:hover{ color: var(--ink); }
.foot-col ul .foot-note{ font-size: 14.5px; font-weight: 500; color: var(--ink-3); }

.socials{ display: flex; gap: 10px; margin-top: 22px; }
.social-btn{
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--bg-soft);
  display: grid; place-items: center;
  color: var(--ink);
  transition: background .15s ease, color .15s ease;
}
.social-btn:hover{ background: var(--navy); color: #fff;}

.foot-bottom{
  border-top: 1px solid var(--line);
  padding-top: 32px;
  display: flex; justify-content: space-between; flex-wrap: wrap;
  color: var(--ink-3); font-size: 13px; gap: 16px;
}
.foot-bottom .legal a{ margin-right: 18px; color: var(--ink-2); }

/* ───── Responsive (shared) ───── */
@media (max-width: 1024px){
  .foot-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .nav-menu{ display: none; }
  .nav-cta .btn.btn-ghost{ display: none; }
  .foot-top{ grid-template-columns: 1fr; gap: 32px;}
}