/* Heavy Pencil: additive light refresh. Existing content, imagery and section colours retained. */
html { box-sizing: border-box; overflow-y: scroll; }
@supports (scrollbar-gutter: stable) {
  html { overflow-y: auto; scrollbar-gutter: stable; }
}
*, *::before, *::after { box-sizing: inherit; }
body.hp-refresh { margin: 0; background: #fff; color: #404047; font: 16px/1.6 Arial, Helvetica, sans-serif; text-align: left; }
.hp-purple { --hp-accent: #68318d; --hp-banner: url('/rw_common/themes/hpt_2011/images/bg_purple.jpg'); }
.hp-blue { --hp-accent: #174b83; --hp-banner: url('/rw_common/themes/hpt_2011/images/bg.jpg'); }
#container { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 28px; width: min(1080px,100%); margin: 0 auto; padding: 0 24px 32px; }
#header { grid-column: 1/-1; grid-row: 1; align-self: start; width: 100%; height: auto; min-height: 164px; padding: 28px 16px; background: var(--hp-banner) center top repeat-x; }
#header p { display: inline-block; max-width: 100%; padding: 10px 16px; background: rgba(255,255,255,.94); color: var(--hp-accent); font-size: 15px; line-height: 1.5; text-shadow: none; border-radius: 3px; }
#header b { display: block; color: var(--hp-accent); font-size: 28px; line-height: 1.2; text-shadow: none; }
#banner, #logo { display: none; }
#navcontainer { grid-column: 1/-1; grid-row: 2; width: 100%; margin: -8px 0 0; padding: 0 0 18px; border-bottom: 1px solid #ddd7e1; text-align: left; font-size: 15px; }
/* Reserve identical main/section menu rows on every page, including Home. */
#navcontainer > ul { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); grid-template-rows: minmax(64px,auto) minmax(104px,auto); gap: 6px; margin: 0; padding: 0; list-style: none; }
#navcontainer > ul > li > a { justify-content: center; text-align: center; min-width: 0; }
#navcontainer > ul > li { display: contents; }
#navcontainer a:link, #navcontainer a:visited, #navcontainer #current, #navcontainer .currentAncestor { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 14px; border: 1px solid var(--hp-accent); border-radius: 3px; background: var(--hp-accent); color: #fff; line-height: 1.4; text-shadow: none; text-decoration: none; }
#navcontainer #current, #navcontainer .currentAncestor { background: #fff; color: var(--hp-accent); }
#navcontainer a:hover { text-decoration: underline; text-underline-offset: 3px; }
#navcontainer ul ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(44px,auto)); grid-column: 1/-1; grid-row: 2; gap: 6px 10px; position: static; float: none; top: auto; width: 100%; margin: 0; padding: 8px 0 0; border: 0; list-style: none; }
#navcontainer ul ul li { display: block; }
#navcontainer ul ul li a { width: 100%; height: 100%; }
#navcontainer ul ul a:link, #navcontainer ul ul a:visited, #navcontainer ul ul li #current { min-height: 44px; padding: 8px 10px; background: #fff; color: var(--hp-accent); border: 1px solid #dcd5e2; text-shadow: none; }
#navcontainer ul ul li #current { border-color: var(--hp-accent); font-weight: bold; }
#contentContainer { grid-column: 2; grid-row: 3; float: none; width: auto; min-width: 0; padding: 0; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
#contentContainer span[style*="font-size"] { font-size: inherit !important; }
#contentContainer img { max-width: calc(100% - 6px); height: auto; }
#contentContainer .imageStyle, #contentContainer .image-left, #contentContainer .image-right { max-width: calc(100% - 6px); height: auto; }
#contentContainer .imageStyle { float: none; display: block; }
#contentContainer a:link, #contentContainer a:visited { color: var(--hp-accent); text-decoration: underline; text-underline-offset: 3px; }
#contentContainer table { max-width: 100%; }
#sidebar { grid-column: 1; grid-row: 3; align-self: start; float: none; width: 100%; min-width: 0; margin: 0; padding: 18px; border: 1px solid #e0dce4; border-left: 3px solid var(--hp-accent); background: #f5f3f6; color: #505058; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
#sidebar:has(>p.title:empty) { display: none; }
#sidebar p.title { color: var(--hp-accent); font-size: 15px; }
#breadcrumbcontainer { width: 100%; margin: 28px 0 0; padding: 16px 0; color: #62626a; font-size: 13px; border-top: 1px solid #e2dee6; }
#breadcrumbcontainer ul { margin: 0; padding: 0; }
#breadcrumbcontainer a:link, #breadcrumbcontainer a:visited { color: #62626a; }
#footer { padding: 12px 0; color: #62626a; font-size: 13px; text-align: left; }
#footer a { display: inline-block; min-height: 44px; padding: 9px 6px; }
a:focus-visible { outline: 3px solid #b45e00; outline-offset: 3px; }
.skip-link { position: absolute; top: 8px; left: -9999px; z-index: 10; padding: 10px 16px; background: #fff; color: #341b51; border: 2px solid #341b51; }
.skip-link:focus { left: 8px; }
@media (max-width:760px) {
  #container { grid-template-columns: minmax(0,1fr); gap: 20px; padding: 0 16px 24px; }
  #header { min-height: 164px; margin: 0 -16px; width: calc(100% + 32px); padding: 28px 16px 20px; }
  #header p { padding: 10px 12px; font-size: 14px; }
  #header b { font-size: clamp(21px,5.2vw,28px); }
  #navcontainer { margin: 0; padding-bottom: 16px; }
  #navcontainer > ul { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(64px,auto)) minmax(152px,auto); }
  #navcontainer > ul > li > a { flex: 1 1 130px; justify-content: center; padding: 9px 10px; }
  #navcontainer ul ul { grid-column: 1/-1; grid-row: 4; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(44px,auto)); gap: 6px; }
  #navcontainer ul ul li { flex: 1 1 130px; }
  #navcontainer ul ul li a { width: 100%; }
  #contentContainer { grid-column: 1; grid-row: 3; }
  #sidebar { grid-column: 1; grid-row: 4; }
  #contentContainer .image-left, #contentContainer .image-right { float: none; display: block; }
}
@media print {
  #navcontainer, .skip-link { display: none; }
  #container { display: block; width: 100%; padding: 0; }
  #header { background: none; min-height: 0; padding: 0 0 16px; }
  #sidebar { margin-top: 24px; }
}
