/* Red-Top Meme Maker - page-specific styles (single column) */

:root {
  --paper: #fffcf9;
  /* preview paper tone (not export) */
  --gutter: 16px;
  /* consistent inner gutter */
}

/* --- Form / cards (unchanged visual) --- */
.tool-hero {
  margin-bottom: 1rem;
}

.tool-title {
  margin: 0 0 .4rem;
  font-size: 2rem;
}

.tool-card.meme {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  margin-bottom: 1rem;
}

.row {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr 1fr;
}

@media (max-width:820px) {
  .row {
    grid-template-columns: 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
}

.label {
  margin: .25rem 0 .35rem;
  color: var(--text);
  font-weight: 700;
}

.control {
  display: block;
  width: 100%;
  padding: .65rem .7rem;
  margin: 0 0 .2rem;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
}

select.control option {
  background-color: var(--card);
  color: var(--text);
}

textarea.control {
  min-height: 120px;
  resize: vertical;
}

.actions {
  display: flex;
  align-items: flex-end;
  gap: .6rem;
  justify-content: flex-end;
}

.btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  color: var(--text);
  padding: .6rem .9rem;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}

.btn:hover {
  filter: brightness(1.05);
}

.btn-primary {
  border-color: rgba(14, 118, 188, .35);
}

.btn-dark {
  background: rgba(0, 0, 0, .35);
}

/* --- Preview canvas --- */
.stage-wrap {
  display: flex;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
}

.stage-outer {
  width: max-content;
  height: max-content;
  transform-origin: top left;
}

#stage {
  /* Square preview base (scaled in the UI; export uses html2canvas scale) */
  width: 540px;
  height: 540px;
  /* base square */
  background: var(--paper);
  position: relative;
  overflow: hidden;
  border: 20px solid #d61f1f;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);

  /* default layout vars */
  --mast-h: 110px;
  --date-h: 28px;
}

/* Landscape modes - set real canvas size so layout has correct room */
#stage.mode-1200x630 {
  width: 1200px;
  height: 630px;
  --mast-h: 96px;
  --date-h: 26px;
}

#stage.mode-1600x900 {
  width: 1600px;
  height: 900px;
  --mast-h: 90px;
  --date-h: 26px;
}

/* Masthead */
.masthead {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--mast-h);
  background: #d61f1f;
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding: 12px var(--gutter) 6px var(--gutter);
}

.uknews {
  font-family: Anton, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 72px;
  /* JS will shrink as needed */
  letter-spacing: 1px;
  line-height: .9;
  margin-right: auto;
  white-space: nowrap;
  position: relative;
  left: 0;
  /* IMPORTANT: no negative nudge in landscape */
}

/* Date ribbon */
.datebar {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--mast-h);
  height: var(--date-h);
  background: #fff;
  color: #111;
  border-top: 6px solid #d61f1f;
  border-bottom: 6px solid #d61f1f;
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 12px;
  padding: 0 var(--gutter);
}

.datebar .credit {
  margin-right: auto;
  color: #111;
}

.datebar .date {
  margin-left: auto;
}

/* Body */
.sheet {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(var(--mast-h) + var(--date-h) + 16px);
  bottom: 16px;
  color: #111;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  /* solid white for preview & export */
}

.headline {
  font-family: Anton, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  text-transform: uppercase;
  font-size: 56px;
  line-height: .94;
  letter-spacing: .5px;
}

.article {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
}

/* Slightly smaller headline in landscape for breathing room (JS may still shrink further) */
#stage.mode-1200x630 .headline {
  font-size: 44px;
}

#stage.mode-1600x900 .headline {
  font-size: 40px;
}

.size-note {
  font-size: .85rem;
  color: var(--muted);
}

.disclaimer .muted {
  font-size: .9rem;
  line-height: 1.4;
}

.headline sup,
.article sup {
  font-size: 50%;
  vertical-align: super;
  line-height: 0;
}

/* Headline formatting helpers */
.headline sup { text-transform: none; }  /* don't uppercase the superscript */


/* Precise superscript alignment for headline + article */
:root{
  /* tweak to taste; 0.28–0.34em usually perfect for Anton at big sizes */
  --sup-raise: 0.80em;
  --sup-scale: 0.50;  /* you currently use ~50% */
}

.headline sup,
.article sup{
  /* size + manual vertical nudge */
  font-size: calc(1em * var(--sup-scale));
  line-height: 0;
  vertical-align: baseline;       /* disable UA 'super' heuristics */
  position: relative;
  top: calc(-1 * var(--sup-raise));  /* lift so tops line up */
}

/* keep headline superscripts from being uppercased */
.headline sup { text-transform: none; }

.format-hint{
  margin-top: .35rem;
  color: var(--muted);
  font-size: .9rem;
}
.format-hint code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em;
  background: rgba(255,255,255,.05);
  padding: .05em .35em;
  border-radius: 6px;
}


/* Mobile cap */
@media (max-width:700px) {
  .stage-outer {
    max-width: 100%;
  }
}

/* --- Export tweaks: keep red border, clean white interior, no outer drop shadow --- */
#stage.exporting {
  background: #fff !important;
  box-shadow: none !important;
}

#stage.exporting .sheet,
#stage.exporting .article {
  background: #fff !important;
  box-shadow: none !important;
}

/* === FINAL OVERRIDES (append to end) ============================= */

/* Style BOTH names for the article pane so either will work */
.sheet,
.content {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(var(--mast-h) + var(--date-h) + 16px);
  bottom: 16px;
  color: #111;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  /* ensures white in preview/export */
}

/* Make landscape canvases real landscape (win over earlier rules) */
#stage.mode-1200x630 {
  width: 1200px !important;
  height: 630px !important;
  --mast-h: 96px;
  --date-h: 26px;
}

#stage.mode-1600x900 {
  width: 1600px !important;
  height: 900px !important;
  --mast-h: 90px;
  --date-h: 26px;
}

/* Never nudge “UK NEWS” off the edge */
.uknews {
  position: relative;
  left: 0 !important;
  white-space: nowrap;
}

/* Slightly smaller baseline headline in landscape; shrink-to-fit may still reduce */
#stage.mode-1200x630 .headline {
  font-size: 44px;
}

#stage.mode-1600x900 .headline {
  font-size: 40px;
}

/* Keep the red border on export; just remove drop shadow */
#stage.exporting {
  background: #fff !important;
  box-shadow: none !important;
}

#stage.exporting .sheet,
#stage.exporting .content,
#stage.exporting .article {
  background: #fff !important;
  box-shadow: none !important;
  border: none !important;
}

/* Mobile: allow preview to scale inside its column */
.stage-wrap {
  padding: 8px;
  overflow: hidden;
}

.stage-outer {
  width: max-content;
  height: max-content;
  transform-origin: top left;
}

@media (max-width:700px) {
  .stage-outer {
    max-width: 100%;
  }
}
/* Temporarily hide Output size control + note */
.tool-card.meme .field:has(select) { display:none !important; }
.size-note { display:none !important; }

/* --- Square masthead polish ------------------------------------ */
/* Align the masthead with the sheet's left edge and make it bigger */
#stage .uknews{
  left: -20px !important;   /* optical align to the sheet content */
  font-size: 115px;         /* bigger base; shrink-to-fit will cap if needed */
}

/* Ensure the masthead nudge also applies to the export DOM */
#stage-export .uknews{
  left: -20px !important;
  font-size: 115px;  /* keep the same size tweak */
}

/* Stop iOS Safari auto text zoom inside the canvas (fixes mobile exports) */
#stage, #stage *{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#stage.exporting, #stage.exporting *{
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}
.format-toolbar{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  margin:.35rem 0 .5rem;
}

.format-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:var(--text);
  padding:.35rem .55rem;
  border-radius:8px;
  font-weight:800;
  cursor:pointer;
  line-height:1;
}
.format-btn:hover{ filter:brightness(1.05); }