/* =====================================================================
   PUBMAT SYSTEM — BRAND VARIABLES  (config/brand.css)
   Edit the :root block below to re-brand every template at once.
   Units: "--u" scales with the canvas, so 1u = 1px on a 1080px canvas.
   ===================================================================== */

/* ---------- Bundled brand fonts (SIL OFL, from Google Fonts) ----------
   They only download if a template actually uses them.                 */
@font-face { font-family: "Anton"; src: url("fonts/anton-400.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Inter"; src: url("fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Inter"; src: url("fonts/inter-800.woff2") format("woff2"); font-weight: 800; font-display: block; }

:root {
  /* ---- Required brand variables ---- */
  --brand-primary:    #1D3FD6;  /* Cobalt — hero colour, headline highlight, buttons */
  --brand-secondary:  #0B1A3F;  /* Navy — dark backgrounds, footer bars, photo scrims */
  --brand-accent:     #E3262F;  /* Signal red — ONE highlight per post (badges, marker boxes) */
  --brand-text:       #0F172A;  /* Ink — text on light backgrounds */
  --brand-background: #FFFFFF;  /* White — light backgrounds */
  --cta-color:        #1D3FD6;  /* Button fill on light backgrounds */

  /* Fonts. Default = system fonts (no downloads).
     To use the SavrPass brand fonts, swap in the commented lines
     (or preview them with the "Fonts" switch in each template's toolbar). */
  --font-heading: "Arial Black", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* --font-heading: "Anton", Impact, "Arial Narrow", sans-serif; */
  /* --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; */

  /* Logo. Path is relative to the templates/ folder. Use a transparent PNG or SVG. */
  --logo-url: url("../config/savrpass-logo.png");
  --logo-ratio: 1360 / 240;      /* width / height of your logo file */

  /* Company avatar / persona used by the persona template (swap in your mascot later). */
  --persona-image: url("../config/savrpass-mark.png");

  /* ---- Supporting palette ---- */
  --brand-accent-on-dark:    #FF4D57;  /* Coral — red that passes contrast on Navy */
  --brand-highlight-on-dark: #7EA2FF;  /* Sky — blue that passes contrast on Navy */
  --brand-surface:           #EEF2FF;  /* Ice — soft panels on light posts */
  --brand-surface-dark:      #16264F;  /* Panels on dark posts */
  --brand-text-muted:        #475569;  /* Slate — captions on light */
  --brand-text-muted-dark:   #CBD5E1;  /* Captions on dark */
  --brand-line:              #E2E8F0;  /* Dividers */
  --cta-text:                #FFFFFF;
  --website-label:           "savrpass.com";

  /* ---- Type behaviour (system preset) ---- */
  --heading-weight: 900;
  --heading-case: none;
  --heading-tracking: -0.02em;
  --heading-leading: 1.04;
  --heading-scale: 1;

}

/* Brand font preset: Anton is condensed, so it runs larger and in caps. */
:root[data-fonts="brand"] {
  --font-heading: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --heading-weight: 400;
  --heading-case: uppercase;
  --heading-tracking: 0.005em;
  --heading-leading: 0.98;
  --heading-scale: 1.18;
}

/* =====================================================================
   SHARED FOUNDATION — you rarely need to edit below this line
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #E9ECF2; font-family: var(--font-body); }

/* Canvas & theme tokens */
.pm-canvas {
  --u: calc(var(--min, 1080) * 1px / 1080);
  --radius: calc(var(--u) * 28);
  --radius-sm: calc(var(--u) * 16);
  position: relative; overflow: hidden; width: 1080px; height: 1350px;
  font-family: var(--font-body); color: var(--fg); background: var(--bg);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;

  --bg: var(--brand-background);
  --fg: var(--brand-text);
  --muted: var(--brand-text-muted);
  --surface: var(--brand-surface);
  --line: var(--brand-line);
  --hl: var(--brand-primary);
  --eyebrow: var(--brand-primary);
  --accent: var(--brand-accent);
  --cta-bg: var(--cta-color);
  --cta-fg: var(--cta-text);
  --panel: var(--brand-primary);
  --panel-fg: #FFFFFF;
  --logo-pill: transparent;
  --logo-pad: 0px;
  --media-fallback: var(--brand-surface);
  --media-label: var(--brand-text-muted);
}
.pm-canvas[data-shape="portrait"] { --u: calc(var(--min, 1080) * 1px / 1080 * 1.06); }
.pm-canvas[data-shape="story"] { --u: calc(var(--min, 1080) * 1px / 1080 * 1.15); }
.pm-canvas[data-variant="dark"] {
  --bg: var(--brand-secondary);
  --fg: #FFFFFF;
  --muted: var(--brand-text-muted-dark);
  --surface: var(--brand-surface-dark);
  --line: rgba(255,255,255,0.18);
  --hl: var(--brand-highlight-on-dark);
  --eyebrow: var(--brand-highlight-on-dark);
  --accent: var(--brand-accent-on-dark);
  --cta-bg: #FFFFFF;
  --cta-fg: var(--brand-secondary);
  --panel: var(--brand-primary);
  --logo-pill: #FFFFFF;
  --logo-pad: calc(var(--u) * 16) calc(var(--u) * 32);
  --media-fallback: var(--brand-surface-dark);
  --media-label: var(--brand-text-muted-dark);
}

/* Safe area: central 80% (Stories keep extra room top & bottom for app UI) */
.pm-safe { position: absolute; inset: var(--safe-y) var(--safe-x); display: flex; flex-direction: column; }
.pm-canvas.pm-guides::after {
  content: "SAFE AREA"; position: absolute; inset: var(--safe-y) var(--safe-x); z-index: 50; pointer-events: none;
  outline: 2px dashed rgba(227,38,47,0.85); font: 700 11px/1 system-ui, sans-serif; color: #E3262F; padding: 4px;
}

/* Type */
.pm-eyebrow { margin: 0; font: 800 calc(var(--u) * 22)/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--eyebrow); }
.pm-h1, .pm-h2 {
  margin: 0; font-family: var(--font-heading); font-weight: var(--heading-weight);
  text-transform: var(--heading-case); letter-spacing: var(--heading-tracking); line-height: var(--heading-leading);
  color: var(--fg); text-wrap: balance;
}
.pm-h1 { font-size: calc(var(--u) * var(--h1, 92) * var(--heading-scale)); }
.pm-h2 { font-size: calc(var(--u) * var(--h2, 56) * var(--heading-scale)); }
.pm-hl { color: var(--hl); }
.pm-mark { background: var(--brand-accent); color: #FFFFFF; padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pm-body { margin: 0; font-size: calc(var(--u) * 30); line-height: 1.4; font-weight: 500; color: var(--muted); text-wrap: pretty; }
.pm-small { margin: 0; font-size: calc(var(--u) * 22); line-height: 1.4; font-weight: 600; color: var(--muted); }

/* CTA */
.pm-cta {
  display: inline-flex; align-items: center; gap: 0.5em; align-self: flex-start;
  background: var(--cta-bg); color: var(--cta-fg); border-radius: 999px;
  padding: calc(var(--u) * 20) calc(var(--u) * 38); font: 800 calc(var(--u) * 28)/1 var(--font-body); text-decoration: none; white-space: nowrap; justify-self: start;
}
.pm-cta::after { content: ""; width: 0.55em; height: 0.55em; border-top: 0.14em solid currentColor; border-right: 0.14em solid currentColor; transform: rotate(45deg); margin-left: 0.1em; }
.pm-url { font: 800 calc(var(--u) * 26)/1 var(--font-body); color: var(--fg); white-space: nowrap; }

/* Badge / tag */
.pm-badge { display: inline-flex; align-items: center; gap: 0.5em; align-self: flex-start; justify-self: start; border-radius: 999px; padding: calc(var(--u) * 12) calc(var(--u) * 24); font: 800 calc(var(--u) * 22)/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; background: var(--surface); color: var(--fg); }
.pm-badge--accent { background: var(--brand-accent); color: #FFFFFF; }
.pm-badge--primary { background: var(--brand-primary); color: #FFFFFF; }

/* Logo (with a white pill on dark backgrounds) */
.pm-logo {
  display: block; box-sizing: content-box; height: calc(var(--u) * 46); aspect-ratio: var(--logo-ratio);
  background: var(--logo-url) center / contain no-repeat content-box; background-color: var(--logo-pill);
  padding: var(--logo-pad); border-radius: 999px; flex: none; align-self: flex-start; justify-self: start;
}
.pm-logo--sm { height: calc(var(--u) * 34); }
.pm-logo--lg { height: calc(var(--u) * 60); }

/* Images: <img> with object-fit: cover, solid fallback + label when missing */
.pm-media { position: relative; overflow: hidden; background: var(--media-fallback); }
.pm-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos, center); display: block; }
.pm-media.is-empty > img { display: none; }
.pm-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 24); text-align: center; color: var(--media-label); font: 700 calc(var(--u) * 20)/1.35 var(--font-body);
  background-image: repeating-linear-gradient(135deg, transparent 0 calc(var(--u) * 22), rgba(127,140,170,0.10) calc(var(--u) * 22) calc(var(--u) * 24));
}
.pm-ph strong { font-size: calc(var(--u) * 22); letter-spacing: 0.1em; text-transform: uppercase; }
.pm-media:not(.is-empty) > .pm-ph, .pm-nolabels .pm-ph { display: none; }

/* Optional photo background (toolbar "Background: Photo", or ?bg=photo).
   Set --bg-image: url("../photos/x.jpg") in a template. A flat scrim keeps every text colour readable. */
.pm-canvas { --bg-image: none; --bg-scrim-dark: 0.86; --bg-scrim-light: 0.86; }
.pm-bgphoto, .pm-bgscrim { position: absolute; inset: 0; display: none; }
.pm-canvas[data-bg="photo"] > .pm-bgphoto, .pm-canvas[data-bg="photo"] > .pm-bgscrim { display: block; }
.pm-bgscrim { background: rgb(11 26 63 / var(--bg-scrim-dark)); }
.pm-canvas[data-variant="light"] > .pm-bgscrim { background: rgb(255 255 255 / var(--bg-scrim-light)); }
.pm-bgphoto > .pm-ph { align-items: flex-end; justify-content: flex-start; text-align: right; padding: 2.5% 3%; }

/* Simple inline icon box */
.pm-icon { width: 1em; height: 1em; flex: none; }

/* Preview chrome (hidden in export & print) */
.pm-toolbar {
  position: sticky; top: 0; z-index: 100; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  padding: 10px 16px; background: #0B1A3F; color: #FFFFFF; font: 500 13px/1.3 system-ui, sans-serif;
}
.pm-toolbar strong { font-size: 14px; margin-right: 6px; }
.pm-toolbar label { display: inline-flex; align-items: center; gap: 6px; }
.pm-toolbar select, .pm-toolbar button { font: inherit; padding: 6px 8px; border-radius: 6px; border: 1px solid #3B4C7A; background: #16264F; color: #FFFFFF; min-height: 32px; }
.pm-toolbar button { background: #1D3FD6; border-color: #1D3FD6; cursor: pointer; font-weight: 700; }
.pm-toolbar a { color: #DCE4FF; }
.pm-stage { padding: 24px; display: flex; justify-content: center; }
.pm-frame { position: relative; flex: none; box-shadow: 0 10px 40px rgba(11,26,63,0.18); }
.pm-frame > .pm-canvas { transform-origin: top left; position: absolute; top: 0; left: 0; }

body.pm-export { background: transparent; }
body.pm-export .pm-toolbar { display: none; }
body.pm-export .pm-stage { padding: 0; display: block; }
body.pm-export .pm-frame { box-shadow: none; width: auto !important; height: auto !important; }
body.pm-export .pm-frame > .pm-canvas { position: relative; transform: none !important; }

@media print {
  body { background: transparent; }
  .pm-toolbar { display: none !important; }
  .pm-stage { padding: 0 !important; display: block !important; }
  .pm-frame { box-shadow: none !important; width: auto !important; height: auto !important; }
  .pm-frame > .pm-canvas { position: relative !important; transform: none !important; break-inside: avoid; page-break-inside: avoid; }
  .pm-canvas.pm-guides::after { display: none; }
}