/* ==========================================================================
   AWCompany ApS — Renoveringsberegner (renovation-kalkulator.html only)
   Reuses design tokens from css/style.css (--c-ink, --c-line, --sp-*, etc.)
   and existing component classes (.form-grid, .field, .calc-option,
   .form-note, .btn) rather than reinventing them — only new, page-specific
   components live here.
   ========================================================================== */

/* ---- Page title fix: "Renoveringsberegner" is one long, unhyphenated
   Danish compound word — unlike the site's other .display-l headlines
   (which are multiple shorter words that wrap naturally between words),
   at narrow viewports it doesn't fit one line and, with the shared
   .display-l default of overflow-wrap:normal, was overflowing past the
   viewport edge and getting silently clipped instead of wrapping. Scoped
   to this page only — not touching the shared .display-l class. ---- */
.page-hero h1.display-l{ overflow-wrap: break-word; }

/* ---- Quality tier picker (reuses .calc-option's card look at 4-up) ---- */
.reno-tier-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:0.75rem; }
@media (max-width: 700px){ .reno-tier-grid{ grid-template-columns: repeat(2,1fr); } }

/* ---- Work item rows (a checkbox-led card, optionally revealing extra fields) ---- */
.reno-work-list{ display:flex; flex-direction:column; gap:0.75rem; margin-top:1rem; }
.reno-work-item{
  border:1px solid var(--c-line-strong); background:var(--c-surface);
  padding:1em 1.1em; transition:border-color var(--dur-ui) var(--ease-premium);
}
.reno-work-item:has(input:checked){ border-color:var(--c-ink); }
.reno-work-item-head{ display:flex; align-items:flex-start; gap:0.85em; cursor:pointer; }
.reno-work-item-head input[type="checkbox"]{ width:1.25em; height:1.25em; margin-top:0.15em; flex:none; }
.reno-work-item-name{ font-weight:700; color:var(--c-ink); }
.reno-work-item-meta{ font-size:var(--fs-small); color:var(--c-ink-faint); margin-top:0.15rem; }
.reno-work-item-extra{
  margin-top:0.85em; padding-top:0.85em; border-top:1px solid var(--c-line);
  display:none; align-items:center; gap:0.75em;
}
.reno-work-item:has(input:checked) .reno-work-item-extra{ display:flex; }
.reno-work-item-extra label{ font-size:var(--fs-label); letter-spacing:0.06em; text-transform:uppercase; color:var(--c-ink-faint); }
.reno-work-item-extra input[type="number"]{
  width:6em; background:var(--c-bg); border:1px solid var(--c-line-strong);
  padding:0.5em 0.7em; border-radius:var(--radius-s);
}

/* ---- Suggestion banner (spec §12 — never auto-added, just offered) ---- */
.reno-suggestion{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  border:1px dashed var(--c-timber-dark); background:var(--c-bg-alt);
  padding:1em 1.2em; margin-top:1rem;
}
.reno-suggestion p{ margin:0; font-size:var(--fs-small); color:var(--c-ink); }
.reno-suggestion button{ flex:none; }

/* ---- Results ---- */
.reno-results{ margin-top:var(--sp-5); border-top:2px solid var(--c-ink); padding-top:var(--sp-4); }
.reno-results[hidden]{ display:none; }
.reno-lineitem{ border-bottom:1px solid var(--c-line); padding-block:1.1em; }
.reno-lineitem summary{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  cursor:pointer; list-style:none; font-weight:700; color:var(--c-ink);
}
.reno-lineitem summary::-webkit-details-marker{ display:none; }
/* Removing the native ::marker/::-webkit-details-marker above hides the
   browser's built-in expand/collapse triangle — without SOME visible
   affordance a <summary> row just looks like plain, non-interactive text
   (this is exactly what happened before this comment existed: a real user
   had no way to tell the row could be clicked to reveal the store-picker
   underneath). This ::before rebuilds that affordance explicitly, plus a
   text hint, so "click to see materials & choose a store" is obvious. */
.reno-lineitem summary::before{
  content: '▸'; flex:none; order:-1; margin-right:0.6em; color:var(--c-ink-faint);
  transition: transform var(--dur-ui) var(--ease-premium);
}
.reno-lineitem[open] summary::before{ transform: rotate(90deg); }
.reno-lineitem summary .amount{ font-family:var(--f-display); white-space:nowrap; }
.reno-lineitem summary .meta{ font-weight:400; font-size:var(--fs-small); color:var(--c-ink-faint); }
.reno-lineitem summary .hint{
  display:block; font-weight:400; font-size:var(--fs-small); color:var(--c-timber-dark); margin-top:0.2em;
}
.reno-lineitem[open] summary .hint{ display:none; }
.reno-lineitem-body{ margin-top:0.9em; }
.reno-sub-row{
  display:flex; justify-content:space-between; gap:1rem; font-size:var(--fs-small);
  padding:0.35em 0; color:var(--c-ink-faint);
}
.reno-sub-row .name{ color:var(--c-ink); }
.reno-sub-row .status{
  font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; padding:0.1em 0.5em;
  border:1px solid var(--c-line-strong); border-radius:var(--radius-pill); margin-left:0.5em;
}
.reno-sub-row .status.is-unverified{ border-color:var(--c-timber-dark); color:var(--c-timber-dark); }
/* ---- Product picker: photo cards for comparing/choosing between stores
   for one material role (spec §2 + §10 — "użytkownik nadal może wybrać
   inny sklep"). Clicking a card re-runs the whole calculation with that
   product as the new choice for its role. ---- */
.reno-picker{
  margin:0.3em 0 0.9em; padding:0.75em; background:var(--c-bg-alt);
  border-left:2px solid var(--c-timber-dark);
}
.reno-picker-label{ font-size:0.72rem; font-weight:700; color:var(--c-ink); margin:0 0 0.6em; }
.reno-picker-cards{ display:flex; gap:0.6em; flex-wrap:wrap; }
.reno-picker-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:0.25em;
  width:120px; padding:0.5em; background:var(--c-surface);
  border:1px solid var(--c-line-strong); cursor:pointer; text-align:left;
  transition:border-color var(--dur-ui) var(--ease-premium);
}
.reno-picker-card:hover{ border-color:var(--c-ink); }
.reno-picker-card.is-active{ border-color:var(--c-ink); border-width:2px; }
.reno-picker-card img{ width:100%; height:80px; object-fit:contain; background:var(--c-bg); }
.reno-picker-noimg{
  width:100%; height:80px; display:flex; align-items:center; justify-content:center;
  background:var(--c-bg); color:var(--c-ink-faint); font-size:0.65rem; text-align:center;
}
.reno-picker-card .store{ font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--c-ink); }
.reno-picker-card .store em{ font-style:normal; color:var(--c-timber-dark); }
.reno-picker-card .name{ font-size:0.68rem; color:var(--c-ink-faint); line-height:1.3; }
.reno-picker-card .price{ font-size:0.78rem; font-weight:700; color:var(--c-ink); }
.reno-picker-note{ font-size:0.68rem; color:var(--c-ink-faint); margin-top:0.6em; }
.reno-picker-note a{ color:var(--c-timber-dark); }
/* ---- Paint colour swatches: cosmetic choice only, never changes price
   (Danish wall paint is one base toned in-store) — see renderColorSwatchPicker
   in js/renovation-ui.js. ---- */
.reno-color-picker{
  margin:0.3em 0 0.9em; padding:0.75em; background:var(--c-bg-alt);
  border-left:2px solid var(--c-timber-dark);
}
.reno-color-chips{ display:flex; gap:0.5em; flex-wrap:wrap; }
.reno-color-chip{
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:2px solid var(--c-line-strong); padding:0;
  transition:border-color var(--dur-ui) var(--ease-premium), transform var(--dur-ui) var(--ease-premium);
}
.reno-color-chip:hover{ transform:scale(1.08); }
.reno-color-chip.is-active{ border-color:var(--c-ink); border-width:3px; }
/* ---------- Modular home import catalog (importhuse-kalkulator.html) —
   reuses .reno-picker-card but with bigger photos, since these are the
   PRIMARY choice on the page, not a secondary material swap. ---------- */
.mh-catalog{ margin-bottom: 0; }
.mh-card{ width:220px; }
.mh-card img{ height:150px; }
.mh-card .price{ font-weight:700; }
.reno-lineitem-subtotal{ display:flex; justify-content:space-between; font-weight:700; margin-top:0.5em; padding-top:0.5em; border-top:1px solid var(--c-line); }
.reno-hours-input{
  width: 3.5em; background:var(--c-surface); border:1px solid var(--c-line-strong);
  border-radius:var(--radius-s); padding:0.15em 0.4em; font: inherit; text-align:right;
}
.reno-hours-input:focus{ border-color:var(--c-ink); }
.reno-hours-reset{
  font-size:0.68rem; color:var(--c-timber-dark); background:none; border:none;
  cursor:pointer; text-decoration:underline; padding:0; margin-left:0.4em;
}
.reno-auth-note{
  margin-top:0.6em; font-size:var(--fs-small); color:var(--c-timber-dark);
  display:flex; align-items:center; gap:0.4em;
}

.reno-totals{ margin-top:1.5rem; }
.reno-totals-row{ display:flex; justify-content:space-between; padding:0.55em 0; border-bottom:1px solid var(--c-line); }
.reno-totals-row[hidden]{ display:none; }
.reno-totals-row.is-grand{ border-bottom:none; border-top:1px solid var(--c-ink); margin-top:0.3em; padding-top:0.9em; }
.reno-totals-row.is-grand .num{ font-family:var(--f-display); font-weight:800; font-size:1.9rem; color:var(--c-ink); }
.reno-per-m2{ text-align:right; font-size:var(--fs-small); color:var(--c-ink-faint); margin-top:0.3em; }

.reno-disclaimer{
  margin-top:1.75rem; padding:1.1em 1.2em; background:var(--c-bg-alt);
  font-size:var(--fs-small); color:var(--c-ink-faint);
}
.reno-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:0.85rem; margin-top:1.5rem; }

/* "Kopiér link til overslag" (see js/estimate-share.js) — the status
   element is inserted right after the share button as another flex item
   of .reno-actions above, so it needs its own full-width row (flex-
   basis:100%) rather than squeezing onto the buttons' row. */
.share-status{ flex-basis:100%; font-size:var(--fs-small); color:var(--c-ink-faint); display:flex; flex-wrap:wrap; align-items:center; gap:0.5em; }
.share-status[hidden]{ display:none; }

/* "Gem som projekt" (see js/project-save-widget.js) — same status-line
   pattern as .share-status above, reused for Mit Byggeprojekt saves. */
.project-save-status{ flex-basis:100%; font-size:var(--fs-small); display:flex; flex-wrap:wrap; align-items:center; gap:0.3em; }
.project-save-status[hidden]{ display:none; }
.share-link-fallback{
  flex:1 1 260px; min-width:0; padding:0.5em 0.75em;
  border:1px solid var(--c-line-strong); background:var(--c-surface);
  font-size:var(--fs-small); color:var(--c-ink); font-family:var(--f-body);
}

.reno-error{
  margin-top:1rem; padding:0.85em 1em; background:#FBEAEA; color:#8A2E2E;
  border-left:3px solid #8A2E2E; font-size:var(--fs-small);
}
.reno-error[hidden]{ display:none; }

@media print{
  .site-header, .mobile-nav, .site-footer, .reno-form, .progress-bar, .reno-actions, .cookie-banner{ display:none !important; }
  .reno-results{ border-top:none; margin-top:0; padding-top:0; }
  .reno-totals-row, .model-specs .spec-row{ page-break-inside:avoid; break-inside:avoid; }
  body{ background:#fff; }
}