/* Layout and calendar styles from the approved design (hsf-sponsor-calendar.tiiny.site). */
:root{--navy:#142255;--blue:#2e3b6b;--lime:#e1ff00;--ink:#1d294b;--muted:#69768c;--line:#e2e7f0}
*{box-sizing:border-box}body{margin:0;background:#f3f5fa;color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif}button,input{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}
.topbar{height:82px;background:white;display:flex;align-items:center;justify-content:space-between;padding:0 max(5%,calc((100vw - 1320px)/2));gap:20px}.brand img{width:188px;max-width:42vw;display:block}.nav{display:flex;align-items:center;gap:28px;font-weight:700;font-size:15px}.nav a:hover{text-decoration:underline}.donate-nav{background:var(--lime);color:var(--navy);padding:12px 22px;border-radius:10px;white-space:nowrap}
.hero{background:#142255;overflow:hidden}.hero img{display:block;width:100%;height:auto;min-height:185px;object-fit:cover;object-position:center}
main{width:min(1240px,90%);margin:0 auto;padding:46px 0 88px}.intro{text-align:center;margin-bottom:29px}.intro h2{font-size:clamp(27px,4vw,40px);line-height:1.1;letter-spacing:-.035em;color:var(--navy);margin:0 0 10px}.intro p{margin:0;color:#58667c;font-size:16px}.layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,.76fr);gap:26px;align-items:start}
.calendar-wrap{min-width:0}.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 15px}.calendar-toolbar h3{color:var(--navy);font-size:24px;line-height:1.1;margin:0}.calendar-toolbar small{display:block;font-size:11px;color:#66748a;text-transform:uppercase;letter-spacing:.13em;font-weight:800;margin-bottom:5px}.month-controls{display:flex;align-items:center;gap:8px}.month-controls button{width:42px;height:42px;border-radius:50%;border:1px solid #cbd4e3;background:white;color:var(--navy);font-size:25px;line-height:1}.month-controls button:hover:not(:disabled),.month-controls button:focus-visible{background:var(--lime);border-color:var(--lime)}.month-controls button:disabled{opacity:.35;cursor:not-allowed}.calendar-viewport{overflow-x:auto;padding:1px 1px 15px}.calendar-spread{min-width:690px;box-shadow:0 22px 42px rgba(22,36,75,.16);border-radius:15px;background:white;overflow:hidden}
.art-page{background:#17295a}.art-page img{display:block;width:100%;height:auto}
.binding{height:35px;background:#ecf0f6;position:relative;display:flex;align-items:center;justify-content:space-around;padding:0 10%;border-top:4px solid var(--lime);box-shadow:inset 0 5px 8px rgba(34,45,79,.16)}.binding i{width:18px;height:18px;border-radius:50%;background:#9aa7c0;box-shadow:inset 0 3px 3px #64708a,0 2px 1px white;position:relative}.binding i:before{content:"";position:absolute;width:10px;height:28px;left:4px;bottom:9px;border:4px solid #bdc7d7;border-bottom:0;border-radius:9px 9px 0 0;box-shadow:1px -1px 1px #fff}
.date-page{background:#fff;padding:28px 28px 30px}.date-heading{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px}.date-heading h4{font-size:34px;line-height:1;margin:0;color:var(--navy);letter-spacing:-.045em}.month-inline{display:flex;align-items:center;gap:12px}.month-inline button{border:1px solid #d1d9e7;background:white;color:var(--navy);width:32px;height:32px;border-radius:50%;font-size:24px;line-height:1}.month-inline button:hover:not(:disabled),.month-inline button:focus-visible{border-color:var(--lime);background:var(--lime)}.month-inline button:disabled{opacity:.35;cursor:not-allowed}.date-heading span{color:#728098;font-size:14px;font-weight:700}.weekdays,.dates{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.weekdays{margin-bottom:7px}.weekdays span{text-align:center;text-transform:uppercase;color:#61718b;font-size:11px;letter-spacing:.09em;font-weight:850;padding:4px}.day{position:relative;min-width:0;min-height:104px;border:1px solid #e2e7ee;border-radius:7px;background:white;color:var(--navy);padding:7px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;transition:background .15s,border-color .15s}.day .number{font-size:19px;line-height:1;font-weight:850}.day .status{font-size:10px;line-height:1.25;font-weight:700;color:#6e7b91}.day:not(:disabled):hover{background:#f8fbdc;border-color:#acc400}.day:not(:disabled):focus-visible{outline:3px solid #91a800;outline-offset:1px}.day.selected{background:var(--lime);border-color:#bed700}.day.selected .status{color:#445300}.day.sponsored{background:#eef2fa;border-color:#d9e1f0}.day.sponsored .status{color:#263a72;font-size:10px;overflow-wrap:anywhere}.day.sponsored.selected{background:var(--lime);border-color:#bed700}.day.sponsored.selected .status{color:#445300}.day:disabled:not(.sponsored){background:#f7f8fa;color:#a9b1c0;cursor:default}.day.empty{visibility:hidden}.calendar-note{margin:12px 3px 0;color:#63718b;font-size:12px;line-height:1.4}
.selection-card{background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:0 15px 35px rgba(22,40,81,.07);overflow:hidden;position:sticky;top:18px}.selection-top{background:linear-gradient(140deg,#1a2b61,#354477);color:white;padding:26px}.selection-top h3{font-size:29px;line-height:1.08;letter-spacing:-.03em;margin:0 0 10px}.selection-top p:last-child{color:#e7ecf7;margin:0;font-size:14px}.selection-body{padding:25px}.selection-label{color:#7a879d;font-size:11px;letter-spacing:.1em;font-weight:850}.date-display{min-height:50px;display:flex;align-items:center;color:var(--navy);font-size:20px;font-weight:850;line-height:1.18;margin:8px 0 20px}.date-display.placeholder{font-size:16px;font-weight:600;color:#8290a5}.price{font-size:36px;color:var(--navy);font-weight:900;letter-spacing:-.04em;margin:7px 0 13px;line-height:1}.price small{font-size:13px;letter-spacing:0;font-weight:650;color:#6e7c93}.frequency{border:0;padding:0;margin:0 0 17px}.frequency legend,.selection-body label.field-label{display:block;font-size:13px;font-weight:750;margin-bottom:9px}.frequency-option{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;margin:0 0 7px;padding:10px;cursor:pointer;font-size:13px;font-weight:700}.frequency-option:has(input:checked){border-color:#bdd000;background:#fbfde7}.frequency-option input{accent-color:#829700;margin:0}.frequency-option strong{margin-left:auto;white-space:nowrap}.selection-body input[type=text]{display:block;width:100%;padding:11px;border:1px solid #cdd5e2;border-radius:8px;color:var(--navy)}.selection-body input[type=text]:focus{outline:2px solid #b5cd00}.field-hint{font-size:11px;color:#6f7c91;margin:7px 0 17px}.primary{display:block;width:100%;padding:15px;border:0;border-radius:9px;background:var(--lime);color:var(--navy);font-size:14px;font-weight:850}.primary:disabled{opacity:.55;cursor:not-allowed}.primary:hover:not(:disabled){background:#d3ed00}.message{display:none;margin:12px 0 0;background:#edf3fa;padding:11px;border-radius:7px;color:var(--navy);font-size:12px}.message.visible{display:block}.setup-note{margin:13px 0 0;color:#6b778e;line-height:1.4;font-size:11px}footer{background:var(--navy);color:#dfe6f6;text-align:center;font-size:13px;padding:24px}
.tier-options{border:0;padding:0;margin:0 0 22px}.tier-options legend{font-size:13px;font-weight:750;margin-bottom:10px}.tier-option{display:flex;align-items:center;gap:9px;padding:12px 10px;border:1px solid var(--line);border-radius:9px;margin-bottom:8px;cursor:pointer}.tier-option:has(input:checked){border-color:#bace00;background:#fbfde6;box-shadow:inset 3px 0 0 #d3ed00}.tier-option input{accent-color:#829700;margin:0}.tier-option span{display:flex;flex-direction:column;min-width:0;line-height:1.2}.tier-option b{font-size:12px;color:var(--navy)}.tier-option small{font-size:10px;font-weight:400;color:#69768c;margin-top:4px}.tier-option strong{margin-left:auto;color:var(--navy);font-size:14px;white-space:nowrap}
@media(max-width:940px){.layout{grid-template-columns:1fr}.selection-card{position:static}.nav a:not(.donate-nav){display:none}.selection-body{display:block}.calendar-spread{min-width:690px}}
@media(max-width:600px){
  .topbar{height:66px;padding:0 4%;gap:8px}.brand img{width:144px;max-width:48vw}.donate-nav{font-size:11px;padding:10px 11px}
  .hero img{min-height:150px;object-position:center}
  main{width:94%;padding:28px 0 52px}.intro{text-align:center;margin-bottom:20px}.intro h2{font-size:27px}.intro p{font-size:14px;line-height:1.4}
  .layout{gap:19px}.calendar-viewport{overflow-x:visible;padding:0 0 10px}.calendar-spread{min-width:0;width:100%;border-radius:10px}
  .binding{height:25px;border-top-width:3px}.binding i{width:12px;height:12px}.binding i:before{width:7px;height:20px;left:2px;bottom:6px;border-width:3px}
  .date-page{padding:14px 7px 17px}.date-heading{align-items:center;gap:4px;padding:0 2px 12px;margin-bottom:10px}.date-heading h4{font-size:22px;white-space:nowrap}.date-heading span{font-size:10px;text-align:right;line-height:1.15}.month-inline{gap:4px}.month-inline button{width:27px;height:27px;min-width:27px;font-size:20px}
  .weekdays,.dates{gap:2px}.weekdays{margin-bottom:4px}.weekdays span{font-size:9px;letter-spacing:0;padding:2px 0}.day{min-height:72px;padding:4px 3px;border-radius:4px}.day .number{font-size:15px}.day .status,.day.sponsored .status{font-size:8px;line-height:1.13;overflow-wrap:anywhere;word-break:normal}.calendar-note{font-size:11px;line-height:1.4;margin:8px 2px 0}
  .selection-top{padding:22px}.selection-top h3{font-size:25px}.selection-body{padding:20px}.tier-option{padding:11px 9px}.date-display{font-size:19px}
}
@media(max-width:370px){.date-heading h4{font-size:19px}.date-heading span{font-size:9px}.month-inline button{width:24px;height:24px;min-width:24px}.day{min-height:68px}.day .number{font-size:14px}.day .status,.day.sponsored .status{font-size:7px}}


/* ---------------------------------------------------------------------------
   Additions for the live app: sponsors on the calendar, dedication, checkout,
   messages and the thank-you page. Same tokens as the design above.
   --------------------------------------------------------------------------- */
.selection-top .eyebrow{margin:0 0 8px;font-size:11px;letter-spacing:.14em;font-weight:850;color:var(--lime)}
.day .status .more{display:block;color:#6e7b91;font-weight:700}
.day.sponsored .status .name{display:block;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.calendar-loading .dates{opacity:.55;transition:opacity .15s}
.calendar-error{margin:10px 3px 0;color:#9b1c1c;font-size:12px}

.sponsor-list{margin:-10px 0 18px;padding:10px 12px;background:#f4f6fb;border-radius:8px;font-size:12px;color:#44506a;line-height:1.4}
.sponsor-list b{display:block;color:var(--navy);font-size:11px;letter-spacing:.08em;margin-bottom:4px}
.sponsor-list ul{margin:0;padding-left:16px}
.sponsor-list li{margin:2px 0}
.sponsor-list small{color:#6e7b91}

.dedication-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:8px}
.selection-body select,.checkout select{display:block;width:100%;padding:10px;border:1px solid #cdd5e2;border-radius:8px;color:var(--navy);background:white;font:inherit;font-size:14px}
.selection-body select:focus,.checkout select:focus{outline:2px solid #b5cd00}

.checkout{margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:0 15px 35px rgba(22,40,81,.07);overflow:hidden;scroll-margin-top:16px}
.checkout[hidden]{display:none}
.checkout-top{background:linear-gradient(140deg,#1a2b61,#354477);color:white;padding:22px 26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.checkout-top h3{margin:0;font-size:24px;letter-spacing:-.03em}
.checkout-summary{font-size:14px;color:#e7ecf7;font-weight:600}
.checkout-summary strong{color:var(--lime);font-size:18px;margin-left:6px}
.checkout-body{padding:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 34px}
.checkout-body h4{margin:0 0 14px;color:var(--navy);font-size:15px;letter-spacing:.02em}
.checkout-col-full{grid-column:1/-1}
.field{margin-bottom:14px}
.field label,.field .label{display:block;font-size:13px;font-weight:750;margin-bottom:6px;color:var(--ink)}
.field input[type=text],.field input[type=email],.field input[type=tel]{display:block;width:100%;padding:11px;border:1px solid #cdd5e2;border-radius:8px;color:var(--navy);font:inherit;font-size:14px}
.field input:focus{outline:2px solid #b5cd00}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field-row.three{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr)}
.check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;cursor:pointer}
.check input{accent-color:#829700;margin:0}
.validator,.field-error{display:block;color:#b42318;font-size:12px;margin-top:5px}
#stripe-payment-element{min-height:44px}
.checkout-actions{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:22px}
.checkout-actions .primary{max-width:420px}
.checkout-actions p{margin:0;font-size:12px;color:#6b778e;text-align:center}
.primary.is-busy{opacity:.75;cursor:progress}
.link-button{background:none;border:0;color:#4a5876;font-size:12px;text-decoration:underline;padding:0}

.page-message{margin:0 0 22px;padding:14px 16px;border-radius:10px;font-size:14px;line-height:1.45}
.page-message.error{background:#fdecec;color:#8a1c1c;border:1px solid #f4c7c7}
.page-message.info{background:#edf3fa;color:var(--navy);border:1px solid #d6e0ef}

.thanks{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:0 15px 35px rgba(22,40,81,.07);overflow:hidden}
.thanks .selection-top{padding:30px}
.thanks-body{padding:28px 30px}
.thanks-body dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;margin:0 0 24px}
.thanks-body dt{font-size:11px;letter-spacing:.1em;font-weight:850;color:#7a879d;padding-top:3px}
.thanks-body dd{margin:0;color:var(--navy);font-weight:700}
.thanks-body .primary{display:inline-block;width:auto;padding:14px 28px;text-align:center}

@media(max-width:760px){
  .checkout-body{grid-template-columns:1fr;padding:20px;gap:6px}
  .checkout-top{padding:20px}
  .field-row.three{grid-template-columns:1fr 1fr}
  .field-row.three .field:first-child{grid-column:1/-1}
  .thanks-body dl{grid-template-columns:1fr;gap:2px}
  .thanks-body dd{margin-bottom:10px}
}
.tier-option b{text-transform:uppercase}
.gift-note{margin:-6px 0 14px;font-size:12px;color:#6e7c93;font-weight:600}
.frequency-option strong small{font-size:11px;font-weight:650;color:#6e7c93}