/* Responsive layer. Original colours and typography remain in style.css. */
html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
.skip-content { position: absolute; left: 12px; top: -100px; z-index: 100; padding: 12px; background: white; }
.skip-content:focus { top: 8px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #1560bd; outline-offset: 3px; }
#container { display: grid; grid-template-columns: 170px minmax(0, 1fr) 200px; column-gap: 20px; align-items: start; }
#subnav { grid-column: 1; grid-row: 1; width: auto; float: none; }
#content { grid-column: 2; grid-row: 1; margin: 0 0 10px; min-width: 0; display: flow-root; }
#extras { grid-column: 3; grid-row: 1; width: auto; min-width: 0; margin-left: 0; float: none; }
#container > .center, #container > .clear, #footer { grid-column: 1 / -1; }
#content img, #extras img { max-width: 100% !important; height: auto !important; }
#content video, #content iframe, #content embed, #content object { max-width: 100%; }
#content iframe[src*="youtube"], #content iframe[src*="youtu.be"] { aspect-ratio: 16 / 9; height: auto; }
#content, #extras { overflow-wrap: anywhere; }
#content input, #content textarea, #content select { max-width: 100%; }
#content pre { max-width: 100%; overflow-x: auto; }
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1em 0; }
.table-scroll > table { margin: 0; }
.table-scroll:focus { outline-offset: -3px; }
.table-scroll-hint { display: none; font: 13px/1.4 Verdana, sans-serif; color: #666; margin-bottom: 6px; }
.table-scroll.has-overflow > .table-scroll-hint { display: block; }
.navigation-toggle { display: none; }
#site-navigation[hidden] { display: none; }
#subnav .sf-vertical li:focus-within > ul { left: 0; }
.publication-panel { display: contents; }
.publication-panel > summary { display: none; }

/* Keep desktop navigation in view without clipping its fly-out submenus.
   Short windows retain normal scrolling so every menu item stays reachable. */
@media (min-width: 761px) and (min-height: 600px) {
    #subnav { position: sticky; top: 16px; z-index: 10; }
    body.admin-bar #subnav { top: 48px; }
}

/* A long right sidebar scrolls independently so its last links stay reachable. */
@media (min-width: 861px) and (min-height: 600px) {
    #extras { position: sticky; top: 16px; max-height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: thin; }
    body.admin-bar #extras { top: 48px; max-height: calc(100vh - 112px); }
}

@media (max-width: 1000px) {
    #preload { left: 8px; top: 8px; }
    #preload img { width: 90px; height: auto; }
    #header { height: auto; min-height: 80px; padding: 10px 12px 12px 108px; }
    #header h1 { position: static; margin: 0; padding: 0; font-size: clamp(20px, 5.5vw, 30px); line-height: 1.15; letter-spacing: -0.5px; }
    #menu { position: static; height: auto; min-height: 38px; }
    #menu p { margin: 0; padding: 9px 12px 9px 108px; text-align: left; font-size: 12px; line-height: 1.4; }
    #main { position: static; background: none; }
    #container { padding-top: 16px; }
}

@media (min-width: 861px) and (max-width: 1000px) {
    #container { grid-template-columns: 150px minmax(0, 1fr) 180px; column-gap: 14px; }
}

@media (max-width: 860px) {
    #container { grid-template-columns: 170px minmax(0, 1fr); }
    #content { border-right: 0; padding-right: 0; }
    #extras { grid-column: 2; grid-row: 2; padding-top: 20px; border-top: 1px solid #ccc; }
}

@media (max-width: 760px) {
    #container { width: auto; margin: 0 14px; padding-top: 16px; grid-template-columns: minmax(0, 1fr); gap: 20px; }
    #subnav { grid-column: 1; grid-row: 1; margin: 0; min-width: 0; }
    #content { grid-column: 1; grid-row: 2; margin: 0; font-size: 16px; line-height: 1.55; text-align: left; }
    #extras { grid-column: 1; grid-row: 3; margin: 0; font-size: 16px; }
    #footer { margin-top: 15px; padding: 14px 0 70px; line-height: 1.6; }
    .responsive-ready .navigation-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #000; background: #3b3b3b; color: white; font: bold 14px Verdana, sans-serif; cursor: pointer; }
    .navigation-toggle span { color: inherit; font-size: 19px; }
    #subnav .sf-vertical ul, #subnav .sf-vertical li, #subnav .sf-vertical a { width: 100%; float: none; height: auto; }
    #subnav .sf-vertical ul { border: 0; }
    #subnav .sf-vertical li { border-bottom: 1px solid #666; }
    #subnav .sf-vertical a, #subnav .sf-vertical a:hover, #subnav .sf-vertical a:visited { display: block; min-height: 44px; padding: 11px 14px; line-height: 1.5; font-size: 14px; text-indent: 0; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
    #subnav .sf-vertical ul ul, #subnav .sf-vertical li:hover ul ul, #subnav .sf-vertical li.wpmhover ul ul { position: static; left: auto; top: auto; margin: 0; padding-left: 18px; background: #4a4a4a; }
    #subnav .sf-vertical ul ul a { font-weight: normal; }
    #content h1 { font-size: 26px; line-height: 1.25; letter-spacing: -0.5px; }
    #content h2, #content h3 { line-height: 1.35; }
    #content p { margin: 0.8em 0; }
    #content blockquote { margin: 1em 0; padding-left: 14px; border-left: 2px solid #ccc; text-indent: 0; }
    #content ul, #content ol { padding-left: 25px; }
    #content li { margin-bottom: 0.45em; }
    #content .alignleft, #content .alignright, #content [align="left"], #content [align="right"], #content [style*="float"] { float: none !important; max-width: 100%; margin-left: 0; margin-right: 0; }
    #content .wp-caption { width: auto !important; max-width: 100%; }
    #content input, #content textarea, #content select, #content button { font-size: 16px; }
    #content input[type="submit"], #content button { min-height: 44px; }
    #box1, #box2, #box3 { float: none; width: auto; margin: 10px 0; }
    .publication-panel { display: block; margin-bottom: 18px; border-bottom: 1px solid #ccc; }
    .publication-panel > summary { display: list-item; padding: 12px 4px; color: #1560bd; cursor: pointer; font-size: 15px; }
    #content .publication-panel [name="image"] { padding-left: 0 !important; }
    .publication-panel table { margin: 0 auto; }
    #content .section-layout-table, #content .section-layout-table > tbody { display: block; width: 100%; }
    #content .section-layout-table > tbody > tr { display: flex; flex-direction: column-reverse; width: 100%; }
    #content .section-layout-table > tbody > tr > td { display: block; width: 100%; padding: 0; min-width: 0; }
    #content .section-layout-table > tbody > tr > td:first-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; margin: 18px 0; }
    #content .section-layout-table .layout-empty { display: none; }
}