/* Học tiếng Hàn / 한국어 학습 - style.css
   Mobile-first, no external assets. */

:root {
  --color-bg: #ffffff;
  --color-surface: #f7f7f9;
  --color-border: #e2e2e8;
  --color-text: #1c1c22;
  --color-text-muted: #63636e;
  --color-accent: #c8102e;   /* shared red tone (KR/VN flags) */
  --color-accent-dark: #96001f;
  --color-focus: #1a56db;
  --radius: 10px;
  --max-width: 960px;

  /* Pastel box palette, applied in order: 자주-분홍-주황-노랑-연두-민트-하늘-파랑-네이비-보라 */
  --htk-1: 224, 150, 186; /* 자주색 */
  --htk-2: 246, 178, 206; /* 분홍색 */
  --htk-3: 249, 195, 150; /* 주황색 */
  --htk-4: 247, 222, 140; /* 노란색 */
  --htk-5: 205, 226, 150; /* 연두색 */
  --htk-6: 152, 224, 196; /* 민트색 */
  --htk-7: 150, 210, 240; /* 하늘색 */
  --htk-8: 156, 184, 242; /* 파란색 */
  --htk-9: 150, 164, 214; /* 네이비색 */
  --htk-10: 199, 172, 230; /* 보라색 */
  --htk-ink: #33232f;
  --htk-alpha: 0.5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #16161a;
    --color-surface: #1f1f24;
    --color-border: #2e2e35;
    --color-text: #f2f2f5;
    --color-text-muted: #a3a3ad;
    --color-accent: #ff5a72;
    --color-accent-dark: #ff8395;
    --color-focus: #5b8dff;
    --htk-alpha: 0.85; /* keep boxes reading as light pastel on a dark page */
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic",
    "Noto Sans KR", "Noto Sans", Roboto, Arial, sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

img {
  max-width: 100%;
}

a {
  color: var(--color-accent-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-accent);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: var(--radius) 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}

/* Visible focus state for all interactive elements */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Pastel "water-drop" box system, shared by all buttons and text boxes.
   Corners: top-left & bottom-right rounded, top-right & bottom-left square. */
.htk-box {
  --htk-box-rgb: var(--htk-1);
  position: relative;
  border-radius: 22px 0 22px 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background-color: rgba(var(--htk-box-rgb), var(--htk-alpha));
  background-image: radial-gradient(
      120% 140% at 20% 15%,
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0) 55%
    ),
    radial-gradient(
      140% 160% at 85% 95%,
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0) 60%
    );
  box-shadow: 0 6px 16px -6px rgba(40, 20, 35, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: var(--htk-ink);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.htk-box:hover {
  border-color: rgba(255, 255, 255, 0.85);
  background-color: rgba(var(--htk-box-rgb), calc(var(--htk-alpha) + 0.12));
}

.htk-color-1 { --htk-box-rgb: var(--htk-1); }
.htk-color-2 { --htk-box-rgb: var(--htk-2); }
.htk-color-3 { --htk-box-rgb: var(--htk-3); }
.htk-color-4 { --htk-box-rgb: var(--htk-4); }
.htk-color-5 { --htk-box-rgb: var(--htk-5); }
.htk-color-6 { --htk-box-rgb: var(--htk-6); }
.htk-color-7 { --htk-box-rgb: var(--htk-7); }
.htk-color-8 { --htk-box-rgb: var(--htk-8); }
.htk-color-9 { --htk-box-rgb: var(--htk-9); }
.htk-color-10 { --htk-box-rgb: var(--htk-10); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Bilingual text priority
   The non-selected language is never fully hidden, just de-emphasized. */
.lang-vi,
.lang-ko {
  display: block;
}

[data-lang="vi"] .lang-vi {
  font-weight: 600;
  color: var(--color-text);
}

[data-lang="vi"] .lang-ko {
  font-size: 0.85em;
  color: var(--color-text-muted);
  font-weight: 400;
}

[data-lang="ko"] .lang-ko {
  font-weight: 600;
  color: var(--color-text);
}

[data-lang="ko"] .lang-vi {
  font-size: 0.85em;
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Inside a pastel box, always use dark ink text for readability
   regardless of light/dark theme, keeping the selected language bolder. */
.htk-box .lang-vi,
.htk-box .lang-ko {
  color: var(--htk-ink);
}

[data-lang="ko"] .htk-box .lang-vi,
[data-lang="vi"] .htk-box .lang-ko {
  opacity: 0.65;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--color-text);
}

.brand:hover {
  text-decoration: none;
}

.brand-vi {
  font-size: 1.1rem;
}

.brand-ko {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.brand-sep {
  color: var(--color-text-muted);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.lang-toggle-sep {
  opacity: 0.6;
}

.lang-toggle-option {
  opacity: 0.55;
}

.lang-toggle-option[data-active="true"] {
  opacity: 1;
}

.back-link {
  display: inline-flex;
  font-size: 0.85rem;
  padding: 0.4rem 0.7rem;
}

.back-link:hover {
  text-decoration: none;
}

.back-link .lang-vi,
.back-link .lang-ko {
  display: inline;
}

.back-link .lang-vi::after {
  content: " / ";
  color: rgba(51, 35, 47, 0.5);
}

[data-lang="ko"] .back-link .lang-vi::after {
  content: "";
}

[data-lang="ko"] .back-link .lang-ko::before {
  content: "";
}

/* Main / hero */
main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.hero {
  margin-bottom: 1.75rem;
}

.hero h1 {
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
}

.hero-desc {
  margin: 0;
  color: var(--color-text-muted);
}

.hero-desc .lang-vi,
.hero-desc .lang-ko {
  display: block;
}

/* Menu grid */
.menu-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

@media (min-width: 600px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .menu-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.menu-card {
  width: 100%;
  text-align: left;
  padding: 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.menu-card-title .lang-vi,
.menu-card-title .lang-ko {
  display: block;
}

.menu-card-status {
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  color: var(--htk-ink);
}

.status-live {
  margin-top: 1rem;
  min-height: 1.2em;
  color: var(--color-accent-dark);
  font-size: 0.9rem;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 1.25rem 1rem;
}

.footer-links {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.footer-links a {
  display: inline-flex;
  flex-direction: column;
  font-size: 0.85rem;
  padding: 0.45rem 0.75rem;
}

.footer-links a:hover {
  text-decoration: none;
}

.footer-link-main {
  font-weight: 700;
  color: var(--htk-ink);
}

.footer-copy {
  max-width: var(--max-width);
  margin: 0 auto;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}