/* Sponsorships page — loaded only on page-templates/template-sponsorships.php.
   Mobile-first: base rules are the phone layout, min-width queries add the larger layouts.
   Everything is scoped to .sp-* */

/* The theme forces Lora 18px (!important) on every p/li inside #main-content. This page's UI copy is Inter
   at the sizes below, so these rules out-rank it and are limited to this page's body class. */
body.page-template-template-sponsorships #main-content p,
body.page-template-template-sponsorships #main-content li { font-family: var(--font-body) !important; font-size: 15px !important; line-height: 1.55 !important; }
body.page-template-template-sponsorships #main-content .sp-intro p:last-child,
body.page-template-template-sponsorships #main-content .sp-success__lead { font-size: 16px !important; }
body.page-template-template-sponsorships #main-content .sp-hint,
body.page-template-template-sponsorships #main-content .sp-form__fine { font-size: 13px !important; }
body.page-template-template-sponsorships #main-content .sp-eyebrow { font-size: 12px !important; }
body.page-template-template-sponsorships #main-content .sp-error,
body.page-template-template-sponsorships #main-content .sp-form__alert { font-size: 14px !important; }
body.page-template-template-sponsorships #main-content .sp-aside__row,
body.page-template-template-sponsorships #main-content .sp-aside__row span,
body.page-template-template-sponsorships #main-content .sp-aside__row a { font-family: var(--font-body) !important; font-size: 15px !important; font-weight: 400 !important; color: rgba(255,255,255,0.9) !important; }

/* ---- Hero ---- */
.sp-hero__sub { max-width: 680px; }
.sp-hero__cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); margin: var(--space-6) auto 0; max-width: 320px; position: relative; }
.sp-hero__cta .btn { justify-content: center; }
.sp-btn-ghost { background: transparent; color: var(--color-white); border: 2px solid rgba(255,255,255,0.7); gap: var(--space-2); }
.sp-btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: var(--color-white); color: var(--color-white); }
.sp-btn-ghost:focus-visible { outline: 3px solid var(--color-white); outline-offset: 2px; }

/* Deeper saffron than the site default so white text passes contrast */
.sp-btn { background-color: #B45309; color: var(--color-white); border: 2px solid #B45309; justify-content: center; }
.sp-btn:hover { background-color: var(--color-maroon); border-color: var(--color-maroon); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.sp-btn:focus-visible, .sp-chip input:focus-visible + span, .sp-check input:focus-visible, .sp-faq__item summary:focus-visible, .sp-pill:focus-visible { outline: 3px solid var(--color-blue-deep); outline-offset: 2px; }
#sp-submit[disabled] { opacity: 0.7; cursor: wait; transform: none; }

/* ---- Shared bits ---- */
.sp-eyebrow { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-maroon); margin-bottom: var(--space-2); }
.sp-ico { width: 52px; height: 52px; border-radius: 50%; background: #FDF3E2; color: #B45309; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sp-intro { text-align: center; max-width: 720px; margin: 0 auto var(--space-8); overflow-wrap: anywhere; }
.sp-intro h2 { font-family: var(--font-heading); font-size: var(--text-2xl); line-height: 1.25; color: var(--color-blue-deep); margin-bottom: var(--space-3); }
.sp-intro p:last-child { color: #5B6470; }
.sp-star { color: var(--color-error); }

main#main-content > .section { padding: var(--space-10) 0; }

/* ---- Perks strip ---- */
.sp-perks { background: var(--color-blue-deep); color: var(--color-white); padding: var(--space-8) 0; }
.sp-perks__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.sp-perks__grid li { display: flex; gap: var(--space-4); align-items: flex-start; }
.sp-perks__ico { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.1); color: var(--color-gold); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sp-perks strong { display: block; font-family: var(--font-heading); font-size: 18px; color: var(--color-gold); margin-bottom: 2px; }
body.page-template-template-sponsorships #main-content .sp-perks p { color: rgba(255,255,255,0.85); }

/* ---- Occasions ---- */
.sp-occasions { background: var(--color-off-white); }
.sp-occasions__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sp-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); background: var(--color-white); font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-700); transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }
.sp-pill:hover { border-color: var(--color-saffron); background: #FFF7ED; color: #7C2D12; }

/* ---- Process ---- */
.sp-process { background: var(--color-white); }
.sp-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: flex; flex-direction: column; gap: 0; }
.sp-steps li { display: flex; gap: var(--space-4); position: relative; padding-bottom: var(--space-6); }
.sp-steps li:last-child { padding-bottom: 0; }
.sp-steps li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 4px; width: 2px; background: #E7D7BC; }
.sp-steps__n { width: 36px; height: 36px; border-radius: 50%; background: var(--color-blue-deep); color: var(--color-white); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex: none; position: relative; }
.sp-steps h3 { font-size: 17px; font-weight: 600; color: var(--color-blue-deep); margin: 5px 0 2px; }
.sp-steps p { color: #5B6470; }

/* ---- Request form ---- */
.sp-enquiry { padding: var(--space-8) 0 56px; background: var(--color-off-white); scroll-margin-top: 80px; }
.sp-layout { display: flex; flex-direction: column; gap: var(--space-6); }
.sp-layout[hidden] { display: none; }
.sp-form { min-width: 0; background: var(--color-white); border: 1px solid #EEE7DC; border-radius: 20px; padding: var(--space-6) var(--space-5); box-shadow: var(--shadow-card); }
.sp-form h2 { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-blue-deep); margin-bottom: 6px; }
.sp-form__lead { color: #5B6470; }
.sp-form__alert { margin: var(--space-5) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: #FEE2E2; color: #991B1B; }
.sp-form__alert[hidden] { display: none; }
.sp-form__fine { text-align: center; color: #5B6470; margin-top: var(--space-4); }
.sp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sp-form fieldset { border: 0; margin-inline: 0; padding: 0; min-width: 0; }
.sp-form legend { padding: 0; }
.sp-form .form-label { margin-bottom: var(--space-2); }
.sp-form .form-label.required::after { content: ' *'; color: var(--color-error); }
.sp-field { margin-bottom: var(--space-5); }
.sp-opt { font-weight: 400; color: #5B6470; font-size: 13px; margin-left: 6px; font-family: var(--font-body); letter-spacing: 0; }
.sp-hint { color: #5B6470; margin-top: var(--space-2); }
.sp-error { color: var(--color-error); margin-top: var(--space-2); }
.sp-error:empty { display: none; }
.sp-grid-2 { display: grid; grid-template-columns: 1fr; gap: 0; }
.sp-form .form-input, .sp-form .form-select, .sp-form .form-textarea { border-color: var(--color-gray-300); }
.sp-form [aria-invalid="true"] { border-color: var(--color-error); }
.sp-form .form-input::placeholder, .sp-form .form-textarea::placeholder { color: var(--color-gray-500); }
.sp-form input[type="date"] { min-height: 48px; }
.sp-select { position: relative; }
.sp-select .form-select { appearance: none; -webkit-appearance: none; padding-right: 44px; }
.sp-select svg { position: absolute; right: 16px; top: 16px; width: 16px; height: 16px; pointer-events: none; color: #5B6470; }

.sp-sec { border-top: 1px solid #EEE7DC; padding-top: 28px; margin-top: 28px; }
.sp-sec:first-of-type { margin-top: var(--space-6); }
.sp-sec__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.sp-sec__n { width: 34px; height: 34px; border-radius: 50%; background: var(--color-blue-deep); color: var(--color-white); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex: none; }
.sp-sec__head h3 { font-family: var(--font-heading); font-size: 18px; line-height: 1.25; color: var(--color-blue-deep); font-weight: 700; letter-spacing: 0.02em; }

/* Pills */
.sp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-chip { position: relative; display: block; cursor: pointer; max-width: 100%; }
.sp-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sp-chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); background: var(--color-white); font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-700); transition: border-color var(--transition-fast), background var(--transition-fast); line-height: 1.3; }
.sp-chip:hover span { border-color: var(--color-saffron); }
.sp-chip input:checked + span { background: #FFF7ED; border-color: var(--color-saffron); color: #7C2D12; font-weight: 600; }
.sp-chip input:checked + span::before { content: "\2713"; font-weight: 700; color: #B45309; }

.sp-check { font-size: 15px; display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-gray-700); cursor: pointer; line-height: 1.5; }
.sp-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: #B45309; flex: none; }
.sp-consent { margin: var(--space-6) 0; }

/* ---- Aside ---- */
.sp-aside { display: flex; flex-direction: column; gap: var(--space-5); }
.sp-aside h2 { font-family: var(--font-heading); font-size: 19px; margin-bottom: var(--space-2); }
.sp-aside__help { background: var(--color-blue-deep); color: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-6); }
.sp-aside__help h2 { color: var(--color-white); }
.sp-aside__help p { color: rgba(255,255,255,0.85); margin-bottom: var(--space-4); }
.sp-aside__row { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); }
.sp-aside__row:last-child { margin-bottom: 0; }
.sp-aside__row svg { flex: none; color: var(--color-gold); margin-top: 2px; }
.sp-aside__row a:hover { text-decoration: underline; }
.sp-aside__mail a { overflow-wrap: anywhere; }
.sp-aside__alt { background: var(--color-white); border: 1px solid #EEE7DC; border-radius: var(--radius-lg); padding: var(--space-6); }
.sp-aside__alt h2 { color: var(--color-blue-deep); }
.sp-aside__alt p { color: #5B6470; margin-bottom: var(--space-4); }
.sp-aside__alt .btn { justify-content: center; }

/* ---- Thank-you panel ---- */
.sp-success { max-width: 880px; margin: 0 auto; background: var(--color-white); border: 1px solid #EEE7DC; border-radius: 20px; padding: var(--space-8) var(--space-5); box-shadow: var(--shadow-card); text-align: center; scroll-margin-top: 120px; }
.sp-success[hidden] { display: none; }
.sp-success:focus { outline: none; }
.sp-success__tick { width: 72px; height: 72px; border-radius: 50%; background: #E8F5EC; color: #15803D; display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); }
.sp-success h2 { font-family: var(--font-heading); font-size: var(--text-3xl); color: var(--color-blue-deep); margin-bottom: var(--space-3); overflow-wrap: anywhere; }
.sp-success__lead { color: var(--color-gray-700); max-width: 560px; margin: 0 auto var(--space-5); }
.sp-success__ref { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; background: #FFF7ED; border: 1px solid #F5D9B0; border-radius: var(--radius-lg); padding: 8px 20px; color: #7C2D12; margin-bottom: var(--space-6); }
.sp-success__ref strong { letter-spacing: 0.04em; }
.sp-success__summary { text-align: left; background: var(--color-off-white); border: 1px solid #EEE7DC; border-radius: var(--radius-lg); padding: var(--space-5); display: grid; grid-template-columns: 1fr; gap: 16px 32px; margin: 0 0 var(--space-6); }
.sp-success__summary:empty { display: none; }
.sp-success__summary dt { font-size: 13px; font-weight: 600; color: #5B6470; margin-bottom: 2px; }
.sp-success__summary dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.sp-success__cta { display: flex; flex-direction: column; gap: var(--space-3); }
.sp-success__cta .btn { justify-content: center; }
.sp-success__more { margin-top: var(--space-5); color: #5B6470; }

/* ---- FAQ ---- */
.sp-faq { background: var(--color-white); }
.sp-faq__list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.sp-faq__item { background: var(--color-off-white); border: 1px solid #EEE7DC; border-radius: 14px; }
.sp-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4); min-height: 56px; font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--color-blue-deep); border-radius: 14px; }
.sp-faq__item summary::-webkit-details-marker { display: none; }
.sp-faq__item summary svg { flex: none; color: #B45309; transition: transform var(--transition-fast); }
.sp-faq__item[open] summary svg { transform: rotate(180deg); }
.sp-faq__item p { padding: 0 var(--space-4) var(--space-4); color: #5B6470; }

/* ---- Larger screens ---- */
@media (min-width: 560px) {
    .sp-hero__cta { flex-direction: row; justify-content: center; max-width: none; gap: var(--space-4); }
    .sp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); }
    .sp-success__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-success__cta { flex-direction: row; justify-content: center; }
}

@media (min-width: 768px) {
    main#main-content > .section { padding: var(--space-16) 0; }
    .sp-intro { margin-bottom: var(--space-10); }
    .sp-intro h2 { font-size: var(--text-4xl); }
    .sp-perks { padding: var(--space-10) 0; }
    .sp-perks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
    .sp-steps { max-width: none; flex-direction: row; gap: var(--space-5); }
    .sp-steps li { flex: 1 1 0; min-width: 0; flex-direction: column; padding-bottom: 0; gap: var(--space-3); }
    .sp-steps li:not(:last-child)::before { left: 46px; right: calc(-1 * var(--space-5) + 10px); top: 17px; bottom: auto; width: auto; height: 2px; }
    .sp-enquiry { padding: var(--space-16) 0 96px; }
    .sp-form { padding: var(--space-8); border-radius: var(--radius-xl); }
    .sp-form h2 { font-size: 28px; }
    .sp-sec__n { width: 36px; height: 36px; }
    .sp-sec__head h3 { font-size: var(--text-xl); }
    .sp-success { padding: 48px; border-radius: var(--radius-xl); }
    .sp-success h2 { font-size: var(--text-4xl); }
    .sp-faq__item summary { padding: var(--space-5) var(--space-6); font-size: 17px; }
    .sp-faq__item p { padding: 0 var(--space-6) var(--space-5); }
}

@media (min-width: 992px) {
    .sp-layout { flex-direction: row; align-items: flex-start; gap: var(--space-10); }
    .sp-form { flex: 1; padding: var(--space-10); }
    .sp-aside { flex: 0 0 340px; position: sticky; top: 110px; }
}

@media (min-width: 900px) {
    /* Hero copy: one sentence per line. The type scales down a little on narrower laptops/tablets so each sentence still fits. */
    .sp-hero__sub { max-width: none; font-size: min(18px, calc((100vw - 70px) / 56)); }
    .sp-line { display: block; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-chip span, .sp-pill, .sp-btn, .sp-faq__item summary svg { transition: none; }
}