/* Learning Transfer / The Wraparound: website integration mockups. Theme variables only. wa- prefix. */
:root {
  --wa-before: linear-gradient(90deg, var(--learning) 0%, var(--integrated) 100%);
  --wa-after: linear-gradient(90deg, var(--integrated) 0%, var(--comms) 100%);
}

/* Shared: actions row */
.wa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 26px; }
.wa-actions .button-primary { white-space: nowrap; }
.wa-actions .text-link { margin-top: 0; color: var(--integrated-dark); }

/* Calendar day columns inside a gradient segment */
.wa-days { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); pointer-events: none; }
.wa-days i { border-left: 1px solid rgba(12, 12, 12, .12); padding: 6px 0 0 7px; font-style: normal; font-family: var(--body); font-size: 10px; font-weight: 600; letter-spacing: .14em; color: rgba(12, 12, 12, .6); }
.wa-days i:first-child { border-left: 0; }

/* Mini band (services): spectrum either side, the partner's program as a light outlined card */
.wa-band { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; height: 64px; position: relative; }
.wa-band-seg { display: flex; align-items: center; height: 100%; padding: 0 18px; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 1.05rem; color: var(--ink); }
.wa-band-before { background: var(--wa-before); border-radius: 12px 0 0 12px; }
.wa-band-after { background: var(--wa-after); border-radius: 0 12px 12px 0; justify-content: flex-end; }
.wa-band-program { justify-content: center; height: calc(100% + 14px); background: var(--white); color: var(--ink); border: 2px solid var(--ink); border-radius: 14px; z-index: 1; }

/* Home diagram: three calendar cells, text inside */
.wa-diagram { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; height: 260px; }
.wa-cell { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 100%; padding: 22px 18px; color: var(--ink); font-size: .95rem; line-height: 1.35; overflow: hidden; }
.wa-cell > :not(.wa-days) { position: relative; }
.wa-cell-label { font: 600 .72rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.wa-cell-text { margin: 0; }
.wa-cell-before { background: var(--wa-before); border-radius: 14px 0 0 14px; }
.wa-cell-after { background: var(--wa-after); border-radius: 0 14px 14px 0; }
.wa-cell-program { height: calc(100% + 28px); justify-content: center; background: var(--white); border: 2px solid var(--ink); border-radius: 16px; z-index: 1; }
.wa-cell-program strong { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 1.9rem; line-height: 1.05; }

/* Caption row (services) */
.wa-captions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; font-size: .85rem; color: var(--ink-soft); }
.wa-captions li:nth-child(2) { text-align: center; }
.wa-captions li:nth-child(3) { text-align: right; }

/* A: homepage, straight after the hero */
.wa-home { padding-block: clamp(72px, 9vw, 120px); scroll-margin-top: 96px; }
.wa-home-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.wa-home h2 { margin-top: 14px; font-size: clamp(2rem, 3.4vw, 3rem); }
.wa-home .accent-word--integrated { color: var(--integrated-dark); }
.wa-home .large { margin-top: 20px; max-width: 34ch; }

/* B: How we help */
.wa-help { padding-block: 0 72px; scroll-margin-top: 96px; }
.wa-help-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 96px); align-items: center; padding-block: 56px; border-block: 1px solid var(--line); }
.wa-help h2 { margin-top: 10px; font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.wa-help-copy > p { margin-top: 14px; color: var(--ink-soft); max-width: 46ch; }
.wa-help-copy > p strong { color: var(--ink); }
.wa-help-list { margin: 18px 0 0; padding: 0; list-style: none; }
.wa-help-list li { padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); }
.wa-help-side .wa-band-seg { font-size: 1rem; }
.wa-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 26px; padding: 14px 0; border-block: 1px solid var(--ink); }
.wa-price span { color: var(--ink-soft); }
.wa-price b { font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--ink); }
.wa-help-link { color: var(--integrated-dark); }

/* E: service-page callout card */
.wa-callout { padding-block: clamp(56px, 7vw, 88px); }
.wa-callout-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 28px 56px; align-items: end; padding: clamp(28px, 4vw, 48px); background: var(--white); border-radius: 18px; overflow: hidden; }
.wa-callout-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: linear-gradient(90deg, var(--learning), var(--integrated) 50%, var(--comms)); }
.wa-callout h2 { margin-top: 10px; font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.wa-callout-copy p:last-child { margin-top: 12px; color: var(--ink-soft); max-width: 52ch; }
.wa-callout .wa-actions { margin-top: 0; }

.wa-home .eyebrow, .wa-help .eyebrow, .wa-callout .eyebrow { color: var(--ink-soft); opacity: 1; }

/* D: contextual aside */
.wa-aside { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .95rem; color: var(--ink); }
.wa-aside .text-link { display: inline; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.wa-aside .text-link::after { content: none; }

/* F: contact chip (a link, so it is not wired to the theme's reason-chip script) */
.wa-chip { display: inline-flex; align-items: center; padding: 10px 17px; border-radius: 999px; border: 2px solid var(--integrated-dark); background: transparent; color: var(--integrated-dark); font-size: .95rem; font-weight: 600; text-decoration: none; }
.wa-chip:hover { background: var(--integrated-dark); color: var(--white); }

/* C: navigation. Learning Transfer is styled like every other menu item. */
.wa-nav-sub { display: block; margin-top: 2px; font-family: var(--body); font-size: .8rem; font-weight: 400; color: var(--white-soft); }
/* Six links plus the action pill need more room than the live grid gives five.
   Below 1100px use the live menu toggle (same rules the live theme applies at 980px). From 1100px keep one line. */
@media (min-width: 1100px) {
  .site-header { gap: 24px; }
  .nav-links { gap: clamp(14px, 1.4vw, 22px); }
  .nav-links a, .nav-action { white-space: nowrap; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .site-header { gap: 18px; }
  .nav-links { gap: 14px; font-size: .86rem; }
  .nav-action { padding-inline: 16px; font-size: .86rem; }
}
@media (min-width: 981px) and (max-width: 1099px) {
  .nav-links, .nav-action { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .menu-toggle { display: flex; }
}

/* Focus */
.wa-home a:focus-visible, .wa-help a:focus-visible, .wa-aside a:focus-visible, .wa-callout a:focus-visible, .wa-chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 980px) {
  .wa-help-grid, .wa-home-grid { grid-template-columns: 1fr; gap: 32px; }
  .wa-callout-card { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 760px) {
  .wa-home { padding-block: 64px; }
  .wa-diagram { grid-template-columns: 1fr; height: auto; gap: 0; }
  .wa-cell { height: auto; min-height: 84px; padding: 26px 18px 14px; }
  .wa-cell-before { border-radius: 12px 12px 0 0; }
  .wa-cell-after { border-radius: 0 0 12px 12px; }
  .wa-cell-program { height: auto; margin-inline: 14px; border-radius: 12px; padding: 16px 18px; }
  .wa-captions { grid-template-columns: 1fr; gap: 4px; }
  .wa-captions li:nth-child(n) { text-align: left; }
  .wa-band { grid-template-columns: 1fr; height: auto; gap: 0; }
  .wa-band-seg { height: 44px; border-radius: 0; }
  .wa-band-before { border-radius: 10px 10px 0 0; }
  .wa-band-after { border-radius: 0 0 10px 10px; justify-content: flex-start; }
  .wa-band-program { height: 44px; margin-inline: 14px; border-radius: 10px; justify-content: flex-start; padding-inline: 18px; }
  /* Stacked band needs its natural height; a fixed desktop height made it spill over the captions. */
  .wa-help-side .wa-band { height: auto; }
  .wa-actions { display: grid; justify-items: start; gap: 16px; }
  .wa-actions .button-primary { width: 100%; justify-content: center; text-align: center; }
}

/* Theme paragraph colours would otherwise win inside the diagram cells. */
.wa-home .wa-cell-text { margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.35; }

/* Prototype only: floating link back to the prototype index, in High St Digital's brand (never ported to WordPress). */
.proto-home {
  position: fixed; right: 16px; bottom: 16px; z-index: 300; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid #c8f04c; border-radius: 0; background: #0a0a0a; color: #f0ede6;
  font: 500 11.5px/1 "DM Mono", ui-monospace, monospace; font-style: normal; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.proto-home b { font: 400 17px/1 "Bebas Neue", "Arial Narrow", sans-serif; letter-spacing: .08em; color: #f0ede6; }
.proto-home i { font-style: normal; color: #c8f04c; }
.proto-home:hover { background: #c8f04c; color: #0a0a0a; }
.proto-home:hover b, .proto-home:hover i { color: #0a0a0a; }
.proto-home:focus-visible { outline: 2px solid #c8f04c; outline-offset: 3px; }