/* kalkulator.css - styles specific to Ukelønn-kalkulator
   Structure:
   1) Base/layout
   2) Typography & labels
   3) Components (cards, bars, chips)
   4) Form elements (inputs/selects)
   5) Responsive tweaks
*/

/* 1) Base/layout */
* { box-sizing: border-box }
body { margin: 0 }
.wrap { max-width: 980px; margin: 18px auto; padding: 0 16px }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.col { display: flex; flex-direction: column; gap: 6px }
/* Muted helper for secondary text */
.muted { color: var(--muted, #475569) }

/* 2) Typography & labels */
h1 { font-size: clamp(24px, 4vw, 32px); font-weight: 400; margin: 8px 0 6px }
/* Default labels within calculator content */
.wrap label { font-size: 15px; font-weight: 500 }
/* Specific styling for calculator labels (shared across the 4 titles) */
.calc-label { font-size: 16px; font-weight: 500; color: #000000 }
.out { font-size: 28px; font-weight: 700 }
.kpi { display: flex; align-items: baseline; gap: 12px }

/* 3) Components */
.card {
  background: #ffffff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.bar { height: 12px; background: #eef2ff; border-radius: 999px; overflow: hidden; border: 1px solid var(--border) }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, #60a5fa, #3b82f6) }
.divider { height: 1px; background: var(--border); margin: 12px 0 }
.chip { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 6px 10px; cursor: pointer }
/* Increase spacing between cards slightly (requested +5px) */
.card { margin-bottom: 25px }

/* Media card: contain floats so height expands around media */
.media-card { display: flow-root; padding: 20px }
.media-left { float: left; margin: 0 14px 10px 0; max-width: min(50%, 480px) }
.media-right { float: right; margin: 0 0 10px 14px; max-width: min(40%, 360px) }
.media-left img, .media-right video {
  display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* CTA button under image */
.btn.cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: #2563eb; /* solid blue-600 */
  color: #fff;
  border: 1px solid #1e40af; /* blue-800 */
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(37,99,235,.25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background-color .12s ease;
}
.btn.cta:hover { background: #1d4ed8; box-shadow: 0 8px 18px rgba(37,99,235,.3); transform: translateY(-1px) }
.btn.cta:active { transform: translateY(0); filter: brightness(0.96) }
.btn.cta:focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.35), 0 6px 14px rgba(37,99,235,.25) }

/* Gentle color pass on cards to reduce sterile look */
.wrap > .card:nth-of-type(1) { background: #FFF1F2; border-color: #FDA4AF } /* Rose-50/300 */
.wrap > .card:nth-of-type(2) { background: #F0FDF4; border-color: #A7F3D0 } /* Green-50/200 */
.wrap > .card:nth-of-type(3) { background: #EFF6FF; border-color: #93C5FD } /* Blue-50/300 */

/* 4) Form elements */
/* Ensure light theme inputs: white background + dark text */
input:not([type="checkbox"]), select, textarea {
  background: #ffffff; color: #111827; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
/* Dropdown width (can be adjusted later) */
select { width: 200px }
/* Focus state */
input:focus, select:focus, textarea:focus { border-color: #cbd5e1; outline: none }
/* Remove spinners and normalize number input appearance */
input[type="number"] { appearance: textfield; -moz-appearance: textfield }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }

/* 5) Responsive tweaks */
@media (max-width: 600px) {
  .wrap { padding: 0 12px }
  .media-left, .media-right { float: none; max-width: 100%; margin: 8px 0 }
  /* Optional: expand selects to full width on very small screens
     Uncomment if desired:
     select { width: 100% }
  */
}