/* Post canvas styles. Everything here is in real output pixels (1080 wide).
   Colours and font names come from brand.config.js via CSS variables set in app.js. */

/* All fonts are bundled (fonts/*.woff2, Latin subset, SIL Open Font Licence; licences alongside).
   Browsers only download a font when a post actually uses it. Font sets: brand.config.js → fontSets. */
@font-face { font-family: "Oswald"; src: url("../fonts/Oswald.woff2") format("woff2"); font-weight: 200 700; font-display: block; }
@font-face { font-family: "Caveat Brush"; src: url("../fonts/CaveatBrush.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/SourceSans3.woff2") format("woff2"); font-weight: 200 900; font-display: block; }
@font-face { font-family: "Fredoka"; src: url("../fonts/Fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: block; }
@font-face { font-family: "Baloo 2"; src: url("../fonts/Baloo2.woff2") format("woff2"); font-weight: 400 800; font-display: block; }
@font-face { font-family: "Pacifico"; src: url("../fonts/Pacifico.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: block; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/PlayfairDisplay.woff2") format("woff2"); font-weight: 400 900; font-display: block; }
@font-face { font-family: "Dancing Script"; src: url("../fonts/DancingScript.woff2") format("woff2"); font-weight: 400 700; font-display: block; }
@font-face { font-family: "Lora"; src: url("../fonts/Lora.woff2") format("woff2"); font-weight: 400 700; font-display: block; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Caveat"; src: url("../fonts/Caveat.woff2") format("woff2"); font-weight: 400 700; font-display: block; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter.woff2") format("woff2"); font-weight: 100 900; font-display: block; }

.post {
  position: relative;
  width: 1080px; height: 1350px;
  overflow: hidden;
  --s: 1;   /* text scale; fit.js overrides it per box */
  background: var(--st-bg, var(--cream));   /* --st-*: colour style roles, set per post (brand.config.js → styles) */
  color: var(--st-body, var(--ink));
  font-family: var(--f-body), sans-serif;
  font-weight: var(--fw-body, 400);
  box-sizing: border-box;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.post.story { height: 1920px; }
.post *, .post *::before, .post *::after { box-sizing: border-box; }
.post p { margin: 0; }

/* Overflow that couldn't be fixed by shrinking. Shown in preview only. */
.post .overflowing { outline: 6px dashed #e5484d; outline-offset: -6px; }
.post.exporting .overflowing { outline: none; }

/* ── shared pieces ─────────────────────────────────────────── */
.deco { position: absolute; pointer-events: none; }
.deco svg { width: 100%; height: 100%; display: block; }

.logo { display: block; border-radius: 50%; object-fit: contain; flex: none; box-shadow: 0 0 0 7px var(--st-logoRing, transparent); }

/* Font roles. Family, weight, case, spacing and line height all come from the post's font set
   (--f-*, --fw-*, --tt-*, --ls-*, --lh-*, set inline on .post by U.fontVars). */
.display { font-family: var(--f-display), sans-serif; font-weight: var(--fw-display); text-transform: var(--tt-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.subhead { font-family: var(--f-sub), sans-serif; font-weight: var(--fw-sub); text-transform: var(--tt-sub); line-height: var(--lh-sub); letter-spacing: var(--ls-sub); }
.script  { font-family: var(--f-script), cursive; font-weight: var(--fw-script); line-height: var(--lh-script); }
.rounded { font-family: var(--f-rounded), sans-serif; font-weight: var(--fw-rounded); }

.oneline { white-space: nowrap; overflow: hidden; }
.wrap    { overflow-wrap: anywhere; }

.brushed { position: relative; display: inline-block; z-index: 0; }
.brushed > .brush { position: absolute; left: -4%; right: -4%; top: 6%; bottom: -6%; z-index: -1; }  /* covers the whole word, so text stays readable on any page colour */
.brushed > .brush svg { width: 100%; height: 100%; display: block; }

.burst { display: inline-block; width: 64px; height: 64px; flex: none; }
.burst svg { width: 100%; height: 100%; display: block; }

/* Cover page: her own uploaded image, filling the canvas */
.post.cover { background: #000; }
.post.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Background photo (U.photo) ────────────────────────────────
   Full: .ph-full layer behind everything; content is lifted above it.
   Header: .ph-band sits behind the template's .photo-head element and bleeds to the canvas
   edges using that template's --ph-top / --ph-x / --ph-bottom (its own padding).
   Both: photo fills and crops from the centre; navy gradient (.ph-shade) on top. */
.post .ph-full, .post .ph-band { overflow: hidden; pointer-events: none; }
.post .ph-full { position: absolute; inset: 0; z-index: 0; }
.post .ph-full img, .post .ph-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.post .ph-shade { position: absolute; inset: 0; }
.post.photo-full > :not(.ph-full):not(.deco) { position: relative; z-index: 1; }
.post.photo-full > .deco { z-index: 1; }
.post .photo-head { position: relative; }
/* Content after the header (e.g. the Safety banner that straddles the band edge) stays above the band. */
.post.photo-header > :not(.deco):not(.photo-head) { position: relative; z-index: 1; }
.post.photo-header .photo-head { isolation: isolate; --st-headline: var(--white); --st-accent2: var(--white); --st-logoRing: var(--white); }
.post .ph-band { position: absolute; z-index: -1;
  top: calc(-1 * var(--ph-top, 0px)); bottom: calc(-1 * var(--ph-bottom, 20px));
  left: calc(-1 * var(--ph-x, 0px)); right: calc(-1 * var(--ph-x, 0px)); }
/* White text on a photo gets a soft shadow. Templates list which of their elements sit on the photo. */
.post { --ph-shadow: 0 2px 14px rgba(0,0,0,.42); }
/* Header band ends on a thin stripe in the style's rule colour, so the edge reads as deliberate. */
.post .ph-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--st-rule); }