:root {
    --base-interface-strongest: #0a0a0a;
    --base-interface-stronger: #0d1117;
    --base-interface-strong: #3d444d;
    --base-interface-medium: #8b8ba7;
    --base-interface-soft: #F2ECDB;
    --base-interface-softer: #FFFCF5;
    --base-interface-softest: #fdfdfd;
    --base-critical: #ee7725;
    --base-danger: #d70015;
    --base-info: #005dd7;
    --base-success: #01a11e;
    --base-primary: #292a50;
    --base-warning: #e58600;
    --base-link: #006dcc;
    --base-secondary: #83758f;
    --base-gender-male: #1a8ae5;
    --base-gender-female: #de69c3;
    --base-panel-background: #FFFCF5;
    --color-interface-strongest: var(--base-interface-strongest);
    --color-interface-stronger: var(--base-interface-stronger);
    --color-interface-strong: var(--base-interface-strong);
    --color-interface-medium: var(--base-interface-medium);
    --color-interface-soft: var(--base-interface-soft);
    --color-interface-softer: var(--base-interface-softer);
    --color-interface-softest: var(--base-interface-softest);
    --color-critical-soft: var(--base-critical);
    --color-critical-strong: var(--base-critical);
    --color-critical-tint: var(--base-critical);
    --color-critical-shade: var(--base-critical);
    --color-danger-soft: var(--base-danger);
    --color-danger-strong: var(--base-danger);
    --color-danger-tint: var(--base-danger);
    --color-danger-shade: var(--base-danger);
    --color-info-soft: var(--base-info);
    --color-info-strong: var(--base-info);
    --color-info-tint: var(--base-info);
    --color-info-shade: var(--base-info);
    --color-success-soft: var(--base-success);
    --color-success-strong: var(--base-success);
    --color-success-tint: var(--base-success);
    --color-success-shade: var(--base-success);
    --color-warning-soft: var(--base-warning);
    --color-warning-strong: var(--base-warning);
    --color-warning-tint: var(--base-warning);
    --color-warning-shade: var(--base-warning);
    --color-primary-soft: var(--base-primary);
    --color-primary: var(--base-primary);
    --color-primary-tint: var(--base-primary);
    --color-primary-shade: var(--base-primary);
    --color-link: var(--base-link);
    --color-link-tint: var(--base-link);
    --color-link-shade: var(--base-link);
    --color-secondary: var(--base-secondary);
    --color-secondary-tint: var(--base-secondary);
    --color-secondary-shade: var(--base-secondary);
    --color-categorical-1: #007aff;
    --color-categorical-2: #5856d6;
    --color-categorical-3: #4cd964;
    --color-categorical-4: #ff2d55;
    --color-categorical-5: #ff9500;
    --color-categorical-6: #5ac8fa;
    --color-categorical-7: #fc0;
    --color-categorical-8: #8e8e93;
    --color-diverging-1: #2507b7;
    --color-diverging-2: #3109f5;
    --color-diverging-3: #6447f7;
    --color-diverging-4: #9884fa;
    --color-diverging-5: #cbc1fc;
    --color-diverging-6: #e5eef9;
    --color-diverging-7: #c8f5f0;
    --color-diverging-8: #92ece2;
    --color-diverging-9: #5be2d4;
    --color-diverging-10: #22c8b7;
    --color-diverging-11: #1ca394;
    --color-sequential-1: #1a844a;
    --color-sequential-2: #209f58;
    --color-sequential-3: #25b967;
    --color-sequential-4: #2ad476;
    --color-sequential-5: #45d987;
    --color-sequential-6: #5fde98;
    --color-sequential-7: #7ae4a9;
    --color-sequential-8: #94e9ba;
    --color-sequential-9: #afeecb;
    --color-sequential-10: #c9f4dc;
    --color-sequential-11: #e4f9ed;
    --color-connection: #697B69;
    --color-resources: #F5B13F;
    --color-equipping: #E46141;
    --color-strategy: #F9D6C3;
    --font-size-xsmall: 10px;
    --font-size-small: 12px;
    --font-size-regular: 14px;
    --font-size-h1: 40px;
    --font-size-h2: 24px;
    --font-size-h3: 18px;
    --font-size-h4: 16px;
    --font-size-h5: 16px;
    --font-size-h6: 16px;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --font-family-normal: "DM Sans", sans-serif;
    --font-family-fancy: "larken", sans-serif;
    --line-height-normal: 1.5;
    --line-height-tight: 1.1;
    --line-height-compact: 1.055;
    --spacing-tiny: 4px;
    --spacing-xsmall: 8px;
    --spacing-small: 12px;
    --spacing-medium: 16px;
    --spacing-large: 24px;
    --spacing-xlarge: 48px;
    --spacing-huge: 80px;
    --rounded-tiny: 2px;
    --rounded-xsmall: 4px;
    --rounded-small: 6px;
    --rounded-medium: 8px;
    --rounded-large: 12px;
    --rounded-xlarge: 16px;
    --rounded-huge: 24px;
    --box-shadow: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
    --theme-darkest: #222;
    --theme-dark: #333;
    --theme-medium: #555;
    --theme-light: #FFFCF5;
    --theme-lightest: #f3f3f3;
    --theme-white: #fff;
    --theme-black: #343a40;
    --text-color: #333;
    --color-primary: #292a50;
    --color-success: #5cb85c;
    --color-info: #5bc0de;
    --color-warning: #f0ad4e;
    --color-danger: #d9534f;
    --gutter-x: 30px;
    --panel-border: #3a3c72;
    --panel-body-padding: var(--spacing-large);
    --fa-font-face: 'FontAwesome';
    --fa-theme-weight: 900;
    --border-radius-base: 4px;
    --color-base-primary: 41, 42, 80;
    --focus-state-border: 1px solid #66afe9;
    --focus-state-border-color: #66afe9;
    --focus-state-shadow: 0 0 0 3px rgba(102, 175, 233, 0.6);
    --input-bg-disabled: #eee;
    --input-border: #ccc;
    --input-border-radius: 8px;
    --input-height-base: 34px;
    --input-padding: 6px 12px;
    --input-placeholder: #999;
    --slider-height: 8px;
    --slider-bg: var(--color-interface-soft);
    --slider-progress-bg: var(--color-primary);
    --slider-handle-offset: 29px;
    --slider-handle-bg: var(--color-interface-softest);
    --slider-handle-height: 16px;
    --slider-handle-bg--hover: var(--color-interface-softest);
    --slider-handle-border-color: var(--color-interface-soft);
    --slider-handle-border-color--hover: var(---color-interface-soft);
    --quad-size: 220px;
    --quad-gap: 10px;
}

@supports (color: color-mix(in srgb, red 50%, white 50%)) {
    :root {
        --tint-white-percentage: 50%;
        --shade-black-percentage: 15%;
        --color-critical-tint: color-mix(in srgb, var(--base-critical) 50%, transparent var(--tint-white-percentage));
        --color-critical-soft: color-mix(in srgb, var(--base-critical) 7%, transparent var(--tint-white-percentage));
        --color-critical-shade: color-mix(in srgb, var(--base-critical) 100%, #000 var(--shade-black-percentage));
        --color-danger-tint: color-mix(in srgb, var(--base-danger) 50%, transparent var(--tint-white-percentage));
        --color-danger-soft: color-mix(in srgb, var(--base-danger) 7%, transparent var(--tint-white-percentage));
        --color-danger-shade: color-mix(in srgb, var(--base-danger) 100%, #000 var(--shade-black-percentage));
        --color-info-tint: color-mix(in srgb, var(--base-info) 50%, transparent var(--tint-white-percentage));
        --color-info-soft: color-mix(in srgb, var(--base-info) 7%, transparent var(--tint-white-percentage));
        --color-info-shade: color-mix(in srgb, var(--base-info) 100%, #000 var(--shade-black-percentage));
        --color-success-tint: color-mix(in srgb, var(--base-success) 50%, transparent var(--tint-white-percentage));
        --color-success-soft: color-mix(in srgb, var(--base-success) 7%, transparent var(--tint-white-percentage));
        --color-success-shade: color-mix(in srgb, var(--base-success) 100%, #000 var(--shade-black-percentage));
        --color-warning-tint: color-mix(in srgb, var(--base-warning) 50%, transparent var(--tint-white-percentage));
        --color-warning-soft: color-mix(in srgb, var(--base-warning) 7%, transparent var(--tint-white-percentage));
        --color-warning-shade: color-mix(in srgb, var(--base-warning) 100%, #000 var(--shade-black-percentage));
        --color-primary-tint: color-mix(in srgb, var(--base-primary) 50%, transparent var(--tint-white-percentage));
        --color-primary-soft: color-mix(in srgb, var(--base-primary) 7%, transparent var(--tint-white-percentage));
        --color-primary-shade: color-mix(in srgb, var(--base-primary) 100%, #000 var(--shade-black-percentage));
        --color-link-tint: color-mix(in srgb, var(--base-link) 50%, transparent var(--tint-white-percentage));
        --color-link-shade: color-mix(in srgb, var(--base-link) 100%, #000 var(--shade-black-percentage));
        --color-secondary-tint: color-mix(in srgb, var(--base-secondary) 50%, transparent var(--tint-white-percentage));
        --color-secondary-shade: color-mix(in srgb, var(--base-secondary) 100%, #000 var(--shade-black-percentage));
        --color-gender-male-tint: color-mix(in srgb, var(--base-gender-male) 50%, transparent var(--tint-white-percentage));
        --color-gender-male-soft: color-mix(in srgb, var(--base-gender-male) 7%, transparent var(--tint-white-percentage));
        --color-gender-male-shade: color-mix(in srgb, var(--base-gender-male) 100%, #000 var(--shade-black-percentage));
        --color-gender-female-tint: color-mix(in srgb, var(--base-gender-female) 50%, transparent var(--tint-white-percentage));
        --color-gender-female-soft: color-mix(in srgb, var(--base-gender-female) 7%, transparent var(--tint-white-percentage));
        --color-gender-female-shade: color-mix(in srgb, var(--base-gender-female) 100%, #000 var(--shade-black-percentage))
    }
}

body {
    background-color: var(--base-primary);
}

p {
    font-family: var(--font-family-normal);
    font-size:var(--font-size-regular);
    line-height: var(--line-height-compact);
}

h1 {
    font-family: var(--font-family-fancy);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-medium);
}

h2 {
    font-family: var(--font-family-fancy);
    margin-top: var(--spacing-large);
    margin-bottom: var(--spacing-large);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-medium);
}

.resources h2 {
    color:var(--color-resources);
}

.connection h2 {
    color:var(--color-connection);
}

.equipping h2 {
    color:var(--color-equipping);
}

.strategy h2 {
    color:var(--color-strategy);
}

h2.title {
    font-size:var(--font-size-h2);
}

.panel-body h2 {
    margin-top:0;
}

a.arrow-hyperlink {
    text-decoration: none;
    font-weight:700;
}

a.arrow-hyperlink::after {
    content: "\f061";
    /* Font Awesome arrow-right */
    font-family: "FontAwesome";
    font-weight: 900;
    /* required for Solid icons in FA5 */
    display: inline-block;
    margin-left: 0.4em;
    vertical-align: baseline;
}

.br-tl { border-radius: var(--border-radius-base) 0 0 0 }
.br-tr { border-radius: 0 var(--border-radius-base) 0 0 }
.br-br {
    border-radius: 0 0 var(--border-radius-base) 0
}
.br-bl {
    border-radius: 0 0 0 var(--border-radius-base)
}

.navbar-logo {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand {
    height:80px;
}

@media only screen and (max-width:600px) {
    .navbar-logo {
        display: block;
        width:80%;
    }
    
    header .pull-right {
        float:none !important;
    }

    header .login-status {
        float:none;
    }

    .loginstatus > li {
        text-align: left;
    }
}

.hero .row {
    margin-left:-5px;
    margin-right:-5px;
}

.row.tan-bg {
    background-color:var(--base-interface-soft);
    margin-left:0;
    margin-right:0;
}

.panel, .breadcrumb, .card {
    border-radius: var(--border-radius-base);
    background-color: var(--base-panel-background);
}

.card {
    position: relative;
    overflow: hidden;
    border:0;
}

/* the background image layer */
.card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;

    width: 70%;
    /* adjust */
    height: 70%;
    /* adjust */
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;

    /*opacity: 0.18;*/
    /* “in the background” */
    pointer-events: none;
    /* don’t block clicks */
    z-index: 1;
    /* sits above card bg but below content */
}

/* keep actual content above the art layer */
.card>* {
    position: relative;
    z-index: 2;
}

/* per-card-type images */
.card.feature-card::after {
    background-image: url("https://walkwith.blob.core.windows.net/public/branding/feature-card.svg");
    width:100%;
    height:100%;
}

.card.resources::after {
    background-image: url("https://walkwith.blob.core.windows.net/public/branding/resources-panel-art.svg");
}


.card.strategy::after {
    background-image: url("/path/to/strategy-bg.png");
}

.card .row {
    display: flex;
    align-items: stretch;
    margin:0;
}

.card.equipping .title {
    color:var(--color-equipping);
}

@media only screen and (max-width:600px) {
    .card .row {
        flex-direction: column;
    }
}

.builtby {
    font-family: var(--font-family-fancy);
    font-size:40px;
    line-height: 1;
}
.title {
    font-family: var(--font-family-fancy);
    font-size:18px;
    line-height: 1;
    font-weight: var(--font-weight-medium);
}

.builtby b {
    color:var(--base-primary);
}

.panel {
    margin-bottom:var(--spacing-medium);
}

.panel-body {
    padding:var(--panel-body-padding);
}
.panel.panel-block>.panel-body {
    padding: var(--panel-body-padding);
}

.panel-default>.panel-heading,
.panel-default>.panel-header {
    background-color: var(--base-panel-background);
}

.login-block {
    background-color: var(--base-panel-background);
    padding: 20px;
    border-radius: var(--border-radius-base);
}

@media only screen and (max-width: 600px) {
    .account-entry .row {
        display: flex;
        flex-direction: column;
    }
}



.account-entry.card {
    background-color: var(--base-interface-soft);
    padding: 20px;
    border-radius: var(--border-radius-base);
}

header .navbar {
    background-color: var(--color-primary-shade);
    font-family: var(--font-family-normal)
    font-weight: 500;
}


.container .pagetitle {
    color: var(--theme-light);
}

.navbar-header {
    float: none !important;
    background-image: url("https://walkwith.blob.core.windows.net/public/branding/walkwith-pattern.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    min-height: 100px;
    color: var(--theme-light);

}

header .page-menu {
    float: none;
}

.navbar-inverse .navbar-nav>li>a {
    color: var(--theme-light);
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
    background-color: transparent;
}

.resource-title {
    font-family: var(--font-family-fancy);
}
h2:has(+ div.block-instance) {
    color:var(--theme-light);
}

.light, .light a {
    color:var(--theme-light);
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: stretch;
    margin: var(--spacing-medium) 0;
}

.row.quadrants {
    border-radius: var(--border-radius-base);
    overflow: hidden;
}

.quadrants>div {
    padding: 10px;
    font-family: var(--font-family-fancy);
    position:relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.quadrants>div p {
    position: relative;
    z-index:2;
    margin:0;
    font-family: var(--font-family-fancy);
}

.quadrants .active {
    font-weight: 800;
}

.quadrants .quad-bg {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    /* adjust */
    height: 70%;
    /* adjust */
    opacity: 1;
    /* adjust */
    z-index: 0;
    pointer-events: none;
}

.quadrants .inactive .quad-bg {
    display: none;
}

.quadrants>div.inactive::after {
    content: "";
    position: absolute;
    inset: 0;
    /* top/right/bottom/left: 0 */
    background: rgba(0, 0, 0, .4);
    pointer-events: none;
    /* keeps it clickable */
    z-index:5;
}

.quadrant-card {
    position: relative;
    overflow: hidden;
    border: 0;

    height: var(--quad-size);

    background-repeat: no-repeat;
    background-position: center;
    background-size: 70% 70%;

    color: #fff;
}

.quadrant-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.row>[class*="col-"]:has(> .quadrant-card) {
    margin-bottom: var(--quad-gap);
    padding-right:5px;
    padding-left:5px;
}

.feature-card {
    min-height: calc(var(--quad-size) * 2 + var(--quad-gap));
    background-color:var(--base-interface-soft);
    padding:30px;
}

@media only screen and (max-width: 600px) {
    .feature-card {
        margin-bottom:15px;
        height:350px;
    }
}

.feature-card.no-bg::after {
    background-image: none;
}

.feature-card .card-body, .about-card, .about-video {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* vertical centering */
    align-items: flex-start;
    /* left align horizontally */
    text-align: left;
    /* left-align text inside */
}

.about-card {
    /* height: calc(var(--quad-size) * 2 + var(--quad-gap)); */
    background-color: var(--base-interface-soft);
    padding: 30px;
}

.about-card .title {
    font-size:24px;
    color: var(--base-primary);
}

.about-video {
    height: calc(var(--quad-size) * 2 + var(--quad-gap));
}

@media only screen and (max-width:600px) {
    .about-video {
        height:100%;
    }
}

/* THIS is the key: body fills the card and becomes the centering container */
.quadrant-card .card-body {
    position: relative;
    z-index: 2;

    height: 100%;
    display: flex;
    align-items: center;
    /* vertical */
    justify-content: center;
    /* horizontal */
    text-align: center;

    padding: 12px;
    /* optional */
}

.quadrant-card .quad-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    /* adjust */
    height: 70%;
    /* adjust */
    opacity: 1;
    /* adjust */
    z-index: 0;
    pointer-events: none;
}

.quadrant-card .card-title {
    margin: 0;
    font-family: var(--font-family-fancy);
    font-size:24px;
}

.quadrant-connection {
    background: var(--color-connection);
    color: var(--theme-light);
}

.quadrant-resources {
    background-color: var(--color-resources);
    color:var(--theme-darkest);
}

.quadrant-equipping {
    background-color: var(--color-equipping);
    color:var(--theme-light);
}

.quadrant-strategy {
    background-color: var(--color-strategy);
    color:var(--theme-darkest);
}

/* Invert text colour on hover (choose the opposite of each quadrant’s normal text) */
a.card.quadrant-card.quadrant-connection:hover {
    color: var(--theme-darkest);
}

/* was light */
a.card.quadrant-card.quadrant-resources:hover {
    color: var(--theme-light);
}

/* was darkest */
a.card.quadrant-card.quadrant-equipping:hover {
    color: var(--theme-darkest);
}

/* was light */
a.card.quadrant-card.quadrant-strategy:hover {
    color: var(--theme-light);
}

/* was darkest */

.img-thumbnail {
    width: 80%;
    max-width: 200px;
    padding: 0;
    border-radius: 10px;
    border: 0px;
}

a {
    text-decoration: none;
    color: black;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-medium);
    margin: 20px 0;
}

.resource-grid>article {
    height: 100%;
    /* so the wrapper can stretch */
}


/* Your resource cards are wrapped in an <a> */
.resource-grid a,
.resource-grid a:hover,
.resource-grid a:focus {
    text-decoration: none !important;
}

/* Optional: keep text color consistent too */
.resource-grid a:hover,
.resource-grid a:focus {
    color: inherit;
}

/* Optional: in case the underline is being applied to the heading itself */
.resource-grid a:hover h3,
.resource-grid a:hover p {
    text-decoration: none !important;
}


.thumbnail-container {
    position: relative;
    width: 100%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.thumbnail-container.ratio-16x9 {
    max-height: 152px;
    overflow: hidden;
    align-items: start;
}

.pdf-thumbnail,
.thumbnail {
    max-width: 100%;
    height: auto;
    /*border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;*/
}

.thumbnail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    font-size: 14px;
}

.resource-info {
    flex: 1 1 auto;
    /* stretch to fill */
    display: flex;
    flex-direction: column;
    padding:30px 18px;
    gap: var(--spacing-medium);
}

.resource-info h2 {
    margin:0;
}

.partner h3 {
    font-size: var(--font-size-h3);
    margin-top:0;
}

.resource-title {
    font-weight:700;
    font-size:16px;
    flex: 0 0 auto;
}

.resource-description {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
}

/* Overlay across the entire card bottom */
/*.resource-description:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 64px;
    /* how tall the fade area is 
    pointer-events: none;

    /* Fade to the card bg color 
    background: linear-gradient(to bottom,
            rgba(255, 252, 245, 0) 0%,
            rgba(255, 252, 245, 1) 85%);
    z-index: 3;
}*/

.resource-links {
    display: flex;
    gap: var(--spacing-medium);
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top:auto;
}

.download-btn {
    padding: 8px 16px;
    background: #28a745;
    color: white !important;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.download-btn:hover {
    background: #218838;
}

.error {
    color: #d32f2f;
    font-size: 14px;
}

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007cba;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .resource-links {
        flex-direction: column;
        gap: 8px;
    }
}

.category {
    text-decoration: none;
    color: var(--light-theme);
    text-align: center;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-medium);
    margin-bottom: var(--spacing-medium);
}

@media (max-width: 600px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        /* Two equal columns */
    }
}

.grid>a.card,
.grid>a.card:hover,
.grid>a.card:focus,
.grid>a.card:active {
    text-decoration: none;
}

a.card { text-decoration: none;}

/* base */
a.card.quadrant-card {
    transition: filter .15s ease, transform .15s ease;
    /* optional but nice */
}

/* hover: 10% darker */
a.card.quadrant-card:hover {
    filter: brightness(0.9);
}

.card-thumbnail {
    aspect-ratio: 8 / 7;
    width: 100%;
    padding:var(--spacing-small);
    font-family: var(--font-family-fancy);
    font-weight: 500;
    font-size: 18px;
    overflow: hidden;
    position: relative;

}

.card-thumbnail.video {
    padding:0;
}

.grid>.card:nth-child(3n + 1) .card-thumbnail {
    background: var(--color-connection);
}

.grid>.card:nth-child(3n + 2) .card-thumbnail {
    background: var(--color-resources);
}

.grid>.card:nth-child(3n + 3) .card-thumbnail {
    background: var(--color-equipping);
}


.grid .card .card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.grid>.card.resource-item .card-thumbnail {
    position: relative;
    overflow: hidden;
    /* ensure it has a consistent height; adjust to suit your layout */
    aspect-ratio: 16 / 9;
}

.grid>.card .card-thumbnail.fallback {
    background-size: cover;
    background-position: center;
}

/*.grid>.card:nth-child(4n + 1) .card-thumbnail.fallback {
    background-image: url("https://walkwith.blob.core.windows.net/public/branding/thumbnail-bgs/ww-thumbnail-1.jpg");
}

.grid>.card:nth-child(4n + 2) .card-thumbnail.fallback {
    background-image: url("https://walkwith.blob.core.windows.net/public/branding/thumbnail-bgs/ww-thumbnail-2.jpg");
}

.grid>.card:nth-child(4n + 3) .card-thumbnail.fallback {
    background-image: url("https://walkwith.blob.core.windows.net/public/branding/thumbnail-bgs/ww-thumbnail-5.jpg");
}

.grid>.card:nth-child(4n + 4) .card-thumbnail.fallback {
    background-image: url("https://walkwith.blob.core.windows.net/public/branding/thumbnail-bgs/ww-thumbnail-4.jpg");
} */

/* Full-cover gradient overlay across the entire thumbnail */
/* .grid>.card .card-thumbnail.fallback::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, .50) 0%,
            rgba(0, 0, 0, .35) 45%,
            rgba(0, 0, 0, 0) 100%);
    z-index: 0;
} */

/* Title sits on top of the overlay, still aligned bottom */
.grid>.card .card-thumbnail.fallback .title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    margin: 0;
    padding: 16px;
    color: #fff;
    font-weight: 700;
    z-index: 1;
}

.grid .card .card-title {
    position: absolute;
    left: var(--spacing-medium);
    right: var(--spacing-medium);
    top: 50%;
    transform: translateY(-50%);
    /* vertical centering */
    margin: 0;
    text-align: left;
    z-index: 1;
    color:var(--theme-lightest);
    width:70%;
}

.grid .card .card-body {
    position: relative;
    padding-bottom: calc(var(--spacing-medium) + 3em);
        /* leave room so text doesn’t overlap */
}

a.card.card-body {
    text-decoration: none;
}

ul.ww-icons {
    list-style: none;
    padding-inline-start: 0;
}

ul.ww-icons>li {
    position: relative;
    padding-left: 1.6em;
    /* room for the icon */
}

ul.ww-icons>li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    /* tweak to align with text */
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

ul.ww-icons>li:nth-child(6n + 1)::before {
    background-image: url("https://walkwith.blob.core.windows.net/public/branding/icons/ww-list-icon1.svg");
}

ul.ww-icons>li:nth-child(6n + 2)::before {
    background-image: url("https://walkwith.blob.core.windows.net/public/branding/icons/ww-list-icon2.svg");
}

ul.ww-icons>li:nth-child(6n + 3)::before {
    background-image: url("https://walkwith.blob.core.windows.net/public/branding/icons/ww-list-icon3.svg");
}

ul.ww-icons>li:nth-child(6n + 4)::before {
    background-image: url("https://walkwith.blob.core.windows.net/public/branding/icons/ww-list-icon4.svg");
}

ul.ww-icons>li:nth-child(6n + 5)::before {
    background-image: url("https://walkwith.blob.core.windows.net/public/branding/icons/ww-list-icon5.svg");
}

ul.ww-icons>li:nth-child(6n + 6)::before {
    background-image: url("https://walkwith.blob.core.windows.net/public/branding/icons/ww-list-icon6.svg");
}

.ww-icons li {
    margin-bottom:var(--spacing-xsmall);
    font-size: var(--font-size-small);
}

.card-body .card-footer {
    position: absolute;
    left: var(--spacing-medium);
    /* or set to right: 0; if you want it on the right */
    bottom: var(--spacing-medium);
    margin:0;
    font-weight:700;
    /* override default theme card footer */
    padding:0;
    border:0;
    background-color: transparent;
}

/* override default theme card footer */

.card-footer:last-child {
    border-radius: 0;;
}

.grid .ratio-16x9 {
    position: relative;
    display: block;
}

.grid .ratio-16x9::before {
    content: "";
    display: block;
    /* padding-top: 56.25%; */
    /* 9/16 = 0.5625 */
}

.grid .ratio-16x9>.card-thumbnail-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: left;
}

/*
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-medium);
    margin-bottom:var(--spacing-medium);
}

.cat-grid .card-body {
    font-family: var(--font-family-fancy);
    font-weight:500;
    font-size:18px;
}

.cat-grid a.ratio-16x9 {
    position: relative;
    display: block;
}

.cat-grid a.ratio-16x9::before {
    content: "";
    display: block;
    padding-top: 56.25%;
    /* 9/16 = 0.5625
} 


.cat-grid a.ratio-16x9>.card-body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
*/

.full-page {
    min-height:80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

footer {
    background-color: var(--color-primary-shade);
    margin-bottom:0;
    margin-top:50px;
}

footer .navbar-brand, footer .menu {
    margin: 50px 20px;
}

footer .menu {
    padding:20px;
}

footer .ww-pattern {
    background-image: url("https://walkwith.blob.core.windows.net/public/branding/walkwith-pattern.svg");
    background-size: contain;
    background-repeat: repeat;
    background-position: left;
    min-height: 80px;
    height:100%;
}

.row.equal-height {
    display: flex;
    flex-wrap: wrap;
    /* keeps wrapping behavior */
    align-items: stretch;
    /* equal-height columns */
}

.row.equal-height>[class*="col-"] {
    display: flex;
    align-items: stretch;
    /* lets column children stretch */
}

.row.equal-height>[class*="col-"]>* {
    width: 100%;
}


.event-row {
    border-radius: var(--border-radius-base);
    background-color: var(--base-panel-background);
    display:flex;
    flex-direction: row;
    align-items: stretch;
    align-content: stretch;
}

a.event-row {
    text-decoration: none;
}

.event-thumbnail {
    background-color: var(--color-connection);
    color:var(--base-panel-background);
    padding: var(--spacing-medium);
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-small);
    font-family: var(--font-family-fancy);
}

.d-grid>.event-row:nth-child(3n + 1) .event-thumbnail {
    background: var(--color-connection);
}

.d-grid>.event-row:nth-child(3n + 2) .event-thumbnail {
    background: var(--color-equipping);
}

.d-grid>.event-row:nth-child(3n + 3) .event-thumbnail {
    background: var(--color-resources);
}

.event-time {
    font-size:var(--font-size-h3);
}

.event-timezone {
    text-align: center;
    font-size:var(--font-size-xsmall);
}

.event-body {
    padding:var(--spacing-large);
}

.event-title{
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-family: var(--font-family-fancy);
}

/* SURVEY CSS DETAILS */

.rock-blank {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--color-primary);
}

.rock-blank .panel {
    background-color: transparent;
}

.rock-blank h1 {
    color:var(--color-equipping);
}
.rock-blank h1 {
    font-size:24px;
    text-align: center;
    margin-bottom:50px;
}

 .rock-blank h2, 
.rock-blank h3, 
.rock-blank h4, 
.rock-blank h5,
.rock-blank .control-label {
    color:var(--theme-light);
}

body.survey .panel {
    width:100%;
}

@media (min-width: 768px) {
    body.survey .panel {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        /* optional: centers the panel on desktop */
    }
}

.rock-blank input {
    background-color: var(--color-primary-shade);
    border:none;
}

.rock-blank .input-group-addon {
    background-color: var(--color-primary-shade);
    color: var(--base-interface-soft);
    border: none;
}

.rock-blank .btn-primary {
    background-color: var(--base-interface-soft);
    color:var(--base-primary);
    font-weight: 700;
    min-width:100px;
}

body.survey * .workflow-enty {
    background-color: black;
}

body.survey * .form-control {
    color:var(--theme-light)
}

body.survey * .fieldgroup-personentry .col-md-6 {
    width:100%;
}

body.survey .panel-body .actions:last-of-type {
    border:none;
}

body.survey .rock-radio-button-list .control-label, body.survey .check-box-list .control-label {
    font-family:var(--font-family-fancy);
    font-size:24px;
    text-align: center;
    color:var(--base-interface-soft);
    margin-bottom: var(--spacing-medium);
}

body.survey .radio-inline, body.survey .checkbox-inline {
    padding:20px;
    background-color:var(--color-primary-shade);
    margin-bottom: var(--spacing-small);
    color: var(--theme-light);
    border-radius: var(--border-radius-base);
}

body.survey .in-columns .checkbox-inline:first-child,
.in-columns .radio-inline:first-child {
    padding-left:30px;
}
body.survey .in-columns .radio-inline+.radio-inline,
.in-columns .checkbox-inline+.checkbox-inline {
    padding-left:30px;
}

body.survey .in-columns .radio-inline, body.survey .in-columns .checkbox-inline {
    display:flex;
    align-items: center;
    gap:5px;
}

body.survey .radio-inline .label-text, body.survey .checkbox-inline .label-text {
    padding-left:5px;
}

body.survey input[type="radio"] {
    appearance: none;
    background-color: var(--base-primary);
    font: inherit;
    color: var(--base-interface-soft);
    width: 1.15em;
    height: 1.15em;
    border: 1px solid var(--base-interface-soft);
    border-radius: 50%;
    display: grid;
    place-content: center;
}

body.survey input[type="checkbox"] {
    appearance: none;
    background-color: var(--base-primary);
    font: inherit;
    color: var(--base-interface-soft);
    width: 1.15em;
    height: 1.15em;
    border: 1px solid var(--base-interface-soft);
    border-radius: var(--border-radius-base);
    display: grid;
    place-content: center;
}

body.survey input[type="radio"]::before {
    content: "";
    width: 1em;
    height: 1em;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--form-control-color);
    background-color: var(--base-primary);
}

body.survey input[type="radio"]::before {
    content: "";
    width: 1em;
    height: 1em;
    border-radius: var(--border-radius-base);
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--form-control-color);
    background-color: var(--base-primary);
}

body.survey input[type="radio"]:checked::before {
    transform: scale(1);
    background-color: var(--color-connection);
}

body.survey .radio-inline:has(input[type="radio"]:checked) {
    background: var(--base-interface-soft);
    color:var(--text-color);
}

/* highlight entire label when checkbox is checked */
.rockcheckboxlist label:has(input[type="checkbox"]:checked) {
    background: var(--base-panel-background);
    color:var(--text-color);
    border-radius: var(--border-radius-base);
    overflow: hidden;
}

.rock-blank p {
    color:var(--base-interface-soft);
}

body.survey img {
    display: block;
    margin: auto;
    width: 80%;
}