/* =========================================================
GLOBAL HEALTH EXPLORERS
DIABETES
NCD CHILD-PAGE
========================================================= */

/* =========================================================
RESET
========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

html {
scroll-behavior: smooth;
}

body {

font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;

color: #172b3a;

background: #ffffff;

line-height: 1.65;
}

img {
max-width: 100%;
display: block;
}

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

button,
input {
font: inherit;
}

/* =========================================================
VARIABLES
========================================================= */

:root {

--navy: #0b2d4d;
--navy-dark: #061d33;

--blue: #1769aa;
--blue-light: #eaf5fc;

--teal: #087f8c;
--teal-light: #e8f7f7;

--green: #2e8b57;
--green-light: #edf8f1;

--orange: #ef8a17;
--orange-light: #fff5e8;

--purple: #6f52a5;
--purple-light: #f4f0fb;

--red: #d94841;
--red-light: #fff0ef;

--text: #172b3a;
--muted: #617384;

--border: #dce5eb;

--light: #f5f8fa;

--white: #ffffff;

--shadow:
0 12px 35px rgba(11, 45, 77, 0.08);

--shadow-hover:
0 18px 45px rgba(11, 45, 77, 0.15);

--radius: 18px;
}

/* =========================================================
CONTAINER
========================================================= */

.container {

width:
min(1180px, calc(100% - 40px));

margin:
0 auto;
}

/* =========================================================
HEADER
========================================================= */

.site-header {

position: sticky;

top: 0;

z-index: 9999;

background:
var(--navy);

color:
var(--white);

box-shadow:
0 4px 18px rgba(0, 0, 0, 0.12);
}

.header-inner {

min-height: 74px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 30px;
}

/* =========================================================
LOGO
========================================================= */

.ghe-logo {

display: flex;

align-items: center;

gap: 12px;

flex-shrink: 0;
}

.logo-mark {

width: 44px;

height: 44px;

display: grid;

place-items: center;

border-radius: 12px;

background:
var(--white);

color:
var(--navy);

font-size: 0.82rem;

font-weight: 900;

letter-spacing: 0.03em;
}

.logo-text {

display: flex;

flex-direction: column;

line-height: 1.15;
}

.logo-text strong {

font-size: 0.95rem;
}

.logo-text small {

margin-top: 4px;

font-size: 0.68rem;

opacity: 0.72;
}

/* =========================================================
NAVIGATION
========================================================= */

.main-nav {

display: flex;

align-items: center;

gap: 6px;

padding: 5px;

border-radius: 999px;

background:
rgba(255,255,255,0.08);
}

.main-nav a {

padding: 9px 16px;

border-radius: 999px;

color:
rgba(255,255,255,0.88);

font-size: 0.86rem;

font-weight: 650;

transition:
background 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}

.main-nav a:hover {

background:
rgba(255,255,255,0.14);

color:
white;

transform:
translateY(-1px);
}

/* =========================================================
BREADCRUMB
========================================================= */

.breadcrumb-wrap {

background:
#f1f5f8;

border-bottom:
1px solid var(--border);
}

.breadcrumb {

min-height: 42px;

display: flex;

align-items: center;

gap: 9px;

font-size: 0.78rem;

color:
var(--muted);
}

.breadcrumb a {

color:
var(--blue);

font-weight: 650;
}

/* =========================================================
HERO
========================================================= */

.hero-diabetes {

position: relative;

min-height: 560px;

display: flex;

align-items: center;

overflow: hidden;

background:
linear-gradient(
135deg,
#071f35 0%,
#0b5264 48%,
#087f8c 100%
);

color:
white;
}

.hero-diabetes::after {

content: "";

position: absolute;

width: 560px;

height: 560px;

right: -180px;

top: -130px;

border:
75px solid rgba(255,255,255,0.06);

border-radius: 50%;
}

.hero-diabetes::before {

content: "";

position: absolute;

width: 280px;

height: 280px;

right: 190px;

bottom: -190px;

border:
55px solid rgba(255,255,255,0.045);

border-radius: 50%;
}

.hero-overlay {

position: absolute;

inset: 0;

background:
radial-gradient(
circle at 76% 55%,
rgba(255,255,255,0.12),
transparent 34%
);
}

.hero-content {

position: relative;

z-index: 2;

max-width: 920px;

padding:
85px 0;
}

.hero-label {

display: inline-flex;

padding:
7px 14px;

border-radius:
999px;

background:
rgba(255,255,255,0.13);

border:
1px solid rgba(255,255,255,0.20);

font-size:
0.72rem;

font-weight:
800;

letter-spacing:
0.12em;
}

.hero-content h1 {

margin-top:
22px;

max-width:
880px;

font-size:
clamp(2.8rem, 6vw, 5.4rem);

line-height:
1.02;

letter-spacing:
-0.045em;
}

.hero-content h1 span {

display: block;

color:
#a8e8e7;
}

.hero-lead {

max-width:
760px;

margin-top:
28px;

font-size:
clamp(1.05rem, 2vw, 1.35rem);

line-height:
1.7;

color:
rgba(255,255,255,0.87);
}

.hero-question {

max-width:
790px;

margin-top:
25px;

padding:
18px 22px;

border-left:
4px solid #8ee1df;

background:
rgba(255,255,255,0.08);

border-radius:
0 12px 12px 0;

font-size:
1rem;
}

.hero-question span {

font-weight:
800;

color:
#a8e8e7;
}

.hero-button {

display:
inline-flex;

margin-top:
32px;

padding:
13px 22px;

border-radius:
999px;

background:
white;

color:
var(--navy);

font-weight:
800;

transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}

.hero-button:hover {

transform:
translateY(-2px);

box-shadow:
0 10px 25px rgba(0,0,0,0.18);
}

/* =========================================================
SECTION BASICS
========================================================= */

.content-section {

padding:
90px 0;
}

.light-section {

background:
#f6f9fb;
}

.dark-section {

background:
var(--navy-dark);

color:
white;
}

.blue-section {

background:
linear-gradient(
135deg,
#0b3658,
#0a6474
);

color:
white;
}

.section-heading {

max-width:
840px;

margin-bottom:
45px;
}

.section-heading.centered {

margin-left:
auto;

margin-right:
auto;

text-align:
center;
}

.section-heading h2 {

margin-top:
10px;

color:
var(--navy);

font-size:
clamp(2rem, 4vw, 3.25rem);

line-height:
1.15;

letter-spacing:
-0.035em;
}

.light-heading h2 {

color:
white;
}

.section-heading p {

margin-top:
15px;

color:
var(--muted);

font-size:
1.05rem;
}

.light-heading p {

color:
rgba(255,255,255,0.78);
}

.eyebrow {

display:
inline-block;

color:
var(--teal);

font-size:
0.73rem;

font-weight:
850;

letter-spacing:
0.13em;
}

.light-heading .eyebrow {

color:
#a8e8e7;
}

/* =========================================================
PATHWAY
========================================================= */

.pathway-section {

padding:
55px 0;

background:
white;

border-bottom:
1px solid var(--border);
}

.learning-pathway {

display:
flex;

align-items:
stretch;

gap:
9px;

overflow-x:
auto;

padding-bottom:
8px;
}

.path-step {

min-width:
150px;

flex:
1;

padding:
18px;

display:
flex;

align-items:
center;

gap:
12px;

background:
#f6f9fb;

border:
1px solid var(--border);

border-radius:
14px;
}

.path-number {

width:
35px;

height:
35px;

flex-shrink:
0;

display:
grid;

place-items:
center;

border-radius:
10px;

background:
var(--navy);

color:
white;

font-size:
0.75rem;

font-weight:
850;
}

.path-step h3 {

font-size:
0.92rem;

color:
var(--navy);
}

.path-step p {

margin-top:
2px;

font-size:
0.72rem;

line-height:
1.35;

color:
var(--muted);
}

.path-arrow {

display:
grid;

place-items:
center;

color:
var(--teal);

font-size:
1.2rem;

font-weight:
800;
}

/* =========================================================
TWO COLUMN
========================================================= */

.two-column {

display:
grid;

grid-template-columns:
minmax(0, 1.45fr)
minmax(300px, 0.8fr);

gap:
55px;

align-items:
center;
}

.large-text {

font-size:
1.35rem;

line-height:
1.6;

color:
var(--navy);

font-weight:
500;
}

.two-column p + p {

margin-top:
17px;
}

/* =========================================================
EVIDENCE CARD
========================================================= */

.evidence-card {

padding:
35px;

border-radius:
22px;

background:
linear-gradient(
145deg,
#f2fbfb,
#e7f5f8
);

border:
1px solid #cde8eb;

box-shadow:
var(--shadow);

text-align:
center;
}

.evidence-icon {

font-size:
2.5rem;

margin-bottom:
10px;
}

.evidence-number {

font-size:
clamp(2.6rem, 5vw, 4rem);

line-height:
1;

font-weight:
900;

color:
var(--teal);
}

.evidence-label {

margin-top:
10px;

color:
var(--navy);

font-weight:
800;
}

.evidence-note {

margin-top:
16px;

padding-top:
16px;

border-top:
1px solid #cde8eb;

font-size:
0.82rem;

color:
var(--muted);
}

/* =========================================================
KEY MESSAGE
========================================================= */

.key-message {

margin-top:
45px;

display:
flex;

gap:
18px;

padding:
23px;

border-left:
5px solid var(--teal);

background:
var(--teal-light);

border-radius:
0 14px 14px 0;
}

.key-message-icon {

font-size:
1.8rem;
}

.key-message h3 {

color:
var(--navy);

margin-bottom:
5px;
}

/* =========================================================
PERSONAL QUESTIONS
========================================================= */

.question-grid {

display:
grid;

grid-template-columns:
repeat(4, 1fr);

gap:
18px;
}

.question-card {

padding:
25px;

background:
white;

border:
1px solid var(--border);

border-radius:
var(--radius);

box-shadow:
0 5px 20px rgba(11,45,77,0.04);
}

.question-card > span {

display:
inline-grid;

place-items:
center;

width:
30px;

height:
30px;

border-radius:
50%;

background:
var(--teal-light);

color:
var(--teal);

font-size:
0.72rem;

font-weight:
850;
}

.question-card h3 {

margin-top:
16px;

color:
var(--navy);
}

.question-card p {

margin-top:
8px;

color:
var(--muted);

font-size:
0.9rem;
}

/* =========================================================
CONCEPT GRID
========================================================= */

.concept-grid {

display:
grid;

grid-template-columns:
repeat(3, 1fr);

gap:
20px;
}

.concept-card {

padding:
28px;

border:
1px solid var(--border);

border-radius:
var(--radius);

background:
white;

transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}

.concept-card:hover {

transform:
translateY(-4px);

box-shadow:
var(--shadow-hover);
}

.concept-icon {

font-size:
2rem;

margin-bottom:
12px;
}

.concept-card h3 {

color:
var(--navy);

font-size:
1.1rem;
}

.concept-card p {

margin-top:
8px;

color:
var(--muted);

font-size:
0.9rem;
}

/* =========================================================
LEARNING FLOW
========================================================= */

.learning-flow {

display:
grid;

grid-template-columns:
1fr auto 1fr auto 1fr auto 1fr;

align-items:
stretch;

gap:
10px;
}

.flow-card {

padding:
25px;

background:
rgba(255,255,255,0.09);

border:
1px solid rgba(255,255,255,0.15);

border-radius:
17px;
}

.flow-number {

width:
34px;

height:
34px;

display:
grid;

place-items:
center;

border-radius:
50%;

background:
#9ee3e0;

color:
var(--navy);

font-weight:
900;

font-size:
0.8rem;
}

.flow-card h3 {

margin-top:
15px;

color:
white;
}

.flow-card p {

margin-top:
8px;

color:
rgba(255,255,255,0.74);

font-size:
0.87rem;
}

.flow-line {

display:
grid;

place-items:
center;

color:
#9ee3e0;

font-size:
1.5rem;

font-weight:
800;
}

.important-box {

margin-top:
35px;

padding:
20px 24px;

border-radius:
14px;

background:
rgba(255,255,255,0.09);

border:
1px solid rgba(255,255,255,0.14);

color:
rgba(255,255,255,0.84);
}

.important-box strong {

color:
#a8e8e7;
}

/* =========================================================
DIABETES TYPES
========================================================= */

.type-grid {

display:
grid;

grid-template-columns:
repeat(3, 1fr);

gap:
20px;
}

.type-card {

padding:
30px;

border-radius:
20px;

background:
white;

border:
1px solid var(--border);

box-shadow:
0 6px 22px rgba(11,45,77,0.05);
}

.type-card.type-one {

border-top:
5px solid var(--blue);
}

.type-card.type-two {

border-top:
5px solid var(--teal);
}

.type-card.gestational {

border-top:
5px solid var(--purple);
}

.type-label {

display:
inline-flex;

padding:
6px 10px;

border-radius:
8px;

background:
var(--blue-light);

color:
var(--blue);

font-size:
0.7rem;

font-weight:
900;

letter-spacing:
0.08em;
}

.type-two .type-label {

background:
var(--teal-light);

color:
var(--teal);
}

.gestational .type-label {

background:
var(--purple-light);

color:
var(--purple);
}

.type-card h3 {

margin-top:
15px;

color:
var(--navy);

font-size:
1.2rem;
}

.type-card > p {

margin-top:
9px;

color:
var(--muted);

font-size:
0.9rem;
}

.type-card ul {

margin-top:
18px;

padding-left:
19px;

color:
var(--muted);

font-size:
0.86rem;
}

.type-card li + li {

margin-top:
8px;
}

/* =========================================================
THINK
========================================================= */

.think-list {

display:
grid;

gap:
18px;
}

.think-item {

display:
grid;

grid-template-columns:
55px 1fr;

gap:
18px;

padding:
25px;

border:
1px solid var(--border);

border-radius:
16px;

background:
white;

box-shadow:
0 5px 20px rgba(11,45,77,0.04);
}

.think-item > span {

width:
42px;

height:
42px;

display:
grid;

place-items:
center;

border-radius:
12px;

background:
var(--orange-light);

color:
var(--orange);

font-size:
0.78rem;

font-weight:
900;
}

.think-item h3 {

color:
var(--navy);

font-size:
1.02rem;
}

.think-item p {

margin-top:
7px;

color:
var(--muted);
}

/* =========================================================
CONNECT
========================================================= */

.connect-section {

background:
linear-gradient(
180deg,
#f5fbfb,
#ffffff
);
}

.connection-rings {

display:
grid;

grid-template-columns:
repeat(5, 1fr);

gap:
14px;
}

.connection-card {

position:
relative;

padding:
25px 20px;

border-radius:
18px;

background:
white;

border:
1px solid var(--border);

text-align:
center;

box-shadow:
0 6px 22px rgba(11,45,77,0.05);
}

.ring-number {

width:
42px;

height:
42px;

margin:
0 auto 14px;

display:
grid;

place-items:
center;

border-radius:
50%;

background:
var(--navy);

color:
white;

font-weight:
900;
}

.connection-card h3 {

font-size:
0.88rem;

color:
var(--navy);
}

.connection-card p {

margin-top:
9px;

color:
var(--muted);

font-size:
0.82rem;

line-height:
1.55;
}

.connection-card.self {

border-top:
4px solid var(--blue);
}

.connection-card.family {

border-top:
4px solid var(--teal);
}

.connection-card.community {

border-top:
4px solid var(--green);
}

.connection-card.country {

border-top:
4px solid var(--orange);
}

.connection-card.world {

border-top:
4px solid var(--purple);
}

/* =========================================================
SDH
========================================================= */

.sdh-grid {

display:
grid;

grid-template-columns:
repeat(3, 1fr);

gap:
18px;
}

.sdh-card {

padding:
27px;

border:
1px solid rgba(255,255,255,0.12);

border-radius:
17px;

background:
rgba(255,255,255,0.06);
}

.sdh-card h3 {

color:
white;

font-size:
1rem;
}

.sdh-card p {

margin-top:
9px;

color:
rgba(255,255,255,0.72);

font-size:
0.88rem;
}

.sdh-message {

margin-top:
35px;

padding:
22px 25px;

border-radius:
15px;

background:
rgba(255,255,255,0.08);

border:
1px solid rgba(255,255,255,0.14);

color:
rgba(255,255,255,0.82);
}

.sdh-message strong {

color:
#a8e8e7;
}

/* =========================================================
SDGs
========================================================= */

.sdg-grid {

display:
grid;

grid-template-columns:
repeat(4, 1fr);

gap:
18px;
}

.sdg-card {

padding:
26px;

border:
1px solid var(--border);

border-radius:
17px;

background:
white;
}

.sdg-card.primary {

border:
2px solid var(--teal);

background:
var(--teal-light);
}

.sdg-number {

width:
48px;

height:
48px;

display:
grid;

place-items:
center;

border-radius:
10px;

background:
var(--navy);

color:
white;

font-size:
1.15rem;

font-weight:
900;
}

.sdg-card h3 {

margin-top:
14px;

color:
var(--navy);

font-size:
1rem;
}

.sdg-card p {

margin-top:
8px;

color:
var(--muted);

font-size:
0.87rem;
}

/* =========================================================
ORGANIZATIONS
========================================================= */

.evidence-section {

background:
#f6f9fb;
}

.organization-grid {

display:
grid;

grid-template-columns:
repeat(3, 1fr);

gap:
20px;
}

.organization-card {

padding:
28px;

background:
white;

border:
1px solid var(--border);

border-radius:
var(--radius);

box-shadow:
0 5px 20px rgba(11,45,77,0.04);
}

.org-acronym {

display:
inline-flex;

padding:
6px 10px;

border-radius:
8px;

background:
var(--blue-light);

color:
var(--blue);

font-size:
0.72rem;

font-weight:
900;

letter-spacing:
0.05em;
}

.organization-card h3 {

margin-top:
13px;

color:
var(--navy);

font-size:
1rem;
}

.organization-card p {

margin-top:
8px;

color:
var(--muted);

font-size:
0.86rem;
}

/* =========================================================
DATA SNAPSHOT
========================================================= */

.data-section {

background:
white;
}

.data-grid {

display:
grid;

grid-template-columns:
repeat(4, 1fr);

gap:
18px;
}

.data-card {

padding:
28px;

border:
1px solid var(--border);

border-radius:
18px;

background:
#f7fafc;

text-align:
center;
}

.data-source {

display:
block;

color:
var(--teal);

font-size:
0.68rem;

font-weight:
900;

letter-spacing:
0.1em;
}

.data-card strong {

display:
block;

margin-top:
12px;

color:
var(--navy);

font-size:
clamp(1.8rem, 3vw, 2.6rem);

line-height:
1.1;
}

.data-card p {

margin-top:
12px;

color:
var(--muted);

font-size:
0.82rem;
}

.data-literacy-box {

margin-top:
25px;

padding:
24px;

border-left:
5px solid var(--orange);

border-radius:
0 15px 15px 0;

background:
var(--orange-light);
}

.data-literacy-box h3 {

color:
var(--navy);
}

.data-literacy-box p {

margin-top:
7px;

color:
var(--muted);
}

/* =========================================================
EVIDENCE DATE
========================================================= */

.evidence-date-section {

padding:
50px 0;

background:
#e9f5f7;
}

.evidence-date-card {

display:
flex;

align-items:
flex-start;

gap:
22px;

padding:
32px;

border-radius:
20px;

background:
white;

border:
1px solid #c9e4e8;

box-shadow:
var(--shadow);
}

.date-icon {

font-size:
2.2rem;
}

.evidence-date-card h2 {

color:
var(--navy);
}

.evidence-date-card p {

margin-top:
6px;

color:
var(--muted);
}

.date-grid {

margin-top:
23px;

display:
grid;

grid-template-columns:
repeat(3, 1fr);

gap:
15px;
}

.date-grid div {

padding:
15px;

border-radius:
12px;

background:
#f5f8fa;
}

.date-grid span {

display:
block;

color:
var(--muted);

font-size:
0.72rem;
}

.date-grid strong {

display:
block;

margin-top:
4px;

color:
var(--navy);

font-size:
0.85rem;
}

/* =========================================================
REFLECTION
========================================================= */

.reflection-grid {

display:
grid;

grid-template-columns:
repeat(3, 1fr);

gap:
20px;
}

.reflection-card {

padding:
28px;

border:
1px solid var(--border);

border-radius:
18px;

background:
white;

box-shadow:
0 5px 20px rgba(11,45,77,0.04);
}

.reflection-label {

color:
var(--teal);

font-size:
0.68rem;

font-weight:
900;

letter-spacing:
0.12em;
}

.reflection-card h3 {

margin-top:
14px;

color:
var(--navy);

font-size:
1rem;
}

.writing-space {

height:
100px;

margin-top:
25px;

border-bottom:
2px dashed #ccd7de;
}

/* =========================================================
ACTION
========================================================= */

.action-section {

background:
linear-gradient(
135deg,
#0b2d4d,
#075e68
);

color:
white;
}

.action-grid {

display:
grid;

grid-template-columns:
repeat(5, 1fr);

gap:
14px;
}

.action-card {

padding:
24px;

border-radius:
16px;

background:
rgba(255,255,255,0.08);

border:
1px solid rgba(255,255,255,0.14);
}

.action-number {

color:
#9ee3e0;

font-weight:
900;

font-size:
0.8rem;
}

.action-card h3 {

margin-top:
12px;

color:
white;
}

.action-card p {

margin-top:
8px;

color:
rgba(255,255,255,0.73);

font-size:
0.84rem;
}

.core-principle {

max-width:
850px;

margin:
45px auto 0;

padding:
28px;

display:
flex;

align-items:
center;

justify-content:
center;

gap:
16px;

text-align:
center;

border-radius:
18px;

background:
rgba(255,255,255,0.10);

border:
1px solid rgba(255,255,255,0.16);
}

.core-principle span {

font-size:
2rem;
}

.core-principle p {

color:
rgba(255,255,255,0.88);

font-size:
1.05rem;
}

/* =========================================================
QUIZ
========================================================= */

.quiz-section {

background:
#f6f9fb;
}

.quiz-question {

margin-bottom:
25px;

padding:
28px;

background:
white;

border:
1px solid var(--border);

border-radius:
18px;

box-shadow:
0 5px 20px rgba(11,45,77,0.04);
}

.question-number {

display:
inline-grid;

place-items:
center;

width:
38px;

height:
38px;

border-radius:
10px;

background:
var(--navy);

color:
white;

font-size:
0.75rem;

font-weight:
900;
}

.quiz-question h3 {

margin-top:
15px;

margin-bottom:
17px;

color:
var(--navy);

font-size:
1.05rem;
}

.quiz-question label {

display:
block;

margin-top:
9px;

padding:
12px 14px;

border:
1px solid var(--border);

border-radius:
10px;

color:
var(--text);

cursor:
pointer;

transition:
background 0.2s ease,
border-color 0.2s ease;
}

.quiz-question label:hover {

background:
#f3f8fb;

border-color:
#b9d5e3;
}

.quiz-question input {

margin-right:
9px;
}

.quiz-button {

display:
block;

margin:
35px auto 0;

padding:
14px 30px;

border:
none;

border-radius:
999px;

background:
var(--teal);

color:
white;

font-weight:
850;

cursor:
pointer;

transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}

.quiz-button:hover {

transform:
translateY(-2px);

box-shadow:
0 10px 25px rgba(8,127,140,0.25);
}

.quiz-result {

max-width:
700px;

margin:
30px auto 0;

padding:
20px;

border-radius:
14px;

text-align:
center;

font-size:
1rem;
}

.quiz-result.success {

background:
var(--green-light);

border:
1px solid #c7e8d4;

color:
#17633a;
}

.quiz-result.warning {

background:
var(--orange-light);

border:
1px solid #f0d4a8;

color:
#7a4a0a;
}

/* =========================================================
COMPLETION
========================================================= */

.completion-section {

padding:
80px 0;

background:
white;
}

.completion-card {

max-width:
760px;

margin:
0 auto;

padding:
50px 30px;

text-align:
center;

border:
1px solid var(--border);

border-radius:
24px;

box-shadow:
var(--shadow);
}

.completion-icon {

font-size:
3rem;
}

.completion-card h2 {

margin-top:
15px;

color:
var(--navy);

font-size:
clamp(1.8rem, 4vw, 2.7rem);
}

.completion-card p {

margin-top:
12px;

color:
var(--muted);
}

.completion-principle {

color:
var(--teal) !important;

font-size:
1.1rem;
}

.back-button {

display:
inline-flex;

margin-top:
25px;

padding:
11px 20px;

border-radius:
999px;

background:
var(--navy);

color:
white;

font-weight:
750;
}

/* =========================================================
FOOTER
========================================================= */

.site-footer {

padding-top:
55px;

background:
#071f35;

color:
white;
}

.footer-grid {

display:
grid;

grid-template-columns:
2fr 1fr 1fr;

gap:
40px;

padding-bottom:
45px;
}

.footer-brand {

font-size:
1.15rem;

font-weight:
850;
}

.footer-grid p {

margin-top:
10px;

max-width:
430px;

color:
rgba(255,255,255,0.62);

font-size:
0.86rem;
}

.footer-grid h3 {

font-size:
0.9rem;

margin-bottom:
12px;
}

.footer-grid a {

display:
block;

margin-top:
8px;

color:
rgba(255,255,255,0.62);

font-size:
0.84rem;
}

.footer-grid a:hover {

color:
white;
}

.footer-bottom {

padding:
20px;

border-top:
1px solid rgba(255,255,255,0.10);

display:
flex;

justify-content:
space-between;

gap:
20px;

font-size:
0.72rem;

color:
rgba(255,255,255,0.46);
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

.question-grid,
.connection-rings,
.action-grid,
.data-grid {

```
grid-template-columns:
  repeat(2, 1fr);
```

}

.concept-grid,
.type-grid,
.sdh-grid,
.organization-grid {

```
grid-template-columns:
  repeat(2, 1fr);
```

}

.sdg-grid {

```
grid-template-columns:
  repeat(2, 1fr);
```

}

.learning-flow {

```
grid-template-columns:
  repeat(2, 1fr);
```

}

.flow-line {

```
display:
  none;
```

}

}

@media (max-width: 820px) {

.header-inner {

```
min-height:
  68px;
```

}

.main-nav {

```
display:
  none;
```

}

.hero-diabetes {

```
min-height:
  520px;
```

}

.two-column {

```
grid-template-columns:
  1fr;

gap:
  35px;
```

}

.date-grid {

```
grid-template-columns:
  1fr;
```

}

.footer-grid {

```
grid-template-columns:
  1fr 1fr;
```

}

.footer-bottom {

```
flex-direction:
  column;
```

}

}

@media (max-width: 620px) {

.container {

```
width:
  min(100% - 28px, 1180px);
```

}

.content-section {

```
padding:
  65px 0;
```

}

.hero-content {

```
padding:
  65px 0;
```

}

.hero-content h1 {

```
font-size:
  2.7rem;
```

}

.question-grid,
.concept-grid,
.type-grid,
.sdh-grid,
.sdg-grid,
.organization-grid,
.reflection-grid,
.action-grid,
.connection-rings,
.data-grid {

```
grid-template-columns:
  1fr;
```

}

.learning-flow {

```
grid-template-columns:
  1fr;
```

}

.flow-line {

```
display:
  none;
```

}

.evidence-date-card {

```
flex-direction:
  column;
```

}

.core-principle {

```
flex-direction:
  column;
```

}

.footer-grid {

```
grid-template-columns:
  1fr;
```

}

.quiz-question {

```
padding:
  21px;
```

}

}

/* =========================================================
ACCESSIBILITY
========================================================= */

:focus-visible {

outline:
3px solid #f4b942;

outline-offset:
3px;
}

::selection {

background:
#bdebea;

color:
var(--navy);
}