/* NZF · Debt-Free Dignity embed. Generated from the NZF design system. */
@font-face {
  font-family: "Museo Sans";
  src: url("fonts/MuseoSans-300.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url("fonts/MuseoSans-500.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url("fonts/MuseoSans-700.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url("fonts/MuseoSans-900.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* NZF colour system. Hex values are taken verbatim from the NZF Brand Guidelines.
   Every secondary colour ships as a pair: the saturated tone for type and fills,
   and its Mist for backgrounds. Use one pair per design. */

:root {
  /* --- Primary --- */
  --nzf-red:          #F60000;   /* Zakat Red   0/100/100/0 - the guidelines value, use this on screen */
  --nzf-red-print:    #EC1C24;   /* The red inside the supplied logo PDF: a CMYK 0/100/100/0 conversion.
                                    The shipped SVG logo artwork is normalised to #F60000 so the mark
                                    matches a red button on screen. Confirm with NZF which is canonical. */
  --nzf-red-mist:     #FFE4E2;   /* Zakat Red Mist  0/12/6/0 */
  --nzf-black:        #000000;
  --nzf-black-mist:   #F3F3F3;   /* 3/2/2/0 */
  --nzf-white:        #FFFFFF;

  /* --- Secondary: tone + mist --- */
  --nzf-midnight:      #11175E;
  --nzf-midnight-mist: #D9DDF9;
  --nzf-trust:         #0B409C;
  --nzf-trust-mist:    #DCEEFF;
  --nzf-horizon:       #0081C6;
  --nzf-horizon-mist:  #CFEEFE;
  --nzf-hope:          #3DB7E4;
  --nzf-hope-mist:     #E4F8FF;
  --nzf-growth:        #49A942;
  --nzf-growth-mist:   #F2FEF0;
  --nzf-harmony:       #52B788;
  --nzf-harmony-mist:  #ECF9F2;   /* PLACEHOLDER - cut off in the supplied guide, confirm with NZF */
  --nzf-unity:         #670096;
  --nzf-unity-mist:    #F8ECFD;
  --nzf-dignity:       #791B51;
  --nzf-dignity-mist:  #FFEEF8;
  --nzf-kindness:      #FF81CA;
  --nzf-kindness-mist: #FFEEF8;
  --nzf-warmth:        #FF9636;
  --nzf-warmth-mist:   #FFF1E9;
  --nzf-guidance:      #FDB913;
  --nzf-guidance-mist: #FFF7E4;

  /* --- Document greys (supporting UI in this design system, not brand colours) --- */
  --nzf-grey-ink:    #4A4A4A;
  --nzf-grey-subtle: #8A8A8A;
  --nzf-grey-rule:   #E6E6E6;

  /* --- Semantic aliases --- */
  --text-primary:  var(--nzf-black);
  --text-inverse:  var(--nzf-white);
  --text-accent:   var(--nzf-red);
  --text-muted:    var(--nzf-grey-ink);
  --text-subtle:   var(--nzf-grey-subtle);

  --surface-page:  var(--nzf-white);
  --surface-mist:  var(--nzf-black-mist);
  --surface-story: var(--nzf-red-mist);
  --surface-dark:  var(--nzf-black);

  --action-give:    var(--nzf-red);   /* donate, give, pay Zakat */
  --action-default: var(--nzf-black); /* register, read, learn */

  --divider: var(--nzf-grey-rule);

  /* --- Hierarchy ratios, documented as tokens so nobody has to look them up --- */
  --ratio-black:     45%;
  --ratio-white:     30%;
  --ratio-red:       12%;
  --ratio-red-mist:  8%;
  --ratio-black-mist: 5%;
}

/* NZF typography. The licensed brand faces load from tokens/fonts.css.
   Weight numbers map 1:1 onto the brand weight names. */

:root {
  --font-sans:   "Museo Sans", system-ui, -apple-system, sans-serif;  /* primary  */
  --font-serif:  "Museo", Georgia, "Times New Roman", serif;          /* secondary */
  --font-accent: "Bree", "Museo Sans", sans-serif;                    /* accent   */

  /* Weights, by brand role */
  --weight-headline:  900;  /* Museo Sans 900 */
  --weight-bold:      700;  /* Museo Sans 700 - subheads, word emphasis, CTA */
  --weight-medium:    500;  /* Museo Sans 500 - subheads, body */
  --weight-body:      300;  /* Museo Sans 300 - body */
  --weight-accent:    700;  /* Bree Bold - the accent display weight */

  /* Post-frame scale. Values are px on a 1080 px frame; scale proportionally
     for 1200 and 1640 px frames. Nothing on a post goes below --post-floor. */
  --post-headline:      116px;
  --post-headline-tight: 92px;  /* landscape frames, six words or fewer */
  --post-display:       104px;  /* Museo Sans 900 fundraiser headline */
  --post-subhead:        52px;
  --post-quote:          68px;  /* Museo 300 italic */
  --post-body:           38px;
  --post-eyebrow:        34px;
  --post-floor:          30px;  /* absolute minimum, ~11 pt on a phone */

  --post-leading-headline: 0.96;
  --post-leading-body:     1.42;
  --post-tracking-headline: -0.025em;
  --post-tracking-eyebrow:   0.14em;

  /* Document scale, for guideline pages and specimen cards */
  --text-xs:  11px;
  --text-sm:  12.5px;
  --text-md:  13.5px;
  --text-lg:  17px;
  --text-xl:  25px;
  --text-2xl: 56px;
}

/* NZF layout: frame geometry, platform keep-out zones, print sizes, radii, spacing. */

:root {
  /* Frame sizes served by Instagram, Facebook and YouTube */
  --frame-square-w:   1080px;  --frame-square-h:   1080px;   /* Facebook feed, 1:1 */
  --frame-portrait-w: 1080px;  --frame-portrait-h: 1350px;   /* Instagram feed, 4:5 */
  --frame-story-w:    1080px;  --frame-story-h:    1920px;   /* Story, Reel and Facebook Reels cover, 9:16 */
  --frame-youtube-w:  1920px;  --frame-youtube-h:  1080px;   /* YouTube, 16:9 */
  --frame-link-w:     1200px;  --frame-link-h:      630px;   /* FB shared link, 1.91:1 */
  --frame-cover-w:    1640px;  --frame-cover-h:     624px;   /* FB page cover */

  /* Print, trim size. Add the printer's bleed on top — usually 3 mm a side. */
  --print-flyer-a5-w:  148mm;  /* @kind spacing */
  --print-flyer-a5-h:  210mm;  /* @kind spacing */  /* A5 flyer */
  --print-poster-a4-w: 210mm;  /* @kind spacing */
  --print-poster-a4-h: 297mm;  /* @kind spacing */  /* A4 poster */
  --print-poster-a3-w: 297mm;  /* @kind spacing */
  --print-poster-a3-h: 420mm;  /* @kind spacing */  /* A3 poster */

  /* Margin: 80 px on a 1080 px frame, ~7.4% of frame width.
     In print the same proportion gives 11 mm on A5, 15.5 mm on A4, 22 mm on A3. */
  --post-margin: 80px;
  --post-margin-link: 70px;
  --print-margin-a5: 11mm;
  --print-margin-a4: 15.5mm;
  --print-margin-a3: 22mm;

  /* Instagram Story UI keep-out. Type and logo live in the 1330 px middle. */
  --story-keepout-top:    250px;
  --story-keepout-bottom: 340px;

  /* Facebook cover: mobile crops the sides, the avatar covers the lower left */
  --cover-keepout-side:   200px;
  --cover-keepout-bottom: 180px;

  /* Logo */
  --logo-min-digital: 90px;  /* below this, switch to the stacked lock-up */

  --radius-sm:    6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-panel: 32px;
  --radius-pill: 999px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 80px;
}

/* NZF web layer: fluid tokens for body content embedded in nzf.org.au via iframe.
   Sizes scale with the iframe's width, not the browser's, because an embed only
   knows its own box. Floors keep body text at 16px or above on phones. */

:root {
  /* Type, fluid between a 360px and a 1200px wide embed */
  --web-display: clamp(2.25rem, 1.6rem + 3.2vw, 4rem); /* @kind spacing */      /* 36 → 64px, Museo Sans 900 */
  --web-h2:      clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem); /* @kind spacing */  /* 28 → 44px, Museo Sans 900 */
  --web-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); /* @kind spacing */  /* 20 → 26px, Museo Sans 900 */
  --web-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); /* @kind spacing */ /* 18 → 22px, Museo Sans 500 */
  --web-body:    1.0625rem;  /* 17px, Museo Sans 300 */
  --web-small:   0.9375rem;  /* 15px, the floor for anything a reader needs */
  --web-tag:     0.8125rem;  /* 13px, pill tags and tracked labels only */
  --web-figure:  clamp(3rem, 2rem + 5vw, 6rem); /* @kind spacing */             /* 48 → 96px, hero numbers */

  --web-leading-tight: 1.02;
  --web-leading-body:  1.6;

  /* Space */
  --web-space-1: 0.5rem;
  --web-space-2: 1rem;
  --web-space-3: 1.5rem;
  --web-space-4: 2.5rem;
  --web-space-5: clamp(3rem, 2rem + 4vw, 5.5rem);   /* between sections */

  /* Width */
  --web-measure: 40rem;    /* longest comfortable line of body text */
  --web-content: 72rem;    /* widest content inside the embed */
  --web-gutter:  clamp(1.25rem, 0.5rem + 3vw, 2.5rem); /* @kind spacing */

  /* Shape */
  --web-radius:      8px;
  --web-radius-pill: 999px;
  --web-hit:         48px;  /* minimum button and input height */
}

/* NZF embed styles. Link after styles.css in every embed page.
   An embed is body content only: no header, footer, nav or site chrome.
   The host page at nzf.org.au supplies all of that. */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:transparent}
body{font-family:var(--font-sans);font-weight:var(--weight-body);font-size:var(--web-body);line-height:var(--web-leading-body);color:var(--text-primary);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--nzf-red);text-decoration:underline;text-underline-offset:.15em}
a:hover{color:var(--nzf-black)}

.e-wrap{max-width:var(--web-content);margin:0 auto;padding:0 var(--web-gutter)}
.e-section{padding:var(--web-space-5) 0}
.e-section+.e-section{padding-top:0}
.e-band{background:var(--surface-mist)}
.e-band.e-section+.e-section,.e-section+.e-band.e-section{padding-top:var(--web-space-5)}

.e-tag{display:inline-flex;align-items:center;gap:.6em;font-size:var(--web-tag);font-weight:var(--weight-headline);letter-spacing:.14em;text-transform:uppercase;line-height:1;color:var(--accent,var(--nzf-red))}
.e-tag::before{content:"";width:1.75rem;height:3px;background:currentColor}
.e-display{margin:0;font-size:var(--web-display);font-weight:var(--weight-headline);line-height:var(--web-leading-tight);letter-spacing:-.025em;text-wrap:balance}
.e-h2{margin:0;font-size:var(--web-h2);font-weight:var(--weight-headline);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.e-h3{margin:0;font-size:var(--web-h3);font-weight:var(--weight-headline);line-height:1.15;letter-spacing:-.01em}
.e-hl{color:var(--accent-text,var(--nzf-red))}
.e-lead{margin:0;font-size:var(--web-lead);font-weight:var(--weight-medium);line-height:1.45;max-width:var(--web-measure);text-wrap:pretty}
.e-body{margin:0;max-width:var(--web-measure);text-wrap:pretty}
.e-small{font-size:var(--web-small);color:var(--text-muted)}
.e-stack{display:flex;flex-direction:column;gap:var(--web-space-2)}
.e-stack-lg{display:flex;flex-direction:column;gap:var(--web-space-3)}

.e-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:var(--web-hit);padding:.85em 1.5em;border-radius:var(--web-radius);font-family:var(--font-sans);font-size:1.0625rem;font-weight:var(--weight-bold);line-height:1.2;text-align:center;text-decoration:none;text-wrap:balance;border:2px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.e-btn-give{background:var(--action-give);color:#fff;box-shadow:0 4px 0 #A30000,0 8px 18px rgba(0,0,0,.18);transition:background-color .15s,transform .1s,box-shadow .1s}
.e-btn-give:hover{background:#D90000;color:#fff;transform:translateY(-1px);box-shadow:0 5px 0 #A30000,0 10px 22px rgba(0,0,0,.22)}
.e-btn-give:active{transform:translateY(3px);box-shadow:0 1px 0 #A30000,0 3px 8px rgba(0,0,0,.18)}
.e-btn-arrow::after{content:"→";font-weight:900;font-size:1.15em;line-height:1;transition:transform .15s}
.e-btn-arrow:hover::after{transform:translateX(3px)}
.e-btn-lg{min-height:58px;font-size:1.1875rem;padding:.9em 1.75em}
.e-btn-default{background:var(--action-default);color:#fff}
.e-btn-default:hover{background:#333;color:#fff}
.e-btn-ghost{background:transparent;color:var(--nzf-black);border-color:var(--nzf-black)}
.e-btn-ghost:hover{background:var(--nzf-black);color:#fff}
.e-btn:focus-visible{outline:3px solid var(--nzf-guidance);outline-offset:2px}
.e-actions{display:flex;flex-wrap:wrap;gap:var(--web-space-2);align-items:center}

.e-grid{display:grid;gap:var(--web-space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.e-card{background:#fff;border:1px solid var(--divider);border-radius:var(--web-radius);padding:var(--web-space-3);display:flex;flex-direction:column;gap:var(--web-space-2)}
.e-band .e-card{border-color:transparent}

.e-figure{position:relative;background:var(--nzf-red-mist);border:2px solid var(--nzf-red);border-radius:var(--web-radius);padding:var(--web-space-4) var(--web-space-3) var(--web-space-3);text-align:center}
.e-figure-label{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--nzf-red);color:#fff;font-size:var(--web-tag);font-weight:var(--weight-headline);letter-spacing:.14em;text-transform:uppercase;padding:.45em 1.1em;border-radius:4px;white-space:nowrap}
.e-figure-value{font-size:var(--web-figure);font-weight:var(--weight-headline);line-height:.95;letter-spacing:-.03em;color:var(--nzf-red)}
.e-figure-note{font-weight:var(--weight-bold);margin-top:var(--web-space-1)}

.e-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.e-ticks li{display:grid;grid-template-columns:1.5rem 1fr;gap:.75rem;align-items:start;font-weight:var(--weight-medium)}
.e-ticks li::before{content:"✓";width:1.5rem;height:1.5rem;border-radius:999px;background:var(--accent,var(--nzf-red));color:var(--accent-ink,#fff);font-size:.8rem;font-weight:900;display:flex;align-items:center;justify-content:center;margin-top:.1rem}

.e-rule{width:3.5rem;height:4px;background:var(--nzf-red);border:0;margin:0}

/* Photo slot: shows a labelled placeholder until an image is set as its background */
.e-photo{position:relative;border-radius:var(--web-radius);overflow:hidden;background:#D9D9D9 center/cover no-repeat;min-height:16rem;display:flex;align-items:center;justify-content:center;text-align:center}
.e-photo:empty::after{content:attr(data-label);padding:1.5rem;font-size:var(--web-small);font-weight:var(--weight-medium);color:#4A4A4A;max-width:22rem}
.e-photo[style*="background-image"]::after{content:none}

/* Callout: one line of emphasis, set off from body copy */
.e-callout{border-left:0;background:var(--accent-mist,var(--nzf-red-mist));border-radius:var(--web-radius);padding:var(--web-space-3);font-size:var(--web-lead);font-weight:var(--weight-bold);line-height:1.4;max-width:var(--web-measure);text-wrap:pretty}

/* Chips: short labelled items in a wrapping row */
.e-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.e-chips li{background:#fff;border:0;border-radius:4px;padding:.55rem 1rem;font-size:var(--web-small);font-weight:var(--weight-bold);line-height:1.2}

/* Stats */
.e-stats{display:grid;gap:var(--web-space-3) var(--web-space-2);grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}
.e-stat{border-top:4px solid var(--accent,var(--nzf-red));padding-top:var(--web-space-2);display:flex;flex-direction:column;gap:.4rem}
.e-stat b{font-size:var(--web-h2);font-weight:var(--weight-headline);line-height:1;letter-spacing:-.02em}
.e-stat span{font-weight:var(--weight-medium);line-height:1.4}

/* Numbered steps */
.e-steps{list-style:none;margin:0;padding:0;counter-reset:st;display:grid;gap:var(--web-space-2);grid-template-columns:repeat(auto-fit,minmax(min(100%,11.5rem),1fr))}
.e-steps li{counter-increment:st;background:#fff;border-radius:var(--web-radius);padding:var(--web-space-3) var(--web-space-2) var(--web-space-2);display:flex;flex-direction:column;gap:.4rem;position:relative}
.e-steps li::before{content:counter(st);width:2rem;height:2rem;border-radius:999px;background:var(--nzf-black);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;margin-bottom:.25rem}
.e-steps li:last-child::before{background:var(--nzf-red)}
.e-steps b{font-size:1.125rem;font-weight:var(--weight-headline);line-height:1.15}
.e-steps span{font-size:var(--web-small);line-height:1.5;color:var(--text-muted)}

/* Table */
.e-table{width:100%;border-collapse:collapse;font-size:var(--web-body)}
.e-table td{padding:.9rem 0;border-bottom:1px solid var(--divider);vertical-align:top}
.e-table td:last-child{text-align:right;font-weight:var(--weight-bold);white-space:nowrap;padding-left:var(--web-space-2)}
.e-table tr.total td{border-bottom:0;border-top:3px solid var(--nzf-black);font-weight:var(--weight-headline);font-size:var(--web-h3)}
.e-table tr.total td:last-child{color:var(--nzf-red)}

/* Timeline */
.e-timeline{list-style:none;margin:0;padding:0;display:grid;gap:var(--web-space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.e-timeline li{border-top:4px solid var(--nzf-black);padding-top:var(--web-space-2);display:flex;flex-direction:column;gap:.35rem}
.e-timeline li:last-child{border-top-color:var(--nzf-red)}
.e-timeline b{font-size:var(--web-small);font-weight:var(--weight-headline);letter-spacing:.08em;text-transform:uppercase}

/* Mobile first: most readers arrive on a phone at an event. Under 600px wide the
   layout tightens, CTAs go full width, steps become a compact list and tables stack. */
@media (max-width:599px){
  .e-actions{flex-direction:column;align-items:stretch}
  .e-actions .e-btn,.e-btn-block{width:100%}
  .e-steps{grid-template-columns:1fr;gap:.6rem}
  .e-steps li{display:grid;grid-template-columns:2rem 1fr;column-gap:.85rem;row-gap:.2rem;padding:var(--web-space-2)}
  .e-steps li::before{grid-row:1 / span 2;margin:0}
  .e-table tr{display:flex;flex-direction:column;gap:.15rem;padding:.8rem 0;border-bottom:1px solid var(--divider)}
  .e-table td{display:block;padding:0;border:0;text-align:left}
  .e-table td:last-child{text-align:left;padding:0;white-space:normal}
  .e-table tr.total{border-bottom:0;border-top:3px solid var(--nzf-black);margin-top:.25rem}
  .e-table tr.total td{border:0}
  .e-callout{font-size:1.0625rem;padding:var(--web-space-2)}
  .e-card{padding:var(--web-space-2)}
}

/* CTA block: the give button plus one line saying where it goes */
.e-cta{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.e-cta-note{display:flex;align-items:center;gap:.45rem;font-size:var(--web-small);color:var(--text-muted);margin:0}
.e-cta-note::before{content:"";width:.8rem;height:.8rem;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9zM9 7a3 3 0 0 1 6 0v2H9z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9zM9 7a3 3 0 0 1 6 0v2H9z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:599px){.e-cta{align-items:stretch}.e-cta .e-btn{width:100%}.e-cta-note{justify-content:center}}