/* kindr - KINDR Foundation (bekindr.org). Kindr's OWN rules, loaded after css/bekindr-live.css (the live site's
   CSS, generated - never edit that one by hand). Everything scoped to body.theme-kindr; colours from the tokens
   below; minimum text 14px (owner rule). */

body.theme-kindr {
    --kd-navy: #343877;        /* headings, subscribe band */
    --kd-yellow: #efc940;      /* buttons, underlines */
    --kd-yellow-soft: #fdf1c7;
    --kd-sky-soft: #dff3fb;
    --kd-purple: rgb(132, 63, 161);
    --kd-ink: #202020;
    --kd-muted: #777777;
    --kd-line: rgba(52, 56, 119, .1);
    --kd-font: Quicksand, sans-serif;
}
body.theme-kindr .kd-accent, body.theme-kindr a.kd-accent { color: var(--kd-purple); }
/* a slider with one page shows no dot (live) */
body.theme-kindr .slick-dots li:only-child { display: none; }

/* ---------- the post feed: the shared feed's rows (themes/shared/css/feed-rows.css + themes/townsquare/css/
   townsquare.css), in Kindr's colours through the --tq-* tokens the rows, the share menu, the toast and the
   Townsquare's windows read (the feed screens' body carries tq-ts tq-chrome: layouts/layout.php) ---------- */
body.theme-kindr.tq-chrome, body.theme-kindr .kd-tqfeed {
    --tq-skin-blue: var(--kd-purple);
    --tq-skin-navy: var(--kd-navy);
    --tq-blue: var(--kd-purple);
    --tq-navy: var(--kd-navy);
    --tq-ink: var(--kd-ink);
    --tq-yellow: var(--kd-yellow);
    --tq-white: #FFFFFF;
    --tq-text: var(--kd-ink);
    --tq-soft: #5f6270;
    --tq-muted: var(--kd-muted);
    --tq-line: var(--kd-line);
    --tq-line-hi: rgba(239, 201, 64, .55);
    --tq-cyan: var(--kd-sky, #2AB1E0);
    --tq-danger: #D92D20;
    --tq-display: var(--kd-font);
    --tq-body: var(--kd-font);
    --tq-mono: var(--kd-font);
}
/* the Townsquare paints its feed screens' page pale blue in navy: Kindr's page stays white, its text grey.
   The white is the page's (html), never the body's: a body background paints over the live site's z-index:-1
   pictures (the banner's .img--bg), as the live body's white does not once it is the page's own */
html:has(body.theme-kindr.tq-ts) { background: #fff; }
body.theme-kindr.tq-ts { background: transparent; color: #777; }
/* the live site's h3 (40px, its own colour) outweighs the row's title rule: the row keeps its own (townsquare.css .tq-post h3) */
body.theme-kindr .kd-tqfeed .tq-post h3 { font: 800 clamp(21px, 2.1vw, 27px)/1.18 var(--tq-display); letter-spacing: -.015em; color: var(--tq-navy); margin: 0 0 12px; }
/* the live site's link and paragraph rules reach the Townsquare's share menu and windows: theirs back */
body.theme-kindr :is(.kd-tqfeed, .tq-share-pop, .tq-scrim) a, body.theme-kindr :is(.kd-tqfeed, .tq-share-pop, .tq-scrim) a:hover { text-decoration: none; }
body.theme-kindr .tq-share-pop a { color: var(--tq-skin-navy); }
body.theme-kindr .tq-share-pop a:hover { color: var(--tq-skin-blue); }
body.theme-kindr .tq-share-pop p { margin: 4px 10px 6px; }
/* the sign-in window's heading: the window's own white and size (popups.css .tq-mtop h3), not the live h3 */
body.theme-kindr .tq-mtop h3 { font: 800 clamp(18px, 5vw, 24px)/1.15 var(--tq-display); color: inherit; letter-spacing: normal; }
body.theme-kindr .kd-feed__empty { color: var(--kd-muted); font-size: 16px; padding: 10px 0 60px; }
body.theme-kindr .kd-list { padding: 60px 0 80px; }

/* ---------- The Science of Kindness: the live masonry (isotope there; a grid here) ---------- */
@media (min-width: 1200px) {
    body.theme-kindr .projects-masonry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 450px; grid-auto-flow: dense; margin: 0; }
    body.theme-kindr .projects-masonry > .projects-masonry__item { max-width: none; width: auto; height: auto; flex: none; }
    body.theme-kindr .projects-masonry > .projects-masonry__item--height-1 { grid-row: span 2; }
    body.theme-kindr .projects-masonry > .col-xl-8 { grid-column: span 2; }
}

/* ---------- Read Full Bio windows (js/theme.js) ---------- */
body.theme-kindr .modal.team_mdl { display: block; position: fixed; inset: 0; z-index: 1050; overflow-y: auto; background: rgba(0, 0, 0, .5); padding: 40px 12px; }
body.theme-kindr .modal.team_mdl[hidden] { display: none; }
body.theme-kindr .modal.team_mdl .modal-dialog { position: relative; max-width: 699px; margin: 0 auto; pointer-events: auto; }
body.theme-kindr .modal.team_mdl .modal-content { background: #fff; border-radius: 4px; padding: 0; }
body.theme-kindr .modal.team_mdl .modal-body { padding: 40px 30px 30px; }
body.theme-kindr.kd-modal-open { overflow: hidden; }

/* ---------- the causes tabs (Our Programs) ---------- */
body.theme-kindr [data-kd-cause-card][hidden] { display: none; }

/* ---------- contact: the space the live reCAPTCHA box took ---------- */
body.theme-kindr .message-form .form__message { margin-bottom: 100px; }

/* ---------- shop: the live custom select ---------- */
body.theme-kindr .kd-select { display: inline-block; width: auto; min-width: 188px; height: 46px; border: 0; border-radius: 0; background: #fff; color: var(--kd-ink); font: 500 15px var(--kd-font); padding: 0 14px; margin-left: 8px; }

/* ---------- post detail ---------- */
body.theme-kindr .kd-article img { max-width: 100%; height: auto; }
body.theme-kindr .kd-video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 24px; }
body.theme-kindr .kd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.theme-kindr .kd-share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 30px 0; }
body.theme-kindr .kd-share > span { color: var(--kd-muted); font-size: 20px; margin-right: 6px; }
body.theme-kindr .kd-share a { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; background: #0166ff; color: #fff; font-size: 18px; text-decoration: none; }
body.theme-kindr .kd-share .kd-share__facebook { background: #0866ff; }
body.theme-kindr .kd-share .kd-share__twitter { background: #1d9bf0; }
body.theme-kindr .kd-share .kd-share__whatsapp { background: #12af0a; }
body.theme-kindr .kd-share .kd-share__linkedin { background: #007bb5; }
/* the event page */
body.theme-kindr .kd-event-cover { min-height: 0; padding: 0; background: none; }
body.theme-kindr .kd-event-cover .img--bg2 { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; }
body.theme-kindr .kd-event-tabs { display: flex; gap: 24px; border-bottom: 1px solid #e5e5e5; margin-top: 10px; }
body.theme-kindr .kd-event-tabs span { padding: 14px 0; font-size: 18px; font-weight: 600; color: var(--kd-ink); cursor: default; }
body.theme-kindr .kd-event-tabs span.is-on { color: #2c5b9a; box-shadow: inset 0 -3px 0 #2c5b9a; }
body.theme-kindr .title_block p { color: #555; font-size: 16px; margin-bottom: 6px; }
body.theme-kindr .title_block .title { color: var(--kd-navy); font-size: 36px; font-weight: 700; letter-spacing: -.03em; }
body.theme-kindr .event_boxx { margin: 22px 0; }
body.theme-kindr .event_boxx h5 { color: var(--kd-navy); font-size: 24px; font-weight: 700; margin-bottom: 10px; }
body.theme-kindr .event_boxx .icon_svg { color: #0166ff; font-size: 22px; width: 32px; }
body.theme-kindr .btn_register { display: inline-block; background: #0d6efd; color: #fff; font-weight: 700; font-size: 17px; padding: 6px 16px; border-radius: 2px; text-decoration: none; margin: 10px 0 30px; }
body.theme-kindr .btn_register:hover { color: #fff; background: #0b5ed7; }
body.theme-kindr .description h4 { color: var(--kd-navy); font-size: 28px; font-weight: 700; }

/* ---------- search ---------- */
body.theme-kindr .kd-search { display: flex; gap: 12px; margin: 0 0 28px; max-width: 720px; }
body.theme-kindr .kd-search .form__field { flex: 1; margin: 0; }
body.theme-kindr .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- subscribe page (stands alone, as live) ---------- */
body.theme-kindr.ig-screen-pages-subscribe { background: #fff; }
body.theme-kindr .kd-subscribe { min-height: 100vh; padding: 60px 16px 40px; font-family: Inter, system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; }
body.theme-kindr .kd-subscribe__logo img { width: 230px; height: auto; margin-bottom: 50px; }
body.theme-kindr .kd-subscribe__card { width: 100%; max-width: 532px; background: #fff; border: 1px solid #f0f0f0; padding: 24px; display: grid; gap: 16px; }
body.theme-kindr .kd-subscribe__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
body.theme-kindr .kd-subscribe__card label { display: block; font-size: 14px; font-weight: 400; color: #000; margin: 0; }
body.theme-kindr .kd-subscribe__card label > span { color: #ff3366; }
body.theme-kindr .kd-subscribe__card input[type="text"], body.theme-kindr .kd-subscribe__card input[type="email"], body.theme-kindr .kd-subscribe__card textarea { display: block; width: 100%; margin-top: 8px; border: 1px solid #e8ebf1; padding: 8px 16px; font-size: 14px; }
body.theme-kindr .kd-subscribe__check a { text-decoration: none; color: var(--kd-sky, #2AB1E0); }
body.theme-kindr .kd-subscribe__check { display: flex !important; align-items: center; gap: 6px; }
body.theme-kindr .kd-subscribe__btn { justify-self: start; background: var(--kd-sky, #2AB1E0); color: #fff; border: 0; font-size: 20px; font-weight: 700; padding: 2px 16px; }
body.theme-kindr .kd-subscribe__powered { margin-top: 30px; color: #686868; font-size: 14px; }
@media (max-width: 560px) { body.theme-kindr .kd-subscribe__row { grid-template-columns: 1fr; } }

/* ---------- the Contact page's form-builder form (.kd-form, kd_form_html(): live's form__field / form__message):
   the builder's own `.qme-form-system input:not(...)` (0,4,1, printed after this file) outranks live's .form__field, so live's
   pills are restated here with the element named (0,4,2) ---------- */
body.theme-kindr .kd-form .qme-form-system input.form__field, body.theme-kindr .kd-form .qme-form-system textarea.form__field { height: 50px; border-radius: 50px; border: 2px solid #f9f7f6; background: #f9f7f6; padding: 0 30px; font-size: 14px; font-weight: 700; }
/* the builder sizes its textareas itself (an inline height from its auto-grow script, `height: auto !important;
   min-height: 0 !important`), so live's 190px is a floor it cannot undo */
body.theme-kindr .kd-form .qme-form-system textarea.form__message { min-height: 190px !important; padding: 12px 30px; border-radius: 25px; }
/* as live: no labels over the boxes (the placeholders say it; the labels stay for screen readers), the button on the
   left, and no room kept for a reCAPTCHA the portal does not show (live's static form kept 100px for its widget) */
body.theme-kindr .kd-form .qme-form-system .form-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.theme-kindr .kd-form .qme-form-system textarea.form__message { margin-bottom: 0; }
body.theme-kindr .kd-form .qme-form-system .submit-box { text-align: left !important; }
/* live's boxes are 70px apart (the box's own 20px under it): the builder's mb-3 under each field is not added on top */
body.theme-kindr .kd-form .qme-form-system .qme-form-field { margin-bottom: 0 !important; }

/* ---------- the current section in the side menu: the header's yellow bar (live's .main-menu__item.active2, bekindr-live.css)
   as an underline under the link (header.php, theme_menu_item_active()) ---------- */
body.theme-kindr .aside-menu__item.active2 > .aside-menu__link span { text-decoration: underline; text-decoration-color: var(--kd-yellow); text-decoration-thickness: 3px; text-underline-offset: 6px; }