/* Skin "Adoption" from the WDF visual identity: green background, white copy,
   white button with navy text, 12px radius, Hauora. */
@font-face { font-family: 'Hauora'; src: url('/assets/fonts/hauora-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hauora'; src: url('/assets/fonts/hauora-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root { --navy: #092E5A; --green: #0FA589; --green-dark: #178360; --white: #FFFFFF; --line: #D9E0EA; }
* { box-sizing: border-box; }
html, body { margin: 0; font-family: 'Hauora', system-ui, sans-serif; color: var(--navy); }

/* ---- banner (rendered inside a partner's iframe: fills it) ---- */
.banner-page, .banner-page body { height: 100%; background: transparent; }
.banner {
    position: relative; height: 100vh; overflow: hidden; border-radius: 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 24px 32px; background: var(--green) center / cover no-repeat; color: var(--white);
}
.banner__body { max-width: 60%; }
.banner__title { margin: 0 0 6px; font-weight: 600; font-size: clamp(18px, 3.2vw, 34px); line-height: 1.15; }
.banner__text { margin: 0; font-size: clamp(13px, 1.6vw, 18px); line-height: 1.35; }
.banner__cta {
    flex: none; padding: 12px 20px; border-radius: 12px; background: var(--white); color: var(--navy);
    font-weight: 600; text-decoration: none; white-space: nowrap;
}
.banner__cta::after { content: ''; position: absolute; inset: 0; } /* whole card is clickable */
.banner__cta:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.banner[data-size="box"] { flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 20px; }
.banner[data-size="box"] .banner__body { max-width: 100%; }
.banner[data-size="box"] .banner__title { font-size: 22px; }
.banner[data-size="box"] .banner__text { font-size: 14px; }
.banner[data-size="mobile"] { padding: 10px 14px; }
.banner[data-size="mobile"] .banner__title { font-size: 15px; margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.banner[data-size="mobile"] .banner__body { max-width: 58%; }
.banner[data-size="mobile"] .banner__text { display: none; }
.banner[data-size="mobile"] .banner__cta { padding: 8px 12px; font-size: 14px; max-width: 42%; overflow: hidden; text-overflow: ellipsis; }

/* ---- short link page ---- */
.go { display: grid; place-items: center; min-height: 100vh; padding: 24px; text-align: center; }
.go a { color: var(--green-dark); }

/* ---- partner page ---- */
.partners { max-width: 860px; margin: 0 auto; padding: 32px 20px 64px; line-height: 1.5; }
.partners h1 { font-weight: 600; }
.partners label { display: block; font-weight: 600; margin: 16px 0 6px; }
.partners input { width: 100%; max-width: 360px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.partners .snippet { margin: 24px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.partners .snippet h3 { margin: 0 0 8px; }
.partners .preview { border: 0; width: 100%; max-width: 100%; border-radius: 12px; }
.partners textarea { width: 100%; min-height: 84px; margin-top: 8px; font: 13px/1.4 ui-monospace, monospace; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.partners button { margin-top: 8px; padding: 10px 16px; border: 0; border-radius: 12px; background: var(--green); color: var(--white); font: inherit; font-weight: 600; cursor: pointer; }