/*
 * Harbor skin (site-kit ui_skin: harbor) — simple Yokohama look.
 * One main color + a little yellow; flat cards, no gradients or heavy shadows.
 * Colors come from media-config design_tokens. Page structure stays shared.
 */

body.dbm-skin-harbor {
  --simple-main: var(--dbm-primary-color);
  --simple-main-dark: var(--dbm-cta-primary-hover-color);
  --simple-ink: var(--dbm-primary-deep-color);
  --simple-mark: var(--dbm-highlight-color);
  --simple-tint: var(--dbm-soft-surface-color);
  --simple-line: var(--dbm-border-color);
}

/* Header. */
body.dbm-skin-harbor .dbm-site-header {
  border-bottom: 1px solid var(--simple-line);
  box-shadow: none;
}

body.dbm-skin-harbor .dbm-brand-icon {
  background: var(--simple-main);
  border-radius: 10px;
}

body.dbm-skin-harbor .dbm-publisher {
  color: var(--simple-main);
}

/* Hero. */
body.dbm-skin-harbor .dbm-eyebrow {
  color: var(--simple-main);
  font-size: 14px;
  letter-spacing: .08em;
}

body.dbm-skin-harbor .dbm-hero h1 {
  color: var(--simple-ink);
}

body.dbm-skin-harbor .dbm-page:not(.dbm-landing) > .dbm-hero h1 {
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.25;
}

/* Portrait illustrations must not stretch the hero. */
body.dbm-skin-harbor .dbm-page:not(.dbm-landing) > .dbm-hero .dbm-hero-image img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-height: 380px;
  width: auto;
}

body.dbm-skin-harbor .dbm-landing .dbm-hero h1 .dbm-hero-area,
body.dbm-skin-harbor .dbm-landing .dbm-hero h1 .dbm-hero-offering {
  background: linear-gradient(transparent 68%, var(--simple-mark) 68%);
  color: var(--simple-ink);
}

/* Buttons: solid main color, outline for secondary, no eye animation. */
body.dbm-skin-harbor .dbm-eye-button {
  background: transparent;
  border-radius: var(--dbm-pill-radius);
}

body.dbm-skin-harbor .dbm-eye-button-eyes {
  display: none;
}

body.dbm-skin-harbor .dbm-eye-button-cover {
  box-shadow: none;
  transition: background-color .2s ease, color .2s ease;
}

body.dbm-skin-harbor .dbm-eye-button:hover .dbm-eye-button-cover,
body.dbm-skin-harbor .dbm-eye-button:focus-visible .dbm-eye-button-cover,
body.dbm-skin-harbor .dbm-eye-button:active .dbm-eye-button-cover {
  transform: none;
}

body.dbm-skin-harbor .dbm-button-primary.dbm-eye-button .dbm-eye-button-cover {
  background: var(--simple-main);
}

body.dbm-skin-harbor .dbm-button-primary.dbm-eye-button:hover .dbm-eye-button-cover,
body.dbm-skin-harbor .dbm-button-primary.dbm-eye-button:focus-visible .dbm-eye-button-cover {
  background: var(--simple-main-dark);
}

body.dbm-skin-harbor .dbm-button-secondary.dbm-eye-button .dbm-eye-button-cover {
  background: #fff;
  border: 2px solid var(--simple-main);
  color: var(--simple-main);
}

body.dbm-skin-harbor .dbm-button-secondary.dbm-eye-button:hover .dbm-eye-button-cover,
body.dbm-skin-harbor .dbm-button-secondary.dbm-eye-button:focus-visible .dbm-eye-button-cover {
  background: var(--simple-tint);
}

body.dbm-skin-harbor .dbm-button-secondary.dbm-eye-button,
body.dbm-skin-harbor .dbm-button-secondary.dbm-eye-button:hover,
body.dbm-skin-harbor .dbm-button-secondary.dbm-eye-button:visited {
  color: var(--simple-main);
}

body.dbm-skin-harbor .dbm-button:not(.dbm-eye-button) {
  border-radius: var(--dbm-pill-radius);
}

/* Section headings: left aligned, plain icon, short main-color rule. */
body.dbm-skin-harbor .dbm-section h2,
body.dbm-skin-harbor .dbm-section-heading {
  color: var(--simple-ink);
  font-size: 28px;
  text-align: left;
}

body.dbm-skin-harbor .dbm-section-heading {
  gap: 10px;
  justify-content: flex-start;
  margin-bottom: 20px;
  padding-bottom: 12px;
  position: relative;
}

body.dbm-skin-harbor .dbm-section-heading::after {
  background: var(--simple-main);
  border-radius: 2px;
  bottom: 0;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 40px;
}

body.dbm-skin-harbor .dbm-section-heading-ic svg {
  color: var(--simple-main);
  height: 28px;
  width: 28px;
}

body.dbm-skin-harbor .dbm-landing .dbm-section-heading-area {
  color: var(--simple-main);
}

/* Cards: flat white with a thin line. */
body.dbm-skin-harbor .dbm-entities-card,
body.dbm-skin-harbor .dbm-area-card,
body.dbm-skin-harbor .dbm-service-card,
body.dbm-skin-harbor .dbm-entity-card,
body.dbm-skin-harbor .dbm-flow-card,
body.dbm-skin-harbor .dbm-slide-card,
body.dbm-skin-harbor .dbm-kpi {
  border: 1px solid var(--simple-line);
  box-shadow: var(--dbm-card-shadow);
}

body.dbm-skin-harbor a.dbm-service-card,
body.dbm-skin-harbor a.dbm-slide-card {
  transition: border-color .2s ease;
}

body.dbm-skin-harbor a.dbm-service-card:hover,
body.dbm-skin-harbor a.dbm-slide-card:hover {
  border-color: var(--simple-main);
}

body.dbm-skin-harbor .dbm-service-card-image {
  background: var(--simple-tint);
  border-radius: 10px;
}

body.dbm-skin-harbor .dbm-service-card-cta {
  background: transparent;
  border: 0;
  color: var(--simple-main);
  padding: 2px 0;
}

body.dbm-skin-harbor .dbm-service-card-cta::after {
  content: " →";
}

/* KPI. */
body.dbm-skin-harbor .dbm-kpi strong {
  color: var(--simple-main);
  font-size: 38px;
  font-variant-numeric: tabular-nums;
}

/* Comparison tables. */
body.dbm-skin-harbor .dbm-comparison-wrap th,
body.dbm-skin-harbor .dbm-compare-table th {
  background: var(--simple-tint);
  color: var(--simple-ink);
}

/* Locked-area entry button. */
body.dbm-skin-harbor .dbm-national-link .dbm-area-trigger {
  background: var(--simple-main);
  border: 0;
  border-radius: var(--dbm-pill-radius);
  color: #fff;
  font-weight: 800;
}

body.dbm-skin-harbor .dbm-national-link .dbm-area-trigger:hover {
  background: var(--simple-main-dark);
}

/* Ward map: same tile map as the prefecture map, in the site palette. */
body.dbm-skin-harbor .dbm-prefecture-map {
  background: linear-gradient(135deg, #f4fafb, #ffffff);
}

body.dbm-skin-harbor .dbm-prefecture-map-svg path.is-enabled {
  fill: #9dd3dc;
}

body.dbm-skin-harbor .dbm-prefecture-map-svg path.is-enabled:hover,
body.dbm-skin-harbor .dbm-prefecture-map-svg path.is-enabled:focus-visible {
  fill: var(--simple-main);
  filter: drop-shadow(0 8px 12px rgba(26, 138, 155, .22));
}

body.dbm-skin-harbor .dbm-prefecture-map-label {
  fill: var(--simple-ink);
}

body.dbm-skin-harbor .dbm-prefecture-map-tooltip {
  border-color: var(--simple-main);
  box-shadow: 0 6px 16px rgba(26, 138, 155, .16);
  color: var(--simple-ink);
}

/* Flow. */
body.dbm-skin-harbor .dbm-flow-list li {
  border-color: var(--simple-line);
  border-radius: 12px;
}

body.dbm-skin-harbor .dbm-flow-list li::before {
  background: var(--simple-main);
}

/* FAQ. */
body.dbm-skin-harbor .dbm-faq details {
  border: 1px solid var(--simple-line);
  border-radius: 12px;
}

/* Side menu: plain card instead of the cloud shape. */
body.dbm-skin-harbor .dbm-side-menu {
  border: 1px solid var(--simple-line);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(27, 43, 58, .1);
  padding-top: 18px;
}

body.dbm-skin-harbor .dbm-side-menu::before,
body.dbm-skin-harbor .dbm-side-menu::after {
  display: none;
}

body.dbm-skin-harbor .dbm-side-menu .dbm-scroll-top {
  top: -22px;
}

/* Footer. */
body.dbm-skin-harbor .dbm-site-footer {
  background: var(--simple-ink);
}

/* Hard-coded housework blues/oranges in the shared comparison UI. */
body.dbm-skin-harbor .dbm-compare-dock__fab,
body.dbm-skin-harbor .dbm-compare-dock__btn--primary {
  background: var(--simple-main);
  box-shadow: 0 4px 12px rgba(27, 43, 58, .15);
}

body.dbm-skin-harbor .dbm-compare-dock__fab-count,
body.dbm-skin-harbor .dbm-compare-badge svg {
  color: var(--simple-main);
}

body.dbm-skin-harbor .dbm-compare-dock__chip-check {
  background: var(--simple-main);
}

body.dbm-skin-harbor .dbm-compare-map__point.is-active,
body.dbm-skin-harbor .dbm-compare-dock__chip:focus-visible .dbm-compare-dock__chip-fallback {
  border-color: var(--simple-main);
}

body.dbm-skin-harbor .dbm-compare-map__card {
  border-color: var(--simple-line);
}

body.dbm-skin-harbor .dbm-inline-compare-check input {
  accent-color: var(--simple-main);
}

@media (max-width: 768px) {
  body.dbm-skin-harbor .dbm-page:not(.dbm-landing) > .dbm-hero .dbm-hero-image img {
    max-height: 260px;
  }

  body.dbm-skin-harbor .dbm-section h2,
  body.dbm-skin-harbor .dbm-section-heading {
    font-size: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dbm-skin-harbor .dbm-eye-button-cover,
  body.dbm-skin-harbor a.dbm-service-card,
  body.dbm-skin-harbor a.dbm-slide-card {
    transition: none;
  }
}