/* CSS Reset */
/* Box sizing rules */
*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}

/* Set core root defaults */
html:focus-within {scroll-behavior: smooth;}

/* Set core body defaults */
body {min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; -webkit-font-smoothing: antialiased;}

/* Remove list styles on ul, ol elements */
ul, ol {list-style: none;}

/* A elements that don't have a class get default styles */
a:not([class]) {text-decoration-skip-ink: auto;}

/* Make images easier to work with */
img, picture, video, canvas, svg {display: block; max-width: 100%; height: auto;}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {html:focus-within {scroll-behavior: auto;}  *, *::before, *::after {animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}
}

/* Form elements reset */
button, input, select, textarea {font: inherit; border: none; background: transparent;}

button {cursor: pointer;}

/* Table reset */
table {border-collapse: collapse; border-spacing: 0;}

/* Typography reset */
h1, h2, h3, h4, h5, h6 {font-size: inherit; font-weight: inherit;}

/* Quote reset */
blockquote, q {quotes: none;}

/* Remove default margins */
p, h1, h2, h3, h4, h5, h6, figure, blockquote {margin: 0;}

/**************************************/
/* MatMed Careers - Critical Styles */
/**************************************/
/*            */
/* This file contains critical CSS  */
/* for the MatMed Careers website.  */
/* It includes essential styles for */
/* layout, typography, and key    */
/* components.        */
/*            */
/* This file is intended to be loaded */
/* early in the page load process   */
/* to ensure a fast initial rendering */
/* of the page.         */
/*            */
/**************************************/

:root {
  --maxpagewidth: 1840px; 
  --maxcontentwidth: 1440px; 
  --content-padding-inline: 80px; 
  --content-padding-block: 80px; 
  --scrollbar-width: initial;

 /* Colours */ 
 --primary: #2C6256; 
 --primary-100: #efffde; 
 --primary-200: #DBF0C5; 
 --secondary: #080807; 
 --soft-orange: #FBD891; 
 --light-cream: #FEF3DC; 
 /* --strong-pink: #cc3363; */
 --strong-purple: #2708A0; 
 --light-grayish-green: #f2f6ee;
 --black: #000000; 
 --white: #ffffff;

 --bg-white-alpha-50: rgb(from var(--white) r g b / 0.5); 
 --bg-white-alpha-75: rgb(from var(--white) r g b / 0.75); 
 --bg-light-grayish-green-alpha-50: rgb(from var(--light-grayish-green) r g b / 0.5);
 --cta: var(--primary); 
 --text-colour: var(--secondary);

 /* SVGs */ 
 --arrow-color: #000;
 --arrow-head-color: var(--arrow-color); 
 --arrow-tail-width: 5;  
 --arrow-head-width: 5;  
 --arrow-stroke-width: 1;  
 --logo-fill-color: var(--strong-purple);
 --arrow-color: var(--strong-purple); 
 --arrow-head-color: var(--primary); 
 --arrow-tail-color: var(--primary); 
 --arrow-stroke-width: 5; 
 --arrow-tail-dasharray: 0; 
 --circle-arrow-fill-color: var(--white);

 /* Fonts */ 
 --headingfont: "PlayfairDisplay", Georgia, serif; 
 --bodyfont: "OpenSans", Arial, sans-serif;

 /* Font Sizes */ 
 --rem-base: 16; font-size: calc(var(--rem-base) * 1px); 
 --font-size-xs: calc((var(--rem-base) / 2) * 1px); 
 --font-size-s: calc((var(--rem-base) - 2) * 1px); 
 --font-size-16: calc(16 / var(--rem-base) * 1rem); 
 --font-size-m: calc(var(--rem-base) * 1px); 
 --font-size-20: calc(20 / var(--rem-base) * 1rem); 
 --font-size-24: calc(24 / var(--rem-base) * 1rem); 
 --font-size-l: calc(24 / var(--rem-base) * 1rem); 
 --font-size-26: calc(26 / var(--rem-base) * 1rem); 
 --font-size-30: calc(30 / var(--rem-base) * 1rem); 
 --font-size-xl: calc(30 / var(--rem-base) * 1rem); 
 --font-size-32: calc(32 / var(--rem-base) * 1rem); 
 --font-size-36: calc(36 / var(--rem-base) * 1rem); 
 --font-size-44: calc(44 / var(--rem-base) * 1rem); 
 --font-size-46: calc(46 / var(--rem-base) * 1rem);
 --font-size-heading1: var(--font-size-46); 
 --font-size-heading2: var(--font-size-26);
 --base-font-size-primary-logo: calc(44 / var(--rem-base) * 1rem); 
 --font-size-primary-logo: clamp(calc(var(--base-font-size-primary-logo) - 30px), 8vw, var(--base-font-size-primary-logo));
 --font-size-secondary-logo: calc(14 / var(--rem-base) * 1rem);
 --line-height-m: calc(22 / var(--rem-base) * 1rem); 
 --line-height-39: calc(39 / var(--rem-base) * 1rem); 
 --line-height-46: calc(46 / var(--rem-base) * 1rem); 
 --line-height-heading1: calc(62 / var(--rem-base) * 1rem);
 --font-size-nav: var(--font-size-20);}

 /* Font faces */ 
 .arrow .tail, .arrow .head {vector-effect: non-scaling-stroke;}
 .arrow .tail {stroke: var(--arrow-tail-color, var(--arrow-color)); stroke-width: var(--arrow-tail-width, var(--arrow-stroke-width, 5)); stroke-dasharray: var(--arrow-tail-dasharray, 0);}
 .arrow .head {fill: var(--arrow-head-color, var(--arrow-color)); stroke: var(--arrow-head-color, var(--arrow-color)); stroke-width: calc(var(--arrow-stroke-width, 1) - 4);}
 .logo-nurse {fill: var(--logo-fill-color, #da5357);}
 .circle-arrow-path {fill: var(--circle-arrow-fill-color, #fff);}
 .chevron-path {fill: var(--chevron-fill-color, #fff);}


@font-face {font-family: "PlayfairDisplay"; src: url("../fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype"); font-display: swap;}

@font-face {font-family: "OpenSans"; src: url("../fonts/OpenSans-VariableFont_wdth,wght.ttf") format("truetype"); font-display: swap;}

/* Global styles */
/* Element styles */
html, body {font-size: var(--font-size-m);}
body {font-family: var(--bodyfont); color: var(--text-colour);}

/* Mobile menu scroll lock */
body.menu-open {overflow: hidden; padding-inline-end: var(--scrollbar-width, 0);}

/* header {margin-block-end: 80px; ;} */
h1, h2, h3, h4, h5, h6 {font-family: var(--headingfont); margin: 0 0 10px; font-weight: 700;}
h1 {font-size: var(--font-size-36);}
h2 {font-size: var(--font-size-30); color: var(--primary)}
h3 {font-size: var(--font-size-24);}
h4 {font-size: var(--font-size-20);}

p {margin: 0 0 20px; padding: 0;}
p:last-child {margin: 0;}

a {display: inline-block; text-decoration: none;}

/* Layout */
section:not(.full-width), .main-content {padding-inline: 30px;}
section>section:not(.full-width) {padding-inline: unset;}
section>section:not(.full-width):last-of-type {margin-block-end: 0;}

.two-columns {grid-template-columns: 300px 1fr; gap: 60px; align-items: start;}
.two-columns:has(.snav:empty) {grid-template-columns: 1fr;}

.grid {display: grid;}
.grid.grid-stack {grid-template-columns: 1fr; grid-template-rows: 1fr;}
.grid.grid-stack>div {grid-column: 1; grid-row: 1;}
.flex {display: flex;}

.full-width {width: 100%;}
.max-page {width: 100%; max-width: var(--maxpagewidth); margin: 0 auto;}
.max-content {width: 100%; max-width: var(--maxcontentwidth); margin: 0 auto; padding: 60px var(--content-padding-inline);}
.hide-overflow {overflow: hidden;}

/* Element classes */
svg.icon {pointer-events: none; height: inherit;}

.logos {justify-content: space-between; padding-block: 10px; align-items: center;}
.primary-logo {font-size: var(--font-size-primary-logo); font-family: var(--headingfont); font-weight: 700;}
.primary-logo a {color: var(--primary); grid-template-columns: auto 1fr; gap: 10.4px; align-items: center;}
.secondary-logo {color: var(--primary); font-size: var(--font-size-secondary-logo); display: grid; gap: 5px; align-items: center; width: fit-content;}
.secondary-logo .provided {color: var(--text-colour); text-align: left;}

/* Backgrounds */
.bg-light-green {background: var(--light-grayish-green)}

/* Navigation */
.nav {background: var(--primary); position: relative;}
.nav-toggle {display: none;}
.nav-overlay {display: none;}

.nav ul {justify-content: space-between; padding-block: 0;}
.nav li {flex-grow: 1;}
.nav li a {font-size: var(--font-size-nav); display: block; padding: 5px 40px; transition: all 0.3s ease; border: var(--primary) solid 2px; color: var(--white); text-align: center;}
.nav li:not(.selected):hover a {background: var(--light-grayish-green); color: var(--black)}
.nav li.selected a {background: var(--primary-200); color: var(--black); font-weight: 700;}

/* sNav */
.snav {background: var(--light-cream);}
.snav li a {display: block; padding: 10px 20px; font-size: 120%; border-top: 1px solid var(--primary); text-decoration: none; color: var(--primary);}
.snav > ul > li.selected > a {font-weight: 700; background: var(--primary); color: var(--white);}
.snav > ul > li.selected > ul > li.selected > a {background: var(--primary-200);}
.snav ul li ul li ul li a {padding-left: 40px;}
.snav ul li ul li ul li.selected a {background: var(--primary-100);}
.snav li:first-of-type a {border-top: none;}
nav.snav:empty {display: none;}
nav .snav-button {display: none;}

/* Page Title */
.title-wrap {width: 100%; position: relative;  background: var(--primary-200); min-height: 350px;}
.title-wrap .title {max-width: 1180px; width: 100%; margin: 0 auto; position: absolute; top: 0; left: 0; right: 0;  height: 100%;}
.title .inner {position: absolute; bottom: 40px; left: 0;  max-width: 100%;  z-index: 2; width: 100%;  box-sizing: border-box; padding: 20px;}
.title-wrap .title p {color: var(--primary); line-height: 110%; padding: 10px 40px 15px; font-size: var(--font-size-44); font-family: var(--headingfont); font-weight: 700; display: inline-block; background: var(--white);}
.title-wrap .title-image {max-width: 100%; width: 100%; position: absolute; top: 0; left: 0; overflow: hidden; height: 100%;}
.title-wrap .title-image .image {width: 100%;min-height:100%;background-size:cover;}
.title-wrap .title-image img {width: 100%;}

/* Banner */
.banner {position: relative; align-items: end;}
.banner .banner-image img {width: 100%; max-height: 443px; object-fit: cover; object-position: 0 0;}
.banner .heading {font-size: var(--font-size-heading1); font-weight: 700; line-height: 1.2; margin: 0;
 padding-inline: 40px; padding-block: 20px; background: var(--bg-white-alpha-75); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); display: inline-block; margin-block-end: 40px; color: var(--primary);}

/* Career Paths */
section.career-paths {padding-block-start: 60px; margin-block-end: 50px;}
.career-paths .intro {max-width: var(--maxcontentwidth); margin: 0 auto 40px;}
.career-lists {display: flex; flex-wrap: wrap; --gap-inline: 30px; gap: var(--gap-inline);}
.career-lists:last-of-type {margin-bottom: 50px;}
.career-lists .career-list {display: contents; gap: var(--gap-inline);}
.career-lists .career-list:last-of-type {margin-block-end: var(--gap-inline);}
.career-lists .career-list:nth-child(even) {flex-direction: row-reverse;}
.career-lists .career-list li {max-width: var(--maxpagewidth); background: var(--soft-orange); border-radius: 20px; padding-inline: 33px; padding-block: 40px; position: relative; flex: 1 0 calc(20% - var(--gap-inline));}
.career-lists .career-list li .content {display: flex; flex-direction: column; gap: 10px; height: 100%;}
.career-lists .career-list li .title {font-family: var(--headingfont); font-size: var(--font-size-l); font-weight: 700; color: var(--text-colour); text-align: center;}
.career-lists .career-list li .description {font-size: var(--font-size-m); line-height: var(--line-height-m); color: var(--text-colour); text-align: center;}
.career-lists .career-list li .button {text-decoration: none; background: var(--primary); color: var(--white); border: 2px solid var(--primary); font-size: var(--font-size-m); padding: 10px 20px; border-radius: 33px; text-align: center; width: 100%; transition: background-color 0.3s ease; margin-top: auto;}
.career-lists .career-list li .button:hover {background: transparent; color: var(--primary);}

svg.icon.arrow {position: absolute; width: 157px; height: 150px;}

/* Career Path Arrows - JavaScript-driven Configuration */
/* Hide all arrows by default */
.career-paths .career-item svg.icon.arrow {display: none; position: absolute; width: 157px; height: 150px; z-index: 10; pointer-events: none;}

/* FROM arrows - controlled by JS classes */
/* Very first item gets dashed red FROM arrow */
.career-paths .career-item.first-in-row.very-first-item svg.icon.arrow.from {display: block; left: -120px; top: 0; transform: translateY(-50%) rotate(0deg); --arrow-color: var(--strong-purple); --arrow-head-color: var(--strong-purple); --arrow-tail-color: var(--strong-purple); --arrow-tail-dasharray: 8 8;}

/* Other first-in-row items get standard FROM arrows */
.career-paths .career-item.first-in-row:not(.very-first-item) svg.icon.arrow.from {display: block; left: -120px; top: 0; transform: translateY(-50%) rotate(0deg); --arrow-color: var(--primary); --arrow-head-color: var(--primary); --arrow-tail-color: var(--primary); --arrow-tail-dasharray: 0;}

/* TO arrows - regular styling */
.career-paths .career-item.has-to-arrow svg.icon.arrow.to {display: block; right: -80px; --arrow-color: var(--primary); --arrow-head-color: var(--primary); --arrow-tail-color: var(--primary); --arrow-tail-dasharray: 0;}

/* TO arrows - last in row styling */
/* Very last item gets dashed red TO arrow */
.career-paths .career-item.last-in-row.very-last-item svg.icon.arrow.to {display: block; right: -80px; top: 50%; transform: translateY(-50%) scaleY(-1) rotate(280deg); --arrow-color: var(--strong-purple); --arrow-head-color: var(--strong-purple); --arrow-tail-color: var(--strong-purple); --arrow-tail-dasharray: 8 8;}

/* Other last-in-row items get standard TO arrows */
.career-paths .career-item.last-in-row:not(.very-last-item) svg.icon.arrow.to {display: block; right: -140px; top: unset; bottom: -150px; transform: translateY(-50%) scaleY(-1) rotate(280deg); --arrow-color: var(--primary); --arrow-head-color: var(--primary); --arrow-tail-color: var(--primary); --arrow-tail-dasharray: 0;}

/* Alternating arrow positions */
.career-paths .career-item.arrow-position-top svg.icon.arrow.to {top: -65px; transform: scaleY(-1) rotate(-40deg); right: -110px; left: unset;}
.career-paths .career-item.arrow-position-bottom svg.icon.arrow.to {bottom: -55px; transform: rotate(-45deg);}

/* Mobile single column special cases */
.career-paths .career-item.mobile-first svg.icon.arrow.to {right: -80px; top: 50%; transform: translateY(-50%) rotate(0deg);}
.career-paths .career-item.mobile-alternating-left svg.icon.arrow.to {left: -80px; right: unset; top: 50%; transform: translateY(-50%) rotate(180deg);}
.career-paths .career-item.mobile-alternating-right svg.icon.arrow.to {right: -80px; top: 50%; transform: translateY(-50%) rotate(0deg);}

.intro p {font-size: var(--font-size-24); line-height: var(--line-height-26); color: var(--text-colour);}

/* FOOTER */

footer {background: var(--primary); color: var(--white); font-family: var(--bodyfont); font-size: var(--font-size-m); line-height: var(--line-height-m); padding: 20px 0 0;}
footer p, h3 {margin: 0; padding: 0; line-height: 140%; color: var(--black); font-style: normal; font-weight: normal;}
footer p {padding: 0 0 20px 0;}
footer a {text-decoration: none; color: var(--darkblue);}
footer a:hover {color: var(--darkblue); text-decoration: none;}
footer div:after {clear: both; content: ""; display: block; height: 0; visibility: hidden;}
footer h3 {font-family: var(--heading); line-height: 110%; margin: 0; padding: 0 0 20px 0;}
footer h3 {font-size: 130%; color: var(--pink);}
footer .sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
footer .footer-wrap {background: var(--primary); padding: 0 20px;}
footer .footer {max-width: 1180px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-items: start;}
footer .footer .col:first-child {justify-self: start; text-align: left;}
footer .footer .col:last-child {justify-self: end; text-align: right; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px;}
footer .footer h3 {font-family: var(--headingfont); font-size: 150%; padding: 0 0 10px 0; color: var(--white);}
footer .footer p, footer .footer a {color: var(--white); text-decoration: none;}
footer .footer p {font-size: 90%; padding: 0 0 10px 0;}
footer .footer a:hover {color: var(--soft-orange);}
footer .footer p.socialicons a {width: 45px; height: 45px; border-radius: 50%; background: var(--white); fill: var(--primary); text-decoration: none; margin: 0 5px 0 0; display: inline-grid; align-items: center; justify-content: center; justify-items: center;}

p.socialicons a svg {width: 70%; height: 70%; fill: var(--primary);}

footer p {margin: 0; padding: 0; line-height: 140%; color: var(--black); font-style: normal; font-weight: normal;}
footer p {padding: 0 0 20px 0;}
footer a {text-decoration: none; color: var(--darkblue);}
footer a:hover {color: var(--darkblue); text-decoration: none;}
footer div:after {clear: both; content: ""; display: block; height: 0; visibility: hidden;}
footer .bottom-footer-wrap {padding: 0 20px;}
footer .bottom-footer {max-width: 1180px; width: 100%; margin: 0 auto; padding: 15px 0; text-align: center;}
footer .bottom-footer p {color: var(--white); padding: 0; font-size: 80%; text-align: left;}
footer .bottom-footer p a {color: var(--white); text-decoration: none;}

@media screen and (max-width: 1710px) {
  .career-paths .career-list li .button {padding-inline: 10px;}
}

@media screen and (max-width: 1610px) {
  .career-paths .career-list li .button {font-size: var(--font-size-s);}
}

@media screen and (max-width: 1610px) {
  .career-paths .career-list li {flex: 1 0 calc(25% - 20px);}
  .career-paths .career-list li .button {font-size: var(--font-size-s);}
}

@media screen and (max-width: 1300px) {
  .career-paths .career-list li .title {font-size: 20px}
}

@media screen and (max-width: 1200px) {
  .nav li a {padding-inline: 30px;}
}

@media screen and (max-width: 1180px) {
  :root {--font-size-nav: var(--base);}
}

@media screen and (max-width: 1150px) {
  .career-paths .career-list li {flex: 1 0 calc(calc(100% / 3) - 20px);}
}

@media screen and (max-width: 1024px) {
  .secondary-logo {width: 30%;}
 .two-columns {grid-template-columns: 270px auto; gap: 40px;}
}

@media screen and (max-width: 940px) {
  .secondary-logo {display: none;}
}

@media screen and (max-width: 990px) {
  .nav li.active a {padding-inline: 20px;}
}

@media screen and (max-width: 880px) {
  .career-paths .career-list li {flex: 1 0 calc(50% - 20px);}
}

@media screen and (max-width: 880px) {
  .nav li a {padding-inline: 15px;}
}

@media screen and (max-width: 790px) { 
  .banner .heading {padding-inline: 0; padding-block: 20px; margin-block-end: 0;}
  .grid.grid-stack>div:first-child {grid-row: 2;}
  .grid.grid-stack>div:last-child {grid-row: 1;}
}

@media screen and (max-width: 768px) {
  :root {--content-padding-inline: 20px;}
 header {margin-block-end: 30px;}
  /* Mobile Navigation Styles */ 
  .nav {padding: 15px 20px; display: flex; justify-content: flex-end; align-items: center;}
  /* Hamburger button */ 
  .nav-toggle {display: flex; flex-direction: column; justify-content: space-around; width: 33px; height: 30px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1002; position: relative; margin-left: auto;}
  .hamburger-line {width: 100%; height: 3px; background: var(--white); transition: all 0.3s ease; transform-origin: center;}
  /* Hamburger animation to X */ 
  .nav-toggle[aria-expanded="true"] .hamburger-line {background: var(--primary);}
  .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {transform: rotate(45deg) translate(8px, 6px);}
  .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {opacity: 0;}
  .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {transform: rotate(-45deg) translate(8px, -6px);}
  /* Overlay */ 
  .nav-overlay {display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;}
  .nav-overlay.active {opacity: 1; visibility: visible;}
  /* Mobile menu */ 
  .nav-menu {position: fixed; top: 0; right: 0; height: 100vh; width: 50%; background: var(--primary); transform: translateX(100%); transition: transform 0.3s ease; z-index: 1000; overflow-y: auto; padding-top: 123px;}
  .nav-menu.active {transform: translateX(0);}
  body.menu-open .primary-logo .logo-image {--logo-fill-color: var(--white);}
  .nav-menu.active .hamburger-line {background-color: var(--primary);}
  .nav-menu ul {flex-direction: column; gap: 0; padding: 0; margin: 0; max-width: none; padding-inline: 0;}
  .nav-menu li {border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); width: 100%;}
  .nav-menu li a {padding: 12px 30px 11px; font-size: var(--font-size-l); border-bottom: none;}
  .nav-menu li.active {background: var(--light-grayish-green);}
  .nav-menu li:not(.active):hover {background: rgba(255, 255, 255, 0.1);}
  /* Primary logo appears above mobile menu */ body.menu-open .primary-logo a {position: relative; z-index: 1001; color: var(--white);}
  /* Career Paths */ 
  .career-paths .career-list {grid-template-columns: repeat(3, 1fr); gap: 20px;}
  .career-paths .career-list li {width: calc(50% - 10px);}
  .career-paths .career-list li .button {padding-inline: 10px;}
  footer .footer {grid-template-columns: unset;}
}

@media screen and (max-width: 667px) {
  .two-columns {grid-template-columns: 1fr;}
  nav .snav-button {display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; padding: 20px; background: var(--primary); color: var(--white);}
  nav .snav-button svg.icon {width: 24px; height: 24px;}
  nav.snav button span.text {font-weight: 600; margin-right: 20px;}
  nav.snav > ul {/* display: none; */ padding-inline: 15px; background: var(--light-grayish-green); padding-block-end: 20px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;}
  nav li.selected:last-of-type a {border-left: 3px solid var(--primary);} 
  nav.snav br {display: none;}

  footer p {font-size: 90%;}
  footer .footer .col, .footer .col:first-child, .footer .col:last-child {width: 100%; padding: 0 0 20px 0;}
  footer .footer .col:last-child {padding: 0;}
}

@media screen and (max-width: 610px) {
  .career-paths .career-list li {flex: 1 0 100%;} .career-paths .career-lists:has(.career-list:nth-child(2)):not(:has(.career-list:nth-child(3))) .career-list:nth-child(odd) .career-item:nth-child(1) svg.icon.arrow.return {display: initial;} .career-paths .career-list:is(.career-list) .career-item:nth-child(odd).first-in-row.very-first-item svg.icon.arrow.from {left: -40px; top: 0; transform: rotate(-10deg) scaleY(1);}
  .career-paths .career-list:is(.career-list) .career-item:nth-child(odd) svg.icon.arrow {width: 100px; height: 114px; top: unset; right: -40px; bottom: -80px; left: unset; transform: rotate(135deg) scaleY(-1);}
  .career-paths .career-list:is(.career-list) .career-item:nth-child(even) svg.icon.arrow {width: 120px; top: unset; right: unset; bottom: -80px; left: -47px; transform: rotate(48deg);}
  /* Make arrows alternate properly across both ULs in mobile */ 
  .career-paths .career-list:nth-child(even) .career-item:nth-child(odd) svg.icon.arrow {width: 120px; top: unset; right: unset; bottom: -80px; left: -47px; transform: rotate(48deg);}
  .career-paths .career-list:nth-child(even) .career-item:nth-child(even) svg.icon.arrow {width: 100px; top: unset; right: -40px; bottom: -80px; left: unset; transform: rotate(135deg) scaleY(-1);} 
  /* return arrow - only for very last item */ 
  .career-paths .career-list:is(.career-list):not(:has(+ .career-list)) .career-item:last-child.very-last-item svg.icon.arrow {width: unset; height: unset; top: unset; right: -200px; bottom: -90px; left: unset; transform: rotate(-20deg);}
}

@media screen and (max-width: 500px) {
  :root {padding-inline-end: 0;}
  .secondary-logo {display: none;}
  .nav-menu {width: 100%;}
  .logos {display: block;}
  .provided {font-size: var(--font-size-s);}
  section.career-paths {padding-block-start: 40px; margin-block-end: 40px;}
  .career-paths .career-list li {width: 100%;}
  .career-paths .max-page {margin-block-end: 40px;}
}

/* CMS editable areas */
.editable div[class^="editable2"] + p {background: #909090!important; max-width: 1180px; margin: 0 auto;} /* make in page ADFs another colour */
.editable div[class="editable2"] + p {background: #383838!important;}
.editable.editableadf .editbar {background: #909090!important; max-width: 1180px; margin: 0 auto;}
.editable div[class^="editable3"] + p {background: #909090!important; max-width: 1180px; margin: 0 auto;} /* make in page ADFs another colour */
.editable div[class="editable3"] + p {background: #383838!important;}
.editable.editableadf .editbar {background: #909090!important; max-width: 1180px; margin: 0 auto;}

.grid-5050 {grid-template-columns: minmax(40px, 1fr) minmax(0, calc(var(--maxcontentwidth) / 2)) minmax(0, calc(var(--maxcontentwidth) / 2)) minmax(40px, 1fr);}
.grid-5050 .content-image {grid-column: 1 / 3; overflow: hidden;}
.grid-5050 .content-image img {width: 100%; height: 100%; object-fit: cover; object-position: 0 27%;}

.midwifery {background: var(--light-grayish-green);}

/* p.blockbutton {position: relative;}
a.link-button, p.blockbutton a {font-size: var(--font-size-26); font-family: var(--headingfont); font-weight: 700; color: var(--strong-purple); position: relative; padding-inline-end: 42px;}
a.link-button::after, p.blockbutton a::after {content: ""; background: url(../images/midwiferycareers/svgs/link-arrow.svg); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; width: 28px; height: 18px; top: 11px; margin-inline-start: 10px; transition: margin-inline-start 0.3s ease;}
a.link-button:hover::after, p.blockbutton:hover a::after {margin-inline-start: 15px; transition: margin-inline-start 0.3s ease;} */

.blockbutton a {display: inline-block; margin: 0; padding: 8px 20px; background: var(--primary); color: var(--white); font-weight: var(--fontweight-600); text-decoration: none; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; border-radius: 100vh;}
.blockbutton a:hover {background: var(--strong-purple);}

.arrowbutton a {color: var(--strong-purple); text-decoration: none; padding: 0; position: relative; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.arrowbutton a:after {content: "\f061"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: inherit; margin: 0 0 0 5px; display: inline-block; transition: transform 0.4s ease, color 0.2s ease;}
.arrowbutton a:hover {color: var(--primary);}
.arrowbutton a:hover:after {transform: translateX(5px);}

.midwifery .content .content-text {padding-block: 80px; padding-inline-start: 60px;}
.midwifery .content .content-text .text {max-width: calc(var(--maxcontentwidth) / 2); font-size: var(--font-size-26); font-weight: 700; line-height: var(--line-height-39); margin-block-end: 40px;}
.midwifery .content .content-text .text p.blockbutton, .midwifery .content .content-text .text p.arrowbutton {font-size: var(--font-size-20);}
.midwifery .content .content-text .links {gap: 10px;}

.our-vision {padding-block: var(--content-padding-block);}
.our-vision .section-heading {font-weight: 700;}
.our-vision .intro {margin-block-end: 20px;}
.our-vision .vision {font-family: var(--headingfont); font-size: var(--font-size-44); color: var(--primary); font-weight: 700; line-height: 60px;}
.our-vision .statements > *, .about-midwifery .content > *{flex: 1;}
.our-vision .statements:has(> :nth-child(3):last-child), .about-midwifery .content:has(> :nth-child(3):last-child) {gap: 30px;}
.our-vision .statements, .about-midwifery .content {gap: 60px;}
.our-vision .statements .image {display: block; overflow: hidden;}
.our-vision .statements a.image:hover img {transform: scale(1.1);}
.our-vision .statements .image img {border-top-left-radius: 20px; border-top-right-radius: 20px; object-fit: cover; object-position: top; width: 100%; transition: all 0.4s ease;}
.our-vision .statements .text {background: var(--primary); color: var(--white); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding-block: 40px; padding-inline: 40px; font-size: var(--font-size-30); letter-spacing: -1px; line-height: var(--line-height-46); font-weight: 700;}

.our-vision .statements .text .arrowbutton {font-size: var(--font-size-24);}
.our-vision .statements .text .arrowbutton a {color: var(--white);}

.about-midwifery {margin: 40px 0;}
.about-midwifery .content {grid-template-columns: repeat(3, 1fr); gap: 0 30px; justify-content: center;}
.about-midwifery .grid-item {display: flex; flex-direction: column;}
.about-midwifery .grid-item .image {border: 2px solid var(--primary); border-top-left-radius: 20px; border-top-right-radius: 20px;}
.about-midwifery .grid-item .image-inner {width: 100%; padding: 10px;}
.about-midwifery .grid-item .image-inner img {width: 100%; height: 100%; object-fit: contain; object-position: center;}
.about-midwifery .grid-item .text {background: var(--primary); color: var(--white); border: 2px solid var(--primary); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding-block: 20px; padding-inline: 30px; font-size: var(--font-size-20); line-height: var(--line-height-36); position: relative; flex-grow: 1;}
.about-midwifery .grid-item .text h2 {font-family: var(--secondaryfont); font-size: var(--font-size-24); font-weight: 700; margin-block-end: 10px; color: var(--white)}
.about-midwifery .grid-item .text svg {position: absolute; bottom: 10px; right: 10px; fill: var(--white);}

.section3-item {margin-block-end: 20px;}
.section3-item-heading {background: var(--strong-purple); color: var(--white); font-family: var(--headingfont); font-size: var(--font-size-24); font-weight: 700; cursor: pointer; border-top-left-radius: 20px; border-top-right-radius: 20px; padding: 20px; -webkit-user-select: none; user-select: none;}
.section3-item[data-collapsed="true"] .section3-item-heading {border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; transition: all 0.4s ease-in-out;}
.section3-item-text {background: var(--light-cream); padding: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; font-size: var(--font-size-20); overflow: hidden; transition: all 0.4s ease-in-out;}
.section3-item[data-collapsed="true"] .section3-item-text {padding-block: 0; max-height: 0;}
.section3-item[data-collapsed="false"] .section3-item-text {max-height: 1000px;}

/*
 * Responsive styles
*/
@media (max-width: 1370px) {
  .two-columns:has(.snav:not(:empty)) .about-midwifery .content {grid-template-columns: 1fr; gap: 20px;}
 .two-columns:has(.snav:not(:empty)) .about-midwifery .grid-item {grid-template-rows: auto; grid-template-columns: 1fr 2fr;}
 .two-columns:has(.snav:not(:empty)) .about-midwifery .grid-item .image {border-top-left-radius: 0; border-top-right-radius: 0; border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
 .two-columns:has(.snav:not(:empty)) .about-midwifery .grid-item .image-inner {max-height: 310px;}
 .two-columns:has(.snav:not(:empty)) .about-midwifery .grid-item .text  {border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-right-radius: 20px; border-bottom-right-radius: 20px;}
}

@media (max-width: 1024px) { 
  .section3-item-heading {font-size: var(--font-size-30);}
 .intro p,  .about-midwifery .grid-item .text, .section3-item-text {font-size: var(--font-size-20);}
}

@media (max-width: 980px) {.midwifery .content {grid-template-columns: 1fr; max-height: unset;}
}

@media (max-width: 980px) {
  .two-columns:has(.snav:not(:empty)) .about-midwifery .content {grid-template-columns: 1fr; gap: 20px;}
 .two-columns:has(.snav:not(:empty)) .about-midwifery .grid-item {grid-template-rows: auto; grid-template-columns: unset;}
 .two-columns:has(.snav:not(:empty)) .about-midwifery .grid-item .image {border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
 .two-columns:has(.snav:not(:empty)) .about-midwifery .grid-item .text  {border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
}

@media (max-width: 768px) {
  .midwifery .content .right {padding-inline-start: 20px; padding-block: 40px;}
 .about-midwifery .content {grid-template-columns: 1fr; gap: 20px;}
 .about-midwifery .grid-item {grid-template-rows: auto; grid-template-columns: 1fr 2fr;}
 .about-midwifery .grid-item .image {border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-left-radius: 20px; border-bottom-right-radius: 0;}
 .about-midwifery .grid-item .text {border-top-left-radius: 0; border-top-right-radius: 20px; border-bottom-left-radius: 0; border-bottom-right-radius: 20px;}
 .midwifery .content .right .text {max-width: calc(var(--maxcontentwidth) - 40px);}
 .our-vision .statements {flex-direction: column;}
}

@media (max-width: 500px) { 
  .about-midwifery .grid-item {grid-template-columns: 1fr;}
  .about-midwifery .grid-item .image {border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
  .about-midwifery .grid-item .text {border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
  .about-midwifery .grid-item .image-inner {max-height: 240px;}
  .midwifery .content .content-text {padding-inline: 30px; padding-block: 60px;}
  .midwifery .content .content-text .text {max-width: calc(var(--maxcontentwidth) - 40px);}
  .our-vision .vision {font-size: var(--font-size-36); line-height: var(--line-height-46);}
  .our-vision .statements .text {padding-block: 20px; padding-inline: 20px;}
}