/* =========================================================
   Think Play Speak Child Theme
   Global Design System Foundation
   IG-004
   ========================================================= */

/* Design system implementation begins here. */

:root {
    /* Brand Colors */
    --tps-green: #8AB064;
    --tps-blue: #AFD4E3;
    --tps-yellow: #E8D05A;

    /* Neutral Colors */
    --tps-white: #ffffff;
    --tps-off-white: #f8f8f5;
    --tps-text: #222222;
    --tps-muted-text: #5f5f5f;
    --tps-border: #dddddd;

    /* Spacing Scale */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;

    /* Layout Widths */
    --content-width: 1120px;
    --narrow-content-width: 760px;
}

/* =========================================================
   Typography Foundation
   ========================================================= */

body {
    color: var(--tps-text);
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--tps-text);
    line-height: 1.2;
    margin-top: 0;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

a {
    color: inherit;
}

a:hover,
a:focus {
    text-decoration: underline;
}

/* =========================================================
   Layout Utilities
   ========================================================= */

.tps-container {
    width: min(100% - 2rem, var(--content-width));
    margin-left: auto;
    margin-right: auto;
}

.tps-container-narrow {
    width: min(100% - 2rem, var(--narrow-content-width));
    margin-left: auto;
    margin-right: auto;
}

.tps-section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.tps-section-compact {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

/* =========================================================
   Button Foundation
   ========================================================= */

.tps-button {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    border: 2px solid transparent;
    background-color: var(--tps-green);
    color: var(--tps-text);
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
}

.tps-button:hover,
.tps-button:focus {
    text-decoration: none;
    filter: brightness(0.96);
}

.tps-button-secondary {
    background-color: var(--tps-blue);
}

.tps-button-outline {
    background-color: transparent;
    border-color: var(--tps-green);
}

/* =========================================================
   Responsive Foundation
   ========================================================= */

@media (max-width: 700px) {
    :root {
        --space-lg: 2rem;
        --space-xl: 3rem;
    }

    .tps-section {
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }
}

/* =========================================================
   Homepage Construction
   IG-005
   ========================================================= */

.tps-homepage {
    background-color: var(--tps-white);
}

.tps-home-hero {
    background-color: var(--tps-off-white);
}

.tps-eyebrow {
    margin-bottom: var(--space-xs);
    color: var(--tps-muted-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tps-lede {
    max-width: var(--narrow-content-width);
    font-size: 1.2rem;
}

.tps-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.tps-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}

.tps-card {
    padding: var(--space-md);
    border: 1px solid var(--tps-border);
    border-radius: 1rem;
    background-color: var(--tps-white);
}

.tps-home-cta {
    background-color: var(--tps-blue);
}

@media (max-width: 800px) {
    .tps-card-grid {
        grid-template-columns: 1fr;
    }

    .tps-button-row {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* =========================================================
   Ways I Can Help Construction
   IG-006
   ========================================================= */

.tps-ways-help {
    background-color: var(--tps-white);
}

.tps-ways-intro {
    background-color: var(--tps-off-white);
}

.tps-section-heading {
    max-width: var(--narrow-content-width);
    margin-bottom: var(--space-md);
}

.tps-journey-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}

.tps-journey-card {
    border-top: 0.35rem solid var(--tps-green);
}

.tps-step-label {
    margin-bottom: var(--space-xs);
    color: var(--tps-muted-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tps-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.tps-service-card {
    display: flex;
    flex-direction: column;
}

.tps-support-label {
    margin-top: auto;
    padding-top: var(--space-sm);
    color: var(--tps-muted-text);
    font-weight: 700;
}

.tps-ways-why {
    background-color: var(--tps-off-white);
}

.tps-process-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.tps-process-item {
    padding: var(--space-md);
    border-left: 0.35rem solid var(--tps-green);
    background-color: var(--tps-white);
}

.tps-process-item h3 {
    margin-bottom: 0;
    font-size: 1.05rem;
}

.tps-ways-cta {
    background-color: var(--tps-blue);
}

@media (max-width: 800px) {
    .tps-journey-grid,
    .tps-service-grid,
    .tps-process-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Get Started Construction
   IG-008
   ========================================================= */

.tps-get-started {
    background-color: var(--tps-white);
}

.tps-get-started-welcome {
    background-color: var(--tps-off-white);
    text-align: center;
}

.tps-expect-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-md);
}

.tps-expect-step {
    border-top: 0.35rem solid var(--tps-green);
}

.tps-contact-options {
    background-color: var(--tps-white);
}

.tps-contact-card {
    padding: var(--space-md);
    margin-top: var(--space-md);
    border: 1px solid var(--tps-border);
    border-radius: 1rem;
    background-color: var(--tps-off-white);
}

.tps-contact-link {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tps-text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.tps-contact-link:hover,
.tps-contact-link:focus {
    text-decoration-thickness: 0.15em;
}

.tps-contact-reassurance {
    margin-top: var(--space-md);
    font-weight: 700;
}

.tps-get-started-next {
    background-color: var(--tps-off-white);
}

.tps-reassurance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}

.tps-reassurance-item {
    padding: var(--space-md);
    border-left: 0.35rem solid var(--tps-green);
    background-color: var(--tps-white);
}

.tps-reassurance-item h3 {
    margin-bottom: 0;
    font-size: 1.05rem;
}

.tps-get-started-final {
    background-color: var(--tps-blue);
    text-align: center;
}

.tps-get-started-final .tps-button-row {
    justify-content: center;
}

@media (max-width: 1000px) {
    .tps-expect-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .tps-expect-steps,
    .tps-reassurance-grid {
        grid-template-columns: 1fr;
    }

    .tps-contact-link {
        font-size: 1.1rem;
    }
}