/* ========== IMPORT FONT ========== */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap'); /* loads the Nunito font family in 4 weights from Google Fonts */

/* ========== ROOT COLOURS ========== */
:root {
    --gold: #FFD700;      /* gold colour variable, used for Gold ranger level and points badge */
    --green: #28a745;     /* green colour variable, used for success/completed states */
    --blue: #1a73e8;      /* blue colour variable, main brand/accent colour */
    --bronze: #CD7F32;    /* bronze colour variable, used for Bronze ranger level */
    --silver: #C0C0C0;    /* silver colour variable, used for Silver ranger level */
    --light-bg: #f0f4ff;  /* light background colour variable (currently unused since body has an image background) */
}

/* ========== BASE / BACKGROUND ========== */
body {
    font-family: 'Nunito', sans-serif;   /* apply the imported font, fallback to generic sans-serif */
    min-height: 100vh;                    /* body always at least fills the full viewport height */
    background: url("/static/images/child.9c3f1c322086.png") center/cover no-repeat fixed;  /* full-page background photo, centred, covering, non-repeating, fixed while scrolling */
    color: #333;                          /* default dark grey text colour */
    overflow-x: hidden;                   /* prevents horizontal scrollbars from any overflowing elements */
}

.gradient-overlay {
    min-height: 100vh;                    /* overlay always at least fills the full viewport height */
    display: flex;                        /* flex container so footer can be pushed down with flex-grow */
    flex-direction: column;               /* stacks navbar/main/footer vertically */
    background: linear-gradient(135deg, rgba(102,126,234,0.85), rgba(168,85,247,0.85), rgba(236,72,153,0.85)); /* diagonal blue-purple-pink gradient, 85% opaque, sits over the body's photo */
    background-size: 400% 400%;           /* oversized background so the gradient can animate/shift smoothly */
    animation: gradientShift 8s ease infinite; /* slowly shifts the gradient position on a loop */
}

main {
    flex: 1;              /* grows to fill available space, pushing the footer to the bottom */
    padding-bottom: 60px;  /* breathing room before the footer starts */
}

/* ========== ANIMATIONS ========== */
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }   /* gradient starts at the left */
    50%  { background-position: 100% 50%; } /* gradient shifts to the right at the midpoint */
    100% { background-position: 0% 50%; }   /* gradient returns to the left at the end */
}

@keyframes pulse {
    0%   { transform: scale(1); }      /* normal size at the start */
    50%  { transform: scale(1.05); }   /* slightly larger at the midpoint */
    100% { transform: scale(1); }      /* back to normal size at the end */
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }  /* starts invisible, shifted down */
    to   { opacity: 1; transform: translateY(0); }      /* ends fully visible, in place */
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }     /* resting position at start and end */
    50%       { transform: translateY(-8px); } /* lifted up at the midpoint */
}

@keyframes floatAround {
    0%   { transform: translateY(0px); }   /* starting vertical position */
    50%  { transform: translateY(-20px); } /* floats upward at the midpoint */
    100% { transform: translateY(0px); }   /* returns to starting position */
}

@keyframes gleam {
    0%   { left: -100%; opacity: 0; } /* starts off-screen to the left, invisible */
    20%  { opacity: 1; }              /* becomes visible shortly after starting */
    100% { left: 150%; opacity: 0; }  /* ends off-screen to the right, faded out */
}

@keyframes sparklePop {
    0%   { transform: scale(1);   opacity: 0.7; } /* starts at normal size, slightly faded */
    50%  { transform: scale(1.4); opacity: 1; }   /* grows and becomes fully visible at midpoint */
    100% { transform: scale(1);   opacity: 0.7; } /* shrinks back and fades slightly at the end */
}

@keyframes twinkle {
    0%   { opacity: 0; transform: scale(0.5); }  /* starts invisible and small */
    10%  { opacity: 1; transform: scale(1.2); }  /* quickly appears and grows */
    20%  { opacity: 0; transform: scale(0.5); }  /* fades out and shrinks again */
    100% { opacity: 0; }                          /* stays invisible for the rest of the loop */
}

/* ========== NAVBAR ========== */
.navbar {
    background: rgba(255, 255, 255, 0.1) !important; /* faint white tint, forced over Bootstrap's default navbar colour */
    backdrop-filter: blur(10px);                       /* frosted-glass blur effect behind the navbar */
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);            /* soft shadow beneath the navbar */
}

.navbar-brand {
    font-size: 1.5rem;      /* larger text for the site logo/name */
    letter-spacing: 1px;    /* slight spacing between letters for a polished look */
}

/* Nav link hover effect (gold underline) */
.nav-link-custom {
    position: relative;              /* needed so the ::after underline can be positioned against this element */
    transition: color 0.2s ease;     /* smooth colour change on hover */
}

.nav-link-custom::after {
    content: '';                      /* empty pseudo-element used purely for the underline shape */
    position: absolute;               /* positioned relative to the parent link */
    bottom: -2px;                     /* sits just below the text */
    left: 0;                          /* starts from the left edge */
    width: 0;                         /* starts with zero width (hidden) */
    height: 2px;                      /* thin underline thickness */
    background-color: #ffd700;        /* gold underline colour */
    transition: width 0.3s ease;      /* smoothly grows/shrinks in width */
}

.nav-link-custom:hover::after {
    width: 100%;   /* underline expands to full width on hover */
}

.nav-link-custom:hover {
    color: #ffd700 !important;  /* text turns gold on hover, forced over Bootstrap defaults */
}

.active-nav-link {
    color: #ffd700 !important;  /* gold text colour for the currently active page link */
    font-weight: 800;            /* extra-bold text to stand out */
}

.active-nav-link::after {
    width: 100% !important;         /* underline is always fully shown for the active link */
    background-color: #ffd700;      /* gold underline colour to match the active text */
}

/* ========== CARDS ========== */
.card {
    border: none;                                             /* removes Bootstrap's default card border */
    border-radius: 16px;                                      /* rounded corners */
    background: rgba(255,255,255,0.85);                       /* semi-transparent white background */
    backdrop-filter: blur(10px);                              /* frosted-glass blur behind the card */
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);                  /* soft shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;    /* smooth animation on hover changes */
    animation: fadeInUp 0.5s ease forwards;                   /* card fades/slides in when the page loads */
}

.card:hover {
    transform: translateY(-6px);                /* lifts the card slightly on hover */
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);   /* deepens the shadow on hover for a "floating" effect */
}

.card a {
    color: #5a189a;      /* purple link colour inside cards */
    font-weight: 600;    /* semi-bold link text */
}

.card h2, .card p, .card small {
    color: #333 !important;         /* forces dark text colour inside cards, overriding the page's white text defaults */
    text-shadow: none !important;   /* removes any inherited text shadow so text stays crisp on the light card background */
}

/* ========== BUTTONS ========== */
.btn-primary {
    background: linear-gradient(135deg, #1a73e8, #6c63ff);  /* blue-to-purple gradient background */
    border: none;                                             /* removes default border */
    border-radius: 50px;                                      /* fully rounded, pill-shaped button */
    padding: 10px 24px;                                       /* comfortable click area */
    font-weight: 700;                                         /* bold text */
    transition: transform 0.2s ease, box-shadow 0.2s ease;    /* smooth animation on hover changes */
}

.btn-primary:hover {
    transform: scale(1.05);                            /* slightly enlarges the button on hover */
    box-shadow: 0 6px 20px rgba(26,115,232,0.4);       /* glowing blue shadow on hover */
}

.btn-success {
    background: linear-gradient(135deg, #28a745, #20c997);  /* green-to-teal gradient background */
    border: none;                                             /* removes default border */
    border-radius: 50px;                                      /* fully rounded, pill-shaped button */
    font-weight: 700;                                         /* bold text */
}

.btn-outline-primary {
    background: white;               /* white background for the outlined button style */
    color: #7c3aed;                  /* purple text colour */
    border: 2px solid #7c3aed;       /* purple border matching the text */
    border-radius: 50px;             /* fully rounded, pill-shaped button */
    font-weight: 700;                /* bold text */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* smooth animation on hover changes */
}

.btn-outline-primary:hover {
    background: #7c3aed;                          /* fills solid purple on hover */
    color: white;                                  /* text turns white for contrast */
    transform: scale(1.05);                        /* slightly enlarges the button on hover */
    box-shadow: 0 6px 20px rgba(124,58,237,0.4);   /* glowing purple shadow on hover */
}

/* ========== HERO BUTTONS ========== */
.btn-hero-primary {
    background: white;         /* white background for the primary call-to-action button in the hero */
    color: #7c3aed;             /* purple text colour */
    border-radius: 50px;        /* fully rounded, pill-shaped button */
    padding: 14px 32px;         /* larger padding for a prominent hero button */
    font-weight: 800;           /* extra-bold text */
    font-size: 1.1rem;          /* slightly larger text size */
    border: none;               /* removes default border */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* smooth animation on hover changes */
}

.btn-hero-primary:hover {
    transform: scale(1.05);                          /* slightly enlarges the button on hover */
    box-shadow: 0 8px 24px rgba(255,255,255,0.4);   /* glowing white shadow on hover */
    color: #7c3aed;                                  /* keeps purple text colour on hover */
}

.btn-hero-secondary {
    background: rgba(255,255,255,0.2);       /* faint semi-transparent white background */
    color: white;                              /* white text colour */
    border-radius: 50px;                       /* fully rounded, pill-shaped button */
    padding: 14px 32px;                        /* larger padding for a prominent hero button */
    font-weight: 700;                          /* bold text */
    font-size: 1.1rem;                         /* slightly larger text size */
    border: 2px solid rgba(255,255,255,0.5);  /* semi-transparent white border outline */
    transition: transform 0.2s ease;           /* smooth scaling animation on hover */
}

.btn-hero-secondary:hover {
    transform: scale(1.05);                    /* slightly enlarges the button on hover */
    background: rgba(255,255,255,0.3);        /* background becomes slightly more opaque on hover */
    color: white;                              /* keeps white text colour on hover */
}

/* ========== POINTS BADGE ========== */
.points-badge {
    background: linear-gradient(135deg, var(--gold), #ffaa00); /* gold-to-orange gradient background */
    color: #1a1a1a;                                              /* near-black text for contrast against gold */
    border-radius: 50px;                                         /* fully rounded, pill-shaped badge */
    padding: 6px 16px;                                            /* comfortable padding around the text */
    font-weight: 800;                                             /* extra-bold text */
    font-size: 1rem;                                              /* standard readable size */
    display: inline-block;                                        /* sits inline but respects padding/margins */
    white-space: nowrap;                                          /* keeps the badge text on a single line */
    animation: bounce 1.5s infinite;                              /* continuous gentle bounce to draw attention */
    box-shadow: 0 4px 12px rgba(255,215,0,0.4);                  /* golden glow shadow */
}

/* ========== RANGER LEVEL BADGES ========== */
.badge-bronze {
    background: linear-gradient(135deg, #CD7F32, #a0522d);  /* bronze-to-darker-brown gradient */
    color: white;                                             /* white text for contrast */
    border-radius: 50px;                                      /* fully rounded, pill-shaped badge */
    padding: 6px 16px;                                        /* comfortable padding around the text */
    font-weight: 700;                                         /* bold text */
}

.badge-silver {
    background: linear-gradient(135deg, #C0C0C0, #808080);  /* silver-to-grey gradient */
    color: white;                                             /* white text for contrast */
    border-radius: 50px;                                      /* fully rounded, pill-shaped badge */
    padding: 6px 16px;                                        /* comfortable padding around the text */
    font-weight: 700;                                         /* bold text */
}

.badge-gold {
    background: linear-gradient(135deg, #FFD700, #ffaa00);  /* gold-to-orange gradient */
    color: white;                                             /* white text for contrast */
    border-radius: 50px;                                      /* fully rounded, pill-shaped badge */
    padding: 6px 16px;                                        /* comfortable padding around the text */
    font-weight: 700;                                         /* bold text */
    animation: pulse 2s infinite;                             /* pulsing animation to celebrate top status */
}

/* ========== PROGRESS BAR ========== */
.progress {
    border-radius: 50px;             /* fully rounded ends */
    height: 14px;                    /* thin bar height */
    background-color: #e9ecef;       /* light grey track background */
}

.progress-bar {
    background: linear-gradient(135deg, var(--gold), #ffaa00); /* gold-to-orange gradient fill */
    border-radius: 50px;                                        /* fully rounded ends, matching the track */
}

/* ========== TASK COMPLETE ========== */
.task-complete {
    background-color: #d4edda;           /* light green background */
    border-left: 5px solid var(--green); /* solid green accent stripe on the left */
    border-radius: 12px;                  /* rounded corners */
    padding: 12px 16px;                   /* comfortable padding around the text */
    font-weight: 600;                     /* semi-bold text */
    color: #155724;                       /* dark green text for readability on light green background */
}

/* ========== PAGE TITLES ========== */
h1, h2 {
    font-weight: 800;                              /* extra-bold text for emphasis */
    color: #ffffff;                                 /* white text colour, since headings sit on the purple background */
    text-shadow: 2px 2px 8px rgba(0,0,0,0.2);      /* subtle shadow for readability against the background */
}

p, small {
    color: rgba(255,255,255,0.9);   /* near-white text colour for body copy on the purple background */
}

/* ========== HERO SECTION ========== */
.hero-section {
    position: relative;         /* allows floating icons/children to be positioned relative to this section */
    padding: 60px 20px;         /* spacing around the hero content */
    min-height: 85vh;           /* hero takes up most of the viewport height */
    display: flex;              /* flex container for centring content */
    flex-direction: column;     /* stacks hero content vertically */
    align-items: center;        /* centres content horizontally */
    justify-content: center;    /* centres content vertically */
}

.hero-title {
    font-size: 3.5rem;                              /* large heading size for the hero title */
    font-weight: 900;                                /* boldest available weight */
    color: white !important;                         /* forces white text, overriding the h1/h2 rule above if needed */
    text-shadow: 2px 4px 12px rgba(0,0,0,0.3);      /* stronger shadow for the prominent hero title */
}

.text-gold {
    color: var(--gold) !important;   /* forces the gold colour variable onto specific text (e.g. "Rangers") */
}

.hero-subtitle {
    font-size: 1.5rem;      /* medium-large subtitle size */
    color: white;            /* white text colour */
    font-weight: 700;        /* bold text */
    margin-bottom: 10px;     /* spacing below the subtitle */
}

.hero-desc {
    font-size: 1rem;                    /* standard readable text size */
    color: rgba(255,255,255,0.85);     /* slightly softened white for the description text */
    max-width: 500px;                   /* keeps the paragraph from stretching too wide */
    margin: 0 auto;                     /* centres the paragraph horizontally */
}

/* ========== FLOATING ICONS ========== */
.floating-icon {
    position: fixed;                              /* stays fixed on screen, not affected by scrolling */
    font-size: 2.5rem;                             /* large emoji/icon size */
    opacity: 0.3;                                   /* faded so it doesn't distract from main content */
    animation: floatAround 4s ease-in-out infinite; /* continuous gentle floating motion */
    pointer-events: none;                           /* icons can't be clicked/interacted with */
    z-index: 0;                                     /* sits behind other content */
}

.icon-star-left  { top: 25%; left: 5%;  animation-delay: 0s; }   /* positions this icon and staggers its animation start */
.icon-star-right { top: 20%; right: 8%; animation-delay: 1s; }   /* positions this icon and staggers its animation start */
.icon-trophy     { top: 55%; left: 8%;  animation-delay: 0.5s; } /* positions this icon and staggers its animation start */
.icon-gift       { top: 40%; right: 5%; animation-delay: 1.5s; } /* positions this icon and staggers its animation start */
.icon-star2      { top: 70%; right: 12%; animation-delay: 2s; }  /* positions this icon and staggers its animation start */

/* ========== STATS ========== */
.hero-stats {
    display: flex;              /* lays out stat items in a row */
    gap: 60px;                   /* spacing between each stat item */
    justify-content: center;     /* centres the stats horizontally */
}

.stat-number {
    font-size: 2rem;      /* large number/icon size */
    font-weight: 900;      /* boldest available weight */
    color: white;           /* white text colour */
}

.stat-number i {
    color: white;   /* ensures Font Awesome icons inside stat numbers are also white */
}

.stat-label {
    font-size: 0.9rem;               /* smaller label text under each stat */
    color: rgba(255,255,255,0.8);   /* softened white for the label */
}

/* ========== STAR WRAPPER + SPARKLES ========== */
.star-wrapper {
    position: relative;       /* allows sparkle children to be positioned relative to this wrapper */
    display: inline-block;    /* wraps tightly around the star so sparkles position correctly */
    margin-bottom: 20px;      /* spacing below the star */
}

.sparkle {
    position: absolute;                            /* positioned relative to .star-wrapper */
    color: #FFD700;                                 /* gold sparkle colour */
    font-weight: 900;                                /* boldest available weight */
    animation: sparklePop 2s ease-in-out infinite;  /* continuous pop in/out animation */
}

.s1 { top: 0%;  left: 10%;  font-size: 1.2rem; animation-delay: 0s; }   /* positions and sizes this sparkle, staggers timing */
.s2 { top: 0%;  right: 10%; font-size: 1rem;   animation-delay: 0.5s; } /* positions and sizes this sparkle, staggers timing */
.s3 { top: 20%; right: 0%;  font-size: 0.8rem; animation-delay: 1s; }   /* positions and sizes this sparkle, staggers timing */
.s4 { top: 20%; left: 0%;   font-size: 0.8rem; animation-delay: 1.5s; } /* positions and sizes this sparkle, staggers timing */

/* ========== HERO STAR ========== */
.hero-star {
    position: relative;                                          /* allows the ::before pseudo-element to be positioned against it */
    display: inline-block;                                       /* wraps tightly around the star emoji */
    font-size: 8rem;                                              /* very large star size, the hero's focal point */
    animation: bounce 2s ease-in-out infinite;                   /* continuous gentle bounce */
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));       /* golden glow around the star */
    margin-bottom: 20px;                                          /* spacing below the star */
}

.hero-star::before {
    content: '✦';                                    /* small decorative sparkle character overlaid on the star */
    position: absolute;                                /* positioned relative to .hero-star */
    top: 30%;                                           /* vertical placement over the star */
    left: 35%;                                          /* horizontal placement over the star */
    font-size: 3rem;                                    /* size of the overlaid sparkle */
    color: white;                                        /* white sparkle colour */
    opacity: 0;                                          /* starts invisible, shown via the twinkle animation */
    animation: twinkle 3s ease-in-out infinite;         /* continuous twinkle in/out effect */
    pointer-events: none;                                /* purely decorative, not clickable */
}

/* ========== DASHBOARD ========== */
.child-avatar {
    font-size: 4rem;                             /* large emoji size for a child's avatar */
    animation: bounce 2s ease-in-out infinite;   /* continuous gentle bounce */
}

.empty-state {
    background: rgba(255,255,255,0.15);   /* faint semi-transparent white background */
    border-radius: 24px;                    /* strongly rounded corners */
    padding: 60px 40px;                     /* generous padding for an empty/placeholder state */
    backdrop-filter: blur(10px);            /* frosted-glass blur effect */
}

/* ========== BACK LINKS ========== */
/* Purple version — for links sitting inside a light .card */
.back-link {
    color: #7c3aed !important;      /* purple link colour, suited for light card backgrounds */
    text-decoration: underline;      /* underlines the link text */
    font-weight: 600;                /* semi-bold text */
}

.back-link:hover {
    color: #5a189a !important;   /* darker purple on hover */
}

/* White version — for links sitting directly on the purple page background */
.back-link-white {
    color: white !important;        /* white link colour, suited for the purple page background */
    text-decoration: underline;      /* underlines the link text */
    font-weight: 600;                /* semi-bold text */
}

.back-link-white:hover {
    opacity: 0.8;   /* slightly fades the link on hover as a hover cue */
}

/* ========== AI SUGGESTION CARDS ========== */
.ai-card {
    border-radius: 12px;         /* rounded corners */
    transition: 0.2s ease;        /* smooth transition for hover effects */
    height: 100%;                 /* stretches to match the height of sibling cards in a row */
    display: flex;                /* flex container so content can grow/align */
    flex-direction: column;       /* stacks card content vertically */
}

.ai-card:hover {
    transform: translateY(-3px);   /* lifts the card slightly on hover */
}

.ai-card p {
    flex-grow: 1;   /* paragraph expands to fill remaining space, pushing footer content down evenly across cards */
}

.ai-card-title {
    font-size: 1.2rem;    /* slightly larger title text */
    font-weight: 600;      /* semi-bold text */
}

/* ========== REWARD CARDS ========== */
.reward-card {
    height: 100%;             /* stretches to match the height of sibling cards in a row */
    display: flex;            /* flex container so content can grow/align */
    flex-direction: column;   /* stacks card content vertically */
}

.reward-card p {
    flex-grow: 1;   /* paragraph expands to fill remaining space, keeping card footers aligned */
}

/* ========== CHILD DASHBOARD CARDS ========== */
.child-card {
    height: 100%;             /* stretches to match the height of sibling cards in a row */
    display: flex;            /* flex container so content can grow/align */
    flex-direction: column;   /* stacks card content vertically */
}

/* ========== SECTION TITLES ========== */
.why-section, .steps-section, .parents-section {
    padding: 80px 20px;    /* generous vertical/horizontal spacing for each homepage section */
    max-width: 1100px;      /* caps the section width so content doesn't stretch too wide on large screens */
    margin: 0 auto;         /* centres the section horizontally on the page */
}

.section-title {
    font-size: 2.2rem;    /* large section heading size */
    font-weight: 900;      /* boldest available weight */
    color: white;           /* white text colour */
}

.section-subtitle {
    color: rgba(255,255,255,0.85);   /* softened white for subtitle text */
    max-width: 600px;                  /* keeps subtitle from stretching too wide */
    margin: 10px auto 0;               /* spacing above, centred horizontally */
}

.section-title-dark {
    font-size: 2.2rem;                              /* large section heading size */
    font-weight: 900;                                /* boldest available weight */
    color: white;                                     /* white text colour */
    text-shadow: 2px 2px 8px rgba(0,0,0,0.2);       /* subtle shadow for extra readability on busier backgrounds */
}

.section-subtitle-dark {
    color: rgba(255,255,255,0.85);   /* softened white for subtitle text on darker/busier sections */
}

/* ========== FEATURE CARDS ========== */
.feature-card {
    border-radius: 20px;                          /* strongly rounded corners */
    padding: 32px 24px;                            /* generous internal spacing */
    color: white;                                   /* white text colour by default inside the card */
    text-align: left;                               /* left-aligns text (overriding the section's text-center) */
    height: 100%;                                   /* stretches to match sibling cards in the same row */
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);      /* soft shadow for depth */
    transition: transform 0.3s ease;               /* smooth lift animation on hover */
}

.feature-card:hover {
    transform: translateY(-6px);   /* lifts the card slightly on hover */
}

.feature-card h3 {
    color: white;             /* white heading text inside the card */
    font-size: 1.2rem;         /* medium heading size */
    font-weight: 800;          /* extra-bold text */
    margin: 16px 0 10px;       /* spacing above and below the heading */
    text-shadow: none;         /* removes any inherited shadow so the heading stays crisp on the coloured card background */
}

.feature-card p {
    color: rgba(255,255,255,0.9);   /* near-white paragraph text inside the card */
    font-size: 0.9rem;                /* slightly smaller body text size */
}

.feature-icon {
    font-size: 1.8rem;   /* large icon size at the top of each feature card */
}

.feature-card-blue   { background: linear-gradient(135deg, #4facfe, #1a73e8); } /* light-blue-to-blue gradient for this card variant */
.feature-card-orange { background: linear-gradient(135deg, #ffb347, #ff7a18); } /* light-orange-to-orange gradient for this card variant */
.feature-card-pink   { background: linear-gradient(135deg, #f857a6, #d6336c); } /* pink-to-deep-pink gradient for this card variant */
.feature-card-purple { background: linear-gradient(135deg, #a855f7, #7c3aed); } /* light-purple-to-purple gradient for this card variant */

/* ========== STEPS SECTION ========== */
.steps-row {
    gap: 20px;   /* spacing between each step item in the row */
}

.step-item {
    max-width: 220px;   /* caps each step's width so text doesn't stretch too wide */
}

.step-circle {
    width: 70px;                                /* fixed circle width */
    height: 70px;                                /* fixed circle height, matching width for a perfect circle */
    border-radius: 50%;                          /* makes the shape fully circular */
    display: flex;                                /* flex container to centre the number inside */
    align-items: center;                          /* vertically centres the number */
    justify-content: center;                      /* horizontally centres the number */
    font-size: 1.6rem;                            /* size of the number text inside the circle */
    font-weight: 900;                              /* boldest available weight for the number */
    color: white;                                   /* white number text */
    margin: 0 auto 16px;                           /* centres the circle horizontally, spacing below it */
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);      /* soft shadow beneath the circle for depth */
}

.step-blue   { background: linear-gradient(135deg, #4facfe, #1a73e8); } /* blue gradient fill for step 1's circle */
.step-green  { background: linear-gradient(135deg, #28a745, #20c997); } /* green gradient fill for step 2's circle */
.step-orange { background: linear-gradient(135deg, #ffb347, #ff7a18); } /* orange gradient fill for step 3's circle */

.step-item h3 {
    color: white;                 /* white heading text for each step title */
    font-weight: 800;              /* extra-bold text */
    font-size: 1.3rem;             /* consistent heading size for all step titles */
    min-height: 3em;               /* reserves enough vertical space for a two-line title, so short and long titles take equal height */
    display: flex;                 /* flex container so the text can be centred within the reserved space */
    align-items: center;           /* vertically centres the title text within its reserved height */
    justify-content: center;       /* horizontally centres the title text */
    text-align: center;            /* ensures wrapped lines stay centre-aligned */
    margin: 0 0 10px;              /* spacing below the title, no top margin */
}

.step-item p {
    color: rgba(255,255,255,0.85);   /* softened white text for the step description */
    font-size: 0.9rem;                 /* smaller body text size */
}

.step-arrow {
    color: rgba(255,255,255,0.6);   /* faded white colour for the arrow between steps */
    font-size: 1.3rem;                /* arrow icon size */
    display: none;                    /* hidden by default (e.g. on mobile where steps stack vertically) */
}

@media (min-width: 768px) {
    .step-arrow { display: block; }   /* arrows only shown on tablet/desktop widths, where steps sit in a row */
}

/* ========== PARENTS SECTION ========== */
.parent-feature-list {
    list-style: none;    /* removes default bullet points */
    padding: 0;           /* removes default list padding */
    margin-top: 24px;     /* spacing above the list */
}

.parent-feature-list li {
    display: flex;               /* lays out the icon and text side by side */
    align-items: flex-start;     /* aligns icon and text to the top, useful when text wraps to multiple lines */
    gap: 14px;                    /* spacing between the icon and the text block */
    margin-bottom: 22px;          /* spacing between each list item */
}

.parent-feature-list i {
    color: #28a745;      /* green colour for the checkmark icons */
    font-size: 1.3rem;    /* icon size */
    margin-top: 4px;      /* slight offset so the icon aligns nicely with the first line of text */
}

.parent-feature-list strong {
    color: white;          /* white colour for each feature's bold title */
    font-size: 1.05rem;     /* slightly larger than body text */
}

.parent-feature-list p {
    color: rgba(255,255,255,0.85);   /* softened white for the feature description */
    margin: 4px 0 0;                   /* small spacing above the description, matching the title above it */
    font-size: 0.9rem;                 /* smaller body text size */
}

/* ========== DASHBOARD PREVIEW CARD ========== */
.dashboard-preview-card {
    background: rgba(255,255,255,0.15);   /* faint semi-transparent white background */
    backdrop-filter: blur(10px);            /* frosted-glass blur effect */
    border-radius: 20px;                    /* strongly rounded corners */
    padding: 28px;                           /* internal spacing around the preview content */
    box-shadow: 0 8px 24px rgba(0,0,0,0.15); /* soft shadow for depth */
}

.dashboard-preview-header {
    display: flex;            /* lays out the icon and text side by side */
    align-items: center;      /* vertically centres icon and text */
    gap: 14px;                 /* spacing between icon and text */
    margin-bottom: 20px;       /* spacing below the header, before the list of names/points */
}

.dashboard-preview-icon {
    background: white;             /* white background for the small icon box */
    color: #7c3aed;                 /* purple icon colour */
    width: 44px;                    /* fixed box width */
    height: 44px;                   /* fixed box height, matching width for a square */
    border-radius: 12px;            /* rounded corners on the icon box */
    display: flex;                  /* flex container to centre the icon inside */
    align-items: center;            /* vertically centres the icon */
    justify-content: center;        /* horizontally centres the icon */
    font-size: 1.2rem;               /* icon size */
}

.dashboard-preview-header strong {
    color: white;      /* white text for the "Family Dashboard" title */
    display: block;     /* forces the title onto its own line above the subtitle */
}

.dashboard-preview-header p {
    color: rgba(255,255,255,0.8);   /* softened white for the header's subtitle text */
    font-size: 0.85rem;                /* smaller subtitle text size */
    margin: 0;                         /* removes default paragraph margin */
}

.dashboard-preview-row {
    display: flex;                          /* lays out the name and points side by side */
    justify-content: space-between;         /* pushes name to the left and points to the right */
    align-items: center;                    /* vertically centres both */
    background: rgba(255,255,255,0.9);     /* near-solid white background for each row */
    border-radius: 12px;                    /* rounded corners on each row */
    padding: 14px 18px;                     /* internal spacing within each row */
    margin-bottom: 12px;                    /* spacing between rows */
    font-weight: 700;                       /* bold text */
    color: #333;                             /* dark text colour, readable on the white row background */
}

.preview-points {
    color: #28a745;   /* green colour for the points value in each preview row */
}

/* ========== CTA BANNER ========== */
.cta-banner {
    background: linear-gradient(135deg, #7c3aed, #ec4899, #f97316); /* purple-to-pink-to-orange gradient background */
    border-radius: 24px;                                              /* strongly rounded corners */
    padding: 60px 20px;                                               /* generous internal spacing */
    margin: 40px auto 60px;                                           /* spacing above/below, centred horizontally */
    max-width: 1100px;                                                /* caps the banner width on large screens */
}

.cta-banner h2 {
    color: white;          /* white heading text */
    font-size: 2.2rem;      /* large heading size */
    font-weight: 900;        /* boldest available weight */
}

.cta-banner p {
    color: rgba(255,255,255,0.9);   /* near-white paragraph text */
    margin-bottom: 24px;              /* spacing below the paragraph, before the button */
}

.btn-cta {
    background: white;         /* white background for the main call-to-action button */
    color: #7c3aed;             /* purple text colour */
    border-radius: 50px;        /* fully rounded, pill-shaped button */
    padding: 14px 36px;         /* generous click area */
    font-weight: 800;           /* extra-bold text */
    font-size: 1.05rem;         /* slightly larger text size */
    display: inline-block;      /* respects padding/margins while sitting inline */
    transition: transform 0.2s ease;   /* smooth scaling animation on hover */
}

.btn-cta:hover {
    transform: scale(1.05);   /* slightly enlarges the button on hover */
    color: #7c3aed;             /* keeps purple text colour on hover */
}

.cta-note {
    color: rgba(255,255,255,0.8);   /* softened white for the small note text under the button */
    font-size: 0.85rem;                /* smaller text size */
    margin-top: 12px;                  /* spacing above the note */
}

/* ========== FOOTER ========== */
.site-footer {
    background: #0f172a;               /* dark navy background for the footer */
    color: rgba(255,255,255,0.7);     /* softened white default text colour */
    padding: 50px 20px 30px;           /* generous spacing around the footer content */
}

.footer-brand {
    color: white;          /* white colour for the footer's brand/logo text */
    font-size: 1.4rem;      /* larger text size for the brand name */
    font-weight: 800;        /* extra-bold text */
}

.footer-heading {
    color: white;             /* white colour for each footer column's heading */
    font-weight: 700;          /* bold text */
    margin-bottom: 14px;       /* spacing below the heading, before the links */
}

.footer-links a {
    display: block;                       /* stacks each link onto its own line */
    color: rgba(255,255,255,0.7);        /* softened white link colour */
    text-decoration: none;                /* removes the default underline */
    margin-bottom: 10px;                   /* spacing between each link */
    transition: color 0.2s ease;          /* smooth colour change on hover */
}

.footer-links a:hover {
    color: #ffd700;   /* gold colour on hover */
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);   /* faint divider line above the copyright text */
    margin-top: 30px;                                 /* spacing above the divider */
    padding-top: 20px;                                 /* spacing below the divider, before the text */
    font-size: 0.85rem;                                /* smaller text size for the copyright line */
    color: rgba(255,255,255,0.5);                     /* faded white colour for the copyright text */
}
.page-wrapper {
    display: flex;              /* flex container, likely intended to wrap the whole page for sticky-footer layouts */
    flex-direction: column;     /* stacks content vertically */
    min-height: 100vh;          /* ensures the wrapper always fills at least the full viewport height */
}


/* ========== READ MORE / DESCRIPTION TRUNCATION ========== */
.task-desc {
    display: -webkit-box;           /* enables the multi-line text truncation technique */
    -webkit-line-clamp: 2;          /* limits the visible text to 2 lines */
    -webkit-box-orient: vertical;   /* required orientation setting for line-clamp to work */
    overflow: hidden;                /* hides any text beyond the 2-line limit */
}

.task-desc.expanded {
    display: block;              /* switches back to normal block display when expanded */
    -webkit-line-clamp: unset;   /* removes the line limit so full text can show */
    overflow: visible;            /* allows the full text to be visible, not clipped */
}

.see-more-link {
    display: inline-block;   /* sits inline but respects padding/margins */
    margin-top: 4px;           /* small spacing above the link */
    cursor: pointer;           /* shows a clickable pointer cursor on hover */
    color: #7c3aed;             /* purple link colour */
    font-weight: 600;           /* semi-bold text */
    font-size: 0.85rem;         /* smaller text size for the "see more" link */
}

.see-more-link:hover {
    text-decoration: underline;   /* underlines the link text on hover for a clear interactive cue */
}

.child-card {
    position: relative;   /* allows the gold-corner-badge to be positioned relative to this card */
}

.gold-corner-badge {
    position: absolute;                                       /* positioned relative to the parent .child-card */
    top: 10px;                                                  /* small offset from the top edge */
    right: 10px;                                                /* small offset from the right edge */
    background: linear-gradient(135deg, #FFD700, #ffaa00);   /* gold-to-orange gradient background */
    border-radius: 50px;                                        /* fully rounded, pill-shaped badge */
    padding: 4px 10px;                                          /* small comfortable padding */
    font-weight: 800;                                            /* extra-bold text */
    font-size: 0.85rem;                                          /* smaller text size for the corner badge */
    box-shadow: 0 3px 8px rgba(255,215,0,0.5);                 /* golden glow shadow */
}
/* ========== RESPONSIVE MEDIA QUERIES ========== */

/* ----- Tablets / Medium screens (max 768px) ----- */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;   /* smaller hero title on tablets */
    }

    .hero-subtitle {
        font-size: 1.2rem;   /* smaller subtitle on tablets */
    }

    .hero-star {
        font-size: 6rem;   /* smaller hero star on tablets */
    }

    .hero-star::before {
        font-size: 2.2rem;   /* smaller overlaid sparkle to match the smaller star */
    }

    .hero-stats {
        gap: 30px;          /* reduced spacing between stats on tablets */
        flex-wrap: wrap;     /* allows stats to wrap onto a new line if needed */
    }

    .stat-number {
        font-size: 1.5rem;   /* smaller stat numbers on tablets */
    }

    .why-section,
    .steps-section,
    .parents-section {
        padding: 50px 16px;   /* reduced section padding on tablets */
    }

    .section-title,
    .section-title-dark {
        font-size: 1.7rem;   /* smaller section headings on tablets */
    }

    .cta-banner {
        padding: 40px 16px;   /* reduced banner padding on tablets */
    }

    .cta-banner h2 {
        font-size: 1.6rem;   /* smaller CTA heading on tablets */
    }

    .feature-card {
        padding: 24px 18px;   /* reduced card padding on tablets */
    }

    /* floating decorative icons get in the way on smaller screens */
    .floating-icon {
        font-size: 1.8rem;   /* smaller floating icons on tablets */
        opacity: 0.2;          /* fainter so they're less distracting on smaller screens */
    }
}

/* ----- Small phones (max 576px) ----- */
@media (max-width: 576px) {
    .hero-section {
        padding: 40px 16px;   /* reduced hero padding on small phones */
        min-height: auto;      /* lets the hero shrink to fit its content instead of forcing 85vh */
    }

    .hero-title {
        font-size: 2rem;   /* smaller hero title on small phones */
    }

    .hero-desc {
        font-size: 0.9rem;   /* smaller description text on small phones */
    }

    .hero-star {
        font-size: 4.5rem;   /* smaller hero star on small phones */
    }

    .hero-star::before {
        font-size: 1.6rem;   /* smaller overlaid sparkle to match the smaller star */
        top: 28%;              /* repositioned to stay centred on the smaller star */
        left: 32%;              /* repositioned to stay centred on the smaller star */
    }

    .hero-stats {
        gap: 20px;   /* further reduced spacing between stats on small phones */
    }

    .stat-number {
        font-size: 1.2rem;   /* smaller stat numbers on small phones */
    }

    .stat-label {
        font-size: 0.75rem;   /* smaller stat labels on small phones */
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        padding: 10px 20px;    /* reduced button padding on small phones */
        font-size: 0.95rem;     /* smaller button text on small phones */
        width: 100%;             /* buttons stretch full width for easier tapping */
    }

    /* hide the floating icons entirely on very small screens */
    .floating-icon {
        display: none;   /* completely hidden to avoid clutter on very small screens */
    }

    .section-title,
    .section-title-dark {
        font-size: 1.4rem;   /* smaller section headings on small phones */
    }

    .section-subtitle,
    .section-subtitle-dark {
        font-size: 0.85rem;   /* smaller subtitle text on small phones */
    }

    .dashboard-preview-card {
        padding: 18px;   /* reduced preview card padding on small phones */
    }

    .dashboard-preview-row {
        flex-direction: column;    /* stacks name and points vertically instead of side by side */
        align-items: flex-start;   /* left-aligns the stacked content */
        gap: 6px;                    /* small spacing between name and points when stacked */
    }

    .cta-banner h2 {
        font-size: 1.3rem;   /* smaller CTA heading on small phones */
    }

    .cta-banner p {
        font-size: 0.85rem;   /* smaller CTA paragraph text on small phones */
    }

    .btn-cta {
        width: 100%;              /* button stretches full width for easier tapping */
        text-align: center;        /* centres the button text */
        padding: 12px 24px;        /* adjusted padding for the full-width button */
    }

    .child-avatar {
        font-size: 3rem;   /* smaller avatar emoji on small phones */
    }

    .empty-state {
        padding: 40px 20px;   /* reduced empty-state padding on small phones */
    }
}
.task-overdue {
    background-color: #f8d7da;         /* light red/pink background for overdue tasks */
    border-left: 5px solid #dc3545;    /* solid red accent stripe on the left */
}