:root {
  --brand-primary: #1d7ed0; /* 青藍色 */
  --brand-primary-dark: #155faa;
  --brand-bg-soft: #f3f7fb;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--brand-primary) !important;
}

.navbar-brand-logo {
  display: block;
  height: 44px;
  max-height: 48px;
  width: auto;
}

@media (max-width: 576px) {
  .navbar-brand-logo {
    height: 32px;
    max-height: 36px;
  }
}

.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--brand-primary);
}

/* 首頁 hero 與圖片卡片 */
.hero-section {
  background: radial-gradient(circle at top left, rgba(29, 126, 208, 0.18), transparent),
              radial-gradient(circle at bottom right, rgba(21, 95, 170, 0.18), transparent),
              linear-gradient(135deg, #ffffff, #f5f9ff);
  border-radius: 1.5rem;
}

.image-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
}

.image-card::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(79, 70, 229, 0.16));
  z-index: -1;
}

.image-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.25rem;
}

.section-soft-bg {
  background-color: var(--brand-bg-soft);
  border-radius: 1.5rem;
}

.tech-highlight-list li::marker {
  color: var(--brand-primary);
}

.form-highlight {
  border-left: 4px solid var(--brand-primary);
  padding-left: 1rem;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}