/* TODO need to redo this vars to meaning rather than color */
:root {
    --main-background: #C3D153;
    --green: #C3D153;
    --dkgreen: #AFBC4A;
    --orange: #ED7A40;
    --ltblue: #E5F9FF;
    --dkblue: #0C7896;
    --dkrblue: #0b6980;
    --grblue: #446389;
    --vltgrey: #F7F9FA;
    --ltgrey: #DDDDDD;
    --dkgrey: #5D6662;
    --vdkgrey: #231F20;
    --cream: #F9FAED;

}

#html-body {
    font-family: "Source Sans Pro", sans-serif;
    color: var(--vdkgrey);
    font-size: 1.2rem;
}

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

html [id], body [id] {
    scroll-margin-top: 20px !important;
}

header {
    background-color: var(--main-background);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: inherit;
}

h1 { font-size: 38px; line-height: 1.2; }
h2 { font-size: 30px; line-height: 1.25; }
.blog-post-full h2 { font-size: 24px; line-height: 1.3; }
.blog-post-full h3 { font-size: 20px; line-height: 1.35; }
.blog-post-full h4 { font-size: 17px; line-height: 1.4; }
/* Embedded rich-text images/figures need breathing room from wrapping text. */
.blog-post-full figure,
.blog-post-full .align_left,
.blog-post-full .align_right,
.blog-post-full .align_center { margin-top: 1.5em; }
.blog-post-full .align_right { margin-left: 1.5em; margin-bottom: 1em; }
.blog-post-full .align_left { margin-right: 1.5em; margin-bottom: 1em; }

/* Break long unbreakable strings (e.g. DOI/full URLs) so they don't overflow the viewport on mobile.
   Set on #main and inherited by all descendants; `anywhere` lets the container shrink below the longest string. */
#main { overflow-wrap: anywhere; }
h3 { font-size: 24px; line-height: 1.3; }
h4 { font-size: 19px; line-height: 1.4; }
h5 { font-size: 16px; line-height: 1.4; }
h6 { font-size: 14px; line-height: 1.4; }

.notwhite h2 {
    color: #ffffff !important;
}

.card-title {
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 600;
}

em {
    color: inherit;
}

/*ul.ticklist {
    list-style-image: url('/site/templates/styles/images/tick.svg');
}
ul.ticklist li {
    padding-left: 10px;
}*/

/* hacky way to do it, but using list-style-image (above) doesn't let us vertically align the text with the custom bullet */
ul.ticklist li {
    background: url(/site/templates/styles/images/tick.svg) no-repeat left top;
    padding-left: 45px;
    list-style: none;
}

.ticklist_title {
    font-family: Montserrat;
    font-weight: 600;
    color:var(--vdkgrey);
    font-size: 1.5rem;
}


.tick_bullets {
    margin-left: 0px;
    padding-left: 0px;
}

ul.tick_bullets li {
    background: url(/site/templates/styles/images/tick.svg) no-repeat left top;
    background-size: 25px 25px;
    padding-left: 35px;
    margin-bottom: 20px;
    list-style: none;
}



blockquote {
    font-size: 18px;
    font-style: italic;
    margin: 0.25em 0;
    padding: 0.35em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
}

blockquote:before {
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: var(--green);
}

blockquote.notwhite:before {
    color: #ffffff;
}

.cta {
    color: #ffffff;
    /*font-weight: 600;*/
    font-size: 1.6rem;
    width: 175px;
}

.site-accent-background {
    background: var(--green);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Prevent accordion FOUC — non-open content uses [hidden] in markup so UIkit
   can manage the height transition (display:none would break the animation). */

/* Prevent grid vertical-gap FOUC — UIkit JS adds .uk-grid-margin to wrapped rows,
   but before JS loads there is no vertical spacing. This fallback applies row-gap
   only while no child has .uk-grid-margin yet; once UIkit JS processes the grid
   and adds that class to any child, :has() stops matching and row-gap drops to 0. */
.uk-grid:not(:has(> .uk-grid-margin)) { row-gap: 15px; }
.uk-grid.uk-grid-large:not(:has(> .uk-grid-margin)) { row-gap: 40px; }
@media (min-width: 1200px) {
    .uk-grid.uk-grid-large:not(:has(> .uk-grid-margin)) { row-gap: 70px; }
}

.uk-slidenav {
    color: #FFFFFF;
}

.uk-dotnav>*>* {
    background-color: #5D6662;
}

.uk-dotnav>.uk-active>* {
    background-color: #FFFFFF;
}

/* Press-kit sample-messages slider sits on a light background, so the global
   white arrows/active dot would be invisible — override with dark blue here. */
.press-kit-samples .uk-slidenav {
    color: var(--dkblue);
}

.press-kit-samples .uk-dotnav>*>* {
    background-color: rgba(93, 102, 98, 0.4);
}

.press-kit-samples .uk-dotnav>.uk-active>* {
    background-color: var(--dkblue);
}


.uk-navbar-nav {
    display: flex;
    align-items: center; /* vertically centers items in the navbar */
    margin: 0;           /* remove the fixed 30px */
}

.uk-navbar-nav>li>a {
    height: inherit; /* bit of a hack to fix the height of the YOUR STORY button even though the SIGN UP was working fine */
}

.uk-navbar-item,
.uk-navbar-nav > li > a,
.uk-navbar-toggle {
    font-family: "Montserrat", sans-serif;
    min-height: 40px;
    padding: 0 13px;
}

#masthead-navbar .uk-navbar-right {
    flex: 1 1 auto;
}
#masthead-navbar .uk-navbar-right > .uk-navbar-nav {
    width: 100%;
}
li.nav-button {
    margin-left: auto;
}

li.nav-search {
    margin-left: auto;
}

li.nav-search + li.nav-button,
li.nav-button + li.nav-button {
    margin-left: 8px;
}

.uk-tooltip {
    white-space: nowrap;
}

.user-icons {
    display: inline-flex;
    align-items: center;
}

.user-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--vdkgrey);
    border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.user-icons svg {
    width: 18px;
    height: 18px;
}

.user-icons a:hover,
.user-icons a:focus {
    background-color: rgba(35, 31, 32, 0.1);
    color: #000;
}

li.nav-button a {
    color: #fff !important;
    font-size: 17px !important;
}

/* Undo the global .uk-button-small.uk-border-pill rule for navbar buttons, which
   outranks the .uk-navbar-nav > li > a rule on min-height/padding and shrinks
   nav buttons from 40px to ~30px. */
li.nav-button a.uk-button-small.uk-border-pill {
    display: flex;
    align-items: center;
    line-height: 28px;
    padding: 0 13px;
    min-height: 48px;
    white-space: nowrap;
}

li.nav-button a.uk-button-secondary {
    background-color: var(--vdkgrey);
    border-color: var(--vdkgrey);
}

li.nav-button a.uk-button-secondary:hover,
li.nav-button a.uk-button-secondary:focus {
    background-color: #000;
    border-color: #000;
}

li.nav-button a.login-button {
    background-color: #fff;
    border-color: #fff;
    color: var(--vdkgrey) !important;
}

li.nav-button a.login-button:hover,
li.nav-button a.login-button:focus {
    background-color: var(--vdkgrey);
    border-color: var(--vdkgrey);
    color: #fff !important;
}

#masthead-logo img {
    width: 100px;
}

#edit-page {
    /* the edit page link that appears when page is editable */
    position: absolute;
    top: 10px;
    right: 10px;
}

.uk-offcanvas-bar {
    background-color: var(--vdkgrey);
    width: 320px;
}
@media (min-width: 640px) {
    .uk-offcanvas-bar {
        width: 400px;
    }
}
.uk-offcanvas-bar .uk-nav-default {
    font-size: 1.15rem;
}
.uk-offcanvas-bar .uk-nav-sub {
    font-size: 1rem;
}

.uk-nav-default {
    font-size: 1rem;
}
.uk-nav-default>li>a {
    color: #FFFFFF !important;
}

#offcanvas-toggle {
    position: absolute;
    top: 10px;
    left: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--vdkgrey);
    color: #fff;
    border-radius: 8px;
}

/* When the hamburger is visible (below @l breakpoint), push the site logo right to make room */
@media (max-width: 1199px) {
    #masthead-navbar .uk-navbar-left {
        margin-left: 60px !important;
    }
}

#offcanvas-toggle:hover,
#offcanvas-toggle:focus {
    background-color: #000;
    color: #fff;
}

#offcanvas-nav .uk-search-input {
    width: 100%;
}

img.uk-comment-avatar {
    width: 60px;
    height: 60px;
}

/****************************************************************
 * Bodycopy text and images
 *
 */

.uk-link,
a,
a:hover {
    color: var(--dkblue);
    text-decoration: none !important;
    cursor: pointer;
}

a.grey_link_color {
    color: #5e5e5e;
}

/* Links embedded in the consent sentence need a non-color cue (underline) so
   they're distinguishable from the surrounding text per WCAG 1.4.1. */
.agree a {
    text-decoration: underline !important;
}

.align_left {
    /* for images placed in rich text editor */
    float: left;
    margin: 0 1em 0.5em 0;
    position: relative;
    top: 0.5em;
    /*max-width: 50%;*/
}

.align_right {
    /* for images placed in rich text editor */
    float: right;
    margin: 0 0 0.5em 1em;
    /*max-width: 50%;*/
}

.align_center {
    /* for images placed in rich text editor */
    display: block;
    margin: 1em auto;
    position: relative;
    top: 0.5em;
}


figure {
    display: table;
    padding: 5px;
    font-size: smaller;
    line-height: 1.4em;
    margin: 0;
 }

 figure img {
    display: block;
    max-width: 100%;
    margin-bottom: 10px;
 }

 figcaption {
    display: table-caption;
    caption-side: bottom;
    padding: 0 5px 5px;
    color: var(--dkgrey);
    text-align: center;
 }

 .person-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
 }

 .person-card-link:hover,
 .person-card-link:focus-visible {
    color: inherit;
    text-decoration: none;
 }

 .person-card-link img.uk-border-circle {
    transition: transform 0.2s ease, box-shadow 0.2s ease, outline-color 0.2s ease;
    outline: 3px solid transparent;
    outline-offset: 3px;
 }

 .person-card-link:hover img.uk-border-circle,
 .person-card-link:focus-visible img.uk-border-circle {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    outline-color: var(--dkblue);
 }

 .person-card-link:hover figcaption span,
 .person-card-link:focus-visible figcaption span {
    color: var(--dkblue) !important;
 }

 .person-featured:has(.person-card-link:hover) img.uk-border-circle,
 .person-featured:focus-within img.uk-border-circle {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    outline-color: var(--dkblue);
 }

 .person-featured:has(.person-card-link:hover) .person-name,
 .person-featured:focus-within .person-name {
    color: var(--dkblue);
 }


.image-container {
	background-image: linear-gradient(45deg, var(--ltgrey) 25%, transparent 25%), linear-gradient(-45deg, var(--ltgrey) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--ltgrey) 75%), linear-gradient(-45deg, transparent 75%, var(--ltgrey) 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.image-container-thumb {
    padding: 0;
}

.img-overlay-wrap {
	position: relative;
	display: inline-block; /* <= shrinks container to image size */
	transition: transform 150ms ease-in-out;
}

.img-overlay-wrap img { /* <= optional, for responsiveness */
	/*display: block;*/
	max-width: 100%;
	height: auto;
}

.img-overlay-wrap svg {
	position: absolute;
	top: 10px;
	left: 10px;
}



/*********************************************************************
 * Media queries for responsive layout
 *
 */

@media only screen and (max-width: 767px) {
    /* mobile layout */

    .align_left,
    .align_right,
    .align_center {
        display: table;
        float: none;
        margin: 1em auto;
        max-width: 100%;
    }
}

/*@media only screen and (max-width: 959px) {
    #masthead {
        padding-bottom: 20px;
    }
}*/

/* push footer to the bottom if main too short */
body {
    display: flex;
    min-height: 100vh;
    height: 100%;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/********

*/

.uk-navbar-nav {
    gap: 5px;
}

.uk-navbar-item,
.uk-navbar-nav > li > a,
.uk-navbar-toggle {
    font-size: 1.1rem;
}

.uk-navbar-dropdown {
    top: 80px;
    width: auto;
    padding: 0;
    background-color: var(--green);
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

.uk-navbar-dropdown-nav>li {
    padding: 0 10px;
    margin: 0;
}

.uk-navbar-dropdown-nav>li>a {
    color: var(--vdkgrey);
    font-size: 17px;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    white-space: nowrap;
}

.uk-navbar-dropdown-nav>li>a:hover {
    color: var(--vdkgrey) !important;
    text-decoration: underline !important;
}

[class*=uk-navbar-dropdown-bottom] {
    margin-top: 1px;
}

.Inputfield_mygccb {
    position: absolute;
    left: -9999px;
}

.Inputfield_group_subscription_id {
    position: absolute;
    left: -9999px;
}

.InputfieldCheckboxesStacked li {
    list-style: none;
}

.InputfieldCheckboxesStacked li label input {
    margin-right: 5px;
}

li.Inputfield {
    list-style-type: none;
}

.uk-form-label {
    font-size: 16px !important;
    color: #666666 !important;
}

ul.InputfieldCheckboxesStacked {
    padding-left: 0 !important;
}

.phone_col {
    float: left;
    margin-right: 15px;
}


.uk-card .uk-button {
    border-radius: 20px;
    margin-top: 10px;
    width: 100%;
}

/* Pricing-card CTAs are authored content with an inline font-size; override to the
   standard pill shape and 1rem semibold button font to match CTAs elsewhere. */
.pricing-cards .uk-card .uk-button {
    border-radius: 1000px;
    font-size: 1rem !important;
    font-weight: 600;
}

/* The button's wrapper span is the card's last child; push it to the bottom so all
   CTAs align across cards of differing content length (flex-column cards). */
.pricing-cards .uk-card > span:last-child {
    margin-top: auto;
}

.uk-card .uk-padding-small {
    padding: 10px;
}


.uk-button,
.uk-button-primary {
    background-color: var(--green);
    font-family: Montserrat;
    font-size: 1rem;
    border: 1px solid transparent;
    text-decoration: none !important;
    text-transform: none;
}

.uk-button-primary {
    color: var(--vdkgrey);
}

.uk-button:hover,
.uk-button-primary:hover {
    background-color: var(--dkgreen);
    color: var(--vdkgrey);
}

.uk-button.uk-active {
    cursor: default;
}

.uk-button-secondary.uk-active, .uk-button-secondary:active {
    background-color: var(--vdkgrey);
    color: #FFFFFF;
}

.uk-button-secondary {
    background-color: var(--dkblue);
    color: #FFFFFF;
}

.uk-button-secondary:hover {
    background-color: var(--dkrblue);
    color: #FFFFFF;
}

.uk-button-fullwidth {
    font-weight: 400;
    font-size: 18px;
    width: 100%;
    line-height: 1.75;
    padding: 5px 10px;
}

.uk-button-grey {
    background-color: var(--ltgrey);
}

.uk-button-green {
    background-color: var(--green);
}

.uk-button-small {
    font-size: 0.8rem !important;
}

.uk-button-text {
    padding: 0 3px 0 3px;
}

/* Pill buttons: allow long labels to wrap with normal line-height instead of UIKit's
   fixed line-height (38/53/28px per wrapped line, which creates a huge vertical gap).
   Flexbox keeps the label visually centered for both single-line and wrapped content. */
.uk-button.uk-border-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
    padding-top: 8px;
    padding-bottom: 8px;
    height: auto;
    min-height: 38px;
    white-space: normal;
    text-align: center;
}
.uk-button-large.uk-border-pill {
    padding-top: 18px;
    padding-bottom: 18px;
    min-height: 58px;
}
.uk-button-small.uk-border-pill {
    padding-top: 3px;
    padding-bottom: 3px;
    min-height: 28px;
}

/* form styling */

.clear {
    clear: both;
}

input {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

.form-grey {
    color: #A3A3A3;
}

/*a:not(.button) {
    color: #3d3d3d;
    text-decoration: none;
}*/

.questions {
    display: block;
    margin: 0 auto;
    /*max-width: 800px;*/
}

#typeform {
    position: relative;
    font-family: "Source Sans Pro", sans-serif;
    z-index: 3;
}

#typeform .form {
    position: relative;
    z-index: 5;
}

#typeform .form .questions {
    position: relative;
    font-family: "Source Sans Pro", sans-serif;
    padding: 0;
}

@media only screen and (min-width: 800px) {
    #typeform .form .questions {
        padding: 0;
    }
}

#typeform .form .questions > li {
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -khtml-opacity: 0.4;
    -moz-opacity: 0.4;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    display: none;
}

#typeform .form .questions > li .wrapper {
    padding: 15px 20px 15px 0;
}

#typeform .form .questions > li.active {
    display: block;
}

#typeform .form .questions > li.visible .content {
    display: block;
}

#typeform .form .questions > li.focus {
    cursor: default;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#typeform .form .questions > li .content {
    display: none;
    position: relative;
    padding: 0;
}

.question {
    color: #3d3d3d;
    font-family: "Source Sans Pro", sans-serif;
    position: relative;
    padding: 0;
    cursor: default;
    padding-left: 0;
    line-height: 140%;
    text-align: left;
    font-size: 22px;
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

@media (max-width: 800px) {
    .question {
        font-size: 22px;
    }
}

@media (max-width: 550px), (max-height: 450px) {
    .question {
        font-size: 20px;
    }
}

.focus .message {
    visibility: visible;
}

#typeform ::-webkit-input-placeholder {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 22px;
    color: #cccccc;
}

#typeform :-moz-placeholder {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 22px;
    color: #cccccc;
}

#typeform ::-moz-placeholder {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 22px;
    color: #cccccc;
}

#typeform :-ms-input-placeholder {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 22px;
    color: var(--green);
}

input:-webkit-autofill {
    background-color: white !important;
    color: var(--dkgrey) !important;
    box-shadow: 0 0 0px 1000px #FFF inset !important; /* Ensure background color fills the field */
    -webkit-text-fill-color: var(--dkgrey) !important;
}

input:-webkit-autofill:focus {
    background-color: white !important;
    -webkit-text-fill-color: var(--dkgrey) !important;
}

input::placeholder {
    color: var(--ltgrey) !important;
}

/*@media (max-width: 800px) {
    ::-webkit-input-placeholder {
        font-size: 22px;
    }

    #typeform :-moz-placeholder {
        font-size: 22px;
    }

    #typeform ::-moz-placeholder {
        font-size: 22px;
    }

    #typeform :-ms-input-placeholder {
        font-size: 22px;
    }
}*/

/*
@media (max-width:550px),
(max-height:450px) {
#typeform ::-webkit-input-placeholder {
    font-size: 20px;
}

#typeform :-moz-placeholder {
    font-size: 20px;
}

#typeform ::-moz-placeholder {
    font-size: 20px;
}

#typeform :-ms-input-placeholder {
    font-size: 20px;
}
}
*/

#typeform input {
    display: block;
    color: var(--green);
    /*width: 100%;*/
    resize: none;
    /*background: none;*/ /* was breaking date selectin on iOS*/
    background-color: #ffffff;
    outline: none;
    font-family: "Source Sans Pro", sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 22px;
    padding-left: 0px;
    margin: 0 !important;
    border: none;
    font-weight: bold;
}

.iti__search-input {
    padding-left: 30px !important;
}

@media (max-width: 800px) {
    input,
    .telPlus {
        font-size: 22px;
        line-height: 35px;
    }
}

@media (max-width: 550px), (max-height: 450px) {
    input,
    .telPlus {
        font-size: 20px;
        line-height: 30px;
    }
}

input::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input {
    /*border-bottom: 1px solid transparent*/
}

.ready input {
    border-color: var(--green);
    -moz-transition: border 0ms linear 600ms, border-radius 0ms linear 600ms;
    -webkit-transition: border 0ms linear 600ms, border-radius 0ms linear 600ms;
    -o-transition: border 0ms linear 600ms, border-radius 0ms linear 600ms;
    transition: border 0ms linear 600ms, border-radius 0ms linear 600ms;
}

.ready input:focus {
    border-color: transparent;
}

.message {
    position: relative;
    display: inline-block;
    display: none;
    z-index: 3;
    padding: 5px 8px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    background-color: #990000;
    margin-top: 20px;
}

.message span {
    font-family: Helvetica, Arial;
    color: #fff;
    font-size: 13px;
}

.message div {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #990000;
    position: absolute;
    top: -5px;
    left: 10px;
}

#typeform
    .form
    .questions
    > li.connected:not(.number, .textarea, .email, .textfield, .card-number, .card-expiry, .card-cvc)
    .wrapper {
    padding-top: 0;
}

#typeform
    .form
    .questions
    > li.connected:not(.number, .textarea, .email, .textfield, .card-number, .card-expiry, .card-cvc)
    .message {
    margin-top: 0;
}

/* Prevent outer div (.select) from clipping growing dropdown */
.select {
    overflow: visible !important;
}

.telPlus {
    font-family: "Source Sans Pro", sans-serif !important;
    font-size: 28px !important;
    color: var(--green) !important;
    display: inline-block !important;
}

.tel {
    display: inline-block !important;
}
.country {
    width: 60px;
}
.area_code {
    width: 90px;
}
.number {
    width: 160px;
}

.question span {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.Inputfield_profile_phone,
.Inputfield_register_phone {
    width: 100% !important;
}

.InputfieldFieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.InputfieldHeaderHidden {
    padding: 0 !important;
}

.label-hidden .InputfieldHeader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.InputfieldHeader, .InputfieldRadios ul li label {
    font-size: 1.1rem;
    color: var(--dkgrey);
}

.InputfieldHeader {
    display: block;
    padding-bottom: 6px;
}

.InputfieldColumnWidth {
    /* columns that are not 100% width */
    float: left;
    clear: none;
}
.InputfieldColumnWidthFirst {
    /* first column in a row of Inputfield columns */
    clear: both;
}
.InputfieldColumnWidth:not(.InputfieldColumnWidthFirst) {
    /* any column except first, in a row of Inputfield columns */
    margin-left: 1%;
}

.uk-navbar-nav li.uk-active > a,
.uk-nav li.uk-active > a {
    color: var(--vdkgrey);
}

.uk-navbar-nav > li > a {
    font-size: 17px;
    font-weight: 400;
    color: var(--vdkgrey);
}

/* Apply underline only to links whose parent li does NOT have button classes */
.uk-navbar-nav li.uk-active:not(.nav-button):not([class*="uk-button"]) > a,
.uk-nav li.uk-active:not(.nav-button):not([class*="uk-button"]) > a {
    text-decoration: underline !important;
}

.uk-navbar-nav > li:not(.nav-button) > a:hover,
.uk-navbar-nav > li:not(.nav-button):hover > a {
    color: var(--vdkgrey);
    text-decoration: underline !important;
}

.uk-nav-sub a {
    color: #FFFFFF !important;
}

.uk-section-secondary {
    background: var(--main-background);
}

.uk-input, .uk-select, .uk-textarea {
    font-size: 1rem;
    padding: 4px 8px;
    height: auto;
}

.uk-text-muted {
    color: #666 !important;
}

.headline {
    font-weight: bold;
}

.textblockhighlight {
    color: var(--green);
}

.text-overlay {
    width: 75%;
}

.text-overlay h1 {
    color: #ffffff;
    font-size: 3.5rem;
    text-shadow: 0 2px 0 #5e5e5e;
}

li.topic-control {
    display: inline-block;
    margin: 3px 1px;
    padding: 0;
}

li.topic-control a {
    color: #FFFFFF;
    display: block;
    padding: 0 10px;
}

@media (max-width: 800px) {
    .text-overlay h1 {
        font-size: 3rem;
    }
}

@media (max-width: 550px) {
    .text-overlay h1 {
        font-size: 2rem;
    }
}

@media (max-width: 400px) {
    .text-overlay h1 {
        font-size: 1.4rem;
    }
    .login-button {
        margin-bottom: 10px;
    }
}

i.arrow {
    border: solid var(--green);
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 15px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

img[data-sizes="auto"] {
    display: block;
    width: 100%;
}

/* Avatars carry square width/height for CLS; UIKit's img{max-width:100%!important}
   caps the width in narrow grid columns, so height must follow to stay circular. */
img.uk-border-circle[sizes] {
    height: auto;
}

.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-text-lead {
    font-family: "Montserrat", sans-serif;
}

.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge {
    font-weight: 600;
}

.uk-heading-medium {
    font-size: 3.5rem;
}

.uk-table {
    border-spacing: 10px;
    border-collapse: separate;
    font-size: 1.1rem;
}

.uk-table th {
    background-color: var(--dkblue);
    color: #FFFFFF;
    font-size: 1.2rem;
    text-transform: none;
    text-align: center;
}

.uk-table th a {
    color: #FFFFFF;
    text-decoration: underline !important;
}

.uk-table td {
    border-spacing: 5px;
    margin: 3px;
    background-color: #FFFFFF;
    color: var(--vdkgrey);
    text-align: left;
}

.uk-textarea {
    height: 250px;
}

.text-danger {
    font-size: 1rem;
    color: var(--green);
}

.enter-text {
    display: inline-block;
    padding-top: 5px;
}


.person_type {
    display: block;
    margin-top: 50px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 600;
    padding: 10px 15px;
    /*height: 30px;*/
    background: #4d4d46;
    color: #ffffff;
    border-radius: 5px;
}

.supporters_header {
    display: block;
    margin-top: 50px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 600;
    padding: 10px 15px;
    height: 30px;
    background: #4d4d46;
    color: #ffffff;
    border-radius: 5px;
}

input[type="date"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

.LoginRegisterLinksLogout {
    list-style: none;
}

#wrap_register_coupon {
    padding-bottom: 5px !important;
}

#wrap_coupon_apply_button {
    padding-bottom: 0 !important;
}

/* branded coupon hero */
.coupon-container {
    position: relative;
    width: 100%;
}

.coupon-container img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    min-height: 25vh;
    object-fit: cover;
    display: block;
}

.coupon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    padding: clamp(0.75rem, 3vw, 3rem) clamp(1rem, 4vw, 3.5rem);
    width: 75%;
    box-sizing: border-box;
    margin-top: 5%;
    margin-left: 5%;
}

.coupon-overlay-text {
    margin: 0;
    font-family: Montserrat;
    font-size: clamp(1rem, 2.75vw, 3.25rem);
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    overflow-wrap: break-word;
}


@media (min-width: 960px) {
    .coupon-overlay {
        width: 50%;
    }
}


.Inputfield:not(.InputfieldSubmit) {
    background: none !important;
    border: none !important;
}

ul.LoginRegisterLinks {
    list-style: none;
    padding-left: 0;
}

.Inputfield {
    padding: 0 0 22px 0 !important;
}

#testimonial-form .Inputfields {
    padding-left: 0;
}

.emptydate {
    color: #ccc !important;
    width: 250px !important;
}

@media only screen and (max-width: 959px) {
    #tracyUserBar {
        left: 50px !important;
    }
}

.requiredCheck {
    color: #cc0000;
}

/* modal */
.modal-container {
    width: 300px;
    margin: 0px auto;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
    transition: all 0.3s ease;
    font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
    margin-top: 0;
    color: #b9d332;
}

.modal-body {
    margin: 20px 0;
}

.modal-default-button {
    background-color: var(--green);
    color: #ffffff;
    font-weight: bold;
    font-size: 1em;
    margin: 0 auto;
    padding: 10px;
    border: none;
    text-align: center;
    cursor: pointer;
}
.phone {
    width: 250px !important;
}

#typeform .phone {
    padding-left: 50px !important;
}

.uk-form-width-large {
    max-width: 300px !important;
}

#contact-form ul {
    padding-left: 0 !important;
}

.pwcmb-widget {
    background: #ffffff;
    border: 1px solid #555354;
}

.pwcmb-widget button {
    background-color: #b8d332;
    border: none;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-size: 17px;
    padding: 16px 31px;
    text-decoration: none;
}

.pwcmb-widget button:hover {
    background-color: #555354;
}

.uk-article-meta {
    font-size: 1rem;
    color: var(--dkgrey);
}



.textblockhighlightorange {
    color: var(--orange);
}

.textblockhighlightblue {
    color: var(--dkblue);
}

.videoquote:before {
    display: block;
    padding: 10px 0 0 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: 0px;
    top: -20px;
}

blockquote footer {
    font-size: 1rem;
}

.uk-margin-xxlarge-right {
    margin-right: 90px !important;
}

@media (min-width: 640px) {
    .uk-padding-right\@s {
        padding-right: 40px !important;
    }
    .uk-padding-left\@s {
        padding-left: 40px !important;
    }

    .uk-margin-remove-bottom\@s {
        margin-bottom: 0 !important;
    }

}


@media (min-width: 960px) {
    .uk-padding-remove\@m {
        padding: 0px !important;
    }
    .uk-padding-top\@m {
        padding-top: 40px !important;
    }
    .uk-padding-large-top\@m {
        padding-top: 40px !important;
    }
    .uk-padding-right\@m {
        padding-right: 40px !important;
    }
    .uk-padding-left\@m {
        padding-left: 40px !important;
    }
    .uk-margin-large-right\@m {
        margin-right: 50px !important;
    }

    .uk-margin-remove-top\@m {
        margin-top: 0 !important;
    }

    .uk-margin-remove-bottom\@m {
        margin-bottom: 0 !important;
    }
}

.uk-height-xlarge {
    height: 550px;
}

@media (min-width: 1920px) {
    .uk-height-xlarge {
        height: 950px;
    }
}

.uk-cover {
    max-width: none;
    position: absolute;
    left: initial;
    top: initial;
    transform: initial;
    right: 0;
}

@media only screen and (max-width: 767px) {
    .uk-cover {
        right: -130px;
    }
}

/* Alert treatment — one shape for all severities (soft tint background, dark
   readable text, colored left accent bar, rounded, spaced); only the COLOUR
   differs per severity (see per-type rules below). !important overrides UIKit's
   .uk-alert base plus the module's red .LoginRegisterError default in
   LoginRegister.css. .uk-alert-primary is intentionally excluded — it's the
   site banner (_main.php), not an error/notification. */
.LoginRegisterError,
.uk-alert-warning,
.uk-alert-success,
.uk-alert-danger {
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    margin: 0 0 12px !important;
    font-weight: normal !important;
}

.LoginRegisterError:last-child,
.uk-alert-warning:last-child,
.uk-alert-success:last-child,
.uk-alert-danger:last-child {
    margin-bottom: 0 !important;
}

/* Validation + warning — orange (#A4451A on #FDEEE4 ≈ 5.4:1, passes WCAG AA) */
.LoginRegisterError,
.uk-alert-warning {
    background-color: #FDEEE4 !important;
    color: #A4451A !important;
    border-left: 4px solid var(--orange) !important;
}

/* Success — green (#4F5A14 on #EEF3D8 ≈ 6.5:1, passes WCAG AA) */
.uk-alert-success {
    background-color: #EEF3D8 !important;
    color: #4F5A14 !important;
    border-left: 4px solid var(--dkgreen) !important;
}

/* Danger — red (#A12222 on #FBE6E6 ≈ 6.4:1, passes WCAG AA) */
.uk-alert-danger {
    background-color: #FBE6E6 !important;
    color: #A12222 !important;
    border-left: 4px solid #C0392B !important;
}

.LoginRegisterError a,
.uk-alert-warning a {
    color: #A4451A;
    text-decoration: underline !important;
}

.uk-alert-success a {
    color: #4F5A14;
    text-decoration: underline !important;
}

.uk-alert-danger a {
    color: #A12222;
    text-decoration: underline !important;
}

.subscribe-form {
    padding-top: 50px;
}

.subscribe-form p {
    font-size: 1.3rem;
    font-family: "Montserrat", sans-serif;
}

/* Plan card selector */
.plan-cards {
    display: flex;
    gap: 12px;
}

.plan-card-label {
    flex: 1;
    cursor: pointer;
}

.plan-card-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plan-card {
    position: relative;
    border: 2px solid var(--ltgrey);
    border-radius: 10px;
    padding: 14px 12px;
    text-align: center;
    background: #fff;
    transition: border-color 0.2s, background 0.2s;
}

.plan-card-label:hover .plan-card {
    border-color: var(--dkblue);
    background: rgba(16, 151, 184, 0.06);
}

.plan-card-label input[type="radio"]:checked + .plan-card {
    border-color: var(--dkblue);
    background: rgba(16, 151, 184, 0.06);
}

.plan-card-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dkgrey);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.plan-card-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vdkgrey);
}

.plan-card-period {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--dkgrey);
}

.plan-card-original {
    font-size: 0.85em;
    font-weight: 400;
    color: var(--dkgrey);
    margin-right: 4px;
}

.plan-card-badge {
    position: absolute;
    top: -10px;
    right: -6px;
    background: var(--dkblue);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

@media (max-width: 400px) {
    .plan-cards {
        flex-direction: column;
    }
}

/* Support need card selector */
.sn-card-label {
    display: block;
    cursor: pointer;
}

.sn-card-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sn-card-label .sn-card {
    background: #fff;
    transition: border-color 0.2s, background 0.2s;
}

.sn-card-label:hover .sn-card {
    background: rgba(16, 151, 184, 0.06);
    border-color: var(--dkblue) !important;
}

.sn-card-label input[type="radio"]:checked + .sn-card {
    border-color: var(--dkblue) !important;
    background: rgba(16, 151, 184, 0.06) !important;
}

.sn-block-card {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 639px) {
    .sn-block-card {
        white-space: normal;
    }
}
.sn-block-emoji {
    font-size: 1.4rem;
    margin-left: 12px;
    flex-shrink: 0;
}

.sn-block-card:hover {
    border-color: var(--dkblue) !important;
    box-shadow: inset 0 0 0 1px var(--dkblue) !important;
    color: inherit;
    text-decoration: none;
}

.faq-item {
    transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-item:hover {
    border-color: var(--dkblue) !important;
    box-shadow: inset 0 0 0 1px var(--dkblue) !important;
}

.support-needs-grid {
    display: flex;
    gap: 0 15px;
}

.support-needs-grid > div {
    flex: 1;
}

@media (max-width: 959px) {
    .support-needs-grid {
        flex-direction: column;
        gap: 0;
    }
}

.featured-items-group .uk-card {
    color: var(--vdkgrey);
}
.featured-items-group .uk-card-body p,
.featured-items-group .uk-text-center p:not(.eyebrow) {
    color: var(--dkgrey) !important;
}

.featured-items-group a.link-card,
.featured-items-group a.link-card:hover,
.featured-items-group a.link-card:focus {
    color: inherit;
}
.featured-items-group a.link-card {
    transition: box-shadow 0.2s;
}
.featured-items-group a.link-card:hover,
.featured-items-group a.link-card:focus {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    text-decoration: none;
}
.featured-items-group a.link-card:hover .link-card__more,
.featured-items-group a.link-card:focus .link-card__more {
    text-decoration: underline;
}

.uk-breadcrumb {
    display: inline-block;
    padding: 0 0 15px 0;
    list-style: none;
}

.uk-breadcrumb li {
    display: inline;
}

.uk-breadcrumb > :nth-child(n + 2):not(.uk-first-column)::before {
    content: "|";
    display: inline;
    margin: 0 10px;
}

.uk-breadcrumb > * > * {
    display: inline;
    font-size: 1rem;
    color: var(--dkgrey);
}

#CommentForm {
    display: none;
}

#newsletter-subscribe-form ul {
    padding-left: 0 !important;
}

#newsletter-subscribe-form .InputfieldContent {
    display: inline !important;
}

#newsletter-subscribe-form .Inputfield {
    display: inline;
}

aside.invite_panel {
    border: 2px solid var(--green);
    border-radius: 0.5em;
}

aside.invite_panel button,
aside.invite_panel a {
    font-weight: bold;
}

aside.development {
    border-radius: 1em;
    padding: 1em;
    border: 2px solid var(--green);
}
aside.development details summary {
    font-weight: 600;
}

aside.development ul li,
aside.development ul {
    padding-left: 0;
}

a.inv_a {
    font-size: 1.2rem;
    border-bottom: 4px solid transparent;
}

strong.email_highlight {
    padding: 0.25rem 1rem;
    background-color: #fde0b0;
    border-radius: 10px;
    color: #333;
}

.InputfieldCheckbox.InputfieldStateRequired
    > .InputfieldContent
    > label
    > span.pw-no-select::after {
    content: "" !important;
}

/* Example Texts */
li.example_text_title {
    list-style-type: none;
    flex: inherit;
    padding-bottom: 10px;
    margin: 0;
}
li.example_text_title a {
    font-family: Montserrat !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}
/* UIKit's .uk-subnav default grey (#999) outranks .uk-button-secondary's white
   on specificity; force white so the pill labels stay legible. */
#example_texts_titles li.example_text_title a {
    color: #FFFFFF;
    padding: 10px 28px;
}
/* Selected pill button gets a dark fill to mark the active tab. */
#example_texts_titles > li.uk-active > a.uk-button-secondary {
    background-color: var(--vdkgrey);
    color: #FFFFFF;
}

.example_text {
    font-family: Montserrat !important;
    font-weight: 100 !important;
    font-size: 16px !important
}


/* Speech Bubbles */
.speech-bubble {
	position: relative;
    display: inline-block;
	background: #FFFFFF;
	border-radius: .4em;
    padding: 30px 30px 10px 30px;
    margin: 1em 0;
    color: var(--vdkgrey);
    font-weight: bold;
    font-size: 200%;
}

.speech-bubble h3 {
    font-size: 26px;
}

.speech-bubble-left {
    background-color: #FFFFFF;
}

.speech-bubble-left-blue {
    background-color: var(--ltblue);
}

.speech-bubble-right {
    background-color: var(--ltblue);
}

.speech-bubble:after {
	content: '';
	position: absolute;
	top: 75%;
	width: 0;
	height: 0;
	border: 25px solid transparent;
	border-bottom: 0;
	margin-top: -12.5px;
}

.speech-bubble-left:after {
	left: 0;
    border-right-color: #FFFFFF;
	border-left: 0;
    margin-left: -25px;
}

.speech-bubble-left-blue:after {
	left: 0;
    border-right-color:  var(--ltblue);
	border-left: 0;
    margin-left: -25px;
}

.speech-bubble-right:after {
	right: 0;
    border-left-color: var(--ltblue);
	border-right: 0;
    margin-right: -25px;
}

.cartoon_text_overlay {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 50px 40px 50px 60px;
    font-family: "Nanum Pen Script";
    font-size: 26px;
    color: var(--vdkgrey);
    line-height: 1
}

/* Fixed the ugly UIKIT RSS icon in the footer */
.uk-icon[uk-icon*="icon: rss"] svg path {
    stroke-width: 3.5;
    stroke-linecap: round;
}
.uk-icon[uk-icon*="icon: rss"] svg {
    transform: scale(0.85);
}
.uk-icon[uk-icon*="icon: rss"] svg circle {
    transform: scale(1.2);
    transform-origin: 0% 100%; /* Scale from the bottom-left corner */
}

.social_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    width: 44px;
    height: 44px;
    padding: 5px;
    margin-right: 5px;
    border-radius: 50%;
    box-sizing: border-box;
}

.social_icon > a {
    color: var(--green) !important;
}

.media_icon > svg,
.media_icon path {
    margin: 0 20px 10px 0;
    height: 30px;
    width: auto;
    fill: var(--dkgrey) !important;
    stroke: none !important;
}

.icon-responsive-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Align items vertically */
    gap: 25px 35px; /* Space between items */
}

.media_icon_grey {
    display: inline-flex; /* Allows alignment inside each logo's container */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    margin: 0;
    padding: 0;
    overflow: visible;
}
.media_icon_grey img {
    object-fit: contain;
}

.media_icon_grey path,
.media_icon_grey rect,
.media_icon_grey circle {
    fill: var(--dkgrey) !important;
    stroke: none !important;
}

@media (max-width: 768px) {
    .media_icon_grey {
        transform: scale(0.85);
        transform-origin: top left;
    }
    .icon-responsive-grid {
        gap: 20px 10px;
    }
}

@media (max-width: 480px) {
    .media_icon_grey {
        transform: scale(0.75);
        transform-origin: top left;
    }
}



@media (min-width: 960px) {
    .cartoon_text_overlay {
        font-size: 32px;
        padding: 60px 80px 60px 60px;
    }

    .speech-bubble h3 {
        font-size: 40px;
    }

    h1 { font-size: 50px; }
    h2 { font-size: 40px; }
    h3 { font-size: 32px; }
    h4 { font-size: 26px; }
    h5 { font-size: 20px; }
    h6 { font-size: 16px; }

    li.example_text_title a {
        font-size: 16px !important;
    }
    .example_text {
        font-size: 20px !important;
    }

}

/* On mobile the signup form column stacks under the intro body; UIkit adds a
   30px stacking gutter (.uk-grid-margin) which, on top of the intro's own
   bottom margin, leaves an oversized gap above the form. Drop the gutter so
   the form sits snugly under the intro. Only present when stacked (desktop
   keeps the columns side by side, no .uk-grid-margin). */
.signup-intro-grid > .uk-grid-margin {
    margin-top: 0;
}

/* Reset UIkit defaults and apply custom styling */
.buy-tabs.uk-tab {
    position: relative;
    border-bottom: 1px solid #dcdcdc;
    margin: 0 0 30px 0; /* Keep the uk-margin-medium-bottom spacing */
    padding: 0;
}

.buy-tabs.uk-tab::before {
    display: none; /* Remove UIkit's default bottom border */
}
/* All tabs */
.buy-tabs.uk-tab > li > a,
.buy-tabs.uk-tab > li > span {
    position: relative;
    padding: 10px 18px;
    color: var(--dkgrey);
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
    transition: background 0.2s ease, color 0.2s ease; /* Smooth transition */
}

/* Active tab */
.buy-tabs.uk-tab > li.uk-active > a,
.buy-tabs.uk-tab > li.uk-active > span {
    color: #000;
    font-weight: 700;
    border: 1px solid #dcdcdc;
    border-bottom: 1px solid #FFFFFF;
    border-radius: 4px 4px 0 0;
    position: relative;
    margin-bottom: -1px;
    z-index: 2;
}

/* Inactive hover */
.buy-tabs.uk-tab > li:not(.uk-active) > a:hover {
    color: #000;
    border-color: #e0e0e0;
    border-bottom: 1px solid #FFFFFF;
    border-radius: 4px 4px 0 0;
    margin-bottom: -1px;
}

/* ----------------------------------------------------------------
 * Topic filter panel — cream pill list (blog sidebar, experts page).
 * Supports both `.is-active` (custom) and `.uk-active` (UIKit Filter).
 * ---------------------------------------------------------------- */
.topic-filter {
    background: var(--cream);
    border: 1px solid var(--ltgrey);
    border-radius: 12px;
    padding: 18px;
}
.topic-filter__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.topic-filter__heading {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
}
.topic-filter__reset {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.8rem;
    line-height: 1.3;
    background: #fff;
    border: 1px solid var(--ltgrey);
    border-radius: 999px;
    color: var(--dkblue);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.topic-filter__reset:hover,
.topic-filter__reset:focus-visible {
    background: var(--dkblue);
    border-color: var(--dkblue);
    color: #fff;
    text-decoration: none;
}
.topic-filter__reset[aria-disabled="true"],
.topic-filter__reset.is-active,
.topic-filter__reset.uk-active {
    background: var(--dkblue);
    border-color: var(--dkblue);
    color: #fff;
}
.topic-filter__reset[aria-disabled="true"] {
    pointer-events: none;
}
.topic-filter__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.topic-filter__item {
    display: inline-block;
    padding: 5px 12px;
    font-size: 0.85rem;
    line-height: 1.3;
    background: #fff;
    border: 1px solid var(--ltgrey);
    border-radius: 999px;
    color: var(--dkblue);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.topic-filter__item:hover,
.topic-filter__item:focus-visible {
    background: var(--dkblue);
    border-color: var(--dkblue);
    color: #fff;
    text-decoration: none;
}
.topic-filter__item.is-active,
.topic-filter__item.uk-active {
    background: var(--dkblue);
    border-color: var(--dkblue);
    color: #fff;
}
/* When a pill is a li wrapping an anchor (UIKit Filter pattern), inherit colors */
.topic-filter__item > a {
    color: inherit;
    text-decoration: none;
}
/* Collapsible toggle: button wraps the heading + chevron. Behaves as static
 * text on desktop; clickable on mobile to expand/collapse the topic list. */
.topic-filter__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
}
.topic-filter__chevron {
    display: none;
    font-size: 0.7rem;
    color: #555;
    transition: transform 0.2s ease;
}
@media (max-width: 640px) {
    .topic-filter__toggle { cursor: pointer; }
    .topic-filter__chevron { display: inline-block; }
    .topic-filter[data-expanded="true"] .topic-filter__chevron { transform: rotate(180deg); }
    /* Collapsed by default: hide list, drop header margin */
    .topic-filter:not([data-expanded="true"]) .topic-filter__list { display: none; }
    .topic-filter:not([data-expanded="true"]) .topic-filter__header { margin-bottom: 0; }
    /* Collapsed but a topic is selected: show the list with only the active pill */
    .topic-filter:not([data-expanded="true"]) .topic-filter__list:has(.topic-filter__item.is-active, .topic-filter__item.uk-active) {
        display: flex;
    }
    .topic-filter:not([data-expanded="true"]):has(.topic-filter__item.is-active, .topic-filter__item.uk-active) .topic-filter__header {
        margin-bottom: 14px;
    }
    .topic-filter:not([data-expanded="true"]) .topic-filter__item:not(.is-active):not(.uk-active) {
        display: none;
    }
    /* Push the blog filter column above the posts column on mobile */
    .blog-page__filter { order: -1; }
}

/* ----------------------------------------------------------------
 * Sitewide pagination — circles for numbered pages, text+chevron for prev/next
 * Active page = filled dark-blue circle. Works with both pager configs:
 *   <li class="uk-active"><span aria-current="page">2</span></li>      (search)
 *   <li class="uk-active"><span><a href="...">2</a></span></li>        (blog)
 * ---------------------------------------------------------------- */
.uk-pagination { gap: 2px; align-items: center; flex-wrap: wrap; }
.uk-pagination > * { padding-left: 0; }
.uk-pagination > * > a,
.uk-pagination > * > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 999px;
    color: var(--dkblue);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.uk-pagination > * > a:hover {
    background: var(--ltgrey);
    color: var(--dkblue);
    text-decoration: none;
}
.uk-pagination > .uk-active > a,
.uk-pagination > .uk-active > span {
    background: var(--dkblue);
    color: #fff;
}
/* Reset nested anchor inside active span (blog/ukPagination shape) so the
 * pill doesn't double up dimensions. */
.uk-pagination > .uk-active > span > a {
    display: inline;
    padding: 0;
    min-width: 0;
    height: auto;
    background: transparent;
    color: inherit;
    border-radius: 0;
}
.uk-pagination > .uk-disabled > * {
    color: var(--ltgrey);
    background: transparent;
}
/* Prev / Next: keep text + chevron, no full-circle background */
.uk-pagination > li:first-child > a,
.uk-pagination > li:last-child > a {
    border-radius: 4px;
    padding: 0 8px;
}
/* Narrow screens: modest tightening so the row doesn't wrap */
@media (max-width: 640px) {
    .uk-pagination > * > a,
    .uk-pagination > * > span {
        min-width: 28px;
        height: 28px;
        padding: 0 4px;
        font-size: 0.9rem;
    }
    .uk-pagination > li:first-child > a,
    .uk-pagination > li:last-child > a {
        padding: 0 6px;
    }
}