/* =========================
   FILE: styles.css (v11)
   Purpose: All styles for the builder
   ========================= */

/* =========================
   0) THEME VARIABLES ("knobs")
   ========================= */
:root{
  --bg:            #f2f5fa;  /* page background */
  --panel-bg:      #fff;      /* cards/panels */
  --ink:           #0c1628;   /* body text */
  --muted:         #486385;   /* helper text */
  --outline:       #cfd9e6;   /* borders */
  --accent:        #0a5bd3;   /* primary accent */
  --accent-strong: #084db3;   /* hover accent */
  --accent-soft:   #e7f1ff;   /* hover bg */

  --brand:         #6d140b;   /* site brand (unused here, available) */

  --container-max: 1240px;    /* overall app width */
  --paper-width:   780px;     /* letter “paper” width */
  --col-left:      0.34fr;    /* left column fraction */
  --col-right:     0.66fr;    /* right column fraction */
}

/* =========================
   1) BASE
   ========================= */
html, body { margin:0; }
body{
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  color:var(--ink);
  background:var(--bg);
  padding:16px;
}
@media (min-width: 1100px){ body{ padding:24px; } }
@media print{ body{ padding:0 !important; background:#fff; } }

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
.muted{ color:#6b7280; }
.tips { color:#6b7280; font-size:14px; }

/* =========================
   2) LAYOUT (2 columns)
   ========================= */
main{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 16px 16px 16px calc(16px + 20px);  /* +20px extra right breathing room (iframe-friendly) */
}
@media (min-width: 981px){
  main{
    grid-template-columns: var(--col-left) var(--col-right);
    column-gap:24px;
  }
}

/* Panels and cards */
.panel{}
.card{
  background:var(--panel-bg);
  border:1px solid var(--outline);
  border-radius:10px;
  padding:14px;
  box-shadow:0 2px 12px rgba(12,22,40,.06);
  margin-bottom:10px;
}

/* Intro spacing */
#intro .card{ margin-bottom:40px; }

/* =========================
   3) FORM ELEMENTS
   ========================= */
.grid{ display:grid; gap:12px; }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width:640px){ .grid.cols-2{ grid-template-columns: 1fr; } }

label{ font-weight:700; color:#274162; font-size:13px; }

.nbp-field{}
.nbp-field--full{ grid-column:1 / -1; }

input[type="text"], input[type="email"], textarea, select{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid var(--outline);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
}
textarea{ min-height:120px; resize:vertical; }

#recipientField{ grid-column:1 / -1; }
#recipient{ width:100%; box-sizing:border-box; min-width:0; }

select:disabled{
  background:#f3f6fb;
  color:#8a93a2;
  cursor:not-allowed;
  opacity:0.9;
}

/* Step headings: small, all-caps, blue-grey divider */
.step-title{
  margin:16px 0 8px;
  font-size:13px;
  line-height:1.35;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#33507a;
  border-bottom:1px solid var(--outline);
  padding-bottom:6px;
}
.preview-title{ margin-top:8px; }

/* Buttons */
.btn{
  display:inline-block;
  font-weight:800;
  border-radius:14px;
  padding:10px 14px;
  border:2px solid transparent;
  background:#fff;
  color:var(--accent);
  transition:.15s ease;
  text-decoration:none;
  line-height:1.25;
}
.btn:hover{ text-decoration:none; }
.btn.primary{
  background:var(--accent); color:#fff; border-color:var(--accent);
  box-shadow:0 2px 0 rgba(8,77,179,.25) inset;
}
.btn.primary:hover{ background:var(--accent-strong); }
.btn.success{
  border:2px solid var(--accent); color:var(--accent); background:#fff;
}
.btn.success:hover{ background:var(--accent-soft); }

/* Toolbar */
.toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.toolbar .spacer{ flex:1 1 auto; }

/* Validation messages */
.nbp-errors{
  display:none;
  margin:.5rem 0 0;
  padding:.75rem .9rem;
  background:#fff3f3;
  border-left:4px solid #c11;
  color:#7a0d0d;
  border-radius:4px;
  font-size:14px;
}
.nbp-errors ul{ margin:0; padding-left:1.1rem; }
.nbp-errors li{ margin:.25rem 0; }
.nbp-error{ outline:2px solid #c11; outline-offset:2px; }

/* Short print tip alignment */
.print-tip{ text-align:right; }

/* Lock message + King inline notice (text only; shown/hidden by JS) */
#formatLockMsg{ display:none; color:#b00020; font-weight:600; margin-top:6px; }
#kingNotice{
  display:none;
  margin:10px 0 0 0;
  padding:0;
  color:#b00020;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
}

/* =========================
   4) CHECKLIST
   ========================= */
.checklist h3{ margin:8px 0 6px; color:var(--ink); font-size:15px; }
.checklist label{ display:block; padding:6px 0; color:var(--muted); }

/* =========================
   5) AUTOCOMPLETE
   ========================= */
.nbp-ac-wrap{ position:relative; }
.nbp-ac-list{
  display:none;
  position:absolute;
  z-index:1000;
  background:#fff;
  border:1px solid var(--outline);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  max-height:260px;
  overflow:auto;
  margin-top:2px;
  min-width:220px;
}
.nbp-ac-item{ padding:8px 10px; cursor:pointer; }
.nbp-ac-item:hover{ background:#f6f9ff; }

/* =========================
   6) PREVIEW (Letter “paper”)
   ========================= */
.doc{ background:transparent; padding:0; }
.paper{ background:transparent; border:0; box-shadow:none; padding:0; }
.paper .inner#letter{
  background:#fff;
  border:1px solid var(--outline);
  border-radius:12px;
  box-shadow:0 2px 12px rgba(12,22,40,.06);
  padding:18px;
  max-width:var(--paper-width);
  width:100%;
  margin:0 auto;
  min-height:420px;
}
.addr.addr--right, .date--right{ text-align:right; }

/* =========================
   7) PRINT (Letter only) — fixed
   ========================= */
@media print {
  /* Only the letter should be visible */
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body * { visibility: hidden !important; }

  /* Show letter and its children */
  #letter, #letter * { visibility: visible !important; }

  /* A4 page with comfortable margins */
  @page { size: A4; margin: 18mm; }  /* try 16–20mm if you want */

  /* Neutralise any on-screen wrappers */
  .paper, .paper .inner {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Critical: remove letter from normal flow so it isn't pushed down by hidden siblings */
  #letter{
    position: absolute !important;   /* take out of flow */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;             /* allow width to span page */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-height: auto !important;

    /* Make padding count inside width to avoid right-edge clipping */
    box-sizing: border-box !important;
    padding: 16mm 18mm 14mm 18mm !important;

    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;

    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  /* Keep right-aligned address/date aligned in print */
  .addr.addr--right, .date--right { text-align: right !important; }

  /* Reduce awkward splits */
  #letter p { orphans: 3; widows: 3; }
  #letter p, #letter div { break-inside: avoid; page-break-inside: avoid; }
}


/* ======= Centered, balanced gutters for the 2-col layout ======= */
:root{
  /* tweak these if you want wider/narrower edge padding later */
  --edge-gutter: 32px;   /* equal left/right padding inside iframe/page */
  --col-gap:     28px;   /* gap between left + right columns */
}

main{
  /* was asymmetric; make it symmetric so the whole grid is visually centered */
  padding: 16px var(--edge-gutter);
}

@media (min-width: 981px){
  main{
    column-gap: var(--col-gap);
  }
}

/* Add a little breathing room inside the preview column without shifting the grid */
.panel:last-child .doc{
  padding: 6px 8px 0;     /* subtle inner padding around the white page card */
}

/* Keep the letter “paper” centred and at the intended width */
.paper .inner#letter{
  margin: 0 auto;
  max-width: var(--paper-width, 780px);
  width: 100%;
}
/* =========================
   MOBILE POLISH (≤ 900px)
   ========================= */
@media (max-width: 900px){

  /* One clean column with comfy padding */
  main{
    grid-template-columns: 1fr !important;
    padding: 14px 16px !important;
    gap: 14px !important;
  }

  /* Step headings a touch larger for readability */
  .step-title{ font-size: 14px; letter-spacing: .06em; }

  /* Cards: reduce shadow + tighter padding to fit better on phones */
  .card{ padding: 12px; box-shadow: 0 1px 8px rgba(0,0,0,.05); }

  /* Inputs: bigger tap targets */
  input[type="text"], input[type="email"], textarea, select{
    padding: 12px 14px;
    font-size: 16px;     /* prevents iOS zoom-on-focus */
    border-radius: 12px;
  }
  textarea{ min-height: 140px; }

  /* Toolbar: stack buttons and make them full-width */
  .toolbar{ gap: 10px; }
  .toolbar .spacer{ display:none; }
  .toolbar .btn{
    width: 100%;
    text-align: center;
  }

  /* Keep preview tools visible as you scroll */
  .toolbar{
    position: sticky;
    top: 6px;
    z-index: 50;
    background: transparent;
    padding-top: 4px;
  }

  /* Letter “paper”: full width; keep margins pleasant */
  .paper .inner#letter{
    max-width: none;
    border-radius: 10px;
    padding: 16px;
  }

  /* Autocomplete list: cover width nicely on small screens */
  .nbp-ac-list{ min-width: 100%; }

  /* Error box: full width and more legible line-height */
  .nbp-errors{ line-height: 1.45; }

  /* Intro card: a bit tighter */
  #intro .card{ margin-bottom: 24px; }
}

/* Tiny screens (≤ 360px) – prevent crowding */
@media (max-width: 360px){
  body{ padding: 8px; }
  main{ padding: 8px; }
  .card{ padding: 10px; }
}

/* Hide Print on very small screens unless JS decides to re-show it */
@media (max-width: 600px){
  #printBtn { display: none; }
}
/* Base button */
.btn{
  display:inline-block; padding:10px 14px; border-radius:12px;
  font-weight:700; text-decoration:none; border:2px solid transparent;
  transition:.15s ease; cursor:pointer;
}

/* Primary (white text on blue) – for MUST-do actions */
.btn--primary{
  background:var(--accent,#0a5bd3); color:#fff; border-color:var(--accent,#0a5bd3);
}
.btn--primary:hover{ filter:brightness(0.95); }

/* Ghost (blue text on white) – for optional actions */
.btn--ghost{
  background:#fff; color:var(--accent,#0a5bd3); border-color:var(--accent,#0a5bd3);
}
.btn--ghost:hover{ background:rgba(10,91,211,0.06); }

/* Success (if you use it elsewhere) */
.btn.success{ background:#0a7a4a; color:#fff; border-color:#0a7a4a; }
.btn.success:hover{ filter:brightness(0.95); }

/* Focus ring */
.btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(10,91,211,.25); }

/* Disabled */
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
/* Prevent theme/overrides from injecting arrow glyphs into buttons */
.btn::after { content: none !important; }
/* Must-do action button (green) */
.btn--go{
  background:#0a7a4a;            /* accessible green */
  color:#fff;
  border-color:#0a7a4a;
}
.btn--go:hover{ filter:brightness(.95); }
.btn--go:focus{ outline:none; box-shadow:0 0 0 3px rgba(10,122,74,.25); }