/* Help articles (the "help" post type) in the new design's type, colours and page frame.
   The article body is still WPBakery output; only its look is changed here. Scoped to body.single-help. */

body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) { --hg: var(--eds-gutter-phone); }
@media (min-width: 600px) { body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) { --hg: var(--eds-gutter-tablet); } }
@media (min-width: 1024px) { body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) { --hg: var(--eds-gutter-desktop); } }

body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .title-section .container,
body.single-help section#content > .container { width: 100%; max-width: calc(var(--eds-content-max) + 2 * var(--hg)); padding-inline: var(--hg); margin-inline: auto; }

/* ------------------------------------------------------------ title band */
/* The old slide-up on the title block replays on every page and looks like the breadcrumb jumping. */
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .title-section_text.wow { animation: none !important; transform: none !important; visibility: visible !important; opacity: 1 !important; }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) section.title-section { min-height: 0 !important; padding: 40px 0 36px; background: var(--eds-navy); }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .title-section .row { margin: 0; }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .title-section .row > div { width: 100%; max-width: none; padding: 0; flex: 0 0 100%; }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .title-section h1 { margin: 0; font: 700 30px/38px var(--eds-font-display); letter-spacing: -.3px; color: var(--eds-white); text-wrap: balance; }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) ul#breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 14px 0 0; padding: 0; list-style: none; font: 500 14px/20px var(--eds-font-body); }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) ul#breadcrumbs li { margin: 0; padding: 0; color: #d6e4ee; }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) ul#breadcrumbs a { color: var(--eds-white); font-weight: 500; text-decoration: none; }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) ul#breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Many articles belong to several roles and the trail picks one at random, so it stops at Support. */
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) ul#breadcrumbs li.item-cat:not(.item-custom-post-type-help), body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) ul#breadcrumbs li.item-cat:not(.item-custom-post-type-help) + .separator { display: none; }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) ul#breadcrumbs .fa-angle-right, body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) ul#breadcrumbs svg { font-size: 12px; color: var(--eds-sky); }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) ul#breadcrumbs :is(li, a, strong, .bread-help) { font-size: var(--eds-small); line-height: var(--eds-small-lh); }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) ul#breadcrumbs .bread-help { font-family: Poppins, sans-serif; font-weight: 500; color: #d6e4ee; }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) ul#breadcrumbs strong { font-weight: 500; color: #d6e4ee; }
@media (max-width: 599px) { body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) ul#breadcrumbs li.item-current, body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) ul#breadcrumbs li.separator:has(+ li.item-current) { display: none; } }
@media (min-width: 600px) { body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) section.title-section { padding: 48px 0 44px; } body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .title-section h1 { font-size: 34px; line-height: 42px; } }
@media (min-width: 1024px) { body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) section.title-section { padding: 56px 0 52px; } body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .title-section h1 { font-size: 40px; line-height: 48px; } }

/* ------------------------------------------- the four-role row, one place at every width */
body.single-help section#content { padding: 0; }
body.single-help .section-inner_help .wrapper, body.single-help .section-inner_help .grids { padding: 0; margin: 0; max-width: none; }
body.single-help .help_sidebar > .row { display: flex; flex-direction: column; margin: 0; }
body.single-help .help_sidebar > .row > .clear { display: none; }
body.single-help .help_sidebar .sidebar-bottom { display: none !important; }
body.single-help .help_sidebar .sidebar.col-md-2,
body.single-help .section-inner_help .sidebar { display: block !important; order: -1; width: 100%; max-width: none; flex: 0 0 auto; margin: 0; padding: 28px 0 24px; border-bottom: 1px solid var(--eds-line); }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar { display: grid; gap: 12px; margin: 0; padding: 0; }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar::before { content: "Help for"; font: 700 14px/20px var(--eds-font-display); color: var(--eds-slate); }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar ul li { display: block; margin: 0; padding: 0; border: 0; }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar ul li :is(i, svg) { display: none !important; }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar ul li:has(a[href*="students"]) { order: 1; }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar ul li:has(a[href*="administrators"]) { order: 2; }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar ul li:has(a[href*="teachers"]) { order: 3; }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar ul li:has(a[href*="parents"]) { order: 4; }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar ul li a { display: block; margin: 0; padding: 11px 16px; border: 1.5px solid var(--eds-navy); border-radius: var(--eds-radius-pill); background: var(--eds-white); font: 600 15px/22px var(--eds-font-display); color: var(--eds-navy); text-align: center; text-decoration: none; transition: background var(--eds-t-hover) var(--eds-ease), color var(--eds-t-hover) var(--eds-ease); }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar ul li a:hover { background: var(--eds-navy); color: var(--eds-white); }
body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar ul li a:focus-visible { outline: 3px solid var(--eds-gold); outline-offset: 2px; }
@media (min-width: 600px) {
  body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar ul { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 620px; }
  body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar ul li a { padding: 9px 12px; }
}
@media (min-width: 1024px) {
  body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar { display: flex; align-items: center; gap: 14px; }
  body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar::before { white-space: nowrap; }
  body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar ul { display: flex; flex-wrap: wrap; gap: 10px; max-width: none; }
  body:is(.single-help, .parent-pageid-51, .eds-compare, .eds-hub) .support_bar ul li a { padding: 9px 20px; }
}

/* On articles the role row sits at the foot, as the news categories do, so a phone reader meets the article first
   and the roles are a way on once they have read it. Same chiclets as the news lists. */
body.single-help .help_sidebar .sidebar.col-md-2,
body.single-help .help_sidebar .section-inner_help .sidebar { order: 2; margin: 0; padding: 22px 0 var(--eds-section-y-phone); border-top: 1px solid var(--eds-line); border-bottom: 0; }
body.single-help .help_sidebar .support_bar { display: grid; gap: 8px; }
body.single-help .help_sidebar .support_bar::before { content: "More help for"; font: 700 13px/18px var(--eds-font-display); white-space: normal; }
body.single-help .help_sidebar .support_bar ul { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
body.single-help .help_sidebar .support_bar ul li a { display: inline-block; padding: 5px 14px; border: 1px solid var(--eds-grey); border-radius: 999px; background: var(--eds-white); font: 600 14px/20px var(--eds-font-display); color: var(--eds-navy); }
body.single-help .help_sidebar .support_bar ul li a:hover { border-color: var(--eds-navy); background: var(--eds-white); color: var(--eds-navy); }
@media (min-width: 600px) { body.single-help .help_sidebar .support_bar { grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; gap: 12px; } }
@media (min-width: 1024px) { body.single-help .help_sidebar .sidebar.col-md-2, body.single-help .help_sidebar .section-inner_help .sidebar { padding-bottom: var(--eds-section-y-tablet); } body.single-help .help_sidebar .support_bar { display: grid; } }

/* ------------------------------------------------------------- the article */
body.single-help .help_sidebar .help-detail-section { width: 100%; max-width: none; flex: 0 0 auto; margin: 0; padding: 36px 0 var(--eds-section-y-phone); }
@media (min-width: 1024px) { body.single-help .help_sidebar .help-detail-section { padding-top: 48px; padding-bottom: var(--eds-section-y-tablet); } }
body.single-help .postcontent_help { padding: 0; font-family: var(--eds-font-body); color: var(--eds-navy); }
body.single-help .postcontent_help p,
body.single-help .postcontent_help td,
body.single-help .postcontent_help th { font: 400 var(--eds-body)/var(--eds-body-lh) var(--eds-font-body); color: var(--eds-navy); }
body.single-help .postcontent_help [style*="font-size"] { font-size: var(--eds-lead) !important; line-height: var(--eds-lead-lh) !important; }
body.single-help .postcontent_help [style*="font-size"] strong, body.single-help .postcontent_help [style*="font-size"] b { font-weight: 600; }
body.single-help .postcontent_help h2 { margin: 1.6em 0 .5em; font: 700 28px/36px var(--eds-font-display); font-style: normal; letter-spacing: -.2px; color: var(--eds-navy); text-transform: none; }
body.single-help .postcontent_help h3 { margin: 1.5em 0 .5em; font: 700 22px/30px var(--eds-font-display); letter-spacing: 0; color: var(--eds-navy); text-transform: none; }
body.single-help .postcontent_help h4 { margin: 1.4em 0 .4em; font: 700 19px/27px var(--eds-font-display); color: var(--eds-navy); }
body.single-help .postcontent_help h5, body.single-help .postcontent_help h6 { margin: 1.3em 0 .4em; font: 700 17px/26px var(--eds-font-display); color: var(--eds-navy); text-transform: none; }
body.single-help .postcontent_help :is(h2, h3, h4, h5, h6) { text-wrap: balance; }
body.single-help .postcontent_help h2 b, body.single-help .postcontent_help h3 b, body.single-help .postcontent_help h4 b, body.single-help .postcontent_help h5 b { font-weight: inherit; }
body.single-help .postcontent_help .vc_row:first-child h2:first-child, body.single-help .postcontent_help .vc_row:first-child h3:first-child { margin-top: 0; }
body.single-help .postcontent_help p { margin: 0 0 1em; }
body.single-help .postcontent_help a { color: var(--eds-blue); text-decoration: underline; text-underline-offset: 3px; }
body.single-help .postcontent_help a:hover { color: var(--eds-navy); }
body.single-help .postcontent_help img { max-width: 100%; height: auto; margin: 0; padding: 0; }
body.single-help .postcontent_help table { width: 100%; border-collapse: collapse; }
body.single-help .postcontent_help th, body.single-help .postcontent_help td { font-size: var(--eds-small); line-height: var(--eds-small-lh); padding: 10px 12px; border: 1px solid var(--eds-line); vertical-align: top; }
body.single-help .postcontent_help th { background: var(--eds-mist); font-weight: 700; text-align: left; }

/* Bullets and numbers: the same face, size and colour as running text. The old page template styles lists with
   several inline rules, so these carry enough weight to replace them. Lists inside lists and inside tables step down. */
body.single-help .help_sidebar .postcontent_help :is(ul, ol) { margin: 0 0 1.1em; padding: 0 0 0 1.4em; font: 400 var(--eds-body)/var(--eds-body-lh) var(--eds-font-body); color: var(--eds-navy); }
body.single-help .help_sidebar .postcontent_help ul { list-style: disc; }
body.single-help .help_sidebar .postcontent_help ol { list-style: decimal; }
body.single-help .help_sidebar .postcontent_help :is(ul, ol) li { margin: 0 0 .4em; padding: 0 0 0 .25em; font: 400 var(--eds-body)/var(--eds-body-lh) var(--eds-font-body); color: var(--eds-navy); list-style: inherit; }
body.single-help .help_sidebar .postcontent_help ul li::marker { color: var(--eds-blue); }
body.single-help .help_sidebar .postcontent_help ol li::marker { font-weight: 600; color: var(--eds-navy); }
body.single-help .help_sidebar .postcontent_help li > :is(ul, ol) { margin: .4em 0 .2em; }
body.single-help .help_sidebar .postcontent_help ul ul { list-style: circle; }
body.single-help .help_sidebar .postcontent_help li :is(ul, ol) li { font-size: 16px; line-height: 25px; }
body.single-help .help_sidebar .postcontent_help li > p { margin: 0 0 .4em; }
body.single-help .help_sidebar .postcontent_help :is(td, th) :is(ul, ol) { margin-bottom: .5em; font-size: var(--eds-small); line-height: var(--eds-small-lh); }
body.single-help .help_sidebar .postcontent_help :is(td, th) li { font-size: var(--eds-small); line-height: var(--eds-small-lh); margin-bottom: .25em; }
body.single-help .help_sidebar .postcontent_help :is(b, strong, a, span) { font-family: inherit; }
body.single-help .help_sidebar .postcontent_help li :is(b, strong) { font-weight: 600; }

/* A comfortable line length for running text; pictures and tables may use the full width. */
body.single-help .postcontent_help .wpb_text_column .wpb_wrapper > :is(p, ul, ol, h2, h3, h4, h5, h6),
body.single-help .postcontent_help > :is(p, ul, ol, h2, h3, h4, h5, h6),
body.single-help .postcontent_help .wpb-content-wrapper > :is(p, ul, ol, h2, h3, h4, h5, h6) { max-width: 46rem; }

/* ======================================================= role index pages (/support/students/ and the other three) */
body.parent-pageid-51 .container:has(> .new_type_role) { width: 100%; max-width: calc(var(--eds-content-max) + 2 * var(--hg)); padding-inline: var(--hg); margin-inline: auto; }
body.parent-pageid-51 .news.new_type_role { display: flex; flex-direction: column; margin: 0; padding: 0 0 var(--eds-section-y-phone); }
body.parent-pageid-51 .new_type_role > .sidebar,
body.parent-pageid-51 .new_type_role > .col-md-10 { width: 100%; max-width: none; flex: 0 0 auto; padding: 0; margin: 0; }
body.parent-pageid-51 .new_type_role > .sidebar { order: -1; padding: 28px 0 24px; border-bottom: 1px solid var(--eds-line); }
body.parent-pageid-51 .support_bar ul li a.is-current { background: var(--eds-navy); color: var(--eds-white); }

body.parent-pageid-51 .my_new_heading { padding: 32px 0 8px; }
body.parent-pageid-51 .my_new_heading h3 { margin: 0; font: inherit; }
body.parent-pageid-51 .my_new_heading h3 p { margin: 0; max-width: 46rem; font: 400 var(--eds-lead)/var(--eds-lead-lh) var(--eds-font-body); color: var(--eds-navy); }

body.parent-pageid-51 .faqsection { margin: 0; padding: 32px 0 8px; border-top: 1px solid var(--eds-grey); }
body.parent-pageid-51 .my_new_heading + .faqsection { margin-top: 24px; }
body.parent-pageid-51 .new_heading_for_role h4 { margin: 0 0 18px; font: 700 24px/31px var(--eds-font-display); letter-spacing: -.2px; color: var(--eds-navy); }
body.parent-pageid-51 ul.new_point { margin: 0; padding: 0; list-style: none; }
body.parent-pageid-51 ul.new_point li { margin: 0; padding: 0; list-style: none !important; }
body.parent-pageid-51 .new_type_role .support_bar ul li { display: block; margin: 0; padding: 0; border: 0; }
body.parent-pageid-51 ul.new_point li a { font-family: var(--eds-font-body); }
body.parent-pageid-51 ul.new_point li ul li::before { content: none; }

/* Most asked and the Learn about list: rows with a hairline and an arrow */
body.parent-pageid-51 .faqsection:not(:has(.thumb)):not(:has(.parent-menu)) ul.new_point { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; }
body.parent-pageid-51 .faqsection:not(:has(.thumb)) ul.new_point > li { border-bottom: 1px solid var(--eds-line); }
body.parent-pageid-51 .faqsection:not(:has(.thumb)) ul.new_point a { position: relative; display: block; padding: 12px 28px 12px 0; font: 500 17px/26px var(--eds-font-body); color: var(--eds-navy); text-decoration: none; }
body.parent-pageid-51 .faqsection:not(:has(.thumb)) ul.new_point a::after { content: "\2192"; position: absolute; right: 4px; top: 12px; color: var(--eds-blue); transition: transform var(--eds-t-hover) var(--eds-ease); }
body.parent-pageid-51 .faqsection:not(:has(.thumb)) ul.new_point a:hover { color: var(--eds-blue); }
body.parent-pageid-51 .faqsection:not(:has(.thumb)) ul.new_point a:hover::after { transform: translateX(3px); }
body.parent-pageid-51 .faqsection ul.new_point a:focus-visible { outline: 3px solid var(--eds-gold); outline-offset: 2px; }
body.parent-pageid-51 .faqsection:has(.parent-menu) ul.new_point { display: block; column-count: 1; }
body.parent-pageid-51 ul.new_point > li.parent-menu { break-inside: avoid; padding-bottom: 8px; }
body.parent-pageid-51 ul.new_point > li.parent-menu > a { font-weight: 700; }
body.parent-pageid-51 ul.new_point > li > ul.sub-menu { margin: 0 0 4px; padding: 0 0 0 16px; list-style: none; }
body.parent-pageid-51 ul.new_point ul.sub-menu li { border: 0; }
body.parent-pageid-51 ul.new_point ul.sub-menu li a { padding: 7px 28px 7px 0; font: 400 16px/24px var(--eds-font-body) !important; color: var(--eds-navy); }
body.parent-pageid-51 ul.new_point ul.sub-menu li a::after { top: 7px; }

/* Videos: titles on play cards. The old layout gave every video the same picture, so the picture is not shown. */
body.parent-pageid-51 .faqsection:has(.thumb) ul.new_point { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
body.parent-pageid-51 .faqsection:has(.thumb) ul.new_point a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 16px; border: 1px solid var(--eds-grey); background: var(--eds-white); color: var(--eds-navy); text-decoration: none; transition: border-color var(--eds-t-hover) var(--eds-ease); }
body.parent-pageid-51 .faqsection:has(.thumb) ul.new_point a:hover { border-color: var(--eds-navy); }
body.parent-pageid-51 .faqsection:has(.thumb) ul.new_point a::before { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--eds-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M13 10l12 7-12 7z' fill='%23fff'/%3E%3C/svg%3E") center / 34px 34px no-repeat; }
body.parent-pageid-51 .faqsection:has(.thumb) .thumb { display: none; }
body.parent-pageid-51 .faqsection:has(.thumb) .vidtitle { font: 500 16px/22px var(--eds-font-body); color: var(--eds-navy); }

@media (min-width: 600px) {
  body.parent-pageid-51 .faqsection:has(.thumb) ul.new_point { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  body.parent-pageid-51 .faqsection:not(:has(.thumb)):not(:has(.parent-menu)) ul.new_point { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.parent-pageid-51 .faqsection:has(.parent-menu) ul.new_point { column-count: 2; column-gap: 40px; }
}
@media (min-width: 1024px) {
  body.parent-pageid-51 .faqsection:has(.thumb) ul.new_point { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.parent-pageid-51 .news.new_type_role { padding-bottom: var(--eds-section-y-tablet); }
}