@font-face { font-family: 'Lexend'; src: url('/summerjobs/sfsites/c/resource/SummerJobs_Assets/Lexend.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap; }

/* Brand colors darkened only as far as WCAG AA needs, same hue (walkthrough 2026-11-02 F2-F4):
   orange #DC4405 (4.31:1 with white) -> #D64205 (4.53:1); button blue #0089C2 (3.92:1) -> #007EB3 (4.53:1);
   heading blue #009FDF (2.99:1, large text) -> #009EDE (3.02:1); the blue band carries 18px white body text,
   so it uses the 4.5:1 shade #007EB3. */
:root { --sj-orange:#D64205; --sj-orange-dark:#B83903; --sj-blue:#009EDE; --sj-blue-btn:#007EB3; --sj-band:#007EB3;
  --sj-magenta:#C6007E; --sj-yellow:#FFB81C; --sj-green:#84BD00; --sj-green-text:#5E8A00;
  --sj-ink:#202324; --sj-muted:#4A4D4F; --sj-cream:#FFFFFF; }

body, .sj { font-family: 'Lexend', 'Helvetica Neue', Arial, sans-serif; color: var(--sj-ink); }
.sj * { box-sizing: border-box; }
.sj p { font-size: 18px; line-height: 1.65; letter-spacing: .3px; margin: 0 0 16px; }
.sj a { text-decoration: none; }
.sj-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.sj-section { padding: 88px 0; background: #fff; position: relative; }
.sj-cream { background: var(--sj-cream); }

/* Utility bar and header (their orange top bar + white nav) */
.sj-topbar { background: var(--sj-orange); color: #fff; font-size: 13px; letter-spacing: .5px; }
.sj-topbar .sj-wrap { display: flex; justify-content: space-between; align-items: center; min-height: 36px; gap: 12px; flex-wrap: wrap; }
.sj-topbar a { color: #fff; font-weight: 700; }
.sj-header { background: #fff; box-shadow: 0 2px 18px rgba(32,35,36,.08); }
.sj-header .sj-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 16px; flex-wrap: wrap; }
.sj-logo img { height: 52px; width: auto; display: block; }
.sj-nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.sj-nav a.sj-navlink { color: var(--sj-ink); font-weight: 600; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; }
.sj-nav a.sj-navlink:hover { color: var(--sj-orange); }

/* Buttons */
.sj-btn { display: inline-block; font-family: 'Lexend', Arial, sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: 1px; padding: 14px 32px; border-radius: 12px; color: #fff !important;
  background: var(--sj-orange); box-shadow: 0 12px 36px rgba(0,0,0,.28); margin: 6px 8px 6px 0;
  transition: transform .15s ease, background .15s ease; }
.sj-btn:hover { background: var(--sj-orange-dark); transform: translateY(-2px); }
.sj-btn--blue { background: var(--sj-blue-btn); }
.sj-btn--blue:hover { background: #0074A5; }
.sj-btn--small { font-size: 15px; padding: 10px 22px; box-shadow: 0 6px 18px rgba(0,0,0,.18); margin: 0; }

/* Headings with the yellow bar */
.sj-kicker { font-weight: 700; font-size: 20px; letter-spacing: 5px; text-transform: uppercase; margin: 0 0 14px; }
.sj-h2 { font-family: 'Lexend', Arial, sans-serif; font-weight: 700; font-size: 40px; line-height: 1.15; color: var(--sj-blue); margin: 0 0 22px; }
.sj-h2--green { color: var(--sj-green-text); }
.sj-h2--white { color: #fff; }

/* Hero with photo, overlay and wave */
.sj-hero { position: relative; min-height: 640px; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; background: #333; overflow: hidden; }
.sj-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); }
.sj-hero::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -70px; height: 140px; background: #fff; border-radius: 50%; }
.sj-hero .sj-inner { position: relative; z-index: 1; padding: 96px 24px 140px; max-width: 900px; }
.sj-hero h1 { font-family: 'Lexend', Arial, sans-serif; font-weight: 900; font-size: 58px; line-height: 1.08; letter-spacing: 1px; margin: 0 0 30px; color: #fff; }
.sj-hero p.sj-lead { font-size: 20px; max-width: 700px; margin: 0 auto 30px; }

/* Two column */
.sj-two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.sj-photo { width: 100%; border-radius: 12px; display: block; box-shadow: 0 18px 48px rgba(32,35,36,.18); }
.sj-step { font-size: 18px; margin: 0 0 14px; }
.sj-step b { color: var(--sj-ink); }

/* Blue band with waves */
.sj-blue { background: var(--sj-band); color: #fff; padding: 140px 0 150px; position: relative; overflow: hidden; }
.sj-blue::before, .sj-blue::after { content: ""; position: absolute; left: -10%; right: -10%; height: 120px; background: #fff; border-radius: 50%; }
.sj-blue::before { top: -80px; }
.sj-blue::after { bottom: -80px; }
.sj-blue p { color: #fff; }
.sj-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.sj-checkcard { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); border-radius: 12px; padding: 26px 28px; }
.sj-checkcard h3 { font-family: 'Lexend', Arial, sans-serif; font-weight: 700; font-size: 22px; color: #fff; margin: 0 0 14px; }
.sj-checkcard p { margin: 0 0 10px; font-size: 17px; }
.sj-tick { display: inline-block; width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%;
  background: var(--sj-yellow); color: var(--sj-ink); font-weight: 900; font-size: 14px; margin-right: 12px; }

/* FAQ */
.sj-faq { border-bottom: 1px solid #E8EAEB; padding: 26px 0; }
.sj-faq h2 { font-family: 'Lexend', Arial, sans-serif; font-weight: 700; font-size: 21px; color: var(--sj-ink); margin: 0 0 10px; }
.sj-faq p { color: var(--sj-muted); margin: 0; }

/* Auth pages */
.sj-auth { text-align: center; padding: 56px 24px 12px; }
.sj-auth h1 { font-family: 'Lexend', Arial, sans-serif; font-weight: 900; font-size: 40px; color: var(--sj-ink); margin: 0 0 10px; }
.sj-auth p { color: var(--sj-muted); max-width: 470px; margin: 0 auto; }
.sj-help { text-align: center; color: var(--sj-muted); font-size: 15px; margin: 18px 0 56px; }
.sj-help a { color: var(--sj-orange-dark); font-weight: 700; }

/* My Application status page (light DOM LWC) */
.sj-status-hero { text-align: center; padding: 8px 24px 0; }
.sj-status-hero p { max-width: 520px; margin: 0 auto 8px; }
.sj-status-loading { color: var(--sj-muted); }
.sj-status-list { max-width: 640px; margin: 8px auto 0; padding: 0 24px; }
.sj-status-row { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid #E8EAEB; text-align: left; }
.sj-status-row:last-child { border-bottom: 0; }
.sj-status-dot { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 900; font-size: 15px; margin-top: 2px; }
.sj-status-dot--done { background: var(--sj-green); color: #fff; }
.sj-status-dot--active { background: var(--sj-yellow); color: var(--sj-ink); }
.sj-status-dot--pending { background: #E8EAEB; color: #8A8D8F; }
.sj-status-body h3 { font-family: 'Lexend', Arial, sans-serif; font-weight: 700; font-size: 18px; color: var(--sj-ink); margin: 0 0 4px; }
.sj-status-body p { margin: 0; font-size: 16px; color: var(--sj-muted); }

/* My Application hub (c:summerJobsMyApplication). Phone first; wider screens add to it.
   Step states: todo, doing, done, locked. Flat and quiet on purpose: no shadows, no gradients. */
.sj-hub { background: #fff; }
.sj-hub-wrap { max-width: 880px; margin: 0 auto; padding: 28px 20px 8px; }
.sj-hub-title { font-family: 'Lexend', Arial, sans-serif; font-weight: 900; font-size: 32px; line-height: 1.15; color: var(--sj-blue); margin: 0 0 6px; }
.sj-hub-headline { font-size: 17px; line-height: 1.5; color: var(--sj-muted); margin: 0 0 20px; }
.sj-hub-quiet { color: var(--sj-muted); }
.sj-hub-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* progress block */
.sj-hub-progress { border: 1px solid #E1E4E6; border-radius: 12px; padding: 20px 18px; margin: 16px 0 8px; }
.sj-hub-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sj-hub-progress-label { font-weight: 700; font-size: 15px; color: var(--sj-ink); }
.sj-hub-percent { font-weight: 900; font-size: 30px; line-height: 1; color: var(--sj-ink); }
.sj-hub-bar { height: 10px; border-radius: 999px; background: #E8EAEB; overflow: hidden; }
.sj-hub-bar-fill { height: 100%; border-radius: 999px; background: var(--sj-orange); transition: width .7s cubic-bezier(.2,.8,.2,1); }

/* the six tiles: wide screens only, the list below carries the same information on a phone */
.sj-hub-strip { display: none; list-style: none; margin: 26px 0 4px; padding: 0; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.sj-hub-strip-item { position: relative; text-align: center; }
.sj-hub-strip-item:not(:last-child)::after { content: ''; position: absolute; top: 28px; left: calc(50% + 34px); width: calc(100% - 68px); height: 2px; background: #E1E4E6; }
.sj-hub-strip-item--done:not(:last-child)::after { background: var(--sj-green-text); }
.sj-hub-tile-btn { all: unset; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; width: 100%; padding: 2px 0; border-radius: 10px; }
.sj-hub-tile-btn:focus-visible { outline: 3px solid var(--sj-blue); outline-offset: 3px; }
.sj-hub-tile-label { font-weight: 600; font-size: 13px; line-height: 1.25; color: var(--sj-ink); }

.sj-hub-tile { position: relative; width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background .35s ease, color .35s ease; }
.sj-hub-tile--sm { width: 44px; height: 44px; border-radius: 11px; }
.sj-hub-tile--todo { background: #E4E6E7; color: #4A4D4F; }
.sj-hub-tile--doing { background: var(--sj-yellow); color: var(--sj-ink); }
.sj-hub-tile--done { background: var(--sj-green-text); color: #fff; }
.sj-hub-tile--locked { background: #F3F4F5; color: #7A7D7F; }
.sj-hub-badge { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.sj-hub-badge--done { background: #fff; color: var(--sj-green-text); }
.sj-hub-badge--lock { background: #fff; color: #6B6E70; }

/* next action, inside the progress block */
.sj-hub-next { margin-top: 18px; padding-top: 16px; border-top: 1px solid #E8EAEB; display: flex; flex-direction: column; gap: 14px; }
.sj-hub-next-label { font-weight: 700; font-size: 13px; color: var(--sj-orange-dark); margin: 0 0 2px; }
.sj-hub-next-title { font-family: 'Lexend', Arial, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--sj-ink); margin: 0; }
.sj-hub-next-detail { font-size: 16px; line-height: 1.45; color: var(--sj-muted); margin: 4px 0 0; }
.sj .sj-hub-next-btn, .sj .sj-hub-row-btn, .sj-hub .sj-btn { border: 0; cursor: pointer; font-family: 'Lexend', Arial, sans-serif; background: #D64205; color: #FFFFFF; }
.sj .sj-hub-next-btn { width: 100%; min-height: 52px; margin: 0; }

/* the steps: a flat checklist */
.sj-hub-list { list-style: none; margin: 8px 0 0; padding: 0; }
.sj-hub-row { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 12px; align-items: start; padding: 16px 2px; border-bottom: 1px solid #E8EAEB; scroll-margin-top: 90px; }
.sj-hub-row:last-child { border-bottom: 0; }
.sj-hub-row--flash { background: #F2FAFD; }
.sj-hub-row-body { min-width: 0; }
.sj-hub-row-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.sj-hub-row-title h2 { font-family: 'Lexend', Arial, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3; margin: 0; color: var(--sj-ink); }
.sj-hub-state { font-size: 14px; font-weight: 600; }
.sj-hub-state--todo { color: #4A4D4F; }
.sj-hub-state--doing { color: #8A5A00; }
.sj-hub-state--done { color: var(--sj-green-text); }
.sj-hub-state--locked { color: #6B6E70; }
.sj-hub-row-body p { margin: 3px 0 0; font-size: 16px; line-height: 1.5; color: var(--sj-muted); }
.sj .sj-hub-row-btn { grid-column: 1 / -1; width: 100%; min-height: 48px; margin: 0; font-size: 16px; }
.sj-hub-help { text-align: center; color: var(--sj-muted); font-size: 15px; line-height: 1.5; margin: 28px 0 40px; }
.sj-hub-help a { color: var(--sj-orange-dark); font-weight: 700; }

/* the flow panel: a full-screen sheet on a phone, a centered dialog on wide screens */
.sj-hub-sentinel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sj-hub-overlay { position: fixed; inset: 0; z-index: 9000; background: #fff; display: flex; flex-direction: column; }
.sj-hub-panel { display: flex; flex-direction: column; width: 100%; height: 100%; background: #fff; }
.sj-hub-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 8px 12px 20px; padding-top: max(12px, env(safe-area-inset-top)); border-bottom: 1px solid #E8EAEB; flex: 0 0 auto; }
.sj-hub-panel-head h2 { font-family: 'Lexend', Arial, sans-serif; font-weight: 900; font-size: 20px; margin: 0; color: var(--sj-ink); }
.sj-hub-close { all: unset; cursor: pointer; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--sj-ink); }
.sj-hub-close:hover { background: #F3F4F5; }
.sj-hub-close:focus-visible { outline: 3px solid var(--sj-blue); }
.sj-hub-panel-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); font-family: 'Lexend', Arial, sans-serif; font-size: 16px; }

@media (min-width: 861px) {
  .sj-hub-wrap { padding: 48px 24px 8px; }
  .sj-hub-title { font-size: 40px; }
  .sj-hub-headline { font-size: 19px; }
  .sj-hub-progress { padding: 28px 32px 24px; }
  .sj-hub-progress-label { font-size: 16px; }
  .sj-hub-percent { font-size: 40px; }
  .sj-hub-bar { height: 12px; }
  .sj-hub-strip { display: grid; }
  .sj-hub-next { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .sj .sj-hub-next-btn { width: auto; min-width: 200px; }
  .sj-hub-row { grid-template-columns: 44px 1fr auto; align-items: center; padding: 18px 4px; }
  .sj .sj-hub-row-btn { grid-column: auto; width: auto; min-width: 150px; }
  .sj-hub-overlay { background: rgba(32,35,36,.55); align-items: center; justify-content: center; padding: 4vh 16px; }
  .sj-hub-panel { max-width: 680px; height: auto; max-height: 92vh; border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.28); }
  .sj-hub-panel-head { padding: 16px 12px 16px 28px; }
  .sj-hub-panel-head h2 { font-size: 22px; }
  .sj-hub-panel-body { padding: 24px 28px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .sj-hub-bar-fill, .sj-hub-tile { transition: none; }
}
/* Phones turned sideways: with the keyboard up only about 160px is left, so the panel header gets slimmer. */
@media (max-height: 500px) and (max-width: 960px) {
  .sj-hub-panel { max-height: 100vh; border-radius: 0; }
  .sj-hub-panel-head { padding-top: max(2px, env(safe-area-inset-top)); padding-bottom: 2px; }
  .sj-hub-panel-head h2 { font-size: 17px; }
  .sj-hub-close { width: 44px; height: 44px; }
  .sj-hub-panel-body { padding-top: 12px; }
}

/* the global ".sj p" rule adds 18px text and a 16px bottom margin; reset it for the hub's own text */
.sj .sj-hub-headline { font-size: 17px; margin: 0 0 20px; }
.sj .sj-hub-next-label { font-size: 13px; margin: 0 0 2px; letter-spacing: 0; }
.sj .sj-hub-next-title { font-size: 20px; margin: 0; }
.sj .sj-hub-next-detail { font-size: 16px; margin: 4px 0 0; }
.sj .sj-hub-row-body p { font-size: 16px; margin: 3px 0 0; letter-spacing: 0; }
.sj .sj-hub-help { font-size: 15px; margin: 28px 0 40px; }
@media (min-width: 861px) { .sj .sj-hub-headline { font-size: 19px; } }

/* The flow's own buttons and inputs live inside shadow DOM, so page CSS cannot reach them. Salesforce styling hooks
   (custom properties) do pass through. Kept here in one block so the flows match the site. */
.sj-hub-panel {
  --slds-c-button-spacing-block-start: 14px;
  --slds-c-button-spacing-block-end: 14px;
  --slds-c-button-spacing-inline-start: 28px;
  --slds-c-button-spacing-inline-end: 28px;
  --slds-c-button-radius-border: 10px;
  --slds-c-button-line-height: 1.2;
  --slds-c-button-brand-color-background: #D64205;
  --slds-c-button-brand-color-border: #D64205;
  /* Keyboard focus on the flow's buttons: a solid ring (white gap + 3px ink) instead of the faint default
     (walkthrough F6). The brand button's :focus rule reads --slds-c-button-shadow-focus; some SLDS rules
     read the global token, so both are set. */
  --slds-c-button-shadow-focus: 0 0 0 2px #FFFFFF, 0 0 0 5px #202324;
  --slds-g-shadow-outset-focus-1: 0 0 0 2px #FFFFFF, 0 0 0 5px #202324;
  --slds-c-button-brand-color-background-hover: #B83903;
  --slds-c-button-brand-color-border-hover: #B83903;
  --slds-c-button-brand-color-background-active: #B83903;
  --slds-c-button-neutral-color-border: #8D9297;
  --slds-c-input-radius-border: 8px;
  --slds-c-input-color-border: #8D9297;
  --slds-c-input-spacing-vertical-start: 12px;
  --slds-c-input-spacing-vertical-end: 12px;
  --slds-c-input-color-border-focus: #0089C2;
  --slds-c-select-radius-border: 8px;
}

/* references page (c:summerJobsReferences) and the hub's link to it */
.sj .sj-refs-back { margin: 0 0 14px; font-size: 15px; }
.sj .sj-refs-back a, .sj .sj-hub-row-link a, .sj .sj-refs-more a { color: var(--sj-orange-dark); font-weight: 700; }
.sj .sj-refs-back a { display: inline-block; padding: 8px 0; }
.sj .sj-hub-row-link { margin: 6px 0 0; font-size: 16px; }
.sj .sj-hub-row-link a { display: inline-block; padding: 8px 0; }
.sj .sj-refs-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 15px; }
.sj .sj-refs-email { overflow-wrap: anywhere; }
.sj .sj-refs-more { margin: 18px 0 0; font-size: 16px; }


/* Sign-in forms (light DOM LWCs) */
.sj-form { max-width: 440px; margin: 8px auto 0; text-align: left; font-family: 'Lexend', Arial, sans-serif; padding: 0 24px; }
.sj-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sj-field { display: block; margin: 0 0 16px; }
.sj-field span { display: block; font-weight: 700; font-size: 15px; color: #202324; margin: 0 0 6px; }
.sj-field small { display: block; color: #4A4D4F; font-size: 13px; margin-top: 6px; }
.sj-input { width: 100%; font: inherit; font-size: 17px; padding: 13px 14px; border: 2px solid #D9D2CC; border-radius: 10px; background: #fff; color: #202324; }
.sj-input:focus { outline: none; border-color: #009FDF; box-shadow: 0 0 0 3px rgba(0,159,223,.2); }
.sj-submit { width: 100%; font: inherit; font-weight: 700; font-size: 18px; letter-spacing: 1px; color: #fff; background: #D64205;
  border: 0; border-radius: 12px; padding: 15px; cursor: pointer; box-shadow: 0 12px 36px rgba(0,0,0,.22); margin-top: 6px; }
.sj-submit:hover { background: #B83903; }
.sj-submit[disabled] { opacity: .6; cursor: wait; }
.sj-error { background: #FDECEA; color: #8A1C0B; border-radius: 10px; padding: 12px 14px; font-size: 15px; margin: 0 0 12px; }
.sj-success { background: #EEF7DD; color: #3E5C00; border-radius: 10px; padding: 14px; font-size: 16px; }
.sj-note { background: #FFF4E0; border-left: 5px solid #FFB81C; border-radius: 10px; padding: 14px 16px; margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: #202324; }
.sj-note strong { display: block; font-size: 16px; margin-bottom: 2px; }
.sj-note span { display: block; color: #4A4D4F; margin-bottom: 6px; }
.sj-hint { background: #EAF6FC; border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: #1B3A4B; margin: 0 0 16px; }
.sj-switch { text-align: center; font-size: 15px; color: #4A4D4F; margin: 14px 0 0; }
.sj-form a { color: #B83903 !important; font-weight: 700; }

.sj-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; font-weight: 700; font-size: 17px;
  color: #202324 !important; background: #fff; border: 2px solid #D9D2CC; border-radius: 12px; padding: 13px; margin-top: 8px; }
.sj-google:hover { border-color: #009FDF; }
.sj-google-g { font-weight: 900; font-size: 20px; color: #4285F4; }
.sj-or { text-align: center; color: #6B6E70; font-size: 14px; margin: 18px 0 4px; }

/* Footer */
.sj-footer { background: var(--sj-ink); color: #D9D6D3; padding: 56px 0; }
.sj-footer .sj-wrap { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.sj-footer img { height: 46px; width: auto; display: block; margin-bottom: 12px; }
.sj-footer p { font-size: 15px; margin: 0 0 6px; color: #D9D6D3; }
.sj-footer a { color: var(--sj-yellow); font-weight: 700; }
.sj-footer-contact, .sj-footer-contact p, .sj-footer-contact a { text-align: right; }

/* Platform overrides: DXP link styles beat class rules on <a>, and every layout
   section ships 16px padding (the gray frame). Literal colors on purpose. */
.comm-section-container { padding: 0 !important; }
.columns-content { max-width: none !important; }
.sj a.sj-btn { background: #D64205 !important; color: #FFFFFF !important; }
.sj a.sj-btn:hover { background: #B83903 !important; }
.sj a.sj-btn--blue { background: #007EB3 !important; }
.sj a.sj-btn--blue:hover { background: #0074A5 !important; }
.sj .sj-topbar a { color: #FFFFFF !important; }
.sj .sj-nav a.sj-navlink { color: #202324 !important; }
.sj .sj-nav a.sj-navlink:hover { color: #D64205 !important; }
.sj .sj-footer a { color: #FFB81C !important; }
.sj .sj-help a { color: #B83903 !important; }

@media (max-width: 860px) {
  .sj-two, .sj-checks { grid-template-columns: 1fr; gap: 36px; }
  .sj-hero { min-height: 560px; }
  .sj-hero h1 { font-size: 38px; }
  .sj-kicker { font-size: 14px; letter-spacing: 3px; }
  .sj-h2 { font-size: 30px; }
  .sj-section { padding: 64px 0; }
  .sj-blue { padding: 110px 0 120px; }
  .sj-nav { gap: 16px; }
  .sj-nav a.sj-navlink { font-size: 14px; }
  .sj-logo img { height: 42px; }
  .sj-btn { width: 100%; text-align: center; margin: 6px 0; }
  .sj-btn--small { width: auto; }
  .sj-row { grid-template-columns: 1fr; gap: 0; }
  .sj-hide-mobile { display: none !important; }
  .sj-footer-contact, .sj-footer-contact p, .sj-footer-contact a { text-align: left; }
  .sj-help { padding: 0 16px; }
  .sj-nav { flex-wrap: nowrap; gap: 12px; }
  .sj-nav a { white-space: nowrap; }
  .sj-logo img { height: 34px; }
  .sj-hero h1 { font-size: 34px; }
  .sj-header .sj-wrap { flex-wrap: nowrap; min-height: 68px; }
  .sj-topbar .sj-wrap a:first-child { display: none; }
}

/* Refinement layer (comes last so it wins): flat, neutral, easy to tap. No glow shadows, no warm tints. */
.sj-header { box-shadow: none; border-bottom: 1px solid #E8EAEB; }
.sj-btn, .sj-btn--small, .sj-submit { box-shadow: none; border-radius: 10px; }
.sj-btn:hover { transform: none; }
.sj-btn { min-height: 48px; padding: 13px 26px; line-height: 1.2; }
.sj-btn--small { min-height: 44px; padding: 10px 20px; }
.sj-photo { box-shadow: none; }
.sj-input { font-size: 16px; min-height: 50px; padding: 12px 14px; border: 1.5px solid #8D9297; border-radius: 8px; }
.sj-input:focus { border-color: #0089C2; box-shadow: none; outline: 2px solid #0089C2; outline-offset: 1px; }
.sj-submit { min-height: 52px; font-size: 17px; letter-spacing: .3px; }
.sj-google { border: 1.5px solid #8D9297; border-radius: 10px; min-height: 50px; }
.sj-note { background: #F3F4F5; border-left: 0; border-radius: 8px; }
.sj-hint { background: #F3F4F5; color: #202324; border-radius: 8px; }
.sj-hero::before { background: rgba(20, 22, 23, .5); }
.sj-checkcard { background: none; border: 0; padding: 0; }
.sj-checkcard p { display: flex; align-items: flex-start; gap: 12px; }
.sj-tick { flex: 0 0 26px; margin: 0; }
.sj-error { border-radius: 8px; }
.sj-error:focus { outline: 2px solid #8A1C0B; outline-offset: 2px; }
.sj-success { border-radius: 8px; }
/* Tap targets at least 44px tall (walkthrough F11): header Log In / Log Out, footer links, sign-in page links. */
.sj .sj-nav a.sj-navlink, .sj .sj-footer a, .sj-switch a, .sj-note a { display: inline-flex; align-items: center; min-height: 44px; }
.sj .sj-footer p { margin: 0; }
@media (max-width: 860px) {
  .sj-auth { padding: 32px 20px 4px; }
  .sj-auth h1 { font-size: 30px; }
  .sj-btn { min-height: 52px; }
  .sj-btn--small { min-height: 44px; }
}

/* WP20 site clarity (11/11). This site must not be mistaken for springhillexperiences.com:
   a labelled header on every page, no photos, no logo images, no wave shapes. Same fonts and colors.
   Header option A or B is the "Header option" property on c:summerJobsHeader. */

/* Option A: blue bar with the site name */
.sj-sitebar { background: #007EB3; color: #FFFFFF; }
.sj-sitebar .sj-wrap { display: flex; justify-content: space-between; align-items: center; gap: 4px 24px;
  flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.sj .sj-sitebar a.sj-sitebar-title { color: #FFFFFF !important; font-weight: 800; font-size: 22px; line-height: 1.25;
  text-decoration: none !important; }
.sj .sj-sitebar p.sj-sitebar-sub { color: #FFFFFF; font-size: 15px; line-height: 1.4; letter-spacing: 0; margin: 2px 0 0; }
.sj .sj-sitebar a.sj-mainsite { color: #FFFFFF !important; font-size: 15px; font-weight: 600;
  text-decoration: underline !important; display: inline-flex; align-items: center; min-height: 44px; }

/* Option B: grey line naming the site, site name as text in the header */
.sj-notice { background: #F3F4F5; border-bottom: 1px solid #E8EAEB; }
.sj-notice .sj-wrap { padding-top: 6px; padding-bottom: 6px; }
.sj .sj-notice p { font-size: 14px; line-height: 1.5; letter-spacing: 0; color: #202324; margin: 0; }
.sj .sj-notice a { color: #005F87 !important; font-weight: 600; text-decoration: underline !important; }
.sj-notice-text { margin-right: .35em; }
.sj a.sj-sitename { display: flex; flex-direction: column; line-height: 1.2; text-decoration: none !important; }
.sj .sj-sitename-brand { font-weight: 900; font-size: 22px; color: #D64205; }
.sj .sj-sitename-label { font-weight: 600; font-size: 16px; color: #202324; }

/* Header row: plain links in sentence case, one button */
.sj-header--clear .sj-wrap { min-height: 60px; justify-content: flex-end; }
.sj-notice + .sj-header--clear .sj-wrap { justify-content: space-between; }
.sj .sj-nav a.sj-navlink { text-transform: none; letter-spacing: 0; font-size: 16px; }
.sj .sj-nav a.sj-navlink:hover { text-decoration: underline !important; color: #202324 !important; }

/* Home: plain intro instead of the photo hero */
.sj-intro { background: #FFFFFF; padding: 48px 0 40px; border-bottom: 1px solid #E8EAEB; }
.sj .sj-intro h1 { font-family: 'Lexend', Arial, sans-serif; font-weight: 800; font-size: 40px; line-height: 1.15;
  color: #202324; margin: 0 0 12px; }
.sj .sj-intro p { font-size: 19px; color: #4A4D4F; max-width: 640px; }
.sj-section--plain { padding: 56px 0; }
.sj a.sj-textlink { color: #005F87 !important; font-weight: 600; text-decoration: underline !important; overflow-wrap: anywhere; }
.sj-blue { padding: 64px 0; }
.sj-blue::before, .sj-blue::after { content: none; }

/* Footer: site name as text */
.sj .sj-footer p.sj-footer-name { color: #FFFFFF; font-weight: 700; font-size: 17px; }

@media (max-width: 860px) {
  .sj-sitebar .sj-wrap { display: block; }
  .sj .sj-sitebar a.sj-sitebar-title { font-size: 19px; }
  .sj .sj-sitebar p.sj-sitebar-sub { font-size: 14px; }
  .sj .sj-sitebar a.sj-mainsite { font-size: 14px; }
  .sj-header--clear .sj-wrap { min-height: 56px; }
  .sj .sj-nav a.sj-navlink { font-size: 15px; }
  .sj .sj-sitename-brand { font-size: 18px; }
  .sj .sj-sitename-label { font-size: 14px; }
  .sj-intro { padding: 32px 0 28px; }
  .sj .sj-intro h1 { font-size: 30px; }
  .sj .sj-intro p { font-size: 17px; }
  .sj-section--plain { padding: 40px 0; }
  .sj-blue { padding: 48px 0; }
}
@media (max-width: 420px) {
  .sj-notice + .sj-header--clear .sj-wrap { flex-wrap: wrap; padding-top: 8px; padding-bottom: 4px; }
}