/* PRD 004 Phase 9: the old templates brought in line with the redesigned pages. Colour, type, spacing, radii,
   buttons, inputs and cards only: layouts, content and logic are untouched. Loaded with the redesigned header and
   footer (Phase 2 switch), so with the switch off none of it applies. Tokens are the ones in redesign.css. */

/* Old palette names pointed at the tokens: the teal pills/links, the grey text, the borders. */
.osy-rd-shell{--os-dark-teal:#012E50;--os-gray:#3A5771;--os-light-gray:#CBD7E1;--os-midnight:#012E50}
.osy-rd-shell .text-\[--os-teal\],.osy-rd-shell .text-\[--os-dark-teal\]{color:#014C85}
.osy-rd-shell a.text-\[--os-teal\]:hover,.osy-rd-shell a.text-\[--os-dark-teal\]:hover{color:#013D6A}

/* 9.1 Hero banners: token headline, navy overlay on small screens (the artwork itself is unchanged). */
.osy-rd-shell ._h1{font-size:var(--h1);letter-spacing:-.03em;line-height:1.05}
.osy-rd-shell div[style*="#141B39 -204.19%"]{background:linear-gradient(180deg,#012E50 0%,#014C85 71%,#0F6FB0 90%,rgba(1,76,133,0) 100%) !important}

/* 9.2 Title bands (lists, FAQs, reviews, learning centre, calculator, 404, payment pages). */
.osy-rd-shell .gradient-to-bottom{background:linear-gradient(180deg,#012E50 0%,#014C85 100%)}
.osy-rd-shell section.banner{padding-top:clamp(28px,3.4vw,48px)}

/* 9.3 Single templates (post, training, review, role widget). */
.osy-rd-shell main > .rank-math-breadcrumb{max-width:var(--maxw);margin:0 auto;padding:clamp(14px,1.6vw,22px) var(--pad-x) 0}
.osy-rd-shell main > .rank-math-breadcrumb p{margin:0;font:400 14px/1.4 "DM Sans",sans-serif;color:var(--ink-2)}
.osy-rd-shell main > .rank-math-breadcrumb a{color:var(--blue)}
.osy-rd-shell .rd-article-hero{max-width:var(--maxw);margin:clamp(12px,1.6vw,20px) auto 0;padding:0 var(--pad-x);height:auto}
.osy-rd-shell .rd-article-hero img{width:100%;height:clamp(200px,30vw,400px);object-fit:cover;border-radius:20px;display:block}
.osy-rd-shell .rd-article-hero--small{text-align:center}
.osy-rd-shell .rd-article-hero--small img{width:auto;max-width:100%;height:auto;max-height:400px;margin:0 auto}
.osy-rd-shell article > ._section > .lg\:px-32{padding-left:clamp(0px,2vw,24px);padding-right:clamp(0px,2vw,24px)}
.osy-rd-shell article .post-content{font:400 var(--body)/1.7 "DM Sans",sans-serif;color:var(--ink-2)}
.osy-rd-shell article .post-content :is(h2,h3,h4){font-family:"DM Sans",sans-serif;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.osy-rd-shell article .post-content a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.osy-rd-shell article .rd-author-photo{display:none}
.osy-rd-shell article > ._section aside ._btn-ghost,.osy-rd-shell main ._btn-ghost{border-width:1.5px}
/* Google preferred source card above "Return to Resources" (PRD 009). The Google G stays unaltered on a white tile.
   It and the Return button (.rd-return-btn) share one system: 56px tall, 8px corners, 1px border, navy fill on hover. */
.osy-rd-shell .fp-pref-card{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px;box-sizing:border-box;min-height:56px;padding:8px 12px;container-type:inline-size;background:#EDF6FB;border:1px solid #EDF6FB;border-radius:8px;color:#014C85;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}
.osy-rd-shell .fp-pref-card:hover{background:#014C85;border-color:#014C85;color:#fff}
.osy-rd-shell .fp-pref-card:hover .fp-pref-card__title{color:#fff}
.osy-rd-shell .fp-pref-card:focus-visible{outline:2px solid #014C85;outline-offset:2px}
.osy-rd-shell ._btn-primary._btn-ghost.rd-return-btn{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:56px;padding:0 1.75rem;border-width:1px;border-radius:8px}
/* Footer badge (PRD 009): the SVG is a white pill and cannot be recoloured, so hover adds a faint white ring that
   follows the pill, the same white as the social icons' hover; keyboard focus gets a solid white ring. */
.osy-rd-shell .rd-pref-badge{border-radius:22px;transition:box-shadow .15s}
.osy-rd-shell .rd-pref-badge:hover{box-shadow:0 0 0 4px rgba(255,255,255,.26)}
.osy-rd-shell .rd-pref-badge:focus-visible{outline:2px solid #fff;outline-offset:3px}
.osy-rd-shell .fp-pref-card__tile{flex:none;display:grid;place-items:center;box-sizing:border-box;width:32px;height:32px;border:1px solid #D4E6F1;border-radius:6px;background:#FFFFFF}
.osy-rd-shell .fp-pref-card__tile img{display:block;width:20px;height:20px}
.osy-rd-shell .fp-pref-card__text{min-width:0}
/* One line: the title is 19.2em wide, so below a ~350px card it scales down with the card (tile 32 + gap 10 = 42px). */
.osy-rd-shell .fp-pref-card__title{display:block;white-space:nowrap;font:700 min(15px,calc((100cqw - 42px) / 19.5))/1.3 "DM Sans",sans-serif;color:#014C85;transition:color .15s}
@media (prefers-reduced-motion:reduce){.osy-rd-shell .fp-pref-card,.osy-rd-shell .fp-pref-card__title,.osy-rd-shell .rd-pref-badge{transition:none}}

/* 9.4 Search results. */
.osy-rd-shell .rd-search{max-width:860px;margin:0 auto;padding:clamp(28px,4vw,56px) var(--pad-x)}
.osy-rd-shell .rd-search .page-title{font:700 var(--h2)/1.1 "DM Sans",sans-serif;letter-spacing:-.03em;color:var(--ink);margin:0 0 clamp(20px,3vw,32px)}
.osy-rd-shell .rd-search .page-title span{color:var(--blue)}
.osy-rd-shell .rd-search-item{padding:clamp(18px,2vw,26px);margin:0 0 14px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(1,46,80,.04),0 8px 22px rgba(1,46,80,.05)}
.osy-rd-shell .rd-search-item h2{font:700 var(--h3)/1.25 "DM Sans",sans-serif;letter-spacing:-.01em;margin:0 0 8px}
.osy-rd-shell .rd-search-item h2 a{color:var(--ink)}
.osy-rd-shell .rd-search-item h2 a:hover{color:var(--blue)}
.osy-rd-shell .rd-search-item p{font:400 16px/1.6 "DM Sans",sans-serif;color:var(--ink-2);margin:0}

/* 9.5 Archives: the category tabs scroll inside their own row instead of widening the page. */
.osy-rd-shell div:has(> .category-button){max-width:100%;overflow-x:auto;justify-content:safe center;scrollbar-width:none}
.osy-rd-shell .category-button{flex:0 0 auto}
.osy-rd-shell .category-button.active{color:#fff;border-color:var(--orange)}

/* 9.6 List pages: review cards, FAQ accordion. */
.osy-rd-shell .rd-review-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(20px,2vw,28px);box-shadow:0 1px 2px rgba(1,46,80,.04),0 8px 22px rgba(1,46,80,.05)}
.osy-rd-shell ._faq details{border-bottom:1px solid var(--line)}
.osy-rd-shell ._faq summary{padding-top:22px;padding-bottom:22px}
.osy-rd-shell ._faq summary :is(h3,h4,._h5){font-family:"DM Sans",sans-serif;font-weight:700;letter-spacing:-.01em;color:var(--ink)}

/* 9.8 / 9.9 / 9.11 Buttons, inputs, modals. */
.osy-rd-shell ._btn-primary._btn-ghost{background:transparent;border:1.5px solid #014C85;color:#014C85;font-weight:800;letter-spacing:.02em;border-radius:6px}
.osy-rd-shell ._btn-primary._btn-ghost:hover{background:#014C85;color:#fff}
.osy-rd-shell ._btn-primary._btn-dark{background:#012E50;color:#fff;border-radius:6px;font-weight:800}
.osy-rd-shell ._btn-primary._btn-dark:hover{background:#014C85}
.osy-rd-shell ._input{border:1.5px solid #8299AE;border-radius:8px;font-family:"DM Sans",sans-serif;color:var(--ink);box-shadow:0 1px 2px rgba(14,27,42,.14)}
.osy-rd-shell ._input:focus{border-color:#014C85;box-shadow:0 0 0 3px rgba(1,76,133,.14)}
.osy-rd-shell ._modal ._card{border-radius:20px}
.osy-rd-shell ._modal ._h3{color:var(--ink)}
.osy-rd-shell a:focus-visible,.osy-rd-shell button:focus-visible,.osy-rd-shell summary:focus-visible{outline:2px solid #014C85;outline-offset:2px}

/* 9.10 Legal pages and other long text: reading width and type. */
.osy-rd-shell .site__content > .post-content{max-width:820px;margin-left:auto;margin-right:auto;font:400 var(--body)/1.7 "DM Sans",sans-serif;color:var(--ink-2)}
.osy-rd-shell .site__content > .post-content :is(h1,h2,h3){font-family:"DM Sans",sans-serif;font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.osy-rd-shell .site__content > .post-content h1{font-size:var(--h1);margin-bottom:.6em}
.osy-rd-shell .site__content > .post-content a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* 9.11 Mobile section padding on the old templates. */
@media (max-width:600px){.osy-rd-shell #content ._section{padding-left:var(--pad-x);padding-right:var(--pad-x)}}

/* 9.12 Responsive teething: no-wrap spans from the design wrap on narrow screens instead of widening the page. */
@media (max-width:900px){.osy-rd [style*="white-space:nowrap"],.osy-rd-shell [style*="white-space:nowrap"]{white-space:normal!important}}
@media (max-width:900px){html:root{--why-note:none}}
/* 9.13 Role and industry index: two columns on phones (was one column, ~47,000 px tall). */
@media (max-width:767px){.osy-rd-shell .grid:has(> a._card > h2._h4){grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.osy-rd-shell .grid > a._card:has(> h2._h4){justify-content:flex-start}.osy-rd-shell .grid > a._card > h2._h4{font-size:1rem;margin-top:12px;margin-bottom:8px;overflow-wrap:anywhere}}