/* ==========================================================================
   WITH Immigration Consulting — Design Tokens & Base Styles
   ========================================================================== */

:root {
  /* Brand colors */
  --color-primary: #0f2a4a;      /* deep navy */
  --color-primary-dark: #081b31;
  --color-primary-light: #1c3f66;
  --color-accent: #c9a45c;       /* gold */
  --color-accent-dark: #a5813f;

  /* Neutrals */
  --color-text: #222831;
  --color-text-light: #6b7280;
  --color-text-faint: #9aa1ac;
  --color-bg: #ffffff;
  --color-bg-alt: #f6f7f9;
  --color-bg-dark: #0b1f38;
  --color-border: #e6e8ec;

  /* Layout */
  --container-width: 1200px;
  --header-height: 90px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 10px rgba(15, 42, 74, 0.06);
  --shadow-md: 0 10px 30px rgba(15, 42, 74, 0.10);
  --shadow-lg: 0 20px 50px rgba(15, 42, 74, 0.16);

  /* Type */
  --font-base: "Pretendard", "Poppins", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  --font-en: "Poppins", "Pretendard", sans-serif;
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 16px;
  word-break: keep-all;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Section title pattern used across pages */
.section-title {
  text-align: center;
  margin-bottom: 48px;
}

.section-title .eyebrow {
  display: inline-block;
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 14px;
  color: var(--color-accent-dark);
  margin-bottom: 12px;
}

.section-title h2 {
  font-size: 34px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
}

.section-title p {
  margin-top: 14px;
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-primary-light);
}

.btn-accent {
  background: var(--color-accent);
  color: #1a1300;
}
.btn-accent:hover {
  background: var(--color-accent-dark);
  color: #fff;
}

.btn-outline {
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  background: #fff;
}
.btn-outline:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-alt);
}

/* Outline button variant for use on dark backgrounds (hero, cta-band) */
.btn-outline-light {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  background: transparent;
}
.btn-outline-light:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-lg { padding: 18px 36px; font-size: 16px; }
.btn-block { width: 100%; }

/* Tag / badge */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.badge-ongoing { background: rgba(15,42,74,0.08); color: var(--color-primary); }
.badge-done { background: rgba(201,164,92,0.16); color: var(--color-accent-dark); }

/* Image placeholder (until AI-generated images are dropped in) */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef1f5 0%, #dfe4ea 100%);
  color: var(--color-text-faint);
  font-size: 13px;
  text-align: center;
  padding: 12px;
  width: 100%;
  height: 100%;
  min-height: 120px;
  border-radius: inherit;
}
.img-placeholder::before {
  content: "🖼";
  display: block;
  font-size: 22px;
  margin-bottom: 6px;
}

/* Real photos dropped into thumb/img containers */
.thumb,
.gallery-main,
.about-intro .img,
.consultant-card .img,
.consultant-detail-card .img {
  overflow: hidden;
}
.thumb img,
.gallery-main img,
.about-intro .img img,
.consultant-card .img img,
.consultant-detail-card .img img,
.project-body .gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-body .gallery-grid img {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
}

a, button { cursor: pointer; }