/* ==========================================================================
   Utility pages — Thank You (page-thank-you.php) + 404 (404.php).
   Shared centred layout under the standard dark page-banner.
   Tokens: --primary-color #f00004, --heading-color #141414,
   --text-color #4a4a4a, --border-color #e6e6e6, fonts --font-head/--font-body.
   ========================================================================== */

/* No banner on these pages — the light-grey section runs straight under the
   header, so give it a little extra breathing room at the top. */
.sp-utility {
   background: #f2f2f2;
   padding-top: clamp(3.5rem, 7vw, 7rem);
}
.sp-utility__inner {
   max-width: 46rem;
   margin-inline: auto;
   text-align: center;
}

/* ---- Thank-you tick ----------------------------------------------------- */
.sp-utility__icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 86px;
   height: 86px;
   border-radius: 50%;
   background: var(--primary-color);
   color: #fff;
   margin-bottom: 1.75rem;
}

/* ---- 404 big number ----------------------------------------------------- */
.sp-utility__code {
   font-family: var(--font-head);
   font-weight: 700;
   line-height: 1;
   font-size: clamp(5rem, 3rem + 10vw, 10rem);
   color: var(--primary-color);
   margin: 0 0 .5rem;
}

.sp-utility__title {
   font-family: var(--font-head);
   font-weight: 700;
   font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
   color: var(--heading-color);
   margin: 0 0 1rem;
}

.sp-utility__text {
   color: var(--text-color);
   font-size: 1.1rem;
   line-height: 1.7;
}
.sp-utility__text p { margin: 0 0 1rem; }
.sp-utility__text a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Search box --------------------------------------------------------- */
.sp-utility__search { max-width: 30rem; margin: 2rem auto 0; }
.sp-utility__search form,
.sp-utility__search .search-form { display: flex; gap: .5rem; }
.sp-utility__search input[type="search"],
.sp-utility__search .search-field {
   flex: 1; min-width: 0; padding: .75rem .9rem;
   border: 1px solid var(--border-color); background: #fff; color: var(--heading-color);
}
.sp-utility__search button,
.sp-utility__search .search-submit {
   padding: .75rem 1.25rem; border: 0; background: var(--primary-color); color: #fff;
   font-family: var(--font-body); font-weight: 600; cursor: pointer;
}
.sp-utility__search button:hover,
.sp-utility__search .search-submit:hover { background: var(--primary-hover); }

/* ---- "Where to next?" links --------------------------------------------- */
.sp-utility__links { margin-top: 2.5rem; }
.sp-utility__links-title {
   font-family: var(--font-body);
   font-size: .85rem; font-weight: 700; letter-spacing: .08em;
   text-transform: uppercase; color: var(--text-color);
   margin: 0 0 1rem;
}
.sp-utility__links ul {
   list-style: none; margin: 0; padding: 0;
   display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
}
.sp-utility__links a {
   display: inline-block;
   padding: .55rem 1.1rem;
   border: 1px solid var(--border-color);
   color: var(--heading-color);
   font-family: var(--font-body); font-weight: 600; font-size: .95rem;
   transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.sp-utility__links a:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

/* ---- Actions ------------------------------------------------------------ */
.sp-utility__actions {
   margin-top: 2.5rem;
   display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem;
}
/* Match both buttons to one size — btn-sp-red otherwise keeps the small base
   .btn padding while btn-sp-outline-dark/-light carry the large one, so the
   pair looks mismatched. */
.sp-utility__actions .btn { padding: 1.55rem 3.3rem; font-size: .95rem; line-height: 1; }

/* Dark-outline button variant (light-background sibling of btn-sp-outline-light). */
.btn-sp-outline-dark {
   background: transparent;
   color: var(--heading-color);
   border: 2px solid var(--heading-color);
   padding: 1.55rem 3.3rem;
   font-size: .95rem;
}
.btn-sp-outline-dark:hover {
   background: var(--heading-color);
   border-color: var(--heading-color);
   color: #fff;
}