/* ── Nunito font (self-hosted) ───────────────────────────────────────── */
@font-face {
  font-family: 'Nunito';
  src: url('/static/vendor/fonts/nunito-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/static/vendor/fonts/nunito-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/static/vendor/fonts/nunito-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/static/vendor/fonts/nunito-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/static/vendor/fonts/nunito-latin-800-normal.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ── Theme: black & orange on white ─────────────────────────────────── */
/* Pico v2 scopes colours both in :root AND [data-theme="light"],
   so we override both to guarantee no blue leaks through. */
:root,
[data-theme="light"] {
  --pico-font-family:          "Nunito", system-ui, sans-serif;
  --pico-font-family-monospace: ui-monospace, "Cascadia Code", monospace;

  /* Primary = orange */
  --pico-primary:                       #f97316;
  --pico-primary-background:            #f97316;
  --pico-primary-hover:                 #ea6b0c;
  --pico-primary-hover-background:      #ea6b0c;
  --pico-primary-focus:                 rgba(249, 115, 22, 0.2);
  --pico-primary-inverse:               #fff;

  /* Secondary = black (kill all blue-grey) */
  --pico-secondary:                     #111111;
  --pico-secondary-background:          #111111;
  --pico-secondary-hover:               #333333;
  --pico-secondary-hover-background:    #333333;
  --pico-secondary-inverse:             #fff;

  /* Contrast */
  --pico-contrast:                      #111111;
  --pico-contrast-background:           #111111;
  --pico-contrast-hover:                #000;
  --pico-contrast-hover-background:     #000;
  --pico-contrast-inverse:              #fff;

  /* Background & text */
  --pico-background-color:              #ffffff;
  --pico-color:                         #111111;
  --pico-h1-color:                      #111111;
  --pico-h2-color:                      #111111;
  --pico-h3-color:                      #111111;
  --pico-h4-color:                      #111111;
  --pico-h5-color:                      #333333;
  --pico-h6-color:                      #555555;

  /* Card / section backgrounds */
  --pico-card-background-color:             #f9f9f9;
  --pico-card-sectioning-background-color:  #f3f3f3;

  /* Muted / borders */
  --pico-muted-color:                   #555555;
  --pico-muted-border-color:            #dddddd;

  /* Links */
  --pico-link-color:                    #f97316;
  --pico-link-hover-color:              #ea6b0c;
  --pico-link-visited-color:            #c2550a;

  /* Form elements */
  --pico-form-element-color:                    #111111;
  --pico-form-element-border-color:             #cccccc;
  --pico-form-element-active-border-color:      #f97316;
  --pico-form-element-focus-color:              rgba(249, 115, 22, 0.25);
  --pico-form-element-selected-background-color: rgba(249, 115, 22, 0.1);
  --pico-form-element-active-background-color:  #ffffff;

  /* Toggle switch */
  --pico-switch-background-color:       #cccccc;
  --pico-switch-checked-background-color: #f97316;
  --pico-switch-color:                  #fff;
  --pico-switch-thumb-box-shadow:       0 0 0 1px rgba(0,0,0,0.1);

  /* Range input */
  --pico-range-border-color:            #dddddd;
  --pico-range-active-border-color:     #aaaaaa;
  --pico-range-thumb-border-color:      #ffffff;
  --pico-range-thumb-color:             #f97316;
  --pico-range-thumb-hover-color:       #ea6b0c;
  --pico-range-thumb-active-color:      #c2550a;

  /* Progress bar */
  --pico-progress-background-color:     #eeeeee;
  --pico-progress-color:                #f97316;

  /* Dropdown */
  --pico-dropdown-background-color:     #ffffff;
  --pico-dropdown-border-color:         #eeeeee;
  --pico-dropdown-hover-background-color: #fff4ed;

  /* Code */
  --pico-code-color:                    #555555;

  /* Table */
  --pico-table-border-color:            #dddddd;
  --pico-table-row-stripped-background-color: #f9f9f9;

  /* Mark / ins / del */
  --pico-mark-background-color:         #fff4ed;
  --pico-mark-color:                    #111111;
  --pico-ins-color:                     #f97316;
  --pico-del-color:                     #555555;

  /* kbd */
  --pico-kbd-background-color:          #111111;
  --pico-kbd-color:                     #ffffff;
}

/* Headings: heavier weight with Nunito */
h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Header accent line */
header h1 {
  color: #111;
}
header h1::after {
  height: 4px;
  border-radius: 2px;
  margin-top: 0.35rem;
}

/* ── BigSpread custom styles (on top of Pico CSS) ───────────────────── */

/* Drop zone */
#drop-zone,
#drop-zone[role="button"] {
  border: 2px dashed #ea6b0c !important;
  border-radius: var(--pico-border-radius);
  background: #f97316 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  padding: 3rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

#drop-zone:hover,
#drop-zone.dragover,
#drop-zone[role="button"]:hover,
#drop-zone[role="button"]:focus,
#drop-zone[role="button"]:focus-visible,
#drop-zone[role="button"]:active,
#drop-zone[role="button"].dragover {
  border-color: #ea6b0c !important;
  background: #ea6b0c !important;
  box-shadow: none !important;
}

#drop-zone p {
  margin: 0;
  pointer-events: none;
}

/* Image preview */
#preview-wrap {
  margin-top: 1rem;
}

#preview-img {
  max-height: 260px;
  width: auto;
  border-radius: var(--pico-border-radius);
  object-fit: contain;
}

/* Layout info badges */
#layout-info {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

#layout-info kbd {
  font-size: 0.95rem;
}

/* Spread preview */
#spread-preview {
  position: relative;
  overflow: auto;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
}

#preview-canvas {
  max-width: 100%;
  height: auto;
}

/* Progress */
#gen-progress {
  margin-top: 0.75rem;
}

/* Sections spacing */
main section {
  margin-bottom: 2.5rem;
}

/* Make the generate button stand out */
#btn-generate {
  min-width: 220px;
}

/* Responsive tweaks */
@media (max-width: 576px) {
  #drop-zone {
    padding: 2rem 1rem;
  }
}

/* ── Hard overrides: kill every remaining blue ───────────────────────── */

/* Radio & checkbox checked state */
[type="checkbox"]:checked,
[type="radio"]:checked,
[type="checkbox"]:checked:active,
[type="radio"]:checked:active {
  background-color: #f97316;
  border-color: #f97316;
}

[type="checkbox"]:checked:focus,
[type="radio"]:checked:focus {
  background-color: #f97316;
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25);
}

/* Any element focus ring */
:focus-visible {
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35) !important;
  border-color: #f97316 !important;
  outline: none;
}

/* Links */
a, a:visited {
  color: #f97316;
  text-decoration-color: rgba(249, 115, 22, 0.4);
}
a:hover {
  color: #ea6b0c;
  text-decoration-color: #ea6b0c;
}

/* Select & input active/focus borders */
select:focus,
input:focus,
textarea:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2) !important;
}

/* Progress bar fill */
progress::-webkit-progress-value { background-color: #f97316; }
progress::-moz-progress-bar      { background-color: #f97316; }
progress                         { accent-color: #f97316; }

/* Range input thumb & track */
[type="range"] { accent-color: #f97316; }

/* File input button */
[type="file"]::file-selector-button {
  background-color: #111111;
  border-color: #111111;
  color: #ffffff;
}
[type="file"]::file-selector-button:hover {
  background-color: #333333;
  border-color: #333333;
}