/**
 * Custom overrides for Metro CSS
 * Primary color: #7E6100
 * Form inputs use default MetroUI gray styling; primary color only for headings/buttons.
 */

@import url('https://fonts.googleapis.com/css2?family=Delius&family=Noto+Sans:wght@400;700&display=swap');

/* Headings h1–h3: Delius for Latin, Noto Sans for Cyrillic */
h1, h2, h3 {
  font-family: 'Delius', 'Noto Sans', sans-serif;
  font-weight: 300;
  color: #7E6100;
}

:root {
  /* Accent color palette */
  --accent-color: #7E6100;
  --accent-light: #B8860B;
  --accent-dark: #6B5300;

  --selected-color: #7E6100;
  /* Required fields: accent dashed border */
  --input-required-color: #7E6100;
  /* Focused field: light-accent glow */
  --input-box-shadow: rgba(184, 134, 11, 0.42);
}

/* Required fields: accent dashed border, light-accent focus glow */
input.required:focus,
textarea.required:focus,
select.required:focus,
.input.required:focus,
.textarea.required:focus,
.select.required:focus,
.metro-input.required:focus,
input.required.focused,
textarea.required.focused,
select.required.focused,
.input.required.focused,
.textarea.required.focused,
.select.required.focused,
.metro-input.required.focused {
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.42) !important;
}

/* Progress bar: accent fill by default */
.progress-component .bar {
  background-color: var(--accent-color) !important;
}

/* Status badges: muted, solid colors instead of bright */
.badge.success {
  background-color: hsl(140, 38%, 42%) !important;
  border-color: hsl(140, 38%, 42%) !important;
}
.badge.alert {
  background-color: hsl(348, 45%, 42%) !important;
  border-color: hsl(348, 45%, 42%) !important;
}
.badge.warning {
  background-color: hsl(39, 65%, 45%) !important;
  border-color: hsl(39, 65%, 45%) !important;
}
.badge.info {
  background-color: hsl(215, 55%, 42%) !important;
  border-color: hsl(215, 55%, 42%) !important;
}
.badge.dark {
  background-color: hsl(0, 0%, 35%) !important;
  border-color: hsl(0, 0%, 35%) !important;
}

/* Accent utilities */
.bd-accent { border-color: var(--accent-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.fg-accent { color: var(--accent-color) !important; }

.bd-light-accent { border-color: var(--accent-light) !important; }
.bg-light-accent { background-color: var(--accent-light) !important; }
.fg-light-accent { color: var(--accent-light) !important; }

.bd-dark-accent { border-color: var(--accent-dark) !important; }
.bg-dark-accent { background-color: var(--accent-dark) !important; }
.fg-dark-accent { color: var(--accent-dark) !important; }

/* Primary button (Metro uses .primary, not .btn-primary) */
button.primary,
.button.primary,
.button.btn-primary,
.button.bg-primary {
  background-color: #7E6100 !important;
  color: #fff !important;
  border-color: #7E6100 !important;
}
button.primary:hover,
.button.primary:hover,
.button.btn-primary:hover,
.button.bg-primary:hover {
  background-color: #6B5300 !important;
  border-color: #6B5300 !important;
  color: #fff !important;
}
button.primary:active,
button.primary:focus,
.button.primary:active,
.button.primary:focus,
.button.btn-primary:active,
.button.btn-primary:focus,
.button.bg-primary:active,
.button.bg-primary:focus {
  background-color: #7E6100 !important;
  border-color: #7E6100 !important;
  outline-color: #7E6100 !important;
}

/* Primary outline button: accent instead of default red */
button.primary.outline,
.button.primary.outline,
.button.outline.primary {
  color: #7E6100 !important;
  border-color: #7E6100 !important;
  background-color: transparent !important;
}
button.primary.outline .dropdown-caret,
.button.primary.outline .dropdown-caret,
.button.outline.primary .dropdown-caret {
  fill: #7E6100 !important;
}
button.primary.outline:hover,
.button.primary.outline:hover,
.button.outline.primary:hover {
  color: #fff !important;
  background-color: #7E6100 !important;
  border-color: #7E6100 !important;
}
button.primary.outline:active,
.button.primary.outline:active,
.button.outline.primary:active,
button.primary.outline:focus,
.button.primary.outline:focus,
.button.outline.primary:focus {
  color: #fff !important;
  background-color: #6B5300 !important;
  border-color: #6B5300 !important;
  outline-color: #7E6100 !important;
}

/* Skill-box for projects: dark-gray outer border, light divider, subtle shadow, badges white on accent */
.skill-box-project {
  --skill-box-border-radius: 6px;
  --skill-box-border-color: hsl(0, 0%, 55%); /* dark-gray */
  --skill-box-background: transparent;
  --skill-box-header-background: transparent;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.1);
  --skill-box-color: inherit;
  --skill-box-header-color: inherit;
}
.skill-box-project .header {
  border-bottom-color: var(--border-color, #e8e8e8) !important;
}
.skill-box-project .header .avatar { display: none; }
.skill-box-project .header .subtitle { display: none; }
.skill-box-project .header .title { margin-left: 0; }
.skill-box-project .title a { text-decoration: none; }
.skill-box-project .title a:hover { text-decoration: underline; }
.skill-box-project .badge.bg-accent {
  background-color: var(--accent-color) !important;
  color: #fff !important;
  border-color: var(--accent-color) !important;
}