:root {
    --default-border-radius: 10px;
    --input-border-radius: 5px;
}

/* LAYOUT */
html, body {
    height: 100%;
    margin: 0;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/*FOOTER*/
.tt-footer {
    margin-top: var(--space-xl);
    width: 100%;
}
.tt-footer .u-container {
    width: 100%;
    grid-column: span 12;
    padding-block: var(--space-s);
}
.tt-footer svg {
    max-width: 219px;
}
.tt-footer .tt-paragraph {
    min-width: 100%;
}


/* LANDING PAGE */
.tt-landing-page {
    background-color: var(--bg-color);
    font-family: "PP Neue Montreal", sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    flex-grow: 1;
}

.tt-landing-page :is(input, button, select, textarea) {
    font-family: inherit;
}

.tt-landing-page section {
    width:100%;
}


/* SECTION CODE */
.tt-hero .grid-base {
    grid-template-rows: 1fr;
    padding-top: var(--space-3xl);
}
.tt-hero .tt-text-content {
    display:flex;
    flex-direction: column;
}


/* TEXT AND IMAGE SECTION */
.tt-text-and-images h2 {
    text-align: center;
}

.tt-text-and-images .tt-content-element:nth-child(even) img{
    order:2;

}
.tt-text-and-images ul:not(.dropdown-menu) {
    /*display: flex;*/
    gap: var(--space-3xl);
    flex-direction: column;
}

/* PLACEMENT */
.tt-text-end {
    margin-left: auto;
}
.tt-text-align-right {
    text-align: right;
}

.tt-text-right {
    text-align: right;
}
.tt-text-center {
    text-align: center;
}

.justify-content-end {
    justify-content: flex-end;
}

.tt-vertical-center {
    display: flex;
    align-items: center;
}
.tt-vertical-center-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* UTILITY */
.tt-w-100 {
    width: 100%;
}

/* Same reading-width cap as .tt-paragraph (typography.css), for blocks of
   mixed content (headings, text, tables) that should read as prose rather
   than stretch edge to edge. Centered, since — unlike a paragraph — it isn't
   already anchored to a left-aligned column of text above it. */
.tt-w-prose {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

/* SCROLL CUE — a brand-colored arrow inviting the reader further down the
   page (e.g. to contact details already shown in the footer), instead of
   repeating that content inline. Angled toward where that content actually
   sits (the footer's last column is right-aligned — see .grid-footer in
   grid.css), rather than pointing straight down.

   .tt-scroll-cue-container establishes the query container: it should wrap
   the same .grid-base[data-layout='halves'] the arrow sits beside, so the
   container query below tracks that grid's own collapse to a single column
   (2 × 20rem item min-size + gutter, see .grid-base[data-layout='halves']
   in grid.css) rather than a guessed viewport breakpoint. Once it collapses,
   the arrow no longer needs the offset that lined it up next to the
   paragraph beside it, or the angle pointing back toward a column that no
   longer exists beside it. */
.tt-scroll-cue-container {
    container-type: inline-size;
}
.tt-scroll-cue-column {
    text-align: center;
    margin-top: var(--space-l);
}
.tt-scroll-cue {
    display: inline-flex;
    color: var(--primary-color);
}
.tt-scroll-cue:hover,
.tt-scroll-cue:focus-visible {
    color: var(--primary-hover-color);
}
.tt-scroll-cue-icon {
    width: 3.5rem;
    height: 3.5rem;
    transform: rotate(-18deg);
}
@container (max-width: 42rem) {
    .tt-scroll-cue-column {
        text-align: right;
        margin-top: 0;
    }
    .tt-scroll-cue-icon {
        transform: none;
    }
}

/* MINI MENU */
.tt-mini-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    row-gap: var(--space-3xs);
}
.tt-mini-menu a {
    white-space: nowrap;
}

/* FLEX */
.tt-flex {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.tt-flex--wrap {
    flex-wrap: wrap;
}

.tt-text-block {
    display: flex;
    align-items: baseline;
    gap: var(--space-3xs);
}

.tt-align-items-center {
    display: flex;
    align-items: center;
}

.tt-justify-content-between {
    justify-content: space-between;
}